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 vueVimeoPlayer from 'vue-vimeo-player' // Vue.use(vueVimeoPlayer) // import VueYouTubeEmbed from 'vue-youtube-embed' // Vue.use(VueYouTubeEmbed) import CoolLightBox from 'vue-cool-lightbox' Vue.use(CoolLightBox) 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, drupalDecoupled) { 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 checkNoVuePages(){ // return drupalDecoupled.sys_path != '/cart' // && drupalDecoupled.sys_path.indexOf('checkout') != 1; if( drupalDecoupled.route_name.indexOf('commerce') == -1 ){ return true; }else{ return false; } } function initVues(){ // only launch views if we are not in commerce pages if(checkNoVuePages()){ initVRouter(); initVSiteBrandingBlock() initVPagetitleBlock() initVHeaderMenu() initVMainContent() initVSearchBlock() } initVUserBlock() } function initVRouter(){ // we need this to update the title and body classes while using history nav router.beforeEach((to, from, next) => { // console.log('router beforeEach to ', to); // commit new title to store let title = null; switch (to.name) { case 'home': title = null break; case 'article': title = false break; default: title = to.name } if (title !== false) { store.commit('Common/setPagetitle', title) } // remove all path related body classes let body_classes = document.querySelector('body').classList; let classes_to_rm = []; for (var i = 0; i < body_classes.length; i++) { if(body_classes[i].startsWith('path-')){ classes_to_rm.push(body_classes[i]); } } document.querySelector('body').classList.remove(...classes_to_rm); // add new path classes to body let classes = []; if(to.path == '/'){ classes.push('path-home'); }else{ let path_parts = to.path.replace(/^\//, '').split('/'); for (var i = 0; i < path_parts.length; i++) { if(i == 0){ var c = "path-" + path_parts[i]; }else if (path_parts[i] !== ''){ var c = classes[i-1] +'-'+ path_parts[i]; } classes.push(c) } } document.querySelector('body').classList.add(...classes); // trigger router 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, drupalDecoupled);