fox-send/app/ui/copyDialog.js

77 lines
2.3 KiB
JavaScript
Raw Normal View History

2018-10-26 01:55:11 +00:00
const html = require('choo/html');
const { copyToClipboard } = require('../utils');
const qr = require('./qr');
2018-10-26 01:55:11 +00:00
2018-10-29 16:52:24 +00:00
module.exports = function(name, url) {
2019-04-26 20:30:33 +00:00
const dialog = function(state, emit, close) {
2018-10-26 01:55:11 +00:00
return html`
<send-copy-dialog
2019-03-01 20:56:10 +00:00
class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
>
2019-06-14 18:30:43 +00:00
<h1 class="text-3xl font-bold my-4">
${state.translate('notifyUploadEncryptDone')}
</h1>
2019-09-09 17:34:55 +00:00
<p
class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
>
${state.translate('copyLinkDescription')} <br />
2019-02-22 15:42:08 +00:00
${name}
2018-11-16 20:39:36 +00:00
</p>
<div class="flex flex-row items-center justify-center w-full">
<input
type="text"
id="share-url"
class="block w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
value="${url}"
readonly="true"
/>
<button
id="qr-btn"
class="w-16 m-1 p-1"
onclick="${toggleQR}"
title="QR code"
>
${qr(url)}
</button>
</div>
2019-02-20 23:58:44 +00:00
<button
2019-06-14 18:30:43 +00:00
class="btn rounded-lg w-full flex-shrink-0 focus:outline"
2019-02-20 23:58:44 +00:00
onclick="${copy}"
title="${state.translate('copyLinkButton')}"
2019-02-20 23:58:44 +00:00
>
${state.translate('copyLinkButton')}
2018-11-16 20:39:36 +00:00
</button>
2019-02-20 23:58:44 +00:00
<button
2019-09-09 17:34:55 +00:00
class="link-blue my-4 font-medium cursor-pointer focus:outline"
2019-01-11 09:15:03 +00:00
onclick="${close}"
2019-02-21 03:59:29 +00:00
title="${state.translate('okButton')}"
2018-11-16 20:39:36 +00:00
>
2019-02-20 23:58:44 +00:00
${state.translate('okButton')}
</button>
</send-copy-dialog>
2018-11-16 20:39:36 +00:00
`;
2018-10-26 01:55:11 +00:00
function toggleQR(event) {
event.stopPropagation();
const shareUrl = document.getElementById('share-url');
const qrBtn = document.getElementById('qr-btn');
if (shareUrl.classList.contains('hidden')) {
shareUrl.classList.replace('hidden', 'block');
qrBtn.classList.replace('w-48', 'w-16');
} else {
shareUrl.classList.replace('block', 'hidden');
qrBtn.classList.replace('w-16', 'w-48');
}
}
2018-10-26 01:55:11 +00:00
function copy(event) {
event.stopPropagation();
copyToClipboard(url);
event.target.textContent = state.translate('copiedUrl');
setTimeout(close, 1000);
}
};
2019-04-26 20:30:33 +00:00
dialog.type = 'copy';
return dialog;
2018-10-26 01:55:11 +00:00
};