378 lines
11 KiB
JavaScript
378 lines
11 KiB
JavaScript
/* eslint-disable import/first */
|
|
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 VModal from 'vue-js-modal'
|
|
Vue.use(VModal, { dialog: true })
|
|
|
|
import store from 'vuejs/store'
|
|
import router from 'vuejs/route'
|
|
|
|
// import VueI18n from 'vue-i18n'
|
|
// Vue.use(VueI18n)
|
|
// import * as Locales from 'assets/i18n/locales.json'
|
|
import { i18n, loadLanguageAsync } from 'vuejs/i18n'
|
|
|
|
import VueMeta from 'vue-meta'
|
|
Vue.use(VueMeta)
|
|
|
|
import VueSimpleAccordion from 'vue-simple-accordion'
|
|
Vue.use(VueSimpleAccordion, {
|
|
// ... Options go here
|
|
})
|
|
import 'vue-simple-accordion/dist/vue-simple-accordion.css'
|
|
|
|
import Vue2TouchEvents from 'vue2-touch-events'
|
|
Vue.use(Vue2TouchEvents)
|
|
|
|
import VUserBlock from 'vuejs/components/Block/UserBlock'
|
|
import VMainContent from 'vuejs/components/Content/MainContent'
|
|
import VSearchBlock from 'vuejs/components/Block/SearchBlock'
|
|
import VLeftContent from 'vuejs/components/Content/LeftContent'
|
|
import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
|
|
|
|
import { mapState } from 'vuex'
|
|
|
|
// require('theme/assets/styles/main.scss');
|
|
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
|
|
import 'theme/assets/styles/main.scss'
|
|
import 'theme/assets/styles/print.scss'
|
|
|
|
import { MA } from 'vuejs/api/ma-axios'
|
|
|
|
export let _v_sitebranding_block, _v_user_block, _v_header_menu,
|
|
_v_pagetitle_block, _v_search_block,
|
|
_v_main_content, _v_left_content
|
|
|
|
(function (Drupal, drupalSettings, drupalDecoupled) {
|
|
const MaterioTheme = function () {
|
|
const _is_front = drupalSettings.path.isFront
|
|
console.log('drupalSettings', drupalSettings)
|
|
|
|
// let _I18n
|
|
|
|
// ___ _ _
|
|
// |_ _|_ _ (_) |_
|
|
// | || ' \| | _|
|
|
// |___|_||_|_|\__|
|
|
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()) {
|
|
initVi18n()
|
|
initVStore()
|
|
initVRouter()
|
|
initVSiteBrandingBlock()
|
|
initVPagetitleBlock()
|
|
initVHeaderMenu()
|
|
initHamburgerMenu()
|
|
initVMainContent()
|
|
initVSearchBlock()
|
|
initVLeftContent()
|
|
}
|
|
initVUserBlock()
|
|
}
|
|
|
|
function initVi18n () {
|
|
// i18n.locale = drupalDecoupled.lang_code
|
|
// console.log('i18n.messages', i18n.messages)
|
|
loadLanguageAsync(drupalDecoupled.lang_code)
|
|
.then(() => {
|
|
console.log('main.js language loaded')
|
|
})
|
|
}
|
|
|
|
function initVStore () {
|
|
store.dispatch('Showrooms/getItems')
|
|
}
|
|
|
|
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
|
|
const body_classes = document.querySelector('body').classList
|
|
const classes_to_rm = []
|
|
for (let 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
|
|
const classes = []
|
|
if (to.name === 'home') {
|
|
classes.push('path-home')
|
|
} else {
|
|
const path_parts = to.path
|
|
.replace(/^\//, '')
|
|
.replace(/^\D{2,3}\//, '') // remove language relative prefix from path classes (fr, en, etc)
|
|
.split('/')
|
|
let c
|
|
for (let j = 0; j < path_parts.length; j++) {
|
|
if (j === 0) {
|
|
c = 'path-' + path_parts[j]
|
|
} else if (path_parts[j] !== '') {
|
|
c = classes[j - 1] + '-' + path_parts[j]
|
|
}
|
|
classes.push(c)
|
|
}
|
|
}
|
|
document.querySelector('body').classList.add(...classes)
|
|
|
|
updateLanguageLinksBlock(to.path)
|
|
|
|
// close the hamburger menu
|
|
store.dispatch('Common/openCloseHamMenu', false)
|
|
|
|
// trigger router
|
|
next()
|
|
})
|
|
}
|
|
|
|
function updateLanguageLinksBlock (path) {
|
|
// update block language selection
|
|
console.log('router beforeEach path ', path)
|
|
const links = document.querySelectorAll('#block-languageswitcher a.language-link')
|
|
|
|
const params = {
|
|
path: path
|
|
// XDEBUG_SESSION_START: true
|
|
}
|
|
|
|
MA.post('materio_decoupled/path_translation_links?', params)
|
|
.then(({ data }) => {
|
|
console.log('Path translations links', data)
|
|
if (data.error) {
|
|
console.warn('error getting translation paths', data.error)
|
|
}
|
|
|
|
links.forEach((link, i) => {
|
|
console.log('language link', path, link)
|
|
const hreflang = link.getAttribute('hreflang')
|
|
|
|
link.setAttribute('href', data.links[hreflang].url)
|
|
link.setAttribute('data-drupal-link-system-path', data.links[hreflang].sys_path)
|
|
|
|
link.innerHTML = data.links[hreflang].title
|
|
})
|
|
})
|
|
.catch(error => {
|
|
console.warn('Path translations links', error)
|
|
})
|
|
}
|
|
|
|
function initVSiteBrandingBlock () {
|
|
_v_sitebranding_block = new Vue({
|
|
store,
|
|
i18n,
|
|
router,
|
|
el: '#block-sitebranding',
|
|
methods: {
|
|
onclick (event) {
|
|
// console.log('router beforeEach to ', to)
|
|
const href = event.target.getAttribute('href')
|
|
// console.log('router beforeEach to ', to)
|
|
this.$router.push(href)
|
|
// replaced by router.beforeEach
|
|
// this.$store.commit('Common/setPagetitle', null)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function initVPagetitleBlock () {
|
|
const $blk = document.querySelector('#block-pagetitle')
|
|
const $h2 = $blk.querySelector('h2')
|
|
// get the loaded pagetitle
|
|
const 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,
|
|
i18n,
|
|
router,
|
|
el: $blk,
|
|
computed: {
|
|
...mapState({
|
|
pagetitle: state => state.Common.pagetitle
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
function initVUserBlock () {
|
|
const mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin'
|
|
const props = {
|
|
title: '',
|
|
loginblock: ''
|
|
}
|
|
let $block
|
|
switch (mount_point) {
|
|
case 'block-userlogin':
|
|
$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,
|
|
i18n,
|
|
// 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('router beforeEach to ', to)
|
|
}
|
|
|
|
function initVHeaderMenu () {
|
|
// console.log('router beforeEach to ', to)
|
|
const id = 'block-header'
|
|
const $html_obj = document.querySelector('#' + id)
|
|
// console.log('router beforeEach to ', to)
|
|
const html = $html_obj.outerHTML
|
|
_v_header_menu = new Vue({
|
|
store,
|
|
i18n,
|
|
router,
|
|
render: h => h(VHeaderMenu, { props: { id: id, dom_html: html } })
|
|
}).$mount('#' + id)
|
|
}
|
|
|
|
function initHamburgerMenu () {
|
|
const input = document.querySelector('input#header-block-right-toggle')
|
|
input.addEventListener('change', (e) => {
|
|
console.log('initHamburgerMenu input change ', e)
|
|
store.dispatch('Common/openCloseHamMenu', e.currentTarget.checked)
|
|
})
|
|
}
|
|
|
|
function initVMainContent () {
|
|
const id = 'main-content'
|
|
const $main_content = document.querySelector('#' + id)
|
|
// console.log('router beforeEach to ', to)
|
|
const main_html = $main_content.innerHTML
|
|
_v_main_content = new Vue({
|
|
store,
|
|
i18n,
|
|
metaInfo: {
|
|
// if no subcomponents specify a metaInfo.title, this title will be used
|
|
title: "materiO'",
|
|
// all titles will be injected into this template
|
|
titleTemplate: "%s | materiO'"
|
|
},
|
|
render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
|
|
}).$mount('#' + id)
|
|
}
|
|
|
|
function initVSearchBlock () {
|
|
// console.log('router beforeEach to ', to)
|
|
const id = 'block-materiosapisearchblock'
|
|
let $search_block = document.getElementById(id)
|
|
let 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
|
|
const $region = document.getElementById('header-bottom')
|
|
$region.appendChild($search_block)
|
|
}
|
|
|
|
// in any case create the vue
|
|
_v_search_block = new Vue({
|
|
store,
|
|
i18n,
|
|
render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
|
|
}).$mount('#' + id)
|
|
}
|
|
function initVLeftContent () {
|
|
const id = 'content-left'
|
|
// const $leftContent = document.getElementById(id)
|
|
// in any case create the vue
|
|
_v_left_content = new Vue({
|
|
store,
|
|
i18n,
|
|
render: h => h(VLeftContent, { props: { id: id } })
|
|
}).$mount('#' + id)
|
|
}
|
|
init()
|
|
} // end MaterioTheme()
|
|
|
|
// const materiotheme = new MaterioTheme()
|
|
MaterioTheme()
|
|
})(Drupal, drupalSettings, drupalDecoupled)
|