shareDialog.js 1.7 KB

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