finalize convertion of existing plugins

12 files changed, 162 insertions, 75 deletions

diff --git a/src/LightBox.js b/src/LightBox.js
index a89d0c4..e9ab137 100644
--- a/src/LightBox.js
+++ b/src/LightBox.js
@@ -9,7 +9,7 @@ var log = require('loglevel');
 
 log.setDefaultLevel(log.levels.DEBUG);
 
-export class LightBox {
+export default class LightBox {
 
     constructor(targetSelector, options = {}) {
         log.info('LightBox');
@@ -117,9 +117,8 @@ export class LightBox {
     }
 
     onImageClick(event) {
-        console.log(event);
+        log.debug(event);
         let element = event.srcElement.parentElement;
-        //console.log(this.isTargetValid(element));
         if (!this.isTargetValid(element)) return true;
 
         event.preventDefault();
@@ -375,6 +374,13 @@ export class LightBox {
         return false;
     };
 
+    switchToIndex(index) {
+        if (index >= 0 && index < this.targets.length){
+            this.target = this.targets[index];
+            this.loadImage();
+        }
+    }
+
     windowResizeListener() {
         log.debug('resized');
         this.setImage();
diff --git a/src/Plugins/ActivityIndicator.js b/src/Plugins/ActivityIndicator.js
index 8a1e83b..141daa9 100644
--- a/src/Plugins/ActivityIndicator.js
+++ b/src/Plugins/ActivityIndicator.js
@@ -4,7 +4,7 @@
  * @since 2016-01-14
  */
 
-export class ActivityIndicator {
+export default class ActivityIndicator {
 
     constructor() {
         this.element = document.createElement('div');
@@ -24,7 +24,6 @@ export class ActivityIndicator {
 
     activityIndicatorOn() {
         document.body.appendChild(this.element);
-        //$('<div id="imagelightbox-loading"><div></div></div>' ).appendTo('body');
     }
 
     activityIndicatorOff() {
diff --git a/src/Plugins/Captions.js b/src/Plugins/Captions.js
index 0286a82..10af910 100644
--- a/src/Plugins/Captions.js
+++ b/src/Plugins/Captions.js
@@ -3,12 +3,11 @@
  * @since 2016-01-16
  */
 
-export class Captions {
+export default class Captions {
 
     constructor() {
         this.element = document.createElement('div');
         this.element.id = 'imagelightbox-caption';
-        //this.element.innerHTML = 'Close';
     }
 
     register(lightbox) {
diff --git a/src/Plugins/CloseButton.js b/src/Plugins/CloseButton.js
index 1a1b453..91ec0dc 100644
--- a/src/Plugins/CloseButton.js
+++ b/src/Plugins/CloseButton.js
@@ -4,7 +4,7 @@
  */
 
 
-export class CloseButton {
+export default class CloseButton {
 
     constructor(closeOnDocumentClick=false) {
         this.closeOnDocumentClick = closeOnDocumentClick;
diff --git a/src/Plugins/Navigation.js b/src/Plugins/Navigation.js
new file mode 100644
index 0000000..bdd5e92
--- /dev/null
+++ b/src/Plugins/Navigation.js
@@ -0,0 +1,63 @@
+/**
+ * @author Victor Häggqvist
+ * @since 1/15/16
+ */
+
+export default class Navigation {
+
+    register(lightbox) {
+        this.lightbox = lightbox;
+        lightbox.addOnStartListener(this.showNavigation.bind(this));
+        lightbox.addOnEndListener(this.hideNavigation.bind(this));
+        lightbox.addOnLoadEndListener(this.updateNavigation.bind(this));
+    }
+
+
+    showNavigation() {
+        this.sink = document.createElement('div');
+        this.sink.id = 'imagelightbox-nav-sink';
+        this.nav = document.createElement('div');
+        this.nav.id = 'imagelightbox-nav';
+        this.sink.appendChild(this.nav);
+
+        Array.prototype.forEach.call(this.lightbox.targets, _ => {
+            this.nav.appendChild(document.createElement('a'));
+        });
+
+        document.body.appendChild(this.sink);
+
+        let navItems = this.nav.querySelectorAll('a');
+        Array.prototype.forEach.call(navItems, (item, i) => {
+            ['click', 'touchend'].forEach(name => {
+                item.addEventListener(name, this.navClick.bind(this, i));
+            })
+        });
+
+        // make the nav actually centered, flex center dont make it
+        let rect = this.nav.getBoundingClientRect();
+        let diff = rect.width/2;
+        this.nav.style.marginLeft = '-'+diff+'px';
+    }
+
+    updateNavigation() {
+        Array.prototype.forEach.call(this.nav.childNodes, n => {
+           n.classList.remove('active');
+        });
+
+        let current = Array.prototype.indexOf.call(this.lightbox.targets, this.lightbox.target);
+        this.nav.childNodes[current].classList.add('active');
+    }
+
+    hideNavigation() {
+        try {
+            document.body.removeChild(this.sink);
+        } catch (e) {}
+    };
+
+    navClick(index, e) {
+        e.stopPropagation();
+        e.cancelBubble = true;
+        this.lightbox.switchToIndex(index);
+    }
+
+}
diff --git a/src/Plugins/Overlay.js b/src/Plugins/Overlay.js
index 8571dd4..e470b44 100644
--- a/src/Plugins/Overlay.js
+++ b/src/Plugins/Overlay.js
@@ -3,7 +3,7 @@
  * @since 2016-01-14
  */
 
-export class Overlay {
+export default class Overlay {
 
     constructor() {
         this.element = document.createElement('div');
diff --git a/style/plugins/activity-indicator.scss b/style/plugins/activity-indicator.scss
index d5df8c0..6fbc1db 100644
--- a/style/plugins/activity-indicator.scss
+++ b/style/plugins/activity-indicator.scss
@@ -8,7 +8,6 @@ $loadingbox-size: 20px;
 #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%;
@@ -45,6 +44,10 @@ $loadingbox-size: 20px;
 }
 
 @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
diff --git a/style/plugins/caption.scss b/style/plugins/caption.scss
new file mode 100644
index 0000000..fec2093
--- /dev/null
+++ b/style/plugins/caption.scss
@@ -0,0 +1,22 @@
+#imagelightbox-caption {
+    background-color: #666;
+    bottom: 0;
+    color: #fff;
+    left: 0;
+    padding: 10px;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    z-index: 10001;
+    animation: fade-in .25s linear;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
diff --git a/style/plugins/closebutton.scss b/style/plugins/closebutton.scss
index 68b813b..3106e04 100644
--- a/style/plugins/closebutton.scss
+++ b/style/plugins/closebutton.scss
@@ -13,6 +13,7 @@ $closebutton-size: 40px;
     transition: color .3s ease;
     width: $closebutton-size;
     z-index: 10002;
+    cursor: pointer;
 
     &:hover {
         background-color: #111;
@@ -42,8 +43,12 @@ $closebutton-size: 40px;
 }
 
 @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 
 @media only screen and (max-width: 660px) {
diff --git a/style/plugins/navigation.scss b/style/plugins/navigation.scss
new file mode 100644
index 0000000..207d396
--- /dev/null
+++ b/style/plugins/navigation.scss
@@ -0,0 +1,43 @@
+
+#imagelightbox-nav-sink {
+    display: flex;
+    justify-content: center;
+}
+#imagelightbox-nav {
+    border-radius: 20px;
+    animation: fade-in .25s linear;
+
+    background-color: rgba(0, 0, 0, .5);
+    bottom: 60px;
+    padding: 5px 2px 1px;
+    position: fixed;
+    z-index: 10001;
+
+    a {
+        border-radius: 50%;
+        border: 1px solid #fff;
+        display: inline-block;
+        height: 20px;
+        margin: 0 5px;
+        width: 20px;
+    }
+
+    .active {
+        background-color: #fff;
+    }
+}
+
+@media only screen and (max-width: 660px) {
+    #imagelightbox-nav {
+        bottom: 20px;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/style/plugins/overlay.scss b/style/plugins/overlay.scss
index edbc05a..94dc431 100644
--- a/style/plugins/overlay.scss
+++ b/style/plugins/overlay.scss
@@ -1,6 +1,5 @@
 
 #imagelightbox-overlay {
-    background: #fff;
     background: rgba(255, 255, 255, .9);
     bottom: 0;
     left: 0;
@@ -12,6 +11,10 @@
 }
 
 @keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
diff --git a/style/touch-imagelightbox.scss b/style/touch-imagelightbox.scss
index ec6f006..8cd6df4 100644
--- a/style/touch-imagelightbox.scss
+++ b/style/touch-imagelightbox.scss
@@ -2,6 +2,8 @@
 @import "plugins/activity-indicator";
 @import "plugins/overlay";
 @import "plugins/closebutton";
+@import "plugins/navigation";
+@import "plugins/caption";
 
 @mixin touch-action($value) {
   -ms-touch-action: $value;
@@ -21,61 +23,3 @@ html {
   z-index: 10000;
 }
 
-#imagelightbox-caption {
-  background-color: #666;
-  bottom: 0;
-  color: #fff;
-  left: 0;
-  padding: 10px;
-  position: fixed;
-  right: 0;
-  text-align: center;
-  z-index: 10001;
-}
-
-// The nav bubbles
-#imagelightbox-nav {
-  border-radius: 20px;
-  translateX: -50%;
-
-  background-color: #444;
-  background-color: rgba(0, 0, 0, .5);
-  bottom: 60px; // 60
-  left: 50%;
-  padding: 5px 2px 1px;
-  position: fixed;
-  z-index: 10001;
-
-  a {
-    border-radius: 50%;
-    border: 1px solid #fff;
-    display: inline-block;
-    height: 20px;
-    margin: 0 5px;
-    width: 20px;
-  }
-
-  .active {
-    background-color: #fff;
-  }
-}
-
-#imagelightbox-caption,
-#imagelightbox-nav {
-  -moz-animation: fade-in .25s linear;
-  -o-animation: fade-in .25s linear;
-  -webkit-animation: fade-in .25s linear;
-  animation: fade-in .25s linear;
-}
-
-@keyframes fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@media only screen and (max-width: 660px) {
-
-  #imagelightbox-nav {
-    bottom: 20px;
-  }
-}