wip #2752 @1.5

diff --git a/resources/js/logowall.js b/resources/js/logowall.js
index ccedacee560166b8dfcccb3274441445ada42b80..c4effcd76e0bf0d2b22e6acef5743fbad6204db5 100644 (file)
--- a/resources/js/logowall.js
+++ b/resources/js/logowall.js
@@ -1,9 +1,10 @@
 function Logowall(element) {
     this.element = element;
-    this.items = element.children;
+    this.items = element.querySelectorAll(':scope .logo');
     this.nbItems = this.items.length;
     this.nbLines = 2;
     this.perLine = this.nbItems / this.nbLines;
+    this.itemBaseWidth = 25;
     this.index = 0;
     this.transitioning = false;
     this.init();
@@ -12,6 +13,7 @@ function Logowall(element) {
 Logowall.prototype = {
     init: function () {
         this.initEvents();
+        this.setIndex(0, false);
     },
 
     initEvents: function () {
@@ -41,12 +43,60 @@ Logowall.prototype = {
     goPrev: function () {
         this.go(this.index - 1, -1);
     },
-    go: function (newIndex, dir) {
+    go: function (newIndex) {
+        var $this = this;
+        if (this.transitioning) {
+            return;
+        }
+        this.transitioning = true;
 
+        this.setIndex(newIndex, true, function () {
+            $this.endTransition(newIndex);
+        });
+    },
+
+    setIndex: function (index, transition, callback) {
+        var visualIndex = -1 * (index + this.perLine);
+        var left = this.itemBaseWidth * visualIndex;
+
+        Array.prototype.forEach.call(this.element.querySelectorAll(':scope .line'), function (line) {
+            if (transition) {
+                line.classList.add('transition');
+            } else {
+                line.classList.remove('transition');
+            }
+            setTimeout(function () {
+                line.style.transform = "translateX(" + left + "%)";
+            }, 10);
+        });
+
+        if (callback !== undefined) {
+            setTimeout(function () {
+                callback()
+            }, 500);
+        }
+    },
+
+    endTransition: function (newIndex) {
+        this.index = this.normalizeIndex(newIndex);
+        if (this.index !== newIndex) {
+            this.setIndex(this.index, false);
+        }
+        this.transitioning = false;
+    },
+
+    normalizeIndex: function (index) {
+        var abs = Math.abs(index) % this.perLine;
+        if (index < 0) {
+            index = abs * -1;
+        } else {
+            index = abs;
+        }
+        return index;
     },
 
     resize: function () {
-        var $this=this;
+        var $this = this;
 
         var w = window,
             d = document,
@@ -55,7 +105,18 @@ Logowall.prototype = {
             ww = w.innerWidth || e.clientWidth || g.clientWidth,
             wh = w.innerHeight || e.clientHeight || g.clientHeight;
 
-        var displayedCols = ww < 1024 ? (ww < 640 ? 2 : 3) : 4;
+        var lw = 25;
+        if (ww < 640) {
+            lw = 50;
+        } else if (ww < 1024) {
+            lw = 33.333;
+        }
+        var change = this.itemBaseWidth !== lw;
+        this.itemBaseWidth = lw;
+
+        if (change) {
+            this.setIndex(this.index, false);
+        }
 
         var extras = this.element.querySelectorAll(':scope .extra');
         Array.prototype.forEach.call(extras, function (node) {
@@ -63,20 +124,17 @@ Logowall.prototype = {
         });
 
         Array.prototype.forEach.call(this.element.querySelectorAll(':scope .line'), function (line) {
-            for (var i = 0; i < $this.perLine; i++) {
-                var cloned = line.children[i].cloneNode(true);
-                cloned.classList.add('extra');
-                line.appendChild(cloned);
-
-                cloned = line.children[i].cloneNode(true);
-                cloned.classList.add('extra');
-                line.appendChild(cloned);
+            for (var j = 0; j < 2; j++) {
+                for (var i = 0; i < $this.perLine; i++) {
+                    var cloned = line.children[i].cloneNode(true);
+                    cloned.classList.add('extra');
+                    line.appendChild(cloned);
+                }
             }
         });
     },
 };
 
 document.addEventListener('DOMContentLoaded', function () {
-    console.log(':))');
     window.wall = new Logowall(document.getElementsByClassName('logowall')[0]);
 });

diff --git a/resources/styles/components/logowall.styl b/resources/styles/components/logowall.styl
index 637410283e5aa8658d766ba814295ade7df6ab24..f6310e31359b720de42333d486f5227b207e161b 100644 (file)
--- a/resources/styles/components/logowall.styl
+++ b/resources/styles/components/logowall.styl
@@ -24,9 +24,12 @@
   .line
     display block
     white-space nowrap
-    transition: left 500ms
+    font-size: 0;
 
-    > div
+    &.transition
+      transition transform 500ms
+
+    .logo
       display: inline-block;
       width 25%
       padding: 0 20px 20px 0

diff --git a/resources/views/partials/logowall.blade.php b/resources/views/partials/logowall.blade.php
index 86276f2807d30f9a9124ea18959869e1786fa9a3..052a99b663f34fb682736446bc2c3b5a6ac1b2ca 100644 (file)
--- a/resources/views/partials/logowall.blade.php
+++ b/resources/views/partials/logowall.blade.php
@@ -10,7 +10,7 @@
     @endphp
 
     @push($stack)
-        <div>
+        <div class="logo">
             @if($logo['url'])
                 <a href="{{$logo['url']}}" target="_blank">
                     @endif