ddp/photoassistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added viewnext and viewprev routes and plumbed these in to the file viewer code. Viewer code now works has a prev/next button, and handles videos

Browse Source
This commit is contained in:
Damien De Paoli
2021-07-15 20:23:02 +10:00
parent d03f5c99b0
commit f30ca16552
4 changed files with 174 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
templates/files.html
View File

@@ -111,6 +111,14 @@
<input id="offset" type="hidden" name="offset" value="{{offset}}">
<input id="size" type="hidden" name="size" value="{{size}}">
</div class="form-row">
{% set eids=namespace( str="" ) %}
{# gather all the file eids and collect them in case we go gallery mode #}
{% for obj in entry_data %}
{% if obj.type.name != "Directory" %}
{% set eids.str = eids.str + obj.id|string +"," %}
{% endif %}
{% endfor %}
<input name="eids" id="eids" type="hidden" value="{{eids.str}}">
</form>
{% set last = namespace(printed=0) %}
@@ -122,7 +130,7 @@
{% if folders and entry_data|length == 0 %}
{% if cwd != root %}
<figure class="px-1 dir entry" ecnt="1" dir="{{cwd|ParentPath}}">
<span style="font-size:{{(size|int-22)/2}}" class="fa-stack">
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
<i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
</span>
@@ -130,7 +138,7 @@
</figure class="figure">
{% else %}
{# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
<span style="font-size:{{(size|int-22)/2}}" class="mx-1 fa-stack">
<span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack">
<i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
</span>
@@ -140,7 +148,7 @@
{% if loop.index==1 and folders %}
{% if cwd != root %}
<figure class="px-1 dir entry" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}">
<span style="font-size:{{(size|int-22)/2}}" class="fa-stack">
<span style="font-size:{{(size|int-22)/2}}px" class="fa-stack">
<i style="color:grey" class="fas fa-folder fa-stack-2x"></i>
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
</span>
@@ -148,7 +156,7 @@
</figure class="figure">
{% else %}
{# create an even lighter-grey, unclickable back button - so folders dont jump around when you go into them #}
<span style="font-size:{{(size|int-22)/2}}" class="mx-1 fa-stack">
<span style="font-size:{{(size|int-22)/2}}px" class="mx-1 fa-stack">
<i style="color:lightgrey" class="fas fa-folder fa-stack-2x"></i>
<i class="fas fa-level-up-alt fa-flip-horizontal fa-stack-1x fa-inverse"></i>
</span>
@@ -193,7 +201,7 @@
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
{% if search_term is defined %}
<div style="position:absolute; bottom: 2; left: 2;">
<i style="font-size:16;background-color:black;color:white" class="fas {{LocationIcon(obj)}}"></i>
<i style="font-size:16px;background-color:black;color:white" class="fas {{LocationIcon(obj)}}"></i>
</div>
{% endif %}
</div>
@@ -201,11 +209,11 @@
<div style="position:relative; width:100%">
<a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" style="display:block" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
<div style="position:absolute; top: 2; left: 2;">
<i style="font-size:32;background-color:black;color:white" class="fas fa-film"></i>
<i style="font-size:32px;background-color:black;color:white" class="fas fa-film"></i>
</div>
{% if search_term is defined %}
<div style="position:absolute; bottom: 2; left: 2;">
<i style="font-size:16;background-color:black;color:white" class="fas {{LocationIcon(obj)}}"></i>
<i style="font-size:16px;background-color:black;color:white" class="fas {{LocationIcon(obj)}}"></i>
</div>
{% endif %}
</div>
@@ -223,7 +231,7 @@
{# if this dir is the toplevel of the cwd, show the folder icon #}
{% if dirname| TopLevelFolderOf(cwd) %}
<figure class="px-1 dir entry" id={{obj.id}} ecnt={{loop.index}} dir="{{dirname}}">
<i style="font-size:{{size|int-22}};" class="fas fa-folder"></i>
<i style="font-size:{{size|int-22}}px" class="fas fa-folder"></i>
<figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
</figure class="figure">
{% endif %}
@@ -382,12 +390,12 @@ function ChangeSize(clicked_button,sz)
{
$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
$(clicked_button).addClass('btn-info').removeClass('btn-outline-info')
$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
$('.thumb').attr( {height: sz, style: 'font-size:'+sz+'px' } )
$('#size').val(sz)
sz=sz-22
$('.fa-folder').attr( {style: 'font-size:'+sz } )
$('.fa-folder').attr( {style: 'font-size:'+sz+'px' } )
sz=sz/2
$('.fa-stack').attr( {style: 'color:grey;font-size:'+sz} )
$('.fa-stack').attr( {style: 'color:grey;font-size:'+sz+'px'} )
}
// e == event (can see if shift/ctrl held down while left-clicking
@@ -488,6 +496,13 @@ function NoSel() {
$('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return false; });
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
$('.figure').dblclick(
function() {
s='<form id="_fm" method="POST" action="/view/' + $(this).attr("id");
s+='"><input type="hidden" name="eids" value="'+$("#eids").val() + '"></form>'
$(s).appendTo('body').submit(); }
);
// different context menu on files
$.contextMenu({
@@ -529,7 +544,11 @@ $.contextMenu({
return {
callback: function( key, options) {
if( key == "details" ) { DetailsDBox() }
if( key == "view" ) { document.location.href = $(this).find('a').attr('href'); }
if( key == "view" ) {
s='<form id="_fm" method="POST" action="/view/' + $(this).attr("id");
s+='"><input type="hidden" name="eids" value="'+$("#eids").val() + '"></form>'
$(s).appendTo('body').submit();
}
if( key == "move" ) { MoveDBox() }
if( key == "del" ) { DelDBox('Delete') }
if( key == "undel" ) { DelDBox('Restore') }