@supersoniks/concorde 1.0.5 → 1.0.8

package/core/utils/Arrays.js

@@ -0,0 +1,136 @@
+class Arrays {
+    /**
+     * Vérifie si les deux tableaux ont le même contenu
+     */
+    static areEqual(array1, array2) {
+        if (array1.length === array2.length) {
+            return array1.every((element, index) => {
+                if (element === array2[index]) {
+                    return true;
+                }
+                return false;
+            });
+        }
+        return false;
+    }
+    /**
+     * Fournie une fonction to1D qui transforme un tableau 2D en un tableau 1D par concaténation
+     */
+    static from2d(source) {
+        return {
+            to1D: () => {
+                let result = [];
+                source.forEach((elt) => (result = result.concat(elt)));
+                return this.from(result);
+            },
+        };
+    }
+    /**
+     * Fournie des méthodes pour manipuler un tableau
+     * A l'écriture cela permet d'avoir des phrases du type:
+     * let data = Arrays.from(mon tableau)
+     * puis data.everyItem().has().same().value().forkey("key");
+     * Peu mieux faire. ou voir a remplacer un jour par loadHash par exemple.
+     **/
+    static from(source) {
+        return {
+            /**Obtenir le tableau final*/
+            get: () => source || [],
+            everyItem: () => {
+                return {
+                    has: () => {
+                        return {
+                            same: () => {
+                                return {
+                                    value: () => {
+                                        return {
+                                            forKey: (key) => {
+                                                if (source.length < 1)
+                                                    return true;
+                                                let first = (source[0] || {})[key];
+                                                return source.every((item) => (item || {})[key] == first);
+                                            },
+                                        };
+                                    },
+                                };
+                            },
+                        };
+                    },
+                    value: () => {
+                        return {
+                            forKey: (key) => {
+                                return Arrays.from(source.map((item) => item[key]));
+                            },
+                        };
+                    },
+                    copy: () => {
+                        return {
+                            fromKey: (atKey) => {
+                                return {
+                                    toKey: (toKey) => {
+                                        source.forEach((item) => {
+                                            item[toKey] = Array.isArray(item[atKey])
+                                                ? [...item[atKey]]
+                                                : typeof item[atKey] === "object" && item[atKey] != null
+                                                    ? Object.assign({}, item[atKey]) : item[atKey];
+                                        });
+                                    },
+                                };
+                            },
+                        };
+                    },
+                };
+            },
+            map: (f) => Arrays.from(source.map(f)),
+            filter: (f) => Arrays.from(source.filter(f)),
+            find: (f) => source.find(f),
+            some: (f) => source.some(f),
+            every: (f) => source.every(f),
+            group: () => {
+                return {
+                    byKey: (key) => {
+                        let result = [];
+                        let keys = new Map();
+                        for (let item of source) {
+                            let value = item[key];
+                            if (!keys.has(value)) {
+                                let idx = result.length;
+                                keys.set(value, idx);
+                                let pushable = { items: [] };
+                                pushable[key] = value;
+                                result.push(pushable);
+                            }
+                            result[keys.get(value)].items.push(item);
+                        }
+                        return Arrays.from(result);
+                    },
+                };
+            },
+            without: () => {
+                return {
+                    duplicates: () => {
+                        return {
+                            forKey: (key) => {
+                                let set = [...new Set(source.map((item) => item[key]))];
+                                return Arrays.from(set.map((value) => source.find((item) => item[key] == value)));
+                            },
+                        };
+                    },
+                    itemsIn: (toRemoveFromSource) => {
+                        return {
+                            havingSameValue: () => {
+                                return {
+                                    forKey: (key) => {
+                                        let areValuesDifferentForKey = (compared1, key) => (compared2) => compared1[key] != compared2[key];
+                                        return Arrays.from(source.filter((elt) => toRemoveFromSource.every(areValuesDifferentForKey(elt, key))));
+                                    },
+                                };
+                            },
+                        };
+                    },
+                };
+            },
+        };
+    }
+}
+export default Arrays;

