From 9c6bdedba46b9dc4318cf6709d7b88042b9b588c Mon Sep 17 00:00:00 2001
From: Victor Häggqvist <victor@snilius.com>
Date: Wed, 13 Jan 2016 21:17:49 +0100
Subject: simplify and cleanup image loading

---
 src/CSSUtil.js    | 19 ++++++------
 src/FetchImage.js | 15 ---------
 src/LightBox.js   | 91 ++++++++++++++++++++++++-------------------------------
 3 files changed, 50 insertions(+), 75 deletions(-)
 delete mode 100644 src/FetchImage.js

(limited to 'src')

diff --git a/src/CSSUtil.js b/src/CSSUtil.js
index f08a0da..c4172b8 100644
--- a/src/CSSUtil.js
+++ b/src/CSSUtil.js
@@ -9,24 +9,25 @@ export class CSSUtil {
      *
      * using key-value dont work
      *
-     * @param ele
+     * @param ele DOMElement
      * @param value
      */
     static setTransitionProperty(ele, value) {
-        if (ele.transition === '')  {
-            ele.transition = value;
+        let style = ele.style;
+        if (style.transition === '')  {
+            style.transition = value;
             return;
         }
-        if (ele.WebkitTransition === '') {
-            ele.WebkitTransition = value;
+        if (style.WebkitTransition === '') {
+            style.WebkitTransition = value;
             return;
         }
-        if (ele.MozTransition === '') {
-            ele.MozTransition = value;
+        if (style.MozTransition === '') {
+            style.MozTransition = value;
             return;
         }
-        if (ele.OTransition === '') {
-            ele.OTransition = value;
+        if (style.OTransition === '') {
+            style.OTransition = value;
         }
     }
 
diff --git a/src/FetchImage.js b/src/FetchImage.js
deleted file mode 100644
index e637bf1..0000000
--- a/src/FetchImage.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Created by Victor Häggqvist on 1/12/16.
- */
-
-export const FetchImage = (url) => {
-    return new Promise((resolve, reject) => {
-        fetch(url)
-            .then(res => {
-                var img = new Image();
-                img.src = url;
-                //console.log(img);
-                resolve(img);
-        });
-    });
-};
diff --git a/src/LightBox.js b/src/LightBox.js
index 15d2cdd..da0934f 100644
--- a/src/LightBox.js
+++ b/src/LightBox.js
@@ -71,10 +71,7 @@ export class LightBox {
     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) {
@@ -82,60 +79,52 @@ export class LightBox {
         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;
+            L.d('loadImage in');
+            let image = new Image();
+            this.image = image;
+            image.onload = () => {
                 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');
+                L.l('img loaded');
+                //L.l(image);
+                document.body.appendChild(image);
+                //L.d('setImage');
+                this.setImage();
+
+                image.style.opacity = 0;
+
+                CSSUtil.setTransitionProperty(image, '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);
+                    let next = null;
+                    Array.prototype.forEach.call(this.targets, (t, index) => {
+                        if (t == this.target && index+1 !== this.targets.length) {
+                            next = this.targets[index+1];
+                        }
+                    });
+
+                    if (next !== null) {
+                        L.d('preloading next');
+                        let nextImg = new Image();
+                        nextImg.src = next.href;
+                    } else {
+                        L.d('no preloading');
                     }
-                });
-                //
-                ////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;
-            });
+                }
+            };
+            image.src = this.target.href;
         }, this.options.animationSpeed + 100)
     }
 
@@ -162,7 +151,7 @@ export class LightBox {
     //}
 
     setImage() {
-        L.l(this.image);
+        //L.l(this.image);
         if (!this.image) return false;
 
         let screenWidth = window.innerWidth * 0.8;
-- 
cgit v1.2.3