switched over to smarter context menu, hooked up delete button to ajax call, but not context menu yet - nor undelete. Made contextmenu detect path of object and del/undel appropriately, which also fixes a few quirks/bugs with no data in DB and trying to find the path of the first/non-existant entry
This commit is contained in:
@@ -1,14 +1,5 @@
|
||||
{% 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>
|
||||
<a id="dd_undel" class="dropdown-item" href="#">UnDelete Selected file(s)</a>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<form id="main_form" method="POST"">
|
||||
<input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
|
||||
@@ -163,7 +154,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" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" details="{{obj.name}} (Date: {{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}})">
|
||||
<figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" path_type="{{obj.in_dir.in_path.type.name}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" details="{{obj.name}} (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>
|
||||
@@ -226,8 +217,17 @@ function GetSelnAsDiv()
|
||||
return '<div class="row col-lg-12">'+seln+'</div>'
|
||||
}
|
||||
|
||||
function GetSelnAsData()
|
||||
{
|
||||
to_del=''
|
||||
$('.highlight').each(function( index ) { to_del+='&eid-'+index+'='+$(this).attr('id') } )
|
||||
return to_del
|
||||
}
|
||||
|
||||
function DelDBox()
|
||||
{
|
||||
to_del = GetSelnAsData()
|
||||
console.log(to_del)
|
||||
$('#dbox-title').html('Delete Selected File(s)')
|
||||
div =`
|
||||
<div class="row col-lg-12">
|
||||
@@ -237,7 +237,9 @@ function DelDBox()
|
||||
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>
|
||||
<button onClick="$('#dbox').modal('hide'); $.ajax({
|
||||
type: 'POST', url: '/delete_files', data: to_del,
|
||||
success: function(data){ console.log('Delete File(s) succeeded - TODO: need a FE msg' ); $('#status').show(); $('#status').html('TEST'); return false; } })" class="btn btn-outline-danger col-lg-2">Ok</button>
|
||||
</div>
|
||||
`
|
||||
$('#dbox-content').html(div)
|
||||
@@ -266,7 +268,7 @@ function MoveDBox()
|
||||
<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>
|
||||
<button onClick="$('#dbox').modal('hide'); console.log("TODO: should do the move one day"); return false;" class="btn btn-outline-primary col-lg-2">Ok</button>
|
||||
</div>
|
||||
</form>
|
||||
`
|
||||
@@ -316,79 +318,41 @@ function DoSel(e, el)
|
||||
$('.figure').click( function(e) { DoSel(e, this ); return false; });
|
||||
$(document).on('click', function(e) { $('.highlight').removeClass('highlight') });
|
||||
|
||||
(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;
|
||||
$.contextMenu({
|
||||
selector: '.figure',
|
||||
build: function($triggerElement, e){
|
||||
if (e.currentTarget.getAttribute('path_type') == 'Bin' ) {
|
||||
item_list = {
|
||||
details: { name: "Details..." },
|
||||
view: { name: "View File" },
|
||||
sep: "---",
|
||||
move: { name: "Move selected file(s) to new storage folder" },
|
||||
undel: { name: "Undelete Selected file(s)" }
|
||||
}
|
||||
} else {
|
||||
item_list = {
|
||||
details: { name: "Details..." },
|
||||
view: { name: "View File" },
|
||||
sep: "---",
|
||||
move: { name: "Move selected file(s) to new storage folder" },
|
||||
del: { name: "Delete Selected file(s)" }
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
})(jQuery, window);
|
||||
|
||||
{# for now if we have no data, dont peak inside the first element to see if we are viewing the Bin folder and then swich the context menu #}
|
||||
{% if entry_data|length > 0 %}
|
||||
if( "{{entry_data[0].in_dir.in_path.type.name}}" == "Bin" ) {
|
||||
$('#dd_del').hide()
|
||||
} else {
|
||||
$('#dd_undel').hide()
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
$(".figure").contextMenu({
|
||||
menuSelector: "#contextMenu",
|
||||
menuSelected: function (invokedOn, selectedMenu) {
|
||||
var msg = "You selected the menu item '" + selectedMenu.text() +
|
||||
"' on the file id: " + $(invokedOn).parent().parent().parent().attr('id')
|
||||
console.log(msg);
|
||||
if ( "View File" == selectedMenu.text() ) {
|
||||
document.location.href = $(invokedOn).parent().attr('href')
|
||||
}
|
||||
return {
|
||||
callback: function( key, options) {
|
||||
console.log( $(this).attr('id') )
|
||||
console.log( $(this).attr('path_type') )
|
||||
if( key == "view" ) {
|
||||
document.location.href = $(this).find('a').attr('href');
|
||||
}
|
||||
},
|
||||
items: item_list
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
if( {{offset}} == 0 )
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user