main.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  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. import CoolLightBox from 'vue-cool-lightbox'
  19. Vue.use(CoolLightBox)
  20. import VModal from 'vue-js-modal'
  21. Vue.use(VModal)
  22. import store from 'vuejs/store'
  23. import router from 'vuejs/route'
  24. // import VueI18n from 'vue-i18n'
  25. // Vue.use(VueI18n)
  26. // import * as Locales from 'assets/i18n/locales.json'
  27. import { i18n, loadLanguageAsync } from 'vuejs/i18n'
  28. import VueMeta from 'vue-meta'
  29. Vue.use(VueMeta)
  30. import VUserBlock from 'vuejs/components/Block/UserBlock'
  31. import VMainContent from 'vuejs/components/Content/MainContent'
  32. import VSearchBlock from 'vuejs/components/Block/SearchBlock'
  33. import VLeftContent from 'vuejs/components/Content/LeftContent'
  34. import { mapState } from 'vuex'
  35. // require('theme/assets/styles/main.scss');
  36. import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
  37. import 'theme/assets/styles/main.scss'
  38. import 'theme/assets/styles/print.scss'
  39. import VueSimpleAccordion from 'vue-simple-accordion';
  40. import 'vue-simple-accordion/dist/vue-simple-accordion.css';
  41. Vue.use(VueSimpleAccordion, {
  42. // ... Options go here
  43. });
  44. (function (Drupal, drupalSettings, drupalDecoupled) {
  45. const MaterioTheme = function () {
  46. let _v_sitebranding_block, _v_user_block, _v_header_menu,
  47. _v_pagetitle_block, _v_search_block,
  48. _v_main_content, _v_left_content
  49. const _is_front = drupalSettings.path.isFront
  50. console.log('drupalSettings', drupalSettings)
  51. // let _I18n
  52. // ___ _ _
  53. // |_ _|_ _ (_) |_
  54. // | || ' \| | _|
  55. // |___|_||_|_|\__|
  56. function init () {
  57. console.log('MaterioTheme init()')
  58. initVues()
  59. }
  60. function checkNoVuePages () {
  61. // return drupalDecoupled.sys_path != '/cart'
  62. // && drupalDecoupled.sys_path.indexOf('checkout') != 1;
  63. if (drupalDecoupled.route_name.indexOf('commerce') == -1 &&
  64. drupalDecoupled.route_name.indexOf('flagging_collection') == -1 &&
  65. drupalDecoupled.route_name.indexOf('user') == -1) {
  66. return false
  67. } else {
  68. return true
  69. }
  70. }
  71. function initVues () {
  72. // only launch views if we are not in commerce pages
  73. if (!checkNoVuePages()) {
  74. initVi18n()
  75. initVStore()
  76. initVRouter()
  77. initVSiteBrandingBlock()
  78. initVPagetitleBlock()
  79. initVHeaderMenu()
  80. initVMainContent()
  81. initVSearchBlock()
  82. initVLeftContent()
  83. }
  84. initVUserBlock()
  85. }
  86. function initVi18n () {
  87. // i18n.locale = drupalDecoupled.lang_code
  88. // console.log('i18n.messages', i18n.messages)
  89. loadLanguageAsync(drupalDecoupled.lang_code)
  90. .then(() => {
  91. console.log('main.js language loaded')
  92. })
  93. }
  94. function initVStore () {
  95. store.dispatch('Showrooms/getItems')
  96. }
  97. function initVRouter () {
  98. // we need this to update the title and body classes while using history nav
  99. router.beforeEach((to, from, next) => {
  100. // console.log('router beforeEach to ', to);
  101. // commit new title to store
  102. let title = null
  103. switch (to.name) {
  104. case 'home':
  105. title = null
  106. break
  107. case 'article':
  108. title = false
  109. break
  110. default:
  111. title = to.name
  112. }
  113. if (title !== false) {
  114. store.commit('Common/setPagetitle', title)
  115. }
  116. // remove all path related body classes
  117. const body_classes = document.querySelector('body').classList
  118. const classes_to_rm = []
  119. for (var i = 0; i < body_classes.length; i++) {
  120. if (body_classes[i].startsWith('path-')) {
  121. classes_to_rm.push(body_classes[i])
  122. }
  123. }
  124. document.querySelector('body').classList.remove(...classes_to_rm)
  125. // add new path classes to body
  126. const classes = []
  127. if (to.path == '/') {
  128. classes.push('path-home')
  129. } else {
  130. const path_parts = to.path
  131. .replace(/^\//, '')
  132. // remove language relative prefix from path classes (fr, en, etc)
  133. .replace(/^\D{2,3}\//, '')
  134. .split('/')
  135. for (var i = 0; i < path_parts.length; i++) {
  136. if (i == 0) {
  137. var c = 'path-' + path_parts[i]
  138. } else if (path_parts[i] !== '') {
  139. var c = classes[i - 1] + '-' + path_parts[i]
  140. }
  141. classes.push(c)
  142. }
  143. }
  144. document.querySelector('body').classList.add(...classes)
  145. // update block language selection
  146. let links = document.querySelectorAll('#block-languageswitcher a.language-link')
  147. let path = to.path.replace(/^\/\D{2,3}\//, '')
  148. // remove language relative prefix from path classes (fr, en, etc)
  149. .replace(/^\/\D{2,3}$/, '')
  150. if(path !== ''){
  151. path = '/'+path
  152. }
  153. links.forEach((link, i) => {
  154. console.log("language link",path , link)
  155. link.setAttribute('href', `/${link.getAttribute('hreflang')}${path}`)
  156. });
  157. // trigger router
  158. next()
  159. })
  160. }
  161. function initVSiteBrandingBlock () {
  162. _v_sitebranding_block = new Vue({
  163. store,
  164. i18n,
  165. router,
  166. el: '#block-sitebranding',
  167. methods: {
  168. onclick (event) {
  169. // console.log("Clicked on logo event", event);
  170. const href = event.target.getAttribute('href')
  171. // console.log("Clicked on logo href", href);
  172. this.$router.push(href)
  173. // replaced by router.beforeEach
  174. // this.$store.commit('Common/setPagetitle', null)
  175. }
  176. }
  177. })
  178. }
  179. function initVPagetitleBlock () {
  180. const $blk = document.querySelector('#block-pagetitle')
  181. const $h2 = $blk.querySelector('h2')
  182. // get the loaded pagetitle
  183. const title = $h2.innerText
  184. // if not front recorde the loaded pagetitle in store
  185. if (!_is_front) {
  186. store.commit('Common/setPagetitle', title)
  187. }
  188. // replace in template the pagetitle by vue binding
  189. $h2.innerText = '{{ pagetitle }}'
  190. // create the vue
  191. _v_pagetitle_block = new Vue({
  192. store,
  193. i18n,
  194. router,
  195. el: $blk,
  196. computed: {
  197. ...mapState({
  198. pagetitle: state => state.Common.pagetitle
  199. })
  200. }
  201. })
  202. }
  203. function initVUserBlock () {
  204. const mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin'
  205. const props = {
  206. title: '',
  207. loginblock: ''
  208. }
  209. let $block
  210. switch (mount_point) {
  211. case 'block-userlogin':
  212. $block = document.getElementById(mount_point)
  213. console.log('initVUserBlock login form html', $block)
  214. props.loginblock = $block.outerHTML.trim()
  215. break
  216. case 'block-userblock':
  217. default:
  218. break
  219. }
  220. _v_user_block = new Vue({
  221. store,
  222. i18n,
  223. // computed: {
  224. // ...mapState({
  225. // isloggedin: state => state.User.isloggedin
  226. // })
  227. // },
  228. created () {
  229. // if already loggedin, call store.user to get the user infos
  230. if (drupalSettings.user.uid !== 0) {
  231. this.$store.commit('User/setUid', drupalSettings.user.uid)
  232. this.$store.dispatch('User/getUser')
  233. }
  234. },
  235. render: h => h(VUserBlock, { props: props })
  236. }).$mount('#' + mount_point)
  237. // console.log('initVUserBlock', _v_user_block);
  238. }
  239. function initVHeaderMenu () {
  240. // console.log('initVHeaderMenu');
  241. // adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)
  242. // not working : String contains an invalid character
  243. // document.querySelectorAll(`#block-header a`).forEach(link => {
  244. // console.log(link);
  245. // link.setAttribute('@click.prevent', 'onclick')
  246. // });
  247. _v_header_menu = new Vue({
  248. store,
  249. i18n,
  250. router,
  251. el: '#block-header',
  252. methods: {
  253. onclick (event) {
  254. // console.log("Clicked on header menu link", event);
  255. const href = event.target.getAttribute('href')
  256. // let title = event.target.innerText;
  257. // console.log("Clicked on header menu link : href", href);
  258. this.$router.push(href)
  259. // replaced by router.beforeEach
  260. // this.$store.commit('Common/setPagetitle', title)
  261. }
  262. }
  263. })
  264. }
  265. function initVMainContent () {
  266. const id = 'main-content'
  267. const $main_content = document.querySelector('#' + id)
  268. // console.log('main-content', $main_content);
  269. const main_html = $main_content.innerHTML
  270. _v_main_content = new Vue({
  271. store,
  272. i18n,
  273. metaInfo: {
  274. // if no subcomponents specify a metaInfo.title, this title will be used
  275. title: "materiO'",
  276. // all titles will be injected into this template
  277. titleTemplate: "%s | materiO'"
  278. },
  279. render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
  280. }).$mount('#' + id)
  281. }
  282. function initVSearchBlock () {
  283. // console.log('initVSearchBlock');
  284. const id = 'block-materiosapisearchblock'
  285. let $search_block = document.getElementById(id)
  286. let formhtml = null
  287. if ($search_block) {
  288. // get the search form html to pass it as template to the vue
  289. // we gain display speed vs async downloaded data
  290. formhtml = $search_block.innerHTML
  291. } else {
  292. // else create the empty block to fill it later with async data
  293. $search_block = document.createElement('div')
  294. $search_block.setAttribute('id', id)
  295. // TODO: get region by REST
  296. const $region = document.getElementById('header-bottom')
  297. $region.appendChild($search_block)
  298. }
  299. // in any case create the vue
  300. _v_search_block = new Vue({
  301. store,
  302. i18n,
  303. render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
  304. }).$mount('#' + id)
  305. }
  306. function initVLeftContent () {
  307. const id = 'content-left'
  308. const $leftContent = document.getElementById(id)
  309. // in any case create the vue
  310. _v_left_content = new Vue({
  311. store,
  312. i18n,
  313. render: h => h(VLeftContent, { props: { id: id } })
  314. }).$mount('#' + id)
  315. }
  316. init()
  317. } // end MaterioTheme()
  318. const materiotheme = new MaterioTheme()
  319. })(Drupal, drupalSettings, drupalDecoupled)