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

197 lines
6.4 KiB
Vue

<script>
import Vue from 'vue'
import productsMixins from 'vuejs/components/productsMixins'
export default {
props: ['html', 'full'], // get the html from parent with props
mixins: [productsMixins],
data() {
return {
template: null, // compiled template from html used in render
showrooms: [],
showroomsOdd: [],
showroomsEven: [],
showroomMode: 1,
showroomInterval: 0,
showroomI:0,
showroomJ:0
}
},
beforeMount() {
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)
this.compileTemplate()
}
},
render(h) {
if (!this.template) {
return h('span', this.$t('default.Loading…'))
} else {
return this.template.render.call(this)
}
},
mounted(){
// this.initShowroomCarroussel()
},
methods: {
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)
}
},
initShowroomCarroussel(){
console.log('startShowroomCarroussel')
this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
console.log('showrooms', this.showrooms.length, this.showrooms)
if (!this.showrooms.length) {
return
}
// console.log('TEST')
for (let i = 0; i < this.showrooms.length; i++) {
if (i%2 === 0) {
this.showroomsOdd.push(this.showrooms[i])
} else {
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)`)
// Register event listener
mediaQuery.addListener(this.checkShowroomMode)
this.checkShowroomMode(mediaQuery)
// this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
// console.log('this.showroomInterval', this.showroomInterval)
// this.switchShowroomCarroussel()
},
checkShowroomMode(mq){
console.log('checkShowroomMode', mq)
// 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++) {
this.showrooms[i].classList.remove('active')
}
// 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
}
// in any case (re)launch the animation
this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);
console.log('this.showroomInterval', this.showroomInterval)
this.switchShowroomCarroussel()
},
switchShowroomCarroussel(){
console.log('switchShowroomCarroussel')
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 {
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
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)
// 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:") {
// https://stackoverflow.com/questions/10172499/mailto-using-javascript
window.location.href = target.href
}else {
let path = null;
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
let pathbase = target.pathname.match(/^(\/\w{2}\/[^\/]+)\/?.*/i)
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
}
}
}
if (article) {
this.$router.push({
name:`article`,
params: { alias: article.alias, id: article.nid }
})
} else if (path) {
this.$router.push({
path: path
})
}
}
},
onClickFieldLabel(e, part){
console.log("onClickFieldLabel", part, e, this.$router, this.$route)
}
},
watch: {
html: function(val) {
// console.log('html prop changed', val)
this.compileTemplate()
}
}
}
</script>
<style lang="scss" scoped>
</style>