improve ui checkbox functionality

html/js/base_ts.js

@@ -7,6 +7,7 @@ var SERVER_CONNECTION = false;
 var WS_AVAILABLE = false;
 var ACTIVE_MENU_ID = "";
 var LAST_FOCUSED_ELEMENT = null;
+var LAST_BULK_CHECKBOX = null;
 // Menü
 var menuItems = new Array();
 menuItems.push(new MainMenuItem("playlist", "{{.mainMenu.item.playlist}}", "m3u.png", "{{.mainMenu.headline.playlist}}"));
@@ -183,6 +184,38 @@ function getAllSelectedChannels() {
     }
     return channels;
 }
+function selectChannelRange(checkbox, event) {
+    if (BULK_EDIT == false || checkbox == undefined || checkbox == null) {
+        return;
+    }
+    var table = document.getElementById("content_table");
+    if (table == null) {
+        return;
+    }
+    var trs = table.getElementsByTagName("TR");
+    var visibleCheckboxes = new Array();
+    for (var i = 1; i < trs.length; i++) {
+        if (trs[i].style.display != "none") {
+            var bulkCheckbox = trs[i].querySelector("input.bulk");
+            if (bulkCheckbox != null) {
+                visibleCheckboxes.push(bulkCheckbox);
+            }
+        }
+    }
+    var currentIndex = visibleCheckboxes.indexOf(checkbox);
+    var previousIndex = -1;
+    if (LAST_BULK_CHECKBOX != null) {
+        previousIndex = visibleCheckboxes.indexOf(LAST_BULK_CHECKBOX);
+    }
+    if (event != undefined && event.shiftKey == true && previousIndex > -1 && currentIndex > -1) {
+        var start = Math.min(previousIndex, currentIndex);
+        var end = Math.max(previousIndex, currentIndex);
+        for (var i = start; i <= end; i++) {
+            visibleCheckboxes[i].checked = checkbox.checked;
+        }
+    }
+    LAST_BULK_CHECKBOX = checkbox;
+}
 function selectAllChannels() {
     var bulk = false;
     var trs = document.getElementById("content_table").getElementsByTagName("TR");
@@ -201,6 +234,7 @@ function selectAllChannels() {
             }
         }
     }
+    LAST_BULK_CHECKBOX = null;
     return;
 }
 function bulkEdit() {
@@ -219,6 +253,7 @@ function bulkEdit() {
         rows[i].className = className;
         rows[i].checked = false;
     }
+    LAST_BULK_CHECKBOX = null;
     return;
 }
 function sortTable(column) {

html/js/menu_ts.js

@@ -467,6 +467,7 @@ var Cell = /** @class */ (function () {
                     element.checked = this.value;
                     element.type = "checkbox";
                     element.className = "bulk hideBulk";
+                    element.setAttribute("onclick", "javascript: selectChannelRange(this, event)");
                     break;
                 case "BULK_HEAD":
                     element = document.createElement("INPUT");

ts/base_ts.ts

@@ -6,6 +6,7 @@ var UNDO = new Object()
 var SERVER_CONNECTION = false
 var WS_AVAILABLE = false
 var ACTIVE_MENU_ID:string = ""
+var LAST_BULK_CHECKBOX:HTMLInputElement = null
 
 
 // Menü
@@ -182,6 +183,46 @@ function getAllSelectedChannels():string[] {
   return channels
 }
 
+function selectChannelRange(checkbox:HTMLInputElement, event:MouseEvent) {
+
+  if (BULK_EDIT == false || checkbox == undefined || checkbox == null) {
+    return
+  }
+
+  var table = document.getElementById("content_table")
+  if (table == null) {
+    return
+  }
+
+  var trs = table.getElementsByTagName("TR")
+  var visibleCheckboxes:HTMLInputElement[] = new Array()
+
+  for (var i = 1; i < trs.length; i++) {
+    if ((trs[i] as HTMLElement).style.display != "none") {
+      var bulkCheckbox = (trs[i] as HTMLTableRowElement).querySelector("input.bulk") as HTMLInputElement
+      if (bulkCheckbox != null) {
+        visibleCheckboxes.push(bulkCheckbox)
+      }
+    }
+  }
+
+  var currentIndex = visibleCheckboxes.indexOf(checkbox)
+  var previousIndex = -1
+  if (LAST_BULK_CHECKBOX != null) {
+    previousIndex = visibleCheckboxes.indexOf(LAST_BULK_CHECKBOX)
+  }
+
+  if (event != undefined && event.shiftKey == true && previousIndex > -1 && currentIndex > -1) {
+    var start = Math.min(previousIndex, currentIndex)
+    var end = Math.max(previousIndex, currentIndex)
+    for (var i = start; i <= end; i++) {
+      visibleCheckboxes[i].checked = checkbox.checked
+    }
+  }
+
+  LAST_BULK_CHECKBOX = checkbox
+}
+
 function selectAllChannels() {
 
   var bulk:Boolean = false
@@ -211,6 +252,7 @@ function selectAllChannels() {
 
   }
 
+  LAST_BULK_CHECKBOX = null
   return
 }
 
@@ -235,6 +277,7 @@ function bulkEdit() {
     (rows[i] as HTMLInputElement).checked = false
   }
 
+  LAST_BULK_CHECKBOX = null
   return
 }
 

ts/menu_ts.ts

@@ -562,6 +562,7 @@ class Cell {
           (element as HTMLInputElement).checked = this.value;
           (element as HTMLInputElement).type = "checkbox";
           (element as HTMLInputElement).className = "bulk hideBulk";
+          (element as HTMLInputElement).setAttribute("onclick", "javascript: selectChannelRange(this, event)")
           break
 
         case "BULK_HEAD":