129 lines
3.7 KiB
Plaintext
129 lines
3.7 KiB
Plaintext
#theatre-media.d-flex.justify-content-center.align-items-center.bg-dark
|
|
img(src="{{ node.picture.thumbnail('h', api=api) }}", onmousedown="return false")
|
|
|
|
ul#theatre-tools
|
|
li.theatre-tool-resize(title="Toggle Normal Size")
|
|
span
|
|
i.pi-resize-full
|
|
| {% if node.file and node.file.link %}
|
|
li.download
|
|
a(href="{{ node.file.link }}",
|
|
title="Download the original file",
|
|
download="{{ node.file.filename }}")
|
|
i.pi-download
|
|
| {% else %}
|
|
li.download.disabled
|
|
a(href="{{ url_for('users.login') }}",
|
|
title="Sign in to download the original file")
|
|
i.pi-download
|
|
| {% endif %}
|
|
|
|
#theatre-info.bg-white.h-100
|
|
h5.p-3 {{ node.name }}
|
|
small.d-flex.text-secondary.pl-3
|
|
span.font-weight-bold {{ node.user.full_name }}
|
|
span.px-3 {{ node._created | pretty_date_time }}
|
|
|
|
ul.theatre-info-details.border-bottom.mb-3.p-3.list-unstyled
|
|
li
|
|
span Type
|
|
span {{ node.file.content_type }}
|
|
| {% if node.file.width %}
|
|
li
|
|
span Dimensions
|
|
span {{ node.file.width }} <small>x</small> {{ node.file.height }}
|
|
| {% endif %}
|
|
li
|
|
span Size
|
|
span {{ node.file.length | filesizeformat }}
|
|
| {% if node.short_link %}
|
|
li
|
|
span Share link
|
|
a(href="{{ node.short_link }}") {{ node.short_link }}
|
|
| {% endif %}
|
|
|
|
.mx-3
|
|
comments-tree#comments-embed(
|
|
parent-id="{{ node._id }}"
|
|
)
|
|
|
|
include ../_scripts
|
|
|
|
script.
|
|
$(function () {
|
|
|
|
var file_width = '{{ node.file.width }}';
|
|
var file_height = '{{ node.file.height }}';
|
|
var theatre_media = document.getElementById('theatre-media');
|
|
var $theatre_media = $(theatre_media);
|
|
|
|
function canZoom() {
|
|
// If there is no width/height defined, let's just let it zoom.
|
|
// It might just be a non-image asset, like a file.
|
|
return file_width == 'None' ||
|
|
theatre_media.scrollWidth < file_width ||
|
|
theatre_media.scrollHeight < file_height;
|
|
}
|
|
|
|
// TODO: update this whenever the screen resizes.
|
|
if (canZoom()) $theatre_media.addClass('zoomed-out');
|
|
|
|
function theatreZoom() {
|
|
var started_zoomed_in = $theatre_media.hasClass('zoomed-in');
|
|
|
|
// See if we need to zoom in at all. Zooming out is always allowed.
|
|
if (!started_zoomed_in && !canZoom()) {
|
|
$theatre_media.removeClass('zoomed-out');
|
|
return;
|
|
}
|
|
|
|
// Use add/removeClass to ensure there is always exactly one of zoomed-{in,out}.
|
|
// If we were to use toggleClass() they could both be applied when we started
|
|
// without zoomed-out class.
|
|
if (started_zoomed_in) {
|
|
$theatre_media.removeClass('zoomed-in');
|
|
$theatre_media.addClass('zoomed-out');
|
|
} else {
|
|
$theatre_media.addClass('zoomed-in');
|
|
$theatre_media.removeClass('zoomed-out');
|
|
}
|
|
|
|
// Style toolbar button
|
|
$('ul#theatre-tools li.theatre-tool-resize').toggleClass('active');
|
|
}
|
|
|
|
$('ul#theatre-tools li.theatre-tool-resize').on('click', function (e) {
|
|
theatreZoom();
|
|
});
|
|
|
|
$('.js-toggle-info').on('click', function (e) {
|
|
e.preventDefault();
|
|
$('#theatre-container').toggleClass('with-info');
|
|
});
|
|
|
|
$("#theatre-media img").on('click', function (e) {
|
|
var $parent = $(this).parent();
|
|
var mouse_x = e.pageX;
|
|
var mouse_y = e.pageY;
|
|
|
|
// Compute relative position before zooming in.
|
|
var pre_width = e.target.clientWidth;
|
|
var rel_x = e.offsetX / pre_width;
|
|
var rel_y = e.offsetY / e.target.clientHeight;
|
|
|
|
theatreZoom();
|
|
|
|
var post_width = e.target.clientWidth;
|
|
|
|
if (post_width > pre_width) {
|
|
// We zoomed in, scroll such that the target position is under the mouse.
|
|
var target_x = Math.round(rel_x * post_width);
|
|
var target_y = Math.round(rel_y * e.target.clientHeight);
|
|
|
|
$parent
|
|
.scrollLeft(target_x - mouse_x + e.target.parentElement.parentElement.offsetLeft)
|
|
.scrollTop(target_y - mouse_y + e.target.parentElement.parentElement.offsetTop);
|
|
}
|
|
});
|
|
});
|