From 9941eed64aeb16b4f80bb069a7cc084c4f493a4f Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Sun, 27 Dec 2020 13:03:55 +0100 Subject: [PATCH] started home showroom carroussel with mediaquery in js --- .../custom/materiotheme/assets/dist/main.css | 6 ++- .../custom/materiotheme/assets/dist/main.js | 2 +- .../materiotheme/assets/styles/main.scss | 5 +++ .../vuejs/components/Pages/Home.vue | 43 +++++++++++++++++++ 4 files changed, 54 insertions(+), 2 deletions(-) diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 855a27e..e285c70 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/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%; diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 59c687c..f81fed9 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/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"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index d77f11b..7032eac 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/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%; diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue index 0cd3f24..09ff4f5 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue +++ b/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;