moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 00:46:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-65928 core: Render master element as button too

Browse source
This commit is contained in:
Jun Pataleta 2019-03-22 16:29:07 +08:00
parent 6259a9d065
commit 5943fc3f95
4 changed files with 60 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/amd/build/checkbox-toggleall.min.js vendored
View file

@ -1 +1 @@
define(["jquery","core/pubsub"],function(a,b){var c=!1,d={checkboxToggled:"core/checkbox-toggleall:checkboxToggled"},e=function(a,b,c){return c?a.find('[data-action="toggle"][data-togglegroup="'+b+'"]'):a.find('[data-action="toggle"][data-togglegroup*="'+b+'"]')},f=function(a,b){return e(a,b).filter('[data-toggle="slave"]')},g=function(a,b,c){return e(a,b,c).filter('[data-toggle="master"]')},h=function(a,b){return e(a,b,!0).filter('[data-toggle="action"]')},i=function(c){var e=c.data.root,g=a(c.target),h=g.data("togglegroup"),i=g.is(":checked"),j=f(e,h),k=j.filter(":checked");l(e,h,i),j.prop("checked",i),j.trigger("change"),b.publish(d.checkboxToggled,{root:e,toggleGroupName:h,slaves:j,checkedSlaves:k,anyChecked:i})},j=function(c){var e=c.data.root,g=a(c.target),h=g.data("togglegroup").split(" "),i=[],j="";h.forEach(function(a){j+=" "+a,i.push(j.trim())}),i.forEach(function(a){var c=f(e,a),g=c.filter(":checked"),h=c.length===g.length;l(e,a,h,!0),k(e,a,!g.length),b.publish(d.checkboxToggled,{root:e,toggleGroupName:a,slaves:c,checkedSlaves:g,anyChecked:!!g.length})})},k=function(a,b,c){h(a,b).prop("disabled",c)},l=function(b,c,d,e){var f=g(b,c,e);f.prop("checked",d),f.each(function(c,e){e=a(e);var f,g=b.find('[for="'+e.attr("id")+'"]');g.length&&(f=d?e.data("toggle-deselectall"):e.data("toggle-selectall"),g.html()!==f&&g.html(f))})},m=function(){if(!c){c=!0;var b=a(document.body);b.on("change",'[data-action="toggle"][data-toggle="master"]',{root:b},i),b.on("change",'[data-action="toggle"][data-toggle="slave"]',{root:b},j)}};return{init:function(){m()},events:d}});
define(["jquery","core/pubsub"],function(a,b){var c=!1,d={checkboxToggled:"core/checkbox-toggleall:checkboxToggled"},e=function(a,b,c){return c?a.find('[data-action="toggle"][data-togglegroup="'+b+'"]'):a.find('[data-action="toggle"][data-togglegroup*="'+b+'"]')},f=function(a,b){return e(a,b).filter('[data-toggle="slave"]')},g=function(a,b,c){return e(a,b,c).filter('[data-toggle="master"]')},h=function(a,b){return e(a,b,!0).filter('[data-toggle="action"]')},i=function(c){var e,g=c.data.root,h=a(c.target),i=h.data("togglegroup");e=h.is(":checkbox")?h.is(":checked"):1===h.data("checkall");var j=f(g,i),k=j.filter(":checked");l(g,i,e),j.prop("checked",e),j.trigger("change"),b.publish(d.checkboxToggled,{root:g,toggleGroupName:i,slaves:j,checkedSlaves:k,anyChecked:e})},j=function(c){var e=c.data.root,g=a(c.target),h=g.data("togglegroup").split(" "),i=[],j="";h.forEach(function(a){j+=" "+a,i.push(j.trim())}),i.forEach(function(a){var c=f(e,a),g=c.filter(":checked"),h=c.length===g.length;l(e,a,h,!0),k(e,a,!g.length),b.publish(d.checkboxToggled,{root:e,toggleGroupName:a,slaves:c,checkedSlaves:g,anyChecked:!!g.length})})},k=function(a,b,c){h(a,b).prop("disabled",c)},l=function(b,c,d,e){var f=g(b,c,e);f.prop("checked",d),f.each(function(c,e){e=a(e);var f;if(f=d?e.data("toggle-deselectall"):e.data("toggle-selectall"),e.is(":checkbox")){var g=b.find('[for="'+e.attr("id")+'"]');g.length&&g.html()!==f&&g.html(f)}else e.text(f),e.data("checkall",d?0:1)})},m=function(){if(!c){c=!0;var b=a(document.body);b.on("click",'[data-action="toggle"][data-toggle="master"]',{root:b},i),b.on("change",'[data-action="toggle"][data-toggle="slave"]',{root:b},j)}};return{init:function(){m()},events:d}});

40
lib/amd/src/checkbox-toggleall.js
View file

