refactor: Optimized Basic Slider

bin/Controls/Slider/BasicSlider.js

@@ -9,7 +9,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
     'qui/QUI',
     'qui/controls/Control',
 
-], function (QUI, QUIControl, Hammer) {
+], function (QUI, QUIControl) {
     "use strict";
 
     return new Class({
@@ -33,7 +33,6 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
             this.parent(options);
 
             this.List = false;
-            this.ListLength = false;
 
             this.addEvents({
                 onImport: this.$onImport
@@ -46,23 +45,94 @@ define('package/quiqqer/bricks/bin/Controls/Slider/BasicSlider', [
          * event : on import
          */
         $onImport: function () {
-            var self = this,
-                Elm  = this.getElm();
+            var Elm  = this.getElm();
 
             this.List = Elm.getElement(".basic-slider-images");
-            this.ListLength = this.List.getElements('li').length;
+            this.Slide = this.List.getFirst('li');
 
-            this.$change(2);
+            this.$next();
         },
 
-        $change: function (slideNr) {
+        $next: function () {
+            var self = this;
+            var NextSlide = this.Slide.getNext();
+            var Image = false;
+
+            if(!NextSlide) {
+                NextSlide = this.List.getFirst('li');
+            }
+
+            if(!NextSlide.getElement('img')) {
+                var url = NextSlide.get('data-image');
+
+                Image = self.$createImage(url);
+            }
+
+            (function () {
+                if (!Image) {
+                    self.$change(NextSlide).then(function () {
+                        self.$next();
+                    });
+                    return;
+                }
+
+                Image.then(function (resolve) {
+
+                    resolve.inject(NextSlide);
+                    self.$change(NextSlide).then(function () {
+                        self.$next();
+                    });
+                });
+            }).delay(this.getAttribute('delay'));
+        },
 
-            console.log();
+        $change: function (NextSlide) {
+            var self = this;
 
-            var Slide = this.List.getElement('li:nth-child(' + slideNr + ')');
+            return new Promise(function (resolve){
+                self.$hide(self.Slide).then(function () {
+                    self.$show(NextSlide);
+                    self.Slide = NextSlide;
+                    resolve();
+                });
+            });
+        },
 
-            var image = Slide.get('data-image');
+        $hide: function (PreviousSlide) {
+            return new Promise(function (resolve){
+                moofx(PreviousSlide).animate({
+                    'left': '-50',
+                    'opacity' : '0'
+                }, {
+                    duration: 250,
+                    callback: resolve
+                });
+            });
+        },
 
+        $show: function (Slide) {
+            return new Promise(function (resolve) {
+                moofx(Slide).animate({
+                    'left': '0',
+                    'opacity' : '1'
+                }, {
+                    duration: 500,
+                    callback: resolve
+                });
+            });
+        },
+
+        $createImage: function (url) {
+            return new Promise(function (resolve) {
+
+                var Img = new Element('img', {
+                    'src': url
+                });
+
+                Img.addEventListener('load', () => {
+                    resolve(Img);
+                });
+            });
         }
     });
 });
\ No newline at end of file

src/QUI/Bricks/Controls/Slider/BasicSlider.css

@@ -3,15 +3,28 @@
     flex-direction: row;
 }
 
-.basic-slider-wrapper li {
-    list-style: none;
-}
-
 .basic-slider-content,
 .basic-slider-image-wrapper {
     width: 50%;
 }
 
+.basic-slider-image-wrapper {
+    position: relative;
+}
+
+.basic-slider-image-wrapper li {
+    list-style: none;
+    position: absolute;
+    top: 0;
+    left: -50px;
+    opacity: 0;
+}
+
+.basic-slider-image-wrapper li:nth-child(1) {
+    opacity: 1;
+    left: 0;
+}
+
 .basic-slider-content {
     padding-right: 20px;
 }
\ No newline at end of file

src/QUI/Bricks/Controls/Slider/BasicSlider.html

@@ -20,7 +20,7 @@
 
         <ul class="basic-slider-images">
         {foreach from=$images item=Image}
-            <li data-image="{image image=$Image onlysrc=1 host=1}">
+            <li data-image="{image image=$Image onlysrc=1 width=500}" class="test">
 
                 {if $Image==$images[0]}
                 {image image=$Image}