MDL-69454 core_search: consistent content bank search

This commit is contained in:
Bas Brands 2020-08-31 16:19:18 +02:00
parent c549ca5d35
commit a522ded1e3
7 changed files with 17 additions and 40 deletions

View File

@ -1,2 +1,2 @@
define ("core_contentbank/search",["exports","jquery","core_contentbank/selectors","core/str","core/pending","core/utils"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);c=g(c);e=g(e);function g(a){return a&&a.__esModule?a:{default:a}}function h(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function i(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var i=a.apply(b,c);function f(a){h(i,d,e,f,g,"next",a)}function g(a){h(i,d,e,f,g,"throw",a)}f(void 0)})}}var j=function(){var a=new e.default,d=(0,b.default)(c.default.regions.contentbank);k(d);a.resolve()};a.init=j;var k=function(a){var b=a.find(c.default.elements.searchinput)[0];a.on("click",c.default.actions.search,function(c){c.preventDefault();l(a,b.value)});a.on("click",c.default.actions.clearSearch,function(c){c.preventDefault();b.value="";b.focus();l(a,b.value)});b.addEventListener("input",(0,f.debounce)(function(){l(a,b.value)},300))},l=function(){var a=i(regeneratorRuntime.mark(function a(b,e){var f,g,h,i,j;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:f=b.find(c.default.elements.clearsearch)[0];g=b.find(c.default.elements.searchicon)[0];h=b.find(c.default.elements.cbnavbarbreadcrumb)[0];i=b.find(c.default.elements.cbnavbartotalsearch)[0];j=m(b,e);if(!(0<e.length)){a.next=15;break}g.classList.add("d-none");f.classList.remove("d-none");h.classList.add("d-none");a.next=11;return(0,d.get_string)("itemsfound","core_contentbank",j.length);case 11:i.innerHTML=a.sent;i.classList.remove("d-none");a.next=19;break;case 15:f.classList.add("d-none");g.classList.remove("d-none");h.classList.remove("d-none");i.classList.add("d-none");case 19:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),m=function(a,b){var d=Array.from(a.find(c.default.elements.listitem)),e=[];d.forEach(function(a){var d=a.getAttribute("data-name");if(""===b||d.toLowerCase().includes(b.toLowerCase())){e.push(a);var f=a.querySelector(c.default.regions.cbcontentname);f.innerHTML=n(d,b);a.classList.remove("d-none")}else{a.classList.add("d-none")}});return e},n=function(a,b){var c=a;if(""!==b){var d=a.toLowerCase().indexOf(b.toLowerCase());if(-1<d){c=a.substr(0,d)+"<span class=\"matchtext\">"+a.substr(d,b.length)+"</span>"+a.substr(d+b.length)}}return c}});
define ("core_contentbank/search",["exports","jquery","core_contentbank/selectors","core/str","core/pending","core/utils"],function(a,b,c,d,e,f){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.init=void 0;b=g(b);c=g(c);e=g(e);function g(a){return a&&a.__esModule?a:{default:a}}function h(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function i(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var i=a.apply(b,c);function f(a){h(i,d,e,f,g,"next",a)}function g(a){h(i,d,e,f,g,"throw",a)}f(void 0)})}}var j=function(){var a=new e.default,d=(0,b.default)(c.default.regions.contentbank);k(d);a.resolve()};a.init=j;var k=function(a){var b=a.find(c.default.elements.searchinput)[0];a.on("click",c.default.actions.search,function(c){c.preventDefault();l(a,b.value)});a.on("click",c.default.actions.clearSearch,function(c){c.preventDefault();b.value="";b.focus();l(a,b.value)});b.addEventListener("input",(0,f.debounce)(function(){l(a,b.value)},300))},l=function(){var a=i(regeneratorRuntime.mark(function a(b,e){var f,g,h,i;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:f=b.find(c.default.actions.clearSearch)[0];g=b.find(c.default.elements.cbnavbarbreadcrumb)[0];h=b.find(c.default.elements.cbnavbartotalsearch)[0];i=m(b,e);if(!(0<e.length)){a.next=13;break}f.classList.remove("d-none");g.classList.add("d-none");a.next=9;return(0,d.get_string)("itemsfound","core_contentbank",i.length);case 9:h.innerHTML=a.sent;h.classList.remove("d-none");a.next=16;break;case 13:f.classList.add("d-none");g.classList.remove("d-none");h.classList.add("d-none");case 16:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}(),m=function(a,b){var d=Array.from(a.find(c.default.elements.listitem)),e=[];d.forEach(function(a){var d=a.getAttribute("data-name");if(""===b||d.toLowerCase().includes(b.toLowerCase())){e.push(a);var f=a.querySelector(c.default.regions.cbcontentname);f.innerHTML=n(d,b);a.classList.remove("d-none")}else{a.classList.add("d-none")}});return e},n=function(a,b){var c=a;if(""!==b){var d=a.toLowerCase().indexOf(b.toLowerCase());if(-1<d){c=a.substr(0,d)+"<span class=\"matchtext\">"+a.substr(d,b.length)+"</span>"+a.substr(d+b.length)}}return c}});
//# sourceMappingURL=search.min.js.map

File diff suppressed because one or more lines are too long

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","clearsearchcontent"),viewgrid:b("action","viewgrid"),viewlist:b("action","viewlist"),sortname:b("action","sortname"),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",clearsearch:".input-group-append .clear-icon",searchicon:".input-group-append .search-icon",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"),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});
//# 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","sortdate","sortsize","sorttype","sortauthor","elements","listitem","cbnavbarbreadcrumb","cbnavbartotalsearch","clearsearch","searchicon","searchinput","sortbutton"],"mappings":"+IAgCMA,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,oBAAX,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,UAAU,CAAEhB,CAAe,CAAC,QAAD,CAAW,YAAX,CATtB,CANE,CAiBXiB,QAAQ,CAAE,CACNC,QAAQ,CAAE,cADJ,CAENC,kBAAkB,CAAE,uBAFd,CAGNC,mBAAmB,CAAE,wBAHf,CAINC,WAAW,CAAE,iCAJP,CAKNC,UAAU,CAAE,kCALN,CAMNC,WAAW,CAAE,cANP,CAONC,UAAU,CAAE,aAPN,CAjBC,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 * @package core_contentbank\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', 'clearsearchcontent'),\n viewgrid: getDataSelector('action', 'viewgrid'),\n viewlist: getDataSelector('action', 'viewlist'),\n sortname: getDataSelector('action', 'sortname'),\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 clearsearch: '.input-group-append .clear-icon',\n searchicon: '.input-group-append .search-icon',\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","sortdate","sortsize","sorttype","sortauthor","elements","listitem","cbnavbarbreadcrumb","cbnavbartotalsearch","searchinput","sortbutton"],"mappings":"+IAgCMA,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,UAAU,CAAEhB,CAAe,CAAC,QAAD,CAAW,YAAX,CATtB,CANE,CAiBXiB,QAAQ,CAAE,CACNC,QAAQ,CAAE,cADJ,CAENC,kBAAkB,CAAE,uBAFd,CAGNC,mBAAmB,CAAE,wBAHf,CAINC,WAAW,CAAE,cAJP,CAKNC,UAAU,CAAE,aALN,CAjBC,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 * @package core_contentbank\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 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"}

View File

@ -80,8 +80,7 @@ const registerListenerEvents = (root) => {
* @param {String} searchQuery The search query.
*/
const toggleSearchResultsView = async(body, searchQuery) => {
const clearSearchButton = body.find(selectors.elements.clearsearch)[0];
const searchIcon = body.find(selectors.elements.searchicon)[0];
const clearSearchButton = body.find(selectors.actions.clearSearch)[0];
const navbarBreadcrumb = body.find(selectors.elements.cbnavbarbreadcrumb)[0];
const navbarTotal = body.find(selectors.elements.cbnavbartotalsearch)[0];
@ -91,7 +90,6 @@ const toggleSearchResultsView = async(body, searchQuery) => {
// As the search query is present, search results should be displayed.
// Display the "clear" search button in the activity chooser search bar.
searchIcon.classList.add('d-none');
clearSearchButton.classList.remove('d-none');
// Change the cb-navbar to display total items found.
@ -103,7 +101,6 @@ const toggleSearchResultsView = async(body, searchQuery) => {
// Hide the "clear" search button in the activity chooser search bar.
clearSearchButton.classList.add('d-none');
searchIcon.classList.remove('d-none');
// Display again the breadcrumb in the navbar.
navbarBreadcrumb.classList.remove('d-none');

View File

@ -42,7 +42,7 @@ export default {
},
actions: {
search: getDataSelector('action', 'searchcontent'),
clearSearch: getDataSelector('action', 'clearsearchcontent'),
clearSearch: getDataSelector('action', 'clearsearch'),
viewgrid: getDataSelector('action', 'viewgrid'),
viewlist: getDataSelector('action', 'viewlist'),
sortname: getDataSelector('action', 'sortname'),
@ -55,8 +55,6 @@ export default {
listitem: '.cb-listitem',
cbnavbarbreadcrumb: '.cb-navbar-breadbrumb',
cbnavbartotalsearch: '.cb-navbar-totalsearch',
clearsearch: '.input-group-append .clear-icon',
searchicon: '.input-group-append .search-icon',
searchinput: '#searchinput',
sortbutton: '.cb-btnsort'
},

View File

@ -18,34 +18,16 @@
@template core_contentbank/bankcontent/search
Example context (json):
{}
{
}
}}
<div class="searchbar input-group" role="search">
<label for="searchinput">
<span class="sr-only">{{#str}} searchcontentbankbyname, contentbank {{/str}}</span>
</label>
<input type="text"
id="searchinput"
class="form-control searchinput border-right-0"
placeholder="{{#str}} search, core {{/str}}"
name="search"
autocomplete="off"
>
<div class="input-group-append">
<div class="input-group-text bg-transparent">
<div class="search-icon">
<button class="btn p-0 align-baseline icon-no-margin" data-action="searchcontent"
aria-label="{{#str}} search, core {{/str}}">
<span class="d-flex" aria-hidden="true">{{#pix}} a/search, core {{/pix}}</span>
</button>
</div>
<div class="clear-icon d-none">
<button class="btn p-0 align-baseline icon-no-margin" data-action="clearsearchcontent"
aria-label="{{#str}} clearsearch, core {{/str}}">
<span class="d-flex" aria-hidden="true">{{#pix}} e/cancel_solid_circle, core {{/pix}}</span>
</button>
</div>
</div>
</div>
</div>
{{< core/search_input_auto }}
{{$label}}{{#str}}
searchcontentbankbyname, contentbank
{{/str}}{{/label}}
{{$placeholder}}{{#str}}
search, core
{{/str}}{{/placeholder}}
{{/ core/search_input_auto }}