Feat(web): All JS plugins can now load configuration

lmc-eu · Nov 3, 2023 · 50cb350 · 50cb350
1 parent d52ae3f
commit 50cb350
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 39 deletions.
diff --git a/packages/web/src/js/AutoResize.ts b/packages/web/src/js/AutoResize.ts
@@ -1,6 +1,7 @@
 import BaseComponent from './BaseComponent';
 import { EventHandler, SelectorEngine } from './dom';
 import { enableToggleAutoloader } from './utils';
+import { SpiritConfig } from './utils/Config';
 
 const NAME = 'autoResize';
 const RESIZE_EVENT = 'resize';
@@ -17,8 +18,8 @@ class AutoResize extends BaseComponent {
     return `${this.NAME}`;
   }
 
-  constructor(element: HTMLElement) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
     this.input = SelectorEngine.findOne('textarea', this.element) as HTMLTextAreaElement;
 
     this.init();

diff --git a/packages/web/src/js/BaseComponent.ts b/packages/web/src/js/BaseComponent.ts
@@ -1,5 +1,5 @@
 import InstanceMap from './dom/InstanceMap';
-import Config from './utils/Config';
+import Config, { SpiritConfig } from './utils/Config';
 import { getElement } from './utils/index';
 
 interface IBaseComponent extends FunctionConstructor {
@@ -11,7 +11,8 @@ class BaseComponent extends Config {
   config: unknown;
   NAME: string | null;
 
-  constructor(element: SpiritElement | string, config) {
+  constructor(element: SpiritElement | string, config?: SpiritConfig) {
+    super();
     this.element = getElement(element);
     this.NAME = '';
     this.config = this.getConfig(config);
@@ -30,12 +31,11 @@ class BaseComponent extends Config {
     }
   }
 
-  getConfig(config) {
-    config = this.mergeConfigObj(config, this.element);
-    config = this.configAfterMerge(config);
-    this.typeCheckConfig(config);
+  getConfig(config?: SpiritConfig) {
+    const mergedConfig = Config.mergeConfigObj(config, this.element);
+    Config.typeCheckConfig(mergedConfig);
 
-    return config;
+    return mergedConfig;
   }
 
   static get NAME() {
@@ -46,12 +46,12 @@ class BaseComponent extends Config {
     return InstanceMap.get(getElement(element), this.INSTANCE_KEY);
   }
 
-  static getOrCreateInstance(element: SpiritElement) {
-    return this.getInstance(element) || this.createInstance(element);
+  static getOrCreateInstance(element: SpiritElement, config = {}) {
+    return this.getInstance(element) || this.createInstance(element, config);
   }
 
-  static createInstance(element: SpiritElement) {
-    return new this(element);
+  static createInstance(element: SpiritElement, config: SpiritConfig) {
+    return new this(element, typeof config === 'object' ? config : null);
   }
 
   static get INSTANCE_KEY() {

diff --git a/packages/web/src/js/Collapse.ts b/packages/web/src/js/Collapse.ts
@@ -1,16 +1,17 @@
 import BaseComponent from './BaseComponent';
-import { enableToggleAutoloader } from './utils/ComponentFunctions';
-import { executeAfterTransition } from './utils';
-import SelectorEngine from './dom/SelectorEngine';
-import EventHandler from './dom/EventHandler';
 import {
-  ARIA_EXPANDED_ATTRIBUTE,
   ARIA_CONTROLS_ATTRIBUTE,
-  NAME_DATA_TOGGLE,
-  NAME_DATA_TARGET,
+  ARIA_EXPANDED_ATTRIBUTE,
   CLASSNAME_OPEN,
   CLASSNAME_TRANSITION,
+  NAME_DATA_TARGET,
+  NAME_DATA_TOGGLE,
 } from './constants';
+import EventHandler from './dom/EventHandler';
+import SelectorEngine from './dom/SelectorEngine';
+import { executeAfterTransition } from './utils';
+import { enableToggleAutoloader } from './utils/ComponentFunctions';
+import { SpiritConfig } from './utils/Config';
 
 const NAME = 'collapse';
 const DATA_KEY = 'collapse';
@@ -36,8 +37,8 @@ class Collapse extends BaseComponent {
   meta: CollapseMeta;
   state: CollapseState;
 
-  constructor(element: HTMLElement) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
     this.target = this.element.dataset.spiritTarget
       ? SelectorEngine.findOne(`#${this.element.dataset.spiritTarget}`)
       : null;

diff --git a/packages/web/src/js/Dropdown.ts b/packages/web/src/js/Dropdown.ts
@@ -1,7 +1,8 @@
 import BaseComponent from './BaseComponent';
-import { enableToggleTrigger, clickOutsideElement } from './utils';
 import EventHandler from './dom/EventHandler';
 import SelectorEngine from './dom/SelectorEngine';
+import { clickOutsideElement, enableToggleTrigger } from './utils';
+import { SpiritConfig } from './utils/Config';
 
 interface DropdownStateProps {
   open: boolean;
@@ -30,8 +31,8 @@ class Dropdown extends BaseComponent {
   state: DropdownStateProps;
   options: DropdownOptionsProps;
 
-  constructor(element: SpiritElement) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
     this.target = SelectorEngine.findOne(`${this.element.dataset.spiritTarget}`);
     this.reference = this.findReferenceElement();
     this.state = {

diff --git a/packages/web/src/js/FileUploader.ts b/packages/web/src/js/FileUploader.ts
@@ -1,6 +1,7 @@
 import BaseComponent from './BaseComponent';
 import { EventHandler, SelectorEngine } from './dom';
 import { enableToggleAutoloader, image2Base64Preview } from './utils';
+import { SpiritConfig } from './utils/Config';
 
 const NAME = 'fileUploader';
 const EVENT_KEY = `.${NAME}`;
@@ -61,8 +62,8 @@ class FileUploader extends BaseComponent {
   errors: Record<string, string>;
   isDisabled: boolean;
 
-  constructor(element: HTMLElement) {
-    super(element);
+  constructor(element: HTMLElement, config?: SpiritConfig) {
+    super(element, config);
 
     this.wrapper = SelectorEngine.findOne(WRAPPER_ELEMENT_SELECTOR, element) as HTMLInputElement;
     this.inputElement = SelectorEngine.findOne(INPUT_ELEMENT_SELECTOR, element) as HTMLInputElement;

diff --git a/packages/web/src/js/Modal.ts b/packages/web/src/js/Modal.ts
@@ -2,6 +2,7 @@ import BaseComponent from './BaseComponent';
 import EventHandler from './dom/EventHandler';
 import SelectorEngine from './dom/SelectorEngine';
 import { enableToggleTrigger, ScrollControl } from './utils';
+import { SpiritConfig } from './utils/Config';
 
 const NAME = 'modal';
 
@@ -16,8 +17,8 @@ class Modal extends BaseComponent {
     return NAME;
   }
 
-  constructor(element: HTMLElement | string) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
 
     this.isShown = false;
     this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

diff --git a/packages/web/src/js/Password.ts b/packages/web/src/js/Password.ts
@@ -1,6 +1,7 @@
-import SelectorEngine from './dom/SelectorEngine';
 import BaseComponent from './BaseComponent';
+import SelectorEngine from './dom/SelectorEngine';
 import { enableToggleTrigger } from './utils/ComponentFunctions';
+import { SpiritConfig } from './utils/Config';
 
 const NAME = 'password';
 const PASSWORD_ARIA_PRESSED = 'aria-pressed';
@@ -14,8 +15,8 @@ class Password extends BaseComponent {
     return NAME;
   }
 
-  constructor(element: HTMLElement) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
 
     this.isShown = false;
   }

diff --git a/packages/web/src/js/ScrollView.ts b/packages/web/src/js/ScrollView.ts
@@ -4,6 +4,7 @@
 import BaseComponent from './BaseComponent';
 import { EventHandler, SelectorEngine } from './dom';
 import { debounce, enableToggleAutoloader } from './utils';
+import { SpiritConfig } from './utils/Config';
 
 export const Alignment = {
   LEFT: 'left',
@@ -59,8 +60,8 @@ class ScrollView extends BaseComponent {
     return `${this.NAME}`;
   }
 
-  constructor(element: SpiritElement) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
 
     this.currentPosition = {
       bottom: 0,

diff --git a/packages/web/src/js/Tabs.ts b/packages/web/src/js/Tabs.ts
@@ -2,6 +2,7 @@ import BaseComponent from './BaseComponent';
 import EventHandler from './dom/EventHandler';
 import SelectorEngine from './dom/SelectorEngine';
 import { enableToggleTrigger } from './utils/ComponentFunctions';
+import { SpiritConfig } from './utils/Config';
 import { getElementFromSelector } from './utils/index';
 
 const NAME = 'tabs';
@@ -24,8 +25,8 @@ const SELECTOR_INNER_ELEM = `${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE}`;
 class Tabs extends BaseComponent {
   parent: HTMLElement;
 
-  constructor(element: HTMLElement) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
     this.parent = (this.element as Element).closest(SELECTOR_TAB_PANEL) as HTMLElement;
 
     if (!this.parent) {

diff --git a/packages/web/src/js/Tooltip.ts b/packages/web/src/js/Tooltip.ts
@@ -1,7 +1,8 @@
 import BaseComponent from './BaseComponent';
 import EventHandler from './dom/EventHandler';
 import SelectorEngine from './dom/SelectorEngine';
-import { enableToggleTrigger, enableDismissTrigger } from './utils/ComponentFunctions';
+import { enableDismissTrigger, enableToggleTrigger } from './utils/ComponentFunctions';
+import { SpiritConfig } from './utils/Config';
 
 const NAME = 'tooltip';
 const DATA_KEY = 'tooltip';
@@ -18,8 +19,8 @@ const CLASS_NAME_HIDDEN = 'is-hidden';
 class Tooltip extends BaseComponent {
   tip: HTMLElement;
 
-  constructor(element: SpiritElement) {
-    super(element);
+  constructor(element: SpiritElement, config?: SpiritConfig) {
+    super(element, config);
 
     this.tip = this.getTipElement();
   }