activated lightbox on cards, started to dev modal-card

This commit is contained in:
Bachir Soussi Chiadmi 2020-12-01 23:02:35 +01:00
parent 8f854ff287
commit a4e689c27a
23 changed files with 526 additions and 24 deletions

View File

@ -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",

126
composer.lock generated
View File

@ -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,

View File

@ -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

View File

@ -0,0 +1,9 @@
configuration:
cache:
override: false
settings:
enabled: true
expiration: 172800
disallowed_paths: { }
_core:
default_config_hash: o53U_2I-21Es-9iqxeUMDRcRxN0spL1OiHuAVQhh2oI

View File

@ -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

View File

@ -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

View File

@ -214,6 +214,7 @@ resourceFields:
- card_full
- card_medium
- card_medium_half
- hd
disabled: false
field_memo:
disabled: true

15
package-lock.json generated
View File

@ -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",

View File

@ -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
web/.gitignore vendored
View File

@ -1,3 +1,4 @@
/INSTALL.txt
/README.txt
/example.gitignore
/.eslintrc.json

View File

@ -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

View File

@ -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'

View File

@ -12,3 +12,6 @@ $card_height: 295px;
$minicard_width: 170px;
$minicard_height: 100px;
$modalcard_width: 850px;
$modalcard_height: 610px;

View File

@ -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;
}
}
}
}

View File

@ -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'
}
)
}
}
}

View File

@ -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">

View File

@ -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>

View File

@ -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
}
})
}
})

View File

@ -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")
}
})
})

View File

@ -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)

View File

@ -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{

View File

@ -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 }
})