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

added a functional (small) up button in the viewer, all works

Browse Source
This commit is contained in:
Damien De Paoli
2025-10-11 09:19:51 +11:00
parent 6419e20d7e
commit 346defde8b
3 changed files with 48 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
internal/icons.svg
View File

@@ -208,4 +208,7 @@
<path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
<path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
</svg>
<svg id="back" viewBox="0 0 16 16">
<path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

16
internal/js/files_support.js
View File

@@ -580,7 +580,7 @@ function getPage(pageNumber, successCallback, viewingIdx=0)
dataType: 'json',
success: function(res) {
document.entries=res;
successCallback(res,viewingIdx);
successCallback(res,viewingIdx)
resetNextPrevButtons()
// if search, disable folders
if( OPT.search_term )
@@ -710,7 +710,6 @@ function changeOPT(successCallback) {
// put data back into booleans, ints, etc
OPT.folders=( OPT.folders == 'True' )
OPT.how_many=parseInt(OPT.how_many)
console.log('OPT.size='+OPT.size)
$('.how_many_text').html( `&nbsp;${OPT.how_many} files&nbsp;` )
OPT.root_eid=parseInt(OPT.root_eid)
OPT.size=parseInt(OPT.size)
@@ -924,3 +923,16 @@ $.contextMenu({
};
}
});
// quick function that allows us to go out of the viewer and back, the viewercomes from files_ip/sp
// so just redraw the page with drawPageOfFigures() as we have all the data
function goOutOfViewer()
{
// if this returns -1, we have used arrows to go onto a new page(s)
if( getPageNumberForId( $('#figures').find('.figure').first().prop('id') ) == -1 )
drawPageOfFigures()
// hide viewer div, then show files_div
$('#viewer_div').addClass('d-none')
$('#files_div').removeClass('d-none')
}

50
templates/files.html
View File

@@ -117,16 +117,22 @@
<div id="viewer_div" class="d-none">
<div id="viewer" class="container-fluid">
<div class="row">
<button title="Show previous image" class="col-auto btn btn-outline-info px-2"
style="padding: 10%" id="la"
onClick="
getPreviousEntry()
setDisabledForViewingNextPrevBttons()
ViewImageOrVideo()
">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
</button>
<!-- Left Buttons Column -->
<div class="col-auto d-flex flex-column">
<!-- Up Button (Small) -->
<button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="/internal/icons.svg#back"></use>
</svg>
</button>
<!-- Left Button (large/flex-grow-1) -->
<button title="Show previous image" class="btn btn-outline-info px-2 flex-grow-1"
style="padding: 10%" id="la"
onClick="getPreviousEntry(); setDisabledForViewingNextPrevBttons(); ViewImageOrVideo()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#prev"/></svg>
</button>
</div>
<figure class="col col-auto border border-info rounded m-0 p-1" id="figure">
<canvas id="canvas"></canvas>
<img id="throbber" src="{{url_for('internal', filename='throbber.gif')}}" style="display:none;">
@@ -146,15 +152,21 @@
<figcaption id="vid-cap" class="figure-caption text-center text-wrap text-break">
<span id="fname_v"></span></figcaption>
</div>
<button title="Show next image" class="col-auto btn btn-outline-info px-2" style="padding: 10%" id="ra"
onClick="
getNextEntry()
setDisabledForViewingNextPrevBttons()
ViewImageOrVideo()
">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
</button>
<!-- Right-hand Buttons Column -->
<div class="col-auto d-flex flex-column">
<!-- Up Button (Small) -->
<button title="Back to list" class="btn btn-outline-info btn-sm p-1 mb-1" onclick="goOutOfViewer()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="/internal/icons.svg#back"></use>
</svg>
</button>
<!-- Right Button (large/flex-grow-1) -->
<button title="Show next image" class="btn btn-outline-info px-2 flex-grow-1" style="padding: 10%" id="ra"
onClick="getNextEntry(); setDisabledForViewingNextPrevBttons(); ViewImageOrVideo()">
<svg width="16" height="16" fill="currentColor">
<use xlink:href="{{url_for('internal', filename='icons.svg')}}#next"/></svg>
</button>
</div>
</div class="row">
<div class="row">
{# this whole div, just takes up the same space as the left button and is hidden for alignment only #}