From 44a4e78075be24b0e854be09c0fcbc9ec41c5987 Mon Sep 17 00:00:00 2001 From: Andrew Nicols Date: Tue, 8 Mar 2022 11:18:08 +0800 Subject: [PATCH] MDL-74112 course: Support multiple mforms in format chooser The format chooser JS assumes that it is the only mform on the page. If it is not, and another mform appears before it, then the jump will not work. This change: * updates the formatchooser to modern JS * allows multiple forms to exist on the page * stops using id fields * always hide the format selection button --- course/amd/build/formatchooser.min.js | 12 +++++ course/amd/build/formatchooser.min.js.map | 1 + course/amd/src/formatchooser.js | 46 +++++++++++++++++++ course/edit_form.php | 12 +++-- .../moodle-course-formatchooser-debug.js | 31 ------------- .../moodle-course-formatchooser-min.js | 1 - .../moodle-course-formatchooser.js | 31 ------------- course/yui/src/formatchooser/build.json | 10 ---- .../yui/src/formatchooser/js/formatchooser.js | 26 ----------- .../src/formatchooser/meta/formatchooser.json | 9 ---- 10 files changed, 67 insertions(+), 112 deletions(-) create mode 100644 course/amd/build/formatchooser.min.js create mode 100644 course/amd/build/formatchooser.min.js.map create mode 100644 course/amd/src/formatchooser.js delete mode 100644 course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-debug.js delete mode 100644 course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-min.js delete mode 100644 course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser.js delete mode 100644 course/yui/src/formatchooser/build.json delete mode 100644 course/yui/src/formatchooser/js/formatchooser.js delete mode 100644 course/yui/src/formatchooser/meta/formatchooser.json diff --git a/course/amd/build/formatchooser.min.js b/course/amd/build/formatchooser.min.js new file mode 100644 index 00000000000..e8e324dee77 --- /dev/null +++ b/course/amd/build/formatchooser.min.js @@ -0,0 +1,12 @@ +define("core_course/formatchooser",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0; +/** + * Course format selection handler. + * + * @module core_course/formatchooser + * @copyright 2022 Andrew Nicols + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + * @since 4.0 + */ +const Selectors_fields={selector:'[data-formatchooser-field="selector"]',updateButton:'[data-formatchooser-field="updateButton"]'};_exports.init=()=>{document.querySelector(Selectors_fields.selector).addEventListener("change",(e=>{const form=e.target.closest("form"),updateButton=form.querySelector(Selectors_fields.updateButton),fieldset=updateButton.closest("fieldset"),url=new URL(form.action);url.hash=fieldset.id,form.action=url.toString(),updateButton.click()}))}})); + +//# sourceMappingURL=formatchooser.min.js.map \ No newline at end of file diff --git a/course/amd/build/formatchooser.min.js.map b/course/amd/build/formatchooser.min.js.map new file mode 100644 index 00000000000..0ae0501a153 --- /dev/null +++ b/course/amd/build/formatchooser.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"formatchooser.min.js","sources":["../src/formatchooser.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/ //\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * Course format selection handler.\n *\n * @module core_course/formatchooser\n * @copyright 2022 Andrew Nicols \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 4.0\n */\n\nconst Selectors = {\n fields: {\n selector: '[data-formatchooser-field=\"selector\"]',\n updateButton: '[data-formatchooser-field=\"updateButton\"]',\n },\n};\n\n/**\n * Initialise the format chooser.\n */\nexport const init = () => {\n document.querySelector(Selectors.fields.selector).addEventListener('change', e => {\n const form = e.target.closest('form');\n const updateButton = form.querySelector(Selectors.fields.updateButton);\n const fieldset = updateButton.closest('fieldset');\n\n const url = new URL(form.action);\n url.hash = fieldset.id;\n\n form.action = url.toString();\n updateButton.click();\n });\n};\n"],"names":["Selectors","selector","updateButton","document","querySelector","addEventListener","e","form","target","closest","fieldset","url","URL","action","hash","id","toString","click"],"mappings":";;;;;;;;;MAuBMA,iBACM,CACJC,SAAU,wCACVC,aAAc,2DAOF,KAChBC,SAASC,cAAcJ,iBAAiBC,UAAUI,iBAAiB,UAAUC,UACnEC,KAAOD,EAAEE,OAAOC,QAAQ,QACxBP,aAAeK,KAAKH,cAAcJ,iBAAiBE,cACnDQ,SAAWR,aAAaO,QAAQ,YAEhCE,IAAM,IAAIC,IAAIL,KAAKM,QACzBF,IAAIG,KAAOJ,SAASK,GAEpBR,KAAKM,OAASF,IAAIK,WAClBd,aAAae"} \ No newline at end of file diff --git a/course/amd/src/formatchooser.js b/course/amd/src/formatchooser.js new file mode 100644 index 00000000000..2cd49285ded --- /dev/null +++ b/course/amd/src/formatchooser.js @@ -0,0 +1,46 @@ +// This file is part of Moodle - http://moodle.org/ // +// Moodle is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// Moodle is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with Moodle. If not, see . + +/** + * Course format selection handler. + * + * @module core_course/formatchooser + * @copyright 2022 Andrew Nicols + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + * @since 4.0 + */ + +const Selectors = { + fields: { + selector: '[data-formatchooser-field="selector"]', + updateButton: '[data-formatchooser-field="updateButton"]', + }, +}; + +/** + * Initialise the format chooser. + */ +export const init = () => { + document.querySelector(Selectors.fields.selector).addEventListener('change', e => { + const form = e.target.closest('form'); + const updateButton = form.querySelector(Selectors.fields.updateButton); + const fieldset = updateButton.closest('fieldset'); + + const url = new URL(form.action); + url.hash = fieldset.id; + + form.action = url.toString(); + updateButton.click(); + }); +}; diff --git a/course/edit_form.php b/course/edit_form.php index 5654393df0a..50677e56a53 100644 --- a/course/edit_form.php +++ b/course/edit_form.php @@ -19,8 +19,7 @@ class course_edit_form extends moodleform { global $CFG, $PAGE; $mform = $this->_form; - $PAGE->requires->yui_module('moodle-course-formatchooser', 'M.course.init_formatchooser', - array(array('formid' => $mform->getAttribute('id')))); + $PAGE->requires->js_call_amd('core_course/formatchooser', 'init'); $course = $this->_customdata['course']; // this contains the data of this form $category = $this->_customdata['category']; @@ -220,13 +219,18 @@ class course_edit_form extends moodleform { } } - $mform->addElement('select', 'format', get_string('format'), $formcourseformats); + $mform->addElement('select', 'format', get_string('format'), $formcourseformats, [ + 'data-formatchooser-field' => 'selector', + ]); $mform->addHelpButton('format', 'format'); $mform->setDefault('format', $courseconfig->format); // Button to update format-specific options on format change (will be hidden by JavaScript). $mform->registerNoSubmitButton('updatecourseformat'); - $mform->addElement('submit', 'updatecourseformat', get_string('courseformatudpate')); + $mform->addElement('submit', 'updatecourseformat', get_string('courseformatudpate'), [ + 'data-formatchooser-field' => 'updateButton', + 'class' => 'd-none', + ]); // Just a placeholder for the course format options. $mform->addElement('hidden', 'addcourseformatoptionshere'); diff --git a/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-debug.js b/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-debug.js deleted file mode 100644 index aa2633ea7eb..00000000000 --- a/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-debug.js +++ /dev/null @@ -1,31 +0,0 @@ -YUI.add('moodle-course-formatchooser', function (Y, NAME) { - -var FORMATCHOOSER = function() { - FORMATCHOOSER.superclass.constructor.apply(this, arguments); -}; - -Y.extend(FORMATCHOOSER, Y.Base, { - initializer: function(params) { - if (params && params.formid) { - var updatebut = Y.one('#' + params.formid + ' #id_updatecourseformat'); - var formatselect = Y.one('#' + params.formid + ' #id_format'); - var ancestor = updatebut.ancestor('fieldset'); - var action = Y.one('form.mform').get('action'); - if (updatebut && formatselect) { - updatebut.setStyle('display', 'none'); - formatselect.on('change', function() { - Y.one('form.mform').set('action', action + '#' + ancestor.get('id')); - updatebut.simulate('click'); - }); - } - } - } -}); - -M.course = M.course || {}; -M.course.init_formatchooser = function(params) { - return new FORMATCHOOSER(params); -}; - - -}, '@VERSION@', {"requires": ["base", "node", "node-event-simulate"]}); diff --git a/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-min.js b/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-min.js deleted file mode 100644 index 3170899d8a4..00000000000 --- a/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser-min.js +++ /dev/null @@ -1 +0,0 @@ -YUI.add("moodle-course-formatchooser",function(t,o){var e=function(){e.superclass.constructor.apply(this,arguments)};t.extend(e,t.Base,{initializer:function(o){var e,n,r;o&&o.formid&&(e=t.one("#"+o.formid+" #id_updatecourseformat"),o=t.one("#"+o.formid+" #id_format"),n=e.ancestor("fieldset"),r=t.one("form.mform").get("action"),e&&o&&(e.setStyle("display","none"),o.on("change",function(){t.one("form.mform").set("action",r+"#"+n.get("id")),e.simulate("click")})))}}),M.course=M.course||{},M.course.init_formatchooser=function(o){return new e(o)}},"@VERSION@",{requires:["base","node","node-event-simulate"]}); \ No newline at end of file diff --git a/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser.js b/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser.js deleted file mode 100644 index aa2633ea7eb..00000000000 --- a/course/yui/build/moodle-course-formatchooser/moodle-course-formatchooser.js +++ /dev/null @@ -1,31 +0,0 @@ -YUI.add('moodle-course-formatchooser', function (Y, NAME) { - -var FORMATCHOOSER = function() { - FORMATCHOOSER.superclass.constructor.apply(this, arguments); -}; - -Y.extend(FORMATCHOOSER, Y.Base, { - initializer: function(params) { - if (params && params.formid) { - var updatebut = Y.one('#' + params.formid + ' #id_updatecourseformat'); - var formatselect = Y.one('#' + params.formid + ' #id_format'); - var ancestor = updatebut.ancestor('fieldset'); - var action = Y.one('form.mform').get('action'); - if (updatebut && formatselect) { - updatebut.setStyle('display', 'none'); - formatselect.on('change', function() { - Y.one('form.mform').set('action', action + '#' + ancestor.get('id')); - updatebut.simulate('click'); - }); - } - } - } -}); - -M.course = M.course || {}; -M.course.init_formatchooser = function(params) { - return new FORMATCHOOSER(params); -}; - - -}, '@VERSION@', {"requires": ["base", "node", "node-event-simulate"]}); diff --git a/course/yui/src/formatchooser/build.json b/course/yui/src/formatchooser/build.json deleted file mode 100644 index ddc0d4181a2..00000000000 --- a/course/yui/src/formatchooser/build.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "name": "moodle-course-formatchooser", - "builds": { - "moodle-course-formatchooser": { - "jsfiles": [ - "formatchooser.js" - ] - } - } -} diff --git a/course/yui/src/formatchooser/js/formatchooser.js b/course/yui/src/formatchooser/js/formatchooser.js deleted file mode 100644 index c74b66ae744..00000000000 --- a/course/yui/src/formatchooser/js/formatchooser.js +++ /dev/null @@ -1,26 +0,0 @@ -var FORMATCHOOSER = function() { - FORMATCHOOSER.superclass.constructor.apply(this, arguments); -}; - -Y.extend(FORMATCHOOSER, Y.Base, { - initializer: function(params) { - if (params && params.formid) { - var updatebut = Y.one('#' + params.formid + ' #id_updatecourseformat'); - var formatselect = Y.one('#' + params.formid + ' #id_format'); - var ancestor = updatebut.ancestor('fieldset'); - var action = Y.one('form.mform').get('action'); - if (updatebut && formatselect) { - updatebut.setStyle('display', 'none'); - formatselect.on('change', function() { - Y.one('form.mform').set('action', action + '#' + ancestor.get('id')); - updatebut.simulate('click'); - }); - } - } - } -}); - -M.course = M.course || {}; -M.course.init_formatchooser = function(params) { - return new FORMATCHOOSER(params); -}; diff --git a/course/yui/src/formatchooser/meta/formatchooser.json b/course/yui/src/formatchooser/meta/formatchooser.json deleted file mode 100644 index 9b2117840a4..00000000000 --- a/course/yui/src/formatchooser/meta/formatchooser.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "moodle-course-formatchooser": { - "requires": [ - "base", - "node", - "node-event-simulate" - ] - } -}