From b9535834d0ec93dc9bd3ec91c0c00281e5cd055d Mon Sep 17 00:00:00 2001 From: Jan Britz Date: Wed, 31 Jan 2024 14:38:03 +0100 Subject: [PATCH] refactor: divide search area into more components --- amd/build/package_search/component.min.js | 3 + amd/build/package_search/component.min.js.map | 1 + .../package_search/components/area.min.js | 3 + .../package_search/components/area.min.js.map | 1 + .../components/container.min.js | 2 +- .../components/container.min.js.map | 2 +- .../components/search_bar.min.js | 2 +- .../components/search_bar.min.js.map | 2 +- .../components/tab_content.min.js | 3 + .../components/tab_content.min.js.map | 1 + .../components/tab_header.min.js | 3 + .../components/tab_header.min.js.map | 1 + amd/build/package_search/reactive.min.js | 2 +- amd/build/package_search/reactive.min.js.map | 2 +- amd/src/package_search/component.js | 35 ++++ amd/src/package_search/components/area.js | 60 ++++++ .../package_search/components/container.js | 192 ++---------------- .../package_search/components/search_bar.js | 8 +- .../package_search/components/tab_content.js | 72 +++++++ .../package_search/components/tab_header.js | 44 ++++ amd/src/package_search/reactive.js | 14 +- lang/en/qtype_questionpy.php | 2 +- templates/package_search/area.mustache | 14 +- 23 files changed, 271 insertions(+), 198 deletions(-) create mode 100644 amd/build/package_search/component.min.js create mode 100644 amd/build/package_search/component.min.js.map create mode 100644 amd/build/package_search/components/area.min.js create mode 100644 amd/build/package_search/components/area.min.js.map create mode 100644 amd/build/package_search/components/tab_content.min.js create mode 100644 amd/build/package_search/components/tab_content.min.js.map create mode 100644 amd/build/package_search/components/tab_header.min.js create mode 100644 amd/build/package_search/components/tab_header.min.js.map create mode 100644 amd/src/package_search/component.js create mode 100644 amd/src/package_search/components/area.js create mode 100644 amd/src/package_search/components/tab_content.js create mode 100644 amd/src/package_search/components/tab_header.js diff --git a/amd/build/package_search/component.min.js b/amd/build/package_search/component.min.js new file mode 100644 index 00000000..36ee823f --- /dev/null +++ b/amd/build/package_search/component.min.js @@ -0,0 +1,3 @@ +define("qtype_questionpy/package_search/component",["exports","core/reactive"],(function(_exports,_reactive){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;class _default extends _reactive.BaseComponent{getState(){return this.reactive.stateManager.state}}return _exports.default=_default,_exports.default})); + +//# sourceMappingURL=component.min.js.map \ No newline at end of file diff --git a/amd/build/package_search/component.min.js.map b/amd/build/package_search/component.min.js.map new file mode 100644 index 00000000..bd6ea9e4 --- /dev/null +++ b/amd/build/package_search/component.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"component.min.js","sources":["../../src/package_search/component.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/component\n */\n\n\nimport {BaseComponent} from 'core/reactive';\n\nexport default class extends BaseComponent {\n\n /**\n * Returns the current state.\n *\n * @returns {any}\n */\n getState() {\n return this.reactive.stateManager.state;\n }\n}\n"],"names":["BaseComponent","getState","this","reactive","stateManager","state"],"mappings":"oNAwB6BA,wBAOzBC,kBACWC,KAAKC,SAASC,aAAaC"} \ No newline at end of file diff --git a/amd/build/package_search/components/area.min.js b/amd/build/package_search/components/area.min.js new file mode 100644 index 00000000..99cd28f7 --- /dev/null +++ b/amd/build/package_search/components/area.min.js @@ -0,0 +1,3 @@ +define("qtype_questionpy/package_search/components/area",["exports","qtype_questionpy/package_search/component","qtype_questionpy/package_search/components/container","qtype_questionpy/package_search/components/search_bar"],(function(_exports,_component,_container,_search_bar){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_component=_interopRequireDefault(_component),_container=_interopRequireDefault(_container),_search_bar=_interopRequireDefault(_search_bar);class _default extends _component.default{getWatchers(){return[{watch:"general.loading:updated",handler:this.updateStatus}]}create(descriptor){new _search_bar.default({element:this.getElement('[data-for="search-bar-container"'),name:"search_bar",reactive:descriptor.reactive}),new _container.default({element:this.getElement('[data-for="package-container"'),name:"container",reactive:descriptor.reactive})}stateReady(){this.reactive.dispatch("searchPackages")}updateStatus(){const loading=this.getState().general.loading;this.element.classList.toggle("qpy-loading",loading)}}return _exports.default=_default,_exports.default})); + +//# sourceMappingURL=area.min.js.map \ No newline at end of file diff --git a/amd/build/package_search/components/area.min.js.map b/amd/build/package_search/components/area.min.js.map new file mode 100644 index 00000000..4936008f --- /dev/null +++ b/amd/build/package_search/components/area.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"area.min.js","sources":["../../../src/package_search/components/area.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/components/area\n */\n\nimport Component from 'qtype_questionpy/package_search/component';\nimport Container from 'qtype_questionpy/package_search/components/container';\nimport SearchBar from 'qtype_questionpy/package_search/components/search_bar';\n\nexport default class extends Component {\n getWatchers() {\n return [\n {watch: `general.loading:updated`, handler: this.updateStatus},\n ];\n }\n\n create(descriptor) {\n // Register search bar.\n new SearchBar({\n element: this.getElement('[data-for=\"search-bar-container\"'),\n name: \"search_bar\",\n reactive: descriptor.reactive,\n });\n // Register package container.\n new Container({\n element: this.getElement('[data-for=\"package-container\"'),\n name: \"container\",\n reactive: descriptor.reactive,\n });\n }\n\n stateReady() {\n // Initial loading of the packages.\n this.reactive.dispatch(\"searchPackages\");\n }\n\n /**\n * Adds or removes the `qpy-loading` class from the search area.\n */\n updateStatus() {\n const loading = this.getState().general.loading;\n this.element.classList.toggle(\"qpy-loading\", loading);\n }\n}\n"],"names":["Component","getWatchers","watch","handler","this","updateStatus","create","descriptor","SearchBar","element","getElement","name","reactive","Container","stateReady","dispatch","loading","getState","general","classList","toggle"],"mappings":"2lBAyB6BA,mBACzBC,oBACW,CACH,CAACC,gCAAkCC,QAASC,KAAKC,eAIzDC,OAAOC,gBAECC,oBAAU,CACVC,QAASL,KAAKM,WAAW,oCACzBC,KAAM,aACNC,SAAUL,WAAWK,eAGrBC,mBAAU,CACVJ,QAASL,KAAKM,WAAW,iCACzBC,KAAM,YACNC,SAAUL,WAAWK,WAI7BE,kBAESF,SAASG,SAAS,kBAM3BV,qBACUW,QAAUZ,KAAKa,WAAWC,QAAQF,aACnCP,QAAQU,UAAUC,OAAO,cAAeJ"} \ No newline at end of file diff --git a/amd/build/package_search/components/container.min.js b/amd/build/package_search/components/container.min.js index bc7c45c0..111723e3 100644 --- a/amd/build/package_search/components/container.min.js +++ b/amd/build/package_search/components/container.min.js @@ -1,3 +1,3 @@ -define("qtype_questionpy/package_search/components/container",["exports","core/templates","core/str","core/notification","core/reactive"],(function(_exports,templates,strings,_notification,_reactive){var obj;function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}return newObj.default=obj,cache&&cache.set(obj,newObj),newObj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,templates=_interopRequireWildcard(templates),strings=_interopRequireWildcard(strings),_notification=(obj=_notification)&&obj.__esModule?obj:{default:obj};class _default extends _reactive.BaseComponent{getWatchers(){return[{watch:"general.loading:updated",handler:this.updateStatus},{watch:"all:updated",handler:this.renderAll},{watch:"recentlyused:updated",handler:this.renderRecentlyUsed},{watch:"favourites:updated",handler:this.renderFavourites},{watch:"mine:updated",handler:this.renderMine}]}async create(){this.selectors={ALL_HEADER:'[data-for="all-header"]',ALL_CONTENT:'[data-for="all-content"]',RECENTLY_USED_HEADER:'[data-for="recently-used-header"]',RECENTLY_USED_CONTENT:'[data-for="recently-used-content"]',FAVOURITES_HEADER:'[data-for="favourites-header"]',FAVOURITES_CONTENT:'[data-for="favourites-content"]',MINE_HEADER:'[data-for="mine-header"]',MINE_CONTENT:'[data-for="mine-content"]'},this.packageTemplate="qtype_questionpy/package/package_selection",templates.prefetchTemplates([this.packageTemplate])}async stateReady(){this.reactive.dispatch("searchPackages")}getState(){return this.reactive.stateManager.state}updateStatus(){const loading=this.getState().general.loading;this.element.parentElement.classList.toggle("qpy-loading",loading)}_getPackageTemplatesPromise(contexts){let promises=[];for(const context of contexts){const promise=templates.renderForPromise(this.packageTemplate,context);promises.push(promise)}return Promise.all(promises)}async _renderPromise(headerStringKey,packageData){const getString=strings.get_string(headerStringKey,"qtype_questionpy",packageData.total),renderTemplates=this._getPackageTemplatesPromise(packageData.packages);return Promise.all([getString,renderTemplates])}_render(headerSelector,contentSelector,header,content){const contentElement=this.getElement(contentSelector);contentElement.innerHTML="";for(const{html:html,js:js}of content)templates.appendNodeContents(contentElement,html,js);this.getElement(headerSelector).innerHTML=header}async renderAll(){try{const state=this.getState(),[string,packageTemplates]=await this._renderPromise("search_all_header",state.all.data);this._render(this.selectors.ALL_HEADER,this.selectors.ALL_CONTENT,string,packageTemplates)}catch(exception){await _notification.default.exception(exception)}}async renderRecentlyUsed(){try{const state=this.getState(),[string,packageTemplates]=await this._renderPromise("search_recently_used_header",state.recentlyused.data);this._render(this.selectors.RECENTLY_USED_HEADER,this.selectors.RECENTLY_USED_CONTENT,string,packageTemplates)}catch(exception){await _notification.default.exception(exception)}}async renderFavourites(){try{const state=this.getState(),[string,packageTemplates]=await this._renderPromise("search_favourites_header",state.favourites.data);this._render(this.selectors.FAVOURITES_HEADER,this.selectors.FAVOURITES_CONTENT,string,packageTemplates)}catch(exception){await _notification.default.exception(exception)}}async renderMine(){try{const state=this.getState(),[string,packageTemplates]=await this._renderPromise("search_mine_header",state.mine.data);this._render(this.selectors.MINE_HEADER,this.selectors.MINE_CONTENT,string,packageTemplates)}catch(exception){await _notification.default.exception(exception)}}}return _exports.default=_default,_exports.default})); +define("qtype_questionpy/package_search/components/container",["exports","core/templates","qtype_questionpy/package_search/component","qtype_questionpy/package_search/components/tab_header","qtype_questionpy/package_search/components/tab_content"],(function(_exports,templates,_component,_tab_header,_tab_content){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,templates=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(templates),_component=_interopRequireDefault(_component),_tab_header=_interopRequireDefault(_tab_header),_tab_content=_interopRequireDefault(_tab_content);class _default extends _component.default{async create(descriptor){for(const category of["all","recentlyused","favourites","mine"])new _tab_header.default({element:this.getElement('[data-for="'.concat(category,'-header"]')),name:"category_".concat(category,"_header"),reactive:descriptor.reactive,category:category}),new _tab_content.default({element:this.getElement('[data-for="'.concat(category,'-content"]')),name:"category_".concat(category,"_header"),reactive:descriptor.reactive,category:category});templates.prefetchTemplates(["qtype_questionpy/package/package_selection"])}}return _exports.default=_default,_exports.default})); //# sourceMappingURL=container.min.js.map \ No newline at end of file diff --git a/amd/build/package_search/components/container.min.js.map b/amd/build/package_search/components/container.min.js.map index 46290114..0a2e73cb 100644 --- a/amd/build/package_search/components/container.min.js.map +++ b/amd/build/package_search/components/container.min.js.map @@ -1 +1 @@ -{"version":3,"file":"container.min.js","sources":["../../../src/package_search/components/container.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/components/container\n */\n\nimport * as templates from 'core/templates';\nimport * as strings from 'core/str';\nimport Notification from 'core/notification';\nimport {BaseComponent} from 'core/reactive';\n\nexport default class extends BaseComponent {\n getWatchers() {\n return [\n {watch: \"general.loading:updated\", handler: this.updateStatus},\n {watch: \"all:updated\", handler: this.renderAll},\n {watch: \"recentlyused:updated\", handler: this.renderRecentlyUsed},\n {watch: \"favourites:updated\", handler: this.renderFavourites},\n {watch: \"mine:updated\", handler: this.renderMine},\n ];\n }\n\n async create() {\n this.selectors = {\n ALL_HEADER: `[data-for=\"all-header\"]`,\n ALL_CONTENT: `[data-for=\"all-content\"]`,\n RECENTLY_USED_HEADER: `[data-for=\"recently-used-header\"]`,\n RECENTLY_USED_CONTENT: `[data-for=\"recently-used-content\"]`,\n FAVOURITES_HEADER: `[data-for=\"favourites-header\"]`,\n FAVOURITES_CONTENT: `[data-for=\"favourites-content\"]`,\n MINE_HEADER: `[data-for=\"mine-header\"]`,\n MINE_CONTENT: `[data-for=\"mine-content\"]`,\n };\n\n // Prefetch the package template for faster rendering.\n this.packageTemplate = \"qtype_questionpy/package/package_selection\";\n templates.prefetchTemplates([this.packageTemplate]);\n }\n\n async stateReady() {\n // Initial loading of the packages.\n this.reactive.dispatch(\"searchPackages\");\n }\n\n /**\n * Returns the current state.\n *\n * @returns {any}\n */\n getState() {\n return this.reactive.stateManager.state;\n }\n\n /**\n * Adds or removes the `qpy-loading` class from the search area.\n *\n * TODO: This should be handled by the area itself.\n */\n updateStatus() {\n const loading = this.getState().general.loading;\n this.element.parentElement.classList.toggle(\"qpy-loading\", loading);\n }\n\n /**\n * Groups render promises for package templates.\n *\n * @param {Object[]} contexts\n * @returns {Promise}\n * @private\n */\n _getPackageTemplatesPromise(contexts) {\n let promises = [];\n for (const context of contexts) {\n const promise = templates.renderForPromise(this.packageTemplate, context);\n promises.push(promise);\n }\n return Promise.all(promises);\n }\n\n /**\n * Groups header and templates promises.\n *\n * @param {string} headerStringKey\n * @param {Object} packageData\n * @returns {Promise<[string, Object]>}\n * @private\n */\n async _renderPromise(headerStringKey, packageData) {\n // Get string and render templates.\n const getString = strings.get_string(headerStringKey, \"qtype_questionpy\", packageData.total);\n const renderTemplates = this._getPackageTemplatesPromise(packageData.packages);\n return Promise.all([getString, renderTemplates]);\n }\n\n /**\n * Renders every package inside a specific tab.\n *\n * @param {string} headerSelector\n * @param {string} contentSelector\n * @param {string} header\n * @param {Object} content\n * @private\n */\n _render(headerSelector, contentSelector, header, content) {\n const contentElement = this.getElement(contentSelector);\n contentElement.innerHTML = \"\";\n for (const {html, js} of content) {\n templates.appendNodeContents(contentElement, html, js);\n }\n this.getElement(headerSelector).innerHTML = header;\n }\n\n\n /**\n * Renders every package inside the current state for the `all`-category.\n *\n * @returns {Promise}\n */\n async renderAll() {\n try {\n const state = this.getState();\n // Get string and package templates.\n const [string, packageTemplates] = await this._renderPromise(\"search_all_header\", state.all.data);\n // Update DOM.\n this._render(this.selectors.ALL_HEADER, this.selectors.ALL_CONTENT, string, packageTemplates);\n } catch (exception) {\n await Notification.exception(exception);\n }\n }\n\n /**\n * Renders every package inside the current state for the `recentlyused`-category.\n *\n * @returns {Promise}\n */\n async renderRecentlyUsed() {\n try {\n const state = this.getState();\n // Get string and package templates.\n const [string, packageTemplates] = await this._renderPromise(\"search_recently_used_header\", state.recentlyused.data);\n // Update DOM.\n this._render(this.selectors.RECENTLY_USED_HEADER, this.selectors.RECENTLY_USED_CONTENT, string, packageTemplates);\n } catch (exception) {\n await Notification.exception(exception);\n }\n }\n\n /**\n * Renders every package inside the current state for the `favourites`-category.\n *\n * @returns {Promise}\n */\n async renderFavourites() {\n try {\n const state = this.getState();\n // Get string and package templates.\n const [string, packageTemplates] = await this._renderPromise(\"search_favourites_header\", state.favourites.data);\n // Update DOM.\n this._render(this.selectors.FAVOURITES_HEADER, this.selectors.FAVOURITES_CONTENT, string, packageTemplates);\n } catch (exception) {\n await Notification.exception(exception);\n }\n }\n\n /**\n * Renders every package inside the current state for the `mine`-category.\n *\n * @returns {Promise}\n */\n async renderMine() {\n try {\n const state = this.getState();\n // Get string and package templates.\n const [string, packageTemplates] = await this._renderPromise(\"search_mine_header\", state.mine.data);\n // Update DOM.\n this._render(this.selectors.MINE_HEADER, this.selectors.MINE_CONTENT, string, packageTemplates);\n } catch (exception) {\n await Notification.exception(exception);\n }\n }\n}\n"],"names":["BaseComponent","getWatchers","watch","handler","this","updateStatus","renderAll","renderRecentlyUsed","renderFavourites","renderMine","selectors","ALL_HEADER","ALL_CONTENT","RECENTLY_USED_HEADER","RECENTLY_USED_CONTENT","FAVOURITES_HEADER","FAVOURITES_CONTENT","MINE_HEADER","MINE_CONTENT","packageTemplate","templates","prefetchTemplates","reactive","dispatch","getState","stateManager","state","loading","general","element","parentElement","classList","toggle","_getPackageTemplatesPromise","contexts","promises","context","promise","renderForPromise","push","Promise","all","headerStringKey","packageData","getString","strings","get_string","total","renderTemplates","packages","_render","headerSelector","contentSelector","header","content","contentElement","getElement","innerHTML","html","js","appendNodeContents","string","packageTemplates","_renderPromise","data","exception","Notification","recentlyused","favourites","mine"],"mappings":"w4CA0B6BA,wBACzBC,oBACW,CACH,CAACC,MAAO,0BAA2BC,QAASC,KAAKC,cACjD,CAACH,MAAO,cAAeC,QAASC,KAAKE,WACrC,CAACJ,MAAO,uBAAwBC,QAASC,KAAKG,oBAC9C,CAACL,MAAO,qBAAsBC,QAASC,KAAKI,kBAC5C,CAACN,MAAO,eAAgBC,QAASC,KAAKK,iCAKrCC,UAAY,CACbC,qCACAC,uCACAC,yDACAC,2DACAC,mDACAC,qDACAC,uCACAC,+CAICC,gBAAkB,6CACvBC,UAAUC,kBAAkB,CAACjB,KAAKe,0CAK7BG,SAASC,SAAS,kBAQ3BC,kBACWpB,KAAKkB,SAASG,aAAaC,MAQtCrB,qBACUsB,QAAUvB,KAAKoB,WAAWI,QAAQD,aACnCE,QAAQC,cAAcC,UAAUC,OAAO,cAAeL,SAU/DM,4BAA4BC,cACpBC,SAAW,OACV,MAAMC,WAAWF,SAAU,OACtBG,QAAUjB,UAAUkB,iBAAiBlC,KAAKe,gBAAiBiB,SACjED,SAASI,KAAKF,gBAEXG,QAAQC,IAAIN,+BAWFO,gBAAiBC,mBAE5BC,UAAYC,QAAQC,WAAWJ,gBAAiB,mBAAoBC,YAAYI,OAChFC,gBAAkB5C,KAAK6B,4BAA4BU,YAAYM,iBAC9DT,QAAQC,IAAI,CAACG,UAAWI,kBAYnCE,QAAQC,eAAgBC,gBAAiBC,OAAQC,eACvCC,eAAiBnD,KAAKoD,WAAWJ,iBACvCG,eAAeE,UAAY,OACtB,MAAMC,KAACA,KAADC,GAAOA,MAAOL,QACrBlC,UAAUwC,mBAAmBL,eAAgBG,KAAMC,SAElDH,WAAWL,gBAAgBM,UAAYJ,mCAWlC3B,MAAQtB,KAAKoB,YAEZqC,OAAQC,wBAA0B1D,KAAK2D,eAAe,oBAAqBrC,MAAMe,IAAIuB,WAEvFd,QAAQ9C,KAAKM,UAAUC,WAAYP,KAAKM,UAAUE,YAAaiD,OAAQC,kBAC9E,MAAOG,iBACCC,sBAAaD,UAAUA,iDAWvBvC,MAAQtB,KAAKoB,YAEZqC,OAAQC,wBAA0B1D,KAAK2D,eAAe,8BAA+BrC,MAAMyC,aAAaH,WAE1Gd,QAAQ9C,KAAKM,UAAUG,qBAAsBT,KAAKM,UAAUI,sBAAuB+C,OAAQC,kBAClG,MAAOG,iBACCC,sBAAaD,UAAUA,+CAWvBvC,MAAQtB,KAAKoB,YAEZqC,OAAQC,wBAA0B1D,KAAK2D,eAAe,2BAA4BrC,MAAM0C,WAAWJ,WAErGd,QAAQ9C,KAAKM,UAAUK,kBAAmBX,KAAKM,UAAUM,mBAAoB6C,OAAQC,kBAC5F,MAAOG,iBACCC,sBAAaD,UAAUA,yCAWvBvC,MAAQtB,KAAKoB,YAEZqC,OAAQC,wBAA0B1D,KAAK2D,eAAe,qBAAsBrC,MAAM2C,KAAKL,WAEzFd,QAAQ9C,KAAKM,UAAUO,YAAab,KAAKM,UAAUQ,aAAc2C,OAAQC,kBAChF,MAAOG,iBACCC,sBAAaD,UAAUA"} \ No newline at end of file +{"version":3,"file":"container.min.js","sources":["../../../src/package_search/components/container.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/components/container\n */\n\nimport * as templates from 'core/templates';\nimport Component from 'qtype_questionpy/package_search/component';\nimport TabHeader from 'qtype_questionpy/package_search/components/tab_header';\nimport TabContent from 'qtype_questionpy/package_search/components/tab_content';\n\nexport default class extends Component {\n async create(descriptor) {\n // Register header and content of tabs.\n for (const category of [\"all\", \"recentlyused\", \"favourites\", \"mine\"]) {\n new TabHeader({\n element: this.getElement(`[data-for=\"${category}-header\"]`),\n name: `category_${category}_header`,\n reactive: descriptor.reactive,\n category: category,\n });\n new TabContent({\n element: this.getElement(`[data-for=\"${category}-content\"]`),\n name: `category_${category}_header`,\n reactive: descriptor.reactive,\n category: category,\n });\n }\n\n // Prefetch the package template for faster rendering.\n templates.prefetchTemplates([\"qtype_questionpy/package/package_selection\"]);\n }\n}\n"],"names":["Component","descriptor","category","TabHeader","element","this","getElement","name","reactive","TabContent","templates","prefetchTemplates"],"mappings":"wjDA0B6BA,gCACZC,gBAEJ,MAAMC,WAAY,CAAC,MAAO,eAAgB,aAAc,YACrDC,oBAAU,CACVC,QAASC,KAAKC,gCAAyBJ,uBACvCK,wBAAkBL,oBAClBM,SAAUP,WAAWO,SACrBN,SAAUA,eAEVO,qBAAW,CACXL,QAASC,KAAKC,gCAAyBJ,wBACvCK,wBAAkBL,oBAClBM,SAAUP,WAAWO,SACrBN,SAAUA,WAKlBQ,UAAUC,kBAAkB,CAAC"} \ No newline at end of file diff --git a/amd/build/package_search/components/search_bar.min.js b/amd/build/package_search/components/search_bar.min.js index 9e0865ca..706a54f7 100644 --- a/amd/build/package_search/components/search_bar.min.js +++ b/amd/build/package_search/components/search_bar.min.js @@ -1,3 +1,3 @@ -define("qtype_questionpy/package_search/components/search_bar",["exports","core/utils","core/reactive"],(function(_exports,_utils,_reactive){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;class _default extends _reactive.BaseComponent{create(){this.selectors={SEARCH_BAR:'[data-for="search-bar"]'}}stateReady(){this.addEventListener(this.getElement(this.selectors.SEARCH_BAR),"input",(0,_utils.debounce)((event=>this.searchPackages(event.target.value)),300)),this.addEventListener(this.getElement(this.selectors.SEARCH_BAR),"keydown",this.ignoreEnter)}ignoreEnter(event){"Enter"===event.key&&event.preventDefault()}searchPackages(query){this.reactive.dispatch("searchPackagesByQuery",query)}}return _exports.default=_default,_exports.default})); +define("qtype_questionpy/package_search/components/search_bar",["exports","core/utils","qtype_questionpy/package_search/component"],(function(_exports,_utils,_component){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_component=(obj=_component)&&obj.__esModule?obj:{default:obj};class _default extends _component.default{create(){this.selectors={SEARCH_BAR:'[data-for="search-bar"]'}}stateReady(){this.addEventListener(this.getElement(this.selectors.SEARCH_BAR),"input",(0,_utils.debounce)((event=>this.searchPackages(event.target.value)),300)),this.addEventListener(this.getElement(this.selectors.SEARCH_BAR),"keydown",this.ignoreEnter)}ignoreEnter(event){"Enter"===event.key&&event.preventDefault()}searchPackages(query){this.reactive.dispatch("searchPackagesByQuery",query)}}return _exports.default=_default,_exports.default})); //# sourceMappingURL=search_bar.min.js.map \ No newline at end of file diff --git a/amd/build/package_search/components/search_bar.min.js.map b/amd/build/package_search/components/search_bar.min.js.map index b677ec2f..0de91ab5 100644 --- a/amd/build/package_search/components/search_bar.min.js.map +++ b/amd/build/package_search/components/search_bar.min.js.map @@ -1 +1 @@ -{"version":3,"file":"search_bar.min.js","sources":["../../../src/package_search/components/search_bar.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/components/search_bar\n */\n\nimport {debounce} from 'core/utils';\nimport {BaseComponent} from 'core/reactive';\n\nexport default class extends BaseComponent {\n create() {\n this.selectors = {\n SEARCH_BAR: `[data-for=\"search-bar\"]`,\n };\n }\n\n stateReady() {\n this.addEventListener(\n this.getElement(this.selectors.SEARCH_BAR),\n \"input\",\n debounce((event) => this.searchPackages(event.target.value), 300)\n );\n this.addEventListener(this.getElement(this.selectors.SEARCH_BAR), \"keydown\", this.ignoreEnter);\n }\n\n /**\n * Prevents form submission by pressing the enter key.\n *\n * @param {KeyboardEvent} event\n */\n ignoreEnter(event) {\n if (event.key === \"Enter\") {\n event.preventDefault();\n }\n }\n\n /**\n * Dispatches package search by query mutation.\n *\n * @param {string} query\n */\n searchPackages(query) {\n this.reactive.dispatch('searchPackagesByQuery', query);\n }\n\n}\n"],"names":["BaseComponent","create","selectors","SEARCH_BAR","stateReady","addEventListener","this","getElement","event","searchPackages","target","value","ignoreEnter","key","preventDefault","query","reactive","dispatch"],"mappings":"oPAwB6BA,wBACzBC,cACSC,UAAY,CACbC,sCAIRC,kBACSC,iBACDC,KAAKC,WAAWD,KAAKJ,UAAUC,YAC/B,SACA,oBAAUK,OAAUF,KAAKG,eAAeD,MAAME,OAAOC,QAAQ,WAE5DN,iBAAiBC,KAAKC,WAAWD,KAAKJ,UAAUC,YAAa,UAAWG,KAAKM,aAQtFA,YAAYJ,OACU,UAAdA,MAAMK,KACNL,MAAMM,iBASdL,eAAeM,YACNC,SAASC,SAAS,wBAAyBF"} \ No newline at end of file +{"version":3,"file":"search_bar.min.js","sources":["../../../src/package_search/components/search_bar.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/components/search_bar\n */\n\nimport {debounce} from 'core/utils';\nimport Component from 'qtype_questionpy/package_search/component';\n\nexport default class extends Component {\n create() {\n this.selectors = {\n SEARCH_BAR: '[data-for=\"search-bar\"]',\n };\n }\n\n stateReady() {\n this.addEventListener(\n this.getElement(this.selectors.SEARCH_BAR),\n \"input\",\n debounce((event) => this.searchPackages(event.target.value), 300)\n );\n this.addEventListener(this.getElement(this.selectors.SEARCH_BAR), \"keydown\", this.ignoreEnter);\n }\n\n /**\n * Prevents form submission by pressing the enter key.\n *\n * @param {KeyboardEvent} event\n */\n ignoreEnter(event) {\n if (event.key === \"Enter\") {\n event.preventDefault();\n }\n }\n\n /**\n * Dispatches package search by query mutation.\n *\n * @param {string} query\n */\n searchPackages(query) {\n this.reactive.dispatch(\"searchPackagesByQuery\", query);\n }\n\n}\n"],"names":["Component","create","selectors","SEARCH_BAR","stateReady","addEventListener","this","getElement","event","searchPackages","target","value","ignoreEnter","key","preventDefault","query","reactive","dispatch"],"mappings":"uVAwB6BA,mBACzBC,cACSC,UAAY,CACbC,WAAY,2BAIpBC,kBACSC,iBACDC,KAAKC,WAAWD,KAAKJ,UAAUC,YAC/B,SACA,oBAAUK,OAAUF,KAAKG,eAAeD,MAAME,OAAOC,QAAQ,WAE5DN,iBAAiBC,KAAKC,WAAWD,KAAKJ,UAAUC,YAAa,UAAWG,KAAKM,aAQtFA,YAAYJ,OACU,UAAdA,MAAMK,KACNL,MAAMM,iBASdL,eAAeM,YACNC,SAASC,SAAS,wBAAyBF"} \ No newline at end of file diff --git a/amd/build/package_search/components/tab_content.min.js b/amd/build/package_search/components/tab_content.min.js new file mode 100644 index 00000000..1bfa8448 --- /dev/null +++ b/amd/build/package_search/components/tab_content.min.js @@ -0,0 +1,3 @@ +define("qtype_questionpy/package_search/components/tab_content",["exports","core/templates","core/notification","qtype_questionpy/package_search/component"],(function(_exports,templates,_notification,_component){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,templates=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(templates),_notification=_interopRequireDefault(_notification),_component=_interopRequireDefault(_component);class _default extends _component.default{getWatchers(){return[{watch:"".concat(this.category,":updated"),handler:this.render}]}async create(descriptor){this.category=descriptor.category,this.selectors={CONTENT:".qpy-tab-content"}}_getPackageTemplatesPromise(contexts){let promises=[];for(const context of contexts){const promise=templates.renderForPromise("qtype_questionpy/package/package_selection",context);promises.push(promise)}return Promise.all(promises)}async render(){try{const state=this.getState()[this.category],packageTemplates=await this._getPackageTemplatesPromise(state.data.packages),element=this.getElement(this.selectors.CONTENT);element.innerHTML="";for(const{html:html,js:js}of packageTemplates)templates.appendNodeContents(element,html,js)}catch(exception){await _notification.default.exception(exception)}}}return _exports.default=_default,_exports.default})); + +//# sourceMappingURL=tab_content.min.js.map \ No newline at end of file diff --git a/amd/build/package_search/components/tab_content.min.js.map b/amd/build/package_search/components/tab_content.min.js.map new file mode 100644 index 00000000..49cda1e1 --- /dev/null +++ b/amd/build/package_search/components/tab_content.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tab_content.min.js","sources":["../../../src/package_search/components/tab_content.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/components/tab_content\n */\n\nimport * as templates from 'core/templates';\nimport Notification from 'core/notification';\nimport Component from 'qtype_questionpy/package_search/component';\n\nexport default class extends Component {\n getWatchers() {\n return [\n {watch: `${this.category}:updated`, handler: this.render},\n ];\n }\n\n async create(descriptor) {\n this.category = descriptor.category;\n this.selectors = {\n CONTENT: \".qpy-tab-content\",\n };\n }\n\n /**\n * Groups render promises for package templates.\n *\n * @param {Object[]} contexts\n * @returns {Promise}\n * @private\n */\n _getPackageTemplatesPromise(contexts) {\n let promises = [];\n for (const context of contexts) {\n const promise = templates.renderForPromise(\"qtype_questionpy/package/package_selection\", context);\n promises.push(promise);\n }\n return Promise.all(promises);\n }\n\n /**\n * Renders every package inside the current state.\n */\n async render() {\n try {\n const state = this.getState()[this.category];\n const packageTemplates = await this._getPackageTemplatesPromise(state.data.packages);\n const element = this.getElement(this.selectors.CONTENT);\n element.innerHTML = \"\";\n for (const {html, js} of packageTemplates) {\n templates.appendNodeContents(element, html, js);\n }\n } catch (exception) {\n await Notification.exception(exception);\n }\n }\n}\n"],"names":["Component","getWatchers","watch","this","category","handler","render","descriptor","selectors","CONTENT","_getPackageTemplatesPromise","contexts","promises","context","promise","templates","renderForPromise","push","Promise","all","state","getState","packageTemplates","data","packages","element","getElement","innerHTML","html","js","appendNodeContents","exception","Notification"],"mappings":"o6CAyB6BA,mBACzBC,oBACW,CACH,CAACC,gBAAUC,KAAKC,qBAAoBC,QAASF,KAAKG,sBAI7CC,iBACJH,SAAWG,WAAWH,cACtBI,UAAY,CACbC,QAAS,oBAWjBC,4BAA4BC,cACpBC,SAAW,OACV,MAAMC,WAAWF,SAAU,OACtBG,QAAUC,UAAUC,iBAAiB,6CAA8CH,SACzFD,SAASK,KAAKH,gBAEXI,QAAQC,IAAIP,mCAQTQ,MAAQjB,KAAKkB,WAAWlB,KAAKC,UAC7BkB,uBAAyBnB,KAAKO,4BAA4BU,MAAMG,KAAKC,UACrEC,QAAUtB,KAAKuB,WAAWvB,KAAKK,UAAUC,SAC/CgB,QAAQE,UAAY,OACf,MAAMC,KAACA,KAADC,GAAOA,MAAOP,iBACrBP,UAAUe,mBAAmBL,QAASG,KAAMC,IAElD,MAAOE,iBACCC,sBAAaD,UAAUA"} \ No newline at end of file diff --git a/amd/build/package_search/components/tab_header.min.js b/amd/build/package_search/components/tab_header.min.js new file mode 100644 index 00000000..2142162a --- /dev/null +++ b/amd/build/package_search/components/tab_header.min.js @@ -0,0 +1,3 @@ +define("qtype_questionpy/package_search/components/tab_header",["exports","core/str","qtype_questionpy/package_search/component"],(function(_exports,strings,_component){var obj;function _getRequireWildcardCache(nodeInterop){if("function"!=typeof WeakMap)return null;var cacheBabelInterop=new WeakMap,cacheNodeInterop=new WeakMap;return(_getRequireWildcardCache=function(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop})(nodeInterop)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,strings=function(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule)return obj;if(null===obj||"object"!=typeof obj&&"function"!=typeof obj)return{default:obj};var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj))return cache.get(obj);var newObj={},hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj)if("default"!==key&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;desc&&(desc.get||desc.set)?Object.defineProperty(newObj,key,desc):newObj[key]=obj[key]}newObj.default=obj,cache&&cache.set(obj,newObj);return newObj}(strings),_component=(obj=_component)&&obj.__esModule?obj:{default:obj};class _default extends _component.default{getWatchers(){return[{watch:"".concat(this.category,":updated"),handler:this.render}]}async create(descriptor){this.category=descriptor.category}async render(){const data=this.getState()[this.category].data;this.element.innerHTML=await strings.get_string("search_".concat(this.category,"_header"),"qtype_questionpy",data.total)}}return _exports.default=_default,_exports.default})); + +//# sourceMappingURL=tab_header.min.js.map \ No newline at end of file diff --git a/amd/build/package_search/components/tab_header.min.js.map b/amd/build/package_search/components/tab_header.min.js.map new file mode 100644 index 00000000..00b38fed --- /dev/null +++ b/amd/build/package_search/components/tab_header.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"tab_header.min.js","sources":["../../../src/package_search/components/tab_header.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/components/tab_header\n */\n\nimport * as strings from 'core/str';\nimport Component from 'qtype_questionpy/package_search/component';\n\nexport default class extends Component {\n getWatchers() {\n return [\n {watch: `${this.category}:updated`, handler: this.render},\n ];\n }\n\n async create(descriptor) {\n this.category = descriptor.category;\n }\n\n /**\n * Renders every package inside a specific tab.\n */\n async render() {\n const data = this.getState()[this.category].data;\n this.element.innerHTML = await strings.get_string(`search_${this.category}_header`, \"qtype_questionpy\", data.total);\n }\n\n}\n"],"names":["Component","getWatchers","watch","this","category","handler","render","descriptor","data","getState","element","innerHTML","strings","get_string","total"],"mappings":"uwCAwB6BA,mBACzBC,oBACW,CACH,CAACC,gBAAUC,KAAKC,qBAAoBC,QAASF,KAAKG,sBAI7CC,iBACJH,SAAWG,WAAWH,8BAOrBI,KAAOL,KAAKM,WAAWN,KAAKC,UAAUI,UACvCE,QAAQC,gBAAkBC,QAAQC,4BAAqBV,KAAKC,oBAAmB,mBAAoBI,KAAKM"} \ No newline at end of file diff --git a/amd/build/package_search/reactive.min.js b/amd/build/package_search/reactive.min.js index 28ab9151..0c71f3ec 100644 --- a/amd/build/package_search/reactive.min.js +++ b/amd/build/package_search/reactive.min.js @@ -1,3 +1,3 @@ -define("qtype_questionpy/package_search/reactive",["exports","core/reactive","qtype_questionpy/package_search/mutations","qtype_questionpy/package_search/events","qtype_questionpy/package_search/components/container","qtype_questionpy/package_search/components/search_bar"],(function(_exports,_reactive,_mutations,_events,_container,_search_bar){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_mutations=_interopRequireDefault(_mutations),_container=_interopRequireDefault(_container),_search_bar=_interopRequireDefault(_search_bar);let counter=0;class _default extends _reactive.Reactive{constructor(target,options){super({name:"PackageSearch".concat(counter++),eventName:_events.eventNames.stateChanged,eventDispatch:_events.notifyStateChanged,target:target,mutations:new _mutations.default(options),state:{general:{loading:!0,selected:"all",sort:"alpha",order:"asc",query:""},all:{data:{packages:[],count:0,total:0},page:0},recentlyused:{data:{packages:[],count:0,total:0},page:0},favourites:{data:{packages:[],count:0,total:0},page:0},mine:{data:{packages:[],count:0,total:0},page:0}}}),this.options=options}load(){this.searchBar=new _search_bar.default({element:this.target.getElementsByClassName("qpy-package-search-search-bar")[0],name:"search_bar",reactive:this}),this.packageContainer=new _container.default({element:this.target.getElementsByClassName("qpy-package-search-container")[0],name:"container",reactive:this})}}return _exports.default=_default,_exports.default})); +define("qtype_questionpy/package_search/reactive",["exports","core/reactive","qtype_questionpy/package_search/mutations","qtype_questionpy/package_search/events","qtype_questionpy/package_search/components/area"],(function(_exports,_reactive,_mutations,_events,_area){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_mutations=_interopRequireDefault(_mutations),_area=_interopRequireDefault(_area);let counter=0;class _default extends _reactive.Reactive{constructor(target,options){super({name:"PackageSearch".concat(counter++),eventName:_events.eventNames.stateChanged,eventDispatch:_events.notifyStateChanged,target:target,mutations:new _mutations.default(options),state:{general:{loading:!0,selected:"all",sort:"alpha",order:"asc",query:""},all:{data:{packages:[],count:0,total:0},page:0},recentlyused:{data:{packages:[],count:0,total:0},page:0},favourites:{data:{packages:[],count:0,total:0},page:0},mine:{data:{packages:[],count:0,total:0},page:0}}}),this.options=options}load(){new _area.default({element:this.target,name:"search_area",reactive:this})}}return _exports.default=_default,_exports.default})); //# sourceMappingURL=reactive.min.js.map \ No newline at end of file diff --git a/amd/build/package_search/reactive.min.js.map b/amd/build/package_search/reactive.min.js.map index 88623c79..ff49c85a 100644 --- a/amd/build/package_search/reactive.min.js.map +++ b/amd/build/package_search/reactive.min.js.map @@ -1 +1 @@ -{"version":3,"file":"reactive.min.js","sources":["../../src/package_search/reactive.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/reactive\n */\n\nimport {Reactive} from 'core/reactive';\n\nimport SearchMutations from 'qtype_questionpy/package_search/mutations';\nimport {eventNames, notifyStateChanged} from 'qtype_questionpy/package_search/events';\nimport Container from 'qtype_questionpy/package_search/components/container';\nimport SearchBar from 'qtype_questionpy/package_search/components/search_bar';\n\nlet counter = 0;\n\nexport default class extends Reactive {\n /**\n * Reactive element used for package search.\n *\n * @param {HTMLDivElement} target\n * @param {{contextid: number, limit: number}} options\n */\n constructor(target, options) {\n super({\n name: `PackageSearch${counter++}`,\n eventName: eventNames.stateChanged,\n eventDispatch: notifyStateChanged,\n target: target,\n mutations: new SearchMutations(options),\n state: {\n general: {\n loading: true,\n selected: \"all\",\n sort: \"alpha\",\n order: \"asc\",\n query: \"\",\n },\n all: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n recentlyused: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n favourites: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n mine: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n },\n });\n this.options = options;\n }\n\n /**\n * Loads every component of the package search area.\n */\n load() {\n this.searchBar = new SearchBar({\n element: this.target.getElementsByClassName(\"qpy-package-search-search-bar\")[0],\n name: \"search_bar\",\n reactive: this\n });\n this.packageContainer = new Container({\n element: this.target.getElementsByClassName(\"qpy-package-search-container\")[0],\n name: \"container\",\n reactive: this\n });\n }\n}\n"],"names":["counter","Reactive","constructor","target","options","name","eventName","eventNames","stateChanged","eventDispatch","notifyStateChanged","mutations","SearchMutations","state","general","loading","selected","sort","order","query","all","data","packages","count","total","page","recentlyused","favourites","mine","load","searchBar","SearchBar","element","this","getElementsByClassName","reactive","packageContainer","Container"],"mappings":"4oBA4BIA,QAAU,yBAEeC,mBAOzBC,YAAYC,OAAQC,eACV,CACFC,4BAAsBL,WACtBM,UAAWC,mBAAWC,aACtBC,cAAeC,2BACfP,OAAQA,OACRQ,UAAW,IAAIC,mBAAgBR,SAC/BS,MAAO,CACHC,QAAS,CACLC,SAAS,EACTC,SAAU,MACVC,KAAM,QACNC,MAAO,MACPC,MAAO,IAEXC,IAAK,CACDC,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,GAEVC,aAAc,CACVL,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,GAEVE,WAAY,CACRN,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,GAEVG,KAAM,CACFP,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,WAIbrB,QAAUA,QAMnByB,YACSC,UAAY,IAAIC,oBAAU,CAC3BC,QAASC,KAAK9B,OAAO+B,uBAAuB,iCAAiC,GAC7E7B,KAAM,aACN8B,SAAUF,YAETG,iBAAmB,IAAIC,mBAAU,CAClCL,QAASC,KAAK9B,OAAO+B,uBAAuB,gCAAgC,GAC5E7B,KAAM,YACN8B,SAAUF"} \ No newline at end of file +{"version":3,"file":"reactive.min.js","sources":["../../src/package_search/reactive.js"],"sourcesContent":["/*\n * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 .\n */\n\n/**\n * @module qtype_questionpy/package_search/reactive\n */\n\nimport {Reactive} from 'core/reactive';\n\nimport SearchMutations from 'qtype_questionpy/package_search/mutations';\nimport {eventNames, notifyStateChanged} from 'qtype_questionpy/package_search/events';\nimport Area from 'qtype_questionpy/package_search/components/area';\n\nlet counter = 0;\n\nexport default class extends Reactive {\n /**\n * Reactive element used for package search.\n *\n * @param {HTMLDivElement} target\n * @param {{contextid: number, limit: number}} options\n */\n constructor(target, options) {\n super({\n name: `PackageSearch${counter++}`,\n eventName: eventNames.stateChanged,\n eventDispatch: notifyStateChanged,\n target: target,\n mutations: new SearchMutations(options),\n state: {\n general: {\n loading: true,\n selected: \"all\",\n sort: \"alpha\",\n order: \"asc\",\n query: \"\",\n },\n all: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n recentlyused: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n favourites: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n mine: {\n data: {\n packages: [],\n count: 0,\n total: 0,\n },\n page: 0,\n },\n },\n });\n this.options = options;\n }\n\n /**\n * Loads every component of the package search area.\n */\n load() {\n new Area({\n element: this.target,\n name: \"search_area\",\n reactive: this\n });\n }\n}\n"],"names":["counter","Reactive","constructor","target","options","name","eventName","eventNames","stateChanged","eventDispatch","notifyStateChanged","mutations","SearchMutations","state","general","loading","selected","sort","order","query","all","data","packages","count","total","page","recentlyused","favourites","mine","load","Area","element","this","reactive"],"mappings":"ogBA2BIA,QAAU,yBAEeC,mBAOzBC,YAAYC,OAAQC,eACV,CACFC,4BAAsBL,WACtBM,UAAWC,mBAAWC,aACtBC,cAAeC,2BACfP,OAAQA,OACRQ,UAAW,IAAIC,mBAAgBR,SAC/BS,MAAO,CACHC,QAAS,CACLC,SAAS,EACTC,SAAU,MACVC,KAAM,QACNC,MAAO,MACPC,MAAO,IAEXC,IAAK,CACDC,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,GAEVC,aAAc,CACVL,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,GAEVE,WAAY,CACRN,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,GAEVG,KAAM,CACFP,KAAM,CACFC,SAAU,GACVC,MAAO,EACPC,MAAO,GAEXC,KAAM,WAIbrB,QAAUA,QAMnByB,WACQC,cAAK,CACLC,QAASC,KAAK7B,OACdE,KAAM,cACN4B,SAAUD"} \ No newline at end of file diff --git a/amd/src/package_search/component.js b/amd/src/package_search/component.js new file mode 100644 index 00000000..6c472c75 --- /dev/null +++ b/amd/src/package_search/component.js @@ -0,0 +1,35 @@ +/* + * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 . + */ + +/** + * @module qtype_questionpy/package_search/component + */ + + +import {BaseComponent} from 'core/reactive'; + +export default class extends BaseComponent { + + /** + * Returns the current state. + * + * @returns {any} + */ + getState() { + return this.reactive.stateManager.state; + } +} diff --git a/amd/src/package_search/components/area.js b/amd/src/package_search/components/area.js new file mode 100644 index 00000000..af5779ae --- /dev/null +++ b/amd/src/package_search/components/area.js @@ -0,0 +1,60 @@ +/* + * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 . + */ + +/** + * @module qtype_questionpy/package_search/components/area + */ + +import Component from 'qtype_questionpy/package_search/component'; +import Container from 'qtype_questionpy/package_search/components/container'; +import SearchBar from 'qtype_questionpy/package_search/components/search_bar'; + +export default class extends Component { + getWatchers() { + return [ + {watch: `general.loading:updated`, handler: this.updateStatus}, + ]; + } + + create(descriptor) { + // Register search bar. + new SearchBar({ + element: this.getElement('[data-for="search-bar-container"'), + name: "search_bar", + reactive: descriptor.reactive, + }); + // Register package container. + new Container({ + element: this.getElement('[data-for="package-container"'), + name: "container", + reactive: descriptor.reactive, + }); + } + + stateReady() { + // Initial loading of the packages. + this.reactive.dispatch("searchPackages"); + } + + /** + * Adds or removes the `qpy-loading` class from the search area. + */ + updateStatus() { + const loading = this.getState().general.loading; + this.element.classList.toggle("qpy-loading", loading); + } +} diff --git a/amd/src/package_search/components/container.js b/amd/src/package_search/components/container.js index 3f25e9fe..10a67f51 100644 --- a/amd/src/package_search/components/container.js +++ b/amd/src/package_search/components/container.js @@ -20,177 +20,29 @@ */ import * as templates from 'core/templates'; -import * as strings from 'core/str'; -import Notification from 'core/notification'; -import {BaseComponent} from 'core/reactive'; - -export default class extends BaseComponent { - getWatchers() { - return [ - {watch: "general.loading:updated", handler: this.updateStatus}, - {watch: "all:updated", handler: this.renderAll}, - {watch: "recentlyused:updated", handler: this.renderRecentlyUsed}, - {watch: "favourites:updated", handler: this.renderFavourites}, - {watch: "mine:updated", handler: this.renderMine}, - ]; - } - - async create() { - this.selectors = { - ALL_HEADER: `[data-for="all-header"]`, - ALL_CONTENT: `[data-for="all-content"]`, - RECENTLY_USED_HEADER: `[data-for="recently-used-header"]`, - RECENTLY_USED_CONTENT: `[data-for="recently-used-content"]`, - FAVOURITES_HEADER: `[data-for="favourites-header"]`, - FAVOURITES_CONTENT: `[data-for="favourites-content"]`, - MINE_HEADER: `[data-for="mine-header"]`, - MINE_CONTENT: `[data-for="mine-content"]`, - }; - - // Prefetch the package template for faster rendering. - this.packageTemplate = "qtype_questionpy/package/package_selection"; - templates.prefetchTemplates([this.packageTemplate]); - } - - async stateReady() { - // Initial loading of the packages. - this.reactive.dispatch("searchPackages"); - } - - /** - * Returns the current state. - * - * @returns {any} - */ - getState() { - return this.reactive.stateManager.state; - } - - /** - * Adds or removes the `qpy-loading` class from the search area. - * - * TODO: This should be handled by the area itself. - */ - updateStatus() { - const loading = this.getState().general.loading; - this.element.parentElement.classList.toggle("qpy-loading", loading); - } - - /** - * Groups render promises for package templates. - * - * @param {Object[]} contexts - * @returns {Promise} - * @private - */ - _getPackageTemplatesPromise(contexts) { - let promises = []; - for (const context of contexts) { - const promise = templates.renderForPromise(this.packageTemplate, context); - promises.push(promise); +import Component from 'qtype_questionpy/package_search/component'; +import TabHeader from 'qtype_questionpy/package_search/components/tab_header'; +import TabContent from 'qtype_questionpy/package_search/components/tab_content'; + +export default class extends Component { + async create(descriptor) { + // Register header and content of tabs. + for (const category of ["all", "recentlyused", "favourites", "mine"]) { + new TabHeader({ + element: this.getElement(`[data-for="${category}-header"]`), + name: `category_${category}_header`, + reactive: descriptor.reactive, + category: category, + }); + new TabContent({ + element: this.getElement(`[data-for="${category}-content"]`), + name: `category_${category}_header`, + reactive: descriptor.reactive, + category: category, + }); } - return Promise.all(promises); - } - - /** - * Groups header and templates promises. - * - * @param {string} headerStringKey - * @param {Object} packageData - * @returns {Promise<[string, Object]>} - * @private - */ - async _renderPromise(headerStringKey, packageData) { - // Get string and render templates. - const getString = strings.get_string(headerStringKey, "qtype_questionpy", packageData.total); - const renderTemplates = this._getPackageTemplatesPromise(packageData.packages); - return Promise.all([getString, renderTemplates]); - } - /** - * Renders every package inside a specific tab. - * - * @param {string} headerSelector - * @param {string} contentSelector - * @param {string} header - * @param {Object} content - * @private - */ - _render(headerSelector, contentSelector, header, content) { - const contentElement = this.getElement(contentSelector); - contentElement.innerHTML = ""; - for (const {html, js} of content) { - templates.appendNodeContents(contentElement, html, js); - } - this.getElement(headerSelector).innerHTML = header; - } - - - /** - * Renders every package inside the current state for the `all`-category. - * - * @returns {Promise} - */ - async renderAll() { - try { - const state = this.getState(); - // Get string and package templates. - const [string, packageTemplates] = await this._renderPromise("search_all_header", state.all.data); - // Update DOM. - this._render(this.selectors.ALL_HEADER, this.selectors.ALL_CONTENT, string, packageTemplates); - } catch (exception) { - await Notification.exception(exception); - } - } - - /** - * Renders every package inside the current state for the `recentlyused`-category. - * - * @returns {Promise} - */ - async renderRecentlyUsed() { - try { - const state = this.getState(); - // Get string and package templates. - const [string, packageTemplates] = await this._renderPromise("search_recently_used_header", state.recentlyused.data); - // Update DOM. - this._render(this.selectors.RECENTLY_USED_HEADER, this.selectors.RECENTLY_USED_CONTENT, string, packageTemplates); - } catch (exception) { - await Notification.exception(exception); - } - } - - /** - * Renders every package inside the current state for the `favourites`-category. - * - * @returns {Promise} - */ - async renderFavourites() { - try { - const state = this.getState(); - // Get string and package templates. - const [string, packageTemplates] = await this._renderPromise("search_favourites_header", state.favourites.data); - // Update DOM. - this._render(this.selectors.FAVOURITES_HEADER, this.selectors.FAVOURITES_CONTENT, string, packageTemplates); - } catch (exception) { - await Notification.exception(exception); - } - } - - /** - * Renders every package inside the current state for the `mine`-category. - * - * @returns {Promise} - */ - async renderMine() { - try { - const state = this.getState(); - // Get string and package templates. - const [string, packageTemplates] = await this._renderPromise("search_mine_header", state.mine.data); - // Update DOM. - this._render(this.selectors.MINE_HEADER, this.selectors.MINE_CONTENT, string, packageTemplates); - } catch (exception) { - await Notification.exception(exception); - } + // Prefetch the package template for faster rendering. + templates.prefetchTemplates(["qtype_questionpy/package/package_selection"]); } } diff --git a/amd/src/package_search/components/search_bar.js b/amd/src/package_search/components/search_bar.js index 8df7f4fb..eff79d5d 100644 --- a/amd/src/package_search/components/search_bar.js +++ b/amd/src/package_search/components/search_bar.js @@ -20,12 +20,12 @@ */ import {debounce} from 'core/utils'; -import {BaseComponent} from 'core/reactive'; +import Component from 'qtype_questionpy/package_search/component'; -export default class extends BaseComponent { +export default class extends Component { create() { this.selectors = { - SEARCH_BAR: `[data-for="search-bar"]`, + SEARCH_BAR: '[data-for="search-bar"]', }; } @@ -55,7 +55,7 @@ export default class extends BaseComponent { * @param {string} query */ searchPackages(query) { - this.reactive.dispatch('searchPackagesByQuery', query); + this.reactive.dispatch("searchPackagesByQuery", query); } } diff --git a/amd/src/package_search/components/tab_content.js b/amd/src/package_search/components/tab_content.js new file mode 100644 index 00000000..f0ad8123 --- /dev/null +++ b/amd/src/package_search/components/tab_content.js @@ -0,0 +1,72 @@ +/* + * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 . + */ + +/** + * @module qtype_questionpy/package_search/components/tab_content + */ + +import * as templates from 'core/templates'; +import Notification from 'core/notification'; +import Component from 'qtype_questionpy/package_search/component'; + +export default class extends Component { + getWatchers() { + return [ + {watch: `${this.category}:updated`, handler: this.render}, + ]; + } + + async create(descriptor) { + this.category = descriptor.category; + this.selectors = { + CONTENT: ".qpy-tab-content", + }; + } + + /** + * Groups render promises for package templates. + * + * @param {Object[]} contexts + * @returns {Promise} + * @private + */ + _getPackageTemplatesPromise(contexts) { + let promises = []; + for (const context of contexts) { + const promise = templates.renderForPromise("qtype_questionpy/package/package_selection", context); + promises.push(promise); + } + return Promise.all(promises); + } + + /** + * Renders every package inside the current state. + */ + async render() { + try { + const state = this.getState()[this.category]; + const packageTemplates = await this._getPackageTemplatesPromise(state.data.packages); + const element = this.getElement(this.selectors.CONTENT); + element.innerHTML = ""; + for (const {html, js} of packageTemplates) { + templates.appendNodeContents(element, html, js); + } + } catch (exception) { + await Notification.exception(exception); + } + } +} diff --git a/amd/src/package_search/components/tab_header.js b/amd/src/package_search/components/tab_header.js new file mode 100644 index 00000000..66a96561 --- /dev/null +++ b/amd/src/package_search/components/tab_header.js @@ -0,0 +1,44 @@ +/* + * This file is part of the QuestionPy Moodle plugin - https://questionpy.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 . + */ + +/** + * @module qtype_questionpy/package_search/components/tab_header + */ + +import * as strings from 'core/str'; +import Component from 'qtype_questionpy/package_search/component'; + +export default class extends Component { + getWatchers() { + return [ + {watch: `${this.category}:updated`, handler: this.render}, + ]; + } + + async create(descriptor) { + this.category = descriptor.category; + } + + /** + * Renders every package inside a specific tab. + */ + async render() { + const data = this.getState()[this.category].data; + this.element.innerHTML = await strings.get_string(`search_${this.category}_header`, "qtype_questionpy", data.total); + } + +} diff --git a/amd/src/package_search/reactive.js b/amd/src/package_search/reactive.js index 248663dd..befbc626 100644 --- a/amd/src/package_search/reactive.js +++ b/amd/src/package_search/reactive.js @@ -23,8 +23,7 @@ import {Reactive} from 'core/reactive'; import SearchMutations from 'qtype_questionpy/package_search/mutations'; import {eventNames, notifyStateChanged} from 'qtype_questionpy/package_search/events'; -import Container from 'qtype_questionpy/package_search/components/container'; -import SearchBar from 'qtype_questionpy/package_search/components/search_bar'; +import Area from 'qtype_questionpy/package_search/components/area'; let counter = 0; @@ -91,14 +90,9 @@ export default class extends Reactive { * Loads every component of the package search area. */ load() { - this.searchBar = new SearchBar({ - element: this.target.getElementsByClassName("qpy-package-search-search-bar")[0], - name: "search_bar", - reactive: this - }); - this.packageContainer = new Container({ - element: this.target.getElementsByClassName("qpy-package-search-container")[0], - name: "container", + new Area({ + element: this.target, + name: "search_area", reactive: this }); } diff --git a/lang/en/qtype_questionpy.php b/lang/en/qtype_questionpy.php index 4b1ce5b0..fc9cbaee 100644 --- a/lang/en/qtype_questionpy.php +++ b/lang/en/qtype_questionpy.php @@ -71,7 +71,7 @@ $string['search_bar'] = 'Search...'; $string['search_bar_label_aria'] = 'Search Bar'; $string['search_all_header'] = 'All ({$a})'; -$string['search_recently_used_header'] = 'Recently Used ({$a})'; +$string['search_recentlyused_header'] = 'Recently Used ({$a})'; $string['search_favourites_header'] = 'Favourites ({$a})'; $string['search_mine_header'] = 'Mine ({$a})'; diff --git a/templates/package_search/area.mustache b/templates/package_search/area.mustache index 6a0c0451..9c51f038 100644 --- a/templates/package_search/area.mustache +++ b/templates/package_search/area.mustache @@ -42,16 +42,16 @@ }}
-
+
-
+
-
+
-
+
-
+
-
+