From 893d48c8d5e651abf0e4040d47e4e66243312ca9 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Sun, 7 Feb 2021 20:44:55 +1100
Subject: [PATCH] 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

---
 templates/files.html | 165 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 147 insertions(+), 18 deletions(-)

diff --git a/templates/files.html b/templates/files.html
index 7a11286..e31d39f 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -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 %}