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/flag_lists": "^4.0@beta",
|
||||||
"drupal/genpass": "^1.x-dev",
|
"drupal/genpass": "^1.x-dev",
|
||||||
"drupal/image_delta_formatter": "^1.x-dev",
|
"drupal/image_delta_formatter": "^1.x-dev",
|
||||||
|
"drupal/image_effects": "3.x-dev@dev",
|
||||||
"drupal/jsonapi_extras": "^3.7",
|
"drupal/jsonapi_extras": "^3.7",
|
||||||
"drupal/jsonrpc": "^1.x-dev",
|
"drupal/jsonrpc": "^1.x-dev",
|
||||||
"drupal/login_history": "^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",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "72666d13bf47ed93fa6c3d45a9e17370",
|
"content-hash": "a39c2661f765eebdcbdb7b7732b68200",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "alchemy/zippy",
|
"name": "alchemy/zippy",
|
||||||
|
@ -6819,6 +6819,74 @@
|
||||||
"source": "https://git.drupalcode.org/project/file_mdm"
|
"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",
|
"name": "drupal/filefield_sources",
|
||||||
"version": "dev-1.x",
|
"version": "dev-1.x",
|
||||||
|
@ -7257,6 +7325,61 @@
|
||||||
},
|
},
|
||||||
"time": "2020-07-18T12:01:59+00:00"
|
"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",
|
"name": "drupal/imagemagick",
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
|
@ -17408,6 +17531,7 @@
|
||||||
"drupal/flag_lists": 10,
|
"drupal/flag_lists": 10,
|
||||||
"drupal/genpass": 20,
|
"drupal/genpass": 20,
|
||||||
"drupal/image_delta_formatter": 20,
|
"drupal/image_delta_formatter": 20,
|
||||||
|
"drupal/image_effects": 20,
|
||||||
"drupal/jsonrpc": 20,
|
"drupal/jsonrpc": 20,
|
||||||
"drupal/login_history": 20,
|
"drupal/login_history": 20,
|
||||||
"drupal/mailgun": 20,
|
"drupal/mailgun": 20,
|
||||||
|
|
|
@ -76,6 +76,7 @@ module:
|
||||||
file: 0
|
file: 0
|
||||||
file_mdm: 0
|
file_mdm: 0
|
||||||
file_mdm_exif: 0
|
file_mdm_exif: 0
|
||||||
|
file_mdm_font: 0
|
||||||
filter: 0
|
filter: 0
|
||||||
filter_perms: 0
|
filter_perms: 0
|
||||||
flag: 0
|
flag: 0
|
||||||
|
@ -85,6 +86,7 @@ module:
|
||||||
honeypot: 0
|
honeypot: 0
|
||||||
image: 0
|
image: 0
|
||||||
image_delta_formatter: 0
|
image_delta_formatter: 0
|
||||||
|
image_effects: 0
|
||||||
imagemagick: 0
|
imagemagick: 0
|
||||||
inline_entity_form: 0
|
inline_entity_form: 0
|
||||||
interval: 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_full
|
||||||
- card_medium
|
- card_medium
|
||||||
- card_medium_half
|
- card_medium_half
|
||||||
|
- hd
|
||||||
disabled: false
|
disabled: false
|
||||||
field_memo:
|
field_memo:
|
||||||
disabled: true
|
disabled: true
|
||||||
|
|
|
@ -9944,6 +9944,12 @@
|
||||||
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
|
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
|
||||||
"dev": true
|
"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": {
|
"resolve": {
|
||||||
"version": "1.10.0",
|
"version": "1.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
|
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz",
|
||||||
|
@ -11747,6 +11753,15 @@
|
||||||
"vue-template-es2015-compiler": "^1.6.0"
|
"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": {
|
"vue-loader": {
|
||||||
"version": "15.9.5",
|
"version": "15.9.5",
|
||||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.5.tgz",
|
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.5.tgz",
|
||||||
|
|
|
@ -62,6 +62,7 @@
|
||||||
"url-loader": "^4.1.1",
|
"url-loader": "^4.1.1",
|
||||||
"vue-eslint-parser": "^7.1.1",
|
"vue-eslint-parser": "^7.1.1",
|
||||||
"vue-jest": "^3.0.7",
|
"vue-jest": "^3.0.7",
|
||||||
|
"vue-js-modal": "^2.0.0-rc.6",
|
||||||
"vue-loader": "^15.9.5",
|
"vue-loader": "^15.9.5",
|
||||||
"vue-server-renderer": "^2.6.12",
|
"vue-server-renderer": "^2.6.12",
|
||||||
"vue-style-loader": "^4.1.2",
|
"vue-style-loader": "^4.1.2",
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
/INSTALL.txt
|
/INSTALL.txt
|
||||||
/README.txt
|
/README.txt
|
||||||
/example.gitignore
|
/example.gitignore
|
||||||
|
/.eslintrc.json
|
||||||
|
|
|
@ -1744,17 +1744,36 @@ article.card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%; }
|
height: 100%; }
|
||||||
article.card section.images figure {
|
article.card section.images figure {
|
||||||
|
cursor: pointer;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0; }
|
left: 0;
|
||||||
|
transition: opacity 0.2s ease-in-out; }
|
||||||
article.card section.images figure:first-of-type {
|
article.card section.images figure:first-of-type {
|
||||||
z-index: 5; }
|
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 {
|
article.card section.images figure img.blank {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 20; }
|
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 {
|
#main-content > article.article div.cols {
|
||||||
display: grid;
|
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'
|
import CoolLightBox from 'vue-cool-lightbox'
|
||||||
Vue.use(CoolLightBox)
|
Vue.use(CoolLightBox)
|
||||||
|
|
||||||
|
import VModal from 'vue-js-modal'
|
||||||
|
Vue.use(VModal)
|
||||||
|
|
||||||
import store from 'vuejs/store'
|
import store from 'vuejs/store'
|
||||||
import router from 'vuejs/route'
|
import router from 'vuejs/route'
|
||||||
|
|
||||||
|
|
|
@ -12,3 +12,6 @@ $card_height: 295px;
|
||||||
|
|
||||||
$minicard_width: 170px;
|
$minicard_width: 170px;
|
||||||
$minicard_height: 100px;
|
$minicard_height: 100px;
|
||||||
|
|
||||||
|
$modalcard_width: 850px;
|
||||||
|
$modalcard_height: 610px;
|
||||||
|
|
|
@ -829,6 +829,7 @@ article.card{
|
||||||
position: relative;
|
position: relative;
|
||||||
&, *{width: 100%; height:100%;}
|
&, *{width: 100%; height:100%;}
|
||||||
figure{
|
figure{
|
||||||
|
cursor: pointer;
|
||||||
margin:0;
|
margin:0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0; left:0;
|
top:0; left:0;
|
||||||
|
@ -836,6 +837,10 @@ article.card{
|
||||||
&:first-of-type{
|
&:first-of-type{
|
||||||
z-index:5
|
z-index:5
|
||||||
}
|
}
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
&.show{opacity: 1; z-index:6;}
|
||||||
|
&.hide{opacity: 0;}
|
||||||
|
|
||||||
img{
|
img{
|
||||||
// width: 100%; height:100%;
|
// width: 100%; height:100%;
|
||||||
&.blank{
|
&.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>
|
<template>
|
||||||
<article class="card search-card">
|
<article class="card search-card">
|
||||||
<header>
|
<header
|
||||||
|
@click="openModalCard"
|
||||||
|
>
|
||||||
<h1>{{ item.title }}</h1>
|
<h1>{{ item.title }}</h1>
|
||||||
<h4>{{ item.field_short_description }}</h4>
|
<h4>{{ item.field_short_description }}</h4>
|
||||||
<span class="ref">{{ item.field_reference }}</span>
|
<span class="ref">{{ item.field_reference }}</span>
|
||||||
|
@ -34,27 +36,43 @@
|
||||||
<img
|
<img
|
||||||
class="lazy"
|
class="lazy"
|
||||||
v-lazy="index"
|
v-lazy="index"
|
||||||
:data-src="img.url"
|
:data-src="img.img_styles.card_medium"
|
||||||
:title="img.title"
|
:title="img.title"
|
||||||
/>
|
/>
|
||||||
<img class="blank" :src="blanksrc">
|
<img
|
||||||
|
class="blank"
|
||||||
|
:src="blanksrc"
|
||||||
|
@click="lightbox_index = index"
|
||||||
|
>
|
||||||
</figure>
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
|
<CoolLightBox
|
||||||
|
:items="item.images"
|
||||||
|
:index="lightbox_index"
|
||||||
|
srcName="src"
|
||||||
|
loop="true"
|
||||||
|
@close="lightbox_index = null">
|
||||||
|
</CoolLightBox>
|
||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState, mapActions } from 'vuex'
|
import { mapState, mapActions } from 'vuex'
|
||||||
import cardMixins from 'vuejs/components/cardMixins'
|
import cardMixins from 'vuejs/components/cardMixins'
|
||||||
|
import ModalCard from 'vuejs/components/Content/ModalCard'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Card",
|
name: "Card",
|
||||||
props: ['item'],
|
props: ['item'],
|
||||||
mixins: [cardMixins],
|
mixins: [cardMixins],
|
||||||
|
components: {
|
||||||
|
ModalCard
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
|
blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
|
||||||
loadingFlag: false
|
loadingFlag: false,
|
||||||
|
lightbox_index: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -91,6 +109,17 @@ export default {
|
||||||
this.loadingFlag = false;
|
this.loadingFlag = false;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
openModalCard (e) {
|
||||||
|
this.$modal.show(
|
||||||
|
ModalCard,
|
||||||
|
{ item: this.item },
|
||||||
|
{
|
||||||
|
draggable: true,
|
||||||
|
width: '850px',
|
||||||
|
height: '610px'
|
||||||
|
}
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
<img
|
<img
|
||||||
class="lazy"
|
class="lazy"
|
||||||
v-lazy="index"
|
v-lazy="index"
|
||||||
:data-src="img.url"
|
:data-src="img.img_styles.card_medium_half"
|
||||||
:title="img.title"
|
:title="img.title"
|
||||||
/>
|
/>
|
||||||
<img class="blank" :src="blanksrc">
|
<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){
|
if(img.meta.imageDerivatives){
|
||||||
field.images.push({
|
field.images.push({
|
||||||
title:img.meta.title,
|
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) => {
|
figs.forEach((fig, index) => {
|
||||||
// console.log(index);
|
// console.log(index);
|
||||||
if(index == delta){
|
if(index == delta){
|
||||||
fig.style.display = "block"
|
// fig.style.display = "block"
|
||||||
|
fig.classList.remove("hide")
|
||||||
|
fig.classList.add("show")
|
||||||
}else{
|
}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 = []
|
item.images = []
|
||||||
for (let j = 0; j < img_src.length; j++) {
|
for (let j = 0; j < img_src.length; j++) {
|
||||||
if (img_src[j].meta.imageDerivatives) {
|
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({
|
item.images.push({
|
||||||
title: img_src[j].meta.title,
|
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
|
// meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module
|
||||||
// BUG: missing all image derivative but first
|
// BUG: missing all image derivative but first
|
||||||
url: img_src[j].meta.imageDerivatives.links.[imgStyle].href
|
img_styles: img_styles
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
|
console.warn('missing image derivative ' + j + '/' + img_src.length + ' for ' + attrs.title)
|
||||||
|
|
|
@ -110,7 +110,7 @@ export default {
|
||||||
// https://github.com/huybuidac/vuex-extensions
|
// https://github.com/huybuidac/vuex-extensions
|
||||||
dispatch('loadMaterials', {
|
dispatch('loadMaterials', {
|
||||||
uuids: data.uuids,
|
uuids: data.uuids,
|
||||||
imgStyle: 'card_medium',
|
imgStyle: ['card_medium', 'card_full'],
|
||||||
callBack: 'loadMaterialsCallBack'
|
callBack: 'loadMaterialsCallBack'
|
||||||
})
|
})
|
||||||
}else{
|
}else{
|
||||||
|
|
|
@ -254,7 +254,7 @@ export default {
|
||||||
if (state.flagcolls[collid].items_uuids.length) {
|
if (state.flagcolls[collid].items_uuids.length) {
|
||||||
dispatch('loadMaterials', {
|
dispatch('loadMaterials', {
|
||||||
uuids: state.flagcolls[collid].items_uuids,
|
uuids: state.flagcolls[collid].items_uuids,
|
||||||
imgStyle: 'card_medium_half',
|
imgStyle: ['card_medium_half'],
|
||||||
callBack: 'loadMaterialsCallBack',
|
callBack: 'loadMaterialsCallBack',
|
||||||
callBackArgs: { collid: collid }
|
callBackArgs: { collid: collid }
|
||||||
}).then( () => {
|
}).then( () => {
|
||||||
|
@ -282,7 +282,7 @@ export default {
|
||||||
// https://github.com/huybuidac/vuex-extensions
|
// https://github.com/huybuidac/vuex-extensions
|
||||||
dispatch('loadMaterials', {
|
dispatch('loadMaterials', {
|
||||||
uuids: state.flagcolls[collid].items_uuids,
|
uuids: state.flagcolls[collid].items_uuids,
|
||||||
imgStyle: 'card_medium_half',
|
imgStyle: ['card_medium_half'],
|
||||||
callBack: 'loadMaterialsCallBack',
|
callBack: 'loadMaterialsCallBack',
|
||||||
callBackArgs: { collid: collid }
|
callBackArgs: { collid: collid }
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue