FEATURE: Add Check/Uncheck all feature in Web UI

Changelog

@@ -9,6 +9,7 @@
     - FEATURE: Several torrents can be moved at once
     - FEATURE: Added error state for torrents (error is displayed in a tooltip)
     - FEATURE: Added filter for paused/error torrents
+    - FEATURE: Add Check/Uncheck all feature in Web UI
     - COSMETIC: Display peers country name in tooltip
     - COSMETIC: Display number of torrents in transfers tab label
 

src/icons.qrc

@@ -4,10 +4,12 @@
   <file>Icons/sphere2.png</file>
   <file>Icons/downarrow.png</file>
   <file>Icons/url.png</file>
+  <file>Icons/3-state-checkbox.gif</file>
   <file>Icons/loading.png</file>
   <file>Icons/slow.png</file>
   <file>Icons/magnet.png</file>
   <file>Icons/sphere.png</file>
+  <file>Icons/L.gif</file>
   <file>Icons/slow_off.png</file>
   <file>Icons/uparrow.png</file>
   <file>Icons/rss16.png</file>

src/webui/css/style.css

@@ -248,3 +248,18 @@ a.propButton img {
   padding-right: 3px;
 }
 
+/* Tri-state checkbox */
+a.tristate {
+	background: url(../images/3-state-checkbox.gif) 0 0 no-repeat;
+	display: block;
+	float: left;
+	height: 13px;
+	margin: .15em 8px 5px 0px;
+	overflow: hidden;
+	text-indent: -999em;
+	width: 13px;
+}
+a.checked { background-position: 0 -13px; }
+a.partial { background-position: 0 -26px; }
+
+

src/webui/prop-files.html

@@ -2,7 +2,7 @@
             <table class="torrentTable" cellpadding="0" cellspacing="0">
                     <thead>
                             <tr>
-                                    <th>_(Downloaded)</th>
+                                    <th><a id="all_files_cb" style="margin-right: 2px;" class="tristate" onclick="javascript:switchCBState()"></a>&nbsp;&nbsp;_(Downloaded)</th>
                                     <th>_(Name)</th>
                                     <th>_(Size)</th>
                                     <th style="width: 90px;">_(Progress)</th>
@@ -16,10 +16,85 @@
 <script type="text/javascript">
     var waitingTorrentFiles=false;
     var current_hash = "";
+
+var setCBState = function(state) {
+  if(state == "partial") {
+    if(!$("all_files_cb").hasClass("partial")) {
+      $("all_files_cb").removeClass("checked");
+      $("all_files_cb").addClass("partial");
+    }
+    return;
+  }
+  if(state == "checked") {
+    if(!$("all_files_cb").hasClass("checked")) {
+      $("all_files_cb").removeClass("partial");
+      $("all_files_cb").addClass("checked");
+    }
+    return;
+  }
+  $("all_files_cb").removeClass("partial");
+  $("all_files_cb").removeClass("checked");
+}
+
+var switchCBState = function() {
+  // Uncheck
+  if($("all_files_cb").hasClass("partial")) {
+    $("all_files_cb").removeClass("partial");
+    // Uncheck all checkboxes
+    $$('input.DownloadedCB').each(function(item, index) {
+      item.erase("checked");
+      setFilePriority(index, 0);
+    });
+    return;
+  }
+  if($("all_files_cb").hasClass("checked")) {
+    $("all_files_cb").removeClass("checked");
+    // Uncheck all checkboxes
+    $$('input.DownloadedCB').each(function(item, index) {
+      item.erase("checked");
+      setFilePriority(index, 0);
+    });
+    return;
+  }
+  // Check
+  $("all_files_cb").addClass("checked");
+  // Check all checkboxes
+  $$('input.DownloadedCB').each(function(item, index) {
+    item.set("checked", "checked");
+    setFilePriority(index, 1);
+  });
+}
+
+var allCBChecked = function() {
+  var CBs = $$('input.DownloadedCB');
+  for(var i=0; i<CBs.length; i+=1) {
+    var item = CBs[i];
+    if(!$defined(item.get('checked')) || !item.get('checked'))
+      return false;
+  }
+  return true;
+}
+
+var allCBUnchecked = function() {
+  var CBs = $$('input.DownloadedCB');
+  for(var i=0; i<CBs.length; i+=1) {
+    var item = CBs[i];
+    if($defined(item.get('checked')) && item.get('checked'))
+      return false;
+  }
+  return true;
+}
     
 var setFilePriority = function(id, priority) {
   if(current_hash == "") return;
   new Request({url: '/command/setFilePrio', method: 'post', data: {'hash': current_hash, 'id': id, 'priority': priority}}).send();
+  // Display or add combobox
+  if(priority > 0) {
+    $('comboPrio'+id).set("value", 1);
+    $('comboPrio'+id).removeClass("invisible");
+  } else {
+    $('comboPrio'+id).addClass("invisible");
+  }
 }
 
 var createDownloadedCB = function(id, downloaded) {
@@ -28,17 +103,20 @@ var createDownloadedCB = function(id, downloaded) {
     if(downloaded)
       CB.set('checked', 'checked');
     CB.set('id', 'cbPrio'+id);
+    CB.set('class', 'DownloadedCB');
     CB.addEvent('change', function(e){
       var checked = 0;
       if($defined($('cbPrio'+id).get('checked')) && $('cbPrio'+id).get('checked'))
         checked = 1;
       setFilePriority(id, checked);
-      // Display or add combobox
-      if(checked) {
-        $('comboPrio'+id).set("value", 1);
-        $('comboPrio'+id).removeClass("invisible");
+      if(allCBChecked()) {
+        setCBState("checked");
       } else {
-        $('comboPrio'+id).addClass("invisible");
+        if(allCBUnchecked()) {
+          setCBState("unchecked");
+        } else {
+          setCBState("partial");
+        }
       }
     });
     return CB;
@@ -113,7 +191,7 @@ var createPriorityCombo = function(id, selected_prio) {
                 if(row[i] > 0)
                   tds[i].getChildren('input')[0].set('checked', 'checked');
                 else
-                  tds[i].removeProperty('checked')
+                  tds[i].getChildren('input')[0].removeProperty('checked')
               } else {
                 if(i == 4) {
                   if(row[i] > 0) {
@@ -148,7 +226,8 @@ var createPriorityCombo = function(id, selected_prio) {
 		                td.adopt(new ProgressBar(row[i].toFloat(), {'id': 'pbf_'+id, 'width':80}));
 		              } else {
                     if(i == 0) {
-                      td.adopt(createDownloadedCB(id,row[i]));
+                      var tree_img  = new Element('img', {src: 'images/L.gif', style: 'margin-bottom: -2px'});
+                      td.adopt(tree_img, createDownloadedCB(id,row[i]));
                     } else {
                       if(i == 4) {
                         td.adopt(createPriorityCombo(id,row[i]));
@@ -206,6 +285,16 @@ var createPriorityCombo = function(id, selected_prio) {
                             fTable.insertRow(i, row);
                             i++;
                           }.bind(this));
+                          // Set global CB state
+                          if(allCBChecked()) {
+                            setCBState("checked");
+                          } else {
+                            if(allCBUnchecked()) {
+                              setCBState("unchecked");
+                            } else {
+                              setCBState("partial");
+                            }
+                          }
                         } else {
                           fTable.removeAllRows();
                         }