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

/* 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)

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 VLeftContent from 'vuejs/components/Content/LeftContent'

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'

(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
    const _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()
        initVLeftContent()
      }
      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
        const body_classes = document.querySelector('body').classList
        const 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
        const classes = []
        if (to.path == '/') {
          classes.push('path-home')
        } else {
          const 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);
            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)
          }
        }
      })
    }

    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,
        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,
        // 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);
            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)
          }
        }
      })
    }

    function initVMainContent () {
      const id = 'main-content'
      const $main_content = document.querySelector('#' + id)
      // console.log('main-content', $main_content);
      const 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');
      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,
        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,
        render: h => h(VLeftContent, { props: { id: id } })
      }).$mount('#' + id)
    }
    init()
  } // end MaterioTheme()

  const materiotheme = new MaterioTheme()
})(Drupal, drupalSettings, drupalDecoupled)