first commit

lib/amd/build/local/reactive/basecomponent.min.js

@@ -0,0 +1,13 @@
+define("core/local/reactive/basecomponent",["exports","core/templates","core/local/reactive/overlay"],(function(_exports,_templates,_overlay){var obj;
+/**
+   * Reactive UI component base class.
+   *
+   * Each UI reactive component should extend this class to interact with a reactive state.
+   *
+   * @module     core/local/reactive/basecomponent
+   * @class     core/local/reactive/basecomponent
+   * @copyright  2020 Ferran Recio <ferran@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_templates=(obj=_templates)&&obj.__esModule?obj:{default:obj};return _exports.default=class{constructor(descriptor){if(void 0===descriptor.element||!(descriptor.element instanceof HTMLElement))throw Error("Reactive components needs a main DOM element to dispatch events");this.element=descriptor.element,this.eventHandlers=new Map([]),this.eventListeners=[],this.selectors={},this.events=this.constructor.getEvents(),this.create(descriptor),void 0!==descriptor.selectors&&this.addSelectors(descriptor.selectors),void 0===descriptor.reactive?this.element.dispatchEvent(new CustomEvent("core/reactive:requestRegistration",{bubbles:!0,detail:{component:this}})):(this.reactive=descriptor.reactive,this.reactive.registerComponent(this),this.addEventListener(this.element,"core/reactive:requestRegistration",(event=>{var _event$detail;null!=event&&null!==(_event$detail=event.detail)&&void 0!==_event$detail&&_event$detail.component&&(event.stopPropagation(),this.registerChildComponent(event.detail.component))})))}static getEvents(){return{}}create(descriptor){}destroy(){}getWatchers(){return[]}stateReady(){}getElement(query,dataId){if(void 0===query&&void 0===dataId)return this.element;const dataSelector=dataId?"[data-id='".concat(dataId,"']"):"",selector="".concat(null!=query?query:"").concat(dataSelector);return this.element.querySelector(selector)}getElements(query,dataId){const dataSelector=dataId?"[data-id='".concat(dataId,"']"):"",selector="".concat(null!=query?query:"").concat(dataSelector);return this.element.querySelectorAll(selector)}addSelectors(newSelectors){for(const[selectorName,selector]of Object.entries(newSelectors))this.selectors[selectorName]=selector}getSelector(selectorName){return this.selectors[selectorName]}dispatchEvent(eventName,detail){this.element.dispatchEvent(new CustomEvent(eventName,{bubbles:!0,detail:detail}))}renderComponent(target,file,data){return new Promise(((resolve,reject)=>{target.addEventListener("ComponentRegistration:Success",(_ref=>{let{detail:detail}=_ref;resolve(detail.component)})),target.addEventListener("ComponentRegistration:Fail",(()=>{reject("Registration of ".concat(file," fails."))})),_templates.default.renderForPromise(file,data).then((_ref2=>{let{html:html,js:js}=_ref2;return _templates.default.replaceNodeContents(target,html,js),!0})).catch((error=>{throw reject("Rendering of ".concat(file," throws an error.")),error}))}))}addEventListener(target,type,listener){let bindListener=this.eventHandlers.get(listener);void 0===bindListener&&(bindListener=listener.bind(this),this.eventHandlers.set(listener,bindListener)),target.addEventListener(type,bindListener),this.eventListeners.push({target:target,type:type,bindListener:bindListener})}removeEventListener(target,type,listener){let bindListener=this.eventHandlers.get(listener);void 0!==bindListener&&target.removeEventListener(type,bindListener)}removeAllEventListeners(){this.eventListeners.forEach((_ref3=>{let{target:target,type:type,bindListener:bindListener}=_ref3;target.removeEventListener(type,bindListener)})),this.eventListeners=[]}remove(){this.unregister(),this.element.remove()}unregister(){this.reactive.unregisterComponent(this),this.removeAllEventListeners(),this.destroy()}dispatchRegistrationSuccess(){void 0!==this.element.parentNode&&this.element.parentNode.dispatchEvent(new CustomEvent("ComponentRegistration:Success",{bubbles:!1,detail:{component:this}}))}dispatchRegistrationFail(){void 0!==this.element.parentNode&&this.element.parentNode.dispatchEvent(new CustomEvent("ComponentRegistration:Fail",{bubbles:!1,detail:{component:this}}))}registerChildComponent(component){component.reactive=this.reactive,this.reactive.registerComponent(component)}set locked(locked){this.setElementLocked(this.element,locked)}get locked(){return this.getElementLocked(this.element)}setElementLocked(target,locked){target.dataset.locked=null!=locked&&locked,locked?(target.style.pointerEvents="none",target.style.userSelect="none",target.hasAttribute("draggable")&&target.setAttribute("draggable",!1),target.setAttribute("aria-busy",!0)):(target.style.pointerEvents=null,target.style.userSelect=null,target.hasAttribute("draggable")&&target.setAttribute("draggable",!0),target.setAttribute("aria-busy",!1))}getElementLocked(target){var _target$dataset$locke;return null!==(_target$dataset$locke=target.dataset.locked)&&void 0!==_target$dataset$locke&&_target$dataset$locke}async addOverlay(definition,target){var _definition$classes;this._overlay&&this.removeOverlay(),this._overlay=await(0,_overlay.addOverlay)({content:definition.content,css:null!==(_definition$classes=definition.classes)&&void 0!==_definition$classes?_definition$classes:"file-drop-zone"},null!=target?target:this.element)}removeOverlay(){this._overlay&&((0,_overlay.removeOverlay)(this._overlay),this._overlay=null)}removeAllOverlays(){(0,_overlay.removeAllOverlays)()}},_exports.default}));
+
+//# sourceMappingURL=basecomponent.min.js.map

lib/amd/build/local/reactive/debug.min.js

@@ -0,0 +1,32 @@
+define("core/local/reactive/debug",["exports","core/local/reactive/reactive","core/log"],(function(_exports,_reactive,_log){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+/**
+   * Reactive module debug tools.
+   *
+   * @module     core/local/reactive/debug
+   * @copyright  2021 Ferran Recio <ferran@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.initDebug=void 0,_reactive=_interopRequireDefault(_reactive),_log=_interopRequireDefault(_log);const reactiveInstances={},reactiveDebuggers={};
+/**
+   * Reactive module debug tools.
+   *
+   * If debug is enabled, this reactive module will spy all the reactive instances and keep a record
+   * of the changes and components they have.
+   *
+   * It is important to note that the Debug class is also a Reactive module. The debug instance keeps
+   * the reactive instances data as its own state. This way it is possible to implement development tools
+   * that whatches this data.
+   *
+   * @class      core/reactive/local/reactive/debug/Debug
+   * @copyright  2021 Ferran Recio <ferran@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */
+class Debug extends _reactive.default{setInitialState(stateData){super.setInitialState(stateData),_log.default.debug('Debug module "M.reactive" loaded.')}get list(){return JSON.parse(JSON.stringify(this.state.reactives))}registerNewInstance(instance){var _instance$name;let name=null!==(_instance$name=instance.name)&&void 0!==_instance$name?_instance$name:"instance".concat(this.state.reactives.length);name=name.replace(/\W/g,""),_log.default.debug('Registering new reactive instance "M.reactive.'.concat(name,'"')),reactiveInstances[name]=instance,reactiveDebuggers[name]=new DebugInstance(reactiveInstances[name]),this.dispatch("putInstance",name,instance);const refreshMethod=()=>{this.dispatch("putInstance",name,instance)};instance.target.addEventListener("readmode:on",refreshMethod),instance.target.addEventListener("readmode:off",refreshMethod),instance.target.addEventListener("registerComponent:success",refreshMethod),instance.target.addEventListener("transaction:end",refreshMethod);instance.target.addEventListener("transaction:start",(_ref=>{let{detail:detail}=_ref;const changes=null==detail?void 0:detail.changes;this.dispatch("lastTransaction",name,changes)}))}debug(name){return reactiveDebuggers[name]}}class Mutations{putInstance(stateManager,name,instance){const state=stateManager.state;stateManager.setReadOnly(!1),state.reactives.has(name)?(state.reactives.get(name).countcomponents=instance.components.length,state.reactives.get(name).readOnly=instance.stateManager.readonly,state.reactives.get(name).modified=(new Date).getTime()):state.reactives.add({id:name,countcomponents:instance.components.length,readOnly:instance.stateManager.readonly,lastChanges:[],modified:(new Date).getTime()}),stateManager.setReadOnly(!0)}lastTransaction(stateManager,name,changes){if(!changes||0===changes.length)return;const state=stateManager.state,lastChanges=["transaction:start"];changes.forEach((change=>{lastChanges.push(change.eventName)})),lastChanges.push("transaction:end"),stateManager.setReadOnly(!1),state.reactives.get(name).lastChanges=lastChanges,stateManager.setReadOnly(!0)}}
+/**
+   * Class used to debug a specific instance and manipulate the state from the JS console.
+   *
+   * @class      core/reactive/local/reactive/debug/DebugInstance
+   * @copyright  2021 Ferran Recio <ferran@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */class DebugInstance{constructor(instance){this.instance=instance,void 0===instance._reactiveDebugData&&(instance._reactiveDebugData={highlighted:!1})}set readOnly(value){this.instance.stateManager.setReadOnly(value)}get readOnly(){return this.instance.stateManager.readonly}get state(){return this.instance.state}set highlight(value){this.instance._reactiveDebugData.highlighted=value,this.instance.components.forEach((_ref2=>{let{element:element}=_ref2;const border=value?"thick solid #0000FF":"";element.style.border=border}))}get highlight(){return this.instance._reactiveDebugData.highlighted}get components(){return[...this.instance.components]}get changes(){const result=[];return this.instance.stateManager.eventsToPublish.forEach((element=>{result.push(element.eventName)})),result}async dispatch(){this.instance.dispatch(...arguments)}get elements(){const result=[];return this.instance.components.forEach((_ref3=>{let{element:element}=_ref3;result.push(element)})),result}get stateData(){return JSON.parse(JSON.stringify(this.state))}processUpdates(updates){this.instance.stateManager.processUpdates(updates)}}function dispatchStateChangedEvent(detail,target){void 0===target&&(target=document),target.dispatchEvent(new CustomEvent("core_reactive_debug:stateChanged",{bubbles:!0,detail:detail}))}_exports.initDebug=()=>{const debug=new Debug({name:"CoreReactiveDebug",eventName:"core_reactive_debug:stateChanged",eventDispatch:dispatchStateChangedEvent,mutations:new Mutations,state:{reactives:[]}});return reactiveDebuggers.registerNewInstance=debug.registerNewInstance.bind(debug),{debug:debug,debuggers:reactiveDebuggers}}}));
+
+//# sourceMappingURL=debug.min.js.map

