lib/editor/tiny/plugins/link/amd/src/ui.js

  1. // This file is part of Moodle - http://moodle.org/
  2. //
  3. // Moodle is free software: you can redistribute it and/or modify
  4. // it under the terms of the GNU General Public License as published by
  5. // the Free Software Foundation, either version 3 of the License, or
  6. // (at your option) any later version.
  7. //
  8. // Moodle is distributed in the hope that it will be useful,
  9. // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10. // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11. // GNU General Public License for more details.
  12. //
  13. // You should have received a copy of the GNU General Public License
  14. // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  16. /**
  17.  * Tiny Link UI.
  18.  *
  19.  * @module      tiny_link/ui
  20.  * @copyright   2023 Huong Nguyen <huongnv13@gmail.com>
  21.  * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  22.  */
  24. import {getFilePicker} from 'editor_tiny/options';
  25. import {displayFilepicker} from 'editor_tiny/utils';
  26. import LinkModal from 'tiny_link/modal';
  27. import {getPermissions} from "tiny_link/options";
  28. import {setLink, getCurrentLinkData, unSetLink} from "tiny_link/link";
  29. import Selectors from 'tiny_link/selectors';
  31. /**
  32.  * Handle action.
  33.  *
  34.  * @param {TinyMCE} editor
  35.  * @param {boolean} unlink
  36.  */
  37. export const handleAction = (editor, unlink = false) => {
  38.     if (!unlink) {
  39.         displayDialogue(editor);
  40.     } else {
  41.         unSetLink(editor);
  42.     }
  43. };
  45. /**
  46.  * Display the link dialogue.
  47.  *
  48.  * @param {TinyMCE} editor
  49.  * @returns {Promise<void>}
  50.  */
  51. const displayDialogue = async(editor) => {
  52.     const modal = await LinkModal.create({
  53.         templateContext: getTemplateContext(editor),
  54.     });
  56.     const $root = await modal.getRoot();
  57.     const root = $root[0];
  58.     const currentForm = root.querySelector('form');
  60.     root.addEventListener('click', (e) => {
  61.         const submitAction = e.target.closest(Selectors.actions.submit);
  62.         const linkBrowserAction = e.target.closest(Selectors.actions.linkBrowser);
  63.         if (submitAction) {
  64.             e.preventDefault();
  65.             setLink(currentForm, editor);
  66.             modal.destroy();
  67.         }
  68.         if (linkBrowserAction) {
  69.             e.preventDefault();
  70.             displayFilepicker(editor, 'link').then((params) => {
  71.                 filePickerCallback(params, currentForm, editor);
  72.                 return modal.destroy();
  73.             }).catch();
  74.         }
  75.     });
  77.     const linkTitle = root.querySelector(Selectors.elements.urlText);
  78.     const linkUrl = root.querySelector(Selectors.elements.urlEntry);
  79.     linkTitle.addEventListener('change', () => {
  80.         if (linkTitle.value.length > 0) {
  81.             linkTitle.dataset.useLinkAsText = 'false';
  82.         } else {
  83.             linkTitle.dataset.useLinkAsText = 'true';
  84.             linkTitle.value = linkUrl.value;
  85.         }
  86.     });
  88.     linkUrl.addEventListener('keyup', () => {
  89.         updateTextToDisplay(currentForm);
  90.     });
  91. };
  93. /**
  94.  * Get template context.
  95.  *
  96.  * @param {TinyMCE} editor
  97.  * @returns {Object}
  98.  */
  99. const getTemplateContext = (editor) => {
  100.     const data = getCurrentLinkData(editor);
  102.     return Object.assign({}, {
  103.         elementid: editor.id,
  104.         showfilepicker: getPermissions(editor).filepicker &&
  105.             (typeof getFilePicker(editor, 'link') !== 'undefined'),
  106.         isupdating: Object.keys(data).length > 0,
  107.     }, data);
  108. };
  110. /**
  111.  * Update the dialogue after a link was selected in the File Picker.
  112.  *
  113.  * @param {Object} params
  114.  * @param {Element} currentForm
  115.  * @param {TinyMCE} editor
  116.  */
  117. const filePickerCallback = (params, currentForm, editor) => {
  118.     if (params.url) {
  119.         const inputUrl = currentForm.querySelector(Selectors.elements.urlEntry);
  120.         inputUrl.value = params.url;
  121.         setLink(currentForm, editor);
  122.     }
  123. };
  125. /**
  126.  * Update the text to display if the user does not provide the custom text.
  127.  *
  128.  * @param {Element} currentForm
  129.  */
  130. const updateTextToDisplay = (currentForm) => {
  131.     const urlEntry = currentForm.querySelector(Selectors.elements.urlEntry);
  132.     const urlText = currentForm.querySelector(Selectors.elements.urlText);
  133.     if (urlText.dataset.useLinkAsText === 'true') {
  134.         urlText.value = urlEntry.value;
  135.     }
  136. };