started home showroom carroussel with mediaquery in js
This commit is contained in:
parent
1ae54233af
commit
9941eed64a
|
@ -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%;
|
||||
|
|
|
@ -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");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue