activated lightbox on cards, started to dev modal-card
This commit is contained in:
parent
8f854ff287
commit
a4e689c27a
|
|
@ -42,6 +42,7 @@
|
|||
"drupal/flag_lists": "^4.0@beta",
|
||||
"drupal/genpass": "^1.x-dev",
|
||||
"drupal/image_delta_formatter": "^1.x-dev",
|
||||
"drupal/image_effects": "3.x-dev@dev",
|
||||
"drupal/jsonapi_extras": "^3.7",
|
||||
"drupal/jsonrpc": "^1.x-dev",
|
||||
"drupal/login_history": "^1.x-dev",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "72666d13bf47ed93fa6c3d45a9e17370",
|
||||
"content-hash": "a39c2661f765eebdcbdb7b7732b68200",
|
||||
"packages": [
|
||||
{
|
||||
"name": "alchemy/zippy",
|
||||
|
|
@ -6819,6 +6819,74 @@
|
|||
"source": "https://git.drupalcode.org/project/file_mdm"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "drupal/file_mdm_exif",
|
||||
"version": "2.1.0",
|
||||
"require": {
|
||||
"drupal/core": "^8.8 || ^9",
|
||||
"drupal/file_mdm": "*"
|
||||
},
|
||||
"type": "metapackage",
|
||||
"extra": {
|
||||
"drupal": {
|
||||
"version": "8.x-2.1",
|
||||
"datestamp": "1586801064",
|
||||
"security-coverage": {
|
||||
"status": "covered",
|
||||
"message": "Covered by Drupal's security advisory policy"
|
||||
}
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packages.drupal.org/8/downloads",
|
||||
"license": [
|
||||
"GPL-2.0-or-later"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "mondrake",
|
||||
"homepage": "https://www.drupal.org/user/1307444"
|
||||
}
|
||||
],
|
||||
"description": "Provides a file metadata plugin for EXIF image information.",
|
||||
"homepage": "https://www.drupal.org/project/file_mdm",
|
||||
"support": {
|
||||
"source": "https://git.drupalcode.org/project/file_mdm"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "drupal/file_mdm_font",
|
||||
"version": "2.1.0",
|
||||
"require": {
|
||||
"drupal/core": "^8.8 || ^9",
|
||||
"drupal/file_mdm": "*"
|
||||
},
|
||||
"type": "metapackage",
|
||||
"extra": {
|
||||
"drupal": {
|
||||
"version": "8.x-2.1",
|
||||
"datestamp": "1586801064",
|
||||
"security-coverage": {
|
||||
"status": "covered",
|
||||
"message": "Covered by Drupal's security advisory policy"
|
||||
}
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packages.drupal.org/8/downloads",
|
||||
"license": [
|
||||
"GPL-2.0-or-later"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "mondrake",
|
||||
"homepage": "https://www.drupal.org/user/1307444"
|
||||
}
|
||||
],
|
||||
"description": "Provides a file metadata plugin for TTF/OTF/WOFF font information.",
|
||||
"homepage": "https://www.drupal.org/project/file_mdm",
|
||||
"support": {
|
||||
"source": "https://git.drupalcode.org/project/file_mdm"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "drupal/filefield_sources",
|
||||
"version": "dev-1.x",
|
||||
|
|
@ -7257,6 +7325,61 @@
|
|||
},
|
||||
"time": "2020-07-18T12:01:59+00:00"
|
||||
},
|
||||
{
|
||||
"name": "drupal/image_effects",
|
||||
"version": "dev-3.x",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://git.drupalcode.org/project/image_effects.git",
|
||||
"reference": "2dd85aa60ee79bcf530bf21070dacaf554601dcc"
|
||||
},
|
||||
"require": {
|
||||
"drupal/core": "^8.9 || ^9",
|
||||
"drupal/file_mdm_exif": "^2",
|
||||
"drupal/file_mdm_font": "^2",
|
||||
"php": ">=7.1"
|
||||
},
|
||||
"conflict": {
|
||||
"drupal/imagemagick": "<3"
|
||||
},
|
||||
"require-dev": {
|
||||
"drupal/imagemagick": "^3"
|
||||
},
|
||||
"type": "drupal-module",
|
||||
"extra": {
|
||||
"branch-alias": {
|
||||
"dev-3.x": "3.x-dev"
|
||||
},
|
||||
"drupal": {
|
||||
"version": "8.x-3.0+9-dev",
|
||||
"datestamp": "1606320751",
|
||||
"security-coverage": {
|
||||
"status": "not-covered",
|
||||
"message": "Dev releases are not covered by Drupal security advisories."
|
||||
}
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packages.drupal.org/8/downloads",
|
||||
"license": [
|
||||
"GPL-2.0-or-later"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "mondrake",
|
||||
"homepage": "https://www.drupal.org/user/1307444"
|
||||
},
|
||||
{
|
||||
"name": "slashrsm",
|
||||
"homepage": "https://www.drupal.org/user/744628"
|
||||
}
|
||||
],
|
||||
"description": "Provides effects and operations for the Image API.",
|
||||
"homepage": "https://www.drupal.org/project/image_effects",
|
||||
"support": {
|
||||
"source": "https://git.drupalcode.org/project/image_effects"
|
||||
},
|
||||
"time": "2020-11-27T15:22:12+00:00"
|
||||
},
|
||||
{
|
||||
"name": "drupal/imagemagick",
|
||||
"version": "3.1.0",
|
||||
|
|
@ -17408,6 +17531,7 @@
|
|||
"drupal/flag_lists": 10,
|
||||
"drupal/genpass": 20,
|
||||
"drupal/image_delta_formatter": 20,
|
||||
"drupal/image_effects": 20,
|
||||
"drupal/jsonrpc": 20,
|
||||
"drupal/login_history": 20,
|
||||
"drupal/mailgun": 20,
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ module:
|
|||
file: 0
|
||||
file_mdm: 0
|
||||
file_mdm_exif: 0
|
||||
file_mdm_font: 0
|
||||
filter: 0
|
||||
filter_perms: 0
|
||||
flag: 0
|
||||
|
|
@ -85,6 +86,7 @@ module:
|
|||
honeypot: 0
|
||||
image: 0
|
||||
image_delta_formatter: 0
|
||||
image_effects: 0
|
||||
imagemagick: 0
|
||||
inline_entity_form: 0
|
||||
interval: 0
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
configuration:
|
||||
cache:
|
||||
override: false
|
||||
settings:
|
||||
enabled: true
|
||||
expiration: 172800
|
||||
disallowed_paths: { }
|
||||
_core:
|
||||
default_config_hash: o53U_2I-21Es-9iqxeUMDRcRxN0spL1OiHuAVQhh2oI
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
uuid: 8722930b-22a2-4f06-afb0-593c9969c185
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- image_effects
|
||||
name: hd
|
||||
label: 'hd (1920x1080)'
|
||||
effects:
|
||||
94be638b-57fe-4848-8ac3-95036ece001c:
|
||||
uuid: 94be638b-57fe-4848-8ac3-95036ece001c
|
||||
id: image_scale
|
||||
weight: 1
|
||||
data:
|
||||
width: 1920
|
||||
height: 1200
|
||||
upscale: false
|
||||
07af5abf-4bb7-4e96-ba86-9fe6e92ab548:
|
||||
uuid: 07af5abf-4bb7-4e96-ba86-9fe6e92ab548
|
||||
id: image_effects_watermark
|
||||
weight: 2
|
||||
data:
|
||||
watermark_image: sites/default/files/watermarks/materio-watermark-hd.png
|
||||
watermark_width: 90%
|
||||
watermark_height: ''
|
||||
placement: center-center
|
||||
x_offset: ''
|
||||
y_offset: ''
|
||||
opacity: 10
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
color_selector:
|
||||
plugin_id: farbtastic
|
||||
plugin_settings:
|
||||
html_color: { }
|
||||
farbtastic: { }
|
||||
image_selector:
|
||||
plugin_id: dropdown
|
||||
plugin_settings:
|
||||
basic: { }
|
||||
dropdown:
|
||||
path: sites/default/files/watermarks
|
||||
font_selector:
|
||||
plugin_id: basic
|
||||
plugin_settings:
|
||||
basic: { }
|
||||
_core:
|
||||
default_config_hash: eaXmaPSud65p-XhTwMIL9vKETD9zR3qNOMMa5EUuoNw
|
||||
|
|
@ -214,6 +214,7 @@ resourceFields:
|
|||
- card_full
|
||||
- card_medium
|
||||
- card_medium_half
|
||||
- hd
|
||||
disabled: false
|
||||
field_memo:
|
||||
disabled: true
|
||||
|
|
|
|||
|
|
@ -9944,6 +9944,12 @@
|
|||
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
|
||||
"dev": true
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
|
||||
"dev": true
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
|
||||
|
|
@ -11747,6 +11753,15 @@
|
|||
"vue-template-es2015-compiler": "^1.6.0"
|
||||
}
|
||||
},
|
||||
"vue-js-modal": {
|
||||
"version": "2.0.0-rc.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-2.0.0-rc.6.tgz",
|
||||
"integrity": "sha512-bJOm7Yhrl0ur/QyXjoC3gMMmE7UxiVEcS2rl8v9iPXIe9QLvjiCSZElSOvvyps8LNuG1X0rPifZGxI/CWKCFaw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
}
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "15.9.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.5.tgz",
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@
|
|||
"url-loader": "^4.1.1",
|
||||
"vue-eslint-parser": "^7.1.1",
|
||||
"vue-jest": "^3.0.7",
|
||||
"vue-js-modal": "^2.0.0-rc.6",
|
||||
"vue-loader": "^15.9.5",
|
||||
"vue-server-renderer": "^2.6.12",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/INSTALL.txt
|
||||
/README.txt
|
||||
/example.gitignore
|
||||
/example.gitignore
|
||||
/.eslintrc.json
|
||||
|
|
|
|||
|
|
@ -1744,17 +1744,36 @@ article.card {
|
|||
width: 100%;
|
||||
height: 100%; }
|
||||
article.card section.images figure {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
left: 0;
|
||||
transition: opacity 0.2s ease-in-out; }
|
||||
article.card section.images figure:first-of-type {
|
||||
z-index: 5; }
|
||||
article.card section.images figure.show {
|
||||
opacity: 1;
|
||||
z-index: 6; }
|
||||
article.card section.images figure.hide {
|
||||
opacity: 0; }
|
||||
article.card section.images figure img.blank {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20; }
|
||||
article.card.search-card > header {
|
||||
cursor: pointer; }
|
||||
article.card.modal-card {
|
||||
display: flex;
|
||||
flex-flow: row-reverse nowrap;
|
||||
width: 850px;
|
||||
height: 610px; }
|
||||
article.card.modal-card > .col {
|
||||
flex-basis: 50%; }
|
||||
article.card.modal-card section.col-right header {
|
||||
position: relative;
|
||||
bottom: auto; }
|
||||
|
||||
#main-content > article.article div.cols {
|
||||
display: grid;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,6 +20,9 @@ Vue.use(InfiniteLoading, {
|
|||
import CoolLightBox from 'vue-cool-lightbox'
|
||||
Vue.use(CoolLightBox)
|
||||
|
||||
import VModal from 'vue-js-modal'
|
||||
Vue.use(VModal)
|
||||
|
||||
import store from 'vuejs/store'
|
||||
import router from 'vuejs/route'
|
||||
|
||||
|
|
|
|||
|
|
@ -12,3 +12,6 @@ $card_height: 295px;
|
|||
|
||||
$minicard_width: 170px;
|
||||
$minicard_height: 100px;
|
||||
|
||||
$modalcard_width: 850px;
|
||||
$modalcard_height: 610px;
|
||||
|
|
|
|||
|
|
@ -829,6 +829,7 @@ article.card{
|
|||
position: relative;
|
||||
&, *{width: 100%; height:100%;}
|
||||
figure{
|
||||
cursor: pointer;
|
||||
margin:0;
|
||||
position: absolute;
|
||||
top:0; left:0;
|
||||
|
|
@ -836,6 +837,10 @@ article.card{
|
|||
&:first-of-type{
|
||||
z-index:5
|
||||
}
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&.show{opacity: 1; z-index:6;}
|
||||
&.hide{opacity: 0;}
|
||||
|
||||
img{
|
||||
// width: 100%; height:100%;
|
||||
&.blank{
|
||||
|
|
@ -846,6 +851,28 @@ article.card{
|
|||
}
|
||||
}
|
||||
}
|
||||
// overwritnig card for card-medium (aka search-card)
|
||||
&.search-card{
|
||||
>header{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// overwriting card for modal-card
|
||||
&.modal-card{
|
||||
display: flex;
|
||||
flex-flow: row-reverse nowrap;
|
||||
width: $modalcard_width;
|
||||
height: $modalcard_height;
|
||||
>.col{
|
||||
flex-basis: 50%;
|
||||
}
|
||||
section.col-right{
|
||||
header{
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<article class="card search-card">
|
||||
<header>
|
||||
<header
|
||||
@click="openModalCard"
|
||||
>
|
||||
<h1>{{ item.title }}</h1>
|
||||
<h4>{{ item.field_short_description }}</h4>
|
||||
<span class="ref">{{ item.field_reference }}</span>
|
||||
|
|
@ -34,27 +36,43 @@
|
|||
<img
|
||||
class="lazy"
|
||||
v-lazy="index"
|
||||
:data-src="img.url"
|
||||
:data-src="img.img_styles.card_medium"
|
||||
:title="img.title"
|
||||
/>
|
||||
<img class="blank" :src="blanksrc">
|
||||
<img
|
||||
class="blank"
|
||||
:src="blanksrc"
|
||||
@click="lightbox_index = index"
|
||||
>
|
||||
</figure>
|
||||
</section>
|
||||
<CoolLightBox
|
||||
:items="item.images"
|
||||
:index="lightbox_index"
|
||||
srcName="src"
|
||||
loop="true"
|
||||
@close="lightbox_index = null">
|
||||
</CoolLightBox>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
import cardMixins from 'vuejs/components/cardMixins'
|
||||
import ModalCard from 'vuejs/components/Content/ModalCard'
|
||||
|
||||
export default {
|
||||
name: "Card",
|
||||
props: ['item'],
|
||||
mixins: [cardMixins],
|
||||
components: {
|
||||
ModalCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
|
||||
loadingFlag: false
|
||||
loadingFlag: false,
|
||||
lightbox_index: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -91,6 +109,17 @@ export default {
|
|||
this.loadingFlag = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
openModalCard (e) {
|
||||
this.$modal.show(
|
||||
ModalCard,
|
||||
{ item: this.item },
|
||||
{
|
||||
draggable: true,
|
||||
width: '850px',
|
||||
height: '610px'
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<img
|
||||
class="lazy"
|
||||
v-lazy="index"
|
||||
:data-src="img.url"
|
||||
:data-src="img.img_styles.card_medium_half"
|
||||
:title="img.title"
|
||||
/>
|
||||
<img class="blank" :src="blanksrc">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<article class="card modal-card">
|
||||
<section class="col col-right">
|
||||
<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-circle isActive' : 'mdi-plus'
|
||||
]"
|
||||
:collid="coll.id"
|
||||
@click.prevent="onFlagActionCard"
|
||||
>
|
||||
{{ coll.name }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
</section>
|
||||
<section class="col col-left images" v-switcher>
|
||||
<figure
|
||||
v-for="(img, index) in item.images"
|
||||
:key="img.url"
|
||||
>
|
||||
<img
|
||||
class="lazy"
|
||||
v-lazy="index"
|
||||
:data-src="img.img_styles.card_full"
|
||||
:title="img.title"
|
||||
/>
|
||||
<img
|
||||
class="blank"
|
||||
:src="blanksrc"
|
||||
@click="lightbox_index = index"
|
||||
>
|
||||
</figure>
|
||||
</section>
|
||||
<CoolLightBox
|
||||
:items="item.images"
|
||||
:index="lightbox_index"
|
||||
srcName="src"
|
||||
loop="true"
|
||||
@close="lightbox_index = null">
|
||||
</CoolLightBox>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
import cardMixins from 'vuejs/components/cardMixins'
|
||||
|
||||
export default {
|
||||
name: "ModalCard",
|
||||
props: ['item'],
|
||||
mixins: [cardMixins],
|
||||
data() {
|
||||
return {
|
||||
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
|
||||
loadingFlag: false,
|
||||
lightbox_index: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
flagcolls: state => state.User.flagcolls
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
flagUnflag: 'User/flagUnflag'
|
||||
}),
|
||||
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);
|
||||
let action = isActive ? 'unflag' : 'flag';
|
||||
// console.log('collid', collid);
|
||||
// console.log("this.item", this.item);
|
||||
this.loadingFlag = collid;
|
||||
this.flagUnflag({ action: action, uuid: this.item.uuid, collid: collid})
|
||||
.then(data => {
|
||||
console.log("onFlagActionCard then", data);
|
||||
this.loadingFlag = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -312,7 +312,11 @@ export default {
|
|||
if(img.meta.imageDerivatives){
|
||||
field.images.push({
|
||||
title:img.meta.title,
|
||||
url:img.meta.imageDerivatives.links.card_medium.href
|
||||
src: img.meta.imageDerivatives.links.hd.href,
|
||||
img_styles: {
|
||||
card_medium: img.meta.imageDerivatives.links.card_medium.href,
|
||||
card_full: img.meta.imageDerivatives.links.card_full.href
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -26,9 +26,13 @@ export default {
|
|||
figs.forEach((fig, index) => {
|
||||
// console.log(index);
|
||||
if(index == delta){
|
||||
fig.style.display = "block"
|
||||
// fig.style.display = "block"
|
||||
fig.classList.remove("hide")
|
||||
fig.classList.add("show")
|
||||
}else{
|
||||
fig.style.display = "none"
|
||||
// fig.style.display = "none"
|
||||
fig.classList.remove("show")
|
||||
fig.classList.add("hide")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -90,11 +90,16 @@ export default createStore(Vuex.Store, {
|
|||
item.images = []
|
||||
for (let j = 0; j < img_src.length; j++) {
|
||||
if (img_src[j].meta.imageDerivatives) {
|
||||
let img_styles = {}
|
||||
for (var k = 0; k < imgStyle.length; k++) {
|
||||
img_styles[imgStyle[k]] = img_src[j].meta.imageDerivatives.links.[imgStyle[k]].href
|
||||
}
|
||||
item.images.push({
|
||||
title: img_src[j].meta.title,
|
||||
src: img_src[j].meta.imageDerivatives.links.hd.href,
|
||||
// meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
|
||||
// BUG: missing all image derivative but first
|
||||
url: img_src[j].meta.imageDerivatives.links.[imgStyle].href
|
||||
img_styles: img_styles
|
||||
})
|
||||
} else {
|
||||
console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export default {
|
|||
// https://github.com/huybuidac/vuex-extensions
|
||||
dispatch('loadMaterials', {
|
||||
uuids: data.uuids,
|
||||
imgStyle: 'card_medium',
|
||||
imgStyle: ['card_medium', 'card_full'],
|
||||
callBack: 'loadMaterialsCallBack'
|
||||
})
|
||||
}else{
|
||||
|
|
|
|||
|
|
@ -254,7 +254,7 @@ export default {
|
|||
if (state.flagcolls[collid].items_uuids.length) {
|
||||
dispatch('loadMaterials', {
|
||||
uuids: state.flagcolls[collid].items_uuids,
|
||||
imgStyle: 'card_medium_half',
|
||||
imgStyle: ['card_medium_half'],
|
||||
callBack: 'loadMaterialsCallBack',
|
||||
callBackArgs: { collid: collid }
|
||||
}).then( () => {
|
||||
|
|
@ -282,7 +282,7 @@ export default {
|
|||
// https://github.com/huybuidac/vuex-extensions
|
||||
dispatch('loadMaterials', {
|
||||
uuids: state.flagcolls[collid].items_uuids,
|
||||
imgStyle: 'card_medium_half',
|
||||
imgStyle: ['card_medium_half'],
|
||||
callBack: 'loadMaterialsCallBack',
|
||||
callBackArgs: { collid: collid }
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue