refactor: new config class

3 files changed, 38 insertions, 6 deletions

diff --git a/src/animation.js b/src/animation.js
index d4e1897..214fa1c 100644
--- a/src/animation.js
+++ b/src/animation.js
@@ -1,8 +1,10 @@
+import config from './config';
+
 export default class Animation {
   static calculateFinalState(element) {
     let finals = {}
 
-    const margin = 50
+    const margin = config.margin;
     const nw = element.naturalWidth;
     const nh = element.naturalHeight;
     const ratio = nw / nh;
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..eea8314
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,27 @@
+const config = {
+  selector: '[data-libra]',
+  margin: 50,
+  offset: { x: 0, y: 0 }
+}
+
+function deepMerge(target, source) {
+  for (const key in source) {
+    if (
+      typeof source[key] === 'object' &&
+      source[key] !== null &&
+      !Array.isArray(source[key])
+    ) {
+      if (!target[key]) target[key] = {};
+      deepMerge(target[key], source[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+export function setConfig(newConfig) {
+  deepMerge(config, newConfig);
+}
+
+export default config;
diff --git a/src/lightbox.js b/src/lightbox.js
index 22cf0ff..2bd242b 100644
--- a/src/lightbox.js
+++ b/src/lightbox.js
@@ -1,5 +1,7 @@
-import Overlay from './overlay.js';
-import Shadow from './shadow.js';
+import Overlay from './overlay';
+import Shadow from './shadow';
+import config from './config';
+import { setConfig } from './config';
 
 export default class LightBox {
   currentImage = null;
@@ -11,8 +13,9 @@ export default class LightBox {
    * ============
    */
 
-  constructor({ selector }) {
-    this.selector = selector;
+  constructor(config) {
+    setConfig(config);
+
     this.initOverlay();
     this.initImages();
     this.initControls();
@@ -26,7 +29,7 @@ export default class LightBox {
   }
 
   initImages() {
-    this.images = document.querySelectorAll(this.selector);
+    this.images = document.querySelectorAll(config.selector);
     this.images.forEach(image => {
       if (image.tagName !== 'IMG') return;
       image.id = crypto.randomUUID(); // generate unique id for each image