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_pagetitle_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() initVPagetitleBlock() 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) 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 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) // 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);