Merge branch 'MDL-53848_form_hideif' of git://github.com/davosmith/moodle

This commit is contained in:
Andrew Nicols 2017-08-23 09:56:00 +08:00
commit 8cb6a55147
8 changed files with 158 additions and 42 deletions

View File

@ -69,8 +69,10 @@ if (typeof M.form.dependencyManager === 'undefined') {
names[i] = new Y.NodeList();
for (var condition in conditions) {
for (var value in conditions[condition]) {
for (var ei in conditions[condition][value]) {
names[conditions[condition][value][ei]] = new Y.NodeList();
for (var hide in conditions[condition][value]) {
for (var ei in conditions[condition][value][hide]) {
names[conditions[condition][value][hide][ei]] = new Y.NodeList();
}
}
}
}
@ -83,6 +85,13 @@ if (typeof M.form.dependencyManager === 'undefined') {
names[name].push(node);
}
});
// Locate any groups with the given name.
this.get('form').all('.fitem').each(function(node) {
var name = node.getData('groupname');
if (name && ({}).hasOwnProperty.call(names, name)) {
names[name].push(node);
}
});
this._nameCollections = names;
},
@ -118,7 +127,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
var dependencies = this.get('dependencies'),
tohide = {},
tolock = {},
condition, value, lock, hide,
condition, value, isHide, lock, hide,
checkfunction, result, elements;
if (!({}).hasOwnProperty.call(dependencies, dependon)) {
return true;
@ -126,26 +135,28 @@ if (typeof M.form.dependencyManager === 'undefined') {
elements = this.elementsByName(dependon);
for (condition in dependencies[dependon]) {
for (value in dependencies[dependon][condition]) {
checkfunction = '_dependency' + condition[0].toUpperCase() + condition.slice(1);
if (Y.Lang.isFunction(this[checkfunction])) {
result = this[checkfunction].apply(this, [elements, value, e]);
} else {
result = this._dependencyDefault(elements, value, e);
}
lock = result.lock || false;
hide = result.hide || false;
for (var ei in dependencies[dependon][condition][value]) {
var eltolock = dependencies[dependon][condition][value][ei];
if (({}).hasOwnProperty.call(tohide, eltolock)) {
tohide[eltolock] = tohide[eltolock] || hide;
for (isHide in dependencies[dependon][condition][value]) {
checkfunction = '_dependency' + condition[0].toUpperCase() + condition.slice(1);
if (Y.Lang.isFunction(this[checkfunction])) {
result = this[checkfunction].apply(this, [elements, value, (isHide === "1"), e]);
} else {
tohide[eltolock] = hide;
result = this._dependencyDefault(elements, value, (isHide === "1"), e);
}
lock = result.lock || false;
hide = result.hide || false;
for (var ei in dependencies[dependon][condition][value][isHide]) {
var eltolock = dependencies[dependon][condition][value][isHide][ei];
if (({}).hasOwnProperty.call(tohide, eltolock)) {
tohide[eltolock] = tohide[eltolock] || hide;
} else {
tohide[eltolock] = hide;
}
if (({}).hasOwnProperty.call(tolock, eltolock)) {
tolock[eltolock] = tolock[eltolock] || lock;
} else {
tolock[eltolock] = lock;
if (({}).hasOwnProperty.call(tolock, eltolock)) {
tolock[eltolock] = tolock[eltolock] || lock;
} else {
tolock[eltolock] = lock;
}
}
}
}
@ -260,8 +271,13 @@ if (typeof M.form.dependencyManager === 'undefined') {
_hideElement: function(name, hidden) {
var els = this.elementsByName(name);
els.each(function(node) {
var e = node.ancestor('.fitem');
var e = node.ancestor('.fitem', true);
if (e) {
if (hidden) {
e.setAttribute('hidden', 'hidden');
} else {
e.removeAttribute('hidden');
}
e.setStyles({
display: (hidden) ? 'none' : ''
});
@ -291,7 +307,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
return false;
},
_dependencyNotchecked: function(elements, value) {
_dependencyNotchecked: function(elements, value, isHide) {
var lock = false;
elements.each(function() {
if (this.getAttribute('type').toLowerCase() == 'hidden' &&
@ -306,10 +322,10 @@ if (typeof M.form.dependencyManager === 'undefined') {
});
return {
lock: lock,
hide: false
hide: isHide ? lock : false
};
},
_dependencyChecked: function(elements, value) {
_dependencyChecked: function(elements, value, isHide) {
var lock = false;
elements.each(function() {
if (this.getAttribute('type').toLowerCase() == 'hidden' &&
@ -324,20 +340,20 @@ if (typeof M.form.dependencyManager === 'undefined') {
});
return {
lock: lock,
hide: false
hide: isHide ? lock : false
};
},
_dependencyNoitemselected: function(elements, value) {
_dependencyNoitemselected: function(elements, value, isHide) {
var lock = false;
elements.each(function() {
lock = lock || this.get('selectedIndex') == -1;
});
return {
lock: lock,
hide: false
hide: isHide ? lock : false
};
},
_dependencyEq: function(elements, value) {
_dependencyEq: function(elements, value, isHide) {
var lock = false;
var hiddenVal = false;
var options, v, selected, values;
@ -391,7 +407,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
});
return {
lock: lock,
hide: false
hide: isHide ? lock : false
};
},
/**
@ -402,7 +418,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
* @returns {{lock: boolean, hide: boolean}}
* @private
*/
_dependencyIn: function(elements, values) {
_dependencyIn: function(elements, values, isHide) {
// A pipe (|) is used as a value separator
// when multiple values have to be passed on at the same time.
values = values.split('|');
@ -458,7 +474,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
});
return {
lock: lock,
hide: false
hide: isHide ? lock : false
};
},
_dependencyHide: function(elements, value) {
@ -467,7 +483,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
hide: true
};
},
_dependencyDefault: function(elements, value, ev) {
_dependencyDefault: function(elements, value, isHide) {
var lock = false,
hiddenVal = false,
values
@ -521,7 +537,7 @@ if (typeof M.form.dependencyManager === 'undefined') {
});
return {
lock: lock,
hide: false
hide: isHide ? lock : false
};
}
}, {

View File

@ -213,6 +213,7 @@ class MoodleQuickForm_group extends HTML_QuickForm_group implements templatable
$i++;
}
$context['groupname'] = $name;
$context['elements'] = $elements;
return $context;
}

View File

@ -46,7 +46,7 @@
}
}}
<div id="fitem_{{ element.id }}" class="fitem fitem_{{ element.type }}">
<div id="fitem_{{ element.id }}" class="fitem fitem_{{ element.type }}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
<div class="fitemtitle">
<label for="{{element.id}}">{{{ label }}}</label>
{{{ helpbutton }}}

View File

@ -0,0 +1,29 @@
@core @javascript @core_form
Feature: hideIf functionality in forms
For forms including hideIf functions
As a user
If I trigger the hideIf condition then the form elements will be hidden
Background:
Given the following "courses" exist:
| fullname | shortname |
| Course 1 | C1 |
And I log in as "admin"
And I am on "Course 1" course homepage
And I turn editing mode on
Scenario: When 'eq' hideIf conditions are not met, the relevant elements are shown
When I add a "Assignment" to section "1"
And I expand all fieldsets
And I set the field "Students submit in groups" to "Yes"
Then I should see "Require group to make submission"
And I should see "Require all group members submit"
And I should see "Grouping for student groups"
Scenario: When 'eq' hideIf conditions are met, the relevant elements are hidden
When I add a "Assignment" to section "1"
And I expand all fieldsets
And I set the field "Students submit in groups" to "No"
Then I should not see "Require group to make submission"
And I should not see "Require all group members to submit"
And I should not see "Grouping for student groups"

View File

@ -1412,6 +1412,11 @@ class MoodleQuickForm extends HTML_QuickForm_DHTMLRulesTableless {
/** @var array dependent state for the element/'s */
var $_dependencies = array();
/**
* @var array elements that will become hidden based on another element
*/
protected $_hideifs = array();
/** @var array Array of buttons that if pressed do not result in the processing of the form. */
var $_noSubmitButtons=array();
@ -1460,6 +1465,16 @@ class MoodleQuickForm extends HTML_QuickForm_DHTMLRulesTableless {
*/
protected $clientvalidation = false;
/**
* Is this a 'disableIf' dependency ?
*/
const DEP_DISABLE = 0;
/**
* Is this a 'hideIf' dependency?
*/
const DEP_HIDE = 1;
/**
* Class constructor - same parameters as HTML_QuickForm_DHTMLRulesTableless
*
@ -2426,8 +2441,7 @@ require(["core/event", "jquery"], function(Event, $) {
foreach ($conditions as $condition=>$values) {
$result[$dependentOn][$condition] = array();
foreach ($values as $value=>$dependents) {
$result[$dependentOn][$condition][$value] = array();
$i = 0;
$result[$dependentOn][$condition][$value][self::DEP_DISABLE] = array();
foreach ($dependents as $dependent) {
$elements = $this->_getElNamesRecursive($dependent);
if (empty($elements)) {
@ -2438,7 +2452,29 @@ require(["core/event", "jquery"], function(Event, $) {
if ($element == $dependentOn) {
continue;
}
$result[$dependentOn][$condition][$value][] = $element;
$result[$dependentOn][$condition][$value][self::DEP_DISABLE][] = $element;
}
}
}
}
}
foreach ($this->_hideifs as $dependenton => $conditions) {
$result[$dependenton] = array();
foreach ($conditions as $condition => $values) {
$result[$dependenton][$condition] = array();
foreach ($values as $value => $dependents) {
$result[$dependenton][$condition][$value][self::DEP_HIDE] = array();
foreach ($dependents as $dependent) {
$elements = $this->_getElNamesRecursive($dependent);
if (!in_array($dependent, $elements)) {
// Always want to hide the main element, even if it contains sub-elements as well.
$elements[] = $dependent;
}
foreach ($elements as $element) {
if ($element == $dependenton) {
continue;
}
$result[$dependenton][$condition][$value][self::DEP_HIDE][] = $element;
}
}
}
@ -2533,6 +2569,40 @@ require(["core/event", "jquery"], function(Event, $) {
$this->_dependencies[$dependentOn][$condition][$value][] = $elementName;
}
/**
* Adds a dependency for $elementName which will be hidden if $condition is met.
* If $condition = 'notchecked' (default) then the condition is that the $dependentOn element
* is not checked. If $condition = 'checked' then the condition is that the $dependentOn element
* is checked. If $condition is something else (like "eq" for equals) then it is checked to see if the value
* of the $dependentOn element is $condition (such as equal) to $value.
*
* When working with multiple selects, the dependentOn has to be the real name of the select, meaning that
* it will most likely end up with '[]'. Also, the value should be an array of required values, or a string
* containing the values separated by pipes: array('red', 'blue') or 'red|blue'.
*
* @param string $elementname the name of the element which will be hidden
* @param string $dependenton the name of the element whose state will be checked for condition
* @param string $condition the condition to check
* @param mixed $value used in conjunction with condition.
*/
public function hideIf($elementname, $dependenton, $condition = 'notchecked', $value = '1') {
// Multiple selects allow for a multiple selection, we transform the array to string here as
// an array cannot be used as a key in an associative array.
if (is_array($value)) {
$value = implode('|', $value);
}
if (!array_key_exists($dependenton, $this->_hideifs)) {
$this->_hideifs[$dependenton] = array();
}
if (!array_key_exists($condition, $this->_hideifs[$dependenton])) {
$this->_hideifs[$dependenton][$condition] = array();
}
if (!array_key_exists($value, $this->_hideifs[$dependenton][$condition])) {
$this->_hideifs[$dependenton][$condition][$value] = array();
}
$this->_hideifs[$dependenton][$condition][$value][] = $elementname;
}
/**
* Registers button as no submit button
*

View File

@ -148,12 +148,12 @@ class mod_assign_mod_form extends moodleform_mod {
'preventsubmissionnotingroup',
'assign');
$mform->setType('preventsubmissionnotingroup', PARAM_BOOL);
$mform->disabledIf('preventsubmissionnotingroup', 'teamsubmission', 'eq', 0);
$mform->hideIf('preventsubmissionnotingroup', 'teamsubmission', 'eq', 0);
$name = get_string('requireallteammemberssubmit', 'assign');
$mform->addElement('selectyesno', 'requireallteammemberssubmit', $name);
$mform->addHelpButton('requireallteammemberssubmit', 'requireallteammemberssubmit', 'assign');
$mform->disabledIf('requireallteammemberssubmit', 'teamsubmission', 'eq', 0);
$mform->hideIf('requireallteammemberssubmit', 'teamsubmission', 'eq', 0);
$mform->disabledIf('requireallteammemberssubmit', 'submissiondrafts', 'eq', 0);
$groupings = groups_get_all_groupings($assignment->get_course()->id);
@ -166,7 +166,7 @@ class mod_assign_mod_form extends moodleform_mod {
$name = get_string('teamsubmissiongroupingid', 'assign');
$mform->addElement('select', 'teamsubmissiongroupingid', $name, $options);
$mform->addHelpButton('teamsubmissiongroupingid', 'teamsubmissiongroupingid', 'assign');
$mform->disabledIf('teamsubmissiongroupingid', 'teamsubmission', 'eq', 0);
$mform->hideIf('teamsubmissiongroupingid', 'teamsubmission', 'eq', 0);
if ($assignment->has_submissions_or_grades()) {
$mform->freeze('teamsubmissiongroupingid');
}

View File

@ -1,4 +1,4 @@
<div class="form-group {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
<div class="form-group {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
<label class="col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
{{{label}}} {{{helpbutton}}}
{{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}

View File

@ -41,7 +41,7 @@
}
}
}}
<div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
<div class="form-group row {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
<div class="col-md-3">
<span class="pull-xs-right text-nowrap">
{{#required}}<abbr class="initialism text-danger" title="{{#str}}required{{/str}}">{{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}</abbr>{{/required}}