lib/amd/build/local/reactive/logger.min.js

@@ -0,0 +1,17 @@
+define("core/local/reactive/logger",["exports","core/toast"],(function(_exports,_toast){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default=
+/**
+   * Default reactive mutations logger class.
+   *
+   * This logger is used by default by the StateManager to log mutation feedbacks
+   * and actions. By default, feedbacks will be displayed as a toast. However, the
+   * reactive instance can provide alternative loggers to provide advanced logging
+   * capabilities.
+   *
+   * @module     core/local/reactive/logger
+   * @class      Logger
+   * @copyright  2023 Ferran Recio <ferran@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */
+class{constructor(){this._debug=!1}add(entry){entry.feedbackMessage&&(0,_toast.add)(entry.feedbackMessage)}},_exports.default}));
+
+//# sourceMappingURL=logger.min.js.map

lib/amd/build/local/reactive/logger.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.min.js","sources":["../../../src/local/reactive/logger.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 * Default reactive mutations logger class.\n *\n * This logger is used by default by the StateManager to log mutation feedbacks\n * and actions. By default, feedbacks will be displayed as a toast. However, the\n * reactive instance can provide alternative loggers to provide advanced logging\n * capabilities.\n *\n * @module     core/local/reactive/logger\n * @class      Logger\n * @copyright  2023 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * Logger entry structure.\n *\n * @typedef {object} LoggerEntry\n * @property {string} feedbackMessage Feedback message.\n */\n\nimport {add as addToast} from 'core/toast';\n\n/**\n * Default reactive mutations logger class.\n * @class Logger\n */\nexport default class Logger {\n    /**\n     * Constructor.\n     */\n    constructor() {\n        this._debug = false;\n    }\n\n    /**\n     * Add a log entry.\n     * @param {LoggerEntry} entry Log entry.\n     */\n    add(entry) {\n        if (entry.feedbackMessage) {\n            addToast(entry.feedbackMessage);\n        }\n    }\n}\n"],"names":["constructor","_debug","add","entry","feedbackMessage"],"mappings":";;;;;;;;;;;;;;MA8CIA,mBACSC,QAAS,EAOlBC,IAAIC,OACIA,MAAMC,gCACGD,MAAMC"}

lib/amd/build/local/reactive/overlay.min.js

@@ -0,0 +1,13 @@
+define("core/local/reactive/overlay",["exports","core/templates","core/prefetch"],(function(_exports,_templates,_prefetch){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}
+/**
+   * Element overlay methods.
+   *
+   * This module is used to create overlay information on components. For example
+   * to generate or destroy file drop-zones.
+   *
+   * @module     core/local/reactive/overlay
+   * @copyright  2022 Ferran Recio <ferran@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.removeOverlay=_exports.removeAllOverlays=_exports.addOverlay=void 0,_templates=_interopRequireDefault(_templates),_prefetch=_interopRequireDefault(_prefetch);_prefetch.default.prefetchTemplate("core/local/reactive/overlay");const selectors_OVERLAY="[data-overlay]",selectors_REPOSITION="[data-overlay-dynamic]",selectors_NAVBAR="nav.navbar.fixed-top";_exports.addOverlay=async(definition,parent)=>{var _definition$classes;definition.content&&"string"!=typeof definition.content&&(definition.content=await definition.content),definition.icon&&"string"!=typeof definition.icon&&(definition.icon=await definition.icon);const data={content:definition.content,css:null!==(_definition$classes=definition.classes)&&void 0!==_definition$classes?_definition$classes:"file-drop-zone"},{html:html,js:js}=await _templates.default.renderForPromise("core/local/reactive/overlay",data);_templates.default.appendNodeContents(parent,html,js);const overlay=parent.querySelector(selectors_OVERLAY);return rePositionPreviewInfoElement(overlay),init(),overlay};const removeOverlay=overlay=>{var _overlay$dataset;overlay&&overlay.parentNode&&(null!==(_overlay$dataset=overlay.dataset)&&void 0!==_overlay$dataset&&_overlay$dataset.overlayPosition&&delete overlay.parentNode.style.position,overlay.parentNode.removeChild(overlay))};_exports.removeOverlay=removeOverlay;_exports.removeAllOverlays=()=>{document.querySelectorAll(selectors_OVERLAY).forEach((overlay=>{removeOverlay(overlay)}))};const rePositionPreviewInfoElement=function(overlay){var _overlay$parentNode,_overlay$parentNode$s;if(!overlay)throw new Error("Inexistent overlay element");null!==(_overlay$parentNode=overlay.parentNode)&&void 0!==_overlay$parentNode&&null!==(_overlay$parentNode$s=_overlay$parentNode.style)&&void 0!==_overlay$parentNode$s&&_overlay$parentNode$s.position||(overlay.parentNode.style.position="relative",overlay.dataset.overlayPosition="true");const target=overlay.querySelector(selectors_REPOSITION);if(!target)return;const rect=overlay.getBoundingClientRect(),sectionHeight=parseInt(window.getComputedStyle(overlay).height,10),sectionOffset=rect.top,previewHeight=parseInt(window.getComputedStyle(target).height,10)+2*parseInt(window.getComputedStyle(target).padding,10);let top,bottom;if(sectionOffset<0)if(sectionHeight+sectionOffset>=previewHeight){let offSetTop=0-sectionOffset;const navBar=document.querySelector(selectors_NAVBAR);navBar&&(offSetTop+=navBar.offsetHeight),top=offSetTop+"px",bottom="unset"}else top="unset",bottom=0;else top=0,bottom="unset";target.style.top=top,target.style.bottom=bottom},init=()=>{document.addEventListener("scroll",(()=>{document.querySelectorAll(selectors_OVERLAY).forEach((overlay=>{rePositionPreviewInfoElement(overlay)}))}),!0)}}));
+
+//# sourceMappingURL=overlay.min.js.map

lib/amd/build/local/reactive/srlogger.min.js

@@ -0,0 +1,3 @@
+define("core/local/reactive/srlogger",["exports","core/local/reactive/logger"],(function(_exports,_logger){var obj;Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_logger=(obj=_logger)&&obj.__esModule?obj:{default:obj};class SRLogger extends _logger.default{add(entry){if(entry.feedbackMessage){let loggerFeedback=document.getElementById(SRLogger.liveRegionId);loggerFeedback||(loggerFeedback=document.createElement("div"),loggerFeedback.id=SRLogger.liveRegionId,loggerFeedback.classList.add("sr-only"),loggerFeedback.setAttribute("aria-live","polite"),document.body.append(loggerFeedback)),loggerFeedback.innerHTML=entry.feedbackMessage,setTimeout((()=>{loggerFeedback.innerHTML=""}),4e3)}}}return _exports.default=SRLogger,function(obj,key,value){key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value}(SRLogger,"liveRegionId","sr-logger-feedback-container"),_exports.default}));
+
+//# sourceMappingURL=srlogger.min.js.map

lib/amd/build/local/reactive/srlogger.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"srlogger.min.js","sources":["../../../src/local/reactive/srlogger.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 * Screen reader-only (sr-only) reactive mutations logger class.\n *\n * This logger can be used by the StateManager to log mutation feedbacks and actions.\n * The feedback messages logged by this logger will be rendered in a sr-only, ARIA live region.\n *\n * @module     core/local/reactive/srlogger\n * @class      SRLogger\n * @copyright  2023 Jun Pataleta <jun@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Logger from 'core/local/reactive/logger';\n\n/**\n * Logger entry structure.\n *\n * @typedef {object} LoggerEntry\n * @property {string} feedbackMessage Feedback message.\n */\n\n/**\n * Screen reader-only (sr-only) reactive mutations logger class.\n *\n * @class SRLogger\n */\nexport default class SRLogger extends Logger {\n    /**\n     * The element ID of the ARIA live region where the logger feedback will be rendered.\n     *\n     * @type {string}\n     */\n    static liveRegionId = 'sr-logger-feedback-container';\n\n    /**\n     * Add a log entry.\n     * @param {LoggerEntry} entry Log entry.\n     */\n    add(entry) {\n        if (entry.feedbackMessage) {\n            // Fetch or create an ARIA live region that will serve as the container for the logger feedback.\n            let loggerFeedback = document.getElementById(SRLogger.liveRegionId);\n            if (!loggerFeedback) {\n                loggerFeedback = document.createElement('div');\n                loggerFeedback.id = SRLogger.liveRegionId;\n                loggerFeedback.classList.add('sr-only');\n                loggerFeedback.setAttribute('aria-live', 'polite');\n                document.body.append(loggerFeedback);\n            }\n            // Set the ARIA live region's contents with the feedback.\n            loggerFeedback.innerHTML = entry.feedbackMessage;\n\n            // Clear the feedback message after 4 seconds to avoid the contents from being read out in case the user navigates\n            // to this region. This is similar to the default timeout of toast messages before disappearing from view.\n            setTimeout(() => {\n                loggerFeedback.innerHTML = '';\n            }, 4000);\n        }\n    }\n}\n"],"names":["SRLogger","Logger","add","entry","feedbackMessage","loggerFeedback","document","getElementById","liveRegionId","createElement","id","classList","setAttribute","body","append","innerHTML","setTimeout"],"mappings":"iQAyCqBA,iBAAiBC,gBAYlCC,IAAIC,UACIA,MAAMC,gBAAiB,KAEnBC,eAAiBC,SAASC,eAAeP,SAASQ,cACjDH,iBACDA,eAAiBC,SAASG,cAAc,OACxCJ,eAAeK,GAAKV,SAASQ,aAC7BH,eAAeM,UAAUT,IAAI,WAC7BG,eAAeO,aAAa,YAAa,UACzCN,SAASO,KAAKC,OAAOT,iBAGzBA,eAAeU,UAAYZ,MAAMC,gBAIjCY,YAAW,KACPX,eAAeU,UAAY,KAC5B,kLA9BMf,wBAMK"}