Fixed OIDC Logout

[bookstack] / resources / js / services / components.js

diff --git a/resources/js/services/components.js b/resources/js/services/components.js
index 006f16e86f4b20711dc8f5aac8e71386f840c234..beb0ce92fbf38863e91f27e03e8528f7e86cc378 100644 (file)
--- a/resources/js/services/components.js
+++ b/resources/js/services/components.js
@@ -1,44 +1,23 @@
-const components = {};
-const componentMap = {};
+import {kebabToCamel, camelToKebab} from './text';

 
 /**
 
 /**

- * Initialize a component instance on the given dom element.
- * @param {String} name
- * @param {Element} element
+ * A mapping of active components keyed by name, with values being arrays of component
+ * instances since there can be multiple components of the same type.
+ * @type {Object<String, Component[]>}

  */
  */

-function initComponent(name, element) {
-    /** @type {Function<Component>|undefined} **/
-    const componentModel = componentMap[name];
-    if (componentModel === undefined) return;
-
-    // Create our component instance
-    /** @type {Component} **/
-    let instance;
-    try {
-        instance = new componentModel();
-        instance.$name = name;
-        instance.$el = element;
-        const allRefs = parseRefs(name, element);
-        instance.$refs = allRefs.refs;
-        instance.$manyRefs = allRefs.manyRefs;
-        instance.$opts = parseOpts(name, element);
-        instance.setup();
-    } catch (e) {
-        console.error('Failed to create component', e, name, element);
-    }
+const components = {};

 
 

-    // Add to global listing
-    if (typeof components[name] === "undefined") {
-        components[name] = [];
-    }
-    components[name].push(instance);
+/**
+ * A mapping of component class models, keyed by name.
+ * @type {Object<String, Constructor<Component>>}
+ */
+const componentModelMap = {};

 
 

-    // Add to element listing
-    if (typeof element.components === 'undefined') {
-        element.components = {};
-    }
-    element.components[name] = instance;
-}
+/**
+ * A mapping of active component maps, keyed by the element components are assigned to.
+ * @type {WeakMap<Element, Object<String, Component>>}
+ */
+const elementComponentMap = new WeakMap();

 
 /**
  * Parse out the element references within the given element
 
 /**
  * Parse out the element references within the given element


@@ -50,7 +29,7 @@ function parseRefs(name, element) {
     const refs = {};
     const manyRefs = {};
 
     const refs = {};
     const manyRefs = {};
 

-    const prefix = `${name}@`
+    const prefix = `${name}@`;

     const selector = `[refs*="${prefix}"]`;
     const refElems = [...element.querySelectorAll(selector)];
     if (element.matches(selector)) {
     const selector = `[refs*="${prefix}"]`;
     const refElems = [...element.querySelectorAll(selector)];
     if (element.matches(selector)) {


@@ -76,13 +55,13 @@ function parseRefs(name, element) {
 
 /**
  * Parse out the element component options.
 
 /**
  * Parse out the element component options.

- * @param {String} name
+ * @param {String} componentName

  * @param {Element} element
  * @return {Object<String, String>}
  */
  * @param {Element} element
  * @return {Object<String, String>}
  */

-function parseOpts(name, element) {
+function parseOpts(componentName, element) {

     const opts = {};
     const opts = {};

-    const prefix = `option:${name}:`;
+    const prefix = `option:${componentName}:`;

     for (const {name, value} of element.attributes) {
         if (name.startsWith(prefix)) {
             const optName = name.replace(prefix, '');
     for (const {name, value} of element.attributes) {
         if (name.startsWith(prefix)) {
             const optName = name.replace(prefix, '');


@@ -93,14 +72,41 @@ function parseOpts(name, element) {
 }
 
 /**
 }
 
 /**

- * Convert a kebab-case string to camelCase
- * @param {String} kebab
- * @returns {string}
+ * Initialize a component instance on the given dom element.
+ * @param {String} name
+ * @param {Element} element

  */
  */

-function kebabToCamel(kebab) {
-    const ucFirst = (word) => word.slice(0,1).toUpperCase() + word.slice(1);
-    const words = kebab.split('-');
-    return words[0] + words.slice(1).map(ucFirst).join('');
+function initComponent(name, element) {
+    /** @type {Function<Component>|undefined} * */
+    const ComponentModel = componentModelMap[name];
+    if (ComponentModel === undefined) return;
+
+    // Create our component instance
+    /** @type {Component} * */
+    let instance;
+    try {
+        instance = new ComponentModel();
+        instance.$name = name;
+        instance.$el = element;
+        const allRefs = parseRefs(name, element);
+        instance.$refs = allRefs.refs;
+        instance.$manyRefs = allRefs.manyRefs;
+        instance.$opts = parseOpts(name, element);
+        instance.setup();
+    } catch (e) {
+        console.error('Failed to create component', e, name, element);
+    }
+
+    // Add to global listing
+    if (typeof components[name] === 'undefined') {
+        components[name] = [];
+    }
+    components[name].push(instance);
+
+    // Add to element mapping
+    const elComponents = elementComponentMap.get(element) || {};
+    elComponents[name] = instance;
+    elementComponentMap.set(element, elComponents);

 }
 
 /**
 }
 
 /**


@@ -108,7 +114,7 @@ function kebabToCamel(kebab) {
  * @param {Element|Document} parentElement
  */
 export function init(parentElement = document) {
  * @param {Element|Document} parentElement
  */
 export function init(parentElement = document) {

-    const componentElems = parentElement.querySelectorAll(`[component],[components]`);
+    const componentElems = parentElement.querySelectorAll('[component],[components]');

 
     for (const el of componentElems) {
         const componentNames = `${el.getAttribute('component') || ''} ${(el.getAttribute('components'))}`.toLowerCase().split(' ').filter(Boolean);
 
     for (const el of componentElems) {
         const componentNames = `${el.getAttribute('component') || ''} ${(el.getAttribute('components'))}`.toLowerCase().split(' ').filter(Boolean);


@@ -125,9 +131,8 @@ export function init(parentElement = document) {
 export function register(mapping) {
     const keys = Object.keys(mapping);
     for (const key of keys) {
 export function register(mapping) {
     const keys = Object.keys(mapping);
     for (const key of keys) {

-        componentMap[camelToKebab(key)] = mapping[key];
+        componentModelMap[camelToKebab(key)] = mapping[key];

     }
     }

-    console.log(componentMap);

 }
 
 /**
 }
 
 /**


@@ -144,10 +149,17 @@ export function first(name) {
  * @param {String} name
  * @returns {Component[]}
  */
  * @param {String} name
  * @returns {Component[]}
  */

-export function get(name = '') {
+export function get(name) {

     return components[name] || [];
 }
 
     return components[name] || [];
 }
 

-function camelToKebab(camelStr) {
-    return camelStr.replace(/[A-Z]/g, (str, offset) =>  (offset > 0 ? '-' : '') + str.toLowerCase());
-}
\ No newline at end of file
+/**
+ * Get the first component, of the given name, that's assigned to the given element.
+ * @param {Element} element
+ * @param {String} name
+ * @returns {Component|null}
+ */
+export function firstOnElement(element, name) {
+    const elComponents = elementComponentMap.get(element) || {};
+    return elComponents[name] || null;
+}