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.
This commit is contained in:
Sara Arjona 2022-07-07 17:08:15 +02:00
parent 7d88bc0754
commit 06b86fdfc3
3 changed files with 40 additions and 22 deletions

View File

@ -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 <mihail@moodle.com>
* @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

View File

@ -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 <http://www.gnu.org/licenses/>.\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 <mihail@moodle.com>\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"}
{"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 <http://www.gnu.org/licenses/>.\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 <mihail@moodle.com>\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"}

View File

@ -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);
const radioButton = document.querySelectorAll(selectors.presetRadioButton);
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);
}
// 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');
}
};