diff options
Diffstat (limited to '')
-rw-r--r-- | gulpfile.js | 38 | ||||
-rw-r--r-- | src/LightBox.js | 40 | ||||
-rw-r--r-- | src/Plugins/ActivityIndicator.js | 36 | ||||
-rw-r--r-- | src/Plugins/CloseButton.js | 40 | ||||
-rw-r--r-- | src/Plugins/Overlay.js | 28 | ||||
-rw-r--r-- | style/_variables.scss | 2 | ||||
-rw-r--r-- | style/plugins/activity-indicator.scss | 50 | ||||
-rw-r--r-- | style/plugins/closebutton.scss | 54 | ||||
-rw-r--r-- | style/plugins/overlay.scss | 17 | ||||
-rw-r--r-- | style/touch-imagelightbox.scss | 149 |
10 files changed, 293 insertions, 161 deletions
diff --git a/gulpfile.js b/gulpfile.js index 0d2d7c5..3e1a65a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,10 +9,24 @@ var size = require('gulp-size'); var uglify = require('gulp-uglify'); var webpack = require('webpack-stream'); +gulp.task('style', function () { + return gulp.src('./style/touch-imagelightbox.scss') + .pipe(sass({ + outputStyle: 'compressed' + }).on('error', sass.logError)) + .pipe(gulp.dest('./demo')); +}); + var webpackOptions = { + entry: { + ActivityIndicator: './src/Plugins/ActivityIndicator.js', + Overlay: './src/Plugins/Overlay.js', + CloseButton: './src/Plugins/CloseButton.js', + Core: './src/LightBox.js' + }, output: { - filename: 'touch-imagelightbox.js', - library: 'LightBox', + filename: "LightBox.[name].js", + library: ["LightBox", "[name]"], libraryTarget: "var" }, module: { @@ -28,10 +42,12 @@ var webpackOptions = { }; gulp.task('pack', function() { - return gulp.src('./src/LightBox.js') - .pipe(webpack(webpackOptions)) - //.pipe(gulp.dest('./dist')); - .pipe(gulp.dest('./demo')); + return gulp.src('').pipe(webpack(webpackOptions)).pipe(gulp.dest('./demo')); + + //return gulp.src(['./src/LightBox.js', './src/Plugins/*.js']) + // .pipe(webpack(webpackOptions)) + // //.pipe(gulp.dest('./dist')); + // .pipe(gulp.dest('./demo')); }); gulp.task('default', ['pack']); @@ -41,8 +57,10 @@ gulp.task('watch', function () { webpackOptions.watch = true; - return gulp.src('./src/LightBox.js') - .pipe(webpack(webpackOptions)) - //.pipe(gulp.dest('./dist')); - .pipe(gulp.dest('./demo')); + gulp.src('').pipe(webpack(webpackOptions)).pipe(gulp.dest('./demo')); + + //return gulp.src(['./src/LightBox.js', './src/Plugins/*.js']) + // .pipe(webpack(webpackOptions)) + // //.pipe(gulp.dest('./dist')); + // .pipe(gulp.dest('./demo')); }); diff --git a/src/LightBox.js b/src/LightBox.js index b9f6b03..5479819 100644 --- a/src/LightBox.js +++ b/src/LightBox.js @@ -26,10 +26,6 @@ export class LightBox { quitOnEnd: false, quitOnImgClick: false, quitOnDocClick: true, - onStart: false, - onEnd: false, - onLoadStart: false, - onLoadEnd: false, }; this.options = Object.assign(options, defaultOptions); @@ -46,6 +42,12 @@ export class LightBox { this.swipeEnd = 0; this.imagePosLeft = 0; + + this.onStartListeners = []; + this.onEndListeners = []; + this.onLoadStartListeners = []; + this.onLoadEndListeners = []; + this.bindEvents(); } @@ -112,8 +114,9 @@ export class LightBox { setTimeout(() => { this.removeImage(); this.inProgress = false; - if (this.options.onEnd !== false) - this.options.onEnd(); + + this.onEndListeners.forEach(l => l()); + }, this.options.animationSpeed); } @@ -129,7 +132,7 @@ export class LightBox { this.inProgress = false; - if (this.options.onStart !== false ) this.options.onStart(); + this.onStartListeners.forEach(l => l()); this.target = element; @@ -183,7 +186,7 @@ export class LightBox { } this.inProgress = true; - if (this.options.onLoadStart !== false) this.options.onLoadStart(); + this.onLoadStartListeners.forEach(l => l()); setTimeout(() => { log.debug('loadImage in'); @@ -209,6 +212,7 @@ export class LightBox { setTimeout(() => { this.inProgress = false; + this.onLoadEndListeners.forEach(l => l()); }, this.options.animationSpeed); if (this.options.preloadNext) { @@ -375,6 +379,26 @@ export class LightBox { log.debug('resized'); this.setImage(); } + + addOnStartListener(listener) { + this.onStartListeners.push(listener); + } + + addOnEndListener(listener) { + this.onEndListeners.push(listener); + } + + addOnLoadStartListener(listener) { + this.onLoadStartListeners.push(listener); + } + + addOnLoadEndListener(listener) { + this.onLoadEndListeners.push(listener); + } + + registerPlugin(plugin) { + plugin.register(this); + } } LightBox.HAS_TOUCH = ('ontouchstart' in window); diff --git a/src/Plugins/ActivityIndicator.js b/src/Plugins/ActivityIndicator.js new file mode 100644 index 0000000..8a1e83b --- /dev/null +++ b/src/Plugins/ActivityIndicator.js @@ -0,0 +1,36 @@ +/** + * + * @author Victor Häggqvist + * @since 2016-01-14 + */ + +export class ActivityIndicator { + + constructor() { + this.element = document.createElement('div'); + this.element.id = 'imagelightbox-loading'; + this.element.appendChild(document.createElement('div')) + } + + /** + * + * @param {LightBox} lightbox + */ + register(lightbox) { + lightbox.addOnLoadStartListener(this.activityIndicatorOn.bind(this)); + lightbox.addOnLoadEndListener(this.activityIndicatorOff.bind(this)); + lightbox.addOnEndListener(this.activityIndicatorOff.bind(this)); + } + + activityIndicatorOn() { + document.body.appendChild(this.element); + //$('<div id="imagelightbox-loading"><div></div></div>' ).appendTo('body'); + } + + activityIndicatorOff() { + try { + document.body.removeChild(this.element); + } catch (e) {} + } + +} diff --git a/src/Plugins/CloseButton.js b/src/Plugins/CloseButton.js new file mode 100644 index 0000000..ca12e61 --- /dev/null +++ b/src/Plugins/CloseButton.js @@ -0,0 +1,40 @@ +/** + * @author Victor Häggqvist + * @since 2016-01-14 + */ + + +export class CloseButton { + + constructor() { + this.element = document.createElement('a'); + this.element.id = 'imagelightbox-close'; + this.element.innerHTML = 'Close'; + } + + register(lightbox) { + this.lightbox = lightbox; + lightbox.addOnStartListener(this.showButton.bind(this)); + lightbox.addOnEndListener(this.hideButton.bind(this)); + } + + showButton() { + ['click', 'touchend'].forEach(name => { + this.element.addEventListener(name, this.exitLightbox.bind(this)); + }); + + document.body.appendChild(this.element); + + //$('<a href="#" id="imagelightbox-close">Close</a>').appendTo('body') + // .on('click touchend', function(){ $(this).remove(); instance.quitImageLightbox(); return false; }); + } + + hideButton() { + document.body.removeChild(this.element); + } + + exitLightbox() { + this.lightbox.quitImageLightbox(); + } + +} diff --git a/src/Plugins/Overlay.js b/src/Plugins/Overlay.js new file mode 100644 index 0000000..8571dd4 --- /dev/null +++ b/src/Plugins/Overlay.js @@ -0,0 +1,28 @@ +/** + * @author Victor Häggqvist + * @since 2016-01-14 + */ + +export class Overlay { + + constructor() { + this.element = document.createElement('div'); + this.element.id = 'imagelightbox-overlay'; + } + + register(lightbox) { + lightbox.addOnStartListener(this.overlayOn.bind(this)); + lightbox.addOnEndListener(this.overlayOff.bind(this)); + } + + overlayOn() { + document.body.appendChild(this.element); + } + + overlayOff() { + document.body.removeChild(this.element); + } + +} + + diff --git a/style/_variables.scss b/style/_variables.scss deleted file mode 100644 index d2deae5..0000000 --- a/style/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$closebutton-size: 40px; -$loadingbox-size: 20px; diff --git a/style/plugins/activity-indicator.scss b/style/plugins/activity-indicator.scss new file mode 100644 index 0000000..d5df8c0 --- /dev/null +++ b/style/plugins/activity-indicator.scss @@ -0,0 +1,50 @@ +$loadingbox-size: 20px; + +#imagelightbox-loading, +#imagelightbox-loading div { + border-radius: 50%; +} + +#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%; + margin: -20px 0 0 -20px; + padding: 10px; + position: fixed; + top: 50%; + width: $loadingbox-size; + z-index: 10003; + animation: fade-in .25s linear; + + div { + animation: imagelightbox-loading .5s ease infinite; + + background-color: #fff; + height: 20px; + width: 20px; + } +} + +@keyframes imagelightbox-loading { + 0% { + opacity: .5; + transform: scale(.75); + } + 50% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: .5; + transform: scale(.75); + } +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} diff --git a/style/plugins/closebutton.scss b/style/plugins/closebutton.scss new file mode 100644 index 0000000..68b813b --- /dev/null +++ b/style/plugins/closebutton.scss @@ -0,0 +1,54 @@ +$closebutton-size: 40px; + +#imagelightbox-close { + border-radius: 50%; + + background-color: #666; + height: $closebutton-size; + position: fixed; + right: $closebutton-size; + text-align: left; + text-indent: -9999px; + top: $closebutton-size; + transition: color .3s ease; + width: $closebutton-size; + z-index: 10002; + + &:hover { + background-color: #111; + } + + &:before, + &:after { + background-color: #fff; + bottom: 20%; + content: ''; + left: 50%; + margin-left: -1px; + position: absolute; + top: 20%; + width: 2px; + } + + &:before { + rotate: 45deg; + } + + &:after { + rotate: -45deg; + } + + animation: fade-in .25s linear; +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@media only screen and (max-width: 660px) { + #imagelightbox-close { + right: 20px; + top: 20px; + } +} diff --git a/style/plugins/overlay.scss b/style/plugins/overlay.scss new file mode 100644 index 0000000..edbc05a --- /dev/null +++ b/style/plugins/overlay.scss @@ -0,0 +1,17 @@ + +#imagelightbox-overlay { + background: #fff; + background: rgba(255, 255, 255, .9); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 9998; + animation: fade-in .25s linear; +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} diff --git a/style/touch-imagelightbox.scss b/style/touch-imagelightbox.scss index c9df56f..ec6f006 100644 --- a/style/touch-imagelightbox.scss +++ b/style/touch-imagelightbox.scss @@ -1,5 +1,7 @@ -@import 'compass/css3'; -@import 'variables'; + +@import "plugins/activity-indicator"; +@import "plugins/overlay"; +@import "plugins/closebutton"; @mixin touch-action($value) { -ms-touch-action: $value; @@ -13,125 +15,12 @@ html { #imagelightbox { @include touch-action(none); - @include box-shadow(rgba(0, 0, 0, .75) 0 0 50px); + box-shadow: rgba(0, 0, 0, .75) 0 0 50px; cursor: pointer; position: fixed; z-index: 10000; } -// Loading Indication -#imagelightbox-loading, -#imagelightbox-loading div { - @include border-radius(50%); -} - -#imagelightbox-loading { - @include 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%; - margin: -20px 0 0 -20px; - padding: 10px; - position: fixed; - top: 50%; - width: $loadingbox-size; - z-index: 10003; - - div { - -moz-animation: imagelightbox-loading .5s ease infinite; - -o-animation: imagelightbox-loading .5s ease infinite; - -webkit-animation: imagelightbox-loading .5s ease infinite; - animation: imagelightbox-loading .5s ease infinite; - - background-color: #fff; - height: 20px; - width: 20px; - } -} - -@-webkit-keyframes imagelightbox-loading { - 0% { opacity: .5; -webkit-transform: scale(.75); } - 50% { opacity: 1; -webkit-transform: scale(1); } - 100% { opacity: .5; -webkit-transform: scale(.75); } -} - -@-moz-keyframes imagelightbox-loading { - 0% { opacity: .5; -moz-transform: scale(.75); } - 50% { opacity: 1; -moz-transform: scale(1); } - 100% { opacity: .5; -moz-transform: scale(.75); } -} - -@-o-keyframes imagelightbox-loading { - 0% { opacity: .5; -o-transform: scale(.75); } - 50% { opacity: 1; -o-transform: scale(1); } - 100% { opacity: .5; -o-transform: scale(.75); } -} - -@keyframes imagelightbox-loading { - 0% { opacity: .5; transform: scale(.75); } - 50% { opacity: 1; transform: scale(1); } - 100% { opacity: .5; transform: scale(.75); } -} - -#imagelightbox-overlay { - background: #fff; - background: rgba(255, 255, 255, .9); - bottom: 0; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 9998; -} - - -// Close button -#imagelightbox-close { - @include border-radius(50%); - - - background-color: #666; - height: $closebutton-size; - position: fixed; - right: $closebutton-size; - text-align: left; - text-indent: -9999px; - top: $closebutton-size; - -moz-transition: color .3s ease; - -ms-transition: color .3s ease; - -o-transition: color .3s ease; - -webkit-transition: color .3s ease; - transition: color .3s ease; - width: $closebutton-size; - z-index: 10002; - - &:hover { - background-color: #111; - } - - &:before, - &:after { - background-color: #fff; - bottom: 20%; - content: ''; - left: 50%; - margin-left: -1px; - position: absolute; - top: 20%; - width: 2px; - } - - &:before { - @include rotate(45deg); - } - - &:after { - @include rotate(-45deg); - } -} - #imagelightbox-caption { background-color: #666; bottom: 0; @@ -146,8 +35,8 @@ html { // The nav bubbles #imagelightbox-nav { - @include border-radius(20px); - @include translateX(-50%); + border-radius: 20px; + translateX: -50%; background-color: #444; background-color: rgba(0, 0, 0, .5); @@ -158,7 +47,7 @@ html { z-index: 10001; a { - @include border-radius(50%); + border-radius: 50%; border: 1px solid #fff; display: inline-block; height: 20px; @@ -171,9 +60,6 @@ html { } } -#imagelightbox-loading, -#imagelightbox-overlay, -#imagelightbox-close, #imagelightbox-caption, #imagelightbox-nav { -moz-animation: fade-in .25s linear; @@ -182,31 +68,12 @@ html { animation: fade-in .25s linear; } -@-webkit-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@-moz-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -@-o-keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @media only screen and (max-width: 660px) { - #imagelightbox-close { - right: 20px; - top: 20px; - } #imagelightbox-nav { bottom: 20px; |