From 7307889639b68064e642ae65bf98d9856c10922b Mon Sep 17 00:00:00 2001
From: Victor Häggqvist <victor@snilius.com>
Date: Sat, 16 Jan 2016 14:14:59 +0100
Subject: finalize convertion of existing plugins

---
 src/LightBox.js                  | 12 ++++++--
 src/Plugins/ActivityIndicator.js |  3 +-
 src/Plugins/Captions.js          |  3 +-
 src/Plugins/CloseButton.js       |  2 +-
 src/Plugins/Navigation.js        | 63 ++++++++++++++++++++++++++++++++++++++++
 src/Plugins/Overlay.js           |  2 +-
 6 files changed, 76 insertions(+), 9 deletions(-)
 create mode 100644 src/Plugins/Navigation.js

(limited to 'src')

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');
-- 
cgit v1.2.3