package/core/utils/DataBindObserver.d.ts

@@ -0,0 +1,74 @@
+declare type BindedVariablesDescriptor = {
+    expression: String;
+    variables: Array<Array<string>>;
+};
+declare type DataBindItem = {
+    propertyToUpdate: string;
+    bindedVariablesDescriptor: BindedVariablesDescriptor;
+};
+/**
+ * En appelant DataBindObserver.observe(HTMLElement) sun un élément html, tout les éléments peuvent être liés à au publisher a l'adresse déterminée parl'attribut dataProvider de l'un de ses ancêtres.
+ * Pour cela un MutationObserver est créé pour observer les changements d'attributs de l'élément.
+ * On peut alors ecrire ce genre de choses de manière a lier dynamiquement les données du publisher à l'élément html.
+ * <img data-bind ::src="$img.avatar" ::title="ucFirst|$img.caption" />
+ * <a data-bind ::href="mailto:$email" ::inner-html="$email"></a>
+ * Voir la doc de subscriber à ce sujet car il l'utilise par défaut.
+ */
+export default class DataBindObserver {
+    /**
+     * Maintient la liste des éléments observés de manière à pouvoir les désinscrire quand ils sont supprimés.
+     */
+    static observedElements: Map<Node, MutationObserver>;
+    /**
+     * Commencer à observer un élément html.
+     */
+    static observe(element: HTMLElement): void;
+    /**
+     * Arrêter à observer un élément html.
+     */
+    static unObserve(element: HTMLElement): void;
+    static onAdded(elt: HTMLElement): void;
+    static onRemoved(elt: HTMLElement): void;
+    /**
+     * Callback appelé par le MutationObserver
+     */
+    static onMutation(list: MutationRecord[]): void;
+    static publisherListeners: Map<HTMLElement, any[]>;
+    /**
+     * La liaison avec le publisher supprimée ici.
+     */
+    static removePublisherListeners(target: HTMLElement): void;
+    /**
+     *
+     * Cette fonction prend l'expression fournie et trouves toutes les occurences du type $.clef1.clef2.clef3 ou $a.b par exemple.
+     * Les occurences sont ensuite mises dans un table de la forme [["clef1", "clef2", "clef3"],["a", "b"],...]
+     * Note : si une clef contien un point, on peut l'échapper en écrivant par exemple "$a.b.c\.d\.e" pour cibler value dans {a:{b:{"c.d.e":value}}}
+     * Propriétés du retour (du type BindedVariablesDescriptor) :
+     *  * expression :  l'expression initiale sans les échappements
+     *  * variables : le tableau d'"adresses" de variables décrit ci-dessus
+     */
+    static getVariablesDescriptor(expression: string): BindedVariablesDescriptor;
+    /**
+     * Extrait des "DataBindItems" a partir d'un élément html.
+     * Pour chaque attribut dont le nom commence par ::, un dataBindItem est créé.
+     * * Proriété "propertyToUpdate" du DataBindItem :
+     *   Le nom de l'attribut modifié en transformant La notation en hyphen ("-") en KamelCase.
+     *   un cas spécial est créé pour *-html qui retourne *HTML par exemple inner-html devient innerHTML
+     *   Cela représente la propriété à mettre à jour sur l'élément lors de la modification d'une des variables liées dans le publicheur.
+     * * Propriété "bindedVariablesDescriptor" du DataBindItem : voir la fonction getVariablesDescriptor
+     */
+    static getDataBindItems(element: HTMLElement): DataBindItem[];
+    /**
+     * Cette fonction récuperer le (sous) publisher a l'adresse donnée.
+     * Si l'une des clef de l'adresse est _self_, on garde le publisher courant et on passe à la suite.
+     * Ceci est un cas spécial, c'est pour ça qu'on utilisa pes Objects.traverse.
+     * Il y a toujours un publisher quelque soit l'adresse ce qui permet de cibler des valeurs qui n'existent pas encore
+     */
+    static getSubPublisher(pub: any, pathArray: string[]): any;
+    /**
+     * La liaison avec le publisher est faite ici.
+     * TODO Sans doute factoriser
+     */
+    static addPublisherListeners(target: HTMLElement): void;
+}
+export {};

