This commit is contained in:
Sara Arjona 2024-07-09 10:36:29 +02:00 committed by Ilya Tregubov
commit 9d6cd34f8a
5 changed files with 165 additions and 6 deletions

View File

@ -16,6 +16,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
_dirty: null,
_nameCollections: null,
_fileinputs: null,
_staticElements: null,
_editors: null,
_editorNameSuffix: '[text]',
@ -105,6 +106,14 @@ if (typeof M.form.dependencyManager === 'undefined') {
allnames[name].push(node);
}
});
// Locate any static elements for each name.
this.get('form').all('.form-control-static').each(function(node) {
var name = node.getData('name');
if (({}).hasOwnProperty.call(allnames, name)) {
names[name].push(node);
allnames[name].push(node);
}
});
this._nameCollections = {names: names, allnames: allnames};
},
@ -259,20 +268,47 @@ if (typeof M.form.dependencyManager === 'undefined') {
* @param {Boolean} disabled True to disable, false to enable.
*/
_disableElement: function(name, disabled) {
var els = this.elementsByName(name),
const els = this.elementsByName(name),
filepicker = this.isFilePicker(name),
editors = this.get('form').all('.fitem [data-fieldtype="editor"] textarea[name="' + name + '[text]"]');
editors = this.get('form').all('.fitem [data-fieldtype="editor"] textarea[name="' + name + '[text]"]'),
staticElement = this.isStaticElement(name);
els.each(function(node) {
const fitem = node.ancestor('.fitem');
if (disabled) {
node.setAttribute('disabled', 'disabled');
} else {
node.removeAttribute('disabled');
}
// Enable/Disable static elements if exist.
if (staticElement) {
const disabledNonTextElements = 'INPUT,SELECT,TEXTAREA,BUTTON,A';
if (disabled) {
// Mute the text inside the current static element.
fitem.addClass('text-muted');
// Disabled non-text elements in the static if exist.
fitem.all(disabledNonTextElements).each(function(disabledElement) {
if (disabledElement.get('tagName').toUpperCase() === "A") {
disabledElement.addClass('disabled');
} else {
disabledElement.setAttribute('disabled', 'disabled');
}
});
} else {
// Unmute the text inside the current static element.
fitem.removeClass('text-muted');
// Enabled non-text elements in the static if exist.
fitem.all(disabledNonTextElements).each(function(disabledElement) {
if (disabledElement.get('tagName').toUpperCase() === "A") {
disabledElement.removeClass('disabled');
} else {
disabledElement.removeAttribute('disabled', 'disabled');
}
});
}
}
// Extra code to disable filepicker or filemanager form elements
if (filepicker) {
var fitem = node.ancestor('.fitem');
if (fitem) {
if (disabled) {
fitem.addClass('disabled');
@ -363,6 +399,28 @@ if (typeof M.form.dependencyManager === 'undefined') {
return false;
},
/**
* Checks if a form element with the given name is static.
*
* @param {string} el - The name of the form element to check.
* @returns {boolean} - Returns true if the form element is static, otherwise false.
*/
isStaticElement: function(el) {
if (!this._staticElements) {
const staticElements = {};
const els = this.get('form').all('.fitem [data-fieldtype="static"] .form-control-static');
els.each(function(node) {
if (node.getData('name') === el) {
staticElements[node.getData('name')] = true;
}
});
this._staticElements = staticElements;
}
if (({}).hasOwnProperty.call(this._staticElements, el)) {
return this._staticElements[el] || false;
}
return false;
},
_dependencyNotchecked: function(elements, value, isHide) {
var lock = false;
elements.each(function() {

View File

@ -32,12 +32,20 @@
Example context (json):
{
"label": "Example label",
"element": { "html": "Example HTML", "staticlabel": true }
"element": {
"html": "Example HTML",
"staticlabel": true,
"extraclasses": null,
"name": "static_name",
"id": "id_static",
"wrapperid": "fitem_id_static",
"iderror": "id_error_static"
}
}
}}
{{< core_form/element-template }}
{{$element}}
<div class="form-control-static {{{element.extraclasses}}}">
<div class="form-control-static {{{element.extraclasses}}}" data-name="{{element.name}}">
{{{element.html}}}
</div>
{{/element}}

View File

@ -14,3 +14,15 @@ Feature: disabledIf functionality in forms
Then the "disabled" attribute of "input#id_some_filemanager" "css_element" should contain "true"
# Test file manager in a group.
And the "disabled" attribute of "input#id_filemanager_group_some_filemanager_group" "css_element" should contain "true"
Scenario: The static element is disabled when 'eq' disabledIf conditions are met
Given I am on fixture page "/lib/form/tests/behat/fixtures/static_hideif_disabledif_form.php"
And I should see "Static with form elements"
When I click on "Disable" "radio"
And the "class" attribute of "#fitem_id_some_static" "css_element" should contain "text-muted"
And the "disabled" attribute of "input#id_some_static_username" "css_element" should contain "true"
And the "disabled" attribute of "Check" "button" should contain "true"
Then I click on "Enable" "radio"
And the "class" attribute of "#fitem_id_some_static" "css_element" should not contain "text-muted"
And the "#id_some_static_username" "css_element" should be enabled
And the "class" attribute of "Check" "button" should not contain "disabled"

View File

@ -0,0 +1,73 @@
<?php
// 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/>.
require_once(__DIR__ . '/../../../../../config.php');
defined('BEHAT_SITE_RUNNING') || die();
global $CFG, $PAGE, $OUTPUT;
require_once($CFG->libdir . '/formslib.php');
$PAGE->set_url('/lib/form/tests/behat/fixtures/static_hideif_disabledif_form.php');
$PAGE->add_body_class('limitedwidth');
require_login();
$PAGE->set_context(core\context\system::instance());
/**
* Test class for hiding and disabling static elements.
*
* @package core_form
* @copyright Meirza <meirza.arson@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
class test_static_hideif_disabledif_form extends moodleform {
/**
* Form definition.
*/
public function definition(): void {
$mform = $this->_form;
// Radio buttons.
$radiogroup = [
$mform->createElement('radio', 'some_radios', '', 'Enable', '1'),
$mform->createElement('radio', 'some_radios', '', 'Disable', '2'),
$mform->createElement('radio', 'some_radios', '', 'Hide', '3'),
];
$mform->addGroup($radiogroup, 'some_radios_group', 'Enable/Disable/Hide', ' ', false);
$mform->setDefault('some_radios', 1);
// Static element with conditions.
$mform->addElement(
'static',
'some_static',
'Static element',
'Static with <a href="#">form elements</a>
<input id="id_some_static_username" type="text" class="form-control mb-2" placeholder="Type username...">
<button type="submit" class="btn btn-primary mb-2">Check</button>',
);
$mform->disabledIf('some_static', 'some_radios', 'eq', '2');
$mform->hideIf('some_static', 'some_radios', 'eq', '3');
$this->add_action_buttons();
}
}
$form = new test_static_hideif_disabledif_form();
echo $OUTPUT->header();
$form->display();
echo $OUTPUT->footer();

View File

@ -31,3 +31,11 @@ Feature: hideIf functionality in forms
And I should see "My test editor"
When I click on "Hide" "radio"
Then I should not see "My test editor"
Scenario: The static element is hidden when 'eq' hideIf conditions are met
Given I am on fixture page "/lib/form/tests/behat/fixtures/static_hideif_disabledif_form.php"
And I should see "Static with form elements"
When I click on "Hide" "radio"
Then I should not see "Static with form elements"
And I click on "Enable" "radio"
And I should see "Static with form elements"