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 2021-11-02 11:03:58 +11:00
parent b16fc54103
commit 0063ed3e76
10 changed files with 70 additions and 38 deletions

View File

@ -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

View File

@ -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"}

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -53,6 +53,8 @@ export default {
},
elements: {
listitem: '.cb-listitem',
heading: '.cb-heading',
cell: '.cb-column',
cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',
cbnavbartotalsearch: '.cb-navbar-totalsearch',
searchinput: '#searchinput',

View File

@ -50,11 +50,24 @@ const registerListenerEvents = (contentBank) => {
contentBank.addEventListener('click', e => {
const viewList = contentBank.querySelector(selectors.actions.viewlist);
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.
if (e.target.closest(selectors.actions.viewgrid)) {
contentBank.classList.remove('view-list');
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');
viewList.classList.remove('active');
setViewListPreference(false);
@ -66,6 +79,17 @@ const registerListenerEvents = (contentBank) => {
if (e.target.closest(selectors.actions.viewlist)) {
contentBank.classList.remove('view-grid');
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');
viewGrid.classList.remove('active');
setViewListPreference(true);
@ -73,10 +97,6 @@ const registerListenerEvents = (contentBank) => {
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) {
// Sort by file name alphabetical

View File

@ -125,57 +125,57 @@ data-region="contentbank">
</div>
</div>
{{#contents.0}}
<div class="cb-content-wrapper d-flex px-2" data-region="filearea">
<div class="cb-heading bg-white">
<div class="cb-file cb-column d-flex">
<div class="title">{{#str}} contentname, contentbank {{/str}}</div>
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="contentname" data-action="sortname"
<div role="{{#viewlist}}table{{/viewlist}}{{^viewlist}}list{{/viewlist}}" class="cb-content-wrapper d-flex px-2" data-region="filearea">
<div {{#viewlist}}role="row"{{/viewlist}} class="cb-heading bg-white">
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-file cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="contentname" data-action="sortname"
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="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>
</button>
</div>
<div class="cb-uses cb-column d-flex">
<div class="title">{{#str}} uses, contentbank {{/str}}</div>
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="uses" data-action="sortuses"
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-uses cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="uses" data-action="sortuses"
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="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>
</button>
</div>
<div class="cb-date cb-column d-flex">
<div class="title">{{#str}} lastmodified, contentbank {{/str}}</div>
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="lastmodified" data-action="sortdate"
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-date cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="lastmodified" data-action="sortdate"
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="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>
</button>
</div>
<div class="cb-size cb-column d-flex">
<div class="title">{{#str}} size, contentbank {{/str}}</div>
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="size" data-action="sortsize"
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-size cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="size" data-action="sortsize"
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="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>
</button>
</div>
<div class="cb-type cb-column d-flex">
<div class="title">{{#str}} type, contentbank {{/str}}</div>
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="type" data-action="sorttype"
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-type cb-column d-flex">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="type" data-action="sorttype"
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="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>
</button>
</div>
<div class="cb-author cb-column d-flex last">
<div class="title">{{#str}} author, contentbank {{/str}}</div>
<button class="btn btn-sm cb-btnsort dir-none ml-auto" data-string="author" data-action="sortauthor"
<div {{#viewlist}}role="columnheader"{{/viewlist}} class="cb-author cb-column d-flex last">
<button class="btn btn-block cb-btnsort dir-none text-left" data-string="author" data-action="sortauthor"
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="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>
@ -183,7 +183,8 @@ data-region="contentbank">
</div>
</div>
{{#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-name="{{ name }}"
data-bytes="{{ bytes }}"
@ -191,7 +192,7 @@ data-region="contentbank">
data-timemodified="{{ timemodified }}"
data-type="{{ type }}"
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 }}"
style="background-image: url('{{{ icon }}}');">
</div>
@ -201,19 +202,19 @@ data-region="contentbank">
</span>
</a>
</div>
<div class="cb-uses cb-column small">
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-uses cb-column small">
{{ uses }}
</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}}
</div>
<div class="cb-size cb-column small">
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-size cb-column small">
{{ size }}
</div>
<div class="cb-type cb-column small">
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-type cb-column small">
{{{ type }}}
</div>
<div class="cb-type cb-column last small">
<div {{#viewlist}}role="cell"{{/viewlist}} class="cb-type cb-column last small">
{{{ author }}}
</div>
</div>

View File

@ -149,10 +149,13 @@
span {
display: none;
}
.title {
display: inline;
}
&.dir-none .default,
&.dir-asc .asc,
&.dir-desc .desc {
display: block;
display: inline;
}
}
}

View File

@ -13612,10 +13612,13 @@ table.calendartable caption {
.content-bank-container.view-list .cb-btnsort span {
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-asc .asc,
.content-bank-container.view-list .cb-btnsort.dir-desc .desc {
display: block; }
display: inline; }
.cb-toolbar-container .dropdown-scrollable {
max-height: 190px;

View File

@ -13612,10 +13612,13 @@ table.calendartable caption {
.content-bank-container.view-list .cb-btnsort span {
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-asc .asc,
.content-bank-container.view-list .cb-btnsort.dir-desc .desc {
display: block; }
display: inline; }
.cb-toolbar-container .dropdown-scrollable {
max-height: 190px;