# URL mit Mausklick kopieren

<p class="callout success">getestet mit Version **24.02**</p>

## Anforderung

Wenn man Bookstack als PWA nutzt ist es nur umständlich möglich, die URL zu kopieren wenn man diese jemandem schicken möchte.

## betroffene Dateien

<p class="callout info">Dateien müssen sich in der entsprechenden Struktur unterhalb des Themes befinden.  
Ordner = *kursiv*  
Dateien = **fett**</p>

- *entities*
    - **share-link.blade.php**
- *shelves*
    - **show.blade.php**
- *books*
    - **show.blade.php**
- *chapters*
    - **show.blade.php**
- *page*
    - **show.blade.php**

## Inhalte der Dateien

<details id="bkmrk-export-menu.blade.ph"><summary>share-link.blade.php</summary>

```html
<button type="button"
        id="share-link-button"
        data-success-text="Link copied to clipboard!"
        class="icon-list-item text-link">
    <span>@icon('share')</span>
    <span>{{ trans('common.share') }}</span>
</button>
<script nonce="{{ $cspNonce }}">
    (async function() {
        const shareButton = document.getElementById('share-link-button');
        shareButton.addEventListener('click', event => {
           copyTextToClipboard(window.location.href);
           window.$events.success(shareButton.dataset.successText);
        });

        async function copyTextToClipboard(text) {
            if (window.isSecureContext && navigator.clipboard) {
                await navigator.clipboard.writeText(text);
                return;
            }

            // Backup option where we can't use the navigator.clipboard API
            const tempInput = document.createElement('textarea');
            tempInput.style = 'position: absolute; left: -1000px; top: -1000px;';
            tempInput.value = text;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);
        }
    })()
</script>
```

</details><details id="bkmrk-revisions-index-row-"><summary>show.blade.php (gleich für jede Datei)</summary>

Hier wurde die Zeile 10 hinzugefügt (Zeilennummer nur für diesen Ausschnitt)

```html
            @if($watchOptions->canWatch() && !$watchOptions->isWatching())
                @include('entities.watch-action', ['entity' => $page])
            @endif
            @if(user()->hasAppAccess())
                @include('entities.favourite-action', ['entity' => $page])
            @endif
            @if(userCan('content-export'))
                @include('entities.export-menu', ['entity' => $page])
            @endif
            @include('entities.share-link', ['entity' => $page])
        </div>

    </div>
@stop
```

</details>## Screenshots

[![image.png](https://bookstack.jelinek-rz.de/uploads/images/gallery/2024-04/scaled-1680-/fUFimage.png)](https://bookstack.jelinek-rz.de/uploads/images/gallery/2024-04/fUFimage.png)