finalize convertion of existing plugins

5 files changed, 67 insertions, 6 deletions

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');