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

fixed webpack prod, fixed language prefix negociation in vue-router

This commit is contained in:
Bachir Soussi Chiadmi 2019-06-06 17:37:43 +02:00
parent 082e011fbb
commit f0120ba10b
10 changed files with 1141 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
build/webpack.config.prod.js
View File

@ -1,21 +1,37 @@
'use strict'
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(baseConfig, {
mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all",
},
},
},
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
// Eliminate comments
comments: false,
compress: {
// remove warnings
warnings: false,
// Drop console statements
drop_console: true,
}
}
})
]
// splitChunks: {
// cacheGroups: {
// commons: {
// test: /[\\/]node_modules[\\/]/,
// name: "vendor",
// chunks: "all",
// },
// },
// },
},
module: {
rules: [
@ -26,7 +42,7 @@ module.exports = merge(baseConfig, {
'css-loader'
]
}, {
test: /\.styl(us)?$/,
test: /\.scss?$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',

1247
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
package.json
View File

@ -18,26 +18,26 @@
"author": "Bachir Soussi Chiadmi",
"license": "MIT",
"dependencies": {
"axios": "^0.18.0",
"axios": "^0.18.1",
"vue": "^2.6.10",
"vue-meta": "^1.6.0",
"vue-router": "^3.0.2",
"vuex": "^3.1.0"
"vue-router": "^3.0.6",
"vuex": "^3.1.1"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"copy-webpack-plugin": "^5.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "^5.0.3",
"css-loader": "^2.1.1",
"eslint": "^5.15.3",
"eslint-config-standard": "^12.0.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
@ -48,14 +48,15 @@
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglify-es": "^3.3.9",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^1.1.2",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.0",
"vue-server-renderer": "^2.6.10",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.2",
"webpack-merge": "^4.2.1"
}
}

155
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -1,3 +1,16 @@
#user-tools[data-v-4e9a834e]{
margin-right:0.5em;
padding-right:0.5em;
border-right:1px solid #222;
}
h4[data-v-4e9a834e]{
margin:0;
display:inline-block;
font-size:inherited;
}
body {
background: white; }
@ -996,10 +1009,13 @@ header[role="banner"] {
header[role="banner"] .wrapper .header-block {
min-height: 15px;
font-size: 0; }
header[role="banner"] .wrapper .header-block.header-right {
text-align: right; }
header[role="banner"] .wrapper .header-block > * {
display: inline-block;
vertical-align: top;
font-size: 16px; }
font-size: 16px;
text-align: left; }
main[role="main"] {
padding-top: 80px; }
@ -1014,24 +1030,127 @@ body {
aside.messages {
border: none; }
header[role="banner"] #block-sitebranding h1 {
margin: 0; }
header[role="banner"] {
padding: 0.2em 0 0 0; }
header[role="banner"] #block-sitebranding h1 {
margin: 0;
line-height: 1; }
header[role="banner"] #block-userlogin {
position: relative;
width: 8em;
overflow: visible; }
header[role="banner"] #block-userlogin h2 {
margin: 0;
font-size: 1em;
font-weight: 400; }
header[role="banner"] #block-userlogin > section {
background-color: #fff;
overflow: hidden;
width: 11em;
height: 1px;
padding: 0.01em 1em;
box-sizing: content-box;
transition: all 0.4s ease-in-out;
transition-delay: 2s;
position: absolute;
right: 0;
top: 1.7em;
box-sizing: content-box; }
header[role="banner"] #block-userlogin:hover > section {
transition-delay: 0s;
height: 12em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; }
header[role="banner"] #block-userlogin .form-item {
margin: 0;
position: relative;
width: 100%; }
header[role="banner"] #block-userlogin .form-item.form-item-name {
margin: 2px 0 0.5em 0; }
header[role="banner"] #block-userlogin .form-item.form-item-name input {
width: 90%;
padding: 0;
box-sizing: content-box; }
header[role="banner"] #block-userlogin .form-item.form-item-pass {
margin: 0 0 0.5em 0; }
header[role="banner"] #block-userlogin .form-item.form-item-pass input {
width: 90%;
padding: 0;
box-sizing: content-box; }
header[role="banner"] #block-userlogin .form-item.form-item-persistent-login {
font-size: 0.756em; }
header[role="banner"] #block-userlogin .form-item.form-item-persistent-login label {
vertical-align: top; }
header[role="banner"] #block-userlogin #edit-actions {
margin: 0; }
header[role="banner"] #block-userlogin .item-list ul {
margin: 0; }
header[role="banner"] #block-userlogin .item-list ul li {
list-style: none;
margin: 0; }
header[role="banner"] #block-userlogin .item-list ul li a {
font-size: 0.756em; }
header[role="banner"] #block-languageswitcher h2 {
margin: 0.1em 0 0 0;
font-size: 0.756em;
font-weight: 400;
padding: 0.1em 0.4em 0.2em;
border-radius: 3px;
background-color: #444;
color: #fff;
display: inline-block;
vertical-align: top; }
header[role="banner"] #block-languageswitcher > ul.links {
overflow: hidden;
width: 5em;
height: 1px;
padding: 0.01em 0;
margin: 0;
box-sizing: content-box;
transition: all 0.4s ease-in-out; }
header[role="banner"] #block-languageswitcher:hover > ul.links {
transition-delay: 0s;
height: 2em;
padding: 0.3em 0; }
header[role="banner"] #block-languageswitcher li {
list-style: none;
padding: 0; }
header[role="banner"] #block-languageswitcher li.is-active {
display: none; }
header[role="banner"] #block-languageswitcher li a {
margin: 0;
font-size: 0.756em;
font-weight: 400;
padding: 0.2em 0.4em;
border-radius: 3px;
background-color: #444;
color: #fff; }
header[role="banner"] #block-userlogin h2 {
margin: 0; }
aside.messages {
padding: 0; }
header[role="banner"] #block-userlogin > section {
background-color: #fff;
overflow: hidden;
height: 1px;
padding: 0.01em 1em;
box-sizing: content-box;
transition: all 0.4s ease-in-out;
transition-delay: 2s; }
#materio-sapi-search-form .form-item, #materio-sapi-search-form input.button {
display: inline-block; }
header[role="banner"] #block-userlogin:hover > section {
transition-delay: 0s;
height: 16em;
padding: 1em 1em;
box-shadow: 0 0 10px #ccc; }
article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),
article.node--type-frontpage .node__content .field--name-field-blabla:not(:nth-child(1)),
article.node--type-frontpage .node__content .field--name-field-pricing:not(:nth-child(1)) {
margin-top: 1em; }
article.node--type-frontpage .node__content .field--name-field-what-is-materio .field__label,
article.node--type-frontpage .node__content .field--name-field-a-database .field__label,
article.node--type-frontpage .node__content .field--name-field-showrooms .field__label,
article.node--type-frontpage .node__content .field--name-field-blabla .field__label,
article.node--type-frontpage .node__content .field--name-field-pricing .field__label {
font-size: 2.2em;
font-weight: bold; }
article.node--type-frontpage .node__content .field--name-computed-materials-reference .field__item,
article.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item,
article.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item {
display: inline-block;
vertical-align: top;
max-width: 250px; }