package/core/utils/DataBindObserver.js

@@ -0,0 +1,252 @@
+import Objects from "@supersoniks/concorde/core/utils/Objects";
+import Format from "@supersoniks/concorde/core/utils/Format";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy.mjs";
+/**
+ * En appelant DataBindObserver.observe(HTMLElement) sun un élément html, tout les éléments peuvent être liés à au publisher a l'adresse déterminée parl'attribut dataProvider de l'un de ses ancêtres.
+ * Pour cela un MutationObserver est créé pour observer les changements d'attributs de l'élément.
+ * On peut alors ecrire ce genre de choses de manière a lier dynamiquement les données du publisher à l'élément html.
+ * <img data-bind ::src="$img.avatar" ::title="ucFirst|$img.caption" />
+ * <a data-bind ::href="mailto:$email" ::inner-html="$email"></a>
+ * Voir la doc de subscriber à ce sujet car il l'utilise par défaut.
+ */
+export default class DataBindObserver {
+    /**
+     * Commencer à observer un élément html.
+     */
+    static observe(element) {
+        if (DataBindObserver.observedElements.has(element))
+            return;
+        let obs = new MutationObserver(DataBindObserver.onMutation);
+        let opt = {};
+        opt.childList = true;
+        opt.subtree = true;
+        opt.attributes = true;
+        opt.attributeFilter = ["data-bind"];
+        obs.observe(element, opt);
+        element.querySelectorAll("[data-bind]").forEach((e) => DataBindObserver.addPublisherListeners(e));
+        DataBindObserver.observedElements.set(element, obs);
+    }
+    /**
+     * Arrêter à observer un élément html.
+     */
+    static unObserve(element) {
+        let observer = this.observedElements.get(element);
+        if (!observer)
+            return;
+        observer.disconnect();
+        element.querySelectorAll("[data-bind]").forEach((e) => DataBindObserver.removePublisherListeners(e));
+    }
+    static onAdded(elt) {
+        if (elt.hasAttribute && elt.hasAttribute("data-bind"))
+            DataBindObserver.addPublisherListeners(elt);
+        if (elt.querySelectorAll)
+            elt.querySelectorAll("[data-bind]").forEach((e) => DataBindObserver.addPublisherListeners(e));
+        else
+            elt.childNodes.forEach((elt) => DataBindObserver.onAdded(elt));
+    }
+    static onRemoved(elt) {
+        if (elt.hasAttribute && elt.hasAttribute("data-bind"))
+            DataBindObserver.removePublisherListeners(elt);
+        if (elt.querySelectorAll)
+            elt
+                .querySelectorAll("[data-bind]")
+                .forEach((e) => DataBindObserver.removePublisherListeners(e));
+        else
+            elt.childNodes.forEach((elt) => DataBindObserver.onRemoved(elt));
+    }
+    /**
+     * Callback appelé par le MutationObserver
+     */
+    static onMutation(list) {
+        for (let l of list) {
+            switch (l.type) {
+                case "attributes":
+                    DataBindObserver.addPublisherListeners(l.target);
+                    break;
+                case "childList":
+                    var added = l.addedNodes;
+                    var removed = l.removedNodes;
+                    added.forEach((elt) => {
+                        DataBindObserver.onAdded(elt);
+                    });
+                    removed.forEach((elt) => {
+                        DataBindObserver.onRemoved(elt);
+                    });
+                    break;
+            }
+        }
+    }
+    /**
+     * La liaison avec le publisher supprimée ici.
+     */
+    static removePublisherListeners(target) {
+        let conf = DataBindObserver.publisherListeners.get(target);
+        if (!conf)
+            return;
+        DataBindObserver.publisherListeners.delete(target);
+        conf.forEach((currentConf) => {
+            currentConf.publisher.offAssign(currentConf.onAssign);
+        });
+    }
+    /**
+     *
+     * Cette fonction prend l'expression fournie et trouves toutes les occurences du type $.clef1.clef2.clef3 ou $a.b par exemple.
+     * Les occurences sont ensuite mises dans un table de la forme [["clef1", "clef2", "clef3"],["a", "b"],...]
+     * Note : si une clef contien un point, on peut l'échapper en écrivant par exemple "$a.b.c\.d\.e" pour cibler value dans {a:{b:{"c.d.e":value}}}
+     * Propriétés du retour (du type BindedVariablesDescriptor) :
+     *  * expression :  l'expression initiale sans les échappements
+     *  * variables : le tableau d'"adresses" de variables décrit ci-dessus
+     */
+    static getVariablesDescriptor(expression) {
+        let variables = expression.match(/(\$(?:\w+\\?\.?)+)/g);
+        if (!variables)
+            variables = [expression];
+        else
+            variables = variables.map((v) => v.replace("$", ""));
+        variables = variables.filter((v) => v.length > 0);
+        return {
+            expression: expression.replace("\\", ""),
+            variables: variables.map((v) => v.split(/\b\.\b/).map((e) => e.replace("\\", ""))),
+        };
+    }
+    /**
+     * Extrait des "DataBindItems" a partir d'un élément html.
+     * Pour chaque attribut dont le nom commence par ::, un dataBindItem est créé.
+     * * Proriété "propertyToUpdate" du DataBindItem :
+     *   Le nom de l'attribut modifié en transformant La notation en hyphen ("-") en KamelCase.
+     *   un cas spécial est créé pour *-html qui retourne *HTML par exemple inner-html devient innerHTML
+     *   Cela représente la propriété à mettre à jour sur l'élément lors de la modification d'une des variables liées dans le publicheur.
+     * * Propriété "bindedVariablesDescriptor" du DataBindItem : voir la fonction getVariablesDescriptor
+     */
+    static getDataBindItems(element) {
+        return Array.from(element.attributes)
+            .filter((attribute) => attribute.name.indexOf("::") == 0)
+            .map((e) => {
+            let name = e.name.substring(2);
+            return {
+                propertyToUpdate: name.replace(/\-((html)|\w)/g, (match) => match.substring(1).toUpperCase()),
+                bindedVariablesDescriptor: DataBindObserver.getVariablesDescriptor(e.value),
+            };
+        });
+    }
+    /**
+     * Cette fonction récuperer le (sous) publisher a l'adresse donnée.
+     * Si l'une des clef de l'adresse est _self_, on garde le publisher courant et on passe à la suite.
+     * Ceci est un cas spécial, c'est pour ça qu'on utilisa pes Objects.traverse.
+     * Il y a toujours un publisher quelque soit l'adresse ce qui permet de cibler des valeurs qui n'existent pas encore
+     */
+    static getSubPublisher(pub, pathArray) {
+        for (let key of pathArray) {
+            if (key == "_self_")
+                continue;
+            pub = pub[key];
+        }
+        return pub;
+    }
+    /**
+     * La liaison avec le publisher est faite ici.
+     * TODO Sans doute factoriser
+     */
+    static addPublisherListeners(target) {
+        DataBindObserver.removePublisherListeners(target);
+        /**
+         * On récupère le publisher viea le dataProvider d'un ancêtre de l'élément.
+         */
+        let node = target;
+        let dataProviderId = HTML.getAncestorAttributeValue(node.parentNode || node.host || node, "dataProvider");
+        if (!dataProviderId)
+            return;
+        let publisher = PublisherManager.getInstance().get(dataProviderId);
+        let dataBindItems = DataBindObserver.getDataBindItems(target);
+        let conf = [];
+        /**
+         * Pour chaque attribut => dataBindItems on fait la liaison avec les (sous) publishers associés aux variables extraites
+         * Lorsqu'une assignation est faite sur un des publishers liés, on met à jour la propriété de target dont le nom est renseigne dans l'attribut "propertyToUpdate du databindItem".
+         * Cette mise à jour est effectuée dans la fonction onAssign.
+         * On peut utiliser les fonctions présentes dans Format.ts notamment Format.js qui permet par exemple d'interpréter des expressions js simples.
+         * Attentions, les Objets/tableaus sont rendus en chaine avant l'interprétation dans ce cas.
+         */
+        dataBindItems.forEach((dataBindItem) => {
+            let bindedVariablesDescriptor = dataBindItem.bindedVariablesDescriptor;
+            let propertyToUpdate = dataBindItem.propertyToUpdate;
+            for (let value of bindedVariablesDescriptor.variables) {
+                let publisherPathArray = value;
+                let pub = publisher;
+                pub = DataBindObserver.getSubPublisher(publisher, publisherPathArray);
+                let rec = target;
+                let currentConf = {
+                    publisher: pub,
+                    onAssign: () => {
+                        let values = bindedVariablesDescriptor.variables.map((dataPath) => {
+                            return DataBindObserver.getSubPublisher(publisher, dataPath).get();
+                        });
+                        let expression = bindedVariablesDescriptor.expression;
+                        let hasUndeterminatedValue = false;
+                        /*
+                         * Si il n'y a qu'une variable on injecte la variable brute ce qui permet d'utiliser des objets composites
+                         * Dans le cas des des expressions complexes (plus bas, avec plusieurs variables) les objets deviennent des chaines de caractères.)
+                         */
+                        if (values.length == 1 && bindedVariablesDescriptor.variables[0].join(".") == expression.substring(1)) {
+                            let value = values[0];
+                            if (Objects.isObject(value) &&
+                                value.hasOwnProperty("__value") &&
+                                (Objects.isUndefindOrNull(value.__value) || value.__value === "")) {
+                                value = "";
+                            }
+                            rec[propertyToUpdate] = value;
+                            return;
+                        }
+                        /**
+                         * Expressions avec plusieurs variables
+                         */
+                        for (let i = 0; i < values.length; i++) {
+                            let value = values[i];
+                            let variable = bindedVariablesDescriptor.variables[i];
+                            if (Objects.isObject(value) &&
+                                value.hasOwnProperty("__value") &&
+                                Objects.isUndefindOrNull(value.__value)) {
+                                hasUndeterminatedValue = true;
+                                value = undefined;
+                            }
+                            expression = expression.replace("$" + variable.join("."), value);
+                        }
+                        /**
+                         * Ce bout de code doit être un relicat
+                         */
+                        // if (Objects.isObject(expression) && !expression.hasOwnProperty("__value")) {
+                        //   rec[propertyToUpdate] = expression;
+                        //   return;
+                        // } else if (Objects.isObject(expression) && !expression.__value) expression = "";
+                        // else
+                        if (expression.indexOf("|") != -1) {
+                            let funcDelimiterIdx = expression.indexOf("|");
+                            if (funcDelimiterIdx == 0) {
+                                expression = Format.js(expression.substring(1));
+                            }
+                            else {
+                                let funcName = expression.substring(0, funcDelimiterIdx);
+                                let funcArgs = expression.substring(funcDelimiterIdx + 1);
+                                let fmt = Format;
+                                expression = hasUndeterminatedValue ? "" : fmt[funcName] ? fmt[funcName](funcArgs) : expression;
+                            }
+                        }
+                        else {
+                            expression = hasUndeterminatedValue ? "" : expression;
+                        }
+                        rec[propertyToUpdate] = expression;
+                    },
+                };
+                pub.onAssign(currentConf.onAssign);
+                conf.push(currentConf);
+            }
+        });
+        DataBindObserver.publisherListeners.set(target, conf);
+    }
+}
+/**
+ * Maintient la liste des éléments observés de manière à pouvoir les désinscrire quand ils sont supprimés.
+ */
+DataBindObserver.observedElements = new Map();
+DataBindObserver.publisherListeners = new Map();
+DataBindObserver.observe(document.documentElement);

