basic working click on image

8 files changed, 322 insertions, 8 deletions

diff --git a/package.json b/package.json
index ca64d21..959af42 100644
--- a/package.json
+++ b/package.json
@@ -24,13 +24,18 @@
   },
   "homepage": "https://github.com/victorhaggqvist/touch-imagelightbox",
   "devDependencies": {
-    "grunt": "~0.4.2",
-    "grunt-contrib-clean": "^0.5.0",
-    "grunt-contrib-concat": "~0.4.0",
-    "grunt-contrib-copy": "^0.5.0",
-    "grunt-contrib-jshint": "~0.10.0",
-    "grunt-contrib-sass": "^0.7.3",
-    "grunt-contrib-uglify": "~0.5.0",
-    "grunt-contrib-watch": "~0.6.1"
+    "babel-eslint": "^5.0.0-beta6",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-babel": "^6.1.1",
+    "gulp-csso": "^1.0.1",
+    "gulp-eslint": "^1.1.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.1.1",
+    "gulp-size": "^2.0.0",
+    "gulp-uglify": "^1.5.1",
+    "webpack-stream": "^3.1.0"
   }
 }
diff --git a/src/CSSUtil.js b/src/CSSUtil.js
new file mode 100644
index 0000000..f08a0da
--- /dev/null
+++ b/src/CSSUtil.js
@@ -0,0 +1,55 @@
+/**
+ * Created by Victor Häggqvist on 1/12/16.
+ */
+
+export class CSSUtil {
+
+    /**
+     * transion need to be set on property
+     *
+     * using key-value dont work
+     *
+     * @param ele
+     * @param value
+     */
+    static setTransitionProperty(ele, value) {
+        if (ele.transition === '')  {
+            ele.transition = value;
+            return;
+        }
+        if (ele.WebkitTransition === '') {
+            ele.WebkitTransition = value;
+            return;
+        }
+        if (ele.MozTransition === '') {
+            ele.MozTransition = value;
+            return;
+        }
+        if (ele.OTransition === '') {
+            ele.OTransition = value;
+        }
+    }
+
+    static cssTransitionSupport() {
+        let d = document.body || document.documentElement, s = d.style;
+        if (s.WebkitTransition === '')
+            return '-webkit-';
+        if (s.MozTransition === '')
+            return '-moz-';
+        if (s.OTransition === '')
+            return '-o-';
+        if (s.transition === '')
+            return '';
+        return false;
+    }
+
+    static cssTransitionTranslateX(element, positionX, speed) {
+        let options = {};
+        let prefix = CSSUtil.cssTransitionSupport();
+        element.style[prefix + 'transform'] = 'translateX(' + positionX + ')';
+        element.style[prefix + 'transition'] = prefix + 'transform ' + speed + 's linear';
+        //element.style = Object.assign(options, element.style);
+    }
+
+}
+CSSUtil.isCssTransitionSupport = CSSUtil.cssTransitionSupport() !== false;
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')
+    }
+}
diff --git a/src/Log/Log.js b/src/Log/Log.js
new file mode 100644
index 0000000..e01d9dc
--- /dev/null
+++ b/src/Log/Log.js
@@ -0,0 +1,52 @@
+/**
+ * Created by Victor Häggqvist on 1/12/16.
+ */
+
+import {LogLevel} from './LogLevel'
+
+export class Log {
+
+    //var instance = null;
+    static init() {
+        Log.level = LogLevel.DEBUG;
+    }
+
+    static silence() {
+        Log.level = LogLevel.SILENT;
+    }
+
+    static l(msg) {
+        Log.log(msg, 'log');
+    }
+
+    static w(msg) {
+        Log.log(msg, 'warn');
+    }
+
+    static d(msg) {
+        Log.log(msg, 'debug');
+        //console.debug(Log.explode(msg));
+    }
+
+    static log(args, type='log') {
+        let baked = Log.explode(args);
+
+        if (Log.level === LogLevel.SILENT) return;
+
+        switch (type) {
+            case 'info': return console.info(baked);
+            case 'log': return console.log(baked);
+            case 'warn': return console.warn(baked);
+            case 'debug': return console.debug(baked);
+        }
+
+    }
+
+    static explode(args) {
+        if (!Array.isArray(args)) {
+            return args;
+        }
+
+        return args;
+    }
+}
diff --git a/src/Log/LogLevel.js b/src/Log/LogLevel.js
new file mode 100644
index 0000000..23ba8f9
--- /dev/null
+++ b/src/Log/LogLevel.js
@@ -0,0 +1,9 @@
+/**
+ * Created by Victor Häggqvist on 1/12/16.
+ */
+
+export class LogLevel {}
+LogLevel.SILENT = 0;
+LogLevel.INFO = 1;
+LogLevel.VERBOSE = 1;
+LogLevel.DEBUG = 1;
diff --git a/js/touch-imagelightbox.js b/src/touch-imagelightbox.js
index f5bbe2f..f5bbe2f 100644
--- a/js/touch-imagelightbox.js
+++ b/src/touch-imagelightbox.js
diff --git a/sass/_variables.scss b/style/_variables.scss
index d2deae5..d2deae5 100644
--- a/sass/_variables.scss
+++ b/style/_variables.scss
diff --git a/sass/touch-imagelightbox.scss b/style/touch-imagelightbox.scss
index c9df56f..c9df56f 100644
--- a/sass/touch-imagelightbox.scss
+++ b/style/touch-imagelightbox.scss