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

fix up selections to work with ctrl/shift and right-click -- its a bit clunky but works, redid numbering to make that work and condensed down to 1 common code block for context menu for figures and dirs now

Browse Source
This commit is contained in:
Damien De Paoli
2021-07-06 17:40:53 +10:00
parent 95303fafac
commit 3c56cac1ef
1 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
templates/files.html
View File

@@ -121,7 +121,7 @@
{# rare event of empty folder, still need to show back button #}
{% if folders and entry_data|length == 0 %}
{% if cwd != root %}
<figure class="px-1 dir" dir="{{cwd|ParentPath}}">
<figure class="px-1 dir entry" ecnt="1" dir="{{cwd|ParentPath}}">
<span style="font-size:{{(size|int-22)/2}}" 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>
@@ -139,7 +139,7 @@
{% for obj in entry_data %}
{% if loop.index==1 and folders %}
{% if cwd != root %}
<figure class="px-1 dir" dir="{{cwd|ParentPath}}">
<figure class="px-1 dir entry" ecnt="{{loop.index}}" dir="{{cwd|ParentPath}}">
<span style="font-size:{{(size|int-22)/2}}" 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>
@@ -187,7 +187,7 @@
{% endif %}
{% if obj.type.name != "Directory" %}
{% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
<figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}">
<figure id="{{obj.id}}" ecnt="{{loop.index}}" class="figure entry mx-1" path_type="{{obj.in_dir.in_path.type.name}}" size="{{obj.file_details.size_mb}}" hash="{{obj.file_details.hash}}" in_dir="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" pretty_date="{{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}}">
{% if obj.type.name=="Image" %}
<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" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
@@ -222,7 +222,7 @@
{% endif %}
{# if this dir is the toplevel of the cwd, show the folder icon #}
{% if dirname| TopLevelFolderOf(cwd) %}
<figure class="px-1 dir" id={{obj.id}} dir="{{dirname}}">
<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>
<figcaption class="figure-caption text-center text-wrap text-break">{{obj.name}}</figcaption>
</figure class="figure">
@@ -404,19 +404,25 @@ function DoSel(e, el)
}
if( e.shiftKey )
{
st=Number($('.highlight').first().attr('img'))
end=Number($('.highlight').last().attr('img'))
clicked=Number($(el).attr('img'))
st=Number($('.highlight').first().attr('ecnt'))
end=Number($('.highlight').last().attr('ecnt'))
clicked=Number($(el).attr('ecnt'))
if( ! folders )
{
st -= 1
end -= 1
clicked -= 1
}
// if we shift-click first element, then st/end are NaN, so just highlightthe one clicked
if( isNaN(st) )
{
$('.figure').slice( clicked, clicked+1 ).addClass('highlight')
$('.entry').slice( clicked, clicked+1 ).addClass('highlight')
return
}
if( clicked > end )
$('.figure').slice( end, clicked+1 ).addClass('highlight')
$('.entry').slice( end, clicked+1 ).addClass('highlight')
else
$('.figure').slice( clicked, st ).addClass('highlight')
$('.entry').slice( clicked, st ).addClass('highlight')
return
}
$('.highlight').removeClass('highlight')
@@ -435,6 +441,24 @@ function SetButtonState() {
}
}
function FiguresOrDirsOrBoth() {
var figure=false
var dir=false
$('.highlight').each(function( index ) {
if( $(this).hasClass('figure') ) {
figure=true
}
if( $(this).hasClass('dir') ) {
dir=true
}
} )
if( figure & ! dir )
return "figure"
if( ! figure & dir )
return "dir"
return "both"
}
function SelContainsBinAndNotBin() {
var bin=false
var not_bin=false
@@ -465,45 +489,25 @@ $('.figure').click( function(e) { DoSel(e, this ); SetButtonState(); return fals
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') ; SetButtonState() });
// different context menu on directory
$.contextMenu({
selector: '.dir',
build: function($triggerElement, e){
if( NoSel() )
DoSel(e, e.currentTarget )
item_list = {
ai: {
name: "Scan file for faces",
items: {
{% for p in people %}
"ai-{{p.tag}}": {"name": "{{p.tag}}"},
{% endfor %}
"ai-all": {"name": "all"},
}
}
}
return {
callback: function( key, options) {
if( key.startsWith("ai")) { RunAIOnSeln(key) }
},
items: item_list
};
}
});
// different context menu on files
$.contextMenu({
selector: '.figure',
selector: '.entry',
build: function($triggerElement, e){
if( NoSel() )
// when right-clicking & no selection add one OR deal with ctrl/shift right-lick as it always changes seln
if( NoSel() || e.ctrlKey || e.shiftKey )
DoSel(e, e.currentTarget )
if( FiguresOrDirsOrBoth() == "figure" )
item_list = {
details: { name: "Details..." },
view: { name: "View File" },
sep: "---",
move: { name: "Move selected file(s) to new storage folder" },
sep2: "---",
ai: {
sep2: "---" }
else
item_list = {}
item_list['ai'] = {
name: "Scan file for faces",
items: {
{% for p in people %}
@@ -512,7 +516,7 @@ $.contextMenu({
"ai-all": {"name": "all"},
}
}
}
if( SelContainsBinAndNotBin() ) {
item_list['both']= { name: 'Cannot delete and restore at same time', disabled: true }
} else {