package/core/utils/Format.d.ts

@@ -0,0 +1,11 @@
+declare class Format {
+    /**
+     * Passe le premier caractère de la chaine en majuscule
+     */
+    static ucFirst(str: string): string;
+    /**
+     * Retourne le résultat de l'évaluation de la chaine fournie
+     */
+    static js(value: string): any;
+}
+export default Format;

package/core/utils/Format.js

@@ -0,0 +1,22 @@
+class Format {
+    /**
+     * Passe le premier caractère de la chaine en majuscule
+     */
+    static ucFirst(str) {
+        if (typeof str != "string")
+            return str;
+        return str.charAt(0).toUpperCase() + str.substring(1);
+    }
+    /**
+     * Retourne le résultat de l'évaluation de la chaine fournie
+     */
+    static js(value) {
+        try {
+            return Function("return " + value)();
+        }
+        catch (e) {
+            return "";
+        }
+    }
+}
+export default Format;

package/core/utils/HTML.d.ts

@@ -0,0 +1,13 @@
+declare class HTML {
+    /**
+     * retourne la langue de la page courante telle que défini via l'attribut lang de la balise html
+     */
+    static getLanguage(): string;
+    /**
+     * Va de parent en parent en partant de node pour trouver un attribut
+     * @param attributeName nom de l'attribut
+     * @returns valeur de l'attribut ou null si l'attribut n'est pas trouvé
+     */
+    static getAncestorAttributeValue(node: any, attributeName: string): string | null;
+}
+export default HTML;

