diff --git a/lib/amd/build/checkbox-toggleall.min.js b/lib/amd/build/checkbox-toggleall.min.js index 90e5ebca6b8..b52290f8197 100644 --- a/lib/amd/build/checkbox-toggleall.min.js +++ b/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){return a.find('[data-action="toggle"][data-togglegroup="'+b+'"]')},f=function(a,b){return e(a,b).filter('[data-toggle="slave"]')},g=function(a,b){return e(a,b).filter('[data-toggle="master"]')},h=function(c){var e=c.data.root,g=a(c.target),h=g.data("togglegroup"),i=g.is(":checked"),k=f(e,h),l=k.filter(":checked");j(e,h,i),k.prop("checked",i),b.publish(d.checkboxToggled,{root:e,toggleGroupName:h,slaves:k,checkedSlaves:l,anyChecked:i})},i=function(c){var e=c.data.root,g=a(c.target),h=g.data("togglegroup"),i=f(e,h),k=i.filter(":checked"),l=i.length===k.length;j(e,h,l),b.publish(d.checkboxToggled,{root:e,toggleGroupName:h,slaves:i,checkedSlaves:k,anyChecked:!!k.length})},j=function(b,c,d){var e=g(b,c);e.prop("checked",d),e.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))})},k=function(){if(!c){c=!0;var b=a(document.body);b.on("change",'[data-action="toggle"][data-toggle="master"]',{root:b},h),b.on("change",'[data-action="toggle"][data-toggle="slave"]',{root:b},i)}};return{init:function(){k()},events:d}}); \ No newline at end of file +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,!1).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,!1),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}}); \ No newline at end of file diff --git a/lib/amd/src/checkbox-toggleall.js b/lib/amd/src/checkbox-toggleall.js index c6d4103fe95..345db8ffaa4 100644 --- a/lib/amd/src/checkbox-toggleall.js +++ b/lib/amd/src/checkbox-toggleall.js @@ -22,38 +22,106 @@ */ define(['jquery', 'core/pubsub'], function($, PubSub) { + /** + * Whether event listeners have already been registered. + * + * @private + * @type {boolean} + */ var registered = false; + /** + * List of custom events that this module publishes. + * + * @private + * @type {{checkboxToggled: string}} + */ var events = { checkboxToggled: 'core/checkbox-toggleall:checkboxToggled', }; - var getAllCheckboxes = function(root, toggleGroup) { - return root.find('[data-action="toggle"][data-togglegroup="' + toggleGroup + '"]'); + /** + * Fetches elements that are member of a given toggle group. + * + * @private + * @param {jQuery} root The root jQuery element. + * @param {string} toggleGroup The toggle group name that we're searching form. + * @param {boolean} exactMatch Whether we want an exact match we just want to match toggle groups that start with the given + * toggle group name. + * @returns {jQuery} The elements matching the given toggle group. + */ + var getToggleGroupElements = function(root, toggleGroup, exactMatch) { + if (exactMatch) { + return root.find('[data-action="toggle"][data-togglegroup="' + toggleGroup + '"]'); + } else { + return root.find('[data-action="toggle"][data-togglegroup^="' + toggleGroup + '"]'); + } }; + /** + * Fetches the slave checkboxes for a given toggle group. + * + * @private + * @param {jQuery} root The root jQuery element. + * @param {string} toggleGroup The toggle group name. + * @returns {jQuery} The slave checkboxes belonging to the toggle group. + */ var getAllSlaveCheckboxes = function(root, toggleGroup) { - return getAllCheckboxes(root, toggleGroup).filter('[data-toggle="slave"]'); + return getToggleGroupElements(root, toggleGroup, false).filter('[data-toggle="slave"]'); }; - var getControlCheckboxes = function(root, toggleGroup) { - return getAllCheckboxes(root, toggleGroup).filter('[data-toggle="master"]'); + /** + * Fetches the master elements (checkboxes or buttons) that control the slave checkboxes in a given toggle group. + * + * @private + * @param {jQuery} root The root jQuery element. + * @param {string} toggleGroup The toggle group name. + * @param {boolean} exactMatch + * @returns {jQuery} The control elements belonging to the toggle group. + */ + var getControlCheckboxes = function(root, toggleGroup, exactMatch) { + return getToggleGroupElements(root, toggleGroup, exactMatch).filter('[data-toggle="master"]'); }; + /** + * Fetches the action elements that perform actions on the selected checkboxes in a given toggle group. + * + * @private + * @param {jQuery} root The root jQuery element. + * @param {string} toggleGroup The toggle group name. + * @returns {jQuery} The action elements belonging to the toggle group. + */ + var getActionElements = function(root, toggleGroup) { + return getToggleGroupElements(root, toggleGroup, true).filter('[data-toggle="action"]'); + }; + + /** + * Toggles the slave checkboxes in a given toggle group when a master element in that toggle group is toggled. + * + * @private + * @param {Object} e The event object. + */ var toggleSlavesFromMasters = function(e) { var root = e.data.root; 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'); - setMasterStates(root, toggleGroupName, targetState); + setMasterStates(root, toggleGroupName, targetState, false); // Set the slave checkboxes from the masters. slaves.prop('checked', targetState); + // Trigger 'change' event to toggle other master checkboxes (e.g. parent master checkboxes) and action elements. + slaves.trigger('change'); PubSub.publish(events.checkboxToggled, { root: root, @@ -64,55 +132,107 @@ define(['jquery', 'core/pubsub'], function($, PubSub) { }); }; + /** + * Toggles the master checkboxes in a given toggle group when all or none of the slave checkboxes in the same toggle group + * have been selected. + * + * @private + * @param {Object} e The event object. + */ var toggleMastersFromSlaves = function(e) { var root = e.data.root; var target = $(e.target); - var toggleGroupName = target.data('togglegroup'); + var toggleGroups = target.data('togglegroup').split(' '); + var toggleGroupLevels = []; + var toggleGroupLevel = ''; + toggleGroups.forEach(function(toggleGroupName) { + toggleGroupLevel += ' ' + toggleGroupName; + toggleGroupLevels.push(toggleGroupLevel.trim()); + }); - var slaves = getAllSlaveCheckboxes(root, toggleGroupName); - var checkedSlaves = slaves.filter(':checked'); - var targetState = (slaves.length === checkedSlaves.length); + toggleGroupLevels.forEach(function(toggleGroupName) { + var slaves = getAllSlaveCheckboxes(root, toggleGroupName); + var checkedSlaves = slaves.filter(':checked'); + var targetState = (slaves.length === checkedSlaves.length); - setMasterStates(root, toggleGroupName, targetState); + // Make sure to toggle the exact master checkbox. + setMasterStates(root, toggleGroupName, targetState, true); - PubSub.publish(events.checkboxToggled, { - root: root, - toggleGroupName: toggleGroupName, - slaves: slaves, - checkedSlaves: checkedSlaves, - anyChecked: !!checkedSlaves.length, + // Enable action elements when there's at least one checkbox checked. Disable otherwise. + setActionElementStates(root, toggleGroupName, !checkedSlaves.length); + + PubSub.publish(events.checkboxToggled, { + root: root, + toggleGroupName: toggleGroupName, + slaves: slaves, + checkedSlaves: checkedSlaves, + anyChecked: !!checkedSlaves.length, + }); }); }; - var setMasterStates = function(root, toggleGroupName, targetState) { - // Set the master checkboxes value and ARIA labels.. - var masters = getControlCheckboxes(root, toggleGroupName); - 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'); - } + /** + * Enables or disables the action elements. + * + * @private + * @param {jQuery} root The root jQuery element. + * @param {string} toggleGroupName The toggle group name of the action element(s). + * @param {boolean} disableActionElements Whether to disable or to enable the action elements. + */ + var setActionElementStates = function(root, toggleGroupName, disableActionElements) { + getActionElements(root, toggleGroupName).prop('disabled', disableActionElements); + }; - if (masterLabel.html() !== targetString) { - masterLabel.html(targetString); + /** + * Selects or deselects the master elements. + * + * @private + * @param {jQuery} root The root jQuery element. + * @param {string} toggleGroupName The toggle group name of the master element(s). + * @param {boolean} targetState Whether to select (true) or deselect (false). + * @param {boolean} exactMatch Whether to do an exact match for the toggle group name or not. + */ + var setMasterStates = function(root, toggleGroupName, targetState, exactMatch) { + // Set the master checkboxes value and ARIA labels.. + var masters = getControlCheckboxes(root, toggleGroupName, exactMatch); + masters.prop('checked', targetState); + masters.each(function(i, masterElement) { + masterElement = $(masterElement); + + 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); } }); }; + /** + * Registers the event listeners. + * + * @private + */ var registerListeners = function() { if (!registered) { 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); } }; diff --git a/lib/classes/output/checkbox_toggleall.php b/lib/classes/output/checkbox_toggleall.php new file mode 100644 index 00000000000..be81f80be91 --- /dev/null +++ b/lib/classes/output/checkbox_toggleall.php @@ -0,0 +1,123 @@ +. + +/** + * The renderable for core/checkbox-toggleall. + * + * @package core + * @copyright 2019 Jun Pataleta + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ + +namespace core\output; +defined('MOODLE_INTERNAL') || die(); + +use renderable; +use renderer_base; +use stdClass; +use templatable; + +/** + * The checkbox-toggleall renderable class. + * + * @package core + * @copyright 2019 Jun Pataleta + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ +class checkbox_toggleall implements renderable, templatable { + + /** @var string The name of the group of checkboxes to be toggled. */ + protected $togglegroup; + + /** @var bool $ismaster Whether we're rendering for a master checkbox or a slave checkbox. */ + protected $ismaster; + + /** @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. + * + * @param string $togglegroup The name of the group of checkboxes to be toggled. + * @param bool $ismaster Whether we're rendering for a master checkbox or a slave checkbox. + * @param array $options The options for the checkbox. Valid options are: + * + * @param bool $isbutton Whether to render this as a button. Applies to master only. + */ + public function __construct(string $togglegroup, bool $ismaster, $options = [], $isbutton = false) { + $this->togglegroup = $togglegroup; + $this->ismaster = $ismaster; + $this->options = $options; + $this->isbutton = $ismaster && $isbutton; + } + + /** + * Export for template. + * + * @param renderer_base $output The renderer. + * @return stdClass + */ + public function export_for_template(renderer_base $output) { + $data = (object)[ + 'togglegroup' => $this->togglegroup, + 'id' => $this->options['id'] ?? null, + 'name' => $this->options['name'] ?? null, + 'value' => $this->options['value'] ?? null, + 'classes' => $this->options['classes'] ?? null, + 'label' => $this->options['label'] ?? null, + 'labelclasses' => $this->options['labelclasses'] ?? null, + 'checked' => $this->options['checked'] ?? false, + ]; + + if ($this->ismaster) { + $data->selectall = $this->options['selectall'] ?? get_string('selectall'); + $data->deselectall = $this->options['deselectall'] ?? get_string('deselectall'); + } + + return $data; + } + + /** + * Fetches the appropriate template for the checkbox toggle all element. + * + * @return string + */ + public function get_template() { + if ($this->ismaster) { + if ($this->isbutton) { + return 'core/checkbox-toggleall-master-button'; + } else { + return 'core/checkbox-toggleall-master'; + } + } + return 'core/checkbox-toggleall-slave'; + } +} diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php index 0f309bf6408..3328e4cdb1d 100644 --- a/lib/outputrenderers.php +++ b/lib/outputrenderers.php @@ -4711,6 +4711,16 @@ EOD; $data = $bar->export_for_template($this); return $this->render_from_template('core/progress_bar', $data); } + + /** + * Renders element for a toggle-all checkbox. + * + * @param \core\output\checkbox_toggleall $element + * @return string + */ + public function render_checkbox_toggleall(\core\output\checkbox_toggleall $element) { + return $this->render_from_template($element->get_template(), $element->export_for_template($this)); + } } /** diff --git a/lib/templates/checkbox-toggleall-master-button.mustache b/lib/templates/checkbox-toggleall-master-button.mustache new file mode 100644 index 00000000000..4648b4303c4 --- /dev/null +++ b/lib/templates/checkbox-toggleall-master-button.mustache @@ -0,0 +1,54 @@ +{{! + 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 . +}} +{{! + @template core/checkbox-toggleall-master-button + + Template for a master button in a toggle group. The master button toggles the checked states of the slave checkboxes. + + Data attributes required for JS: + * data-action + * data-toggle + * data-togglegroup + + Example context (json): + { + "id": "select-all", + "name": "select-all", + "togglegroup": "toggle-group", + "label": "Select everything!", + "checked": true, + "classes": "p-1", + "selectall": "Select all", + "deselectall": "Deselect all" + } +}} + + +{{#js}} + require(['core/checkbox-toggleall'], function(ToggleAll) { + ToggleAll.init(); + }); +{{/js}} diff --git a/lib/templates/checkbox-toggleall-master.mustache b/lib/templates/checkbox-toggleall-master.mustache new file mode 100644 index 00000000000..1a514a4ddb5 --- /dev/null +++ b/lib/templates/checkbox-toggleall-master.mustache @@ -0,0 +1,55 @@ +{{! + 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 . +}} +{{! + @template core/checkbox-toggleall-master + + Template for a master checkbox in a toggle group. The master checkbox toggles the checked states of the slave checkboxes. + + Data attributes required for JS: + * data-action + * data-toggle + * data-togglegroup + + Example context (json): + { + "id": "select-all", + "name": "select-all", + "togglegroup": "toggle-group", + "label": "Select everything!", + "checked": true, + "classes": "p-1", + "selectall": "Select all", + "deselectall": "Deselect all" + } +}} + +{{#label}} + +{{/label}} + +{{#js}} + require(['core/checkbox-toggleall'], function(ToggleAll) { + ToggleAll.init(); + }); +{{/js}} diff --git a/lib/templates/checkbox-toggleall-slave.mustache b/lib/templates/checkbox-toggleall-slave.mustache new file mode 100644 index 00000000000..ac013add67e --- /dev/null +++ b/lib/templates/checkbox-toggleall-slave.mustache @@ -0,0 +1,45 @@ +{{! + 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 . +}} +{{! + @template core/checkbox-toggleall-slave + + Template for a slave checkbox in a toggle group. + + Data attributes required for JS: + * data-action + * data-toggle + * data-togglegroup + + Example context (json): + { + "id": "select-item", + "name": "select-item", + "togglegroup": "toggle-group", + "label": "Select me!", + "checked": true, + "classes": "p-1" + } +}} + +{{#label}} + +{{/label}} diff --git a/lib/upgrade.txt b/lib/upgrade.txt index 3c5e180c8d1..a6e58650a77 100644 --- a/lib/upgrade.txt +++ b/lib/upgrade.txt @@ -14,6 +14,10 @@ information provided here is intended especially for developers. * allow_switch() * Remove duplicate font-awesome SCSS, Please see /theme/boost/scss/fontawesome for usage (MDL-65936) * Remove lib/pear/Crypt/CHAP.php (MDL-65747) +* New output component available: \core\output\checkbox_toggleall + - This allows developers to easily output groups of checkboxes that can be toggled by master controls in the form of a checkbox or + a button. Action elements which perform actions on the selected checkboxes can also be enabled/disabled depending on whether + at least a single checkbox item is selected or not. === 3.7 === diff --git a/mod/choice/amd/build/select_all_choices.min.js b/mod/choice/amd/build/select_all_choices.min.js deleted file mode 100644 index bdbfb171928..00000000000 --- a/mod/choice/amd/build/select_all_choices.min.js +++ /dev/null @@ -1 +0,0 @@ -define(["jquery"],function(a){return{init:function(){a(".selectallnone a").on("click",function(b){b.preventDefault(),a("#attemptsform").find("input:checkbox").prop("checked",a(this).data("selectInfo"))})}}}); \ No newline at end of file diff --git a/mod/choice/amd/src/select_all_choices.js b/mod/choice/amd/src/select_all_choices.js deleted file mode 100644 index 5a4a4fb8c05..00000000000 --- a/mod/choice/amd/src/select_all_choices.js +++ /dev/null @@ -1,33 +0,0 @@ -// 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 . - -/** - * Ticks or unticks all checkboxes when clicking the Select all or Deselect all elements when viewing the response overview. - * - * @module mod_choice/select_all_choices - * @copyright 2017 Marcus Fabriczy - * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */ - -define(['jquery'], function($) { - return { - init: function () { - $('.selectallnone a').on('click', function(e) { - e.preventDefault(); - $('#attemptsform').find('input:checkbox').prop('checked', $(this).data('selectInfo')); - }); - } - }; -}); diff --git a/mod/choice/lang/en/choice.php b/mod/choice/lang/en/choice.php index f9ec368a556..7aa6252052b 100644 --- a/mod/choice/lang/en/choice.php +++ b/mod/choice/lang/en/choice.php @@ -70,6 +70,7 @@ $string['choice:view'] = 'View choice activity'; $string['chooseaction'] = 'Choose an action ...'; $string['chooseoption'] = 'Choose: {$a}'; $string['description'] = 'Description'; +$string['deselectalloption'] = 'Deselect all "{$a}"'; $string['includeinactive'] = 'Include responses from inactive/suspended users'; $string['indicator:cognitivedepth'] = 'Choice cognitive'; $string['indicator:cognitivedepth_help'] = 'This indicator is based on the cognitive depth reached by the student in a Choice activity.'; @@ -134,6 +135,7 @@ $string['responsesto'] = 'Responses to {$a}'; $string['results'] = 'Results'; $string['savemychoice'] = 'Save my choice'; $string['search:activity'] = 'Choice - activity information'; +$string['selectalloption'] = 'Select all "{$a}"'; $string['showpreview'] = 'Show preview'; $string['showpreview_help'] = 'Allow students to preview the available options before the choice is opened for submission.'; $string['showunanswered'] = 'Show column for unanswered'; diff --git a/mod/choice/renderer.php b/mod/choice/renderer.php index 4e8d7e2d416..2811996f4a8 100644 --- a/mod/choice/renderer.php +++ b/mod/choice/renderer.php @@ -133,7 +133,7 @@ class mod_choice_renderer extends plugin_renderer_base { * @return string */ public function display_publish_name_vertical($choices) { - global $PAGE; + global $PAGE, $OUTPUT; $html =''; $html .= html_writer::tag('h3',format_string(get_string("responses", "choice"))); @@ -179,22 +179,42 @@ class mod_choice_renderer extends plugin_renderer_base { foreach ($choices->options as $optionid => $options) { $celloption = clone($celldefault); $cellusernumber = clone($celldefault); - $cellusernumber->style = 'text-align: center;'; - $celltext = ''; if ($choices->showunanswered && $optionid == 0) { - $celltext = get_string('notanswered', 'choice'); + $headertitle = get_string('notanswered', 'choice'); } else if ($optionid > 0) { - $celltext = format_string($choices->options[$optionid]->text); + $headertitle = format_string($choices->options[$optionid]->text); + } + $celltext = $headertitle; + + // Render select/deselect all checkbox for this option. + if ($choices->viewresponsecapability && $choices->deleterepsonsecapability) { + + // Build the select/deselect all for this option. + $selectallid = 'select-response-option-' . $optionid; + $togglegroup = 'responses response-option-' . $optionid; + $selectalltext = get_string('selectalloption', 'choice', $headertitle); + $deselectalltext = get_string('deselectalloption', 'choice', $headertitle); + $mastercheckbox = new \core\output\checkbox_toggleall($togglegroup, true, [ + 'id' => $selectallid, + 'name' => $selectallid, + 'value' => 1, + 'selectall' => $selectalltext, + 'deselectall' => $deselectalltext, + 'label' => $selectalltext, + 'labelclasses' => 'accesshide', + ]); + + $celltext .= html_writer::div($OUTPUT->render($mastercheckbox)); } $numberofuser = 0; if (!empty($options->user) && count($options->user) > 0) { $numberofuser = count($options->user); } - $celloption->text = $celltext; + $celloption->text = html_writer::div($celltext, 'text-center'); $optionsnames[$optionid] = $celltext; - $cellusernumber->text = $numberofuser; + $cellusernumber->text = html_writer::div($numberofuser, 'text-center'); $columns['options'][] = $celloption; $columns['usernumber'][] = $cellusernumber; @@ -230,8 +250,6 @@ class mod_choice_renderer extends plugin_renderer_base { $checkbox = ''; if ($choices->viewresponsecapability && $choices->deleterepsonsecapability) { $checkboxid = 'attempt-user' . $user->id . '-option' . $optionid; - $checkbox .= html_writer::label($userfullname . ' ' . $optionsnames[$optionid], - $checkboxid, false, array('class' => 'accesshide')); if ($optionid > 0) { $checkboxname = 'attemptid[]'; $checkboxvalue = $user->answerid; @@ -239,8 +257,17 @@ class mod_choice_renderer extends plugin_renderer_base { $checkboxname = 'userid[]'; $checkboxvalue = $user->id; } - $checkbox .= html_writer::checkbox($checkboxname, $checkboxvalue, '', null, - array('id' => $checkboxid, 'class' => 'mr-1')); + + $togglegroup = 'responses response-option-' . $optionid; + $slavecheckbox = new \core\output\checkbox_toggleall($togglegroup, false, [ + 'id' => $checkboxid, + 'name' => $checkboxname, + 'class' => 'mr-1', + 'value' => $checkboxvalue, + 'label' => $userfullname . ' ' . $options->text, + 'labelclasses' => 'accesshide', + ]); + $checkbox = $OUTPUT->render($slavecheckbox); } $userimage = $this->output->user_picture($user, array('courseid' => $choices->courseid, 'link' => false)); $profileurl = new moodle_url('/user/view.php', array('id' => $user->id, 'course' => $choices->courseid)); @@ -262,14 +289,17 @@ class mod_choice_renderer extends plugin_renderer_base { $actiondata = ''; if ($choices->viewresponsecapability && $choices->deleterepsonsecapability) { - $selecturl = new moodle_url('#'); - - $actiondata .= html_writer::start_div('selectallnone'); - $actiondata .= html_writer::link($selecturl, get_string('selectall'), ['data-select-info' => true]) . ' / '; - - $actiondata .= html_writer::link($selecturl, get_string('deselectall'), ['data-select-info' => false]); - - $actiondata .= html_writer::end_div(); + // Build the select/deselect all for all of options. + $selectallid = 'select-all-responses'; + $togglegroup = 'responses'; + $selectallcheckbox = new \core\output\checkbox_toggleall($togglegroup, true, [ + 'id' => $selectallid, + 'name' => $selectallid, + 'value' => 1, + 'label' => get_string('selectall'), + 'classes' => 'mr-1' + ], true); + $actiondata .= $OUTPUT->render($selectallcheckbox); $actionurl = new moodle_url($PAGE->url, array('sesskey'=>sesskey(), 'action'=>'delete_confirmation()')); $actionoptions = array('delete' => get_string('delete')); @@ -278,11 +308,16 @@ class mod_choice_renderer extends plugin_renderer_base { $actionoptions['choose_'.$optionid] = get_string('chooseoption', 'choice', $option->text); } } - $select = new single_select($actionurl, 'action', $actionoptions, null, - array('' => get_string('chooseaction', 'choice')), 'attemptsform'); + $selectattributes = [ + 'data-action' => 'toggle', + 'data-togglegroup' => 'responses', + 'data-toggle' => 'action', + ]; + $selectnothing = ['' => get_string('chooseaction', 'choice')]; + $select = new single_select($actionurl, 'action', $actionoptions, null, $selectnothing, 'attemptsform'); $select->set_label(get_string('withselected', 'choice')); - - $PAGE->requires->js_call_amd('mod_choice/select_all_choices', 'init'); + $select->disabled = true; + $select->attributes = $selectattributes; $actiondata .= $this->output->render($select); }