@ -53,7 +53,12 @@ define(['jquery', 'core/pubsub'], function($, PubSub) {
var target = $(e.target);
var toggleGroupName = target.data('togglegroup');
var targetState = target.is(':checked');
var targetState;
if (target.is(':checkbox')) {
targetState = target.is(':checked');
} else {
targetState = target.data('checkall') === 1;
}
var slaves = getAllSlaveCheckboxes(root, toggleGroupName);
var checkedSlaves = slaves.filter(':checked');
@ -115,20 +120,27 @@ define(['jquery', 'core/pubsub'], function($, PubSub) {
// Set the master checkboxes value and ARIA labels..
var masters = getControlCheckboxes(root, toggleGroupName, exactMatch);
masters.prop('checked', targetState);
masters.each(function(i, masterCheckbox) {
masterCheckbox = $(masterCheckbox);
var masterLabel = root.find('[for="' + masterCheckbox.attr('id') + '"]');
var targetString;
if (masterLabel.length) {
if (targetState) {
targetString = masterCheckbox.data('toggle-deselectall');
} else {
targetString = masterCheckbox.data('toggle-selectall');
}
masters.each(function(i, masterElement) {
masterElement = $(masterElement);
if (masterLabel.html() !== targetString) {
masterLabel.html(targetString);
var targetString;
if (targetState) {
targetString = masterElement.data('toggle-deselectall');
} else {
targetString = masterElement.data('toggle-selectall');
}
if (masterElement.is(':checkbox')) {
var masterLabel = root.find('[for="' + masterElement.attr('id') + '"]');
if (masterLabel.length) {
if (masterLabel.html() !== targetString) {
masterLabel.html(targetString);
}
}
} else {
masterElement.text(targetString);
// Set the checkall data attribute.
masterElement.data('checkall', targetState ? 0 : 1);
}
});
};
@ -138,7 +150,7 @@ define(['jquery', 'core/pubsub'], function($, PubSub) {
registered = true;
var root = $(document.body);
root.on('change', '[data-action="toggle"][data-toggle="master"]', {root: root}, toggleSlavesFromMasters);
root.on('click', '[data-action="toggle"][data-toggle="master"]', {root: root}, toggleSlavesFromMasters);
root.on('change', '[data-action="toggle"][data-toggle="slave"]', {root: root}, toggleMastersFromSlaves);
}
};

9
lib/classes/output/checkbox_toggleall.php
View file

@ -48,6 +48,9 @@ class checkbox_toggleall implements renderable, templatable {
/** @var array $options The options for the checkbox. */
protected $options;
/** @var bool $isbutton Whether to render this as a button. Applies to master checkboxes only. */
protected $isbutton;
/**
* Constructor.
*
@ -67,11 +70,13 @@ class checkbox_toggleall implements renderable, templatable {
* <li><b>deselectall </b> string - Master only. The language string that will be used to indicate that clicking on
* the master will select all of the slave checkboxes. Defaults to "Deselect all".</li>
* </ul>
* @param bool $isbutton Whether to render this as a button. Applies to master only.
*/
public function __construct(string $togglegroup, bool $ismaster, $options = []) {
public function __construct(string $togglegroup, bool $ismaster, $options = [], $isbutton = false) {
$this->togglegroup = $togglegroup;
$this->ismaster = $ismaster;
$this->options = $options;
$this->isbutton = $ismaster && $isbutton;
}
/**
@ -98,6 +103,8 @@ class checkbox_toggleall implements renderable, templatable {
$data->deselectall = $this->options['deselectall'] ?? get_string('deselectall');
}
$data->isbutton = $this->isbutton;
return $data;
}
}

36
lib/templates/checkbox-toggleall.mustache
View file

@ -29,17 +29,31 @@
}
}}
{{#master}}
<input id="{{id}}" name="{{name}}" type="checkbox" {{#classes}}class="{{.}}"{{/classes}} value="{{value}}"
data-action="toggle"
data-toggle="master"
data-togglegroup="{{togglegroup}}"
data-toggle-selectall="{{selectall}}"
data-toggle-deselectall="{{deselectall}}"
{{#checked}}checked="checked"{{/checked}}
/>
{{#label}}
<label for="{{id}}" class="{{labelclasses}}">{{.}}</label>
{{/label}}
{{#isbutton}}
<button type="button" id="{{id}}" name="{{name}}" class="btn btn-secondary {{classes}}"
data-action="toggle"
data-toggle="master"
data-togglegroup="{{togglegroup}}"
data-toggle-selectall="{{selectall}}"
data-toggle-deselectall="{{deselectall}}"
data-checkall="{{#checked}}0{{/checked}}{{^checked}}1{{/checked}}">
{{#checked}}{{deselectall}}{{/checked}}
{{^checked}}{{selectall}}{{/checked}}
</button>
{{/isbutton}}
{{^isbutton}}
<input id="{{id}}" name="{{name}}" type="checkbox" {{#classes}}class="{{.}}"{{/classes}} value="{{value}}"
data-action="toggle"
data-toggle="master"
data-togglegroup="{{togglegroup}}"
data-toggle-selectall="{{selectall}}"
data-toggle-deselectall="{{deselectall}}"
{{#checked}}checked="checked"{{/checked}}
/>
{{#label}}
<label for="{{id}}" class="{{labelclasses}}">{{.}}</label>
{{/label}}
{{/isbutton}}
{{/master}}
{{^master}}
<input id="{{id}}" name="{{name}}" type="checkbox" {{#classes}}class="{{.}}"{{/classes}} value="{{value}}"