MDL-77009 tool_monitor: Replace YUI dropdown with ESM version

This commit is contained in:
Andrew Nicols
2023-01-24 16:22:07 +08:00
parent df502b3e4c
commit b1f844750b
11 changed files with 91 additions and 397 deletions
+3
View File
@@ -0,0 +1,3 @@
define("tool_monitor/dropdown",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0;_exports.init=()=>{const componentSelector=document.querySelector('[data-field="component"]'),eventSelector=document.querySelector('[data-field="eventname"]'),matchesComponent=(component,event)=>event.startsWith("\\".concat(component,"\\")),getEventOptionsForComponent=component=>(component=>Object.entries(JSON.parse(eventSelector.dataset.eventlist)).filter(((_ref,index)=>{let[eventName]=_ref;return 0===index||matchesComponent(component,eventName)})))(component).map((_ref2=>{let[name,description]=_ref2;const option=document.createElement("option");return option.value=name,option.text=description,option}));componentSelector.addEventListener("change",(()=>{eventSelector.innerHTML="",getEventOptionsForComponent(componentSelector.value).forEach((option=>{eventSelector.options.add(option)})),eventSelector.options.value=""}));const initialCount=eventSelector.options.length;[...eventSelector.options].reverse().forEach(((option,index)=>{""!==option.value&&(matchesComponent(componentSelector.value,option.value)||eventSelector.options.remove(initialCount-index-1))}))}}));
//# sourceMappingURL=dropdown.min.js.map
@@ -0,0 +1 @@
{"version":3,"file":"dropdown.min.js","sources":["../src/dropdown.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\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 <http://www.gnu.org/licenses/>.\n\n/**\n * Dropdown handler for the Event monitor tool.\n *\n * @module tool_monitor/dropdown\n * @copyright 2023 Andrew Lyons <[email protected]>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport const init = () => {\n const componentSelector = document.querySelector('[data-field=\"component\"]');\n const eventSelector = document.querySelector('[data-field=\"eventname\"]');\n\n const matchesComponent = (component, event) => event.startsWith(`\\\\${component}\\\\`);\n\n // Helper to fetch events for a component.\n const getEventsForComponent = (component) => {\n const events = Object.entries(JSON.parse(eventSelector.dataset.eventlist));\n return events.filter(([eventName], index) => {\n // Always return the Choose... option.\n if (index === 0) {\n return true;\n }\n return matchesComponent(component, eventName);\n });\n };\n\n // Helper to fetch the <option> elements for a compoment.\n const getEventOptionsForComponent = (component) => {\n return getEventsForComponent(component).map(([name, description]) => {\n const option = document.createElement('option');\n option.value = name;\n option.text = description;\n return option;\n });\n };\n\n // Change handler for the component selector.\n componentSelector.addEventListener('change', () => {\n eventSelector.innerHTML = '';\n getEventOptionsForComponent(componentSelector.value).forEach((option) => {\n eventSelector.options.add(option);\n });\n eventSelector.options.value = '';\n });\n\n // Set the initial value.\n // Rather than emptying the list and re-adding as the change handler does, remove any options that don't match.\n // This means that the current selection (when editing) is maintained.\n const initialCount = eventSelector.options.length;\n [...eventSelector.options].reverse().forEach((option, index) => {\n if (option.value === '') {\n // The first value is the \"Choose...\" pseudo-option.\n return;\n }\n if (!matchesComponent(componentSelector.value, option.value)) {\n eventSelector.options.remove(initialCount - index - 1);\n }\n });\n};\n"],"names":["componentSelector","document","querySelector","eventSelector","matchesComponent","component","event","startsWith","getEventOptionsForComponent","Object","entries","JSON","parse","dataset","eventlist","filter","index","eventName","getEventsForComponent","map","_ref2","name","description","option","createElement","value","text","addEventListener","innerHTML","forEach","options","add","initialCount","length","reverse","remove"],"mappings":"0JAuBoB,WACVA,kBAAoBC,SAASC,cAAc,4BAC3CC,cAAgBF,SAASC,cAAc,4BAEvCE,iBAAmB,CAACC,UAAWC,QAAUA,MAAMC,uBAAgBF,iBAe/DG,4BAA+BH,WAZNA,CAAAA,WACZI,OAAOC,QAAQC,KAAKC,MAAMT,cAAcU,QAAQC,YACjDC,QAAO,MAAcC,aAAZC,uBAEL,IAAVD,OAGGZ,iBAAiBC,UAAWY,cAMhCC,CAAsBb,WAAWc,KAAIC,YAAEC,KAAMC,yBAC1CC,OAAStB,SAASuB,cAAc,iBACtCD,OAAOE,MAAQJ,KACfE,OAAOG,KAAOJ,YACPC,UAKfvB,kBAAkB2B,iBAAiB,UAAU,KACzCxB,cAAcyB,UAAY,GAC1BpB,4BAA4BR,kBAAkByB,OAAOI,SAASN,SAC1DpB,cAAc2B,QAAQC,IAAIR,WAE9BpB,cAAc2B,QAAQL,MAAQ,YAM5BO,aAAe7B,cAAc2B,QAAQG,WACvC9B,cAAc2B,SAASI,UAAUL,SAAQ,CAACN,OAAQP,SAC7B,KAAjBO,OAAOE,QAINrB,iBAAiBJ,kBAAkByB,MAAOF,OAAOE,QAClDtB,cAAc2B,QAAQK,OAAOH,aAAehB,MAAQ"}
+74
View File
@@ -0,0 +1,74 @@
// 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 <http://www.gnu.org/licenses/>.
/**
* Dropdown handler for the Event monitor tool.
*
* @module tool_monitor/dropdown
* @copyright 2023 Andrew Lyons <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
export const init = () => {
const componentSelector = document.querySelector('[data-field="component"]');
const eventSelector = document.querySelector('[data-field="eventname"]');
const matchesComponent = (component, event) => event.startsWith(`\\${component}\\`);
// Helper to fetch events for a component.
const getEventsForComponent = (component) => {
const events = Object.entries(JSON.parse(eventSelector.dataset.eventlist));
return events.filter(([eventName], index) => {
// Always return the Choose... option.
if (index === 0) {
return true;
}
return matchesComponent(component, eventName);
});
};
// Helper to fetch the <option> elements for a compoment.
const getEventOptionsForComponent = (component) => {
return getEventsForComponent(component).map(([name, description]) => {
const option = document.createElement('option');
option.value = name;
option.text = description;
return option;
});
};
// Change handler for the component selector.
componentSelector.addEventListener('change', () => {
eventSelector.innerHTML = '';
getEventOptionsForComponent(componentSelector.value).forEach((option) => {
eventSelector.options.add(option);
});
eventSelector.options.value = '';
});
// Set the initial value.
// Rather than emptying the list and re-adding as the change handler does, remove any options that don't match.
// This means that the current selection (when editing) is maintained.
const initialCount = eventSelector.options.length;
[...eventSelector.options].reverse().forEach((option, index) => {
if (option.value === '') {
// The first value is the "Choose..." pseudo-option.
return;
}
if (!matchesComponent(componentSelector.value, option.value)) {
eventSelector.options.remove(initialCount - index - 1);
}
});
};
+13 -3
View File
@@ -41,6 +41,8 @@ class rule_form extends \moodleform {
*
*/
public function definition () {
global $PAGE;
$mform = $this->_form;
$eventlist = $this->_customdata['eventlist'];
$pluginlist = $this->_customdata['pluginlist'];
@@ -91,13 +93,21 @@ class rule_form extends \moodleform {
$mform->setType('name', PARAM_TEXT);
// Plugin field.
$mform->addElement('select', 'plugin', get_string('areatomonitor', 'tool_monitor'), $pluginlist);
$mform->addElement('select', 'plugin', get_string('areatomonitor', 'tool_monitor'), $pluginlist, [
'data-field' => 'component',
]);
$mform->addRule('plugin', get_string('required'), 'required');
// Event field.
$mform->addElement('select', 'eventname', get_string('event', 'tool_monitor'), $eventlist);
$mform->addElement('select', 'eventname', get_string('event', 'tool_monitor'), $eventlist, [
'data-field' => 'eventname',
'data-eventlist' => json_encode($eventlist),
]);
$mform->addRule('eventname', get_string('required'), 'required');
// Set up the client-side dropdown handler.
$PAGE->requires->js_call_amd('tool_monitor/dropdown', 'init');
// Freeze plugin and event fields for editing if there's a subscription for this rule.
if ($subscriptioncount > 0) {
$mform->freeze('plugin');
@@ -149,4 +159,4 @@ class rule_form extends \moodleform {
return $errors;
}
}
}
-4
View File
@@ -110,10 +110,6 @@ if ($mformdata = $mform->get_data()) {
redirect($manageurl);
} else {
// Set up the yui module.
$PAGE->requires->yui_module('moodle-tool_monitor-dropdown', 'Y.M.tool_monitor.DropDown.init',
array(array('eventlist' => $eventlist)));
echo $OUTPUT->header();
$mform->set_data($rule);
// If there's any subscription for this rule, display an information message.
@@ -1,125 +0,0 @@
YUI.add('moodle-tool_monitor-dropdown', function (Y, NAME) {
/**
* A module to manage dropdowns on the rule add/edit form.
*
* @module moodle-tool_monitor-dropdown
*/
/**
* A module to manage dependent selects on the edit page.
*
* @since Moodle 2.8
* @class moodle-tool_monitor.dropdown
* @extends Base
* @constructor
*/
function DropDown() {
DropDown.superclass.constructor.apply(this, arguments);
}
var SELECTORS = {
PLUGIN: '#id_plugin',
EVENTNAME: '#id_eventname',
OPTION: 'option',
CHOOSE: 'option[value=""]'
};
Y.extend(DropDown, Y.Base, {
/**
* Reference to the plugin node.
*
* @property plugin
* @type Object
* @default null
* @protected
*/
plugin: null,
/**
* Reference to the plugin node.
*
* @property eventname
* @type Object
* @default null
* @protected
*/
eventname: null,
/**
* Initializer.
* Basic setup and delegations.
*
* @method initializer
*/
initializer: function() {
this.plugin = Y.one(SELECTORS.PLUGIN);
this.eventname = Y.one(SELECTORS.EVENTNAME);
var selection = this.eventname.get('value'); // Get selected event name.
this.updateEventsList();
this.updateSelection(selection);
this.plugin.on('change', this.updateEventsList, this);
},
/**
* Method to update the events list drop down when plugin list drop down is changed.
*
* @method updateEventsList
*/
updateEventsList: function() {
var node, options, choosenode;
var plugin = this.plugin.get('value'); // Get component name.
var namespace = '\\' + plugin + '\\';
this.eventname.all(SELECTORS.OPTION).remove(true); // Delete all nodes.
options = this.get('eventlist');
// Mark the default choose node as visible and selected.
choosenode = Y.Node.create('<option value="">' + options[''] + '</option>');
choosenode.set('selected', 'selected');
this.eventname.appendChild(choosenode);
Y.Object.each(options, function(value, key) {
// Make sure we highlight only nodes with correct namespace.
if (key.substring(0, namespace.length) === namespace) {
node = Y.Node.create('<option value="' + key + '">' + value + '</option>');
this.eventname.appendChild(node);
}
}, this);
},
/**
* Method to update the selected node from the options list.
*
* @method updateSelection
* @param {string} selection The options node value that should be selected.
*/
updateSelection: function(selection) {
this.eventname.get('options').each(function(opt) {
if (opt.get('value') === selection) {
opt.set('selected', 'selected');
}
}, this);
}
}, {
NAME: 'dropDown',
ATTRS: {
/**
* A list of events with components.
*
* @attribute eventlist
* @default null
* @type Object
*/
eventlist: null
}
});
Y.namespace('M.tool_monitor.DropDown').init = function(config) {
return new DropDown(config);
};
}, '@VERSION@', {"requires": ["base", "event", "node"]});
@@ -1 +0,0 @@
YUI.add("moodle-tool_monitor-dropdown",function(o,e){function t(){t.superclass.constructor.apply(this,arguments)}var n="#id_plugin",i="#id_eventname",s="option";o.extend(t,o.Base,{plugin:null,eventname:null,initializer:function(){this.plugin=o.one(n),this.eventname=o.one(i);var e=this.eventname.get("value");this.updateEventsList(),this.updateSelection(e),this.plugin.on("change",this.updateEventsList,this)},updateEventsList:function(){var n,e,t=this.plugin.get("value"),i="\\"+t+"\\";this.eventname.all(s).remove(!0),t=this.get("eventlist"),(e=o.Node.create('<option value="">'+t[""]+"</option>")).set("selected","selected"),this.eventname.appendChild(e),o.Object.each(t,function(e,t){t.substring(0,i.length)===i&&(n=o.Node.create('<option value="'+t+'">'+e+"</option>"),this.eventname.appendChild(n))},this)},updateSelection:function(t){this.eventname.get("options").each(function(e){e.get("value")===t&&e.set("selected","selected")},this)}},{NAME:"dropDown",ATTRS:{eventlist:null}}),o.namespace("M.tool_monitor.DropDown").init=function(e){return new t(e)}},"@VERSION@",{requires:["base","event","node"]});
@@ -1,125 +0,0 @@
YUI.add('moodle-tool_monitor-dropdown', function (Y, NAME) {
/**
* A module to manage dropdowns on the rule add/edit form.
*
* @module moodle-tool_monitor-dropdown
*/
/**
* A module to manage dependent selects on the edit page.
*
* @since Moodle 2.8
* @class moodle-tool_monitor.dropdown
* @extends Base
* @constructor
*/
function DropDown() {
DropDown.superclass.constructor.apply(this, arguments);
}
var SELECTORS = {
PLUGIN: '#id_plugin',
EVENTNAME: '#id_eventname',
OPTION: 'option',
CHOOSE: 'option[value=""]'
};
Y.extend(DropDown, Y.Base, {
/**
* Reference to the plugin node.
*
* @property plugin
* @type Object
* @default null
* @protected
*/
plugin: null,
/**
* Reference to the plugin node.
*
* @property eventname
* @type Object
* @default null
* @protected
*/
eventname: null,
/**
* Initializer.
* Basic setup and delegations.
*
* @method initializer
*/
initializer: function() {
this.plugin = Y.one(SELECTORS.PLUGIN);
this.eventname = Y.one(SELECTORS.EVENTNAME);
var selection = this.eventname.get('value'); // Get selected event name.
this.updateEventsList();
this.updateSelection(selection);
this.plugin.on('change', this.updateEventsList, this);
},
/**
* Method to update the events list drop down when plugin list drop down is changed.
*
* @method updateEventsList
*/
updateEventsList: function() {
var node, options, choosenode;
var plugin = this.plugin.get('value'); // Get component name.
var namespace = '\\' + plugin + '\\';
this.eventname.all(SELECTORS.OPTION).remove(true); // Delete all nodes.
options = this.get('eventlist');
// Mark the default choose node as visible and selected.
choosenode = Y.Node.create('<option value="">' + options[''] + '</option>');
choosenode.set('selected', 'selected');
this.eventname.appendChild(choosenode);
Y.Object.each(options, function(value, key) {
// Make sure we highlight only nodes with correct namespace.
if (key.substring(0, namespace.length) === namespace) {
node = Y.Node.create('<option value="' + key + '">' + value + '</option>');
this.eventname.appendChild(node);
}
}, this);
},
/**
* Method to update the selected node from the options list.
*
* @method updateSelection
* @param {string} selection The options node value that should be selected.
*/
updateSelection: function(selection) {
this.eventname.get('options').each(function(opt) {
if (opt.get('value') === selection) {
opt.set('selected', 'selected');
}
}, this);
}
}, {
NAME: 'dropDown',
ATTRS: {
/**
* A list of events with components.
*
* @attribute eventlist
* @default null
* @type Object
*/
eventlist: null
}
});
Y.namespace('M.tool_monitor.DropDown').init = function(config) {
return new DropDown(config);
};
}, '@VERSION@', {"requires": ["base", "event", "node"]});
@@ -1,10 +0,0 @@
{
"name": "moodle-tool_monitor-dropdown",
"builds": {
"moodle-tool_monitor-dropdown": {
"jsfiles": [
"dropdown.js"
]
}
}
}
-120
View File
@@ -1,120 +0,0 @@
/**
* A module to manage dropdowns on the rule add/edit form.
*
* @module moodle-tool_monitor-dropdown
*/
/**
* A module to manage dependent selects on the edit page.
*
* @since Moodle 2.8
* @class moodle-tool_monitor.dropdown
* @extends Base
* @constructor
*/
function DropDown() {
DropDown.superclass.constructor.apply(this, arguments);
}
var SELECTORS = {
PLUGIN: '#id_plugin',
EVENTNAME: '#id_eventname',
OPTION: 'option',
CHOOSE: 'option[value=""]'
};
Y.extend(DropDown, Y.Base, {
/**
* Reference to the plugin node.
*
* @property plugin
* @type Object
* @default null
* @protected
*/
plugin: null,
/**
* Reference to the plugin node.
*
* @property eventname
* @type Object
* @default null
* @protected
*/
eventname: null,
/**
* Initializer.
* Basic setup and delegations.
*
* @method initializer
*/
initializer: function() {
this.plugin = Y.one(SELECTORS.PLUGIN);
this.eventname = Y.one(SELECTORS.EVENTNAME);
var selection = this.eventname.get('value'); // Get selected event name.
this.updateEventsList();
this.updateSelection(selection);
this.plugin.on('change', this.updateEventsList, this);
},
/**
* Method to update the events list drop down when plugin list drop down is changed.
*
* @method updateEventsList
*/
updateEventsList: function() {
var node, options, choosenode;
var plugin = this.plugin.get('value'); // Get component name.
var namespace = '\\' + plugin + '\\';
this.eventname.all(SELECTORS.OPTION).remove(true); // Delete all nodes.
options = this.get('eventlist');
// Mark the default choose node as visible and selected.
choosenode = Y.Node.create('<option value="">' + options[''] + '</option>');
choosenode.set('selected', 'selected');
this.eventname.appendChild(choosenode);
Y.Object.each(options, function(value, key) {
// Make sure we highlight only nodes with correct namespace.
if (key.substring(0, namespace.length) === namespace) {
node = Y.Node.create('<option value="' + key + '">' + value + '</option>');
this.eventname.appendChild(node);
}
}, this);
},
/**
* Method to update the selected node from the options list.
*
* @method updateSelection
* @param {string} selection The options node value that should be selected.
*/
updateSelection: function(selection) {
this.eventname.get('options').each(function(opt) {
if (opt.get('value') === selection) {
opt.set('selected', 'selected');
}
}, this);
}
}, {
NAME: 'dropDown',
ATTRS: {
/**
* A list of events with components.
*
* @attribute eventlist
* @default null
* @type Object
*/
eventlist: null
}
});
Y.namespace('M.tool_monitor.DropDown').init = function(config) {
return new DropDown(config);
};
@@ -1,9 +0,0 @@
{
"moodle-tool_monitor-dropdown": {
"requires": [
"base",
"event",
"node"
]
}
}