From 2ccb54ddbc569feb1be9f444edb404be2f322510 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 10 Sep 2019 19:30:11 +0200 Subject: [PATCH] wip #2752 @1 --- package.json | 9 ++- public/images/logowall/arrow-left.svg | 8 +++ public/images/logowall/arrow-right.svg | 8 +++ resources/js/logowall.js | 63 +++++++++++++++++---- resources/styles/components/logowall.styl | 24 +++++++- resources/views/pages/home.blade.php | 1 + resources/views/partials/logowall.blade.php | 9 ++- yarn.lock | 22 +++---- 8 files changed, 114 insertions(+), 30 deletions(-) create mode 100644 public/images/logowall/arrow-left.svg create mode 100644 public/images/logowall/arrow-right.svg diff --git a/package.json b/package.json index 1b97f50..9149540 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,12 @@ "devDependencies": { "@trevoreyre/autocomplete-vue": "^2.0.2", "axios": "^0.18", - "bootstrap": "^4.0.0", "browser-sync": "^2.26.5", "browser-sync-webpack-plugin": "2.0.1", + "cash-dom": "^4.1.5", "cross-env": "^5.2.0", "element-closest": "^3.0.1", + "element-qsa-scope": "^1.1.0", "gsap": "^2.1.3", "hammerjs": "^2.0.8", "laravel-mix": "^4.0.7", @@ -34,9 +35,7 @@ "vue": "^2.6.10", "vue-slide-up-down": "^1.7.2", "vue-slider-component": "^3.0.40", - "vue-template-compiler": "^2.6.10", - "cash-dom": "^4.1.5" + "vue-template-compiler": "^2.6.10" }, - "dependencies": { - } + "dependencies": {} } diff --git a/public/images/logowall/arrow-left.svg b/public/images/logowall/arrow-left.svg new file mode 100644 index 0000000..386034c --- /dev/null +++ b/public/images/logowall/arrow-left.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/logowall/arrow-right.svg b/public/images/logowall/arrow-right.svg new file mode 100644 index 0000000..5895adc --- /dev/null +++ b/public/images/logowall/arrow-right.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/resources/js/logowall.js b/resources/js/logowall.js index 894618b..ccedace 100644 --- a/resources/js/logowall.js +++ b/resources/js/logowall.js @@ -1,27 +1,19 @@ -document.addEventListener('DOMContentLoaded', function () { - window.wall = new Logowall(document.getElementsByClassName('.logowall')[0]); -}); - function Logowall(element) { this.element = element; this.items = element.children; this.nbItems = this.items.length; this.nbLines = 2; this.perLine = this.nbItems / this.nbLines; + this.index = 0; + this.transitioning = false; this.init(); } - -logowall.prototype = { +Logowall.prototype = { init: function () { - this.distributeLines(); this.initEvents(); }, - distributeLines: function () { - - }, - initEvents: function () { var $this = this; @@ -32,10 +24,59 @@ logowall.prototype = { $this.resize(); }); + this.element.querySelector('.next').addEventListener('click', function (event) { + $this.goNext(); + }); + + this.element.querySelector('.prev').addEventListener('click', function (event) { + $this.goPrev(); + }); + $this.resize(); }, + goNext: function () { + this.go(this.index + 1, 1); + }, + goPrev: function () { + this.go(this.index - 1, -1); + }, + go: function (newIndex, dir) { + + }, + resize: function () { + var $this=this; + + var w = window, + d = document, + e = d.documentElement, + g = d.getElementsByTagName('body')[0], + ww = w.innerWidth || e.clientWidth || g.clientWidth, + wh = w.innerHeight || e.clientHeight || g.clientHeight; + + var displayedCols = ww < 1024 ? (ww < 640 ? 2 : 3) : 4; + + var extras = this.element.querySelectorAll(':scope .extra'); + Array.prototype.forEach.call(extras, function (node) { + node.parentNode.removeChild(node); + }); + + 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); + } + }); }, }; + +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 607f6db..6374102 100644 --- a/resources/styles/components/logowall.styl +++ b/resources/styles/components/logowall.styl @@ -1,10 +1,30 @@ .logowall - max-width 100% - overflow hidden + + position relative + + .arrow + position: absolute; + top calc(50% - 25px) + cursor pointer + + &.prev + left: -7vw + @media (max-width 1640px) + left -3vw + + &.next + right -7vw + @media (max-width 1640px) + right -3vw + + .lines + max-width 100% + overflow hidden .line display block white-space nowrap + transition: left 500ms > div display: inline-block; diff --git a/resources/views/pages/home.blade.php b/resources/views/pages/home.blade.php index 3273899..74da747 100644 --- a/resources/views/pages/home.blade.php +++ b/resources/views/pages/home.blade.php @@ -6,6 +6,7 @@ @push('scripts') + @endpush @section('content') diff --git a/resources/views/partials/logowall.blade.php b/resources/views/partials/logowall.blade.php index 2511f53..86276f2 100644 --- a/resources/views/partials/logowall.blade.php +++ b/resources/views/partials/logowall.blade.php @@ -23,6 +23,11 @@ @endforeach
-
@stack('line0')
-
@stack('line1')
+ + +
+
@stack('line0')
+
@stack('line1')
+
+ diff --git a/yarn.lock b/yarn.lock index d68621f..438fd42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2514,6 +2514,11 @@ element-closest@^3.0.1: resolved "https://registry.yarnpkg.com/element-closest/-/element-closest-3.0.1.tgz#0b2000266ae43a800274401dc39486f5e4bfbce2" integrity sha512-Wm8B0in+k6GsSCra8vLVnFIjIrff2T1s2b++jU6VL6mqIteP19THxDXwT5JDrmJPlqT3YifOK9cu28+uRGUdew== +element-qsa-scope@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/element-qsa-scope/-/element-qsa-scope-1.1.0.tgz#6e1146a3aa796cd385846d39365578db358b647b" + integrity sha512-oBBTdmleT5eJ0r5/3/tVg0NcWv95ut4Oxj5Oh/IkZ3kc0UACF8psJU8Rocd4aXDgtoE5WD5/rqYOXvjOE1DxIg== + elliptic@^6.0.0: version "6.4.1" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a" @@ -3167,7 +3172,7 @@ glob-to-regexp@^0.3.0: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab" integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs= -glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3: +glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@~7.1.2: version "7.1.4" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255" integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A== @@ -6179,7 +6184,7 @@ safe-regex@^1.1.0: dependencies: ret "~0.1.10" -"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.2: +"safer-buffer@>= 2.1.2 < 3": version "2.1.2" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -6223,11 +6228,6 @@ selfsigned@^1.10.4: resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b" integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA== -semver@^6.0.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== - semver@^6.1.0, semver@^6.1.1: version "6.1.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b" @@ -6560,7 +6560,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@^0.7.3: +source-map@~0.7.2: version "0.7.3" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== @@ -6816,10 +6816,12 @@ stylus-loader@^3.0.2: dependencies: css-parse "~2.0.0" debug "~3.1.0" - glob "~7.1.2" + glob "^7.1.3" mkdirp "~0.5.x" + safer-buffer "^2.1.2" sax "~1.2.4" - source-map "~0.7.2" + semver "^6.0.0" + source-map "^0.7.3" supports-color@^2.0.0: version "2.0.0" -- 2.39.5