Added select all for Deleting multiple items.

ui/css/ustore.css

@@ -51,6 +51,32 @@
   min-height: 95%;
 }
 
+#MenuBar .showremoveitemsNot{
+  display: inline;
+}
+
+#MenuBar .showremoveitems{
+  display: none;
+}
+#Data .showremoveitems{
+  display: none;
+  width: auto;
+  margin-bottom: 1em;
+}
+
+#MenuBar{
+  margin: 2em 0em;
+  padding: 1em;
+  color: var(--x-ui-light-text-color);
+  background-color: var(--x-ui-outside-color);
+}
+
+#MenuBar a{
+  color: var(--x-ui-light-text-color);
+  
+}
+
+
 #content-wrap {
   min-height: 95%;
   padding-bottom: -100px;    /* Footer height */
@@ -81,8 +107,7 @@
 
 .spanwrapping{
   position: relative;
-  height: 2.2em;
-
+  height: 3.5em;
 }
 
 .DataItem span{
@@ -104,6 +129,10 @@
   vertical-align: middle;
   width: 8em;
   height: 8em;
+  border: 2px dashed #92b0b3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .DataImg img{

ui/index.html

@@ -143,10 +143,17 @@
 					  <div class="box__error">Error! <span></span>.</div>
           </form>
           
+          <div id="MenuBar">
+            <a class="showremoveitemsNot" href="javascript:selectRemoveItems();">⨯ Remove Multiple Items</a>
+            <a class="showremoveitems" href="javascript:removeSelectedItems();">[Remove Selected Items]</a>
+            <a class="showremoveitems" href="javascript:selectAll();">[Select All]</a>
+            <a class="showremoveitems" href="javascript:unselectAll();">[Close Selection]</a>
+          </div>
           
           <template id="DataItem">
             <div class="DataItem">
               <div class="spanwrapping">
+                <input data-class='multiRemovelink' class="showremoveitems" type="checkbox">
                 <span data-class='name'></span>
               </div>
               <div data-class='image' class="DataImg">
@@ -158,9 +165,10 @@
               <a data-class='eventTrigger' href='#'style="visibility: hidden;" onclick=''>↧</a>
             </div>
           </template>
-          <div id="Data">
-          </div>
-          <div style ="clear:both"></div>
+          
+        <div id="Data">
+        </div>
+        <div style ="clear:both"></div>
         </div>
         
         

ui/js/ustore.js

@@ -21,7 +21,7 @@ $(document).on('change', '#selectfolders', function(e) {
 function listFolders(folder = ""){
   $('#Folders').text("");
   $('#CurFolder').text("");
-  
+  toggleRemoveLinks(true);
   getAllFolders();
   
   if(folder != "" && folder != "." && folder != ".."){
@@ -144,6 +144,8 @@ function listData(folder = ""){
         
 		    $('[data-class=inspect]',clone).attr('href','../storage/' + fullfolder + '');
 		    $('[data-class=delete]',clone).attr('href','javascript:deleteData("' + fullfolder + '");');
+		    $('[data-class=multiRemovelink]',clone).attr('name', fullfolder );
+        
 		    $('[data-class=getLink]',clone).attr('href','javascript:copy2Clipboard("' + fullfolder + '");');
 		    $('[data-class=createSymlink]',clone).attr('href','javascript:createSymlink("' + fullfolder + '", "' + value.slice(0, - (ext.length +1)) +'");');
         
@@ -204,19 +206,71 @@ function overlayOff() {
   $('#overlaycontentsize').text("");
 }
 
+function toggleRemoveLinks(setoff = false) {
+  if(setoff || $(".showremoveitems").is(":visible")){
+    $(".showremoveitems").css("display", "none")
+    $(".showremoveitemsNot").css("display", "inline")
+  }
+  else{
+    $(".showremoveitems").css("display", "inline")
+    $(".showremoveitemsNot").css("display", "none")
+  }
+}
+
+
+function selectRemoveItems() {
+  toggleRemoveLinks() 
+}
+
+function unselectAll(){
+  $(':input','#Data')
+  .not(':button, :submit, :reset, :hidden')
+  .val('')
+  .prop('checked', false)
+  .prop('selected', false);
+  toggleRemoveLinks()
+}
+
+function selectAll(){
+  $(':input','#Data')
+  .not(':button, :submit, :reset, :hidden')
+  .val('')
+  .prop('checked', true)
+  .prop('selected', true);
+}
+
+function removeSelectedItems(){
+  var removedItems = [];
+  $("#Data input[type=checkbox]:checked").each(function(index, data){
+    removedItems.push($(data).attr("name"));
+  });
+  
+  if (confirm('Deleting: ' + removedItems)) {
+    $("#Data input[type=checkbox]:checked").each(function(index, data){
+      //only refresh item list when last item is removed
+      deleteDataItem($(data).attr("name"), index === ($("#Data input[type=checkbox]:checked").length -1))
+    });
+    toggleRemoveLinks() 
+  }
+}
+
 function deleteData(datalink) {
   if (confirm('Deleting ' + datalink)) {
-    $.ajax({
+    deleteDataItem(datalink)
+  }
+}
+
+function deleteDataItem(datalink, refresh = true) {
+  $.ajax({
       type: "DELETE",
       url: "../server/data/" + encodeURIComponent(datalink),
       success: function(res) {
-        listFolders(datalink.substr(0, datalink.lastIndexOf("/")))
+        if(refresh)
+          listFolders(datalink.substr(0, datalink.lastIndexOf("/")))
       } 
     });
-  }
 }
 
-
 function copy2Clipboard(datalink) {
   new URL("../storage/" + datalink, document.baseURI).href
   datalink = new URL("../storage/" + datalink, document.baseURI).href;
@@ -332,10 +386,31 @@ function listExternalFolders(folder = ""){
   //listData(folder)
 }
 
-$(document).ready(function() { 
-  listFolders();
+var getUrlParameter = function getUrlParameter(sParam) {
+    var sPageURL = window.location.search.substring(1),
+        sURLVariables = sPageURL.split('&'),
+        sParameterName,
+        i;
+
+    for (i = 0; i < sURLVariables.length; i++) {
+        sParameterName = sURLVariables[i].split('=');
+
+        if (sParameterName[0] === sParam) {
+            return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
+        }
+    }
+    return false;
+};
+
+
+$(document).ready(function() {
+  var path = getUrlParameter('path');
+  if(!path){
+   path = ""; 
+  }
+  listFolders(path);
   //listExternalFolders();
-  getAllFolders();
+  getAllFolders(path);
 });