Files selected: use checkbox instead of buttons

src/js/jflow-browser.js

@@ -5,6 +5,11 @@
 
     var selectedFiles;
 
+    var updateNbFilesSelected = function() {
+        var nbFiles = selectedFiles.length;
+        $(".fileDialogDialog .ui-dialog-buttonpane .nbFiles").html(nbFiles + " file" + (nbFiles == 1 ? "" : "s") + " selected.");
+    }
+
     self.exec = function(fillFunction, multiple) {
         selectedFiles = [];
         $("#fileDialog").remove(); //Remove old instance
@@ -32,8 +37,8 @@
                     selectedFiles.splice(fileIndex, 1);
                 }
             }
-            var nbFiles = selectedFiles.length;
-            $(".fileDialogDialog .ui-dialog-buttonpane .nbFiles").html(nbFiles + " file" + (nbFiles == 1 ? "" : "s") + " selected.");
+            updateNbFilesSelected();
+
         });
         $(dom).dialog({
             title: multiple ? "Choose files" : "Choose one file",
@@ -77,10 +82,10 @@
             if (selectedFiles.length > 0) {
                 $("#filesSelected").remove();
                 $("body").append("<div id='filesSelected'>");
-                var selectedHtml = "";
+                var selectedHtml = "<label class='checkAll'><input class='checkAll' type='checkbox'/> Check all</label>";
                 for (var f = 0; f < selectedFiles.length; f++) {
                     var file = selectedFiles[f];
-                    selectedHtml += "<label rel='" + file + "' class='labelBlock'><input rel='" + file + "' type='checkbox'/> " + file + "</label>";
+                    selectedHtml += "<label rel='" + file + "' class='labelBlock'><input rel='" + file + "' type='checkbox' class='files'/> " + file + "</label>";
                 }
                 $("#filesSelected").html(selectedHtml);
                 $("#filesSelected").dialog({
@@ -90,24 +95,15 @@
                     dialogClass: "filesSelectedDialog",
                     buttons: [
                         {
-                            text: "Check all",
-                            click: function() {
-                                $("#filesSelected input[type=checkbox]").prop("checked", true);
-                            }
-                        }, {
-                            text: "Uncheck all",
-                            click: function () {
-                                $("#filesSelected input[type=checkbox]").prop("checked", false);
-                            }
-                        }, {
                             text: "Unselect",
                             click: function () {
-                                $("#filesSelected input[type=checkbox]:checked").each(function() {
+                                $("#filesSelected input.files[type=checkbox]:checked").each(function() {
                                     var file = $(this).attr("rel");
                                     $("#fileDialog a[rel='" + file + "']").parent("li").removeClass("selected");
                                     $("#fileDialog a[rel='" + file + "']").parent("li").find("input[type=checkbox]").prop("checked", false);
                                     $("#filesSelected label[rel='" + file + "']").remove();
                                     selectedFiles.splice(selectedFiles.indexOf(file), 1);
+                                    updateNbFilesSelected();
                                 })
                             }
                         }, {
@@ -118,6 +114,14 @@
                         }
                     ]
                 });
+                $("#filesSelected input.checkAll").off("change").on("change", function() {
+                    if ($(this).is(":checked")) {
+                        $("#filesSelected input.files[type=checkbox]").prop("checked", true);
+                    }
+                    else {
+                        $("#filesSelected input.files[type=checkbox]").prop("checked", false);
+                    }
+                })
             }
         })
     }