mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-23 17:10:20 +01:00
Code Issues Projects Releases Wiki Activity

MDL-66076 forumreport_summary: filter JS and template optimisations

Browse Source
This commit is contained in:
Jun Pataleta 2019-10-10 15:12:54 +08:00
parent fb599f32d6
commit ce8a2d11d8
7 changed files with 76 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mod/forum/report/summary/amd/build/filters.min.js vendored
View File

@ -1,2 +1,2 @@
define ("forumreport_summary/filters",["exports","jquery","core/popper"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}var e=function(a){a=(0,b.default)(a);(0,b.default)(document).ready(function(){(0,b.default)(".loading-icon").hide();(0,b.default)("#summaryreport").removeClass("hidden")});var d=function(a){var b=a.target.parentNode.parentNode.parentElement.querySelectorAll("input[type=\"checkbox\"]:checked");b.forEach(function(a){a.checked=!1})};(0,b.default)(a).on("click",".filter-clear",function(a){a.preventDefault();d(a)});var e=function(a){var c=(0,b.default)("#filtersform").attr("action");if(a){a.preventDefault();var d=a.target.search.substr(1);c+="&"+d}(0,b.default)("#filtersform").attr("action",c);(0,b.default)("#filtersform").submit()};(0,b.default)(".resettable").on("click","a",function(a){e(a)});(0,b.default)("thead").on("click","a",function(a){e(a)});(0,b.default)(".pagination").on("click","a",function(a){e(a)});var f=function(a){var b=document.getElementById(a),c=b.querySelectorAll("input[type=\"checkbox\"]:not(:checked)");c.forEach(function(a){a.checked=!0})},g=function(a){(0,b.default)(a).addClass("hidden");e(!1)};(0,b.default)("#filter-groups-popover .select-all").on("click",function(a){a.preventDefault();f("filter-groups-popover")});(0,b.default)("#filter-groups-button").on("click",function(){var a=document.querySelector("#filter-groups-button"),b=document.querySelector("#filter-groups-popover");new c.default(a,b,{placement:"bottom"});var d=document.getElementById("filter-groups-button"),e=document.getElementById("filter-groups-popover");e.classList.remove("hidden");d.setAttribute("aria-expanded",!0);d.classList.add("btn-outline-primary");d.classList.remove("btn-primary");e.querySelector("input").focus()});(0,b.default)(a).on("click","#filter-groups-popover .filter-save",function(a){a.preventDefault();g("#filter-groups-popover")});(0,b.default)("#filter-groups-popover").on("keydown",".filter-actions",function(a){if((13===a.charCode||13===a.keyCode||32===a.charCode||32===a.keyCode)&&0<a.target.classList.length){a.preventDefault();switch(a.target.classList[0]){case"select-all":f("filter-groups-popover");break;case"filter-clear":d(a);break;case"filter-save":g("#filter-groups-popover");break;}}})};a.init=e});
define ("forumreport_summary/filters",["exports","jquery","core/popper","core/custom_interaction_events","forumreport_summary/selectors"],function(a,b,c,d,e){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=f(b);c=f(c);d=f(d);e=f(e);function f(a){return a&&a.__esModule?a:{default:a}}var g=function(a){var f=(0,b.default)(a);(0,b.default)(document).ready(function(){(0,b.default)(".loading-icon").hide();(0,b.default)("#summaryreport").removeClass("hidden")});var g=function(a){var c=(0,b.default)("#filtersform").attr("action");if(a){a.preventDefault();var d=a.target.search.substr(1);c+="&"+d}(0,b.default)("#filtersform").attr("action",c);(0,b.default)("#filtersform").submit()};(0,b.default)(".resettable").on("click","a",function(a){g(a)});(0,b.default)("thead").on("click","a",function(a){g(a)});(0,b.default)(".pagination").on("click","a",function(a){g(a)});var h=function(a){(0,b.default)(a).addClass("hidden");g(!1)};f.on(d.default.events.activate,e.default.filters.group.selectall,function(){var b=a.querySelectorAll(e.default.filters.group.checkbox+":not(:checked)");b.forEach(function(a){a.checked=!0})});f.on(d.default.events.activate,e.default.filters.group.clear,function(){var b=a.querySelectorAll(e.default.filters.group.checkbox+":checked");b.forEach(function(a){a.checked=!1})});f.on(d.default.events.activate,e.default.filters.group.trigger,function(){var b=a.querySelector(e.default.filters.group.trigger),d=a.querySelector(e.default.filters.group.popover);new c.default(b,d,{placement:"bottom"});d.classList.remove("hidden");b.classList.add("btn-outline-primary");b.classList.remove("btn-primary");b.setAttribute("aria-expanded",!0)});f.on(d.default.events.activate,e.default.filters.group.save,function(){h("#filter-groups-popover")})};a.init=g});
//# sourceMappingURL=filters.min.js.map

2
mod/forum/report/summary/amd/build/filters.min.js.map
View File

File diff suppressed because one or more lines are too long

2
mod/forum/report/summary/amd/build/selectors.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
define ("forumreport_summary/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;a.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"}}};return a.default});
//# sourceMappingURL=selectors.min.js.map

1
mod/forum/report/summary/amd/build/selectors.min.js.map Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["../src/selectors.js"],"names":["filters","group","checkbox","clear","popover","save","selectall","trigger"],"mappings":"yJAwBe,CACXA,OAAO,CAAE,CACLC,KAAK,CAAE,CACHC,QAAQ,CAAE,0DADP,CAEHC,KAAK,CAAE,+CAFJ,CAGHC,OAAO,CAAE,wBAHN,CAIHC,IAAI,CAAE,8CAJH,CAKHC,SAAS,CAAE,6CALR,CAMHC,OAAO,CAAE,uBANN,CADF,CADE,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Module containing the selectors for the forum summary report.\n *\n * @module forumreport_summary/selectors\n * @package forumreport_summary\n * @copyright 2019 Jun Pataleta\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n filters: {\n group: {\n checkbox: '[data-region=\"filter-groups\"] input[type=\"checkbox\"]',\n clear: '[data-region=\"filter-groups\"] .filter-clear',\n popover: '#filter-groups-popover',\n save: '[data-region=\"filter-groups\"] .filter-save',\n selectall: '[data-region=\"filter-groups\"] .select-all',\n trigger: '#filter-groups-button',\n }\n }\n};\n"],"file":"selectors.min.js"}

93
mod/forum/report/summary/amd/src/filters.js
View File

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

36
mod/forum/report/summary/amd/src/selectors.js Normal file
View File

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

10
mod/forum/report/summary/templates/filters.mustache
View File

@ -52,7 +52,7 @@
{{! 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[]"
@ -60,14 +60,14 @@
<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>