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

home showrooms OK

This commit is contained in:
Bachir Soussi Chiadmi 2020-12-27 17:46:04 +01:00
parent 9941eed64a
commit b7f9d99790
8 changed files with 259 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -40,3 +40,6 @@ node_modules/
/robots.txt
/update.php
/web.config
config/sync/flag.flag.*.yml
config/sync/system.action.flag_action.*.yml

119
config/sync/jsonapi_extras.jsonapi_resource_config.field_config--field_config.yml Normal file
View File

@ -0,0 +1,119 @@
uuid: ec97d652-086c-4b4e-91f0-e1d30d97cb1a
langcode: fr
status: true
dependencies:
module:
- field
id: field_config--field_config
disabled: false
path: field_config/field_config
resourceType: field_config--field_config
resourceFields:
uuid:
fieldName: uuid
publicName: uuid
enhancer:
id: ''
disabled: false
langcode:
fieldName: langcode
publicName: langcode
enhancer:
id: ''
disabled: false
status:
disabled: true
fieldName: status
publicName: status
enhancer:
id: ''
dependencies:
disabled: true
fieldName: dependencies
publicName: dependencies
enhancer:
id: ''
third_party_settings:
disabled: true
fieldName: third_party_settings
publicName: third_party_settings
enhancer:
id: ''
_core:
disabled: true
fieldName: _core
publicName: _core
enhancer:
id: ''
id:
fieldName: id
publicName: id
enhancer:
id: ''
disabled: false
field_name:
fieldName: field_name
publicName: field_name
enhancer:
id: ''
disabled: false
entity_type:
disabled: true
fieldName: entity_type
publicName: entity_type
enhancer:
id: ''
bundle:
disabled: true
fieldName: bundle
publicName: bundle
enhancer:
id: ''
label:
fieldName: label
publicName: label
enhancer:
id: ''
disabled: false
description:
disabled: true
fieldName: description
publicName: description
enhancer:
id: ''
required:
disabled: true
fieldName: required
publicName: required
enhancer:
id: ''
translatable:
disabled: true
fieldName: translatable
publicName: translatable
enhancer:
id: ''
default_value:
disabled: true
fieldName: default_value
publicName: default_value
enhancer:
id: ''
default_value_callback:
disabled: true
fieldName: default_value_callback
publicName: default_value_callback
enhancer:
id: ''
settings:
disabled: true
fieldName: settings
publicName: settings
enhancer:
id: ''
field_type:
disabled: true
fieldName: field_type
publicName: field_type
enhancer:
id: ''

2
config/sync/language.types.yml
View File

@ -14,7 +14,7 @@ negotiation:
language-url-fallback: 1
language_interface:
enabled:
language-graphql: -999
language-graphql-operation: -999
language-url: 0
_core:
default_config_hash: dqouFqVseNJNvEjsoYKxbinFOITuCxYhi4y2OTNQP_8

2
config/sync/rest.resource.entity.node_type.yml
View File

@ -1,6 +1,6 @@
uuid: 6c0bad4c-4cb1-4203-ab2f-f0e35207286f
langcode: en
status: false
status: true
dependencies:
module:
- node

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

