copyDialog.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. const html = require('choo/html');
  2. const { copyToClipboard } = require('../utils');
  3. module.exports = function(name, url) {
  4. const dialog = function(state, emit, close) {
  5. return html`
  6. <send-copy-dialog
  7. class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
  8. >
  9. <h1 class="text-3xl font-bold my-4">
  10. ${state.translate('notifyUploadEncryptDone')}
  11. </h1>
  12. <p
  13. class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
  14. >
  15. ${state.translate('copyLinkDescription')} <br />
  16. ${name}
  17. </p>
  18. <input
  19. type="text"
  20. id="share-url"
  21. class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
  22. value="${url}"
  23. readonly="true"
  24. />
  25. <button
  26. class="btn rounded-lg w-full flex-shrink-0 focus:outline"
  27. onclick="${copy}"
  28. title="${state.translate('copyLinkButton')}"
  29. >
  30. ${state.translate('copyLinkButton')}
  31. </button>
  32. <button
  33. class="link-blue my-4 font-medium cursor-pointer focus:outline"
  34. onclick="${close}"
  35. title="${state.translate('okButton')}"
  36. >
  37. ${state.translate('okButton')}
  38. </button>
  39. </send-copy-dialog>
  40. `;
  41. function copy(event) {
  42. event.stopPropagation();
  43. copyToClipboard(url);
  44. event.target.textContent = state.translate('copiedUrl');
  45. setTimeout(close, 1000);
  46. }
  47. };
  48. dialog.type = 'copy';
  49. return dialog;
  50. };