From 06b86fdfc343bc5fbd728bc8d1ad371d848f05c4 Mon Sep 17 00:00:00 2001 From: Sara Arjona Date: Thu, 7 Jul 2022 17:08:15 +0200 Subject: [PATCH] MDL-75148 mod_data: Enable Use preset button when one is selected The 'Use preset' button will be enabled only when a preset is selected. --- mod/data/amd/build/selectpreset.min.js | 5 +- mod/data/amd/build/selectpreset.min.js.map | 2 +- mod/data/amd/src/selectpreset.js | 57 ++++++++++++++-------- 3 files changed, 41 insertions(+), 23 deletions(-) diff --git a/mod/data/amd/build/selectpreset.min.js b/mod/data/amd/build/selectpreset.min.js index 87f886a27b4f1..9e64d02194d8f 100644 --- a/mod/data/amd/build/selectpreset.min.js +++ b/mod/data/amd/build/selectpreset.min.js @@ -1,10 +1,11 @@ -define("mod_data/selectpreset",["exports","core/notification","core/str"],(function(_exports,_notification,_str){var obj; +define("mod_data/selectpreset",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0; /** * Javascript module to control the form responsible for selecting a preset. * * @module mod_data/selectpreset * @copyright 2021 Mihail Geshoski * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_notification=(obj=_notification)&&obj.__esModule?obj:{default:obj};const selectors_selectPresetButton='input[name="selectpreset"]',selectors_selectedPresetRadioButton='input[name="fullname"]:checked';_exports.init=()=>{document.querySelector(selectors_selectPresetButton).addEventListener("click",(event=>{if(event.preventDefault(),document.querySelectorAll(selectors_selectedPresetRadioButton).length>0){event.target.closest("form").submit()}else(0,_str.get_string)("presetnotselected","mod_data").then((str=>_notification.default.addNotification({type:"error",message:str}))).catch(_notification.default.exception)}))}})); + */ +const selectors_presetRadioButton='input[name="fullname"]',selectors_selectPresetButton='input[name="selectpreset"]',selectors_selectedPresetRadioButton='input[name="fullname"]:checked';_exports.init=()=>{const radioButton=document.querySelectorAll(selectors_presetRadioButton);disableUsePresetButton(),radioButton.forEach((elem=>{elem.addEventListener("change",(function(event){event.preventDefault(),disableUsePresetButton()}))}))};const disableUsePresetButton=()=>{let selectPresetButton=document.querySelector(selectors_selectPresetButton);document.querySelectorAll(selectors_selectedPresetRadioButton).length>0?(selectPresetButton.removeAttribute("disabled"),selectPresetButton.classList.remove("btn-secondary"),selectPresetButton.classList.add("btn-primary")):(selectPresetButton.setAttribute("disabled",!0),selectPresetButton.classList.remove("btn-primary"),selectPresetButton.classList.add("btn-secondary"))}})); //# sourceMappingURL=selectpreset.min.js.map \ No newline at end of file diff --git a/mod/data/amd/build/selectpreset.min.js.map b/mod/data/amd/build/selectpreset.min.js.map index 2c640a2e26d0a..6ec272a58b040 100644 --- a/mod/data/amd/build/selectpreset.min.js.map +++ b/mod/data/amd/build/selectpreset.min.js.map @@ -1 +1 @@ -{"version":3,"file":"selectpreset.min.js","sources":["../src/selectpreset.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 .\n\n/**\n * Javascript module to control the form responsible for selecting a preset.\n *\n * @module mod_data/selectpreset\n * @copyright 2021 Mihail Geshoski \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Notification from 'core/notification';\nimport {get_string as getString} from 'core/str';\n\nconst selectors = {\n selectPresetButton: 'input[name=\"selectpreset\"]',\n selectedPresetRadioButton: 'input[name=\"fullname\"]:checked',\n};\n\n/**\n * Initialize module.\n */\nexport const init = () => {\n const selectPresetButton = document.querySelector(selectors.selectPresetButton);\n\n selectPresetButton.addEventListener('click', event => {\n event.preventDefault();\n // Validate whether there is a selected preset before submitting the form.\n if (document.querySelectorAll(selectors.selectedPresetRadioButton).length > 0) {\n const presetsForm = event.target.closest('form');\n presetsForm.submit();\n } else {\n // No selected presets. Display an error message to user.\n getString('presetnotselected', 'mod_data').then((str) => {\n return Notification.addNotification({\n type: 'error',\n message: str\n });\n }).catch(Notification.exception);\n }\n });\n};\n"],"names":["selectors","document","querySelector","addEventListener","event","preventDefault","querySelectorAll","length","target","closest","submit","then","str","Notification","addNotification","type","message","catch","exception"],"mappings":";;;;;;;4JA0BMA,6BACkB,6BADlBA,oCAEyB,+CAMX,KACWC,SAASC,cAAcF,8BAE/BG,iBAAiB,SAASC,WACzCA,MAAMC,iBAEFJ,SAASK,iBAAiBN,qCAAqCO,OAAS,EAAG,CACvDH,MAAMI,OAAOC,QAAQ,QAC7BC,iCAGF,oBAAqB,YAAYC,MAAMC,KACtCC,sBAAaC,gBAAgB,CAChCC,KAAM,QACNC,QAASJ,QAEdK,MAAMJ,sBAAaK"} \ No newline at end of file +{"version":3,"file":"selectpreset.min.js","sources":["../src/selectpreset.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 .\n\n/**\n * Javascript module to control the form responsible for selecting a preset.\n *\n * @module mod_data/selectpreset\n * @copyright 2021 Mihail Geshoski \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst selectors = {\n presetRadioButton: 'input[name=\"fullname\"]',\n selectPresetButton: 'input[name=\"selectpreset\"]',\n selectedPresetRadioButton: 'input[name=\"fullname\"]:checked',\n};\n\n/**\n * Initialize module.\n */\nexport const init = () => {\n const radioButton = document.querySelectorAll(selectors.presetRadioButton);\n\n // Initialize the \"Use preset\" button properly.\n disableUsePresetButton();\n\n radioButton.forEach((elem) => {\n elem.addEventListener('change', function(event) {\n event.preventDefault();\n // Enable the \"Use preset\" button when any of the radio buttons in the presets list is checked.\n disableUsePresetButton();\n });\n });\n\n};\n\n/**\n * Decide whether to disable or not the \"Use preset\" button.\n * When there is no preset selected, the button should be displayed disabled; otherwise, it will appear enabled as a primary button.\n *\n * @method\n * @private\n */\nconst disableUsePresetButton = () => {\n let selectPresetButton = document.querySelector(selectors.selectPresetButton);\n const selectedRadioButton = document.querySelectorAll(selectors.selectedPresetRadioButton);\n\n if (selectedRadioButton.length > 0) {\n // There is one preset selected, so the button should be enabled.\n selectPresetButton.removeAttribute('disabled');\n selectPresetButton.classList.remove('btn-secondary');\n selectPresetButton.classList.add('btn-primary');\n } else {\n // There is no any preset selected, so the button should be disabled.\n selectPresetButton.setAttribute('disabled', true);\n selectPresetButton.classList.remove('btn-primary');\n selectPresetButton.classList.add('btn-secondary');\n }\n};\n"],"names":["selectors","radioButton","document","querySelectorAll","disableUsePresetButton","forEach","elem","addEventListener","event","preventDefault","selectPresetButton","querySelector","length","removeAttribute","classList","remove","add","setAttribute"],"mappings":";;;;;;;;MAuBMA,4BACiB,yBADjBA,6BAEkB,6BAFlBA,oCAGyB,+CAMX,WACVC,YAAcC,SAASC,iBAAiBH,6BAG9CI,yBAEAH,YAAYI,SAASC,OACjBA,KAAKC,iBAAiB,UAAU,SAASC,OACrCA,MAAMC,iBAENL,sCAaNA,uBAAyB,SACvBM,mBAAqBR,SAASS,cAAcX,8BACpBE,SAASC,iBAAiBH,qCAE9BY,OAAS,GAE7BF,mBAAmBG,gBAAgB,YACnCH,mBAAmBI,UAAUC,OAAO,iBACpCL,mBAAmBI,UAAUE,IAAI,iBAGjCN,mBAAmBO,aAAa,YAAY,GAC5CP,mBAAmBI,UAAUC,OAAO,eACpCL,mBAAmBI,UAAUE,IAAI"} \ No newline at end of file diff --git a/mod/data/amd/src/selectpreset.js b/mod/data/amd/src/selectpreset.js index 3a5a1487974a5..1ac23b1095954 100644 --- a/mod/data/amd/src/selectpreset.js +++ b/mod/data/amd/src/selectpreset.js @@ -21,10 +21,8 @@ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -import Notification from 'core/notification'; -import {get_string as getString} from 'core/str'; - const selectors = { + presetRadioButton: 'input[name="fullname"]', selectPresetButton: 'input[name="selectpreset"]', selectedPresetRadioButton: 'input[name="fullname"]:checked', }; @@ -33,22 +31,41 @@ const selectors = { * Initialize module. */ export const init = () => { - const selectPresetButton = document.querySelector(selectors.selectPresetButton); - - selectPresetButton.addEventListener('click', event => { - event.preventDefault(); - // Validate whether there is a selected preset before submitting the form. - if (document.querySelectorAll(selectors.selectedPresetRadioButton).length > 0) { - const presetsForm = event.target.closest('form'); - presetsForm.submit(); - } else { - // No selected presets. Display an error message to user. - getString('presetnotselected', 'mod_data').then((str) => { - return Notification.addNotification({ - type: 'error', - message: str - }); - }).catch(Notification.exception); - } + const radioButton = document.querySelectorAll(selectors.presetRadioButton); + + // Initialize the "Use preset" button properly. + disableUsePresetButton(); + + radioButton.forEach((elem) => { + elem.addEventListener('change', function(event) { + event.preventDefault(); + // Enable the "Use preset" button when any of the radio buttons in the presets list is checked. + disableUsePresetButton(); + }); }); + +}; + +/** + * Decide whether to disable or not the "Use preset" button. + * When there is no preset selected, the button should be displayed disabled; otherwise, it will appear enabled as a primary button. + * + * @method + * @private + */ +const disableUsePresetButton = () => { + let selectPresetButton = document.querySelector(selectors.selectPresetButton); + const selectedRadioButton = document.querySelectorAll(selectors.selectedPresetRadioButton); + + if (selectedRadioButton.length > 0) { + // There is one preset selected, so the button should be enabled. + selectPresetButton.removeAttribute('disabled'); + selectPresetButton.classList.remove('btn-secondary'); + selectPresetButton.classList.add('btn-primary'); + } else { + // There is no any preset selected, so the button should be disabled. + selectPresetButton.setAttribute('disabled', true); + selectPresetButton.classList.remove('btn-primary'); + selectPresetButton.classList.add('btn-secondary'); + } };