48
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -644,6 +644,7 @@ article.node--type-frontpage{
}
}
.field--name-computed-showrooms-reference{
overflow: hidden;
position:relative;
// height:550px;
display: grid;
@ -673,17 +674,23 @@ article.node--type-frontpage{
// top:0; left:0;
// width:100%; height:100%;
// overflow: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
// transform: translateX(100%);
transition: all 0.7s ease-out;
&.active{
opacity: 1;
// transform: translateX(0);
// transition: all 0.3s ease-in-out;
}
.taxonomy-term{
position: relative;
width:100%; height:100%;
div.visuel{
width:100%;
padding-bottom: 10em;
padding-bottom: 5em;
img{
max-width: 100%;
height: auto;
@ -694,17 +701,42 @@ article.node--type-frontpage{
bottom:0; left:0;
width:100%;
box-sizing:border-box;
padding:1em 0;
padding:1em 0 0;
background-color:$color-showrooms;
color: #fff;
>*{
// display: inline-block;
font-size: 0.9em;
}
// >*{
// // display: inline-block;
// font-size: 0.9em;
// }
h2,p{
margin:0;
}
h2{
font-size: 2em;
}
.field--name-field-public-address{
br{
display:none;
}
span:not(:nth-last-of-type(1)) {
margin-right: 0.4em;
&:after{
padding-left: 0.5em;
content:"⋅"
}
}
}
.field--name-field-public-phone {
display: inline-block;
margin-right: 0.4em;
&:after{
padding-left: 0.5em;
content:"⋅"
}
}
.field--name-field-public-email {
display: inline-block;
}
}
}
}

101
web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue
View File

@ -6,7 +6,14 @@ export default {
props: ['html'], // get the html from parent with props
data() {
return {
template: null // compiled template from html used in render
template: null, // compiled template from html used in render
showrooms: [],
showroomsOdd: [],
showroomsEven: [],
showroomMode: 1,
showroomInterval: 0,
showroomI:0,
showroomJ:0
}
},
beforeMount() {
@ -33,43 +40,77 @@ export default {
methods: {
initShowroomCarroussel(){
console.log("startShowroomCarroussel");
let $showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
console.log('$showrooms', $showrooms);
this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
console.log('showrooms', this.showrooms);
for (var i = 0; i < this.showrooms.length; i++) {
if (i%2 === 0) {
this.showroomsOdd.push(this.showrooms[i])
}else{
this.showroomsEven.push(this.showrooms[i])
}
}
console.log('Odd', this.showroomsOdd);
console.log('Even', this.showroomsEven);
// TODO: share media query and variables between scss and js
let column_width= 205
let column_goutiere= 13
let bp = (column_width + column_goutiere )*7 +1
const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
if (mediaQuery.matches) {
let $showroomsOdd = []
let $showroomsEven = []
for (var i = 0; i < $showrooms.length; i++) {
if (i%2 === 0) {
$showroomsOdd.push($showrooms[i])
}else{
$showroomsEven.push($showrooms[i])
}
}
console.log('Odd', $showroomsOdd);
console.log('Even', $showroomsEven);
this.switchShowroomCarroussel($showroomsEven, 0)
this.switchShowroomCarroussel($showroomsOdd, 0)
}else{
this.switchShowroomCarroussel($showrooms, 0)
}
// Register event listener
mediaQuery.addListener(this.checkShowroomMode)
this.checkShowroomMode(mediaQuery)
// this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
// console.log('this.showroomInterval', this.showroomInterval);
// this.switchShowroomCarroussel()
},
switchShowroomCarroussel($elmts, i){
// console.log('switchShowroomCarroussel i', $elmts, i);
$elmts[i].classList.add('active')
$elmts[i-1 < 0 ? $elmts.length -1 : i-1].classList.remove('active')
i++
if(i >= $elmts.length){
i = 0
checkShowroomMode(mq){
// default mode 1
let newmode = 1
if (mq.matches) {
// if mediaquery match switch to mode 2
newmode = 2
}
if(newmode !== this.showroomMode) {
// if new mode different from old mode
// reset sowrooms classes
for (var i = 0; i < this.showrooms.length; i++) {
this.showrooms[i].classList.remove('active')
}
// record new mode
this.showroomMode = newmode
// clear interval
// if (this.showroomInterval) {
clearInterval(this.showroomInterval)
this.showroomInterval = 0
// }
// reset indexes
this.showroomI = 0
this.showroomJ = 0
}
// in any case (re)launch the animation
this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
console.log('this.showroomInterval', this.showroomInterval);
this.switchShowroomCarroussel()
},
switchShowroomCarroussel(){
// console.log('switchShowroomCarroussel i', $elmts, i);
if (this.showroomMode === 1) {
this.showrooms[this.showroomI].classList.add('active')
this.showrooms[this.showroomI-1 < 0 ? this.showrooms.length -1 : this.showroomI-1].classList.remove('active')
this.showroomI = this.showroomI+1 >= this.showrooms.length ? 0 : this.showroomI+1
}else{
this.showroomsOdd[this.showroomI].classList.add('active')
this.showroomsOdd[this.showroomI-1 < 0 ? this.showroomsOdd.length -1 : this.showroomI-1].classList.remove('active')
this.showroomI = this.showroomI+1 >= this.showroomsOdd.length ? 0 : this.showroomI+1
this.showroomsEven[this.showroomJ].classList.add('active')
this.showroomsEven[this.showroomJ-1 < 0 ? this.showroomsEven.length -1 : this.showroomJ-1].classList.remove('active')
this.showroomJ = this.showroomJ+1 >= this.showroomsEven.length ? 0 : this.showroomJ+1
}
setTimeout(this.switchShowroomCarroussel.bind(this,$elmts,i), 5000);
},
onClickLink(e){
console.log("onClickLink", e, this.$router, this.$route);