feat(PublicPage): Extra pictures in media gallery
This commit is contained in:
parent
42232c8df9
commit
2df9ff8f48
4 changed files with 89 additions and 39 deletions
|
|
@ -94,6 +94,10 @@ let loadMedias = () => {
|
||||||
loadMedias()
|
loadMedias()
|
||||||
|
|
||||||
let openModal = (index) => {
|
let openModal = (index) => {
|
||||||
|
if (index === 'extra') {
|
||||||
|
index = 5
|
||||||
|
}
|
||||||
|
|
||||||
mediaModal.style.visibility = 'visible'
|
mediaModal.style.visibility = 'visible'
|
||||||
mediaModal.style.opacity = 1
|
mediaModal.style.opacity = 1
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,10 @@
|
||||||
|
|
||||||
********************************************************************************/
|
********************************************************************************/
|
||||||
|
|
||||||
|
.media-mosaic-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
.media-mosaic {
|
.media-mosaic {
|
||||||
margin-top: .75em;
|
margin-top: .75em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -317,6 +321,25 @@
|
||||||
right: 2em !important;
|
right: 2em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Extra count
|
||||||
|
**/
|
||||||
|
.media-gallery-extra-count {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
margin-top: .25em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-gallery-extra-count a {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* *****************************************************************************
|
/* *****************************************************************************
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -200,10 +200,12 @@ export default class PublicController {
|
||||||
* Parse gallery
|
* Parse gallery
|
||||||
*/
|
*/
|
||||||
if (Array.isArray(version.gallery)) {
|
if (Array.isArray(version.gallery)) {
|
||||||
version.gallery = version.gallery.slice(0, 5).map((media: any) => {
|
version.gallery = version.gallery.map((media: any) => {
|
||||||
media.isVideo = media.contentType.indexOf('video/') !== -1
|
media.isVideo = media.contentType.indexOf('video/') !== -1
|
||||||
return media
|
return media
|
||||||
})
|
})
|
||||||
|
version.firstGallery = version.gallery.slice(0, 5)
|
||||||
|
version.secondGallery = version.gallery.slice(5)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -45,54 +45,75 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{% if data.gallery|length > 0 %}
|
<div class="media-mosaic-container">
|
||||||
<div class="media-mosaic mosaic-{{ data.gallery|length }}">
|
{% if data.firstGallery|length > 0 %}
|
||||||
{% for media in data.gallery %}
|
<div class="media-mosaic mosaic-{{ data.firstGallery|length }}">
|
||||||
<div
|
{% for media in data.firstGallery %}
|
||||||
class="media-container"
|
|
||||||
data-video="{{ media.isVideo }}"
|
|
||||||
data-location="{{ media.location }}"
|
|
||||||
onclick="openModal({{ loop.index - 1 }})">
|
|
||||||
<div
|
<div
|
||||||
class="media {% if media.isVideo %}media-video-bg{% endif %}"
|
class="media-container"
|
||||||
{% if not media.isVideo %}style="background-image: url({{ media.location }})"{% endif %}></div>
|
data-video="{{ media.isVideo }}"
|
||||||
{% if media.isVideo %}
|
data-location="{{ media.location }}"
|
||||||
<div class="media-overlay">
|
onclick="openModal({{ loop.index - 1 }})">
|
||||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
<div
|
||||||
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path>
|
class="media {% if media.isVideo %}media-video-bg{% endif %}"
|
||||||
</svg>
|
{% if not media.isVideo %}style="background-image: url({{ media.location }})"{% endif %}></div>
|
||||||
|
{% if media.isVideo %}
|
||||||
|
<div class="media-overlay">
|
||||||
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
<div class="second-media-gallery" style="display: none;">
|
||||||
</div>
|
{% for media in data.secondGallery %}
|
||||||
<div class="media-modal-container" id="media-modal">
|
<div
|
||||||
<div class="media-modal">
|
class="media-container"
|
||||||
<div class="media-modal-content" id="media-modal-content">
|
data-video="{{ media.isVideo }}"
|
||||||
</div>
|
data-location="{{ media.location }}">
|
||||||
<div class="media-close" onclick="closeModal()">
|
|
||||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
||||||
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="media-modal-container" id="media-modal">
|
||||||
|
<div class="media-modal">
|
||||||
|
<div class="media-modal-content" id="media-modal-content">
|
||||||
|
</div>
|
||||||
|
<div class="media-close" onclick="closeModal()">
|
||||||
|
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id="media-nav-left"
|
id="media-nav-left"
|
||||||
class="media-nav-left media-nav">
|
class="media-nav-left media-nav">
|
||||||
<div class="media-nav-btn">
|
<div class="media-nav-btn">
|
||||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="media-nav-right"
|
||||||
|
class="media-nav-right media-nav">
|
||||||
|
<div class="media-nav-btn">
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
{% endif %}
|
||||||
id="media-nav-right"
|
{% if data.secondGallery|length == 1 %}
|
||||||
class="media-nav-right media-nav">
|
<div class="media-gallery-extra-count">
|
||||||
<div class="media-nav-btn">
|
<a onclick="openModal('extra')">Voir plus ({{ data.secondGallery|length }} photo restante)</a>
|
||||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if data.secondGallery|length > 1 %}
|
||||||
|
<div class="media-gallery-extra-count">
|
||||||
|
<a onclick="openModal('extra')">Voir plus ({{ data.secondGallery|length }} photos restantes)</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{# {% if data.descriptionLong|length > 0 %} #}
|
{# {% if data.descriptionLong|length > 0 %} #}
|
||||||
<section>
|
<section>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue