started home showroom carroussel with mediaquery in js

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1603,7 +1603,11 @@ article.node--type-frontpage .node__content > section.home-showrooms {
         article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item:nth-child(even) {
           grid-column: 2; } }
     article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
-      grid-row: 1; }
+      grid-row: 1;
+      opacity: 0;
+      transition: opacity 0.3s ease-in-out; }
+      article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item.active {
+        opacity: 1; }
       article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term {
         position: relative;
         width: 100%;

web/themes/custom/materiotheme/assets/dist/main.js

@@ -1190,7 +1190,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  props: ['html'],\n  // get the html from parent with props\n  data: function data() {\n    return {\n      template: null // compiled template from html used in render\n\n    };\n  },\n  beforeMount: function beforeMount() {\n    var _this = this;\n\n    // console.log('Home beforeMount');\n    // compile the html src (coming from parent with props or from ajax call)\n    if (this.html) {\n      // console.log('html', this.html);\n      this.template = _vue.default.compile(this.html);\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n    }\n  },\n  render: function render(h) {\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  },\n  methods: {\n    onClickLink: function onClickLink(e) {\n      console.log(\"onClickLink\", e, this.$router, this.$route);\n      var path = null; // find existing router route compared with link href\n\n      for (var i = 0; i < this.$router.options.routes.length; i++) {\n        if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n          if (e.originalTarget.pathname !== this.$route.path) {\n            path = e.originalTarget.pathname;\n          }\n\n          break;\n        }\n      }\n\n      if (path) {\n        this.$router.push({\n          path: path\n        });\n      }\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  props: ['html'],\n  // get the html from parent with props\n  data: function data() {\n    return {\n      template: null // compiled template from html used in render\n\n    };\n  },\n  beforeMount: function beforeMount() {\n    var _this = this;\n\n    // console.log('Home beforeMount');\n    // compile the html src (coming from parent with props or from ajax call)\n    if (this.html) {\n      // console.log('html', this.html);\n      this.template = _vue.default.compile(this.html);\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n    }\n  },\n  render: function render(h) {\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  },\n  mounted: function mounted() {\n    this.initShowroomCarroussel();\n  },\n  methods: {\n    initShowroomCarroussel: function initShowroomCarroussel() {\n      console.log(\"startShowroomCarroussel\");\n      var $showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item');\n      console.log('$showrooms', $showrooms); // TODO: share media query and variables between scss and js\n\n      var column_width = 205;\n      var column_goutiere = 13;\n      var bp = (column_width + column_goutiere) * 7 + 1;\n      var mediaQuery = window.matchMedia(\"(min-width: \".concat(bp, \"px)\"));\n\n      if (mediaQuery.matches) {\n        var $showroomsOdd = [];\n        var $showroomsEven = [];\n\n        for (var i = 0; i < $showrooms.length; i++) {\n          if (i % 2 === 0) {\n            $showroomsOdd.push($showrooms[i]);\n          } else {\n            $showroomsEven.push($showrooms[i]);\n          }\n        }\n\n        console.log('Odd', $showroomsOdd);\n        console.log('Even', $showroomsEven);\n        this.switchShowroomCarroussel($showroomsEven, 0);\n        this.switchShowroomCarroussel($showroomsOdd, 0);\n      } else {\n        this.switchShowroomCarroussel($showrooms, 0);\n      }\n    },\n    switchShowroomCarroussel: function switchShowroomCarroussel($elmts, i) {\n      // console.log('switchShowroomCarroussel i', $elmts, i);\n      $elmts[i].classList.add('active');\n      $elmts[i - 1 < 0 ? $elmts.length - 1 : i - 1].classList.remove('active');\n      i++;\n\n      if (i >= $elmts.length) {\n        i = 0;\n      }\n\n      setTimeout(this.switchShowroomCarroussel.bind(this, $elmts, i), 5000);\n    },\n    onClickLink: function onClickLink(e) {\n      console.log(\"onClickLink\", e, this.$router, this.$route);\n      var path = null; // find existing router route compared with link href\n\n      for (var i = 0; i < this.$router.options.routes.length; i++) {\n        if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n          if (e.originalTarget.pathname !== this.$route.path) {\n            path = e.originalTarget.pathname;\n          }\n\n          break;\n        }\n      }\n\n      if (path) {\n        this.$router.push({\n          path: path\n        });\n      }\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -673,6 +673,11 @@ article.node--type-frontpage{
             // top:0; left:0;
             // width:100%; height:100%;
             // overflow: hidden;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+            &.active{
+              opacity: 1;
+            }
             .taxonomy-term{
               position: relative;
               width:100%; height:100%;

web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

@@ -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;