1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <template>
- <article class="card">
- <header>
- <h1>{{ item.title }}</h1>
- <h4>{{ item.description }}</h4>
- <span class="ref">{{ item.reference }}</span>
- </header>
- <section class="images" v-switcher>
- <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>
- </article>
- </template>
- <script>
- export default {
- name: "Card",
- props: ['item'],
- 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>
- <style lang="scss" scoped>
- </style>
|