materio-d9/web/themes/custom/materiotheme/assets/scripts/main.js

212 lines
6.2 KiB
JavaScript

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading';
Vue.use(InfiniteLoading, {
props: {
spinner: 'spiral',
// slots.noMore: ''
},
// system: {
// throttleLimit: 50,
// /* other settings need to configure */
// }
});
import store from 'vuejs/store'
import router from 'vuejs/route'
import VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock'
import { mapState } from 'vuex'
// require('theme/assets/styles/main.scss');
import 'theme/assets/styles/main.scss'
(function(Drupal, drupalSettings) {
var MaterioTheme = function(){
var _v_sitebranding_block, _v_user_block, _v_header_menu
, _v_pagetitle_block, _v_search_block
, _v_main_content;
var _is_front = drupalSettings.path.isFront;
console.log('drupalSettings', drupalSettings);
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){
console.log("MaterioTheme init()")
initVues()
}
function initVues(){
initVRouter();
initVSiteBrandingBlock()
initVPagetitleBlock()
initVUserBlock()
initVHeaderMenu()
initVMainContent()
initVSearchBlock()
}
function initVRouter(){
// we need this to update the title while using history nav
router.beforeEach((to, from, next) => {
store.commit('Common/setPagetitle', to.name != 'home' ? to.name : null)
next();
})
}
function initVSiteBrandingBlock(){
_v_sitebranding_block = new Vue({
store,
router,
el: '#block-sitebranding',
methods: {
onclick(event){
// console.log("Clicked on logo event", event);
let href = event.target.getAttribute('href');
// console.log("Clicked on logo href", href);
this.$router.push(href)
// replaced by router.beforeEach
// this.$store.commit('Common/setPagetitle', null)
}
}
})
}
function initVPagetitleBlock(){
let $blk = document.querySelector('#block-pagetitle')
let $h2 = $blk.querySelector('h2')
// get the loaded pagetitle
let title = $h2.innerText
// if not front recorde the loaded pagetitle in store
if (!_is_front) {
store.commit('Common/setPagetitle', title)
}
// replace in template the pagetitle by vue binding
$h2.innerText = '{{ pagetitle }}'
// create the vue
_v_pagetitle_block = new Vue({
store,
router,
el: $blk,
computed: {
...mapState({
pagetitle: state => state.Common.pagetitle
})
},
})
}
function initVUserBlock(){
let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
let props = {
title: "",
loginblock:""
};
switch (mount_point) {
case 'block-userlogin':
let $block = document.getElementById(mount_point);
console.log('initVUserBlock login form html', $block);
props.loginblock = $block.outerHTML.trim()
break;
case 'block-userblock':
default:
break;
}
_v_user_block = new Vue({
store,
// computed: {
// ...mapState({
// isloggedin: state => state.User.isloggedin
// })
// },
created () {
// if already loggedin, call store.user to get the user infos
if(drupalSettings.user.uid !== 0){
this.$store.commit('User/setUid', drupalSettings.user.uid)
this.$store.dispatch('User/getUser')
}
},
render: h => h(VUserBlock, {props:props})
}).$mount('#'+mount_point)
// console.log('initVUserBlock', _v_user_block);
}
function initVHeaderMenu(){
// console.log('initVHeaderMenu');
// adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)
// not working : String contains an invalid character
// document.querySelectorAll(`#block-header a`).forEach(link => {
// console.log(link);
// link.setAttribute('@click.prevent', 'onclick')
// });
_v_header_menu = new Vue({
store,
router,
el: `#block-header`,
methods: {
onclick(event){
// console.log("Clicked on header menu link", event);
let href = event.target.getAttribute('href');
let title = event.target.innerText;
// console.log("Clicked on header menu link : href", href);
this.$router.push(href)
// replaced by router.beforeEach
// this.$store.commit('Common/setPagetitle', title)
}
}
})
}
function initVMainContent(){
let id = "main-content"
let $main_content = document.querySelector('#'+id)
// console.log('main-content', $main_content);
let main_html = $main_content.innerHTML
_v_main_content = new Vue({
store,
render: h => h(VMainContent, {props:{id:id, html:main_html, isfront:drupalSettings.path.isFront}})
}).$mount('#'+id)
}
function initVSearchBlock(){
// console.log('initVSearchBlock');
let id = "block-materiosapisearchblock"
let $search_block = document.getElementById(id)
var formhtml = null
if($search_block){
// get the search form html to pass it as template to the vue
// we gain display speed vs async downloaded data
formhtml = $search_block.innerHTML
}else{
// else create the empty block to fill it later with async data
$search_block = document.createElement('div')
$search_block.setAttribute('id', id)
// TODO: get region by REST
let $region = document.getElementById('header-bottom');
$region.appendChild($search_block);
}
// in any case create the vue
_v_search_block = new Vue({
store,
render: h => h(VSearchBlock, {props:{blockid:id, formhtml:formhtml}})
}).$mount('#'+id)
}
init()
} // end MaterioTheme()
var materiotheme = new MaterioTheme();
})(Drupal, drupalSettings);