MDL-66076 forumreport_summary: filter JS and template optimisations

mod/forum/report/summary/amd/src/filters.js

@@ -24,9 +24,11 @@
 
 import $ from 'jquery';
 import Popper from 'core/popper';
+import CustomEvents from 'core/custom_interaction_events';
+import Selectors from 'forumreport_summary/selectors';
 
 export const init = (root) => {
-    root = $(root);
+    let jqRoot = $(root);
 
     // Hide loading spinner and show report once page is ready.
     // This ensures filters can be applied when sorting by columns.
@@ -37,22 +39,6 @@ export const init = (root) => {
 
     // Generic filter handlers.
 
-    // Called to clear filters.
-    var clearAll = (event) => {
-        // Clear checkboxes.
-        let selected = event.target.parentNode.parentNode.parentElement.querySelectorAll('input[type="checkbox"]:checked');
-
-        selected.forEach(function(checkbox) {
-            checkbox.checked = false;
-        });
-    };
-
-    // Event handler for clearing filter by clicking option.
-    $(root).on("click", ".filter-clear", function(event) {
-        event.preventDefault();
-        clearAll(event);
-    });
-
     // Called to override click event to trigger a proper generate request with filtering.
     var generateWithFilters = (event) => {
         var newLink = $('#filtersform').attr('action');
@@ -83,16 +69,6 @@ export const init = (root) => {
         generateWithFilters(event);
     });
 
-    // Select all checkboxes within a filter section.
-    var selectAll = (checkboxdiv) => {
-        let targetdiv = document.getElementById(checkboxdiv);
-        let deselected = targetdiv.querySelectorAll('input[type="checkbox"]:not(:checked)');
-
-        deselected.forEach(function(checkbox) {
-            checkbox.checked = true;
-        });
-    };
-
     // Submit report via filter
     var submitWithFilter = (containerelement) => {
         // Close the container (eg popover).
@@ -105,52 +81,43 @@ export const init = (root) => {
     // Groups filter specific handlers.
 
     // Event handler for clicking select all groups.
-    $('#filter-groups-popover .select-all').on('click', function(event) {
-        event.preventDefault();
-        selectAll('filter-groups-popover');
+    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.selectall, function() {
+        let deselected = root.querySelectorAll(Selectors.filters.group.checkbox + ':not(:checked)');
+        deselected.forEach(function(checkbox) {
+            checkbox.checked = true;
+        });
+    });
+
+    // Event handler for clearing filter by clicking option.
+    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.clear, function() {
+        // Clear checkboxes.
+        let selected = root.querySelectorAll(Selectors.filters.group.checkbox + ':checked');
+        selected.forEach(function(checkbox) {
+            checkbox.checked = false;
+        });
     });
 
     // Event handler for showing groups filter popover.
-    $('#filter-groups-button').on('click', function() {
+    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.trigger, function() {
         // Create popover.
-        var referenceElement = document.querySelector('#filter-groups-button'),
-            popperContent = document.querySelector('#filter-groups-popover');
+        var referenceElement = root.querySelector(Selectors.filters.group.trigger),
+            popperContent = root.querySelector(Selectors.filters.group.popover);
 
         new Popper(referenceElement, popperContent, {placement: 'bottom'});
 
-        // Show popover and switch focus.
-        var groupsbutton = document.getElementById('filter-groups-button'),
-            groupspopover = document.getElementById('filter-groups-popover');
-        groupspopover.classList.remove('hidden');
-        groupsbutton.setAttribute('aria-expanded', true);
-        groupsbutton.classList.add('btn-outline-primary');
-        groupsbutton.classList.remove('btn-primary');
-        groupspopover.querySelector('input').focus();
+        // Show popover.
+        popperContent.classList.remove('hidden');
+
+        // Change to outlined button.
+        referenceElement.classList.add('btn-outline-primary');
+        referenceElement.classList.remove('btn-primary');
+
+        // Let screen readers know that it's now expanded.
+        referenceElement.setAttribute('aria-expanded', true);
     });
 
     // Event handler to click save groups filter.
-    $(root).on("click", "#filter-groups-popover .filter-save", function(event) {
-        event.preventDefault();
+    jqRoot.on(CustomEvents.events.activate, Selectors.filters.group.save, function() {
         submitWithFilter('#filter-groups-popover');
     });
-
-    // Event handler to support pressing enter/space on groups filter popover actions.
-    $('#filter-groups-popover').on("keydown", ".filter-actions", function(event) {
-    if ((event.charCode === 13 || event.keyCode === 13 || event.charCode === 32 || event.keyCode === 32)
-                && event.target.classList.length > 0) {
-            event.preventDefault();
-
-            switch(event.target.classList[0]) {
-                case 'select-all':
-                    selectAll('filter-groups-popover');
-                    break;
-                case 'filter-clear':
-                    clearAll(event);
-                    break;
-                case 'filter-save':
-                    submitWithFilter('#filter-groups-popover');
-                    break;
-            }
-        }
-    });
 };

mod/forum/report/summary/amd/src/selectors.js

@@ -0,0 +1,36 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+/**
+ * Module containing the selectors for the forum summary report.
+ *
+ * @module     forumreport_summary/selectors
+ * @package    forumreport_summary
+ * @copyright  2019 Jun Pataleta
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+export default {
+    filters: {
+        group: {
+            checkbox: '[data-region="filter-groups"] input[type="checkbox"]',
+            clear: '[data-region="filter-groups"] .filter-clear',
+            popover: '#filter-groups-popover',
+            save: '[data-region="filter-groups"] .filter-save',
+            selectall: '[data-region="filter-groups"] .select-all',
+            trigger: '#filter-groups-button',
+        }
+    }
+};

mod/forum/report/summary/templates/filters.mustache

@@ -52,22 +52,22 @@
             {{! Start groups filter popover}}
             <div id="filter-groups-popover" class="popover m-t-1 hidden">
                 <h3 class="popover-header">{{# str}} filter:groupsname, forumreport_summary {{/ str}}</h3>
-                <div class="popover-body">
+                <div class="popover-body" data-region="filter-groups">
                     <div class="form-check filter-scrollable">
                         {{#filtergroups}}
                         <input id="filtergroups{{groupid}}" class="form-check-input" type="checkbox" name="filtergroups[]"
                             value="{{groupid}}" {{#checked}} checked="checked" {{/checked}}>
                         <label class="form-check-label pt-1" for="filtergroups{{groupid}}">{{groupname}}</label>
                         <br>
                         {{/filtergroups}}
-                        <br>
                     </div>
                     <div class="filter-actions">
-                        <button type="button" class="select-all btn btn-link p-0 p-r-1" aria-label="{{# str}} selectall {{/ str}}">{{# str}} selectall {{/ str}}</button>
+                        <button type="button" class="select-all btn btn-link p-0 pr-1" aria-label="{{# str}} selectall {{/ str}}">{{# str}} selectall {{/ str}}</button>
                         <div class="float-right">
-                            <button type="button" class="filter-clear btn btn-link p-0 p-r-1" aria-label="{{# str}} clear {{/ str}}">{{# str}} clear {{/ str}}</button>
+                            <button type="button" class="filter-clear btn btn-link p-0 px-1" aria-label="{{# str}} clear {{/ str}}">{{# str}} clear {{/ str}}</button>
                             <button type="button" class="filter-save btn btn-link p-0" aria-label="{{# str}} save {{/ str}}">
-                                    <strong>{{# str}} save {{/ str}}</strong></button>
+                                <strong>{{# str}} save {{/ str}}</strong>
+                            </button>
                         </div>
                     </div>
                 </div>