materio-d9/web/themes/custom/materiotheme/assets/scripts/main.js

372 lines
11 KiB
JavaScript
Raw Normal View History

2020-11-25 22:49:17 +01:00
/* eslint-disable import/first */
import Vue from 'vue'
2020-11-25 22:49:17 +01:00
import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
props: {
2020-11-25 22:49:17 +01:00
spinner: 'spiral'
// slots.noMore: ''
2020-11-25 22:49:17 +01:00
}
// system: {
// throttleLimit: 50,
// /* other settings need to configure */
// }
2020-11-25 22:49:17 +01:00
})
// 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)
2020-02-19 17:59:26 +01:00
import VModal from 'vue-js-modal'
Vue.use(VModal)
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 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 { mapState } from 'vuex'
2019-03-25 18:27:56 +01:00
// require('theme/assets/styles/main.scss');
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
import 'theme/assets/styles/main.scss'
2021-01-25 22:19:21 +01:00
import 'theme/assets/styles/print.scss'
2021-01-25 17:13:38 +01:00
import VueSimpleAccordion from 'vue-simple-accordion';
import 'vue-simple-accordion/dist/vue-simple-accordion.css';
2021-01-25 17:13:38 +01:00
Vue.use(VueSimpleAccordion, {
// ... Options go here
});
import { MA } from 'vuejs/api/ma-axios'
2020-11-25 22:49:17 +01:00
(function (Drupal, drupalSettings, drupalDecoupled) {
const MaterioTheme = function () {
let _v_sitebranding_block, _v_user_block, _v_header_menu,
_v_pagetitle_block, _v_search_block,
_v_main_content, _v_left_content
2020-11-25 22:49:17 +01:00
const _is_front = drupalSettings.path.isFront
console.log('drupalSettings', drupalSettings)
// let _I18n
2019-03-25 18:27:56 +01:00
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
2020-11-25 22:49:17 +01:00
function init () {
console.log('MaterioTheme init()')
initVues()
}
2020-11-25 22:49:17 +01:00
function checkNoVuePages () {
2019-10-07 20:26:23 +02:00
// return drupalDecoupled.sys_path != '/cart'
// && drupalDecoupled.sys_path.indexOf('checkout') != 1;
2020-11-25 22:49:17 +01:00
if (drupalDecoupled.route_name.indexOf('commerce') == -1 &&
drupalDecoupled.route_name.indexOf('flagging_collection') == -1 &&
2020-11-25 22:49:17 +01:00
drupalDecoupled.route_name.indexOf('user') == -1) {
return false
} else {
return true
2019-10-07 20:26:23 +02:00
}
2019-10-07 17:32:14 +02:00
}
2020-11-25 22:49:17 +01:00
function initVues () {
2019-10-07 17:32:14 +02:00
// only launch views if we are not in commerce pages
2020-11-25 22:49:17 +01:00
if (!checkNoVuePages()) {
initVi18n()
initVStore()
2020-11-25 22:49:17 +01:00
initVRouter()
2019-10-07 17:32:14 +02:00
initVSiteBrandingBlock()
initVPagetitleBlock()
initVHeaderMenu()
initVMainContent()
initVSearchBlock()
initVLeftContent()
2019-10-07 17:32:14 +02:00
}
initVUserBlock()
}
2019-03-25 18:27:56 +01:00
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')
}
2020-11-25 22:49:17 +01:00
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
2020-11-25 22:49:17 +01:00
let title = null
2019-07-25 21:23:23 +02:00
switch (to.name) {
case 'home':
title = null
2020-11-25 22:49:17 +01:00
break
2019-07-25 21:23:23 +02:00
case 'article':
title = false
2020-11-25 22:49:17 +01:00
break
2019-07-25 21:23:23 +02:00
default:
title = to.name
}
if (title !== false) {
store.commit('Common/setPagetitle', title)
}
// remove all path related body classes
2020-11-25 22:49:17 +01:00
const body_classes = document.querySelector('body').classList
const classes_to_rm = []
for (var i = 0; i < body_classes.length; i++) {
2020-11-25 22:49:17 +01:00
if (body_classes[i].startsWith('path-')) {
classes_to_rm.push(body_classes[i])
}
}
2020-11-25 22:49:17 +01:00
document.querySelector('body').classList.remove(...classes_to_rm)
// add new path classes to body
2020-11-25 22:49:17 +01:00
const classes = []
if (to.path == '/') {
classes.push('path-home')
} else {
2021-01-19 16:30:14 +01:00
const path_parts = to.path
.replace(/^\//, '')
// remove language relative prefix from path classes (fr, en, etc)
.replace(/^\D{2,3}\//, '')
.split('/')
for (var i = 0; i < path_parts.length; i++) {
2020-11-25 22:49:17 +01:00
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)
}
}
2020-11-25 22:49:17 +01:00
document.querySelector('body').classList.add(...classes)
updateLanguageLinksBlock(to.path);
// trigger router
next()
})
}
function updateLanguageLinksBlock(path){
// update block language selection
console.log("updateLanguageLinksBlock, path:", path);
let links = document.querySelectorAll('#block-languageswitcher a.language-link')
let 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 get translation paths", data.error);
} else {
links.forEach((link, i) => {
console.log("language link",path , link)
let hreflang = link.getAttribute('hreflang')
link.setAttribute('href', data.links[hreflang].url)
link.innerHTML = data.links[hreflang].title
});
}
})
.catch(error => {
console.warn('Path translations links', error)
})
}
2020-11-25 22:49:17 +01:00
function initVSiteBrandingBlock () {
_v_sitebranding_block = new Vue({
store,
i18n,
router,
el: '#block-sitebranding',
methods: {
2020-11-25 22:49:17 +01:00
onclick (event) {
// console.log("Clicked on logo event", event);
2020-11-25 22:49:17 +01:00
const 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)
}
}
})
}
2020-11-25 22:49:17 +01:00
function initVPagetitleBlock () {
const $blk = document.querySelector('#block-pagetitle')
const $h2 = $blk.querySelector('h2')
// get the loaded pagetitle
2020-11-25 22:49:17 +01:00
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
})
2020-11-25 22:49:17 +01:00
}
})
}
2020-11-25 22:49:17 +01:00
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':
2020-11-25 22:49:17 +01:00
$block = document.getElementById(mount_point)
console.log('initVUserBlock login form html', $block)
props.loginblock = $block.outerHTML.trim()
2020-11-25 22:49:17 +01:00
break
case 'block-userblock':
default:
2020-11-25 22:49:17 +01:00
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
2020-11-25 22:49:17 +01:00
if (drupalSettings.user.uid !== 0) {
this.$store.commit('User/setUid', drupalSettings.user.uid)
this.$store.dispatch('User/getUser')
}
},
2020-11-25 22:49:17 +01:00
render: h => h(VUserBlock, { props: props })
}).$mount('#' + mount_point)
// console.log('initVUserBlock', _v_user_block);
}
2019-03-25 18:27:56 +01:00
2020-11-25 22:49:17 +01:00
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,
i18n,
router,
2020-11-25 22:49:17 +01:00
el: '#block-header',
methods: {
2020-11-25 22:49:17 +01:00
onclick (event) {
// console.log("Clicked on header menu link", event);
2020-11-25 22:49:17 +01:00
const 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)
}
}
})
}
2020-11-25 22:49:17 +01:00
function initVMainContent () {
const id = 'main-content'
const $main_content = document.querySelector('#' + id)
// console.log('main-content', $main_content);
2020-11-25 22:49:17 +01:00
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'"
},
2020-11-25 22:49:17 +01:00
render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
}).$mount('#' + id)
}
2019-03-25 18:27:56 +01:00
2020-11-25 22:49:17 +01:00
function initVSearchBlock () {
// console.log('initVSearchBlock');
2020-11-25 22:49:17 +01:00
const id = 'block-materiosapisearchblock'
let $search_block = document.getElementById(id)
2020-11-25 22:49:17 +01:00
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
2020-11-25 22:49:17 +01:00
} 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
2020-11-25 22:49:17 +01:00
const $region = document.getElementById('header-bottom')
$region.appendChild($search_block)
}
// in any case create the vue
_v_search_block = new Vue({
store,
i18n,
2020-11-25 22:49:17 +01:00
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()
2019-03-25 18:27:56 +01:00
} // end MaterioTheme()
2020-11-25 22:49:17 +01:00
const materiotheme = new MaterioTheme()
})(Drupal, drupalSettings, drupalDecoupled)