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

using sm-txt to shrink action buttons at top of page, created basic move/del dbox to be more or less partially functional, without doing anything real

Browse Source
This commit is contained in:
Damien De Paoli
2021-02-07 20:44:55 +11:00
parent ca7064dd92
commit 893d48c8d5
1 changed files with 147 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
templates/files.html
View File

@@ -1,24 +1,35 @@
{% extends "base.html" %}
{% block main_content %}
<div id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
<div id="dd_file_details" class="dropdown-header" href="#">Details...</div>
<a class="dropdown-item" href="#">View File</a>
<div class="dropdown-divider"></div>
<a id="dd_move" class="dropdown-item" href="#">Move selected file(s) to new storage folder</a>
<a id="dd_del" class="dropdown-item" href="#">Delete Selected file(s)</a>
</div>
<div class="container-fluid">
<form method="POST">
<div class="row">
<div class="input-group col">
<div class="input-group col-lg-4">
{{CreateSelect( "noo", noo, ["Oldest", "Newest"], "$('#offset').val(0)")|safe }}
{{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
<span style="border:0" class="btn btn-outline-info disabled">grouped by:</span>
<span style="border:0" class="sm-txt my-auto h-100 btn btn-outline-info disabled">grouped by:</span>
{{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }}
</div class="input-group">
<div class="col my-auto d-flex justify-content-center">
<div class="col my-auto d-flex justify-content-end">
{% set fd=entry_data[0].file_details[0] %}
<button id="prev" name="prev" class="btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
<span class="h-100 my-auto">&nbsp;{{how_many}} files&nbsp;</span>
<button id="next" name="next" class="btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></i></button>
<button id="prev" name="prev" class="sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
<span class="sm-txt h-100 my-auto">&nbsp;{{how_many}} files&nbsp;</span>
<button id="next" name="next" class="sm-txt btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></button>
</div>
<div class="input-group col justify-content-end">
<div class="col my-auto">
<button id="move" name="move" class="sm-txt btn btn-primary ml-4" onClick="MoveDBox(); return false;"><i class="fas fa-folder-plus"></i></button>
<button id="del" name="del" class="sm-txt btn btn-danger mx-1" onClick="DelDBox(); return false;"> <i class="far fa-trash-alt"></i> </button>
</div>
<div class="input-group col-lg-3 justify-content-end">
<div class="input-group-prepend">
<button style="width:98%" class="btn btn-outline-info disabled" disabled>Size:</button>
<button style="width:98%" class="sm-txt btn btn-outline-info disabled" disabled>Size:</button>
</div>
{% if size == "64" %}
{% set bt="btn-info" %}
@@ -26,7 +37,7 @@
{% set bt="btn-outline-info" %}
{% endif %}
<div class="input-group-append">
<button id="64" class="sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
<button id="64" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,64); return false;">XS</button>
</div>
{% if size == "96" %}
{% set bt="btn-info" %}
@@ -34,7 +45,7 @@
{% set bt="btn-outline-info" %}
{% endif %}
<div class="input-group-append">
<button id="96" class="sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
<button id="96" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,96); return false;">S</button>
</div>
{% if size == "128" %}
{% set bt="btn-info" %}
@@ -42,7 +53,7 @@
{% set bt="btn-outline-info" %}
{% endif %}
<div class="input-group-append">
<button id="128" class="sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
<button id="128" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,128); return false;">M</button>
</div>
{% if size == "192" %}
{% set bt="btn-info" %}
@@ -50,7 +61,7 @@
{% set bt="btn-outline-info" %}
{% endif %}
<div class="input-group-append">
<button id="192" class="sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
<button id="192" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,192); return false;">L</button>
</div>
{% if size == "256" %}
{% set bt="btn-info" %}
@@ -58,7 +69,7 @@
{% set bt="btn-outline-info" %}
{% endif %}
<div class="input-group-append">
<button id="256" class="sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
<button id="256" class="sm-txt sz-but btn {{bt}}" onClick="ChangeSize(this,256); return false;">XL</button>
</div>
</div class="input-group">
</div class="form-row">
@@ -100,7 +111,7 @@
{% endif %}
{% endif %}
{% if obj.type.name != "Directory" %}
<figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1">
<figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" fname="{{obj.name}}" date="{{obj.file_details[0].year}}{{"%02d" % obj.file_details[0].month}}{{"%02d" % obj.file_details[0].day}}" details="{{obj.name}} (Date: {{obj.file_details[0].day}}/{{obj.file_details[0].month}}/{{obj.file_details[0].year}})">
{% if obj.type.name=="Image" %}
<a href="{{obj.in_dir[0].path_prefix}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details[0].thumbnail}}"></img></a>
{% elif obj.type.name == "Video" %}
@@ -122,6 +133,64 @@
{% endblock main_content %}
{% block script_content %}
<script>
function GetSelnAsDiv()
{
seln=''
$('.highlight').each(function( index ) {
seln+='<div fname="' + $(this).attr('fname') + '" date="' + $(this).attr('date') +
'" class="px-1 mx-1">' + $(this).children().html() + '</div>'
} )
return '<div class="row col-lg-12">'+seln+'</div>'
}
function DelDBox()
{
$('#dbox-title').html('Delete Selected File(s)')
div =`
<div class="row col-lg-12">
<p class="col">Delete the following files?</p>
</div>`
div+=GetSelnAsDiv()
div+=`
<div class="row col-lg-12">
<button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-lg-2">Cancel</button>
<button onClick="$('#dbox').modal('hide');alert('not yet');" class="btn btn-outline-danger col-lg-2">Ok</button>
</div>
`
$('#dbox-content').html(div)
$('#dbox').modal('show')
}
function MoveDBox()
{
$('#dbox-title').html('Move Selected File(s) to new directory in Storage Path')
div =`
<div class="form-row col-lg-12">
<p class="col">Moving the following files?</p>
</div>`
div+=GetSelnAsDiv()
dt=$('.highlight').first().attr('date')
div+=`
<form class="form form-control-inline col-lg-12" method="POST" action="/move_files">
<div class="input-group col-lg-12">
<input type="text" name="prefix" class="input-group-prepend col-lg-2 form-control-plaintext text-right" value="To:
`
div+=dt+"-"
div+=`"></input>
<input type="text" name="suffix" class="col-lg-3 form-control" placeholder="name"> </input>
</div>
<br>
<div class="form-row col-lg-12">
<button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-lg-1 col-lg-2">Cancel</button>
<button onClick="$('#dbox').modal('hide'); console.log("should do the move one day"); return false;" class="btn btn-outline-primary col-lg-2">Ok</button>
</div>
</form>
`
$('#dbox-content').html(div)
$('#dbox').modal('show')
}
function ChangeSize(clicked_button,sz)
{
$('.sz-but.btn-info').removeClass('btn-info').addClass('btn-outline-info')
@@ -158,8 +227,70 @@ function DoSel(e, el)
}
$('.figure').click( function(e) { DoSel(e, this ); return false; });
$('.figure').contextmenu( function(e) { console.log('do own context-menu'); return false; });
(function ($, window) {
$.fn.contextMenu = function (settings) {
return this.each(function () {
// Open context menu
$(this).on("contextmenu", function (e) {
// return native menu if pressing control
if (e.ctrlKey) return;
fd=$(e.target).closest(".figure").attr('details')
$('#dd_file_details').text(fd)
//open menu
var $menu = $(settings.menuSelector)
.data("invokedOn", $(e.target))
.show()
.css({
position: "absolute",
left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
top: getMenuPosition(e.clientY, 'height', 'scrollTop')
})
.off('click')
.on('click', 'a', function (e) {
$menu.hide();
var $invokedOn = $menu.data("invokedOn");
var $selectedMenu = $(e.target);
settings.menuSelected.call(this, $invokedOn, $selectedMenu);
});
return false;
});
//make sure menu closes on any click
$('body').click(function () {
$(settings.menuSelector).hide();
});
});
function getMenuPosition(mouse, direction, scrollDir) {
var win = $(window)[direction](),
scroll = $(window)[scrollDir](),
menu = $(settings.menuSelector)[direction](),
position = mouse + scroll;
// opening menu would pass the side of the page
if (mouse + menu > win && menu < mouse)
position -= menu;
return position;
}
};
})(jQuery, window);
$(".figure").contextMenu({
menuSelector: "#contextMenu",
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the file id: " + $(invokedOn).parent().parent().attr('id')
console.log(msg);
if ( "View File" == selectedMenu.text() ) {
document.location.href = $(invokedOn).parent().attr('href')
}
}
});
$(document).ready(function() {
if( {{offset}} == 0 )
@@ -168,7 +299,5 @@ $(document).ready(function() {
$('#prev').prop('disabled', true)
}
} )
</script>
{% endblock script_content %}