32
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -43,9 +43,11 @@ import 'theme/assets/styles/main.scss'
router,
el: '#block-sitebranding',
methods: {
onclick(){
console.log("Clicked on logo");
this.$router.push({name:'home'})
onclick(event){
// console.log("Clicked on logo event", event);
let href = event.target.getAttribute('href');
// console.log("Clicked on logo href", href);
this.$router.push(href)
}
}
})

13
web/themes/custom/materiotheme/vuejs/components/Content/Base.vue
View File

@ -20,9 +20,6 @@ import { mapState, mapActions } from 'vuex'
export default {
name: "Base",
data: () => ({
}),
computed: {
...mapState({
items: state => state.Search.items
@ -34,19 +31,17 @@ export default {
})
},
created() {
// laucnh a search if params exists in url query
// at first page load or first route entering launch a search if params exists in url query
console.log('Base created() location',window.location);
let params = new URLSearchParams(window.location.search)
if(params.has('keys')){
if(params.has('keys') || params.has('term')){
this.$store.commit('Search/setKeys', params.get('keys'))
this.$store.commit('Search/setTerm', params.get('term'))
this.newSearch()
}
},
// beforeRouteEnter (to, from, next) {
// console.log('Base beforeRouteEnter');//, to, from, next);
// next()
// },
beforeRouteUpdate (to, from, next) {
// when query change launch a new search
console.log('Base beforeRouteUpdate', to, from, next);
this.$store.commit('Search/setKeys', to.query.keys)
this.$store.commit('Search/setTerm', to.query.term)

5
web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue
View File

@ -1,7 +1,8 @@
<template lang="html">
<div :id="id">
<router-view name="home" :html="home_template_src"></router-view>
<router-view name="base"></router-view>
<!-- <router-view name="home" :html="home_template_src"></router-view> -->
<!-- <router-view name="base"></router-view> -->
<router-view :html="home_template_src"/>
</div>
</template>

9
web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
View File

@ -13,7 +13,8 @@ export default {
return {
template: null,
typed: null,
autocomplete: null
autocomplete: null,
// basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
}
},
computed: {
@ -24,9 +25,13 @@ export default {
},
methods: {
submit() {
console.log("search clicked", this.keys, this.autocomplete);
console.log("search clicked", this.typed, this.autocomplete);
// New search is triggered by Base.vue with router (which will also fill the store)
this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
// this.$router.push({
// path:`${this.basePath}/base`,
// query:{keys:this.typed,term:this.autocomplete}
// })
},
onAutoCompleteSelect(event, ui){
event.preventDefault();

61
web/themes/custom/materiotheme/vuejs/route/index.js
View File

@ -8,29 +8,44 @@ Vue.use(VueRouter)
// https://www.lullabot.com/articles/decoupled-hard-problems-routing
// We could use aliases to never reload the page on language changement
// BUT beforeupdate is not triggered when push alias instead of path or name
const languages = ['en', 'fr'];
console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
const routes = [
{
name: 'home',
path: basePath,
// path: '/',
// alias: (() => languages.map(l => `/${l}`))(),
component: Home
// components: {
// 'home': Home
// }
},
{
name:'base',
path: `${basePath}base`,
// path: `/base`,
// alias: (() => languages.map(l => `/${l}/base`))(),
component: Base,
// components: {
// 'base': Base
// }
},
// {
// path: '*',
// name: 'notfound',
// components: {
// 'notfound': NotFound
// }
// }
]
export default new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
components: {
'home': Home
}
},
{
path: '/base',
name:'base',
components: {
'base': Base
}
},
// {
// path: '*',
// name: 'notfound',
// components: {
// 'notfound': NotFound
// }
// }
]
routes: routes
})