first commit

admin/tool/componentlibrary/amd/build/clipboardwrapper.min.js

@@ -0,0 +1,10 @@
+define("tool_componentlibrary/clipboardwrapper",["exports","core/copy_to_clipboard","tool_componentlibrary/selectors","core/templates"],(function(_exports,_copy_to_clipboard,_selectors,_templates){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+/**
+   * Wrapper to ensure that all Hugo example snippets have a "Copy to clipboard" button.
+   *
+   * @module     tool_componentlibrary/clipboardwrapper
+   * @copyright  2021 Bas Brands <bas@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.clipboardWrapper=void 0,_selectors=_interopRequireDefault(_selectors),_templates=_interopRequireDefault(_templates);let idCounter=0;_exports.clipboardWrapper=async()=>{document.querySelectorAll(_selectors.default.clipboardcontent).forEach((element=>{element.id||(element.id="tool_componentlibrary_content-".concat(idCounter++)),_templates.default.renderForPromise("tool_componentlibrary/clipboardbutton",{clipboardtarget:"#".concat(element.id," code")}).then((_ref=>{let{html:html,js:js}=_ref;_templates.default.prependNodeContents(element,html,js)})).catch()}))}}));
+
+//# sourceMappingURL=clipboardwrapper.min.js.map

admin/tool/componentlibrary/amd/build/clipboardwrapper.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboardwrapper.min.js","sources":["../src/clipboardwrapper.js"],"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 * Wrapper to ensure that all Hugo example snippets have a \"Copy to clipboard\" button.\n *\n * @module     tool_componentlibrary/clipboardwrapper\n * @copyright  2021 Bas Brands <bas@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nimport 'core/copy_to_clipboard';\nimport selectors from 'tool_componentlibrary/selectors';\nimport Templates from 'core/templates';\n\nlet idCounter = 0;\n\n/**\n * Initialise the clipboard button on all reusable code.\n *\n * @method\n */\nexport const clipboardWrapper = async() => {\n    document.querySelectorAll(selectors.clipboardcontent).forEach(element => {\n        if (!element.id) {\n            element.id = `tool_componentlibrary_content-${idCounter++}`;\n        }\n        Templates.renderForPromise('tool_componentlibrary/clipboardbutton', {clipboardtarget: `#${element.id} code`})\n        .then(({html, js}) => {\n            Templates.prependNodeContents(element, html, js);\n            return;\n        })\n        .catch();\n    });\n};\n"],"names":["idCounter","async","document","querySelectorAll","selectors","clipboardcontent","forEach","element","id","renderForPromise","clipboardtarget","then","_ref","html","js","prependNodeContents","catch"],"mappings":";;;;;;;8LA0BIA,UAAY,4BAOgBC,UAC5BC,SAASC,iBAAiBC,mBAAUC,kBAAkBC,SAAQC,UACrDA,QAAQC,KACTD,QAAQC,2CAAsCR,iCAExCS,iBAAiB,wCAAyC,CAACC,2BAAqBH,QAAQC,cACjGG,MAAKC,WAACC,KAACA,KAADC,GAAOA,4BACAC,oBAAoBR,QAASM,KAAMC,OAGhDE"}

admin/tool/componentlibrary/amd/build/jsrunner.min.js

@@ -0,0 +1,10 @@
+define("tool_componentlibrary/jsrunner",["exports","tool_componentlibrary/selectors"],(function(_exports,_selectors){var obj;
+/**
+   * Run the JS required for example code to work in the library.
+   *
+   * @module     tool_componentlibrary/jsrunner
+   * @copyright  2021 Bas Brands <bas@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.jsRunner=void 0,_selectors=(obj=_selectors)&&obj.__esModule?obj:{default:obj};_exports.jsRunner=()=>{document.querySelector(_selectors.default.componentlibrary).querySelectorAll(_selectors.default.jscode).forEach((runjs=>{const script=document.createElement("script");script.type="text/javascript",script.innerHTML=runjs.textContent,document.head.appendChild(script)}))}}));
+
+//# sourceMappingURL=jsrunner.min.js.map

admin/tool/componentlibrary/amd/build/jsrunner.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsrunner.min.js","sources":["../src/jsrunner.js"],"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 * Run the JS required for example code to work in the library.\n *\n * @module     tool_componentlibrary/jsrunner\n * @copyright  2021 Bas Brands <bas@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport selectors from 'tool_componentlibrary/selectors';\n\n/**\n * The Hugo shortcodes changes the JavaScript in markdownfiles from\n * the Moodle mustache {{js}} code... {{/js}} syntax into a div with\n * attribute data-action='runjs'. See hugo/site/layouts/shortcodes/example.html.\n * This code fetches and runs the JavaScript content.\n *\n * @method\n */\nexport const jsRunner = () => {\n    const compLib = document.querySelector(selectors.componentlibrary);\n    compLib.querySelectorAll(selectors.jscode).forEach(runjs => {\n        const script = document.createElement('script');\n        script.type = 'text/javascript';\n        script.innerHTML = runjs.textContent;\n        document.head.appendChild(script);\n    });\n};\n"],"names":["document","querySelector","selectors","componentlibrary","querySelectorAll","jscode","forEach","runjs","script","createElement","type","innerHTML","textContent","head","appendChild"],"mappings":";;;;;;;sKAiCwB,KACJA,SAASC,cAAcC,mBAAUC,kBACzCC,iBAAiBF,mBAAUG,QAAQC,SAAQC,cACzCC,OAASR,SAASS,cAAc,UACtCD,OAAOE,KAAO,kBACdF,OAAOG,UAAYJ,MAAMK,YACzBZ,SAASa,KAAKC,YAAYN"}

admin/tool/componentlibrary/amd/build/loader.min.js

@@ -0,0 +1,3 @@
+define("tool_componentlibrary/loader",["exports","./mustache","./jsrunner","./clipboardwrapper","./search"],(function(_exports,_mustache,_jsrunner,_clipboardwrapper,_search){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0;_exports.init=jsonFile=>{(0,_mustache.mustache)(),(0,_jsrunner.jsRunner)(),(0,_clipboardwrapper.clipboardWrapper)(),(0,_search.search)(jsonFile)}}));
+
+//# sourceMappingURL=loader.min.js.map

admin/tool/componentlibrary/amd/build/loader.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.min.js","sources":["../src/loader.js"],"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 * This initialises the component library JS\n *\n * @module     tool_componentlibrary/loader\n * @copyright  2021 Bas Brands <bas@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {mustache} from './mustache';\nimport {jsRunner} from './jsrunner';\nimport {clipboardWrapper} from './clipboardwrapper';\nimport {search} from './search';\n\n/**\n * Load all the component library JavaScript.\n *\n * @param {string} jsonFile Full path to the JSON file with the search DB.\n */\nexport const init = jsonFile => {\n    mustache();\n    jsRunner();\n    clipboardWrapper();\n    search(jsonFile);\n};\n"],"names":["jsonFile"],"mappings":"yQAiCoBA,yHAITA"}

admin/tool/componentlibrary/amd/build/mustache.min.js

@@ -0,0 +1,10 @@
+define("tool_componentlibrary/mustache",["exports","tool_componentlibrary/selectors","core/ajax","core/config","core/templates","core/log","core/notification"],(function(_exports,_selectors,_ajax,_config,_templates,_log,_notification){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+/**
+   * Render mustache template examples within the component library.
+   *
+   * @module     tool_componentlibrary/mustache
+   * @copyright  2021 Bas Brands <bas@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.mustache=void 0,_selectors=_interopRequireDefault(_selectors),_ajax=_interopRequireDefault(_ajax),_config=_interopRequireDefault(_config),_templates=_interopRequireDefault(_templates),_log=_interopRequireDefault(_log),_notification=_interopRequireDefault(_notification);const loadTemplate=container=>{const sourcecontainer=container.querySelector(_selectors.default.mustachesource),contextcontainer=container.querySelector(_selectors.default.mustachecontext),templateName=container.dataset.template;let context=container.querySelector(_selectors.default.mustacherawcontext).textContent;const parts=templateName.split("/"),request={methodname:"core_output_load_template",args:{component:parts.shift(),template:parts.join("/"),themename:_config.default.theme,includecomments:!0}};_ajax.default.call([request])[0].done((source=>{if(sourcecontainer.textContent=source,!context){const example=source.match(/Example context \(json\):([\s\S]+?)(}})/);context=example[1];const precontainer=document.createElement("pre");precontainer.innerHTML=JSON.stringify(JSON.parse(context),null,4),contextcontainer.parentNode.appendChild(precontainer),contextcontainer.classList.add("d-none")}(async(container,templateName,context)=>{try{context=JSON.parse(context)}catch(e){_log.default.debug("Could not parse json example context for template."),_log.default.debug(e)}const{html:html,js:js}=await _templates.default.renderForPromise(templateName,context),rendercontainer=container.querySelector(_selectors.default.mustacherendered);await _templates.default.replaceNodeContents(rendercontainer,html,js)})(container,templateName,context)})).fail(_notification.default.exception)};_exports.mustache=()=>{document.querySelectorAll(_selectors.default.mustachecode).forEach((container=>{loadTemplate(container)}))}}));
+
+//# sourceMappingURL=mustache.min.js.map

admin/tool/componentlibrary/amd/build/search.min.js

@@ -0,0 +1,10 @@
+define("tool_componentlibrary/search",["exports","tool_componentlibrary/lunr","tool_componentlibrary/selectors","core/log","core/notification","core/key_codes"],(function(_exports,_lunr,_selectors,_log,_notification,_key_codes){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+/**
+   * Interface to the Lunr search engines.
+   *
+   * @module     tool_componentlibrary/search
+   * @copyright  2021 Bas Brands <bas@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.search=void 0,_lunr=_interopRequireDefault(_lunr),_selectors=_interopRequireDefault(_selectors),_log=_interopRequireDefault(_log),_notification=_interopRequireDefault(_notification);let lunrIndex=null,pagesIndex=null;const initLunr=jsonFile=>{(async jsonFile=>{const response=await fetch(jsonFile);return response.ok||_log.default.debug("Error getting Hugo index file: ".concat(response.status)),await response.json()})(jsonFile).then((jsondata=>(pagesIndex=jsondata,lunrIndex=(0,_lunr.default)((function(){this.ref("uri"),this.field("title",{boost:10}),this.field("content"),this.field("tags",{boost:5}),jsondata.forEach((p=>{this.add(p)}))})),null))).catch(_notification.default.exception)},searchIndex=query=>lunrIndex.search(query+" "+query+"*").map((result=>pagesIndex.filter((page=>page.uri===result.ref))[0])),renderResults=results=>{const dropdownMenu=document.querySelector(_selectors.default.dropdownmenu);if(!results.length)return void dropdownMenu.classList.remove("show");dropdownMenu.innerHTML="";const baseUrl=M.cfg.wwwroot+"/admin/tool/componentlibrary/docspage.php";results.slice(0,10).forEach((function(result){const link=document.createElement("a"),chapter=result.uri.split("/")[1];link.appendChild(document.createTextNode("".concat(chapter," > ").concat(result.title))),link.classList.add("dropdown-item"),link.href=baseUrl+result.uri,dropdownMenu.appendChild(link)})),dropdownMenu.classList.add("show")};_exports.search=jsonFile=>{initLunr(jsonFile),(()=>{const searchInput=document.querySelector(_selectors.default.searchinput);searchInput.addEventListener("keyup",(e=>{const query=e.currentTarget.value;query.length<2?document.querySelector(_selectors.default.dropdownmenu).classList.remove("show"):renderResults(searchIndex(query))})),searchInput.addEventListener("keydown",(e=>{e.keyCode===_key_codes.enter&&e.preventDefault(),e.keyCode===_key_codes.escape&&(searchInput.value="")}))})()}}));
+
+//# sourceMappingURL=search.min.js.map

admin/tool/componentlibrary/amd/build/selectors.min.js

@@ -0,0 +1,3 @@
+define("tool_componentlibrary/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={clipboardbutton:".btn-clipboard",clipboardcontent:"figure.highlight, div.highlight",searchinput:'[data-region="docsearch"] input',searchsubmit:'[data-region="docsearch"] .btn-submit',dropdownmenu:'[data-region="docsearch"] .dropdown-menu',componentlibrary:'[data-region="componentlibrary"]',jscode:'[data-action="runjs"]',mustachecode:'[data-region="mustachecode"]',mustacherawcontext:'[data-region="rawcontext"]',mustacherendered:'[data-region="mustacherendered"]',mustachesource:'[data-region="mustachesource"]',mustachecontext:'[data-region="mustachecontext"]'},_exports.default}));
+
+//# sourceMappingURL=selectors.min.js.map

admin/tool/componentlibrary/amd/build/selectors.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.min.js","sources":["../src/selectors.js"],"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 * Selectors for the component library\n *\n * @module     tool_componentlibrary/selectors\n * @copyright  2021 Bas Brands <bas@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nexport default {\n    /**\n     * A selector relating to the 'Copy to clipboard' button.\n     *\n     * @type {string}\n     */\n    clipboardbutton: '.btn-clipboard',\n\n    /**\n     * A selector relating to the content copied by the 'Copy to clipboard' button.\n     *\n     * @type {string}\n     */\n    clipboardcontent: 'figure.highlight, div.highlight',\n\n    /**\n     * A selector relating to the 'Search' text input.\n     *\n     * @type {string}\n     */\n    searchinput: '[data-region=\"docsearch\"] input',\n\n    /**\n     * A selector relating to the 'Search' submit btton.\n     *\n     * @type {string}\n     */\n    searchsubmit: '[data-region=\"docsearch\"] .btn-submit',\n\n    /**\n     * A selector relating to the search dropdown menu.\n     *\n     * @type {string}\n     */\n    dropdownmenu: '[data-region=\"docsearch\"] .dropdown-menu',\n\n    /**\n     * A selector relating to the entire Component Library content region.\n     *\n     * @type {string}\n     */\n    componentlibrary: '[data-region=\"componentlibrary\"]',\n\n    /**\n     * A selector relating to JS Code which is to be run for examples to function.\n     *\n     * @type {string}\n     */\n    jscode: '[data-action=\"runjs\"]',\n\n    /**\n     * A selector relating to Mustache Template code regions.\n     *\n     * @type {string}\n     */\n    mustachecode: '[data-region=\"mustachecode\"]',\n\n    /**\n     * A selector relating to raw Mustache content regions.\n     *\n     * @type {string}\n     */\n    mustacherawcontext: '[data-region=\"rawcontext\"]',\n\n    /**\n     * A selector relating to rendered Mustache content regions.\n     *\n     * @type {string}\n     */\n    mustacherendered: '[data-region=\"mustacherendered\"]',\n\n    /**\n     * A selector relating to Mustache source code regions.\n     *\n     * @type {string}\n     */\n    mustachesource: '[data-region=\"mustachesource\"]',\n\n    /**\n     * A selector relating to Mustache context regions.\n     *\n     * @type {string}\n     */\n    mustachecontext: '[data-region=\"mustachecontext\"]',\n};\n"],"names":["clipboardbutton","clipboardcontent","searchinput","searchsubmit","dropdownmenu","componentlibrary","jscode","mustachecode","mustacherawcontext","mustacherendered","mustachesource","mustachecontext"],"mappings":"iLAsBe,CAMXA,gBAAiB,iBAOjBC,iBAAkB,kCAOlBC,YAAa,kCAObC,aAAc,wCAOdC,aAAc,2CAOdC,iBAAkB,mCAOlBC,OAAQ,wBAORC,aAAc,+BAOdC,mBAAoB,6BAOpBC,iBAAkB,mCAOlBC,eAAgB,iCAOhBC,gBAAiB"}

admin/tool/componentlibrary/amd/src/clipboardwrapper.js

@@ -0,0 +1,46 @@
+// This file is part of Moodle - http://moodle.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 <http://www.gnu.org/licenses/>.
+
+/**
+ * Wrapper to ensure that all Hugo example snippets have a "Copy to clipboard" button.
+ *
+ * @module     tool_componentlibrary/clipboardwrapper
+ * @copyright  2021 Bas Brands <bas@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+import 'core/copy_to_clipboard';
+import selectors from 'tool_componentlibrary/selectors';
+import Templates from 'core/templates';
+
+let idCounter = 0;
+
+/**
+ * Initialise the clipboard button on all reusable code.
+ *
+ * @method
+ */
+export const clipboardWrapper = async() => {
+    document.querySelectorAll(selectors.clipboardcontent).forEach(element => {
+        if (!element.id) {
+            element.id = `tool_componentlibrary_content-${idCounter++}`;
+        }
+        Templates.renderForPromise('tool_componentlibrary/clipboardbutton', {clipboardtarget: `#${element.id} code`})
+        .then(({html, js}) => {
+            Templates.prependNodeContents(element, html, js);
+            return;
+        })
+        .catch();
+    });
+};

admin/tool/componentlibrary/amd/src/jsrunner.js

@@ -0,0 +1,42 @@
+// This file is part of Moodle - http://moodle.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 <http://www.gnu.org/licenses/>.
+
+/**
+ * Run the JS required for example code to work in the library.
+ *
+ * @module     tool_componentlibrary/jsrunner
+ * @copyright  2021 Bas Brands <bas@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import selectors from 'tool_componentlibrary/selectors';
+
+/**
+ * The Hugo shortcodes changes the JavaScript in markdownfiles from
+ * the Moodle mustache {{js}} code... {{/js}} syntax into a div with
+ * attribute data-action='runjs'. See hugo/site/layouts/shortcodes/example.html.
+ * This code fetches and runs the JavaScript content.
+ *
+ * @method
+ */
+export const jsRunner = () => {
+    const compLib = document.querySelector(selectors.componentlibrary);
+    compLib.querySelectorAll(selectors.jscode).forEach(runjs => {
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.innerHTML = runjs.textContent;
+        document.head.appendChild(script);
+    });
+};

admin/tool/componentlibrary/amd/src/loader.js

@@ -0,0 +1,39 @@
+// This file is part of Moodle - http://moodle.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 <http://www.gnu.org/licenses/>.
+
+/**
+ * This initialises the component library JS
+ *
+ * @module     tool_componentlibrary/loader
+ * @copyright  2021 Bas Brands <bas@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import {mustache} from './mustache';
+import {jsRunner} from './jsrunner';
+import {clipboardWrapper} from './clipboardwrapper';
+import {search} from './search';
+
+/**
+ * Load all the component library JavaScript.
+ *
+ * @param {string} jsonFile Full path to the JSON file with the search DB.
+ */
+export const init = jsonFile => {
+    mustache();
+    jsRunner();
+    clipboardWrapper();
+    search(jsonFile);
+};

admin/tool/componentlibrary/amd/src/mustache.js

@@ -0,0 +1,110 @@
+// This file is part of Moodle - http://moodle.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 <http://www.gnu.org/licenses/>.
+
+/**
+ * Render mustache template examples within the component library.
+ *
+ * @module     tool_componentlibrary/mustache
+ * @copyright  2021 Bas Brands <bas@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import selectors from 'tool_componentlibrary/selectors';
+import Ajax from 'core/ajax';
+import Config from 'core/config';
+import Templates from 'core/templates';
+import Log from 'core/log';
+import Notification from 'core/notification';
+
+/**
+ * Handle a template loaded response.
+ *
+ * @method
+ * @private
+ * @param {String} container The template container
+ * @param {String} templateName The template name
+ * @param {String} context Data for the template.
+ */
+const renderTemplate = async(container, templateName, context) => {
+    try {
+        context = JSON.parse(context);
+    } catch (e) {
+        Log.debug('Could not parse json example context for template.');
+        Log.debug(e);
+    }
+
+    const {html, js} = await Templates.renderForPromise(templateName, context);
+
+    const rendercontainer = container.querySelector(selectors.mustacherendered);
+
+    // Load the rendered content in the renderer tab.
+    await Templates.replaceNodeContents(rendercontainer, html, js);
+};
+
+/**
+ * Load the a template source from Moodle.
+ *
+ * @method
+ * @private
+ * @param {String} container The template container
+ */
+const loadTemplate = container => {
+        const sourcecontainer = container.querySelector(selectors.mustachesource);
+        const contextcontainer = container.querySelector(selectors.mustachecontext);
+        const templateName = container.dataset.template;
+        let context = container.querySelector(selectors.mustacherawcontext).textContent;
+
+        const parts = templateName.split('/');
+        const component = parts.shift();
+        const name = parts.join('/');
+
+        const request = {
+            methodname: 'core_output_load_template',
+            args: {
+                component: component,
+                template: name,
+                themename: Config.theme,
+                includecomments: true
+            }
+        };
+
+        Ajax.call([request])[0]
+            .done((source) => {
+                // Load the source template in Template tab.
+                sourcecontainer.textContent = source;
+                if (!context) {
+                    const example = source.match(/Example context \(json\):([\s\S]+?)(}})/);
+                    context = example[1];
+                    // Load the variables in the Variables tab.
+                    const precontainer = document.createElement("pre");
+                    precontainer.innerHTML = JSON.stringify(JSON.parse(context), null, 4);
+                    contextcontainer.parentNode.appendChild(precontainer);
+                    contextcontainer.classList.add('d-none');
+                }
+                renderTemplate(container, templateName, context);
+            })
+            .fail(Notification.exception);
+};
+
+/**
+ * Initialize the module.
+ *
+ * @method
+ */
+export const mustache = () => {
+    document.querySelectorAll(selectors.mustachecode).forEach((container) => {
+        loadTemplate(container);
+    });
+};

admin/tool/componentlibrary/amd/src/search.js

@@ -0,0 +1,165 @@
+// This file is part of Moodle - http://moodle.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 <http://www.gnu.org/licenses/>.
+
+/**
+ * Interface to the Lunr search engines.
+ *
+ * @module     tool_componentlibrary/search
+ * @copyright  2021 Bas Brands <bas@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import lunrJs from 'tool_componentlibrary/lunr';
+import selectors from 'tool_componentlibrary/selectors';
+import Log from 'core/log';
+import Notification from 'core/notification';
+import {enter, escape} from 'core/key_codes';
+
+let lunrIndex = null;
+let pagesIndex = null;
+
+/**
+ * Get the jsonFile that is generated when the component library is build.
+ *
+ * @method
+ * @private
+ * @param {String} jsonFile the URL to the json file.
+ * @return {Object}
+ */
+const fetchJson = async(jsonFile) => {
+    const response = await fetch(jsonFile);
+
+    if (!response.ok) {
+        Log.debug(`Error getting Hugo index file: ${response.status}`);
+    }
+
+    return await response.json();
+};
+
+/**
+ * Initiate lunr on the data in the jsonFile and add the jsondata to the pagesIndex
+ *
+ * @method
+ * @private
+ * @param {String} jsonFile the URL to the json file.
+ */
+const initLunr = jsonFile => {
+    fetchJson(jsonFile).then(jsondata => {
+        pagesIndex = jsondata;
+        // Using an arrow function here will break lunr on compile.
+        lunrIndex = lunrJs(function() {
+            this.ref('uri');
+            this.field('title', {boost: 10});
+            this.field('content');
+            this.field('tags', {boost: 5});
+            jsondata.forEach(p => {
+                this.add(p);
+            });
+        });
+        return null;
+    }).catch(Notification.exception);
+};
+
+/**
+ * Setup the eventlistener to listen on user input on the search field.
+ *
+ * @method
+ * @private
+ */
+const initUI = () => {
+    const searchInput = document.querySelector(selectors.searchinput);
+    searchInput.addEventListener('keyup', e => {
+        const query = e.currentTarget.value;
+        if (query.length < 2) {
+            document.querySelector(selectors.dropdownmenu).classList.remove('show');
+            return;
+        }
+        renderResults(searchIndex(query));
+    });
+    searchInput.addEventListener('keydown', e => {
+        if (e.keyCode === enter) {
+            e.preventDefault();
+        }
+        if (e.keyCode === escape) {
+            searchInput.value = '';
+        }
+    });
+};
+
+/**
+ * Trigger a search in lunr and transform the result.
+ *
+ * @method
+ * @private
+ * @param  {String} query
+ * @return {Array} results
+ */
+const searchIndex = query => {
+    // Find the item in our index corresponding to the lunr one to have more info
+    // Lunr result:
+    //  {ref: "/section/page1", score: 0.2725657778206127}
+    // Our result:
+    //  {title:"Page1", href:"/section/page1", ...}
+
+    return lunrIndex.search(query + ' ' + query + '*').map(result => {
+        return pagesIndex.filter(page => {
+            return page.uri === result.ref;
+        })[0];
+    });
+};
+
+/**
+ * Display the 10 first results
+ *
+ * @method
+ * @private
+ * @param {Array} results to display
+ */
+const renderResults = results => {
+    const dropdownMenu = document.querySelector(selectors.dropdownmenu);
+    if (!results.length) {
+        dropdownMenu.classList.remove('show');
+        return;
+    }
+
+    // Clear out the results.
+    dropdownMenu.innerHTML = '';
+
+    const baseUrl = M.cfg.wwwroot + '/admin/tool/componentlibrary/docspage.php';
+
+    // Only show the ten first results
+    results.slice(0, 10).forEach(function(result) {
+        const link = document.createElement("a");
+        const chapter = result.uri.split('/')[1];
+        link.appendChild(document.createTextNode(`${chapter} > ${result.title}`));
+        link.classList.add('dropdown-item');
+        link.href = baseUrl + result.uri;
+
+        dropdownMenu.appendChild(link);
+    });
+
+    dropdownMenu.classList.add('show');
+};
+
+/**
+ * Initialize module.
+ *
+ * @method
+ * @param {String} jsonFile Full path to the search DB json file.
+ */
+export const search = jsonFile => {
+    initLunr(jsonFile);
+    initUI();
+};

admin/tool/componentlibrary/amd/src/selectors.js

@@ -0,0 +1,107 @@
+// This file is part of Moodle - http://moodle.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 <http://www.gnu.org/licenses/>.
+
+/**
+ * Selectors for the component library
+ *
+ * @module     tool_componentlibrary/selectors
+ * @copyright  2021 Bas Brands <bas@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+export default {
+    /**
+     * A selector relating to the 'Copy to clipboard' button.
+     *
+     * @type {string}
+     */
+    clipboardbutton: '.btn-clipboard',
+
+    /**
+     * A selector relating to the content copied by the 'Copy to clipboard' button.
+     *
+     * @type {string}
+     */
+    clipboardcontent: 'figure.highlight, div.highlight',
+
+    /**
+     * A selector relating to the 'Search' text input.
+     *
+     * @type {string}
+     */
+    searchinput: '[data-region="docsearch"] input',
+
+    /**
+     * A selector relating to the 'Search' submit btton.
+     *
+     * @type {string}
+     */
+    searchsubmit: '[data-region="docsearch"] .btn-submit',
+
+    /**
+     * A selector relating to the search dropdown menu.
+     *
+     * @type {string}
+     */
+    dropdownmenu: '[data-region="docsearch"] .dropdown-menu',
+
+    /**
+     * A selector relating to the entire Component Library content region.
+     *
+     * @type {string}
+     */
+    componentlibrary: '[data-region="componentlibrary"]',
+
+    /**
+     * A selector relating to JS Code which is to be run for examples to function.
+     *
+     * @type {string}
+     */
+    jscode: '[data-action="runjs"]',
+
+    /**
+     * A selector relating to Mustache Template code regions.
+     *
+     * @type {string}
+     */
+    mustachecode: '[data-region="mustachecode"]',
+
+    /**
+     * A selector relating to raw Mustache content regions.
+     *
+     * @type {string}
+     */
+    mustacherawcontext: '[data-region="rawcontext"]',
+
+    /**
+     * A selector relating to rendered Mustache content regions.
+     *
+     * @type {string}
+     */
+    mustacherendered: '[data-region="mustacherendered"]',
+
+    /**
+     * A selector relating to Mustache source code regions.
+     *
+     * @type {string}
+     */
+    mustachesource: '[data-region="mustachesource"]',
+
+    /**
+     * A selector relating to Mustache context regions.
+     *
+     * @type {string}
+     */
+    mustachecontext: '[data-region="mustachecontext"]',
+};