made card image switcher
This commit is contained in:
parent
5da3b3c90a
commit
a771fd9d74
|
@ -33,6 +33,7 @@ class MaterioSapiSearchForm extends FormBase {
|
||||||
// "@keyup" => "keyup",
|
// "@keyup" => "keyup",
|
||||||
"@keyup.enter" => "submit",
|
"@keyup.enter" => "submit",
|
||||||
"v-model" => "typed",
|
"v-model" => "typed",
|
||||||
|
"v-focus" => "",
|
||||||
// "v-on:select" => "typed",
|
// "v-on:select" => "typed",
|
||||||
],
|
],
|
||||||
'#autocomplete_route_name' => 'materio_sapi.search_autocomplete',
|
'#autocomplete_route_name' => 'materio_sapi.search_autocomplete',
|
||||||
|
|
File diff suppressed because one or more lines are too long
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
|
@ -3,9 +3,6 @@ import Vue from 'vue'
|
||||||
import store from 'vuejs/store'
|
import store from 'vuejs/store'
|
||||||
import router from 'vuejs/route'
|
import router from 'vuejs/route'
|
||||||
|
|
||||||
// import autofocus from 'vue-autofocus-directive';
|
|
||||||
// Vue.directive('autofocus', autofocus);
|
|
||||||
|
|
||||||
import VUserBlock from 'vuejs/components/Block/UserBlock'
|
import VUserBlock from 'vuejs/components/Block/UserBlock'
|
||||||
import VMainContent from 'vuejs/components/Content/MainContent'
|
import VMainContent from 'vuejs/components/Content/MainContent'
|
||||||
import VSearchBlock from 'vuejs/components/Block/SearchBlock'
|
import VSearchBlock from 'vuejs/components/Block/SearchBlock'
|
||||||
|
|
|
@ -251,13 +251,23 @@ article.node--type-frontpage{
|
||||||
}
|
}
|
||||||
section.images{
|
section.images{
|
||||||
position: relative;
|
position: relative;
|
||||||
img:first-of-type{
|
&, *{width: 100%; height:100%;}
|
||||||
z-index:5
|
figure{
|
||||||
}
|
margin:0;
|
||||||
img:not(:first-of-type){
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0; left:0;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @file
|
* @file
|
||||||
* Functions to support theming in the edlp theme.
|
* Functions to support theming in the materio theme.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
use Drupal\Core\Url;
|
use Drupal\Core\Url;
|
||||||
|
@ -41,6 +41,10 @@ function materiotheme_preprocess_html(&$vars) {
|
||||||
// ]);
|
// ]);
|
||||||
// $vars['head_title'] = $head_title;
|
// $vars['head_title'] = $head_title;
|
||||||
|
|
||||||
|
global $base_url;
|
||||||
|
$theme = \Drupal::theme()->getActiveTheme();
|
||||||
|
$vars['#attached']['drupalSettings']['path']['themePath'] = $base_url .'/'. $theme->getPath();
|
||||||
|
|
||||||
$description = [
|
$description = [
|
||||||
'#tag' => 'meta',
|
'#tag' => 'meta',
|
||||||
'#attributes' => [
|
'#attributes' => [
|
||||||
|
@ -65,15 +69,15 @@ function materiotheme_preprocess_page(&$vars){
|
||||||
// dsm($vars, '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
|
* Implements hook_form_alter
|
||||||
|
@ -104,21 +108,21 @@ function materiotheme_form_user_login_form_alter(&$form, FormStateInterface $for
|
||||||
* - image_style: An optional image style.
|
* - image_style: An optional image style.
|
||||||
* - url: An optional \Drupal\Core\Url object.
|
* - 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;
|
||||||
|
// // }
|
||||||
// }
|
// }
|
||||||
}
|
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
{{ searchinfos }}
|
{{ searchinfos }}
|
||||||
</aside>
|
</aside>
|
||||||
<ul>
|
<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"/>
|
<Card :item="item"/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -4,8 +4,19 @@
|
||||||
<h1>{{ item.title }}</h1>
|
<h1>{{ item.title }}</h1>
|
||||||
<h4>{{ item.description }}</h4>
|
<h4>{{ item.description }}</h4>
|
||||||
</header>
|
</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>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -15,9 +26,59 @@
|
||||||
export default {
|
export default {
|
||||||
name: "Card",
|
name: "Card",
|
||||||
props: ['item'],
|
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>
|
</script>
|
||||||
|
|
|
@ -40,6 +40,14 @@ export default {
|
||||||
this.autocomplete = ui.item.value
|
this.autocomplete = ui.item.value
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
directives: {
|
||||||
|
focus: {
|
||||||
|
// directive definition
|
||||||
|
inserted: function (el) {
|
||||||
|
el.focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
// console.log('SearchForm beforeMount');
|
// console.log('SearchForm beforeMount');
|
||||||
if(this._props.form){
|
if(this._props.form){
|
||||||
|
@ -70,8 +78,8 @@ export default {
|
||||||
Drupal.attachBehaviors(this.$el);
|
Drupal.attachBehaviors(this.$el);
|
||||||
// get the search input
|
// get the search input
|
||||||
let $input = this.$el.querySelector('#edit-search')
|
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
|
// Catch the jquery ui events for autocmplete widget
|
||||||
jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
|
jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
|
||||||
},
|
},
|
||||||
|
|
|
@ -126,6 +126,7 @@ export default {
|
||||||
|
|
||||||
// get field values
|
// get field values
|
||||||
let item = {
|
let item = {
|
||||||
|
uuid: uuid,
|
||||||
title: attrs.title,
|
title: attrs.title,
|
||||||
description: attrs.field_short_description,
|
description: attrs.field_short_description,
|
||||||
body: attrs.body,
|
body: attrs.body,
|
||||||
|
|
Loading…
Reference in New Issue