mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 08:56:36 +02:00
MDL-72688 contentbank: Add and maintain appropriate aria roles
Also moved header text into the sorting button as per the example at https://dequeuniversity.com/library/aria/table-sortable
This commit is contained in:
Shamim Rezaie
parent
ee1c3d9837
commit
eaaf4e9486
10 changed files with 70 additions and 38 deletions
2
contentbank/amd/build/selectors.min.js
vendored
2
contentbank/amd/build/selectors.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
||||||
define ("core_contentbank/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var b=function(a,b){return"[data-".concat(a,"=\"").concat(b,"\"]")},c={regions:{cbcontentname:b("region","cb-content-name"),contentbank:b("region","contentbank"),filearea:b("region","filearea")},actions:{search:b("action","searchcontent"),clearSearch:b("action","clearsearch"),viewgrid:b("action","viewgrid"),viewlist:b("action","viewlist"),sortname:b("action","sortname"),sortuses:b("action","sortuses"),sortdate:b("action","sortdate"),sortsize:b("action","sortsize"),sorttype:b("action","sorttype"),sortauthor:b("action","sortauthor")},elements:{listitem:".cb-listitem",cbnavbarbreadcrumb:".cb-navbar-breadbrumb",cbnavbartotalsearch:".cb-navbar-totalsearch",searchinput:"#searchinput",sortbutton:".cb-btnsort"}};a.default=c;return a.default});
|
define ("core_contentbank/selectors",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;var b=function(a,b){return"[data-".concat(a,"=\"").concat(b,"\"]")},c={regions:{cbcontentname:b("region","cb-content-name"),contentbank:b("region","contentbank"),filearea:b("region","filearea")},actions:{search:b("action","searchcontent"),clearSearch:b("action","clearsearch"),viewgrid:b("action","viewgrid"),viewlist:b("action","viewlist"),sortname:b("action","sortname"),sortuses:b("action","sortuses"),sortdate:b("action","sortdate"),sortsize:b("action","sortsize"),sorttype:b("action","sorttype"),sortauthor:b("action","sortauthor")},elements:{listitem:".cb-listitem",heading:".cb-heading",cell:".cb-column",cbnavbarbreadcrumb:".cb-navbar-breadbrumb",cbnavbartotalsearch:".cb-navbar-totalsearch",searchinput:"#searchinput",sortbutton:".cb-btnsort"}};a.default=c;return a.default});
|
||||||
//# sourceMappingURL=selectors.min.js.map
|
//# sourceMappingURL=selectors.min.js.map
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sources":["../src/selectors.js"],"names":["getDataSelector","name","value","regions","cbcontentname","contentbank","filearea","actions","search","clearSearch","viewgrid","viewlist","sortname","sortuses","sortdate","sortsize","sorttype","sortauthor","elements","listitem","cbnavbarbreadcrumb","cbnavbartotalsearch","searchinput","sortbutton"],"mappings":"+IA+BMA,CAAAA,CAAe,CAAG,SAACC,CAAD,CAAOC,CAAP,CAAiB,CACrC,sBAAgBD,CAAhB,eAAyBC,CAAzB,OACH,C,GAEc,CACXC,OAAO,CAAE,CACLC,aAAa,CAAEJ,CAAe,CAAC,QAAD,CAAW,iBAAX,CADzB,CAELK,WAAW,CAAEL,CAAe,CAAC,QAAD,CAAW,aAAX,CAFvB,CAGLM,QAAQ,CAAEN,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CADE,CAMXO,OAAO,CAAE,CACLC,MAAM,CAAER,CAAe,CAAC,QAAD,CAAW,eAAX,CADlB,CAELS,WAAW,CAAET,CAAe,CAAC,QAAD,CAAW,aAAX,CAFvB,CAGLU,QAAQ,CAAEV,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CAILW,QAAQ,CAAEX,CAAe,CAAC,QAAD,CAAW,UAAX,CAJpB,CAKLY,QAAQ,CAAEZ,CAAe,CAAC,QAAD,CAAW,UAAX,CALpB,CAMLa,QAAQ,CAAEb,CAAe,CAAC,QAAD,CAAW,UAAX,CANpB,CAOLc,QAAQ,CAAEd,CAAe,CAAC,QAAD,CAAW,UAAX,CAPpB,CAQLe,QAAQ,CAAEf,CAAe,CAAC,QAAD,CAAW,UAAX,CARpB,CASLgB,QAAQ,CAAEhB,CAAe,CAAC,QAAD,CAAW,UAAX,CATpB,CAULiB,UAAU,CAAEjB,CAAe,CAAC,QAAD,CAAW,YAAX,CAVtB,CANE,CAkBXkB,QAAQ,CAAE,CACNC,QAAQ,CAAE,cADJ,CAENC,kBAAkB,CAAE,uBAFd,CAGNC,mBAAmB,CAAE,wBAHf,CAINC,WAAW,CAAE,cAJP,CAKNC,UAAU,CAAE,aALN,CAlBC,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 * Define all of the selectors we will be using on the contentbank interface.\n *\n * @module core_contentbank/selectors\n * @copyright 2020 Sara Arjona <sara@moodle.com>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * A small helper function to build queryable data selectors.\n *\n * @method getDataSelector\n * @param {String} name\n * @param {String} value\n * @return {string}\n */\nconst getDataSelector = (name, value) => {\n return `[data-${name}=\"${value}\"]`;\n};\n\nexport default {\n regions: {\n cbcontentname: getDataSelector('region', 'cb-content-name'),\n contentbank: getDataSelector('region', 'contentbank'),\n filearea: getDataSelector('region', 'filearea')\n },\n actions: {\n search: getDataSelector('action', 'searchcontent'),\n clearSearch: getDataSelector('action', 'clearsearch'),\n viewgrid: getDataSelector('action', 'viewgrid'),\n viewlist: getDataSelector('action', 'viewlist'),\n sortname: getDataSelector('action', 'sortname'),\n sortuses: getDataSelector('action', 'sortuses'),\n sortdate: getDataSelector('action', 'sortdate'),\n sortsize: getDataSelector('action', 'sortsize'),\n sorttype: getDataSelector('action', 'sorttype'),\n sortauthor: getDataSelector('action', 'sortauthor'),\n },\n elements: {\n listitem: '.cb-listitem',\n cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',\n cbnavbartotalsearch: '.cb-navbar-totalsearch',\n searchinput: '#searchinput',\n sortbutton: '.cb-btnsort'\n },\n};\n"],"file":"selectors.min.js"}
|
{"version":3,"sources":["../src/selectors.js"],"names":["getDataSelector","name","value","regions","cbcontentname","contentbank","filearea","actions","search","clearSearch","viewgrid","viewlist","sortname","sortuses","sortdate","sortsize","sorttype","sortauthor","elements","listitem","heading","cell","cbnavbarbreadcrumb","cbnavbartotalsearch","searchinput","sortbutton"],"mappings":"+IA+BMA,CAAAA,CAAe,CAAG,SAACC,CAAD,CAAOC,CAAP,CAAiB,CACrC,sBAAgBD,CAAhB,eAAyBC,CAAzB,OACH,C,GAEc,CACXC,OAAO,CAAE,CACLC,aAAa,CAAEJ,CAAe,CAAC,QAAD,CAAW,iBAAX,CADzB,CAELK,WAAW,CAAEL,CAAe,CAAC,QAAD,CAAW,aAAX,CAFvB,CAGLM,QAAQ,CAAEN,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CADE,CAMXO,OAAO,CAAE,CACLC,MAAM,CAAER,CAAe,CAAC,QAAD,CAAW,eAAX,CADlB,CAELS,WAAW,CAAET,CAAe,CAAC,QAAD,CAAW,aAAX,CAFvB,CAGLU,QAAQ,CAAEV,CAAe,CAAC,QAAD,CAAW,UAAX,CAHpB,CAILW,QAAQ,CAAEX,CAAe,CAAC,QAAD,CAAW,UAAX,CAJpB,CAKLY,QAAQ,CAAEZ,CAAe,CAAC,QAAD,CAAW,UAAX,CALpB,CAMLa,QAAQ,CAAEb,CAAe,CAAC,QAAD,CAAW,UAAX,CANpB,CAOLc,QAAQ,CAAEd,CAAe,CAAC,QAAD,CAAW,UAAX,CAPpB,CAQLe,QAAQ,CAAEf,CAAe,CAAC,QAAD,CAAW,UAAX,CARpB,CASLgB,QAAQ,CAAEhB,CAAe,CAAC,QAAD,CAAW,UAAX,CATpB,CAULiB,UAAU,CAAEjB,CAAe,CAAC,QAAD,CAAW,YAAX,CAVtB,CANE,CAkBXkB,QAAQ,CAAE,CACNC,QAAQ,CAAE,cADJ,CAENC,OAAO,CAAE,aAFH,CAGNC,IAAI,CAAE,YAHA,CAINC,kBAAkB,CAAE,uBAJd,CAKNC,mBAAmB,CAAE,wBALf,CAMNC,WAAW,CAAE,cANP,CAONC,UAAU,CAAE,aAPN,CAlBC,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 * Define all of the selectors we will be using on the contentbank interface.\n *\n * @module core_contentbank/selectors\n * @copyright 2020 Sara Arjona <sara@moodle.com>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * A small helper function to build queryable data selectors.\n *\n * @method getDataSelector\n * @param {String} name\n * @param {String} value\n * @return {string}\n */\nconst getDataSelector = (name, value) => {\n return `[data-${name}=\"${value}\"]`;\n};\n\nexport default {\n regions: {\n cbcontentname: getDataSelector('region', 'cb-content-name'),\n contentbank: getDataSelector('region', 'contentbank'),\n filearea: getDataSelector('region', 'filearea')\n },\n actions: {\n search: getDataSelector('action', 'searchcontent'),\n clearSearch: getDataSelector('action', 'clearsearch'),\n viewgrid: getDataSelector('action', 'viewgrid'),\n viewlist: getDataSelector('action', 'viewlist'),\n sortname: getDataSelector('action', 'sortname'),\n sortuses: getDataSelector('action', 'sortuses'),\n sortdate: getDataSelector('action', 'sortdate'),\n sortsize: getDataSelector('action', 'sortsize'),\n sorttype: getDataSelector('action', 'sorttype'),\n sortauthor: getDataSelector('action', 'sortauthor'),\n },\n elements: {\n listitem: '.cb-listitem',\n heading: '.cb-heading',\n cell: '.cb-column',\n cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',\n cbnavbartotalsearch: '.cb-navbar-totalsearch',\n searchinput: '#searchinput',\n sortbutton: '.cb-btnsort'\n },\n};\n"],"file":"selectors.min.js"}
|
||||||
2
contentbank/amd/build/sort.min.js
vendored
2
contentbank/amd/build/sort.min.js
vendored
|
|
@ -1,2 +1,2 @@
|
||||||
define ("core_contentbank/sort",["exports","./selectors","core/str","core/prefetch","core/ajax","core/notification"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);d=g(d);e=g(e);f=g(f);function g(a){return a&&a.__esModule?a:{default:a}}var h=function(){var a=document.querySelector(b.default.regions.contentbank);d.default.prefetchStrings("contentbank",["contentname","uses","lastmodified","size","type","author"]);d.default.prefetchStrings("moodle",["sortbyx","sortbyxreverse"]);i(a)};a.init=h;var i=function(a){a.addEventListener("click",function(c){var d=a.querySelector(b.default.actions.viewlist),e=a.querySelector(b.default.actions.viewgrid);if(c.target.closest(b.default.actions.viewgrid)){a.classList.remove("view-list");a.classList.add("view-grid");e.classList.add("active");d.classList.remove("active");j(!1);return}if(c.target.closest(b.default.actions.viewlist)){a.classList.remove("view-grid");a.classList.add("view-list");d.classList.add("active");e.classList.remove("active");j(!0);return}var f=document.querySelector(b.default.regions.filearea),g=f.querySelectorAll(b.default.elements.listitem);if(f&&g){var h=c.target.closest(b.default.actions.sortname);if(h){var i=k(a,h);m(f,g,"data-file",i);return}var l=c.target.closest(b.default.actions.sortuses);if(l){var n=k(a,l);m(f,g,"data-uses",n);return}var o=c.target.closest(b.default.actions.sortdate);if(o){var p=k(a,o);m(f,g,"data-timemodified",p);return}var q=c.target.closest(b.default.actions.sortsize);if(q){var r=k(a,q);m(f,g,"data-bytes",r);return}var s=c.target.closest(b.default.actions.sorttype);if(s){var t=k(a,s);m(f,g,"data-type",t);return}var u=c.target.closest(b.default.actions.sortauthor);if(u){var v=k(a,u);m(f,g,"data-author",v)}}})},j=function(a){if(!1===a){a=null}var b={methodname:"core_user_update_user_preferences",args:{preferences:[{type:"core_contentbank_view_list",value:a}]}};return e.default.call([b])[0].catch(f.default.exception)},k=function(a,c){var d=a.querySelectorAll(b.default.elements.sortbutton);d.forEach(function(a){if(a!==c){a.classList.remove("dir-asc");a.classList.remove("dir-desc");a.classList.add("dir-none");l(a,!1)}});var e=!0;if(c.classList.contains("dir-none")){c.classList.remove("dir-none");c.classList.add("dir-asc")}else if(c.classList.contains("dir-asc")){c.classList.remove("dir-asc");c.classList.add("dir-desc");e=!1}else if(c.classList.contains("dir-desc")){c.classList.remove("dir-desc");c.classList.add("dir-asc")}l(c,e);return e},l=function(a,b){var d=b?"sortbyxreverse":"sortbyx";return(0,c.get_string)(a.dataset.string,"contentbank").then(function(a){return(0,c.get_string)(d,"core",a)}).then(function(b){a.setAttribute("title",b);return b}).catch()},m=function(a,b,c,d){var e=[].slice.call(b).sort(function(e,a){var b=e.getAttribute(c),f=a.getAttribute(c);if(!isNaN(b)){b=parseInt(b);f=parseInt(f)}if(d){return b>f?1:-1}else{return b<f?1:-1}});e.forEach(function(b){return a.appendChild(b)})}});
|
define ("core_contentbank/sort",["exports","./selectors","core/str","core/prefetch","core/ajax","core/notification"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);d=g(d);e=g(e);f=g(f);function g(a){return a&&a.__esModule?a:{default:a}}var h=function(){var a=document.querySelector(b.default.regions.contentbank);d.default.prefetchStrings("contentbank",["contentname","uses","lastmodified","size","type","author"]);d.default.prefetchStrings("moodle",["sortbyx","sortbyxreverse"]);i(a)};a.init=h;var i=function(a){a.addEventListener("click",function(c){var d=a.querySelector(b.default.actions.viewlist),e=a.querySelector(b.default.actions.viewgrid),f=a.querySelector(b.default.regions.filearea),g=f.querySelectorAll(b.default.elements.listitem);if(c.target.closest(b.default.actions.viewgrid)){a.classList.remove("view-list");a.classList.add("view-grid");if(f&&g){f.setAttribute("role","list");g.forEach(function(a){a.setAttribute("role","listitem");a.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.removeAttribute("role")})});var h=f.querySelector(b.default.elements.heading);h.removeAttribute("role");h.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.removeAttribute("role")})}e.classList.add("active");d.classList.remove("active");j(!1);return}if(c.target.closest(b.default.actions.viewlist)){a.classList.remove("view-grid");a.classList.add("view-list");if(f&&g){f.setAttribute("role","table");g.forEach(function(a){a.setAttribute("role","row");a.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.setAttribute("role","cell")})});var i=f.querySelector(b.default.elements.heading);i.setAttribute("role","row");i.querySelectorAll(b.default.elements.cell).forEach(function(a){return a.setAttribute("role","columnheader")})}d.classList.add("active");e.classList.remove("active");j(!0);return}if(f&&g){var l=c.target.closest(b.default.actions.sortname);if(l){var n=k(a,l);m(f,g,"data-file",n);return}var o=c.target.closest(b.default.actions.sortuses);if(o){var p=k(a,o);m(f,g,"data-uses",p);return}var q=c.target.closest(b.default.actions.sortdate);if(q){var r=k(a,q);m(f,g,"data-timemodified",r);return}var s=c.target.closest(b.default.actions.sortsize);if(s){var t=k(a,s);m(f,g,"data-bytes",t);return}var u=c.target.closest(b.default.actions.sorttype);if(u){var v=k(a,u);m(f,g,"data-type",v);return}var w=c.target.closest(b.default.actions.sortauthor);if(w){var x=k(a,w);m(f,g,"data-author",x)}}})},j=function(a){if(!1===a){a=null}var b={methodname:"core_user_update_user_preferences",args:{preferences:[{type:"core_contentbank_view_list",value:a}]}};return e.default.call([b])[0].catch(f.default.exception)},k=function(a,c){var d=a.querySelectorAll(b.default.elements.sortbutton);d.forEach(function(a){if(a!==c){a.classList.remove("dir-asc");a.classList.remove("dir-desc");a.classList.add("dir-none");l(a,!1)}});var e=!0;if(c.classList.contains("dir-none")){c.classList.remove("dir-none");c.classList.add("dir-asc")}else if(c.classList.contains("dir-asc")){c.classList.remove("dir-asc");c.classList.add("dir-desc");e=!1}else if(c.classList.contains("dir-desc")){c.classList.remove("dir-desc");c.classList.add("dir-asc")}l(c,e);return e},l=function(a,b){var d=b?"sortbyxreverse":"sortbyx";return(0,c.get_string)(a.dataset.string,"contentbank").then(function(a){return(0,c.get_string)(d,"core",a)}).then(function(b){a.setAttribute("title",b);return b}).catch()},m=function(a,b,c,d){var e=[].slice.call(b).sort(function(e,a){var b=e.getAttribute(c),f=a.getAttribute(c);if(!isNaN(b)){b=parseInt(b);f=parseInt(f)}if(d){return b>f?1:-1}else{return b<f?1:-1}});e.forEach(function(b){return a.appendChild(b)})}});
|
||||||
//# sourceMappingURL=sort.min.js.map
|
//# sourceMappingURL=sort.min.js.map
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -53,6 +53,8 @@ export default {
|
||||||
},
|
},
|
||||||
elements: {
|
elements: {
|
||||||
listitem: '.cb-listitem',
|
listitem: '.cb-listitem',
|
||||||
|
heading: '.cb-heading',
|
||||||
|
cell: '.cb-column',
|
||||||
cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',
|
cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',
|
||||||
cbnavbartotalsearch: '.cb-navbar-totalsearch',
|
cbnavbartotalsearch: '.cb-navbar-totalsearch',
|
||||||
searchinput: '#searchinput',
|
searchinput: '#searchinput',
|
||||||
|
|
|
||||||
|
|
@ -50,11 +50,24 @@ const registerListenerEvents = (contentBank) => {
|
||||||
contentBank.addEventListener('click', e => {
|
contentBank.addEventListener('click', e => {
|
||||||
const viewList = contentBank.querySelector(selectors.actions.viewlist);
|
const viewList = contentBank.querySelector(selectors.actions.viewlist);
|
||||||
const viewGrid = contentBank.querySelector(selectors.actions.viewgrid);
|
const viewGrid = contentBank.querySelector(selectors.actions.viewgrid);
|
||||||
|
const fileArea = contentBank.querySelector(selectors.regions.filearea);
|
||||||
|
const shownItems = fileArea.querySelectorAll(selectors.elements.listitem);
|
||||||
|
|
||||||
// View as Grid button.
|
// View as Grid button.
|
||||||
if (e.target.closest(selectors.actions.viewgrid)) {
|
if (e.target.closest(selectors.actions.viewgrid)) {
|
||||||
contentBank.classList.remove('view-list');
|
contentBank.classList.remove('view-list');
|
||||||
contentBank.classList.add('view-grid');
|
contentBank.classList.add('view-grid');
|
||||||
|
if (fileArea && shownItems) {
|
||||||
|
fileArea.setAttribute('role', 'list');
|
||||||
|
shownItems.forEach(listItem => {
|
||||||
|
listItem.setAttribute('role', 'listitem');
|
||||||
|
listItem.querySelectorAll(selectors.elements.cell).forEach(cell => cell.removeAttribute('role'));
|
||||||
|
});
|
||||||
|
|
||||||
|
const heading = fileArea.querySelector(selectors.elements.heading);
|
||||||
|
heading.removeAttribute('role');
|
||||||
|
heading.querySelectorAll(selectors.elements.cell).forEach(cell => cell.removeAttribute('role'));
|
||||||
|
}
|
||||||
viewGrid.classList.add('active');
|
viewGrid.classList.add('active');
|
||||||
viewList.classList.remove('active');
|
viewList.classList.remove('active');
|
||||||
setViewListPreference(false);
|
setViewListPreference(false);
|
||||||
|
|
@ -66,6 +79,17 @@ const registerListenerEvents = (contentBank) => {
|
||||||
if (e.target.closest(selectors.actions.viewlist)) {
|
if (e.target.closest(selectors.actions.viewlist)) {
|
||||||
contentBank.classList.remove('view-grid');
|
contentBank.classList.remove('view-grid');
|
||||||
contentBank.classList.add('view-list');
|
contentBank.classList.add('view-list');
|
||||||
|
if (fileArea && shownItems) {
|
||||||
|
fileArea.setAttribute('role', 'table');
|
||||||
|
shownItems.forEach(listItem => {
|
||||||
|
listItem.setAttribute('role', 'row');
|
||||||
|
listItem.querySelectorAll(selectors.elements.cell).forEach(cell => cell.setAttribute('role', 'cell'));
|
||||||
|
});
|
||||||
|
|
||||||
|
const heading = fileArea.querySelector(selectors.elements.heading);
|
||||||
|
heading.setAttribute('role', 'row');
|
||||||
|
heading.querySelectorAll(selectors.elements.cell).forEach(cell => cell.setAttribute('role', 'columnheader'));
|
||||||
|
}
|
||||||
viewList.classList.add('active');
|
viewList.classList.add('active');
|
||||||
viewGrid.classList.remove('active');
|
viewGrid.classList.remove('active');
|
||||||
setViewListPreference(true);
|
setViewListPreference(true);
|
||||||
|
|
@ -73,10 +97,6 @@ const registerListenerEvents = (contentBank) => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: This should _not_ use `document`. Every query should be constrained to the content bank container.
|
|
||||||
const fileArea = document.querySelector(selectors.regions.filearea);
|
|
||||||
const shownItems = fileArea.querySelectorAll(selectors.elements.listitem);
|
|
||||||
|
|
||||||
if (fileArea && shownItems) {
|
if (fileArea && shownItems) {
|
||||||
|
|
||||||
// Sort by file name alphabetical
|
// Sort by file name alphabetical
|
||||||
|
|
|
||||||
|
|
@ -99,57 +99,57 @@ data-region="contentbank">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{#contents.0}}
|
{{#contents.0}}
|
||||||
<div class="cb-content-wrapper d-flex px-2" data-region="filearea">
|
<div role="{{#viewlist}}table{{/viewlist}}{{^viewlist}}list{{/viewlist}}" class="cb-content-wrapper d-flex px-2" data-region="filearea">
|
||||||
<div class="cb-heading bg-white">
|
<div {{#viewlist}}role="row"{{/viewlist}} class="cb-heading bg-white">
|
||||||
<div class="cb-file cb-column d-flex">
|
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-file cb-column d-flex">
|
||||||
<div class="title">{{#str}} contentname, contentbank {{/str}}</div>
|
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="contentname" data-action="sortname"
|
||||||
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="contentname" data-action="sortname"
|
|
||||||
title="{{#str}} sortbyx, core, {{#str}} contentname, contentbank {{/str}} {{/str}}">
|
title="{{#str}} sortbyx, core, {{#str}} contentname, contentbank {{/str}} {{/str}}">
|
||||||
|
<span class="title">{{#str}} contentname, contentbank {{/str}}</span>
|
||||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-uses cb-column d-flex">
|
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-uses cb-column d-flex">
|
||||||
<div class="title">{{#str}} uses, contentbank {{/str}}</div>
|
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="uses" data-action="sortuses"
|
||||||
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="uses" data-action="sortuses"
|
|
||||||
title="{{#str}} sortbyx, core, {{#str}} uses, contentbank {{/str}} {{/str}}">
|
title="{{#str}} sortbyx, core, {{#str}} uses, contentbank {{/str}} {{/str}}">
|
||||||
|
<span class="title">{{#str}} uses, contentbank {{/str}}</span>
|
||||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-date cb-column d-flex">
|
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-date cb-column d-flex">
|
||||||
<div class="title">{{#str}} lastmodified, contentbank {{/str}}</div>
|
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="lastmodified" data-action="sortdate"
|
||||||
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="lastmodified" data-action="sortdate"
|
|
||||||
title="{{#str}} sortbyx, core, {{#str}} lastmodified, contentbank {{/str}} {{/str}}">
|
title="{{#str}} sortbyx, core, {{#str}} lastmodified, contentbank {{/str}} {{/str}}">
|
||||||
|
<span class="title">{{#str}} lastmodified, contentbank {{/str}}</span>
|
||||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-size cb-column d-flex">
|
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-size cb-column d-flex">
|
||||||
<div class="title">{{#str}} size, contentbank {{/str}}</div>
|
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="size" data-action="sortsize"
|
||||||
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="size" data-action="sortsize"
|
|
||||||
title="{{#str}} sortbyx, core, {{#str}} size, contentbank {{/str}} {{/str}}">
|
title="{{#str}} sortbyx, core, {{#str}} size, contentbank {{/str}} {{/str}}">
|
||||||
|
<span class="title">{{#str}} size, contentbank {{/str}}</span>
|
||||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-type cb-column d-flex">
|
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-type cb-column d-flex">
|
||||||
<div class="title">{{#str}} type, contentbank {{/str}}</div>
|
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="type" data-action="sorttype"
|
||||||
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="type" data-action="sorttype"
|
|
||||||
title="{{#str}} sortbyx, core, {{#str}} type, contentbank {{/str}} {{/str}}">
|
title="{{#str}} sortbyx, core, {{#str}} type, contentbank {{/str}} {{/str}}">
|
||||||
|
<span class="title">{{#str}} type, contentbank {{/str}}</span>
|
||||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-author cb-column d-flex last">
|
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-author cb-column d-flex last">
|
||||||
<div class="title">{{#str}} author, contentbank {{/str}}</div>
|
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="author" data-action="sortauthor"
|
||||||
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="author" data-action="sortauthor"
|
|
||||||
title="{{#str}} sortbyx, core, {{#str}} author, contentbank {{/str}} {{/str}}">
|
title="{{#str}} sortbyx, core, {{#str}} author, contentbank {{/str}} {{/str}}">
|
||||||
|
<span class="title">{{#str}} author, contentbank {{/str}}</span>
|
||||||
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
<span class="default">{{#pix}} t/sort, core, {{#str}}sort, core {{/str}} {{/pix}}</span>
|
||||||
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
<span class="desc">{{#pix}} t/sort_desc, core, {{#str}}desc, core{{/str}} {{/pix}}</span>
|
||||||
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
<span class="asc">{{#pix}} t/sort_asc, core, {{#str}}asc, core{{/str}} {{/pix}}</span>
|
||||||
|
|
@ -157,7 +157,8 @@ data-region="contentbank">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{#contents}}
|
{{#contents}}
|
||||||
<div class="cb-listitem {{#visibilityunlisted}}cb-unlisted{{/visibilityunlisted}}"
|
<div role="{{#viewlist}}row{{/viewlist}}{{^viewlist}}listitem{{/viewlist}}"
|
||||||
|
class="cb-listitem {{#visibilityunlisted}}cb-unlisted{{/visibilityunlisted}}"
|
||||||
data-file="{{ title }}"
|
data-file="{{ title }}"
|
||||||
data-name="{{ name }}"
|
data-name="{{ name }}"
|
||||||
data-bytes="{{ bytes }}"
|
data-bytes="{{ bytes }}"
|
||||||
|
|
@ -165,7 +166,7 @@ data-region="contentbank">
|
||||||
data-timemodified="{{ timemodified }}"
|
data-timemodified="{{ timemodified }}"
|
||||||
data-type="{{ type }}"
|
data-type="{{ type }}"
|
||||||
data-author="{{ author }}">
|
data-author="{{ author }}">
|
||||||
<div class="cb-file cb-column position-relative">
|
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-file cb-column position-relative">
|
||||||
<div class="cb-thumbnail" role="img" aria-label="{{ name }}"
|
<div class="cb-thumbnail" role="img" aria-label="{{ name }}"
|
||||||
style="background-image: url('{{{ icon }}}');">
|
style="background-image: url('{{{ icon }}}');">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -175,19 +176,19 @@ data-region="contentbank">
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-uses cb-column small">
|
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-uses cb-column small">
|
||||||
{{ uses }}
|
{{ uses }}
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-date cb-column small">
|
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-date cb-column small">
|
||||||
{{#userdate}} {{ timemodified }}, {{#str}} strftimedatetimeshort, core_langconfig {{/str}} {{/userdate}}
|
{{#userdate}} {{ timemodified }}, {{#str}} strftimedatetimeshort, core_langconfig {{/str}} {{/userdate}}
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-size cb-column small">
|
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-size cb-column small">
|
||||||
{{ size }}
|
{{ size }}
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-type cb-column small">
|
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-type cb-column small">
|
||||||
{{{ type }}}
|
{{{ type }}}
|
||||||
</div>
|
</div>
|
||||||
<div class="cb-type cb-column last small">
|
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-type cb-column last small">
|
||||||
{{{ author }}}
|
{{{ author }}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -149,10 +149,13 @@
|
||||||
span {
|
span {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
&.dir-none .default,
|
&.dir-none .default,
|
||||||
&.dir-asc .asc,
|
&.dir-asc .asc,
|
||||||
&.dir-desc .desc {
|
&.dir-desc .desc {
|
||||||
display: block;
|
display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13241,10 +13241,13 @@ table.calendartable caption {
|
||||||
.content-bank-container.view-list .cb-btnsort span {
|
.content-bank-container.view-list .cb-btnsort span {
|
||||||
display: none; }
|
display: none; }
|
||||||
|
|
||||||
|
.content-bank-container.view-list .cb-btnsort .title {
|
||||||
|
display: inline; }
|
||||||
|
|
||||||
.content-bank-container.view-list .cb-btnsort.dir-none .default,
|
.content-bank-container.view-list .cb-btnsort.dir-none .default,
|
||||||
.content-bank-container.view-list .cb-btnsort.dir-asc .asc,
|
.content-bank-container.view-list .cb-btnsort.dir-asc .asc,
|
||||||
.content-bank-container.view-list .cb-btnsort.dir-desc .desc {
|
.content-bank-container.view-list .cb-btnsort.dir-desc .desc {
|
||||||
display: block; }
|
display: inline; }
|
||||||
|
|
||||||
.cb-toolbar-container .dropdown-scrollable {
|
.cb-toolbar-container .dropdown-scrollable {
|
||||||
max-height: 190px;
|
max-height: 190px;
|
||||||
|
|
|
||||||
|
|
@ -13463,10 +13463,13 @@ table.calendartable caption {
|
||||||
.content-bank-container.view-list .cb-btnsort span {
|
.content-bank-container.view-list .cb-btnsort span {
|
||||||
display: none; }
|
display: none; }
|
||||||
|
|
||||||
|
.content-bank-container.view-list .cb-btnsort .title {
|
||||||
|
display: inline; }
|
||||||
|
|
||||||
.content-bank-container.view-list .cb-btnsort.dir-none .default,
|
.content-bank-container.view-list .cb-btnsort.dir-none .default,
|
||||||
.content-bank-container.view-list .cb-btnsort.dir-asc .asc,
|
.content-bank-container.view-list .cb-btnsort.dir-asc .asc,
|
||||||
.content-bank-container.view-list .cb-btnsort.dir-desc .desc {
|
.content-bank-container.view-list .cb-btnsort.dir-desc .desc {
|
||||||
display: block; }
|
display: inline; }
|
||||||
|
|
||||||
.cb-toolbar-container .dropdown-scrollable {
|
.cb-toolbar-container .dropdown-scrollable {
|
||||||
max-height: 190px;
|
max-height: 190px;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue