main.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. /* eslint-disable import/first */
  2. import Vue from 'vue'
  3. import InfiniteLoading from 'vue-infinite-loading'
  4. Vue.use(InfiniteLoading, {
  5. props: {
  6. spinner: 'spiral'
  7. // slots.noMore: ''
  8. }
  9. // system: {
  10. // throttleLimit: 50,
  11. // /* other settings need to configure */
  12. // }
  13. })
  14. // import vueVimeoPlayer from 'vue-vimeo-player'
  15. // Vue.use(vueVimeoPlayer)
  16. // import VueYouTubeEmbed from 'vue-youtube-embed'
  17. // Vue.use(VueYouTubeEmbed)
  18. // LOADED IN COMPONENT
  19. // import CoolLightBox from 'vue-cool-lightbox'
  20. // Vue.use(CoolLightBox)
  21. import VModal from 'vue-js-modal'
  22. Vue.use(VModal, { dialog: true })
  23. import router from 'vuejs/route'
  24. import store from 'vuejs/store'
  25. // import VueI18n from 'vue-i18n'
  26. // Vue.use(VueI18n)
  27. // import * as Locales from 'assets/i18n/locales.json'
  28. import { i18n, loadLanguageAsync } from 'vuejs/i18n'
  29. import VueMeta from 'vue-meta'
  30. Vue.use(VueMeta)
  31. // LOADED IN COMPONENT
  32. // import VueSimpleAccordion from 'vue-simple-accordion'
  33. // Vue.use(VueSimpleAccordion, {
  34. // // ... Options go here
  35. // })
  36. // import 'vue-simple-accordion/dist/vue-simple-accordion.css'
  37. import Vue2TouchEvents from 'vue2-touch-events'
  38. Vue.use(Vue2TouchEvents)
  39. import VUserBlock from 'vuejs/components/Block/UserBlock'
  40. import VMainContent from 'vuejs/components/Content/MainContent'
  41. import VSearchBlock from 'vuejs/components/Block/SearchBlock'
  42. import VLeftContent from 'vuejs/components/Content/LeftContent'
  43. import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
  44. import GlobCoolLightBox from 'vuejs/components/Content/GlobCoolLightBox'
  45. import { mapState } from 'vuex'
  46. // import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
  47. import 'slim-select/slimselect.min.css'
  48. import 'theme/assets/styles/main.scss'
  49. import 'theme/assets/styles/print.scss'
  50. import MA from 'vuejs/api/ma-axios'
  51. export let _v_sitebranding_block, _v_user_block, _v_header_menu,
  52. _v_pagetitle_block, _v_search_block,
  53. _v_main_content, _v_left_content,
  54. _v_glob_coollightbox
  55. (function (Drupal, drupalSettings, drupalDecoupled) {
  56. const MaterioTheme = function () {
  57. const _is_front = drupalSettings.path.isFront
  58. console.log('drupalSettings', drupalSettings)
  59. // let _I18n
  60. // ___ _ _
  61. // |_ _|_ _ (_) |_
  62. // | || ' \| | _|
  63. // |___|_||_|_|\__|
  64. function init () {
  65. console.log('MaterioTheme init()')
  66. initVues()
  67. }
  68. function checkNoVuePages () {
  69. // return drupalDecoupled.sys_path != '/cart'
  70. // && drupalDecoupled.sys_path.indexOf('checkout') != 1;
  71. // if (drupalDecoupled.route_name.indexOf('commerce') === -1 &&
  72. // drupalDecoupled.route_name.indexOf('flagging_collection') === -1 &&
  73. // drupalDecoupled.route_name.indexOf('user') === -1 &&
  74. // drupalDecoupled.route_name !== 'entity.webform.canonical' &&
  75. // (drupalDecoupled.route_name === 'entity.webform.canonical' && drupalDecoupled.sys_path.indexOf('/webform/multi_joueur') === -1)) {
  76. // return false
  77. // } else {
  78. // return true
  79. // }
  80. if (drupalDecoupled.route_name.indexOf('commerce') !== -1 ||
  81. drupalDecoupled.route_name.indexOf('flagging_collection') !== -1 ||
  82. drupalDecoupled.route_name.indexOf('user') !== -1 ||
  83. drupalDecoupled.route_name.indexOf('entity.webform.canonical') !== -1 ||
  84. drupalDecoupled.route_name.indexOf('entity.webform.confirmation') !== -1 ||
  85. drupalDecoupled.route_name.indexOf('materio_expo.qr_controller_getfile') !== -1 ||
  86. (drupalDecoupled.route_name === 'entity.node.canonical' && drupalDecoupled.entity_bundle === 'simplenews_issue') ||
  87. drupalDecoupled.route_name.indexOf('simplenews') !== -1
  88. ) {
  89. console.debug('NO VUEJS')
  90. return true
  91. } else {
  92. console.debug('VUJS')
  93. return false
  94. }
  95. }
  96. function initVues () {
  97. // only launch views if we are not in commerce pages
  98. if (!checkNoVuePages()) {
  99. initVRouter()
  100. initVSiteBrandingBlock()
  101. initVPagetitleBlock()
  102. initVHeaderMenu()
  103. initHamburgerMenu()
  104. initVSearchBlock()
  105. initVMainContent()
  106. initVStore()
  107. initVi18n()
  108. initVLeftContent()
  109. initCoolLightBox()
  110. }
  111. initVUserBlock()
  112. }
  113. function initVi18n () {
  114. // i18n.locale = drupalDecoupled.lang_code
  115. // console.log('i18n.messages', i18n.messages)
  116. loadLanguageAsync(drupalDecoupled.lang_code)
  117. .then(() => {
  118. console.log('main.js language loaded')
  119. })
  120. }
  121. function initVStore () {
  122. store.dispatch('Showrooms/getItems')
  123. }
  124. function initVRouter () {
  125. // we need this to update the title and body classes while using history nav
  126. router.beforeEach((to, from, next) => {
  127. console.log('router beforeEach to ', to, router.app.$i18n)
  128. // commit new title to store
  129. let title = null
  130. switch (to.name) {
  131. case 'home':
  132. title = null
  133. break
  134. case 'article':
  135. title = false
  136. break
  137. case 'pricing':
  138. title = i18n.t('materio.' + to.name)
  139. break
  140. default:
  141. title = to.name
  142. }
  143. if (title !== false) {
  144. store.commit('Common/setPagetitle', title)
  145. }
  146. // remove all path related body classes
  147. const body_classes = document.querySelector('body').classList
  148. const classes_to_rm = []
  149. for (let i = 0; i < body_classes.length; i++) {
  150. if (body_classes[i].startsWith('path-')) {
  151. classes_to_rm.push(body_classes[i])
  152. }
  153. }
  154. document.querySelector('body').classList.remove(...classes_to_rm)
  155. // add new path classes to body
  156. const classes = []
  157. if (to.name === 'home') {
  158. classes.push('path-home')
  159. } else {
  160. const path_parts = to.path
  161. .replace(/^\//, '')
  162. .replace(/^\D{2,3}\//, '') // remove language relative prefix from path classes (fr, en, etc)
  163. .split('/')
  164. let c
  165. for (let j = 0; j < path_parts.length; j++) {
  166. if (j === 0) {
  167. c = 'path-' + path_parts[j]
  168. } else if (path_parts[j] !== '') {
  169. c = classes[j - 1] + '-' + path_parts[j]
  170. }
  171. classes.push(c)
  172. }
  173. }
  174. document.querySelector('body').classList.add(...classes)
  175. updateLanguageLinksBlock(to.path)
  176. // close the hamburger menu
  177. store.dispatch('Common/openCloseHamMenu', false)
  178. // trigger router
  179. next()
  180. })
  181. }
  182. function updateLanguageLinksBlock (path) {
  183. // update block language selection
  184. console.log('router beforeEach path ', path)
  185. const links = document.querySelectorAll('#block-languageswitcher a.language-link')
  186. const params = {
  187. path: path
  188. // XDEBUG_SESSION_START: true
  189. }
  190. MA.post('materio_decoupled/path_translation_links?', params)
  191. .then(({ data }) => {
  192. console.log('Path translations links', data)
  193. if (data.error) {
  194. console.warn('error getting translation paths', data.error)
  195. }
  196. links.forEach((link, i) => {
  197. console.log('language link', path, link)
  198. const hreflang = link.getAttribute('hreflang')
  199. link.setAttribute('href', data.links[hreflang].url)
  200. link.setAttribute('data-drupal-link-system-path', data.links[hreflang].sys_path)
  201. link.innerHTML = data.links[hreflang].title
  202. })
  203. })
  204. .catch(error => {
  205. console.warn('Path translations links', error)
  206. })
  207. }
  208. function initVSiteBrandingBlock () {
  209. _v_sitebranding_block = new Vue({
  210. store,
  211. i18n,
  212. router,
  213. el: '#block-sitebranding',
  214. methods: {
  215. onclick (event) {
  216. // console.log('router beforeEach to ', to)
  217. const href = event.target.getAttribute('href')
  218. // console.log('router beforeEach to ', to)
  219. this.$router.push(href)
  220. // replaced by router.beforeEach
  221. // this.$store.commit('Common/setPagetitle', null)
  222. }
  223. }
  224. })
  225. }
  226. function initVPagetitleBlock () {
  227. const $blk = document.querySelector('#block-pagetitle')
  228. const $h2 = $blk.querySelector('h2')
  229. // get the loaded pagetitle
  230. const title = $h2.innerText
  231. // if not front recorde the loaded pagetitle in store
  232. if (!_is_front) {
  233. store.commit('Common/setPagetitle', title)
  234. }
  235. // replace in template the pagetitle by vue binding
  236. $h2.innerText = '{{ pagetitle }}'
  237. // create the vue
  238. _v_pagetitle_block = new Vue({
  239. store,
  240. i18n,
  241. router,
  242. el: $blk,
  243. computed: {
  244. ...mapState({
  245. pagetitle: state => state.Common.pagetitle
  246. })
  247. }
  248. })
  249. }
  250. function initVUserBlock () {
  251. const mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin'
  252. const props = {
  253. title: '',
  254. loginblock: ''
  255. }
  256. let $block
  257. switch (mount_point) {
  258. case 'block-userlogin':
  259. $block = document.getElementById(mount_point)
  260. console.log('initVUserBlock login form html', $block)
  261. props.loginblock = $block.outerHTML.trim()
  262. break
  263. case 'block-userblock':
  264. default:
  265. break
  266. }
  267. _v_user_block = new Vue({
  268. store,
  269. i18n,
  270. // computed: {
  271. // ...mapState({
  272. // isloggedin: state => state.User.isloggedin
  273. // })
  274. // },
  275. created () {
  276. // if already loggedin, call store.user to get the user infos
  277. if (drupalSettings.user.uid !== 0) {
  278. this.$store.commit('User/setUid', drupalSettings.user.uid)
  279. this.$store.dispatch('User/getUser')
  280. }
  281. },
  282. render: h => h(VUserBlock, { props: props })
  283. }).$mount('#' + mount_point)
  284. // console.log('router beforeEach to ', to)
  285. }
  286. function initVHeaderMenu () {
  287. // console.log('router beforeEach to ', to)
  288. const id = 'block-header'
  289. const $html_obj = document.querySelector('#' + id)
  290. // console.log('router beforeEach to ', to)
  291. const html = $html_obj.outerHTML
  292. _v_header_menu = new Vue({
  293. store,
  294. i18n,
  295. router,
  296. render: h => h(VHeaderMenu, { props: { id: id, dom_html: html } })
  297. }).$mount('#' + id)
  298. }
  299. function initHamburgerMenu () {
  300. const input = document.querySelector('input#header-block-right-toggle')
  301. input.addEventListener('change', (e) => {
  302. console.log('initHamburgerMenu input change ', e)
  303. store.dispatch('Common/openCloseHamMenu', e.currentTarget.checked)
  304. })
  305. }
  306. function initVMainContent () {
  307. const id = 'main-content'
  308. const $main_content = document.querySelector('#' + id)
  309. // console.log('router beforeEach to ', to)
  310. const main_html = $main_content.innerHTML
  311. _v_main_content = new Vue({
  312. store,
  313. i18n,
  314. metaInfo: {
  315. // if no subcomponents specify a metaInfo.title, this title will be used
  316. title: "materiO'",
  317. // all titles will be injected into this template
  318. titleTemplate: "%s | materiO'"
  319. },
  320. render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
  321. }).$mount('#' + id)
  322. }
  323. function initVSearchBlock () {
  324. // console.log('router beforeEach to ', to)
  325. const id = 'block-materiosapisearchblock'
  326. let $search_block = document.getElementById(id)
  327. let formhtml = null
  328. if ($search_block) {
  329. // get the search form html to pass it as template to the vue
  330. // we gain display speed vs async downloaded data
  331. formhtml = $search_block.innerHTML
  332. } else {
  333. // else create the empty block to fill it later with async data
  334. $search_block = document.createElement('div')
  335. $search_block.setAttribute('id', id)
  336. // TODO: get region by REST
  337. const $region = document.getElementById('header-bottom')
  338. $region.appendChild($search_block)
  339. }
  340. // in any case create the vue
  341. _v_search_block = new Vue({
  342. store,
  343. i18n,
  344. render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
  345. }).$mount('#' + id)
  346. }
  347. function initVLeftContent () {
  348. const id = 'content-left'
  349. // const $leftContent = document.getElementById(id)
  350. // in any case create the vue
  351. _v_left_content = new Vue({
  352. store,
  353. i18n,
  354. render: h => h(VLeftContent, { props: { id: id } })
  355. }).$mount('#' + id)
  356. }
  357. function initCoolLightBox () {
  358. const id = 'glog-coollightbox'
  359. const $clb_elmt = document.createElement('div')
  360. $clb_elmt.setAttribute('id', id)
  361. const $body = document.querySelector('body')
  362. $body.appendChild($clb_elmt)
  363. _v_glob_coollightbox = new Vue({
  364. store,
  365. i18n,
  366. render: h => h(GlobCoolLightBox, { props: { } })
  367. }).$mount('#' + id)
  368. console.log('_v_glob_coollightbox', _v_glob_coollightbox)
  369. }
  370. init()
  371. } // end MaterioTheme()
  372. // const materiotheme = new MaterioTheme()
  373. MaterioTheme()
  374. })(Drupal, drupalSettings, drupalDecoupled)