BookStack Code Mirror - bookstack/blob - resources/js/components/index.js

   1 const componentMapping = {};
   2
   3 const definitionFiles = require.context('./', false, /\.js$/);
   4 for (const fileName of definitionFiles.keys()) {
   5     const name = fileName.replace('./', '').split('.')[0];
   6     if (name !== 'index') {
   7         componentMapping[name] = definitionFiles(fileName).default;
   8     }
   9 }
  10
  11 window.components = {};
  12
  13 /**
  14  * Initialize components of the given name within the given element.
  15  * @param {String} componentName
  16  * @param {HTMLElement|Document} parentElement
  17  */
  18 function searchForComponentInParent(componentName, parentElement) {
  19     const elems = parentElement.querySelectorAll(`[${componentName}]`);
  20     for (let j = 0, jLen = elems.length; j < jLen; j++) {
  21         initComponent(componentName, elems[j]);
  22     }
  23 }
  24
  25 /**
  26  * Initialize a component instance on the given dom element.
  27  * @param {String} name
  28  * @param {Element} element
  29  */
  30 function initComponent(name, element) {
  31     const componentModel = componentMapping[name];
  32     if (componentModel === undefined) return;
  33
  34     // Create our component instance
  35     let instance;
  36     try {
  37         instance = new componentModel(element);
  38         instance.$el = element;
  39         const allRefs = parseRefs(name, element);
  40         instance.$refs = allRefs.refs;
  41         instance.$manyRefs = allRefs.manyRefs;
  42         instance.$opts = parseOpts(name, element);
  43         if (typeof instance.setup === 'function') {
  44             instance.setup();
  45         }
  46     } catch (e) {
  47         console.error('Failed to create component', e, name, element);
  48     }
  49
  50
  51     // Add to global listing
  52     if (typeof window.components[name] === "undefined") {
  53         window.components[name] = [];
  54     }
  55     window.components[name].push(instance);
  56
  57     // Add to element listing
  58     if (typeof element.components === 'undefined') {
  59         element.components = {};
  60     }
  61     element.components[name] = instance;
  62 }
  63
  64 /**
  65  * Parse out the element references within the given element
  66  * for the given component name.
  67  * @param {String} name
  68  * @param {Element} element
  69  */
  70 function parseRefs(name, element) {
  71     const refs = {};
  72     const manyRefs = {};
  73
  74     const prefix = `${name}@`
  75     const selector = `[refs*="${prefix}"]`;
  76     const refElems = [...element.querySelectorAll(selector)];
  77     if (element.matches(selector)) {
  78         refElems.push(element);
  79     }
  80
  81     for (const el of refElems) {
  82         const refNames = el.getAttribute('refs')
  83             .split(' ')
  84             .filter(str => str.startsWith(prefix))
  85             .map(str => str.replace(prefix, ''))
  86             .map(kebabToCamel);
  87         for (const ref of refNames) {
  88             refs[ref] = el;
  89             if (typeof manyRefs[ref] === 'undefined') {
  90                 manyRefs[ref] = [];
  91             }
  92             manyRefs[ref].push(el);
  93         }
  94     }
  95     return {refs, manyRefs};
  96 }
  97
  98 /**
  99  * Parse out the element component options.
 100  * @param {String} name
 101  * @param {Element} element
 102  * @return {Object<String, String>}
 103  */
 104 function parseOpts(name, element) {
 105     const opts = {};
 106     const prefix = `option:${name}:`;
 107     for (const {name, value} of element.attributes) {
 108         if (name.startsWith(prefix)) {
 109             const optName = name.replace(prefix, '');
 110             opts[kebabToCamel(optName)] = value || '';
 111         }
 112     }
 113     return opts;
 114 }
 115
 116 /**
 117  * Convert a kebab-case string to camelCase
 118  * @param {String} kebab
 119  * @returns {string}
 120  */
 121 function kebabToCamel(kebab) {
 122     const ucFirst = (word) => word.slice(0,1).toUpperCase() + word.slice(1);
 123     const words = kebab.split('-');
 124     return words[0] + words.slice(1).map(ucFirst).join();
 125 }
 126
 127 /**
 128  * Initialize all components found within the given element.
 129  * @param parentElement
 130  */
 131 function initAll(parentElement) {
 132     if (typeof parentElement === 'undefined') parentElement = document;
 133
 134     // Old attribute system
 135     for (const componentName of Object.keys(componentMapping)) {
 136         searchForComponentInParent(componentName, parentElement);
 137     }
 138
 139     // New component system
 140     const componentElems = parentElement.querySelectorAll(`[component],[components]`);
 141
 142     for (const el of componentElems) {
 143         const componentNames = `${el.getAttribute('component') || ''} ${(el.getAttribute('components'))}`.toLowerCase().split(' ').filter(Boolean);
 144         for (const name of componentNames) {
 145             initComponent(name, el);
 146         }
 147     }
 148 }
 149
 150 window.components.init = initAll;
 151 window.components.first = (name) => (window.components[name] || [null])[0];
 152
 153 export default initAll;
 154
 155 /**
 156  * @typedef Component
 157  * @property {HTMLElement} $el
 158  * @property {Object<String, HTMLElement>} $refs
 159  * @property {Object<String, HTMLElement[]>} $manyRefs
 160  * @property {Object<String, String>} $opts
 161  */