From 8b14077808886bf9c38d7447f8ef98a0e2a4239a Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 11 Sep 2019 11:13:17 +0200
Subject: [PATCH] wip #2752 @1.5

---
 resources/js/logowall.js                    | 84 +++++++++++++++++----
 resources/styles/components/logowall.styl   |  7 +-
 resources/views/partials/logowall.blade.php |  2 +-
 3 files changed, 77 insertions(+), 16 deletions(-)

diff --git a/resources/js/logowall.js b/resources/js/logowall.js
index ccedace..c4effcd 100644
--- 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 6374102..f6310e3 100644
--- 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 86276f2..052a99b 100644
--- 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
-- 
2.39.5