create plugin architecture

10 files changed, 293 insertions, 161 deletions

diff --git a/gulpfile.js b/gulpfile.js
index 0d2d7c5..3e1a65a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,10 +9,24 @@ var size = require('gulp-size');
 var uglify = require('gulp-uglify');
 var webpack = require('webpack-stream');
 
+gulp.task('style', function () {
+    return gulp.src('./style/touch-imagelightbox.scss')
+        .pipe(sass({
+            outputStyle: 'compressed'
+        }).on('error', sass.logError))
+        .pipe(gulp.dest('./demo'));
+});
+
 var webpackOptions = {
+    entry: {
+        ActivityIndicator: './src/Plugins/ActivityIndicator.js',
+        Overlay: './src/Plugins/Overlay.js',
+        CloseButton: './src/Plugins/CloseButton.js',
+        Core: './src/LightBox.js'
+    },
     output: {
-        filename: 'touch-imagelightbox.js',
-        library: 'LightBox',
+        filename: "LightBox.[name].js",
+        library: ["LightBox", "[name]"],
         libraryTarget: "var"
     },
     module: {
@@ -28,10 +42,12 @@ var webpackOptions = {
 };
 
 gulp.task('pack', function() {
-    return gulp.src('./src/LightBox.js')
-        .pipe(webpack(webpackOptions))
-        //.pipe(gulp.dest('./dist'));
-        .pipe(gulp.dest('./demo'));
+    return gulp.src('').pipe(webpack(webpackOptions)).pipe(gulp.dest('./demo'));
+
+    //return gulp.src(['./src/LightBox.js', './src/Plugins/*.js'])
+    //    .pipe(webpack(webpackOptions))
+    //    //.pipe(gulp.dest('./dist'));
+    //    .pipe(gulp.dest('./demo'));
 });
 
 gulp.task('default', ['pack']);
@@ -41,8 +57,10 @@ gulp.task('watch', function () {
 
     webpackOptions.watch = true;
 
-    return gulp.src('./src/LightBox.js')
-        .pipe(webpack(webpackOptions))
-        //.pipe(gulp.dest('./dist'));
-        .pipe(gulp.dest('./demo'));
+    gulp.src('').pipe(webpack(webpackOptions)).pipe(gulp.dest('./demo'));
+
+    //return gulp.src(['./src/LightBox.js', './src/Plugins/*.js'])
+    //    .pipe(webpack(webpackOptions))
+    //    //.pipe(gulp.dest('./dist'));
+    //    .pipe(gulp.dest('./demo'));
 });
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);
+    }
+
+}
+
+
diff --git a/style/_variables.scss b/style/_variables.scss
deleted file mode 100644
index d2deae5..0000000
--- a/style/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$closebutton-size: 40px;
-$loadingbox-size: 20px;
diff --git a/style/plugins/activity-indicator.scss b/style/plugins/activity-indicator.scss
new file mode 100644
index 0000000..d5df8c0
--- /dev/null
+++ b/style/plugins/activity-indicator.scss
@@ -0,0 +1,50 @@
+$loadingbox-size: 20px;
+
+#imagelightbox-loading,
+#imagelightbox-loading div {
+    border-radius: 50%;
+}
+
+#imagelightbox-loading {
+    box-shadow: rgba(0, 0, 0, .75) 0 0 $loadingbox-size*2;
+
+    background: #444; // Fallback
+    background: rgba(0, 0, 0, .5);
+    height: $loadingbox-size;
+    left: 50%;
+    margin: -20px 0 0 -20px;
+    padding: 10px;
+    position: fixed;
+    top: 50%;
+    width: $loadingbox-size;
+    z-index: 10003;
+    animation: fade-in .25s linear;
+
+    div {
+        animation: imagelightbox-loading .5s ease infinite;
+
+        background-color: #fff;
+        height: 20px;
+        width: 20px;
+    }
+}
+
+@keyframes imagelightbox-loading {
+    0% {
+        opacity: .5;
+        transform: scale(.75);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    100% {
+        opacity: .5;
+        transform: scale(.75);
+    }
+}
+
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
diff --git a/style/plugins/closebutton.scss b/style/plugins/closebutton.scss
new file mode 100644
index 0000000..68b813b
--- /dev/null
+++ b/style/plugins/closebutton.scss
@@ -0,0 +1,54 @@
+$closebutton-size: 40px;
+
+#imagelightbox-close {
+    border-radius: 50%;
+
+    background-color: #666;
+    height: $closebutton-size;
+    position: fixed;
+    right: $closebutton-size;
+    text-align: left;
+    text-indent: -9999px;
+    top: $closebutton-size;
+    transition: color .3s ease;
+    width: $closebutton-size;
+    z-index: 10002;
+
+    &:hover {
+        background-color: #111;
+    }
+
+    &:before,
+    &:after {
+        background-color: #fff;
+        bottom: 20%;
+        content: '';
+        left: 50%;
+        margin-left: -1px;
+        position: absolute;
+        top: 20%;
+        width: 2px;
+    }
+
+    &:before {
+        rotate: 45deg;
+    }
+
+    &:after {
+        rotate: -45deg;
+    }
+
+    animation: fade-in .25s linear;
+}
+
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@media only screen and (max-width: 660px) {
+    #imagelightbox-close {
+        right: 20px;
+        top: 20px;
+    }
+}
diff --git a/style/plugins/overlay.scss b/style/plugins/overlay.scss
new file mode 100644
index 0000000..edbc05a
--- /dev/null
+++ b/style/plugins/overlay.scss
@@ -0,0 +1,17 @@
+
+#imagelightbox-overlay {
+    background: #fff;
+    background: rgba(255, 255, 255, .9);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 9998;
+    animation: fade-in .25s linear;
+}
+
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
diff --git a/style/touch-imagelightbox.scss b/style/touch-imagelightbox.scss
index c9df56f..ec6f006 100644
--- a/style/touch-imagelightbox.scss
+++ b/style/touch-imagelightbox.scss
@@ -1,5 +1,7 @@
-@import 'compass/css3';
-@import 'variables';
+
+@import "plugins/activity-indicator";
+@import "plugins/overlay";
+@import "plugins/closebutton";
 
 @mixin touch-action($value) {
   -ms-touch-action: $value;
@@ -13,125 +15,12 @@ html {
 
 #imagelightbox {
   @include touch-action(none);
-  @include box-shadow(rgba(0, 0, 0, .75) 0 0 50px);
+  box-shadow: rgba(0, 0, 0, .75) 0 0 50px;
   cursor: pointer;
   position: fixed;
   z-index: 10000;
 }
 
-// Loading Indication
-#imagelightbox-loading,
-#imagelightbox-loading div {
-  @include border-radius(50%);
-}
-
-#imagelightbox-loading {
-  @include box-shadow(rgba(0, 0, 0, .75) 0 0 $loadingbox-size*2);
-
-  background: #444; // Fallback
-  background: rgba(0, 0, 0, .5);
-  height: $loadingbox-size;
-  left: 50%;
-  margin: -20px 0 0 -20px;
-  padding: 10px;
-  position: fixed;
-  top: 50%;
-  width: $loadingbox-size;
-  z-index: 10003;
-
-  div {
-    -moz-animation: imagelightbox-loading .5s ease infinite;
-    -o-animation: imagelightbox-loading .5s ease infinite;
-    -webkit-animation: imagelightbox-loading .5s ease infinite;
-    animation: imagelightbox-loading .5s ease infinite;
-
-    background-color: #fff;
-    height: 20px;
-    width: 20px;
-  }
-}
-
-@-webkit-keyframes imagelightbox-loading {
-  0% { opacity: .5; -webkit-transform: scale(.75); }
-  50% { opacity: 1;  -webkit-transform: scale(1); }
-  100% { opacity: .5; -webkit-transform: scale(.75); }
-}
-
-@-moz-keyframes imagelightbox-loading {
-  0% { opacity: .5; -moz-transform: scale(.75); }
-  50% { opacity: 1;  -moz-transform: scale(1); }
-  100% { opacity: .5; -moz-transform: scale(.75); }
-}
-
-@-o-keyframes imagelightbox-loading {
-  0% { opacity: .5; -o-transform: scale(.75); }
-  50% { opacity: 1;  -o-transform: scale(1); }
-  100% { opacity: .5; -o-transform: scale(.75); }
-}
-
-@keyframes imagelightbox-loading {
-  0% { opacity: .5; transform: scale(.75); }
-  50% { opacity: 1;  transform: scale(1); }
-  100% { opacity: .5; transform: scale(.75); }
-}
-
-#imagelightbox-overlay {
-  background: #fff;
-  background: rgba(255, 255, 255, .9);
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 9998;
-}
-
-
-// Close button
-#imagelightbox-close {
-  @include border-radius(50%);
-
-
-  background-color: #666;
-  height: $closebutton-size;
-  position: fixed;
-  right: $closebutton-size;
-  text-align: left;
-  text-indent: -9999px;
-  top: $closebutton-size;
-  -moz-transition: color .3s ease;
-  -ms-transition: color .3s ease;
-  -o-transition: color .3s ease;
-  -webkit-transition: color .3s ease;
-  transition: color .3s ease;
-  width: $closebutton-size;
-  z-index: 10002;
-
-  &:hover {
-    background-color: #111;
-  }
-
-  &:before,
-  &:after {
-    background-color: #fff;
-    bottom: 20%;
-    content: '';
-    left: 50%;
-    margin-left: -1px;
-    position: absolute;
-    top: 20%;
-    width: 2px;
-  }
-
-  &:before {
-    @include rotate(45deg);
-  }
-
-  &:after {
-    @include rotate(-45deg);
-  }
-}
-
 #imagelightbox-caption {
   background-color: #666;
   bottom: 0;
@@ -146,8 +35,8 @@ html {
 
 // The nav bubbles
 #imagelightbox-nav {
-  @include border-radius(20px);
-  @include translateX(-50%);
+  border-radius: 20px;
+  translateX: -50%;
 
   background-color: #444;
   background-color: rgba(0, 0, 0, .5);
@@ -158,7 +47,7 @@ html {
   z-index: 10001;
 
   a {
-    @include border-radius(50%);
+    border-radius: 50%;
     border: 1px solid #fff;
     display: inline-block;
     height: 20px;
@@ -171,9 +60,6 @@ html {
   }
 }
 
-#imagelightbox-loading,
-#imagelightbox-overlay,
-#imagelightbox-close,
 #imagelightbox-caption,
 #imagelightbox-nav {
   -moz-animation: fade-in .25s linear;
@@ -182,31 +68,12 @@ html {
   animation: fade-in .25s linear;
 }
 
-@-webkit-keyframes fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@-moz-keyframes fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@-o-keyframes fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
 @keyframes fade-in {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }
 
 @media only screen and (max-width: 660px) {
-  #imagelightbox-close {
-    right: 20px;
-    top: 20px;
-  }
 
   #imagelightbox-nav {
     bottom: 20px;