import Vue from 'vue' 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_main_content, _v_search_block; var _is_front = drupalSettings.path.isFront; console.log('drupalSettings', drupalSettings); // ___ _ _ // |_ _|_ _ (_) |_ // | || ' \| | _| // |___|_||_|_|\__| function init(){ console.log("MaterioTheme init()") initVues() } function initVues(){ initVSiteBrandingBlock() initVUserBlock() initVMainContent() initVSearchBlock() } 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) } } }) } 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 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) // console.log('initTestVContent', v_test_content); } 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) let $region = document.getElementById('content-top'); $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);