mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 00:46:50 +02:00
MDL-65928 core: Render master element as button too
This commit is contained in:
parent
6259a9d065
commit
5943fc3f95
4 changed files with 60 additions and 27 deletions
2
lib/amd/build/checkbox-toggleall.min.js
vendored
2
lib/amd/build/checkbox-toggleall.min.js
vendored
|
@ -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}});
|
|
@ -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,21 +120,28 @@ 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') + '"]');
|
||||
masters.each(function(i, masterElement) {
|
||||
masterElement = $(masterElement);
|
||||
|
||||
var targetString;
|
||||
if (masterLabel.length) {
|
||||
if (targetState) {
|
||||
targetString = masterCheckbox.data('toggle-deselectall');
|
||||
targetString = masterElement.data('toggle-deselectall');
|
||||
} else {
|
||||
targetString = masterCheckbox.data('toggle-selectall');
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,6 +29,19 @@
|
|||
}
|
||||
}}
|
||||
{{#master}}
|
||||
{{#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"
|
||||
|
@ -40,6 +53,7 @@
|
|||
{{#label}}
|
||||
<label for="{{id}}" class="{{labelclasses}}">{{.}}</label>
|
||||
{{/label}}
|
||||
{{/isbutton}}
|
||||
{{/master}}
|
||||
{{^master}}
|
||||
<input id="{{id}}" name="{{name}}" type="checkbox" {{#classes}}class="{{.}}"{{/classes}} value="{{value}}"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue