|
@@ -27,7 +27,50 @@ export default {
|
|
|
return this.template.render.call(this)
|
|
|
}
|
|
|
},
|
|
|
+ mounted(){
|
|
|
+ this.initShowroomCarroussel()
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ initShowroomCarroussel(){
|
|
|
+ console.log("startShowroomCarroussel");
|
|
|
+ let $showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
|
|
|
+ console.log('$showrooms', $showrooms);
|
|
|
+
|
|
|
+ // TODO: share media query and variables between scss and js
|
|
|
+ let column_width= 205
|
|
|
+ let column_goutiere= 13
|
|
|
+ let bp = (column_width + column_goutiere )*7 +1
|
|
|
+ const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
|
|
|
+ if (mediaQuery.matches) {
|
|
|
+ let $showroomsOdd = []
|
|
|
+ let $showroomsEven = []
|
|
|
+ for (var i = 0; i < $showrooms.length; i++) {
|
|
|
+ if (i%2 === 0) {
|
|
|
+ $showroomsOdd.push($showrooms[i])
|
|
|
+ }else{
|
|
|
+ $showroomsEven.push($showrooms[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('Odd', $showroomsOdd);
|
|
|
+ console.log('Even', $showroomsEven);
|
|
|
+ this.switchShowroomCarroussel($showroomsEven, 0)
|
|
|
+ this.switchShowroomCarroussel($showroomsOdd, 0)
|
|
|
+ }else{
|
|
|
+ this.switchShowroomCarroussel($showrooms, 0)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ switchShowroomCarroussel($elmts, i){
|
|
|
+ // console.log('switchShowroomCarroussel i', $elmts, i);
|
|
|
+
|
|
|
+ $elmts[i].classList.add('active')
|
|
|
+ $elmts[i-1 < 0 ? $elmts.length -1 : i-1].classList.remove('active')
|
|
|
+
|
|
|
+ i++
|
|
|
+ if(i >= $elmts.length){
|
|
|
+ i = 0
|
|
|
+ }
|
|
|
+ setTimeout(this.switchShowroomCarroussel.bind(this,$elmts,i), 5000);
|
|
|
+ },
|
|
|
onClickLink(e){
|
|
|
console.log("onClickLink", e, this.$router, this.$route);
|
|
|
let path = null;
|