made card image switcher

web/modules/custom/materio_sapi/src/Form/MaterioSapiSearchForm.php

@@ -33,6 +33,7 @@ class MaterioSapiSearchForm extends FormBase {
         // "@keyup" => "keyup",
         "@keyup.enter" => "submit",
         "v-model" => "typed",
+        "v-focus" => "",
         // "v-on:select" => "typed",
       ],
       '#autocomplete_route_name' => 'materio_sapi.search_autocomplete',

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -3,9 +3,6 @@ import Vue from 'vue'
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 
-// import autofocus from 'vue-autofocus-directive';
-// Vue.directive('autofocus', autofocus);
-
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'

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

@@ -251,13 +251,23 @@ article.node--type-frontpage{
   }
   section.images{
     position: relative;
-    img:first-of-type{
+    &, *{width: 100%; height:100%;}
-      z-index:5
+    figure{
-    }
+      margin:0;
-    img:not(:first-of-type){
       position: absolute;
       top:0; left:0;
-      z-index:1;
+      // width: 100%; height:100%;
+      &:first-of-type{
+        z-index:5
+      }
+      img{
+        // width: 100%; height:100%;
+        &.blank{
+          position: absolute;
+          top:0; left:0;
+          z-index: 20;
+        }
+      }
     }
   }
 }

web/themes/custom/materiotheme/materiotheme.theme

@@ -2,7 +2,7 @@
 
 /**
  * @file
- * Functions to support theming in the edlp theme.
+ * Functions to support theming in the materio theme.
  */
 
 use Drupal\Core\Url;
