bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added fix option to eslint

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-11-25 22:49:17 +01:00
parent 1c1fb294c5
commit ed9e62718c
14 changed files with 384 additions and 4076 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@ -1,16 +1,17 @@
/* eslint-disable import/first */
import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading';
import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
props: {
spinner: 'spiral',
spinner: 'spiral'
// slots.noMore: ''
},
}
// system: {
// throttleLimit: 50,
// /* other settings need to configure */
// }
});
})
// import vueVimeoPlayer from 'vue-vimeo-player'
// Vue.use(vueVimeoPlayer)
@ -31,43 +32,40 @@ import { mapState } from 'vuex'
// require('theme/assets/styles/main.scss');
import 'theme/assets/styles/main.scss'
(function(Drupal, drupalSettings, drupalDecoupled) {
(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
const _is_front = drupalSettings.path.isFront
var MaterioTheme = function(){
var _v_sitebranding_block, _v_user_block, _v_header_menu
, _v_pagetitle_block, _v_search_block
, _v_main_content;
var _is_front = drupalSettings.path.isFront;
console.log('drupalSettings', drupalSettings);
console.log('drupalSettings', drupalSettings)
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){
console.log("MaterioTheme init()")
function init () {
console.log('MaterioTheme init()')
initVues()
}
function checkNoVuePages(){
function checkNoVuePages () {
// return drupalDecoupled.sys_path != '/cart'
// && drupalDecoupled.sys_path.indexOf('checkout') != 1;
if( drupalDecoupled.route_name.indexOf('commerce') == -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;
drupalDecoupled.route_name.indexOf('user') == -1) {
return false
} else {
return true
}
}
function initVues(){
function initVues () {
// only launch views if we are not in commerce pages
if(!checkNoVuePages()){
initVRouter();
if (!checkNoVuePages()) {
initVRouter()
initVSiteBrandingBlock()
initVPagetitleBlock()
initVHeaderMenu()
@ -77,19 +75,19 @@ import 'theme/assets/styles/main.scss'
initVUserBlock()
}
function initVRouter(){
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;
let title = null
switch (to.name) {
case 'home':
title = null
break;
break
case 'article':
title = false
break;
break
default:
title = to.name
}
@ -98,47 +96,46 @@ import 'theme/assets/styles/main.scss'
}
// remove all path related body classes
let body_classes = document.querySelector('body').classList;
let classes_to_rm = [];
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]);
if (body_classes[i].startsWith('path-')) {
classes_to_rm.push(body_classes[i])
}
}
document.querySelector('body').classList.remove(...classes_to_rm);
document.querySelector('body').classList.remove(...classes_to_rm)
// add new path classes to body
let classes = [];
if(to.path == '/'){
classes.push('path-home');
}else{
let path_parts = to.path.replace(/^\//, '').split('/');
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];
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);
document.querySelector('body').classList.add(...classes)
// trigger router
next();
next()
})
}
function initVSiteBrandingBlock(){
function initVSiteBrandingBlock () {
_v_sitebranding_block = new Vue({
store,
router,
el: '#block-sitebranding',
methods: {
onclick(event){
onclick (event) {
// console.log("Clicked on logo event", event);
let href = event.target.getAttribute('href');
const href = event.target.getAttribute('href')
// console.log("Clicked on logo href", href);
this.$router.push(href)
// replaced by router.beforeEach
@ -148,11 +145,11 @@ import 'theme/assets/styles/main.scss'
})
}
function initVPagetitleBlock(){
let $blk = document.querySelector('#block-pagetitle')
let $h2 = $blk.querySelector('h2')
function initVPagetitleBlock () {
const $blk = document.querySelector('#block-pagetitle')
const $h2 = $blk.querySelector('h2')
// get the loaded pagetitle
let title = $h2.innerText
const title = $h2.innerText
// if not front recorde the loaded pagetitle in store
if (!_is_front) {
store.commit('Common/setPagetitle', title)
@ -168,25 +165,26 @@ import 'theme/assets/styles/main.scss'
...mapState({
pagetitle: state => state.Common.pagetitle
})
},
}
})
}
function initVUserBlock(){
let mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';
let props = {
title: "",
loginblock:""
};
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':
let $block = document.getElementById(mount_point);
console.log('initVUserBlock login form html', $block);
$block = document.getElementById(mount_point)
console.log('initVUserBlock login form html', $block)
props.loginblock = $block.outerHTML.trim()
break;
break
case 'block-userblock':
default:
break;
break
}
_v_user_block = new Vue({
@ -198,17 +196,17 @@ import 'theme/assets/styles/main.scss'
// },
created () {
// if already loggedin, call store.user to get the user infos
if(drupalSettings.user.uid !== 0){
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)
render: h => h(VUserBlock, { props: props })
}).$mount('#' + mount_point)
// console.log('initVUserBlock', _v_user_block);
}
function initVHeaderMenu(){
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
@ -220,11 +218,11 @@ import 'theme/assets/styles/main.scss'
_v_header_menu = new Vue({
store,
router,
el: `#block-header`,
el: '#block-header',
methods: {
onclick(event){
onclick (event) {
// console.log("Clicked on header menu link", event);
let href = event.target.getAttribute('href');
const href = event.target.getAttribute('href')
// let title = event.target.innerText;
// console.log("Clicked on header menu link : href", href);
this.$router.push(href)
@ -235,45 +233,44 @@ import 'theme/assets/styles/main.scss'
})
}
function initVMainContent(){
let id = "main-content"
let $main_content = document.querySelector('#'+id)
function initVMainContent () {
const id = 'main-content'
const $main_content = document.querySelector('#' + id)
// console.log('main-content', $main_content);
let main_html = $main_content.innerHTML
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)
render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
}).$mount('#' + id)
}
function initVSearchBlock(){
function initVSearchBlock () {
// console.log('initVSearchBlock');
let id = "block-materiosapisearchblock"
const id = 'block-materiosapisearchblock'
let $search_block = document.getElementById(id)
var formhtml = null
if($search_block){
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 {
// 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
let $region = document.getElementById('header-bottom');
$region.appendChild($search_block);
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)
render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
}).$mount('#' + id)
}
init()
} // end MaterioTheme()
var materiotheme = new MaterioTheme();
})(Drupal, drupalSettings, drupalDecoupled);
const materiotheme = new MaterioTheme()
})(Drupal, drupalSettings, drupalDecoupled)