MDL-66076 forumreport_summary: Groups filter made accessible

This commit is contained in:
Michael Hawkins 2019-10-08 12:46:26 +08:00 committed by Jun Pataleta
parent 14f92164f1
commit cc15134c7b
5 changed files with 63 additions and 19 deletions

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")});(0,b.default)(a).on("click",".filter-clear",function(a){var b=a.target.parentNode.parentNode.parentElement.querySelectorAll("input[type=\"checkbox\"]:checked");b.forEach(function(a){a.checked=!1})});var d=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){d(a)});(0,b.default)("thead").on("click","a",function(a){d(a)});(0,b.default)(".pagination").on("click","a",function(a){d(a)});var e=function(a){var b=document.getElementById(a),c=b.querySelectorAll("input[type=\"checkbox\"]:not(:checked)");c.forEach(function(a){a.checked=!0})};(0,b.default)("#filter-groups-popover .select-all").on("click",function(){e("filter-groups-popover")});(0,b.default)("#filter-groups-button").on("click",function(){var a=document.querySelector("#filter-groups-button"),d=document.querySelector("#filter-groups-popover");new c.default(a,d,{placement:"bottom"});(0,b.default)("#filter-groups-popover").removeClass("hidden")});(0,b.default)(a).on("click","#filter-groups-popover .filter-save",function(){(0,b.default)("#filter-groups-popover").addClass("hidden");d(!1)})};a.init=e});
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});
//# sourceMappingURL=filters.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -37,14 +37,20 @@ export const init = (root) => {
// Generic filter handlers.
// Event handler to clear filters.
$(root).on("click", ".filter-clear", function(event) {
// 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.
@ -87,10 +93,20 @@ export const init = (root) => {
});
};
// Submit report via filter
var submitWithFilter = (containerelement) => {
// Close the container (eg popover).
$(containerelement).addClass('hidden');
// Submit the filter values and re-generate report.
generateWithFilters(false);
};
// Groups filter specific handlers.
// Event to handle select all groups.
$('#filter-groups-popover .select-all').on('click', function() {
// Event handler for clicking select all groups.
$('#filter-groups-popover .select-all').on('click', function(event) {
event.preventDefault();
selectAll('filter-groups-popover');
});
@ -102,16 +118,39 @@ export const init = (root) => {
new Popper(referenceElement, popperContent, {placement: 'bottom'});
// Show popover.
$('#filter-groups-popover').removeClass('hidden');
// 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();
});
// Event handler to save groups filter.
$(root).on("click", "#filter-groups-popover .filter-save", function() {
// Close the popover.
$('#filter-groups-popover').addClass('hidden');
// Event handler to click save groups filter.
$(root).on("click", "#filter-groups-popover .filter-save", function(event) {
event.preventDefault();
submitWithFilter('#filter-groups-popover');
});
// Submit the filter values and re-generate report.
generateWithFilters(false);
// 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;
}
}
});
};

View File

@ -25,6 +25,7 @@
$string['attachmentcount'] = 'Number of attachments';
$string['viewcount'] = 'Number of views';
$string['earliestpost'] = 'Earliest post';
$string['filter:groupsbuttonlabel'] = 'Open the groups filter';
$string['filter:groupsname'] = 'Groups';
$string['filter:groupscountall'] = 'Groups (all)';
$string['filter:groupscountnumber'] = 'Groups ({$a})';

View File

@ -44,7 +44,8 @@
<input type="hidden" name="submitted" value="true">
<div id="filtersbuttons">
{{#hasgroups}}
<button type="button" id="filter-groups-button" class="btn btn-primary filter-button">
<button type="button" id="filter-groups-button" class="btn btn-primary rounded p-1" aria-expanded="false"
aria-haspopup="true" aria-label="{{# str}} filter:groupsbuttonlabel, forumreport_summary {{/ str}}">
{{filtergroupsname}}
</button>
@ -61,10 +62,13 @@
{{/filtergroups}}
<br>
</div>
<a href="#"><span class="select-all">{{# str}} selectall {{/ str}}</span></a>
<div class="float-right">
<a href="#"><span class="filter-clear p-1">{{# str}} clear {{/ str}}</span></a>
<a href="#"><span class="filter-save"><strong>{{# str}} save {{/ str}}</strong></span></a>
<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>
<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-save btn btn-link p-0" aria-label="{{# str}} save {{/ str}}">
<strong>{{# str}} save {{/ str}}</strong></button>
</div>
</div>
</div>
</div>