create plugin architecture

4 files changed, 136 insertions, 8 deletions

diff --git a/src/LightBox.js b/src/LightBox.js
index b9f6b03..5479819 100644
--- a/src/LightBox.js
+++ b/src/LightBox.js
@@ -26,10 +26,6 @@ export class LightBox {
             quitOnEnd:      false,
             quitOnImgClick: false,
             quitOnDocClick: true,
-            onStart:        false,
-            onEnd:          false,
-            onLoadStart:    false,
-            onLoadEnd:      false,
         };
 
         this.options = Object.assign(options, defaultOptions);
@@ -46,6 +42,12 @@ export class LightBox {
         this.swipeEnd = 0;
         this.imagePosLeft = 0;
 
+
+        this.onStartListeners = [];
+        this.onEndListeners = [];
+        this.onLoadStartListeners = [];
+        this.onLoadEndListeners = [];
+
         this.bindEvents();
     }
 
@@ -112,8 +114,9 @@ export class LightBox {
         setTimeout(() => {
             this.removeImage();
             this.inProgress = false;
-            if (this.options.onEnd !== false)
-                this.options.onEnd();
+
+            this.onEndListeners.forEach(l => l());
+
         }, this.options.animationSpeed);
     }
 
@@ -129,7 +132,7 @@ export class LightBox {
 
         this.inProgress = false;
 
-        if (this.options.onStart !== false ) this.options.onStart();
+        this.onStartListeners.forEach(l => l());
 
         this.target = element;
 
@@ -183,7 +186,7 @@ export class LightBox {
         }
 
         this.inProgress = true;
-        if (this.options.onLoadStart !== false) this.options.onLoadStart();
+        this.onLoadStartListeners.forEach(l => l());
 
         setTimeout(() => {
             log.debug('loadImage in');
@@ -209,6 +212,7 @@ export class LightBox {
 
                 setTimeout(() => {
                     this.inProgress = false;
+                    this.onLoadEndListeners.forEach(l => l());
                 }, this.options.animationSpeed);
 
                 if (this.options.preloadNext) {
@@ -375,6 +379,26 @@ export class LightBox {
         log.debug('resized');
         this.setImage();
     }
+
+    addOnStartListener(listener) {
+        this.onStartListeners.push(listener);
+    }
+
+    addOnEndListener(listener) {
+        this.onEndListeners.push(listener);
+    }
+
+    addOnLoadStartListener(listener) {
+        this.onLoadStartListeners.push(listener);
+    }
+
+    addOnLoadEndListener(listener) {
+        this.onLoadEndListeners.push(listener);
+    }
+
+    registerPlugin(plugin) {
+        plugin.register(this);
+    }
 }
 
 LightBox.HAS_TOUCH = ('ontouchstart' in window);
diff --git a/src/Plugins/ActivityIndicator.js b/src/Plugins/ActivityIndicator.js
new file mode 100644
index 0000000..8a1e83b
--- /dev/null
+++ b/src/Plugins/ActivityIndicator.js
@@ -0,0 +1,36 @@
+/**
+ *
+ * @author Victor Häggqvist
+ * @since 2016-01-14
+ */
+
+export class ActivityIndicator {
+
+    constructor() {
+        this.element = document.createElement('div');
+        this.element.id = 'imagelightbox-loading';
+        this.element.appendChild(document.createElement('div'))
+    }
+
+    /**
+     *
+     * @param {LightBox} lightbox
+     */
+    register(lightbox) {
+        lightbox.addOnLoadStartListener(this.activityIndicatorOn.bind(this));
+        lightbox.addOnLoadEndListener(this.activityIndicatorOff.bind(this));
+        lightbox.addOnEndListener(this.activityIndicatorOff.bind(this));
+    }
+
+    activityIndicatorOn() {
+        document.body.appendChild(this.element);
+        //$('<div id="imagelightbox-loading"><div></div></div>' ).appendTo('body');
+    }
+
+    activityIndicatorOff() {
+        try {
+            document.body.removeChild(this.element);
+        } catch (e) {}
+    }
+
+}
diff --git a/src/Plugins/CloseButton.js b/src/Plugins/CloseButton.js
new file mode 100644
index 0000000..ca12e61
--- /dev/null
+++ b/src/Plugins/CloseButton.js
@@ -0,0 +1,40 @@
+/**
+ * @author Victor Häggqvist
+ * @since 2016-01-14
+ */
+
+
+export class CloseButton {
+
+    constructor() {
+        this.element = document.createElement('a');
+        this.element.id = 'imagelightbox-close';
+        this.element.innerHTML = 'Close';
+    }
+
+    register(lightbox) {
+        this.lightbox = lightbox;
+        lightbox.addOnStartListener(this.showButton.bind(this));
+        lightbox.addOnEndListener(this.hideButton.bind(this));
+    }
+
+    showButton() {
+        ['click', 'touchend'].forEach(name => {
+            this.element.addEventListener(name, this.exitLightbox.bind(this));
+        });
+
+        document.body.appendChild(this.element);
+
+        //$('<a href="#" id="imagelightbox-close">Close</a>').appendTo('body')
+        //    .on('click touchend', function(){ $(this).remove(); instance.quitImageLightbox(); return false; });
+    }
+
+    hideButton() {
+        document.body.removeChild(this.element);
+    }
+
+    exitLightbox() {
+        this.lightbox.quitImageLightbox();
+    }
+
+}
diff --git a/src/Plugins/Overlay.js b/src/Plugins/Overlay.js
new file mode 100644
index 0000000..8571dd4
--- /dev/null
+++ b/src/Plugins/Overlay.js
@@ -0,0 +1,28 @@
+/**
+ * @author Victor Häggqvist
+ * @since 2016-01-14
+ */
+
+export class Overlay {
+
+    constructor() {
+        this.element = document.createElement('div');
+        this.element.id = 'imagelightbox-overlay';
+    }
+
+    register(lightbox) {
+        lightbox.addOnStartListener(this.overlayOn.bind(this));
+        lightbox.addOnEndListener(this.overlayOff.bind(this));
+    }
+
+    overlayOn() {
+        document.body.appendChild(this.element);
+    }
+
+    overlayOff() {
+        document.body.removeChild(this.element);
+    }
+
+}
+
+