"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",
"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": {}
}
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+ <g id="Groupe_8" data-name="Groupe 8" transform="translate(886.414 602) rotate(180)">
+ <g id="Groupe_6" data-name="Groupe 6" transform="translate(849 577)">
+ <path id="Tracé_16" data-name="Tracé 16" d="M3275.773-724.775l12,12-12,12" transform="translate(-3251.773 724.775)" fill="none" stroke="#152f4e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ <line id="Ligne_2" data-name="Ligne 2" x1="36.001" transform="translate(0 12)" fill="none" stroke="#152f4e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ </g>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+ <g id="Groupe_7" data-name="Groupe 7" transform="translate(-848 -576)">
+ <g id="Groupe_6" data-name="Groupe 6" transform="translate(849 577)">
+ <path id="Tracé_16" data-name="Tracé 16" d="M3275.773-724.775l12,12-12,12" transform="translate(-3251.773 724.775)" fill="none" stroke="#152f4e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ <line id="Ligne_2" data-name="Ligne 2" x1="36.001" transform="translate(0 12)" fill="none" stroke="#152f4e" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+ </g>
+ </g>
+</svg>
-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;
$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]);
+});
.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;
@push('scripts')
<script src="{{ mix('/js/carrousel.js') }}"></script>
+ <script src="{{ mix('/js/logowall.js') }}"></script>
@endpush
@section('content')
@endforeach
<div class="logowall">
- <div class="line">@stack('line0')</div>
- <div class="line">@stack('line1')</div>
+ <img class="arrow prev" src="{{asset('images/logowall/arrow-left.svg')}}" alt="">
+ <img class="arrow next" src="{{asset('images/logowall/arrow-right.svg')}}" alt="">
+ <div class="lines">
+ <div class="line">@stack('line0')</div>
+ <div class="line">@stack('line1')</div>
+ </div>
</div>
+
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"
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==
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==
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"
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==
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"
projects / pmi.git / commitdiff
