mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-15 21:45:37 +02:00
Code Issues Projects Releases Wiki Activity

MDL-66251 form: Hiding and disabling static elements.

Browse Source 
Added functionality to locate static text elements within the form,
improving the ability to target and manipulate the static elements for
hiding and disabling purposes.
This commit is contained in:
meirzamoodle 2024-07-07 13:35:32 +07:00
parent 7d7a871edd
commit d98867dd8b
5 changed files with 165 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
lib/form/form.js
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() {

12
lib/form/templates/element-static.mustache
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}}

12
lib/form/tests/behat/disabledif.feature
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"

73
lib/form/tests/behat/fixtures/static_hideif_disabledif_form.php Normal file
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();

8
lib/form/tests/behat/hideif.feature
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"