pagesassos/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

feat(PublicPage): Extra pictures in media gallery

Browse source
This commit is contained in:
Matthieu Bessat 2020-08-27 12:56:21 +02:00
parent 42232c8df9
commit 2df9ff8f48
4 changed files with 89 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/development/scripts/organization.js
View file

@ -94,6 +94,10 @@ let loadMedias = () => {
loadMedias()
let openModal = (index) => {
if (index === 'extra') {
index = 5
}
mediaModal.style.visibility = 'visible'
mediaModal.style.opacity = 1

23
assets/development/styles/organization.css
View file

@ -109,6 +109,10 @@
********************************************************************************/
.media-mosaic-container {
position: relative;
}
.media-mosaic {
margin-top: .75em;
width: 100%;
@ -317,6 +321,25 @@
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;
}
/* *****************************************************************************

4
src/controllers/PublicController.ts
View file

@ -200,10 +200,12 @@ export default class PublicController {
* Parse 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
return media
})
version.firstGallery = version.gallery.slice(0, 5)
version.secondGallery = version.gallery.slice(5)
}
/**

97
views/organization.twig
View file

@ -45,54 +45,75 @@
</div>
</div>
<div class="container">
{% if data.gallery|length > 0 %}
<div class="media-mosaic mosaic-{{ data.gallery|length }}">
{% for media in data.gallery %}
<div
class="media-container"
data-video="{{ media.isVideo }}"
data-location="{{ media.location }}"
onclick="openModal({{ loop.index - 1 }})">
<div class="media-mosaic-container">
{% if data.firstGallery|length > 0 %}
<div class="media-mosaic mosaic-{{ data.firstGallery|length }}">
{% for media in data.firstGallery %}
<div
class="media {% if media.isVideo %}media-video-bg{% endif %}"
{% 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>
class="media-container"
data-video="{{ media.isVideo }}"
data-location="{{ media.location }}"
onclick="openModal({{ loop.index - 1 }})">
<div
class="media {% if media.isVideo %}media-video-bg{% endif %}"
{% 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>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</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 class="second-media-gallery" style="display: none;">
{% for media in data.secondGallery %}
<div
class="media-container"
data-video="{{ media.isVideo }}"
data-location="{{ media.location }}">
</div>
{% endfor %}
</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
id="media-nav-left"
class="media-nav-left media-nav">
<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>
<div
id="media-nav-left"
class="media-nav-left media-nav">
<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>
</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
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>
{% endif %}
{% if data.secondGallery|length == 1 %}
<div class="media-gallery-extra-count">
<a onclick="openModal('extra')">Voir plus ({{ data.secondGallery|length }} photo restante)</a>
</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>
{% endif %}
{# {% if data.descriptionLong|length > 0 %} #}
<section>