MDL-65928 core: Render master element as button too

lib/amd/build/checkbox-toggleall.min.js

@@ -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}});

lib/amd/src/checkbox-toggleall.js

@@ -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) {
+        masters.each(function(i, masterElement) {
-            masterCheckbox = $(masterCheckbox);
+            masterElement = $(masterElement);
-            var masterLabel = root.find('[for="' + masterCheckbox.attr('id') + '"]');
+
             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);
         }
     };

lib/classes/output/checkbox_toggleall.php

@@ -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;
     }
 }

lib/templates/checkbox-toggleall.mustache

@@ -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}}"