home showrooms OK
This commit is contained in:
parent
9941eed64a
commit
b7f9d99790
|
@ -39,4 +39,7 @@ node_modules/
|
||||||
/index.php
|
/index.php
|
||||||
/robots.txt
|
/robots.txt
|
||||||
/update.php
|
/update.php
|
||||||
/web.config
|
/web.config
|
||||||
|
|
||||||
|
config/sync/flag.flag.*.yml
|
||||||
|
config/sync/system.action.flag_action.*.yml
|
||||||
|
|
|
@ -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: ''
|
|
@ -14,7 +14,7 @@ negotiation:
|
||||||
language-url-fallback: 1
|
language-url-fallback: 1
|
||||||
language_interface:
|
language_interface:
|
||||||
enabled:
|
enabled:
|
||||||
language-graphql: -999
|
language-graphql-operation: -999
|
||||||
language-url: 0
|
language-url: 0
|
||||||
_core:
|
_core:
|
||||||
default_config_hash: dqouFqVseNJNvEjsoYKxbinFOITuCxYhi4y2OTNQP_8
|
default_config_hash: dqouFqVseNJNvEjsoYKxbinFOITuCxYhi4y2OTNQP_8
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
uuid: 6c0bad4c-4cb1-4203-ab2f-f0e35207286f
|
uuid: 6c0bad4c-4cb1-4203-ab2f-f0e35207286f
|
||||||
langcode: en
|
langcode: en
|
||||||
status: false
|
status: true
|
||||||
dependencies:
|
dependencies:
|
||||||
module:
|
module:
|
||||||
- node
|
- node
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -644,6 +644,7 @@ article.node--type-frontpage{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.field--name-computed-showrooms-reference{
|
.field--name-computed-showrooms-reference{
|
||||||
|
overflow: hidden;
|
||||||
position:relative;
|
position:relative;
|
||||||
// height:550px;
|
// height:550px;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
@ -673,17 +674,23 @@ article.node--type-frontpage{
|
||||||
// top:0; left:0;
|
// top:0; left:0;
|
||||||
// width:100%; height:100%;
|
// width:100%; height:100%;
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease-in-out;
|
// transform: translateX(100%);
|
||||||
|
transition: all 0.7s ease-out;
|
||||||
|
|
||||||
&.active{
|
&.active{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
// transform: translateX(0);
|
||||||
|
// transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.taxonomy-term{
|
.taxonomy-term{
|
||||||
position: relative;
|
position: relative;
|
||||||
width:100%; height:100%;
|
width:100%; height:100%;
|
||||||
div.visuel{
|
div.visuel{
|
||||||
width:100%;
|
width:100%;
|
||||||
padding-bottom: 10em;
|
padding-bottom: 5em;
|
||||||
img{
|
img{
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -694,17 +701,42 @@ article.node--type-frontpage{
|
||||||
bottom:0; left:0;
|
bottom:0; left:0;
|
||||||
width:100%;
|
width:100%;
|
||||||
box-sizing:border-box;
|
box-sizing:border-box;
|
||||||
padding:1em 0;
|
padding:1em 0 0;
|
||||||
background-color:$color-showrooms;
|
background-color:$color-showrooms;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
>*{
|
// >*{
|
||||||
// display: inline-block;
|
// // display: inline-block;
|
||||||
font-size: 0.9em;
|
// font-size: 0.9em;
|
||||||
}
|
// }
|
||||||
h2,p{
|
h2,p{
|
||||||
margin:0;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,14 @@ export default {
|
||||||
props: ['html'], // get the html from parent with props
|
props: ['html'], // get the html from parent with props
|
||||||
data() {
|
data() {
|
||||||
return {
|
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() {
|
beforeMount() {
|
||||||
|
@ -33,43 +40,77 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
initShowroomCarroussel(){
|
initShowroomCarroussel(){
|
||||||
console.log("startShowroomCarroussel");
|
console.log("startShowroomCarroussel");
|
||||||
let $showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
|
this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item')
|
||||||
console.log('$showrooms', $showrooms);
|
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
|
// TODO: share media query and variables between scss and js
|
||||||
let column_width= 205
|
let column_width= 205
|
||||||
let column_goutiere= 13
|
let column_goutiere= 13
|
||||||
let bp = (column_width + column_goutiere )*7 +1
|
let bp = (column_width + column_goutiere )*7 +1
|
||||||
const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
|
const mediaQuery = window.matchMedia(`(min-width: ${bp}px)`)
|
||||||
if (mediaQuery.matches) {
|
// Register event listener
|
||||||
let $showroomsOdd = []
|
mediaQuery.addListener(this.checkShowroomMode)
|
||||||
let $showroomsEven = []
|
this.checkShowroomMode(mediaQuery)
|
||||||
for (var i = 0; i < $showrooms.length; i++) {
|
|
||||||
if (i%2 === 0) {
|
// this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);
|
||||||
$showroomsOdd.push($showrooms[i])
|
// console.log('this.showroomInterval', this.showroomInterval);
|
||||||
}else{
|
// this.switchShowroomCarroussel()
|
||||||
$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)
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
switchShowroomCarroussel($elmts, i){
|
checkShowroomMode(mq){
|
||||||
// console.log('switchShowroomCarroussel i', $elmts, i);
|
// default mode 1
|
||||||
|
let newmode = 1
|
||||||
$elmts[i].classList.add('active')
|
if (mq.matches) {
|
||||||
$elmts[i-1 < 0 ? $elmts.length -1 : i-1].classList.remove('active')
|
// if mediaquery match switch to mode 2
|
||||||
|
newmode = 2
|
||||||
i++
|
}
|
||||||
if(i >= $elmts.length){
|
if(newmode !== this.showroomMode) {
|
||||||
i = 0
|
// 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){
|
onClickLink(e){
|
||||||
console.log("onClickLink", e, this.$router, this.$route);
|
console.log("onClickLink", e, this.$router, this.$route);
|
||||||
|
|
Loading…
Reference in New Issue