From 7307889639b68064e642ae65bf98d9856c10922b Mon Sep 17 00:00:00 2001 From: Victor Häggqvist 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 +- style/plugins/activity-indicator.scss | 9 +++-- style/plugins/caption.scss | 22 ++++++++++++ style/plugins/closebutton.scss | 9 +++-- style/plugins/navigation.scss | 43 ++++++++++++++++++++++++ style/plugins/overlay.scss | 9 +++-- style/touch-imagelightbox.scss | 60 ++------------------------------- 12 files changed, 162 insertions(+), 75 deletions(-) create mode 100644 src/Plugins/Navigation.js create mode 100644 style/plugins/caption.scss create mode 100644 style/plugins/navigation.scss 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); - //$('
' ).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; - } -} -- cgit v1.2.3