51 lines
1.7 KiB
PHP
51 lines
1.7 KiB
PHP
<div x-data="{
|
|
shareModal: false,
|
|
copied: false,
|
|
copyClipboard: function(){
|
|
let share = document.getElementById('share-link');
|
|
share.select();
|
|
share.setSelectionRange(0, 99999);
|
|
navigator.clipboard.writeText(share.value);
|
|
this.copied = true;
|
|
}
|
|
}">
|
|
<button type="button" class="btn" @click="shareModal = true">
|
|
<i data-lucide="link"></i> Share
|
|
</button>
|
|
<div
|
|
class="modal-overlay"
|
|
x-show="shareModal"
|
|
x-effect="shareModal && $nextTick(() => window.refreshIcons($el))"
|
|
x-cloak
|
|
x-transition.opacity.duration.300ms
|
|
@keydown.escape.window="shareModal = false; copied = false;"
|
|
@focus="window.refreshIcons($el)"
|
|
>
|
|
<div @click.outside="shareModal = false; copied = false;" class="modal-window">
|
|
|
|
<div class="modal-header">
|
|
<span class="modal-title">Share this page</span>
|
|
<button type="button" @click="shareModal = false; copied = false;" class="modal-close">
|
|
<i data-lucide="x" size="18"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal-content">
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">URL</label>
|
|
<input type="text" id="share-link" disabled class="form-input" value="{{ $url }}">
|
|
</div>
|
|
|
|
<button type="button" class="btn" @click="copyClipboard()">
|
|
<i data-lucide="link" size="14"></i> Copy
|
|
</button>
|
|
|
|
<span class="whisper" x-show="copied">Copied !</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|