123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156 |
- <template>
- <article class="card">
- <header>
- <h1>{{ item.title }}</h1>
- <h4>{{ item.field_short_description }}</h4>
- <span class="ref">{{ item.field_reference }}</span>
- </header>
- <nav class="tools">
- <section class="tool flags">
- <span class="btn mdi mdi-folder-outline"/>
- <div class="tool-content">
- <ul>
- <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
- <span
- class="flag mdi"
- :class="[
- flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close isActive' : 'mdi-plus'
- ]"
- :collid="coll.id"
- @click.prevent="onFlagActionCard"
- >
- {{ coll.name }}
- </span>
- </li>
- </ul>
- </div>
- </section>
- </nav>
- <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>
- import { mapState, mapActions } from 'vuex'
- export default {
- name: "Card",
- props: ['item'],
- data() {
- return {
- blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
- loadingFlag: false
- }
- },
- computed: {
- ...mapState({
- flagcolls: state => state.User.flagcolls
- })
- },
- 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})
- },
- methods: {
- ...mapActions({
- flag: 'User/flag',
- unFlag: 'User/unFlag'
- }),
- flagIsActive(collid) {
- // console.log(this.item.uuid);
- // console.log(this.flagcolls[collid].items_uuids);
- return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
- },
- flagIsLoading(collid) {
- // console.log(this.item.uuid);
- // console.log(this.flagcolls[collid].items_uuids);
- return collid === this.loadingFlag;
- },
- onFlagActionCard (e) {
- console.log("Card onFlagActionCard", e);
- if (!this.loadingFlag) {
- let collid = e.target.getAttribute('collid');
- let isActive = this.flagIsActive(collid);
- // console.log('collid', collid);
- // console.log("this.item", this.item);
- this.loadingFlag = collid;
- if (isActive) {
- this.unFlag({uuid: this.item.uuid, collid: collid})
- .then(data => {
- console.log("onFlagActionCard then", data);
- this.loadingFlag = false;
- })
- }else{
- this.flag({uuid: this.item.uuid, collid: collid})
- .then(data => {
- console.log("onFlagActionCard then", data);
- this.loadingFlag = false;
- })
- }
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
|