diff options
Diffstat (limited to 'src/LightBox.js')
| -rw-r--r-- | src/LightBox.js | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/src/LightBox.js b/src/LightBox.js new file mode 100644 index 0000000..15d2cdd --- /dev/null +++ b/src/LightBox.js @@ -0,0 +1,193 @@ +/** + * Created by Victor Häggqvist on 1/12/16. + */ + +import {CSSUtil} from './CSSUtil' +import {Log as L} from './Log/Log' +import {animate} from './animate' +import {FetchImage} from './FetchImage' + + +export class LightBox { + + constructor(targetSelector, options = {}) { + this.targets = document.querySelectorAll(targetSelector); + + const defaultOptions = { + allowedTypes: 'png|jpg|jpeg|gif', + animationSpeed: 250, + preloadNext: true, + enableKeyboard: true, + quitOnEnd: false, + quitOnImgClick: false, + quitOnDocClick: true, + onStart: false, + onEnd: false, + onLoadStart: false, + onLoadEnd: false + }; + + this.options = Object.assign(options, defaultOptions); + console.log(this.options); + + this.target = null; + this.image = document.createElement('img'); + this.imageWidth = 0; + this.imageHeight = 0; + this.swipeDiff = 0; + this.inProgress = false; + + this.bindEvents(); + } + + bindEvents() { + console.log(this.targets); + + Array.prototype.forEach.call(this.targets, ele => { + ele.onclick = this.onImageClick.bind(this) + }); + window.addEventListener('resize', this.windowResizeListener.bind(this)); + } + + onImageClick(event) { + console.log(event); + let element = event.srcElement.parentElement; + //console.log(this.isTargetValid(element)); + if (!this.isTargetValid(element)) return true; + + event.preventDefault(); + + if (this.inProgress) return; + + this.inProgress = false; + + if (this.options.onStart !== false ) this.options.onStart(); + + this.target = element; + + this.loadImage(); + } + + isTargetValid(element) { + let validTypes = new RegExp("(\.("+this.options.allowedTypes+")$)"); + + //console.log(element.tagName.toLowerCase()); + return element.tagName.toLowerCase() === 'a' && validTypes.test(element.href); + + //return $( element ).prop( 'tagName' ).toLowerCase() === 'a' && options.regexValidObject.test($(element).attr('href') ); + } + + loadImage(direction = false) { + L.l('loadImage'); + L.l(this.inProgress); + if (this.inProgress) return false; + L.l('not progress'); + // if image.length + //if () + + this.inProgress = true; + if (this.options.onLoadStart !== false) this.options.onLoadStart(); + + setTimeout(() => { + L.l('loadImage in'); + FetchImage(this.target.href).then(image => { + this.image = image; + image.id='imagelightbox'; + console.log(image); + + //let image = new Image(); + //image.src = this.target.href; + + L.l(image); + document.body.appendChild(image); + //image.appendTo('body'); + L.d('setImage'); + this.setImage(); + + var params = {opacity: 1}; + image.style.opacity = 0; + + let prefix = CSSUtil.cssTransitionSupport(); + CSSUtil.setTransitionProperty(image.style, 'opacity .3s linear'); + //image.style[prefix + 'transform'] = 'opacity 25s linear'; + //image.style.transition = 'opacity .3s linear'; + image.style.transform = 'translateX(0px)'; + + setTimeout(() => { + // without timeout it's to fast to make it fade and just jumps to 1 instant + image.style.opacity = 1; + }, 5); + + if (this.options.preloadNext) { + console.log(this.options.preloadNext); + Array.prototype.forEach.call(this.targets, (t) => { + if (t == this.target) { + console.log(t); + console.log('match'); + } + }); + // + ////this.targets. + //let nextTarget = targets.eq(targets.index(target) + 1); + //if (!nextTarget.length) nextTarget = targets.eq(0); + //$('<img />').attr('src', nextTarget.attr('href')).load(); + } + + + this.image = image; + }); + }, this.options.animationSpeed + 100) + } + + //static animate(elem,style,unit,from,to,time) { + // if( !elem) return; + // var start = new Date().getTime(), + // timer = setInterval(function() { + // var step = Math.min(1,(new Date().getTime()-start)/time); + // elem.style[style] = (from+step*(to-from))+unit; + // if( step == 1) clearInterval(timer); + // },25); + // elem.style[style] = from+unit; + //} + + //animate(id, direction, value, end, speed) { + // var div = document.getElementById(id); + // interval = setInterval(function() { + // if (+(div.style) === end) { + // clearInterval(interval); + // return false; + // } + // div.style[direction] += value; // or -= as per your needs + // }, speed); + //} + + setImage() { + L.l(this.image); + if (!this.image) return false; + + let screenWidth = window.innerWidth * 0.8; + let screenHeight = window.innerHeight * 0.9; + + let tmpImage = new Image(); + tmpImage.src = this.image.src; + tmpImage.onload = () => { + this.imageWidth = tmpImage.width; + this.imageHeight = tmpImage.height; + + if (this.imageWidth > screenWidth || this.imageHeight > screenHeight) { + let ratio = this.imageWidth / this.imageHeight > screenWidth / screenHeight ? this.imageWidth / screenWidth : this.imageHeight / screenHeight; + this.imageWidth /= ratio; + this.imageHeight /= ratio; + } + + this.image.style.width = this.imageWidth + 'px'; + this.image.style.height = this.imageHeight + 'px'; + this.image.style.top = (window.innerHeight - this.imageHeight) / 2 + 'px'; + this.image.style.left = (window.innerWidth - this.imageWidth) / 2 + 'px'; + }; + } + + windowResizeListener() { + console.log('resized') + } +} |