diff options
author | Victor Häggqvist <[email protected]> | 2016-01-16 14:14:59 +0100 |
---|---|---|
committer | Victor Häggqvist <[email protected]> | 2016-01-16 14:14:59 +0100 |
commit | 7307889639b68064e642ae65bf98d9856c10922b (patch) | |
tree | da71fa8e52c05b163c2e3150286d148845763872 /src/Plugins/Navigation.js | |
parent | be8351486ad1e8c04d4d521a151d54861932ee0b (diff) |
finalize convertion of existing plugins
Diffstat (limited to '')
-rw-r--r-- | src/Plugins/Navigation.js | 63 |
1 files changed, 63 insertions, 0 deletions
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); + } + +} |