@@ -41,6 +41,10 @@ function materiotheme_preprocess_html(&$vars) {
   // ]);
   // $vars['head_title'] = $head_title;
 
+  global $base_url;
+  $theme = \Drupal::theme()->getActiveTheme();
+  $vars['#attached']['drupalSettings']['path']['themePath'] = $base_url .'/'. $theme->getPath();
+
   $description = [
     '#tag' => 'meta',
     '#attributes' => [
@@ -65,15 +69,15 @@ function materiotheme_preprocess_page(&$vars){
   // dsm($vars, 'vars');
 }
 
-function materiotheme_preprocess_node(&$vars){
+// function materiotheme_preprocess_node(&$vars){
-  $node = $vars['elements']['#node'];
+//   $node = $vars['elements']['#node'];
-  $options = ['absolute' => TRUE];
+//   $options = ['absolute' => TRUE];
-  $url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
+//   $url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
-  $system_path = $url->getInternalPath();
+//   $system_path = $url->getInternalPath();
-  $vars['link_attributes'] = new Attribute(array(
+//   $vars['link_attributes'] = new Attribute(array(
-    'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path
+//     'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path
-  ));
+//   ));
-}
+// }
 
 /**
  * Implements hook_form_alter
@@ -104,21 +108,21 @@ function materiotheme_form_user_login_form_alter(&$form, FormStateInterface $for
  *   - image_style: An optional image style.
  *   - url: An optional \Drupal\Core\Url object.
  */
-function materiotheme_preprocess_image_formatter(&$vars){
+// function materiotheme_preprocess_image_formatter(&$vars){
-  if(isset($vars['url'])){
+//   if(isset($vars['url'])){
-    $system_path = $vars['url']->getInternalPath();
+//     $system_path = $vars['url']->getInternalPath();
-    $vars['link_attributes'] = new Attribute(array(
+//     $vars['link_attributes'] = new Attribute(array(
-      'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path,
+//       'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path,
-      'class' => array('ajax-link')
+//       'class' => array('ajax-link')
-    ));
+//     ));
-    // dpm($vars);
+//     // dpm($vars);
-  }
+//   }
-}
+// }
 
-function materiotheme_preprocess_links__language_block(&$vars){
+// function materiotheme_preprocess_links__language_block(&$vars){
-  // dpm($vars);
+//   // dpm($vars);
-  // foreach ($vars['links'] as $lang_code => $link) {
+//   // foreach ($vars['links'] as $lang_code => $link) {
-  //   $vars['links'][$lang_code]['text'] = $lang_code;
+//   //   $vars['links'][$lang_code]['text'] = $lang_code;
-  //   $vars['links'][$lang_code]['link']['#title'] = $lang_code;
+//   //   $vars['links'][$lang_code]['link']['#title'] = $lang_code;
-  // }
+//   // }
-}
+// }

web/themes/custom/materiotheme/vuejs/components/Content/Base.vue

@@ -9,7 +9,7 @@
         {{ searchinfos }}
       </aside>
       <ul>
-        <li v-for="item in items" v-bind:key="item.nid">
+        <li v-for="item in items" v-bind:key="item.uuid">
           <Card :item="item"/>
         </li>
       </ul>

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -4,8 +4,19 @@
       <h1>{{ item.title }}</h1>
       <h4>{{ item.description }}</h4>
     </header>
-    <section class=images>
+    <section class="images" v-switcher>
-      <img class="images" v-for="img in item.images" :src="img.url" :title="img.title"/>
+      <figure
+        v-for="(img, index) in item.images"
+        :key="img.url"
+      >
+        <img
+          class="lazy"
+          v-lazy="index"
+          :data-src="img.url"
+          :title="img.title"
+        />
+        <img class="blank" :src="blanksrc">
+      </figure>
     </section>
   </div>
 </template>
@@ -15,9 +26,59 @@
 export default {
   name: "Card",
   props: ['item'],
-  data: () => ({
+  data() {
-
+    return {
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`
+    }
+  },
+  directives: {
+    lazy: {
+      bind(img,binding){
+        // console.log('lazy bind', img, binding);
+        if(binding.value === 0){
+          img.setAttribute('src', img.getAttribute('data-src'))
+          img.removeAttribute('data-src')
+          img.classList.remove('lazy')
+        }
+      }
+    },
+    switcher: {
+      inserted(el,binding){
+        // switch images on mousemove
+        el.addEventListener('mousemove', function(event) {
+          let figs = this.querySelectorAll('figure')
+          // console.log('mousemove', this, event, figs.length);
+          // let len = figs.length
+          // let w = this.clientWidth;
+          // let g = w / len;
+          // let delta = Math.floor(event.layerX / g)
+          let delta = Math.floor(event.layerX / (this.clientWidth / figs.length))
+          // console.log('delta', delta);
+          figs.forEach((fig, index) => {
+            // console.log(index);
+            if(index == delta){
+              fig.style.display = "block"
+            }else{
+              fig.style.display = "none"
+            }
           })
+        })
+      }
+    }
+  },
+  mounted() {
+    // lazy load images on mouseover
+    this.$el.addEventListener('mouseover', function(event) {
+      let imgs = this.querySelectorAll('.images figure img.lazy')
+      console.log('mouseover', this, imgs);
+      imgs.forEach((img) => {
+        // console.log('forEach img',img);
+        img.setAttribute('src', img.getAttribute('data-src'))
+        img.removeAttribute('data-src')
+        img.classList.remove('lazy')
+      })
+    }, {once : true})
+  }
 }
 
 </script>

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -40,6 +40,14 @@ export default {
       this.autocomplete = ui.item.value
     }
   },
+  directives: {
+    focus: {
+      // directive definition
+      inserted: function (el) {
+        el.focus()
+      }
+    }
+  },
   beforeMount() {
     // console.log('SearchForm beforeMount');
     if(this._props.form){
@@ -70,8 +78,8 @@ export default {
     Drupal.attachBehaviors(this.$el);
     // get the search input
     let $input = this.$el.querySelector('#edit-search')
-    // focus on input
+    // // focus on input
-    $input.focus()
+    // $input.focus()
     // Catch the jquery ui events for autocmplete widget
     jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
   },

web/themes/custom/materiotheme/vuejs/store/modules/search.js

@@ -126,6 +126,7 @@ export default {
 
         // get field values
         let item = {
+          uuid: uuid,
           title: attrs.title,
           description: attrs.field_short_description,
           body: attrs.body,