templates: display thumbnail of attached images, open overlay popup on click (fixes #24566)

This commit is contained in:
Benjamin Dauvergne 2018-07-11 15:11:25 +02:00
parent 10c8b89070
commit 019dfbd590
1 changed files with 33 additions and 2 deletions

View File

@ -20,12 +20,43 @@
<p>Demande en cours de traitement par {{ validation_request.taken_by }} depuis le {{ validation_request.taken }}</p>
{% endif %}
<script>
$('body').on('click', 'img.popup-image', function (event) {
var target = event.target;
var src = target.src;
var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var ratio_width = target.width / (vw - 100);
var ratio_height = target.height / (vh - 100);
var ratio = Math.max(ratio_width, ratio_height);
var new_width = target.width / ratio;
var new_height = target.height / ratio;
var $overlay = $('<img src="' + src +'"/>');
$overlay.css({
'position': 'fixed',
'height': '' + new_height + 'px',
'width': '' + new_width + 'px',
'top': 0,
'left': 0,
'padding-left': ((vw - new_width) / 2) + 'px',
'padding-right': ((vw - new_width) / 2) + 'px',
'padding-top': ((vh - new_height) / 2) + 'px',
'padding-bottom': ((vh - new_height) / 2) + 'px',
'z-index': 999,
})
$overlay.appendTo($('body'));
$overlay.on('click', function () {
$overlay.remove();
});
})
</script>
<div>
{% if attachment_urls %}
<h4>Pièces jointes</h4>
<ul>
<p>
{% for attachment_url in attachment_urls %}
<li><a target="_blank" href="{{ attachment_url }}">Pièce jointe {{ forloop.counter }}</a></li>
<img class="popup-image" src="{{ attachment_url }}" tile="Pièce jointe {{ forloop.counter }}" style="max-height: 20vmin; border: 1px solid black; padding: 1ex"/>
{% endfor %}
</ul>
{% endif %}