280 lines
8.4 KiB
JavaScript
280 lines
8.4 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 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 &&
|
|
drupalDecoupled.route_name.indexOf('flagging_collection') == -1 &&
|
|
drupalDecoupled.route_name.indexOf('user') == -1){
|
|
return false;
|
|
}else{
|
|
return true;
|
|
}
|
|
}
|
|
|
|
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('/');
|
|
// TODO: remove language relative prefix from path classes (fr, en, etc)
|
|
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);
|