home showrooms OK

.gitignore

@@ -39,4 +39,7 @@ node_modules/
 /index.php
 /robots.txt
 /update.php
-/web.config
+/web.config
+
+config/sync/flag.flag.*.yml
+config/sync/system.action.flag_action.*.yml

config/sync/jsonapi_extras.jsonapi_resource_config.field_config--field_config.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: ''

config/sync/language.types.yml

@@ -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

config/sync/rest.resource.entity.node_type.yml

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

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -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;
+                }
               }
             }
           }

web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

@@ -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);