structured-fw 0.7.2

package/build/system/client/ClientComponent.js

@@ -0,0 +1,734 @@
+import { attributeValueFromString, attributeValueToString, mergeDeep, objectEach, queryStringDecodedSetValue, toCamelCase } from '../Util.js';
+import { DataStoreView } from './DataStoreView.js';
+import { Net } from './Net.js';
+import { NetRequest } from './NetRequest.js';
+import { EventEmitter } from './EventEmitter.js';
+export class ClientComponent extends EventEmitter {
+    constructor(parent, name, domNode, store, runInitializer = true) {
+        super();
+        this.children = [];
+        this.net = new Net();
+        this.initializerExecuted = false;
+        this.destroyed = false;
+        this.redrawRequest = null;
+        this.bound = [];
+        this.conditionals = [];
+        this.conditionalCallbacks = {};
+        this.conditionalClassNames = [];
+        this.refs = {};
+        this.refsArray = {};
+        this.loaded = false;
+        this.initializer = null;
+        this.data = {};
+        this.name = name;
+        this.domNode = domNode;
+        if (parent === null) {
+            this.isRoot = true;
+            this.root = this;
+            this.parent = this;
+        }
+        else {
+            this.isRoot = false;
+            this.root = parent.root;
+            this.parent = parent;
+        }
+        this.storeGlobal = store;
+        this.store = new DataStoreView(this.storeGlobal, this);
+        if (this.isRoot) {
+            this.init(runInitializer);
+        }
+    }
+    async init(runInitializer) {
+        const initializerExists = window.initializers !== undefined && this.name in window.initializers;
+        this.initRefs();
+        this.initData();
+        this.initModels();
+        this.initConditionals();
+        await this.initChildren();
+        this.promoteRefs();
+        this.store.onChange('*', () => {
+            this.updateConditionals(true);
+        });
+        if (runInitializer && initializerExists) {
+            await this.runInitializer();
+        }
+        if (this.conditionals.length > 0) {
+            if (!initializerExists) {
+                this.store.import(undefined, false, false);
+            }
+            this.updateConditionals(false);
+        }
+        if (this.data.deferred === true) {
+            this.setData('deferred', false, false);
+            this.redraw();
+        }
+        this.loaded = true;
+        this.emit('ready');
+    }
+    async runInitializer(isRedraw = false) {
+        const initializer = window.initializers[this.name];
+        if (!initializer) {
+            return;
+        }
+        if (!this.initializerExecuted && !this.destroyed) {
+            let initializerFunction = null;
+            if (typeof initializer === 'string') {
+                const AsyncFunction = async function () { }.constructor;
+                initializerFunction = new AsyncFunction('const init = ' + initializer + '; await init.apply(this, [...arguments]);');
+            }
+            else {
+                initializerFunction = initializer;
+            }
+            if (initializerFunction) {
+                this.initializer = initializerFunction;
+                await this.initializer.apply(this, [{
+                        net: this.net,
+                        isRedraw
+                    }]);
+            }
+        }
+        this.initializerExecuted = true;
+    }
+    initData() {
+        for (let i = 0; i < this.domNode.attributes.length; i++) {
+            if (/^((number|string|boolean|object|any):)?data-[^\s]+/.test(this.domNode.attributes[i].name)) {
+                const value = this.domNode.attributes[i].value;
+                const attrData = attributeValueFromString(value);
+                if (typeof attrData === 'object') {
+                    this.setData(attrData.key, attrData.value, false);
+                }
+                else {
+                    const key = toCamelCase(this.domNode.attributes[i].name.substring(5));
+                    this.setData(key, attrData, false);
+                }
+            }
+        }
+    }
+    pathData() {
+        let current = this;
+        const data = [];
+        do {
+            data.push(current.data);
+            if (current.isRoot || !current.data.use) {
+                break;
+            }
+            current = current.parent;
+        } while (true);
+        return data.reverse();
+    }
+    setData(key, value, updateStore = true) {
+        const dataKey = `data-${key}`;
+        this.domNode.setAttribute(dataKey, attributeValueToString(key, value));
+        const keyCamelCase = toCamelCase(key);
+        this.data[keyCamelCase] = value;
+        if (updateStore) {
+            this.store.set(keyCamelCase, value);
+        }
+        return this;
+    }
+    async initChildren(scope, callback) {
+        scope = scope || this.domNode;
+        const childInitPromises = [];
+        for (let i = 0; i < scope.childNodes.length; i++) {
+            const childNode = scope.childNodes[i];
+            if (childNode.nodeType == 1) {
+                if (childNode.hasAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`)) {
+                    const component = new ClientComponent(this, childNode.getAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`) || '', childNode, this.storeGlobal);
+                    this.children.push(component);
+                    if (typeof callback === 'function') {
+                        callback(component);
+                    }
+                    childInitPromises.push(component.init(true));
+                }
+                else {
+                    childInitPromises.push(this.initChildren(childNode, callback));
+                }
+            }
+        }
+        await Promise.all(childInitPromises);
+    }
+    async redraw(data) {
+        if (window.structuredClientConfig.componentRender === false) {
+            console.error(`Can't redraw component, component rendering URL disabled`);
+            return;
+        }
+        if (this.destroyed) {
+            return;
+        }
+        if (data) {
+            objectEach(data, (key, val) => {
+                this.setData(key, val, false);
+            });
+        }
+        if (this.redrawRequest !== null) {
+            this.redrawRequest.abort();
+            this.redrawRequest = null;
+        }
+        const redrawRequest = new NetRequest('POST', window.structuredClientConfig.componentRender, {
+            'content-type': 'application/json'
+        });
+        this.redrawRequest = redrawRequest.xhr;
+        const componentDataJSON = await redrawRequest.send(JSON.stringify({
+            component: this.name,
+            attributes: this.data,
+            unwrap: true
+        }));
+        this.redrawRequest = null;
+        if (componentDataJSON.length === 0) {
+            return;
+        }
+        this.loaded = false;
+        if (typeof this.onRedraw === 'function') {
+            this.onRedraw.apply(this);
+        }
+        this.unbindAll();
+        const childStoreChangeCallbacks = {};
+        Array.from(this.children).forEach((child) => {
+            childStoreChangeCallbacks[child.getData('componentId')] = child.store.onChangeCallbacks();
+            child.remove();
+        });
+        const componentData = JSON.parse(componentDataJSON);
+        this.domNode.innerHTML = componentData.html;
+        objectEach(componentData.data, (key, val) => {
+            this.setData(key, val, false);
+        });
+        for (const key in componentData.initializers) {
+            if (!window.initializers[key]) {
+                window.initializers[key] = componentData.initializers[key];
+            }
+        }
+        await this.initChildren(this.domNode, (childNew) => {
+            const childNewId = childNew.getData('componentId');
+            const existingChild = childNewId in childStoreChangeCallbacks;
+            if (existingChild) {
+                objectEach(childStoreChangeCallbacks[childNewId], (key, callbacks) => {
+                    callbacks.forEach((callback) => {
+                        childNew.store.onChange(key, callback);
+                    });
+                });
+            }
+        });
+        this.refs = {};
+        this.refsArray = {};
+        this.conditionals = [];
+        this.initRefs();
+        this.initModels();
+        this.initConditionals();
+        this.promoteRefs();
+        if (this.initializer) {
+            this.initializerExecuted = false;
+            this.runInitializer(true);
+        }
+        this.updateConditionals(false);
+        this.loaded = true;
+    }
+    initConditionals(node) {
+        const isSelf = node === undefined;
+        if (node === undefined) {
+            node = this.domNode;
+        }
+        for (const attribute of node.attributes) {
+            if (attribute.name === 'data-if') {
+                this.conditionals.push(node);
+            }
+            if (attribute.name.startsWith('data-classname')) {
+                const className = attribute.name.substring(15);
+                this.conditionalClassNames.push({
+                    element: node,
+                    className
+                });
+            }
+        }
+        node.childNodes.forEach((child) => {
+            if (child.nodeType === 1 && (isSelf || !node?.hasAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`))) {
+                this.initConditionals(child);
+            }
+        });
+    }
+    initRefs(node) {
+        const isSelf = node === undefined;
+        if (node === undefined) {
+            node = this.domNode;
+        }
+        if (node.hasAttribute('ref')) {
+            this.refs[node.getAttribute('ref') || 'undefined'] = node;
+        }
+        if (node.hasAttribute('array:ref')) {
+            const key = node.getAttribute('array:ref') || 'undefined';
+            if (!(key in this.refsArray)) {
+                this.refsArray[key] = [];
+            }
+            this.refsArray[key].push(node);
+        }
+        node.childNodes.forEach((child) => {
+            if (child.nodeType === 1 && (isSelf || !node?.hasAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`))) {
+                this.initRefs(child);
+            }
+        });
+    }
+    initModels(node, modelNodes = []) {
+        const isSelf = node === undefined;
+        if (node === undefined) {
+            node = this.domNode;
+        }
+        const modelData = (node) => {
+            const field = node.getAttribute('data-model');
+            if (field) {
+                const isCheckbox = node.tagName === 'INPUT' && node.type === 'checkbox';
+                const valueRaw = isCheckbox ? node.checked : node.value;
+                const value = queryStringDecodedSetValue(field, valueRaw);
+                return value;
+            }
+            return {};
+        };
+        const update = (data) => {
+            objectEach(data, (key, val) => {
+                this.store.set(key, val);
+            });
+        };
+        if (node.hasAttribute('data-model') && (node.tagName === 'INPUT' || node.tagName === 'SELECT' || node.tagName === 'TEXTAREA')) {
+            modelNodes.push(node);
+        }
+        else {
+            node.childNodes.forEach((child) => {
+                if (child.nodeType === 1 && (isSelf || !node?.hasAttribute(`data-${window.structuredClientConfig.componentNameAttribute}`))) {
+                    this.initModels(child, modelNodes);
+                }
+            });
+        }
+        if (isSelf) {
+            let data = {};
+            modelNodes.forEach((modelNode) => {
+                modelNode.addEventListener('input', () => {
+                    let data = modelData(modelNode);
+                    const key = Object.keys(data)[0];
+                    if (typeof data[key] === 'object') {
+                        const dataExisting = this.store.get(key);
+                        if (dataExisting !== undefined) {
+                            data = mergeDeep({}, { [key]: dataExisting }, data);
+                        }
+                        else {
+                            data = mergeDeep({}, data);
+                        }
+                    }
+                    update(data);
+                });
+                const field = modelNode.getAttribute('data-model');
+                if (field) {
+                    const isCheckbox = modelNode.tagName === 'INPUT' && modelNode.type === 'checkbox';
+                    const valueRaw = isCheckbox ? modelNode.checked : modelNode.value;
+                    const value = queryStringDecodedSetValue(field, valueRaw);
+                    data = mergeDeep(data, value);
+                }
+            });
+            update(data);
+        }
+    }
+    promoteRefs() {
+        this.children.forEach((child) => {
+            const ref = child.domNode.getAttribute('ref');
+            if (ref) {
+                this.refs[ref] = child;
+            }
+            const refArray = child.domNode.getAttribute('array:ref');
+            if (refArray !== null && refArray in this.refsArray) {
+                const nodeIndex = this.refsArray[refArray].indexOf(child.domNode);
+                if (nodeIndex > -1) {
+                    this.refsArray[refArray].splice(nodeIndex, 1, child);
+                }
+            }
+        });
+    }
+    ref(refName) {
+        return this.refs[refName];
+    }
+    refArray(refName) {
+        return (this.refsArray[refName] || []);
+    }
+    execCondition(conditionRaw) {
+        const condition = conditionRaw.trim();
+        const isMethod = condition.endsWith(')');
+        if (isMethod) {
+            const parts = /^(!?)\s*([a-zA-Z]+[a-zA-Z0-9_]*)\(([^)]*)\)$/.exec(condition);
+            if (parts === null) {
+                console.error(`Could not parse condition ${condition}`);
+                return false;
+            }
+            const negated = parts[1] === '!';
+            const functionName = parts[2];
+            const args = parts[3].trim();
+            if (typeof this.conditionalCallbacks[functionName] !== 'function') {
+                console.warn(`No registered conditional callback '${functionName}'`);
+                return false;
+            }
+            const isTrue = this.conditionalCallbacks[functionName](args === '' ? undefined : eval(`(${args})`));
+            if (negated) {
+                return !isTrue;
+            }
+            return isTrue;
+        }
+        else {
+            const parts = /^(!)?\s*([a-zA-Z]+[a-zA-Z0-9_]*)\s*((?:==)|(?:===)|(?:!=)|(?:!==)|<|>|(?:<=)|(?:>=))?\s*([^=].+)?$/.exec(condition);
+            if (parts === null) {
+                console.error(`Could not parse condition ${condition}`);
+                return false;
+            }
+            const property = parts[2];
+            const value = this.store.get(property);
+            const isComparison = parts[3] !== undefined;
+            if (isComparison) {
+                let rightHandSide = null;
+                try {
+                    rightHandSide = eval(`${parts[4]}`);
+                }
+                catch (e) {
+                    rightHandSide = this.store.get(parts[4]);
+                }
+                const comparisonSymbol = parts[3];
+                if (comparisonSymbol === '==') {
+                    return value == rightHandSide;
+                }
+                else if (comparisonSymbol === '===') {
+                    return value === rightHandSide;
+                }
+                else if (comparisonSymbol === '!=') {
+                    return value != rightHandSide;
+                }
+                else if (comparisonSymbol === '!==') {
+                    return value !== rightHandSide;
+                }
+                else {
+                    if (typeof value !== 'number') {
+                        return false;
+                    }
+                    if (comparisonSymbol === '>') {
+                        return value > rightHandSide;
+                    }
+                    else if (comparisonSymbol === '>=') {
+                        return value >= rightHandSide;
+                    }
+                    else if (comparisonSymbol === '<') {
+                        return value < rightHandSide;
+                    }
+                    else if (comparisonSymbol === '<=') {
+                        return value <= rightHandSide;
+                    }
+                }
+                return false;
+            }
+            else {
+                const negated = parts[1] === '!';
+                const isTrue = this.store.get(property);
+                if (negated) {
+                    return !isTrue;
+                }
+                return !!isTrue;
+            }
+        }
+    }
+    conditionalCallback(name, callback, updateConditionals = true) {
+        this.conditionalCallbacks[name] = callback;
+        if (updateConditionals) {
+            this.updateConditionals(false);
+        }
+    }
+    updateConditionals(enableTransition) {
+        if (this.destroyed) {
+            return;
+        }
+        this.conditionals.forEach((node) => {
+            const condition = node.getAttribute('data-if');
+            if (typeof condition === 'string') {
+                const show = this.execCondition(condition);
+                if (show === true) {
+                    this.show(node, enableTransition);
+                }
+                else {
+                    this.hide(node, enableTransition);
+                }
+            }
+        });
+        this.conditionalClassNames.forEach((conditional) => {
+            const condition = conditional.element.getAttribute(`data-classname-${conditional.className}`);
+            if (typeof condition === 'string') {
+                const enableClassName = this.execCondition(condition);
+                if (enableClassName === true) {
+                    conditional.element.classList.add(conditional.className);
+                }
+                else {
+                    conditional.element.classList.remove(conditional.className);
+                }
+            }
+        });
+    }
+    async remove() {
+        if (!this.isRoot) {
+            const children = Array.from(this.children);
+            for (let i = 0; i < children.length; i++) {
+                await children[i].remove();
+            }
+            if (this.parent) {
+                this.parent.children.splice(this.parent.children.indexOf(this), 1);
+            }
+            this.domNode.parentElement?.removeChild(this.domNode);
+            await this.destroy();
+        }
+    }
+    parentFind(parentName) {
+        let parent = this.parent;
+        while (true) {
+            if (parent.name === parentName) {
+                return parent;
+            }
+            if (parent.isRoot) {
+                break;
+            }
+            parent = parent.parent;
+        }
+        return null;
+    }
+    find(componentName, recursive = true) {
+        for (let i = 0; i < this.children.length; i++) {
+            const child = this.children[i];
+            if (child.name == componentName) {
+                return child;
+            }
+            else {
+                if (recursive) {
+                    const inChild = child.find(componentName, recursive);
+                    if (inChild) {
+                        return inChild;
+                    }
+                }
+            }
+        }
+        return null;
+    }
+    query(componentName, recursive = true, results = []) {
+        for (let i = 0; i < this.children.length; i++) {
+            const child = this.children[i];
+            if (child.name == componentName) {
+                results.push(child);
+            }
+            else {
+                if (recursive) {
+                    child.query(componentName, recursive, results);
+                }
+            }
+        }
+        return results;
+    }
+    async add(appendTo, componentName, data) {
+        if (window.structuredClientConfig.componentRender === false) {
+            console.error(`Can't add component, component rendering URL disabled`);
+            return null;
+        }
+        const container = typeof appendTo === 'string' ? this.domNode.querySelector(appendTo) : appendTo;
+        if (!(container instanceof HTMLElement)) {
+            throw new Error(`${this.name}.add() - appendTo selector not found within this component`);
+        }
+        const req = new NetRequest('POST', window.structuredClientConfig.componentRender, {
+            'content-type': 'application/json'
+        });
+        const componentDataJSON = await req.send(JSON.stringify({
+            component: componentName,
+            attributes: data,
+            unwrap: false
+        }));
+        const res = JSON.parse(componentDataJSON);
+        for (let key in res.initializers) {
+            if (!window.initializers[key]) {
+                window.initializers[key] = res.initializers[key];
+            }
+        }
+        const tmpContainer = document.createElement('div');
+        tmpContainer.innerHTML = res.html;
+        const componentNode = tmpContainer.firstChild;
+        const component = new ClientComponent(this, componentName, componentNode, this.storeGlobal);
+        this.children.push(component);
+        await component.init(true);
+        container.appendChild(componentNode);
+        return component;
+    }
+    getData(key) {
+        if (!key) {
+            return this.data;
+        }
+        return this.data[key];
+    }
+    show(domNode, enableTransition = true) {
+        if (!enableTransition) {
+            domNode.style.display = '';
+            return;
+        }
+        if (domNode.style.display !== 'none') {
+            return;
+        }
+        const transitions = this.transitionAttributes(domNode).show;
+        const transitionsActive = Object.keys(transitions).filter((key) => {
+            return transitions[key] !== false;
+        }).reduce((prev, curr) => {
+            const key = curr;
+            prev[key] = transitions[key];
+            return prev;
+        }, {});
+        if (Object.keys(transitionsActive).length === 0) {
+            domNode.style.display = '';
+            return;
+        }
+        domNode.style.display = '';
+        const onTransitionEnd = (e) => {
+            domNode.style.opacity = '1';
+            domNode.style.transition = '';
+            domNode.style.transformOrigin = 'unset';
+            domNode.removeEventListener('transitionend', onTransitionEnd);
+            domNode.removeEventListener('transitioncancel', onTransitionEnd);
+        };
+        domNode.addEventListener('transitionend', onTransitionEnd);
+        domNode.addEventListener('transitioncancel', onTransitionEnd);
+        if (transitionsActive.slide) {
+            const transformOrigin = domNode.getAttribute('data-transform-origin-show') || '50% 0';
+            domNode.style.transformOrigin = transformOrigin;
+            const axis = this.transitionAxis(domNode, 'show');
+            domNode.style.transform = `scale${axis}(0.01)`;
+            domNode.style.transition = `transform ${transitionsActive.slide / 1000}s`;
+            setTimeout(() => {
+                domNode.style.transform = `scale${axis}(1)`;
+            }, 100);
+        }
+        if (transitionsActive.fade) {
+            domNode.style.opacity = '0';
+            domNode.style.transition = `opacity ${transitionsActive.fade / 1000}s`;
+            setTimeout(() => {
+                domNode.style.opacity = '1';
+            }, 100);
+        }
+    }
+    hide(domNode, enableTransition = true) {
+        if (!enableTransition) {
+            domNode.style.display = 'none';
+            return;
+        }
+        if (domNode.style.display === 'none') {
+            return;
+        }
+        const transitions = this.transitionAttributes(domNode).hide;
+        const transitionsActive = Object.keys(transitions).filter((key) => {
+            return transitions[key] !== false;
+        }).reduce((prev, curr) => {
+            const key = curr;
+            prev[key] = transitions[key];
+            return prev;
+        }, {});
+        if (Object.keys(transitionsActive).length === 0) {
+            domNode.style.display = 'none';
+        }
+        else {
+            const onTransitionEnd = (e) => {
+                domNode.style.display = 'none';
+                domNode.style.opacity = '1';
+                domNode.style.transition = '';
+                domNode.style.transformOrigin = 'unset';
+                domNode.removeEventListener('transitionend', onTransitionEnd);
+                domNode.removeEventListener('transitioncancel', onTransitionEnd);
+            };
+            domNode.addEventListener('transitionend', onTransitionEnd);
+            domNode.addEventListener('transitioncancel', onTransitionEnd);
+            if (transitionsActive.slide) {
+                const transformOrigin = domNode.getAttribute('data-transform-origin-hide') || '50% 100%';
+                domNode.style.transformOrigin = transformOrigin;
+                domNode.style.transition = `transform ${transitionsActive.slide / 1000}s ease`;
+                setTimeout(() => {
+                    const axis = this.transitionAxis(domNode, 'hide');
+                    domNode.style.transform = `scale${axis}(0.01)`;
+                }, 100);
+            }
+            if (transitionsActive.fade) {
+                domNode.style.opacity = '1';
+                domNode.style.transition = `opacity ${transitionsActive.fade / 1000}s`;
+                setTimeout(() => {
+                    domNode.style.opacity = '0';
+                }, 100);
+            }
+        }
+    }
+    transitionAttributes(domNode) {
+        const transitions = {
+            show: {
+                slide: false,
+                fade: false
+            },
+            hide: {
+                slide: false,
+                fade: false
+            }
+        };
+        objectEach(transitions, (transitionEvent, transition) => {
+            objectEach(transition, (transitionType) => {
+                const attributeName = `data-transition-${transitionEvent}-${transitionType}`;
+                if (domNode.hasAttribute(attributeName)) {
+                    const valueRaw = domNode.getAttribute(attributeName);
+                    let value = false;
+                    if (typeof valueRaw === 'string' && /^\d+$/.test(valueRaw)) {
+                        value = parseInt(valueRaw);
+                    }
+                    transition[transitionType] = value;
+                }
+            });
+        });
+        return transitions;
+    }
+    transitionAxis(domNode, showHide) {
+        const attributeName = `data-transition-axis-${showHide}`;
+        if (!domNode.hasAttribute(attributeName)) {
+            return '';
+        }
+        let val = domNode.getAttribute(attributeName);
+        if (typeof val === 'string') {
+            val = val.trim().toUpperCase();
+            if (val.length > 0) {
+                val = val.substring(0, 1);
+            }
+            if (val != 'X' && val != 'Y') {
+                return '';
+            }
+            return val;
+        }
+        return '';
+    }
+    async destroy() {
+        if (this.redrawRequest) {
+            this.redrawRequest.abort();
+            this.redrawRequest = null;
+        }
+        if (typeof this.onDestroy === 'function') {
+            await this.onDestroy.apply(this);
+        }
+        this.store.destroy();
+        this.unbindAll();
+        this.conditionals = [];
+        this.conditionalClassNames = [];
+        this.conditionalCallbacks = {};
+        this.refs = {};
+        this.refsArray = {};
+        this.initializer = null;
+        this.data = {};
+        this.destroyed = true;
+    }
+    bind(element, event, callback) {
+        if (element instanceof HTMLElement) {
+            this.bound.push({
+                element,
+                event,
+                callback
+            });
+            element.addEventListener(event, callback);
+        }
+    }
+    unbindAll() {
+        this.bound.forEach((bound) => {
+            bound.element.removeEventListener(bound.event, bound.callback);
+        });
+        this.bound = [];
+    }
+}