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

   1 import addRemoveRows from "./add-remove-rows.js"
   2 import ajaxDeleteRow from "./ajax-delete-row.js"
   3 import ajaxForm from "./ajax-form.js"
   4 import attachments from "./attachments.js"
   5 import autoSuggest from "./auto-suggest.js"
   6 import backToTop from "./back-to-top.js"
   7 import bookSort from "./book-sort.js"
   8 import breadcrumbListing from "./breadcrumb-listing.js"
   9 import chapterToggle from "./chapter-toggle.js"
  10 import codeEditor from "./code-editor.js"
  11 import codeHighlighter from "./code-highlighter.js"
  12 import collapsible from "./collapsible.js"
  13 import customCheckbox from "./custom-checkbox.js"
  14 import detailsHighlighter from "./details-highlighter.js"
  15 import dropdown from "./dropdown.js"
  16 import dropzone from "./dropzone.js"
  17 import editorToolbox from "./editor-toolbox.js"
  18 import entityPermissionsEditor from "./entity-permissions-editor.js"
  19 import entitySearch from "./entity-search.js"
  20 import entitySelector from "./entity-selector.js"
  21 import entitySelectorPopup from "./entity-selector-popup.js"
  22 import eventEmitSelect from "./event-emit-select.js"
  23 import expandToggle from "./expand-toggle.js"
  24 import headerMobileToggle from "./header-mobile-toggle.js"
  25 import homepageControl from "./homepage-control.js"
  26 import imageManager from "./image-manager.js"
  27 import imagePicker from "./image-picker.js"
  28 import index from "./index.js"
  29 import listSortControl from "./list-sort-control.js"
  30 import markdownEditor from "./markdown-editor.js"
  31 import newUserPassword from "./new-user-password.js"
  32 import notification from "./notification.js"
  33 import optionalInput from "./optional-input.js"
  34 import pageComments from "./page-comments.js"
  35 import pageDisplay from "./page-display.js"
  36 import pageEditor from "./page-editor.js"
  37 import pagePicker from "./page-picker.js"
  38 import permissionsTable from "./permissions-table.js"
  39 import popup from "./popup.js"
  40 import settingAppColorPicker from "./setting-app-color-picker.js"
  41 import settingColorPicker from "./setting-color-picker.js"
  42 import shelfSort from "./shelf-sort.js"
  43 import sidebar from "./sidebar.js"
  44 import sortableList from "./sortable-list.js"
  45 import tabs from "./tabs.js"
  46 import tagManager from "./tag-manager.js"
  47 import templateManager from "./template-manager.js"
  48 import toggleSwitch from "./toggle-switch.js"
  49 import triLayout from "./tri-layout.js"
  50 import wysiwygEditor from "./wysiwyg-editor.js"
  51
  52 const componentMapping = {
  53     "add-remove-rows": addRemoveRows,
  54     "ajax-delete-row": ajaxDeleteRow,
  55     "ajax-form": ajaxForm,
  56     "attachments": attachments,
  57     "auto-suggest": autoSuggest,
  58     "back-to-top": backToTop,
  59     "book-sort": bookSort,
  60     "breadcrumb-listing": breadcrumbListing,
  61     "chapter-toggle": chapterToggle,
  62     "code-editor": codeEditor,
  63     "code-highlighter": codeHighlighter,
  64     "collapsible": collapsible,
  65     "custom-checkbox": customCheckbox,
  66     "details-highlighter": detailsHighlighter,
  67     "dropdown": dropdown,
  68     "dropzone": dropzone,
  69     "editor-toolbox": editorToolbox,
  70     "entity-permissions-editor": entityPermissionsEditor,
  71     "entity-search": entitySearch,
  72     "entity-selector": entitySelector,
  73     "entity-selector-popup": entitySelectorPopup,
  74     "event-emit-select": eventEmitSelect,
  75     "expand-toggle": expandToggle,
  76     "header-mobile-toggle": headerMobileToggle,
  77     "homepage-control": homepageControl,
  78     "image-manager": imageManager,
  79     "image-picker": imagePicker,
  80     "index": index,
  81     "list-sort-control": listSortControl,
  82     "markdown-editor": markdownEditor,
  83     "new-user-password": newUserPassword,
  84     "notification": notification,
  85     "optional-input": optionalInput,
  86     "page-comments": pageComments,
  87     "page-display": pageDisplay,
  88     "page-editor": pageEditor,
  89     "page-picker": pagePicker,
  90     "permissions-table": permissionsTable,
  91     "popup": popup,
  92     "setting-app-color-picker": settingAppColorPicker,
  93     "setting-color-picker": settingColorPicker,
  94     "shelf-sort": shelfSort,
  95     "sidebar": sidebar,
  96     "sortable-list": sortableList,
  97     "tabs": tabs,
  98     "tag-manager": tagManager,
  99     "template-manager": templateManager,
 100     "toggle-switch": toggleSwitch,
 101     "tri-layout": triLayout,
 102     "wysiwyg-editor": wysiwygEditor,
 103 };
 104
 105 window.components = {};
 106
 107 /**
 108  * Initialize components of the given name within the given element.
 109  * @param {String} componentName
 110  * @param {HTMLElement|Document} parentElement
 111  */
 112 function searchForComponentInParent(componentName, parentElement) {
 113     const elems = parentElement.querySelectorAll(`[${componentName}]`);
 114     for (let j = 0, jLen = elems.length; j < jLen; j++) {
 115         initComponent(componentName, elems[j]);
 116     }
 117 }
 118
 119 /**
 120  * Initialize a component instance on the given dom element.
 121  * @param {String} name
 122  * @param {Element} element
 123  */
 124 function initComponent(name, element) {
 125     const componentModel = componentMapping[name];
 126     if (componentModel === undefined) return;
 127
 128     // Create our component instance
 129     let instance;
 130     try {
 131         instance = new componentModel(element);
 132         instance.$el = element;
 133         const allRefs = parseRefs(name, element);
 134         instance.$refs = allRefs.refs;
 135         instance.$manyRefs = allRefs.manyRefs;
 136         instance.$opts = parseOpts(name, element);
 137         instance.$emit = (eventName, data = {}) => {
 138             data.from = instance;
 139             const event = new CustomEvent(`${name}-${eventName}`, {
 140                 bubbles: true,
 141                 detail: data
 142             });
 143             instance.$el.dispatchEvent(event);
 144         };
 145         if (typeof instance.setup === 'function') {
 146             instance.setup();
 147         }
 148     } catch (e) {
 149         console.error('Failed to create component', e, name, element);
 150     }
 151
 152
 153     // Add to global listing
 154     if (typeof window.components[name] === "undefined") {
 155         window.components[name] = [];
 156     }
 157     window.components[name].push(instance);
 158
 159     // Add to element listing
 160     if (typeof element.components === 'undefined') {
 161         element.components = {};
 162     }
 163     element.components[name] = instance;
 164 }
 165
 166 /**
 167  * Parse out the element references within the given element
 168  * for the given component name.
 169  * @param {String} name
 170  * @param {Element} element
 171  */
 172 function parseRefs(name, element) {
 173     const refs = {};
 174     const manyRefs = {};
 175
 176     const prefix = `${name}@`
 177     const selector = `[refs*="${prefix}"]`;
 178     const refElems = [...element.querySelectorAll(selector)];
 179     if (element.matches(selector)) {
 180         refElems.push(element);
 181     }
 182
 183     for (const el of refElems) {
 184         const refNames = el.getAttribute('refs')
 185             .split(' ')
 186             .filter(str => str.startsWith(prefix))
 187             .map(str => str.replace(prefix, ''))
 188             .map(kebabToCamel);
 189         for (const ref of refNames) {
 190             refs[ref] = el;
 191             if (typeof manyRefs[ref] === 'undefined') {
 192                 manyRefs[ref] = [];
 193             }
 194             manyRefs[ref].push(el);
 195         }
 196     }
 197     return {refs, manyRefs};
 198 }
 199
 200 /**
 201  * Parse out the element component options.
 202  * @param {String} name
 203  * @param {Element} element
 204  * @return {Object<String, String>}
 205  */
 206 function parseOpts(name, element) {
 207     const opts = {};
 208     const prefix = `option:${name}:`;
 209     for (const {name, value} of element.attributes) {
 210         if (name.startsWith(prefix)) {
 211             const optName = name.replace(prefix, '');
 212             opts[kebabToCamel(optName)] = value || '';
 213         }
 214     }
 215     return opts;
 216 }
 217
 218 /**
 219  * Convert a kebab-case string to camelCase
 220  * @param {String} kebab
 221  * @returns {string}
 222  */
 223 function kebabToCamel(kebab) {
 224     const ucFirst = (word) => word.slice(0,1).toUpperCase() + word.slice(1);
 225     const words = kebab.split('-');
 226     return words[0] + words.slice(1).map(ucFirst).join('');
 227 }
 228
 229 /**
 230  * Initialize all components found within the given element.
 231  * @param parentElement
 232  */
 233 function initAll(parentElement) {
 234     if (typeof parentElement === 'undefined') parentElement = document;
 235
 236     // Old attribute system
 237     for (const componentName of Object.keys(componentMapping)) {
 238         searchForComponentInParent(componentName, parentElement);
 239     }
 240
 241     // New component system
 242     const componentElems = parentElement.querySelectorAll(`[component],[components]`);
 243
 244     for (const el of componentElems) {
 245         const componentNames = `${el.getAttribute('component') || ''} ${(el.getAttribute('components'))}`.toLowerCase().split(' ').filter(Boolean);
 246         for (const name of componentNames) {
 247             initComponent(name, el);
 248         }
 249     }
 250 }
 251
 252 window.components.init = initAll;
 253 window.components.first = (name) => (window.components[name] || [null])[0];
 254
 255 export default initAll;
 256
 257 /**
 258  * @typedef Component
 259  * @property {HTMLElement} $el
 260  * @property {Object<String, HTMLElement>} $refs
 261  * @property {Object<String, HTMLElement[]>} $manyRefs
 262  * @property {Object<String, String>} $opts
 263  * @property {function(string, Object)} $emit
 264  */