materio-d9/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

197 lines
6.4 KiB
Vue
Raw Normal View History

<script>
import Vue from 'vue'
2021-06-09 13:06:52 +02:00
import productsMixins from 'vuejs/components/productsMixins'
export default {
props: ['html', 'full'], // get the html from parent with props
2021-06-09 13:06:52 +02:00
mixins: [productsMixins],
data() {
return {
2020-12-27 17:46:04 +01:00
template: null, // compiled template from html used in render
showrooms: [],
showroomsOdd: [],
showroomsEven: [],
showroomMode: 1,
showroomInterval: 0,
showroomI:0,
showroomJ:0
}
},
beforeMount() {
2021-05-27 16:39:15 +02:00
console.log('Home beforeMount, full', this.full)
// compile the html src (coming from parent with props or from ajax call)
if (this.html) {
// console.log('html', this.html)
2021-01-04 11:31:01 +01:00
this.compileTemplate()
}
},
render(h) {
if (!this.template) {
2021-06-01 22:46:15 +02:00
return h('span', this.$t('default.Loading…'))
} else {
return this.template.render.call(this)
}
},
mounted(){
2021-01-04 11:31:01 +01:00
// this.initShowroomCarroussel()
},
methods: {
2021-01-04 11:31:01 +01:00
compileTemplate(){
this.template = Vue.compile(this.html)
this.$options.staticRenderFns = []
this._staticTrees = []
this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
console.log('compileTemplate, full', this.full)
if (this.full) {
setTimeout(this.initShowroomCarroussel.bind(this), 250)
}
2021-01-04 11:31:01 +01:00
},
initShowroomCarroussel(){
console.log('startShowroomCarroussel')
2020-12-27 17:46:04 +01:00
this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
2021-06-10 20:20:04 +02:00
console.log('showrooms', this.showrooms.length, this.showrooms)
if (!this.showrooms.length) {
2021-05-31 16:59:15 +02:00
return
}
2021-06-10 20:20:04 +02:00
// console.log('TEST')
for (let i = 0; i < this.showrooms.length; i++) {
2020-12-27 17:46:04 +01:00
if (i%2 === 0) {
this.showroomsOdd.push(this.showrooms[i])
} else {
2020-12-27 17:46:04 +01:00
this.showroomsEven.push(this.showrooms[i])
}
}
console.log('Odd', this.showroomsOdd)
console.log('Even', this.showroomsEven)
// 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)`)
2020-12-27 17:46:04 +01:00
// Register event listener
mediaQuery.addListener(this.checkShowroomMode)
this.checkShowroomMode(mediaQuery)
// this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
// console.log('this.showroomInterval', this.showroomInterval)
2020-12-27 17:46:04 +01:00
// this.switchShowroomCarroussel()
},
checkShowroomMode(mq){
2021-06-10 20:20:04 +02:00
console.log('checkShowroomMode', mq)
2020-12-27 17:46:04 +01:00
// default mode 1
let newmode = 1
if (mq.matches) {
// if mediaquery match switch to mode 2
newmode = 2
}
if(newmode !== this.showroomMode) {
// if new mode different from old mode
// reset sowrooms classes
for (let i = 0; i < this.showrooms.length; i++) {
2020-12-27 17:46:04 +01:00
this.showrooms[i].classList.remove('active')
}
2020-12-27 17:46:04 +01:00
// record new mode
this.showroomMode = newmode
// clear interval
// if (this.showroomInterval) {
clearInterval(this.showroomInterval)
this.showroomInterval = 0
// }
// reset indexes
this.showroomI = 0
this.showroomJ = 0
}
2020-12-27 17:46:04 +01:00
// in any case (re)launch the animation
this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);
console.log('this.showroomInterval', this.showroomInterval)
2020-12-27 17:46:04 +01:00
this.switchShowroomCarroussel()
},
2020-12-27 17:46:04 +01:00
switchShowroomCarroussel(){
2021-06-10 20:20:04 +02:00
console.log('switchShowroomCarroussel')
2020-12-27 17:46:04 +01:00
if (this.showroomMode === 1) {
this.showrooms[this.showroomI].classList.add('active')
this.showrooms[this.showroomI-1 < 0 ? this.showrooms.length -1 : this.showroomI-1].classList.remove('active')
this.showroomI = this.showroomI+1 >= this.showrooms.length ? 0 : this.showroomI+1
} else {
2020-12-27 17:46:04 +01:00
this.showroomsOdd[this.showroomI].classList.add('active')
this.showroomsOdd[this.showroomI-1 < 0 ? this.showroomsOdd.length -1 : this.showroomI-1].classList.remove('active')
this.showroomI = this.showroomI+1 >= this.showroomsOdd.length ? 0 : this.showroomI+1
2020-12-27 17:46:04 +01:00
this.showroomsEven[this.showroomJ].classList.add('active')
this.showroomsEven[this.showroomJ-1 < 0 ? this.showroomsEven.length -1 : this.showroomJ-1].classList.remove('active')
this.showroomJ = this.showroomJ+1 >= this.showroomsEven.length ? 0 : this.showroomJ+1
}
},
onClickLink(e){
console.log("onClickLink", e, this.$router, this.$route)
2021-06-10 17:42:55 +02:00
// record the target before event finish the propagation as currentTarget will be deleted after
let target = e.currentTarget
console.log('target', target)
if (target.protocol == "mailto:") {
2021-06-08 11:48:43 +02:00
// https://stackoverflow.com/questions/10172499/mailto-using-javascript
2021-06-10 17:42:55 +02:00
window.location.href = target.href
2021-06-08 11:48:43 +02:00
}else {
let path = null;
2021-06-10 17:42:55 +02:00
let article = null;
// if we have an article link with appropriate data attributes
// 'data-id'
// 'data-entity-type'
// 'data-bundle'
if (target.dataset.entityType == 'node' && target.dataset.bundle == 'article') {
let matches = target.pathname.match(/^\/\w{2}\/[^\/]+\/(.*)/i)
console.log('matches', matches)
article = {
nid: target.dataset.id,
alias: matches[1]
}
} else {
// find existing router route compared with link href
2021-06-10 19:45:30 +02:00
let pathbase = target.pathname.match(/^(\/\w{2}\/[^\/]+)\/?.*/i)
2021-06-10 17:42:55 +02:00
console.log('pathbase', pathbase)
for (let i = 0; i < this.$router.options.routes.length; i++) {
if (this.$router.options.routes[i].path == pathbase[1]) {
if (target.pathname !== this.$route.path) {
path = target.pathname
}
break
2021-06-08 11:48:43 +02:00
}
2020-12-27 11:09:03 +01:00
}
2021-06-10 17:42:55 +02:00
}
2021-06-10 17:42:55 +02:00
if (article) {
this.$router.push({
name:`article`,
params: { alias: article.alias, id: article.nid }
})
} else if (path) {
2021-06-08 11:48:43 +02:00
this.$router.push({
path: path
})
}
}
2021-01-04 14:20:04 +01:00
},
2021-06-10 19:45:30 +02:00
onClickFieldLabel(e, part){
console.log("onClickFieldLabel", part, e, this.$router, this.$route)
}
2021-01-04 11:31:01 +01:00
},
watch: {
html: function(val) {
2021-06-09 13:06:52 +02:00
// console.log('html prop changed', val)
2021-01-04 11:31:01 +01:00
this.compileTemplate()
}
}
}
</script>
<style lang="scss" scoped>
</style>