String.prototype.prettyHashCode = function() { var hash = 0; for (var i = 0; i < this.length; i++) { var char = this.charCodeAt(i); hash = ((hash<<5)-hash)+char; hash = hash & hash; } return 'h' + Math.abs(hash); } const defined = '__ophs_defined'; const htmlProperties = ["name", "id"]; const htmlAttrs = ["accept","accept-charset","accesskey","action","align","alt","async","autocomplete","autofocus","autoplay","bgcolor","border","charset","checked","cite","color","cols","colspan","content","contenteditable","controls","coords","data","datetime","defer","dir","disabled","download","draggable","enctype","for","form","headers","height","hidden","high","href","hreflang","http-equiv","id","integrity","ismap","itemprop","keytype","kind","label","lang","list","loop","low","max","maxlength","media","method","min","multiple","muted","name","novalidate","open","optimum","pattern","placeholder","poster","preload","radiogroup","readonly","rel","required","reversed","rows","rowspan","sandbox","scope","scoped","selected","shape","size","sizes","span","spellcheck","src","srcdoc","srclang","srcset","start","step","style","tabindex","target","title","translate","type","usemap","value","width","wrap"]; const htmlEvents = ["onabort", "onautocomplete", "onautocompleteerror", "onblur", "oncancel", "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragexit", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onseeked", "onseeking", "onselect", "onshow", "onsort", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "ontoggle", "onvolumechange", "onwaiting"]; const ophAttrs = ["_name"]; class ___render___ { static __placedOphoseInstances = []; /** * Renders an ophose object to a DOM node. * @param {*} oph the ophose object to render * @returns {Node} the DOM node */ static toNode(oph, shouldBePlaced = false) { if(oph === undefined || oph === null || oph === false) return document.createTextNode(""); if(!___render___.isOphoseObject(oph)) { console.error("___render___.toNode: Invalid ophose object.", oph); return undefined; } // Adding HTML & Event attributes to a node from object const giveAttrsAndEventsToNode = (element, node) => { for (let attribute in element) { if (ophAttrs.includes(attribute)) { node.setAttribute(attribute, element[attribute]); continue; } if(element[attribute] === defined) { node.setAttribute(attribute, ''); } if (element.hasOwnProperty(attribute)) { if (element[attribute] !== undefined && htmlAttrs.includes(attribute)) { node.setAttribute(attribute, element[attribute]); if(htmlProperties.includes(attribute)) node[attribute] = element[attribute]; continue; } if (htmlEvents.includes(attribute)) { node[attribute] = element[attribute]; continue; } if (element.className || element.class) { if (element.class) element.className = element.class; for (let className of element.className.split(" ")) { if(className == "") continue; node.classList.add(className); } } } } }; if (Array.isArray(oph)) { console.error("___render___.toNode: Invalid ophose object."); return undefined; }; if(oph instanceof Node) { return oph; } // Case: oph is a string if(typeof oph == "string" || typeof oph == "number") { return document.createTextNode(oph); } // Case: oph is a component if (oph instanceof ___component___) { let rendered = oph.render(); if(rendered instanceof PlacedLive) { rendered.selfClassName = oph.__getComponentUniqueId(); } let node = ___render___.toNode(rendered, shouldBePlaced); let nodeToGiveAttrsAndEvents = node; if(oph.__propsOn) { // loop on children to find the input for (let child of node.children) { let name = child.getAttribute('_name'); if(!name) continue; if(name == oph.__propsOn) { nodeToGiveAttrsAndEvents = child; break; } } } giveAttrsAndEventsToNode(oph.props, nodeToGiveAttrsAndEvents); if (shouldBePlaced) { oph.__place(node); ___render___.__placedOphoseInstances.push(oph); node['o'] = oph; } return node; } // Case: oph is a Live if (oph instanceof Live) { let textNode = document.createTextNode(oph.get()); oph.__placedLiveTextNodes.push(textNode); return textNode; } // Case: oph is a placed live (with callback so on) if (oph instanceof PlacedLive) { let lives = oph.lives; let callback = oph.callback; let args = lives.map((live) => live.get()); let newOph = callback(...args); let node = ___render___.toNode(newOph, shouldBePlaced); oph.node = node; if(oph.selfClassName) oph.node.classList.add(oph.selfClassName); return node; } // Case Default: oph is a dict if (typeof oph == "object") { let ophNode = document.createElement(oph._); if(oph.c) oph.children = oph.c; if (oph.children) { if(Array.isArray(oph.children)){ for (let child of oph.children) { if (Array.isArray(child)) { for (let childChild of child) { let childNode = ___render___.toNode(childChild, shouldBePlaced); if(childNode) { ophNode.appendChild(childNode); } } continue; } let childNode = ___render___.toNode(child, shouldBePlaced); if(childNode) { ophNode.appendChild(childNode); } } } else { let childNode = ___render___.toNode(oph.children, shouldBePlaced); if(childNode) { ophNode.appendChild(childNode); } } } if (oph.text) { ophNode.textContent = oph.text; } giveAttrsAndEventsToNode(oph, ophNode); if (oph.html || oph.innerHTML) { ophNode.innerHTML = oph.html || oph.innerHTML; } return ophNode; } return undefined; } static isOphoseObject(object) { return typeof object == "string" || typeof object == "number" || object instanceof ___component___ || object instanceof Live || object instanceof PlacedLive || (typeof object == "object" && object._) || Array.isArray(object) || object instanceof Node; } } /** * Shortcut function to create an ophose object. * @param {string} tag the HTML tag * @param {object|string|number|Array|___component___|Live|PlacedLive|Node} propsOrChildren the props if object without '_' key, else children */ function _(tag, ...propsOrChildren) { let object = {_: tag}; let children = []; if(propsOrChildren[0] && !___render___.isOphoseObject(propsOrChildren[0])) { object = {...object, ...propsOrChildren.shift()}; } for(let arg of propsOrChildren) { if(Array.isArray(arg)) { children.push(...arg); continue; } children.push(arg); } if(children.length > 0) object.children = children; return object; };class ___import___ { static __imported = []; static __lastExport = undefined; static __fixedPath(path) { if(path.startsWith("@/")) path = path.replace("@/", ".ext/"); return path.trim().replaceAll("//", "/"); } static __use(path) { if(___import___.__imported.includes(path)) return; if(__OPH_APP_BUILD__) return; ___import___.__imported.push(path); ___script___.run(path); } /** * Imports once the class component * @param {string} path the path */ static useComponent(path) { ___import___.__use("/@component/" + ___import___.__fixedPath(path) + '.js'); } /** * Imports once the class module * @param {string} path the path */ static useModule(path) { ___import___.__use("/@module/" + ___import___.__fixedPath(path) + '.js'); } /** * Imports once the environment script or a component * @param {string} path the path */ static useEnvironment(path) { ___import___.__use(___import___.__fixedPath("/@envjs/" + path)); } /** * Imports once the CSS * @param {string} path the path */ static importCss(path) { let link = document.createElement("link"); link.rel = "stylesheet"; link.href = path; document.head.appendChild(link); } /** * Imports once the script * @param {string} path the path */ static importScript(path) { $.ajax({ url: path, dataType: "script", async: false }); } } const importCss = ___import___.importCss; const importScript = ___import___.importScript; const oimpc = ___import___.useComponent; const oimpm = ___import___.useModule; const oimpe = ___import___.useEnvironment;;class ___script___ { static run(url, asynchronous = false, s = null, e = null) { $.ajax({ url: url, dataType: "script", async: asynchronous, success: s, error: e }); } };var page = undefined; class ___app___ { static __base = undefined; static __$nodePage; static __$baseAppNode; static __$pageStyle; static __$baseStyle; static __histories = []; static __loadedPages = {}; static __currentURL = null; static CURRENT_URL = null; static __lastShared = undefined; /** * Loads base component it is not loaded */ static __loadBase() { if (___app___.__base) return; // Loading Base ___app___.__init(); ___app___.__base = new Base({ children: { _: 'main', id: 'oapp' } }); let baseOph = ___app___.__base; let renderedNode = ___render___.toNode(baseOph, true); document.body.appendChild(renderedNode); ___app___.__$baseAppNode = document.getElementById("oapp"); ___render___.__placedOphoseInstances = []; // Loading style node ___app___.__$pageStyle = document.createElement("style"); document.head.appendChild(___app___.__$pageStyle); // Init } static __init() { // set favicon let favicon = document.createElement('link'); favicon.rel = 'icon'; favicon.href = '/favicon.ico'; favicon.type = 'image/x-icon'; favicon.id = 'favicon'; document.head.appendChild(favicon); } /** * Loads ophose page at requested URL * @param {*} requestUrl requested URL */ static __loadAt(requestUrl) { /** * Returns the URL with pages prefix * @param {string} url the URL * @returns the URL with pages prefix */ let prepareUrlWithPagesPrefix = (url) => { if (url.startsWith('/')) url = url.substring(1, url.length); if (url.endsWith('/')) url = url.substring(0, url.length - 1); return '/pages/' + url; } let scrollToUrlId = (ms) => { setTimeout(() => { if(!window.location.hash) { window.scrollTo(0, 0); return; }; let id = window.location.hash.substring(1, window.location.hash.length); let element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: 'smooth' }); }else{ window.scrollTo(0, 0); } }, ms); } ___app___.__loadBase(); ___event___.callEvent("onPageLoad", requestUrl); ___app___.CURRENT_URL = requestUrl; requestUrl = prepareUrlWithPagesPrefix(requestUrl); let urlAndQuery = requestUrl.split("?"); let urlFullPath = urlAndQuery[0].split('#')[0]; let urlPath = urlAndQuery[0].split('/'); if (urlPath[urlPath.length - 1] == "") { urlPath.pop(urlPath.length - 1); } if (requestUrl == "/pages/") { urlFullPath = "/pages/index"; } if(___app___.__currentURL == urlFullPath) { scrollToUrlId(0); return; } ___app___.__currentURL = urlFullPath; // Returns fixed JSON response let getUrlQueries = () => { let result; $.ajax({ type: 'POST', url: '/@query/', async: false, data: {url: urlFullPath}, success: function (r) { result = r; } }); return result; } let jsonResponse = getUrlQueries(); let urlExists = jsonResponse["valid"]; let urlRequest = jsonResponse["path"]; // Define URL queries let urlQueries = {}; urlQueries.query = jsonResponse["variables"]; if(urlAndQuery.length == 2) { urlQueries.get = {}; let urlQueriesArray = urlAndQuery[1].split('#')[0].split("&"); for (let urlQuery of urlQueriesArray) { let urlQueryArray = urlQuery.split("="); urlQueries.get[urlQueryArray[0]] = urlQueryArray[1]; } } if (!urlExists && urlFullPath != "error") { ___app___.__loadAt("error"); return; } let Page = undefined; let loadPage = (PageClass) => { if(!___app___.__loadedPages[urlRequest]) ___app___.__loadedPages[urlRequest] = {}; ___app___.__loadedPages[urlRequest]["pageClass"] = PageClass; let loadedPage = new PageClass(urlQueries); for (let ophoseInstance of ___render___.__placedOphoseInstances) { let node = ophoseInstance.__node; if(!___app___.__$baseAppNode.contains(node)) continue; ophoseInstance.__processRemove(); } ___render___.__placedOphoseInstances = []; loadedPage.onCreate(); // Check if page has been redirected if (loadedPage.__redirected) { ___app___.__loadAt(loadedPage.__redirected); return; } // Load content let pageNode = ___render___.toNode(loadedPage, true); loadedPage.onLoad(); ___app___.__$baseAppNode.replaceWith(pageNode); ___app___.__$baseAppNode = pageNode; loadedPage.__applyStyle(); ___app___.__pageInstance = loadedPage; loadedPage.__setNode(pageNode); loadedPage.onPlace(pageNode); page = loadedPage; scrollToUrlId(100); ___event___.callEvent("onPageLoaded", requestUrl); } if (urlFullPath != "error" && ___app___.__loadedPages[urlRequest]) { let pageClass = ___app___.__loadedPages[urlRequest]['pageClass']; loadPage(pageClass); return; } // Page loading ___script___.run(urlRequest, false, () => { Page = ___app___.__getShared(); loadPage(Page); }, () => { if (urlFullPath == "error") return; ___app___.__loadAt("error"); } ); } /** * Sets application title * @param {string} newTitle the new title */ static setTitle(newTitle) { document.title = newTitle; } /** * Sets application icon * * @param {string} newIcon the new icon */ static setIcon(newIcon) { if(document.getElementById('favicon')) document.getElementById('favicon').href = newIcon; } /** * Used to export an object * @param {object} object the object */ static share(object) { ___app___.__lastShared = object; } /** * Used to get the last shareed object and reset it * @returns {object} the last shareed object */ static __getShared() { let e = ___app___.__lastShared; ___app___.__lastShared = undefined; return e; } } const app = ___app___; const oshare = ___app___.share; ;/** * Class representing ophose event */ class ___event___ { // Associative array of eventname: callback static __eventCallbacks = {}; /** * Registers a callback for an event * (note that callbacks are registered in apparition order) * @param {string} eventName the event name ("onPageLoad" for example) * @param {object} callback the callback (called with: value passed * by event caller, event name) */ static addListener(eventName, callback) { eventName = eventName.trim().toLowerCase(); if (!___event___.__eventCallbacks[eventName]) { ___event___.__eventCallbacks[eventName] = []; } ___event___.__eventCallbacks[eventName].push(callback); } static callEvent(eventName, value) { eventName = eventName.trim().toLowerCase(); if (!___event___.__eventCallbacks[eventName]) { return; } for (const callback of ___event___.__eventCallbacks[eventName]) { callback(value, eventName); } } } // History listener window.addEventListener("popstate", (event) => { if (event.state === null) return; ___app___.__loadAt(event.state); });;class ___element___ { constructor() { } /** * Abstract method to define style of the element */ style() { return ''; } /** * Returns page base * @returns {___base___} base */ getBase() { return ___app___.__base; } };/** * Represents an ophose component. */ class ___component___ extends ___element___ { static __allComponents = {}; static __SCREENS_SIZES = { sm: 576, md: 768, lg: 992, xl: 1200 } /** * Returns the component ID * @param {*} componentId the component id * @returns {___component___} component matching id */ static getComponent(componentId) { return ___component___.__allComponents[componentId]; } constructor(props = {}) { super(); this.props = (props && typeof props == "object" && props) || {}; if(this.props.c) this.props.children = this.props.c; /** * @private */ this.__propsOn /** * @private */ this.__styleNode = undefined; /** * @private */ this.__node = undefined; /** * @private */ this.__loadingContext = null; /** * @private */ this.compUID = this.constructor.name.toLowerCase(); /** * @private */ this.__componentUniqueClassName = "__oc_" + this.compUID; this.__componentUniqueClassName = this.__componentUniqueClassName.prettyHashCode(); /** * @private */ this.__componentUniqueId = this.__componentUniqueClassName + (Object.keys(___component___.__allComponents).length + 1); ___component___.__allComponents[this.__componentUniqueId] = this; /** * @private */ this.__myModules = []; /** * @private */ this.__lives = []; } /** * Sets component node * @param {HTMLElement} node the node * @private */ __setNode(node) { this.__node = node; } /** * @returns component unique id (unique for every component) * @private */ __getComponentUniqueId() { return this.__componentUniqueId; } // Style /** * @returns {object} Returns the additional styles as {screen: style} (for example: { * md: ` * %self { * background-color: red; * } * ` * }) */ styles() { return null; } /** * @returns {HTMLStyleElement} component style node * @private */ __getStyleNode() { return this.__styleNode; } /** * Creates style node * @returns {HTMLStyleElement} style node (or undefined if already exists) * @private */ __createStyleNode() { if(this.__getStyleNode()) return undefined; let styleNode = document.createElement('style'); document.head.append(styleNode); this.__styleNode = styleNode; return styleNode; } /** * Reloads component style * @private */ ___reloadStyle() { let style = this.style().replaceAll('%self', '.' + this.__getComponentUniqueId()); let additionalStyles = this.styles(); if(additionalStyles) { for(let screen in additionalStyles) { if(!___component___.__SCREENS_SIZES[screen]) { console.error('Invalid screen size: ' + screen); continue; } let additionalStyle = additionalStyles[screen].replaceAll('%self', '.' + this.__getComponentUniqueId()); style += '\n@media screen and (max-width: ' + ___component___.__SCREENS_SIZES[screen] + 'px) {\n' + additionalStyle + '\n}\n'; } } let styleNode = this.__getStyleNode(); styleNode.innerText = style; } /** * Applies style * @private */ __applyStyle() { if (this.__getStyleNode()) return; this.__createStyleNode(); Live.__currentReadingStyleComponent = this; this.___reloadStyle(); Live.__currentReadingStyleComponent = undefined; } /** * Moves html properties to the child with the given name (set undefined to remove it) * @param string name the name */ propsOn(name) { this.__propsOn = name; } /** * @returns {HTMLElement} component node */ getNode() { return this.__node; } /** * Return rendered node * @param {HTMLElement} node the created node * @returns {HTMLElement} node * @private */ __place(node = undefined) { node.classList.add(this.__getComponentUniqueId()); node.ophoseInstance = this; this.__setNode(node); this.__applyStyle(); this.onPlace(node); for(let module of this.__myModules) { node.classList.add(module._getClassName()); module.onPlace(this, node); } } /** * Abstract method to render HTML * @returns HTML */ render() { } /** * Removes component from the DOM & Ophose instances */ remove() { this.__processRemove(); this.__node.remove(); ___render___.__placedOphoseInstances.splice(___render___.__placedOphoseInstances.indexOf(this), 1); } /** * Append child to component * * @param {object} child the child */ appendChild(child) { this.__node.append(___render___.toNode(child, true)); } /** * Called when component will be removed from the DOM * @private */ __processRemove() { this.onRemove(this.__node); for(let module of this.__myModules) { module.__onRemove(this, this.__node); } if(this.__styleNode) { this.__styleNode.remove(); this.__styleNode = undefined; } for(let live of this.__lives) { live.__placedStyleComponents.splice(live.__placedStyleComponents.indexOf(this), 1); for(let placedLive of [...live.__placedLiveNodes]) { if(this.__node.contains(placedLive.node)) { live.__placedLiveNodes.splice(live.__placedLiveNodes.indexOf(placedLive), 1); } } for(let placedTextLive of [...live.__placedLiveTextNodes]) { if(this.__node.contains(placedTextLive)) { live.__placedLiveTextNodes.splice(live.__placedLiveTextNodes.indexOf(placedTextLive), 1); } } } ___component___.__allComponents[this.__componentUniqueId] = undefined; } // Relatives /** * Returns the first parent component of the given type * @param {*} componentType the component type * @returns {Ophose.Component} the component or null if not found */ findFirstParentComponentOfType(componentType) { let parent = this.__node.parentElement; while(parent) { if(parent.ophoseInstance && parent.ophoseInstance instanceof componentType) { return parent.ophoseInstance; } parent = parent.parentElement; } return null; } // Lifecycle /** * Called when component is added to the DOM * @param {HTMLElement} element the element */ onPlace(element) { } /** * Called when component will be removed from the DOM * @param {HTMLElement} element the element */ onRemove(element) { } // MODULE /** * Add module to the current component * @param {___module___} module the module */ addModule(module) { this.__myModules.push(module); module.addComponent(this); } };class ___module___ extends ___element___ { static __addedModuleStyles = {}; /** * Constructor * @param {string} moduleUID the module UID (unique name) * @param {___component___} component the listen component */ constructor() { super(); /** * @private */ this.__moduleUID = "__ocmodule__" + this.constructor.name.toLowerCase(); /** * @private */ this.__components = []; this.__applyStyle(); } /** * @returns class name (as DOM element) * @private */ _getClassName() { return this.__moduleUID; } /** * @returns {HTMLStyleElement} component style node * @private */ __getStyleNode() { return ___module___.__addedModuleStyles[this._getClassName()]; } /** * @private */ __reloadStyle() { let styleNode = this.__getStyleNode(); if (!styleNode) return; styleNode.innerText = this.style().replaceAll('%self', '.' + this._getClassName()); } /** * Applies style * @private */ __applyStyle() { if (this.__getStyleNode()) return; let styleNode = document.createElement('style'); ___module___.__addedModuleStyles[this._getClassName()] = styleNode; document.head.append(styleNode); this.__reloadStyle(); } /** * Sets component to the current module instance * @param {___component___} the component * @private */ addComponent(component) { if(!this.__components.includes(component)) return; this.__components.push(component); this.onComponentAdded(component); } /** * @returns {___component___[]} components of the module */ getComponents() { return this.__components; } /** * Removes component from the current module instance * @param {___component___} the component */ removeComponent(component) { // Remove style node if no components associated if (this.__components.length == 0) { this.__getStyleNode().remove(); } this.onComponentRemoved(component); } /** * This function is called when a component is added to the module * @param {___component___} component the component * @abstract */ onComponentAdded(component) { } /** * This function is called when a component is removed from the module * @param {___component___} component the component * @abstract */ onComponentRemoved(component) { } /** * This function is called when an element implementing this * module is placed and rendered. * @param {___component___} component the component * @param {HTMLElement} element DOM element */ onPlace(component, element) { } /** * This function is called when an element implementing this * module is removed. * @param {___component___} component the component * @param {HTMLElement} element DOM element */ onRemove(component, element) { } /** * @private */ __onRemove(component, element) { this.__components.splice(this.__components.indexOf(component), 1); this.onRemove(component, element); } };/** * Represents an ophose page */ class ___page___ extends ___component___ { /** * Page constructor * @param {dict} urlQueries url queries if any (ex: pageId, productId...) */ constructor(urlQueries) { super(); this.urlQueries = urlQueries; this.__redirected = false; } /** * This method is called once the page is created * (only once) */ onCreate() { } /** * This method is called when the page is left * through route.go(other_page) */ onLeave() { } /** * This method is called when the page is loaded * (every time) */ onLoad() { } redirect(url) { if (this.__redirected) { console.error("This page has already been redirected."); return; } this.__redirected = url; } };class ___base___ extends ___component___ { constructor(props) { super(props); } };class ___route___ { /** * To go to another page (without reloading base) * @param {page} requestUrl requested URL */ static go(requestUrl) { if (requestUrl === undefined || requestUrl === null) { return; } if(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(requestUrl)) { window.location = requestUrl; return; } ___app___.__loadAt(requestUrl); if (requestUrl != ___app___.__currentURL) { window.history.pushState(requestUrl, '', requestUrl); } } } const route = ___route___;;/** * Class representing ophose environment */ class ___env___ { /** * Sends asychronous request (POST) to the environment * and return JSON parsed result * @param {string} endpoint the environment and its endpoint (for example: /myEnv/myEndpoint) * @param {Array} data post data */ static async post(endpoint, data = null) { let jsonResult = null; let error = false; if(data instanceof Live) data = data.get(); let options = { method: 'POST', headers: {}, useDirectives: true, ...(data && data.options) ?? {} } if(data && data.options) data.options = undefined; if(options.toFormData) { let formData = new FormData(); for(let key in data) { formData.append(key, data[key]); } data = formData; } if(!(data instanceof FormData)) { if(typeof data === 'object') { options.headers['Content-Type'] = 'application/json'; data = JSON.stringify(Live.flatten(data)); } else if(typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean' || data === null) { if(data === null) data = ''; options.headers['Content-Type'] = 'text/plain'; } } await $.ajax({ type: options.method, url: (endpoint.startsWith('/@/') || endpoint.startsWith('/api/' || endpoint.startsWith('/@api/') || endpoint.startsWith('/@env/'))) ? endpoint : '/@/' + endpoint, data: data, cache: false, processData: false, contentType: false, beforeSend: (xhr) => { let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); xhr.setRequestHeader('X-Csrf-Token', token); for(let header in options.headers) { xhr.setRequestHeader(header, options.headers[header]); } }, success: (result) => { jsonResult = result; }, error: (result) => { error = true; try { jsonResult = JSON.parse(result.responseText); } catch (e) { jsonResult = result.responseText; } } }); if (error) { throw jsonResult; } if(options.useDirectives && jsonResult.ophose_encoded_directives) { for(let directive of jsonResult.ophose_encoded_directives) { switch(directive.type) { case 'redirect': route.go(directive.data); break; } } return; } return jsonResult; } /** * Sends files to an environment request * @param {string} env the environment path * @param {string} request the rest request * @param {string} name the file(s) name * @param {boolean} multiple if user can send multiple file */ static async sendFiles(env, request, filename, callbackSuccess, callbackError, multiple = false, acceptTypes = "*") { let url = ___env___.constructURL(env, request); let __form = document.createElement("form"); __form.enctype = "multipart/form-data"; let __fileInput = document.createElement("input"); __fileInput.type = "file"; __fileInput.accept = acceptTypes; if (multiple) { __fileInput.multiple = true; } __fileInput.id = filename; __fileInput.name = filename; __form.appendChild(__fileInput); __fileInput.click(); let dataReceived = null; __fileInput.onchange = e => { let form_data = new FormData(__form); $.ajax({ url: url, // <-- point to server-side PHP script dataType: 'json', // <-- what to expect back from the PHP script, if anything cache: false, contentType: false, processData: false, data: form_data, type: 'POST', method: 'POST', success: (r) => { callbackSuccess(r) // <-- display response from the PHP script, if any }, error: (r) => { callbackError(r); } }); }; } } /** * Class representing an environment entity */ class ___env_entity___ { constructor(id, data) { this.__id = id; this.data = data; } /** * Returns entity id * @returns {*} id */ getId() { return this.__id; } /** * Method called when entity is updated * @param {*} data the new data * @abstract */ update(data) { } } /** * Class representing an environment entity manager */ class ___env_entity_manager___ { /** * Environment constructor * @param {___env_entity___} * @param {boolean} saveEntitiesInCache if environment should saves */ constructor(EntityClass, saveEntitiesInCache = true) { this.__EntityClass = EntityClass; this.__entities = {}; this.__saveEntitiesInCache = saveEntitiesInCache; } /** * Returns entity (null if not overriden) * (Note that if this function isn't overriden, it'll * return entity from array, or entity created from * createEntity(id)) * @param {*} id the entity id * @returns {___env_entity___} entity */ async getEntity(id) { if (this.saveEntitiesInCache && this.__entities[id]) { return this.__entities[id]; } return await this.__generateEntity(id); } /** * Generates entity then returns it * @param {*} id the entity id * @returns entity */ async __generateEntity(id) { let entity = await this.createEntity(id); if (entity === undefined) { return undefined; } if (this.saveEntitiesInCache) { this.__entities[id] = entity; } return entity; } /** * This method is called when an entity is needed to * be created * @param {*} id the entity id * @returns created entity (null by default) */ async createEntity(id) { return null; } /** * Saves entity in cache with data * @param {*} id the entity id * @param {*} data the entity data */ saveEntity(id, data) { if(!this.__saveEntitiesInCache) return; if(this.__entities[id]) { this.__entities[id].data = data; this.__entities[id].update(data); return; } this.__entities[id] = new this.__EntityClass(id, data); } /** * Cleans all created entities */ cleanEntities() { this.__entities = {}; } } const oenv = ___env___.post; const oenvSendFiles = ___env___.sendFiles;;class Live { static __currentReadingStyleComponent = undefined; constructor(value) { this.value = value; this.__placedLiveTextNodes = []; this.__placedLiveNodes = []; this.__placedStyleComponents = []; this.__callbackListeners = []; } /** * Adds a callback listener * @param {function} callback the callback */ addCallbackListener(callback) { this.__callbackListeners.push(callback); } /** * Removes a callback listener * * @param {function} callback the callback * @returns the callback */ removeCallbackListener(callback) { this.__callbackListeners.splice(this.__callbackListeners.indexOf(callback), 1); } /** * Toggles the value if it is a boolean * * @returns the value or undefined if not a boolean */ toggle() { if(typeof this.value != 'boolean') return; this.set(!this.value); return this.value; } /** * Returns live value and automatically assigns as observer of this * @returns the value */ get() { if (Live.__currentReadingStyleComponent) { let component = Live.__currentReadingStyleComponent; this.__placedStyleComponents.push(component); component.__lives.push(this); } return this.value; } /** * Updates the value * @param {*} value the value */ set(value) { let oldValue = this.value; this.value = value; Live.__onValueChange(this, value, oldValue); } /** * Adds a value to the current value * @param {*} value the value to add */ add(value) { if(Array.isArray(this.value)) { this.value.push(value); this.set(this.value); return; } this.set(value + this.value); } /** * Removes a value from the current value * @param {*} value the value to remove */ remove(value) { if(Array.isArray(this.value)) { this.value.splice(this.value.indexOf(value), 1); this.set(this.value); return; } this.set(this.value - value); } /** * Called when value changes and process needed updates * @param {*} liveVar the live variable * @param {*} newValue the new value * @param {*} oldValue the old value */ static __onValueChange(liveVar, newValue, oldValue) { for(let node of liveVar.__placedLiveTextNodes) { node.textContent = newValue; } for(let placedLive of liveVar.__placedLiveNodes) { let args = placedLive.lives.map((live) => live.get()); let newNode = ___render___.toNode(placedLive.callback(...args), true); placedLive.node.replaceWith(newNode); placedLive.node = newNode; if(placedLive.selfClassName) placedLive.node.classList.add(placedLive.selfClassName); } for (let component of liveVar.__placedStyleComponents) { component.___reloadStyle(); } for (let callback of liveVar.__callbackListeners) { callback(newValue, oldValue); } } /** * Local lives loaded from local storage */ static __localLives = {}; /** * Returns a live variable from a local storage key * * @param {*} key the key * @param {*} defaultValue the default value if the key is not set * @returns {Live} the live variable */ static local(key, defaultValue = null) { key = '__local_live.' + key; let value = localStorage.getItem(key); let live = Live.__localLives[key]; if(value === null) { localStorage.setItem(key, defaultValue); value = defaultValue; } if(live === undefined) { live = new Live(value); live.addCallbackListener((newValue) => { localStorage.setItem(key, newValue); }); Live.__localLives[key] = live; } return live; } /** * Flattens an object with lives (replaces lives with their values recursively) * @param {*} obj the object * @returns the flattened object */ static flatten(obj) { obj = Object.assign({}, obj); for (let key in obj) { if (obj[key] instanceof Live) { obj[key] = obj[key].get(); } if (typeof obj[key] === 'object') { obj[key] = Live.flatten(obj[key]); } } return obj; } } class PlacedLive { constructor(...livesAndCallback) { let callback = livesAndCallback.pop(); this.lives = livesAndCallback; this.callback = callback; this.node = undefined; this.selfClassName = undefined; for(let live of this.lives) { live.__placedLiveNodes.push(this); } } } Live.prototype.valueOf = function (liveId) { return this.get(liveId); };var __OPH_APP_BUILD__ = false; var __OPHOSE_PAGES = {}; const Ophose = { App: ___app___, Render: ___render___, Base: ___base___, Component: ___component___, Page: ___page___, Module: ___module___, Environment: ___env___, Event: ___event___, } const ofi = {};;;__OPH_APP_BUILD__=true;