nineskeletor/templates/File/view.html.twig

127 lines
3.5 KiB
Twig

{% extends 'base.html.twig' %}
{% block localstyle %}
<style>
body {
background-color: var(--colorbgbodydark);
}
img {
margin:auto;
display: block;
}
#page {
padding: 0px !important;
}
h3, #filetitle {
margin:0px;
text-align:center;
}
h3, a, a:hover {
color: var(--colorfttitledark);
}
#fileaction {
margin-top: -10px;
}
#bigright{
position:absolute;
top:0px;
right:0px;
width:45%;
height:100%;
line-height:100%;
text-align: right;
vertical-align: middle;
padding:5px;
}
#bigleft{
position:absolute;
top:0px;
left:0px;
width:45%;
height:100%;
vertical-align: middle;
padding:5px;
}
</style>
{% endblock %}
{% block body %}
<div id="filetitle">
<h3>{{basename}}</h3>
<div id="fileaction">
<a href="{{ path("app_"~access~"_file_download",{category:category, id:id, file:file, usage:usage})}}"><i class="fa-solid fa-download"></i></a>
{%if canadd %}
&nbsp;&nbsp;&nbsp;<a href="{{ path("app_"~access~"_file_delete",{category:category, id:id, file:file, usage:usage, navigation: navigation})}}" data-method="delete" data-confirm="Êtes-vous sûr de vouloir supprimer cet enregistrement ?"><i class="fa-solid fa-trash"></i></a>
{%endif%}
</div>
</div>
{% if navigation %}
{% if not next is empty %}
<a id="bigleft" href="{{ path("app_"~access~"_file_view",{category:category, id:id, file:next.Key, usage:usage, navigation: navigation})}}"><i class="fas fa-chevron-left fa-3x"></i></a>
{% endif %}
{% if not prev is empty %}
<a id="bigright" href="{{ path("app_"~access~"_file_view",{category:category, id:id, file:prev.Key, usage:usage, navigation: navigation})}}"><i class="fas fa-chevron-right fa-3x"></i></a>
{% endif %}
{% endif %}
{% if isimage %}
<img id="fileimage" style="display:none" src="{{path("app_"~access~"_file_show",{category:category, id:id, file:file, usage:usage})}}">
{%else%}
<iframe src="{{path("app_"~access~"_file_show",{category:category, id:id, file:file, usage:usage})}}" style="width:100%;height:600px"></iframe>
{%endif%}
{% endblock %}
{% block localscript %}
<script>
function resize() {
height=$(window).height()-($("#filetitle").height() * 2);
$("#fileimage").css({height:height,width:'auto'});
width=$(window).width()-90;
console.log(width);
if($("#fileimage").width()>width) {
$("#fileimage").css({width:width,height:'auto'});
$("#fileimage").css("margin-top",(height/2)-($("#fileimage").height()/2)+"px");
height=$(window).height();
}
height=$(window).height()-($("#filetitle").height() * 2);
$("#bigright").css({height:height,"line-height":height+"px",top:$("#filetitle").height()})
$("#bigleft").css({height:height,"line-height":height+"px",top:$("#filetitle").height()})
$("#fileimage").show();
}
$('#fileimage').imagesLoaded(function() {
resize();
});
$("body").keydown(function(e) {
if(e.keyCode == 37) { // left
var href = $('#bigleft').attr('href');
if(href!=null) window.location.href = href;
}
else if(e.keyCode == 39) {
var href = $('#bigright').attr('href');
if(href!=null) window.location.href = href;
}
});
$(window).resize(function() {
resize();
});
</script>
{% endblock %}