package/core/utils/HTML.js

@@ -0,0 +1,26 @@
+class HTML {
+    /**
+     * retourne la langue de la page courante telle que défini via l'attribut lang de la balise html
+     */
+    static getLanguage() {
+        return document.getElementsByTagName("html")[0].getAttribute("lang");
+    }
+    /**
+     * Va de parent en parent en partant de node pour trouver un attribut
+     * @param attributeName nom de l'attribut
+     * @returns valeur de l'attribut ou null si l'attribut n'est pas trouvé
+     */
+    static getAncestorAttributeValue(node, attributeName) {
+        while (!(node.hasAttribute && node.hasAttribute(attributeName))) {
+            const newNode = node.parentNode || node.host;
+            if (!newNode)
+                break;
+            node = node.parentNode || node.host;
+        }
+        if (!node.hasAttribute) {
+            return null;
+        }
+        return node.getAttribute(attributeName);
+    }
+}
+export default HTML;

package/core/utils/LocationHandler.d.ts

@@ -0,0 +1,44 @@
+declare type Listener = {
+    location: string;
+};
+declare type ActivableLink = {
+    location: string;
+    href: string;
+    setAttribute(name: string, value: string): void;
+    removeAttribute(name: string): void;
+};
+/**
+ * Gestionnaire d'écoute des modifications sur l'url courante.
+ * On peut s'y abonner via la methode statique onChange()
+ * Utilisé par sonic-bouton pour lm'affichage de l'état actif et par le router.
+ */
+export default class LocationHandler {
+    static listeners: Array<Listener>;
+    static listening: boolean;
+    static prevURL: string;
+    static listen(): void;
+    /**
+     * Arrête l'écoute des changements de location pour le listener fournit
+     */
+    static offChange(listener: Listener): void;
+    /**
+     * Ecoute les changements de location et l'assigne à la propriété location de chaque listener
+     */
+    static onChange(listener: Listener): void;
+    /**
+     *
+     * @param component HTMLElement
+     * Recupère la proprité to ou href de l'élément et lance la navigation
+     * Si l'attribut pushState est présent la naviguation se fait via un pushState
+     * Si l'attribut replaceState est présent la naviguation se fait via un replaceState
+     * Voir link et button pour les exemples d'implémentation
+     **/
+    static changeFromComponent(component: any): void;
+    /**
+     *
+     * @param component ActivableLink
+     * Ajoute l'attribut "active" à l'élément si l'url correspond à la location
+     */
+    static updateComponentActiveState(component: ActivableLink): void;
+}
+export {};