2021-03-08 21:11:14 +01:00
|
|
|
<script>
|
|
|
|
|
|
|
|
import Vue from 'vue'
|
|
|
|
|
|
|
|
import { mapState, mapActions } from 'vuex'
|
|
|
|
|
|
|
|
import { MA } from 'vuejs/api/ma-axios'
|
|
|
|
import router from 'vuejs/route'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
router,
|
|
|
|
props:['id','dom_html'],
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
html: null,
|
|
|
|
template: null
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState({
|
|
|
|
isloggedin: state => state.User.isloggedin
|
|
|
|
})
|
|
|
|
},
|
|
|
|
beforeMount() {
|
|
|
|
// console.log("beforeMount header_menu", this.html);
|
|
|
|
if(!this.template){
|
|
|
|
// console.log('no home_template');
|
|
|
|
if(this.dom_html){ // if html prop is available
|
|
|
|
this.html = this.dom_html
|
|
|
|
this.compileTemplate()
|
|
|
|
}else{ // else get it from ajax
|
|
|
|
this.getMenuBlockHtml()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2021-03-29 22:28:24 +02:00
|
|
|
// ...mapActions({
|
|
|
|
// openCloseHamMenu: 'Common/openCloseHamMenu'
|
|
|
|
// }),
|
2021-03-08 21:11:14 +01:00
|
|
|
compileTemplate(){
|
|
|
|
this.template = Vue.compile(this.html)
|
|
|
|
},
|
|
|
|
getMenuBlockHtml(){
|
|
|
|
MA.get('materio_decoupled/ajax/getheadermenu')
|
|
|
|
.then(({data}) => {
|
|
|
|
// console.log('HeaderMenu getMenuBlockHtml data', data);
|
|
|
|
this.html = data.rendered // record the html src into data
|
|
|
|
})
|
|
|
|
.catch(( error ) => {
|
|
|
|
console.warn('Issue with getMenuBlockHtml', error)
|
|
|
|
})
|
|
|
|
},
|
|
|
|
onclick (event) {
|
|
|
|
// console.log("Clicked on header menu link", event);
|
|
|
|
const href = event.target.getAttribute('href')
|
2021-03-29 22:28:24 +02:00
|
|
|
// this.openCloseHamMenu(false)
|
2021-03-08 21:11:14 +01:00
|
|
|
this.$router.push(href)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
render(h) {
|
|
|
|
// console.log('headerMenu render');
|
|
|
|
if(!this.template){
|
|
|
|
return h('span', 'Loading ...')
|
|
|
|
}else{
|
|
|
|
return this.template.render.call(this)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
html(n, o) {
|
2021-03-08 22:04:50 +01:00
|
|
|
// console.log('header_menu html changed', o, n)
|
2021-03-08 21:11:14 +01:00
|
|
|
this.compileTemplate()
|
|
|
|
},
|
|
|
|
isloggedin(n, o) {
|
|
|
|
console.log("HeaderMenu isloggedin changed", o, n)
|
|
|
|
this.getMenuBlockHtml()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
</style>
|