allow users to override template options and styles

Author: KHOUBZA Younes

package-lock.json

@@ -29,6 +29,10 @@
     "type": "git",
     "url": "https://github.com/php-flasher/flasher-js.git"
   },
+  "dependencies": {
+    "csstype": "^3.0.9",
+    "deepmerge": "^4.2.2"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",

package.json

@@ -6,6 +6,7 @@ import {
   QueueableInterface,
   ResponseContext,
 } from './interfaces';
+import TemplateFactory from './template';
 
 export default class Flasher {
   private static instance: Flasher;
@@ -89,7 +90,6 @@ export default class Flasher {
 
   public renderEnvelopes(envelopes: Envelope[], context: ResponseContext): void {
     const queues = new Map<string, QueueableInterface>();
-
     envelopes.forEach((envelope) => {
       envelope.context = context;
       const factory = this.create(envelope.handler);
@@ -112,8 +112,8 @@ export default class Flasher {
   }
 
   public create(alias: string): FlasherInterface | undefined {
-    if (0 === alias.indexOf('template.')) {
-      return this.factories.get('template');
+    if (0 === alias.indexOf('template.') && !this.factories.has(alias)) {
+      this.addFactory(alias, new TemplateFactory());
     }
 
     return this.factories.get(alias);

src/flasher.ts

@@ -1,6 +1,10 @@
 import Flasher from './flasher';
 import './template';
+import TemplateFactory from './template';
 
 export * from './interfaces';
 
+const flasher = Flasher.getInstance();
+flasher.addFactory('template', new TemplateFactory());
+
 export default Flasher;

src/index.ts

@@ -1,13 +1,13 @@
 import { Envelope, FlasherInterface, FlasherOptions } from './interfaces';
-import Flasher from './flasher';
+import { Properties } from 'csstype';
+import deepmerge from 'deepmerge';
 
 interface Options {
   timeout: number,
   fps: number,
   position: string,
   direction: string,
-  x_offset: string,
-  y_offset: string,
+  style: Properties<string>
 }
 
 export default class TemplateFactory implements FlasherInterface {
@@ -16,8 +16,13 @@ export default class TemplateFactory implements FlasherInterface {
     fps: 30,
     position: 'top-right',
     direction: 'top',
-    x_offset: '0.5em',
-    y_offset: '0',
+    style: {
+      position: 'fixed',
+      maxWidth: '304px',
+      width: '100%',
+      zIndex: 999999,
+      transition: '0.8s',
+    },
   };
 
   render(envelope: Envelope): void {
@@ -28,7 +33,7 @@ export default class TemplateFactory implements FlasherInterface {
       return;
     }
 
-    template.style.transition = '0.8s';
+    template.style.transition = this.options.style.transition as string;
 
     if (undefined !== notification.options && undefined !== notification.options.position) {
       this.options.position = notification.options.position as unknown as string;
@@ -37,29 +42,32 @@ export default class TemplateFactory implements FlasherInterface {
     let container = document.getElementById(`flasher-container-${this.options.position}`);
     if (container === null) {
       container = document.createElement('div');
+
       container.id = `flasher-container-${this.options.position}`;
-      container.style.position = 'fixed';
-      container.style.maxWidth = '304px';
-      container.style.width = '100%';
-      container.style.zIndex = '999999';
+
+      Object.keys(this.options.style).forEach((key: string) => {
+        container!.style.setProperty(key, this.options.style[key as keyof Properties] as string);
+      });
+
+      container.style.maxWidth = this.options.style.maxWidth as string;
 
       switch (this.options.position) {
         case 'top-left':
-          container.style.top = this.options.y_offset;
-          container.style.left = this.options.x_offset;
+          container.style.top = this.options.style.top as string || '0';
+          container.style.left = this.options.style.left as string || '0.5em';
           break;
         case 'top-right':
-          container.style.top = this.options.y_offset;
-          container.style.right = this.options.x_offset;
+          container.style.top = this.options.style.top as string || '0';
+          container.style.right = this.options.style.right as string || '0.5em';
           break;
         case 'bottom-left':
-          container.style.bottom = this.options.y_offset;
-          container.style.left = this.options.x_offset;
+          container.style.bottom = this.options.style.bottom as string || '0';
+          container.style.left = this.options.style.left as string || '0.5em';
           break;
         case 'bottom-right':
         default:
-          container.style.bottom = this.options.y_offset;
-          container.style.right = this.options.x_offset;
+          container.style.bottom = this.options.style.bottom as string || '0';
+          container.style.right = this.options.style.right as string || '0.5em';
           break;
       }
       document.getElementsByTagName('body')[0].appendChild(container);
@@ -109,7 +117,7 @@ export default class TemplateFactory implements FlasherInterface {
   }
 
   renderOptions(options: FlasherOptions): void {
-    this.options = { ...this.options, ...options };
+    this.options = deepmerge(this.options, options);
   }
 
   private static stringToHTML(str: string) {
@@ -137,6 +145,3 @@ export default class TemplateFactory implements FlasherInterface {
     return dom.firstElementChild;
   }
 }
-
-const flasher = Flasher.getInstance();
-flasher.addFactory('template', new TemplateFactory());

src/template.ts

@@ -17,6 +17,7 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "allowSyntheticDefaultImports": true
   }
-}
+}