lib/editor/tiny/plugins/h5p/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/>.
  15. /**
  16. * Tiny H5P Content configuration.
  17. *
  18. * @module tiny_h5p/ui
  19. * @copyright 2022 Andrew Lyons <andrew@nicols.co.uk>
  20. * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  21. */
  22. import {displayFilepicker} from 'editor_tiny/utils';
  23. import {component} from './common';
  24. import {getPermissions} from './options';
  25. import Config from 'core/config';
  26. import {getList} from 'core/normalise';
  27. import {renderForPromise} from 'core/templates';
  28. import Modal from 'tiny_h5p/modal';
  29. import ModalEvents from 'core/modal_events';
  30. import Pending from 'core/pending';
  31. import {getFilePicker} from 'editor_tiny/options';
  32. let openingSelection = null;
  33. export const handleAction = (editor) => {
  34. openingSelection = editor.selection.getBookmark();
  35. displayDialogue(editor);
  36. };
  37. /**
  38. * Get the template context for the dialogue.
  39. *
  40. * @param {Editor} editor
  41. * @param {object} data
  42. * @returns {object} data
  43. */
  44. const getTemplateContext = (editor, data) => {
  45. const permissions = getPermissions(editor);
  46. const canShowFilePicker = typeof getFilePicker(editor, 'h5p') !== 'undefined';
  47. const canUpload = (permissions.upload && canShowFilePicker) ?? false;
  48. const canEmbed = permissions.embed ?? false;
  49. const canUploadAndEmbed = canUpload && canEmbed;
  50. return Object.assign({}, {
  51. elementid: editor.id,
  52. canUpload,
  53. canEmbed,
  54. canUploadAndEmbed,
  55. showOptions: false,
  56. fileURL: data?.url ?? '',
  57. }, data);
  58. };
  59. /**
  60. * Get the URL from the submitted form.
  61. *
  62. * @param {FormNode} form
  63. * @param {string} submittedUrl
  64. * @returns {URL|null}
  65. */
  66. const getUrlFromSubmission = (form, submittedUrl) => {
  67. if (!submittedUrl || (!submittedUrl.startsWith(Config.wwwroot) && !isValidUrl(submittedUrl))) {
  68. return null;
  69. }
  70. // Generate a URL Object for the submitted URL.
  71. const url = new URL(submittedUrl);
  72. const downloadElement = form.querySelector('[name="download"]');
  73. if (downloadElement?.checked) {
  74. url.searchParams.append('export', 1);
  75. }
  76. const embedElement = form.querySelector('[name="embed"]');
  77. if (embedElement?.checked) {
  78. url.searchParams.append('embed', 1);
  79. }
  80. const copyrightElement = form.querySelector('[name="copyright"]');
  81. if (copyrightElement?.checked) {
  82. url.searchParams.append('copyright', 1);
  83. }
  84. return url;
  85. };
  86. /**
  87. * Verify if this could be a h5p URL.
  88. *
  89. * @param {string} url Url to verify
  90. * @return {boolean} whether this is a valid URL.
  91. */
  92. const isValidUrl = (url) => {
  93. const pattern = new RegExp('^(https?:\\/\\/)?' + // Protocol.
  94. '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // Domain name.
  95. '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address.
  96. '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'); // Port and path.
  97. return !!pattern.test(url);
  98. };
  99. const handleDialogueSubmission = async(editor, modal, data) => {
  100. const pendingPromise = new Pending('tiny_h5p:handleDialogueSubmission');
  101. const form = getList(modal.getRoot())[0].querySelector('form');
  102. if (!form) {
  103. // The form couldn't be found, which is weird.
  104. // This should not happen.
  105. // Display the dialogue again.
  106. modal.destroy();
  107. displayDialogue(editor, Object.assign({}, data));
  108. pendingPromise.resolve();
  109. return;
  110. }
  111. // Get the URL from the submitted form.
  112. const submittedUrl = form.querySelector('input[name="url"]').value;
  113. const url = getUrlFromSubmission(form, submittedUrl);
  114. if (!url) {
  115. // The URL is invalid.
  116. // Fill it in and represent the dialogue with an error.
  117. modal.destroy();
  118. displayDialogue(editor, Object.assign({}, data, {
  119. url: submittedUrl,
  120. invalidUrl: true,
  121. }));
  122. pendingPromise.resolve();
  123. return;
  124. }
  125. const content = await renderForPromise(`${component}/content`, {
  126. url: url.toString(),
  127. });
  128. editor.selection.moveToBookmark(openingSelection);
  129. editor.execCommand('mceInsertContent', false, content.html);
  130. editor.selection.moveToBookmark(openingSelection);
  131. pendingPromise.resolve();
  132. };
  133. const getCurrentH5PData = (currentH5P) => {
  134. const data = {};
  135. let url;
  136. try {
  137. url = new URL(currentH5P.textContent);
  138. } catch (error) {
  139. return data;
  140. }
  141. if (url.searchParams.has('export')) {
  142. data.download = true;
  143. data.showOptions = true;
  144. url.searchParams.delete('export');
  145. }
  146. if (url.searchParams.has('embed')) {
  147. data.embed = true;
  148. data.showOptions = true;
  149. url.searchParams.delete('embed');
  150. }
  151. if (url.searchParams.has('copyright')) {
  152. data.copyright = true;
  153. data.showOptions = true;
  154. url.searchParams.delete('copyright');
  155. }
  156. data.url = url.toString();
  157. return data;
  158. };
  159. const displayDialogue = async(editor, data = {}) => {
  160. const selection = editor.selection.getNode();
  161. const currentH5P = selection.closest('.h5p-placeholder');
  162. if (currentH5P) {
  163. Object.assign(data, getCurrentH5PData(currentH5P));
  164. }
  165. const modal = await Modal.create({
  166. templateContext: getTemplateContext(editor, data),
  167. });
  168. const $root = modal.getRoot();
  169. const root = $root[0];
  170. $root.on(ModalEvents.save, (event, modal) => {
  171. handleDialogueSubmission(editor, modal, data);
  172. });
  173. root.addEventListener('click', (e) => {
  174. const filepickerButton = e.target.closest('[data-target="filepicker"]');
  175. if (filepickerButton) {
  176. displayFilepicker(editor, 'h5p').then((params) => {
  177. if (params.url !== '') {
  178. const input = root.querySelector('form input[name="url"]');
  179. input.value = params.url;
  180. }
  181. return params;
  182. })
  183. .catch();
  184. }
  185. });
  186. };