From 7b04f5f07bc2e88cad86888389831892f12cd202 Mon Sep 17 00:00:00 2001
From: vitam <psyviccccc@gmail.com>
Date: Tue, 25 Jul 2017 23:03:52 +0200
Subject: [PATCH 1/5] group file into folder in select file

---
 css/modals.css    |  4 ++--
 index.html        | 42 +++++++++++++++++++++++++++++++-----------
 js/ctrls/modal.js | 17 +++++++++++++++++
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/css/modals.css b/css/modals.css
index 9aedb6a..f5740ae 100644
--- a/css/modals.css
+++ b/css/modals.css
@@ -34,11 +34,11 @@
   width: 80px;
 }
 
-.selectFiles > div > .control-label {
+.selectFiles div .control-label {
   font-weight: normal;
   margin-left: 30px;
 }
 
-.selectFiles > div > .controls {
+.selectFiles div .controls {
   margin-left: 30px;
 }
diff --git a/index.html b/index.html
index 18551bc..e7cca56 100644
--- a/index.html
+++ b/index.html
@@ -1028,6 +1028,36 @@
     <button class="btn btn-default btn-primary" ng-click="$close()">{{ 'Start' | translate }}</button>
   </div>
 </script>
+<!-- }}} -->
+
+  <!-- {{{ select files checkbox modal -->
+<script type="text/ng-template" id="selectFilesCheckBox.html">
+  <div ng-repeat="(folder,file) in files">
+    <!--is's a folder-->
+    <div ng-if="!file.index || file.index.toString().indexOf('object') >= 0">
+      <div class="controls">
+        <label class="checkbox">
+          <input type="checkbox"/>{{folder}}
+        </label>
+        <div class="form-group selectFiles" ng-include="'selectFilesCheckBox.html'" ng-init="files=file">
+        </div>
+      </div>
+    </div>
+
+    <!--is's a file-->
+    <div ng-if="file.index && file.index.toString().indexOf('object') < 0">
+      <label class="control-label">{{ 'Select to download' | translate }}</label>
+
+      <div class="controls">
+        <label class="checkbox">
+          <input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
+        </label>
+      </div>
+      <br/>
+      <br/>
+    </div>
+  </div>
+</script>
 <!-- }}} -->
 
 <!-- {{{ select file modal -->
@@ -1039,17 +1069,7 @@
 
   <form class="form-horizontal modal-body">
     <fieldset>
-      <div class="form-group selectFiles">
-        <div ng-repeat="file in selectFiles.files">
-          <label class="control-label">{{ 'Select to download' | translate }}</label>
-
-          <div class="controls">
-            <label class="checkbox">
-              <input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
-            </label>
-          </div>
-          <br /><br />
-        </div>
+      <div class="form-group selectFiles" ng-include="'selectFilesCheckBox.html'" ng-init="files=selectFiles.groupedFiles">
       </div>
     </fieldset>
   </form>
diff --git a/js/ctrls/modal.js b/js/ctrls/modal.js
index 3177c3d..7dc8c9c 100644
--- a/js/ctrls/modal.js
+++ b/js/ctrls/modal.js
@@ -113,6 +113,23 @@ angular
       var self = this;
 
 	  this.files = _.cloneDeep(files);
+      var groupFile = function (files) {
+          var i, j, str, arr, folder = {}, tmp = folder;
+          for (i = 0; i < files.length; i++) {
+              str = files[i].relpath;
+              arr = str.split("/");
+              for (j = 0; j < arr.length - 1; j++) {
+                  if (!tmp[arr[j]]) {
+                      tmp[arr[j]] = {};
+                  }
+                  tmp = tmp[arr[j]];
+              }
+              tmp[arr[arr.length - 1]] = files[i];
+              tmp = folder;
+          }
+          return folder;
+      };
+      this.groupedFiles = groupFile(this.files);
       this.inst = $modal.open({
         templateUrl: "selectFiles.html",
         scope: scope,

From 8af0a6dbcb5d527d006eff52a41446d85526c15a Mon Sep 17 00:00:00 2001
From: vitam <psyviccccc@gmail.com>
Date: Thu, 27 Jul 2017 12:31:18 +0200
Subject: [PATCH 2/5] group file into folder in select file

---
 index.html                  | 44 ++++++++++++++------------
 js/ctrls/modal.js           | 61 +++++++++++++++++++++++++++++--------
 js/directives/fileselect.js | 21 +++++++++++++
 js/init.js                  |  2 +-
 4 files changed, 95 insertions(+), 33 deletions(-)
 create mode 100644 js/directives/fileselect.js

diff --git a/index.html b/index.html
index e7cca56..8214268 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
   <script src="js/libs/jquery-2.2.4.min.js"></script>
   <script src="js/libs/lodash-4.17.3.min.js"></script>
 
-  <script src="js/libs/angular.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
 
   <script src="js/libs/angularui-bootstrap-tpls.min.js"></script>
   <script src="js/libs/bootstrap-filestyle.js"></script>
@@ -41,6 +41,7 @@
 
   <script src="js/directives/chunkbar.js"></script>
   <script src="js/directives/dgraph.js"></script>
+  <script src="js/directives/fileselect.js"></script>
   <script src="js/directives/fselect.js"></script>
   <script src="js/directives/textarea.js"></script>
 
@@ -1032,30 +1033,33 @@
 
   <!-- {{{ select files checkbox modal -->
 <script type="text/ng-template" id="selectFilesCheckBox.html">
-  <div ng-repeat="(folder,file) in files">
-    <!--is's a folder-->
-    <div ng-if="!file.index || file.index.toString().indexOf('object') >= 0">
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox"/>{{folder}}
-        </label>
-        <div class="form-group selectFiles" ng-include="'selectFilesCheckBox.html'" ng-init="files=file">
-        </div>
+  <div ng-repeat="(folderName,folder) in files.dirs">
+    <!--recursive folder-->
+
+    <div class="controls">
+      <!--click to toggle show the subfolders and files-->
+      <div class="checkbox" data-ng-click="folder.show=!folder.show">
+        <!-- The value of indeterminate="" can be bound to any angular expression -->
+        <input type="checkbox" ng-model="folder.selected" data-ng-click="$event.stopPropagation()" indeterminate="true"/>{{folderName}}
+        <span ng-show="!folder.show" class="control-label">{{ 'click the text to expand the folder' | translate }}</span>
+        <span ng-show="folder.show" class="control-label">{{ 'click the text to collapse the folder' | translate }}</span>
+      </div>
+      <div ng-show="folder.show" class="form-group selectFiles" ng-include="'selectFilesCheckBox.html'" ng-init="files=folder">
       </div>
     </div>
+  </div>
 
-    <!--is's a file-->
-    <div ng-if="file.index && file.index.toString().indexOf('object') < 0">
-      <label class="control-label">{{ 'Select to download' | translate }}</label>
+  <div ng-repeat="file in files.files">
+    <!--files-->
+    <label class="control-label">{{ 'Select to download' | translate }}</label>
 
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
-        </label>
-      </div>
-      <br/>
-      <br/>
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
+      </label>
     </div>
+    <br/>
+    <br/>
   </div>
 </script>
 <!-- }}} -->
diff --git a/js/ctrls/modal.js b/js/ctrls/modal.js
index 7dc8c9c..9f0a7b7 100644
--- a/js/ctrls/modal.js
+++ b/js/ctrls/modal.js
@@ -113,23 +113,60 @@ angular
       var self = this;
 
 	  this.files = _.cloneDeep(files);
-      var groupFile = function (files) {
-          var i, j, str, arr, folder = {}, tmp = folder;
-          for (i = 0; i < files.length; i++) {
-              str = files[i].relpath;
-              arr = str.split("/");
-              for (j = 0; j < arr.length - 1; j++) {
-                  if (!tmp[arr[j]]) {
-                      tmp[arr[j]] = {};
+      var groupFiles = function (files) {
+          var createSubFolder = function () {
+              var folder = {
+                  dirs      : {},
+                  files     : {},
+                  show      : false,
+                  _selected : false,
+                  change    : function () {
+                      for (var file in this.files) {
+                          if (this.files.hasOwnProperty(file)) {
+                              this.files[file].selected = this.selected;
+                          }
+                      }
+                      for (var folder in this.dirs) {
+                          if (this.dirs.hasOwnProperty(folder)) {
+                              this.dirs[folder].selected = this.selected;
+                          }
+                      }
+                      console.log(this);
                   }
-                  tmp = tmp[arr[j]];
-              }
-              tmp[arr[arr.length - 1]] = files[i];
+              };
+              Object.defineProperty(folder, "selected", {
+                  get : function () {
+                      return this._selected;
+                  },
+                  set : function (newValue) {
+                      this._selected = newValue;
+                      this.change();
+                  }
+              });
+              Object.defineProperty(folder, "indeterminate", {
+                  get : function () {
+                      return this._selected;
+                  }
+              });
+              return folder;
+          };
+          var folder = createSubFolder(),
+              tmp;
+          for (var i = 0; i < files.length; i++) {
               tmp = folder;
+              var str = files[i].relpath;
+              var arr = str.split("/");
+              for (var j = 0; j < arr.length - 1; j++) {
+                  if (!tmp.dirs[arr[j]]) {
+                      tmp.dirs[arr[j]] = createSubFolder();
+                  }
+                  tmp = tmp.dirs[arr[j]];
+              }
+              tmp.files[arr[arr.length - 1]] = files[i];
           }
           return folder;
       };
-      this.groupedFiles = groupFile(this.files);
+      this.groupedFiles = groupFiles(this.files);
       this.inst = $modal.open({
         templateUrl: "selectFiles.html",
         scope: scope,
diff --git a/js/directives/fileselect.js b/js/directives/fileselect.js
new file mode 100644
index 0000000..d0d01c5
--- /dev/null
+++ b/js/directives/fileselect.js
@@ -0,0 +1,21 @@
+// watches changes in the file upload control (input[file]) and
+// puts the files selected in an attribute
+angular.module("webui.directives.fileselect", []).directive("indeterminate", function () {
+    return {
+        // Restrict the directive so it can only be used as an attribute
+        restrict : "A",
+
+        link : function link (scope, elem, attr) {
+            // Whenever the bound value of the attribute changes we update
+            // the internal 'indeterminate' flag on the attached dom element
+            var watcher = scope.$watch(attr.indeterminate, function (value) {
+                elem[0].indeterminate = value;
+            });
+
+            // Remove the watcher when the directive is destroyed
+            scope.$on("$destroy", function () {
+                watcher();
+            });
+        }
+    };
+});
diff --git a/js/init.js b/js/init.js
index 72fe0ff..ce964e7 100644
--- a/js/init.js
+++ b/js/init.js
@@ -4,7 +4,7 @@ var webui = angular.module('webui', [
   'webui.services.modals', 'webui.services.alerts',
   'webui.services.settings', 'webui.services.settings.filters',
   'webui.filters.bytes','webui.filters.url',
-  'webui.directives.chunkbar', 'webui.directives.dgraph', 'webui.directives.fselect',
+  'webui.directives.chunkbar', 'webui.directives.dgraph', 'webui.directives.fselect', "webui.directives.fileselect",
   'webui.ctrls.download', 'webui.ctrls.nav', 'webui.ctrls.modal', 'webui.ctrls.alert',
   'webui.ctrls.props',
   // external deps

From 286cc301fe6618c33565d97593ca362ac6d8a725 Mon Sep 17 00:00:00 2001
From: vitam <psyviccccc@gmail.com>
Date: Thu, 27 Jul 2017 22:31:33 +0200
Subject: [PATCH 3/5] change some code for better perfomance, support
 indeterminate

---
 index.html                  |  6 +--
 js/ctrls/modal.js           | 85 ++++++++++++++++++++-----------------
 js/directives/fileselect.js | 48 ++++++++++++++++++---
 3 files changed, 92 insertions(+), 47 deletions(-)

diff --git a/index.html b/index.html
index 8214268..6358a6f 100644
--- a/index.html
+++ b/index.html
@@ -1031,7 +1031,7 @@
 </script>
 <!-- }}} -->
 
-  <!-- {{{ select files checkbox modal -->
+<!-- {{{ select files checkbox modal -->
 <script type="text/ng-template" id="selectFilesCheckBox.html">
   <div ng-repeat="(folderName,folder) in files.dirs">
     <!--recursive folder-->
@@ -1040,7 +1040,7 @@
       <!--click to toggle show the subfolders and files-->
       <div class="checkbox" data-ng-click="folder.show=!folder.show">
         <!-- The value of indeterminate="" can be bound to any angular expression -->
-        <input type="checkbox" ng-model="folder.selected" data-ng-click="$event.stopPropagation()" indeterminate="true"/>{{folderName}}
+        <input type="checkbox" ng-model="folder.selected" data-ng-click="$event.stopPropagation()" indeterminate="folder.indeterminate" monitor/>{{folderName}}
         <span ng-show="!folder.show" class="control-label">{{ 'click the text to expand the folder' | translate }}</span>
         <span ng-show="folder.show" class="control-label">{{ 'click the text to collapse the folder' | translate }}</span>
       </div>
@@ -1055,7 +1055,7 @@
 
     <div class="controls">
       <label class="checkbox">
-        <input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
+        <input type="checkbox" ng-model="file.selected" monitor/>{{file.relpath}}
       </label>
     </div>
     <br/>
diff --git a/js/ctrls/modal.js b/js/ctrls/modal.js
index 9f0a7b7..b203de9 100644
--- a/js/ctrls/modal.js
+++ b/js/ctrls/modal.js
@@ -114,56 +114,65 @@ angular
 
 	  this.files = _.cloneDeep(files);
       var groupFiles = function (files) {
-          var createSubFolder = function () {
-              var folder = {
-                  dirs      : {},
-                  files     : {},
-                  show      : false,
-                  _selected : false,
-                  change    : function () {
-                      for (var file in this.files) {
-                          if (this.files.hasOwnProperty(file)) {
-                              this.files[file].selected = this.selected;
-                          }
-                      }
-                      for (var folder in this.dirs) {
-                          if (this.dirs.hasOwnProperty(folder)) {
-                              this.dirs[folder].selected = this.selected;
-                          }
-                      }
-                      console.log(this);
+          function OrganizedFolder () {
+              this.dirs = {};
+              this.files = [];
+              this.show = false;
+              this._selected = false;
+          }
+          OrganizedFolder.prototype.change = function () {
+              for (var i = 0; i < this.files.length; i++) {
+                  this.files[i].selected = this.selected;
+              }
+              for (var folder in this.dirs) {
+                  if (this.dirs.hasOwnProperty(folder)) {
+                      this.dirs[folder].selected = this.selected;
                   }
-              };
-              Object.defineProperty(folder, "selected", {
-                  get : function () {
-                      return this._selected;
-                  },
-                  set : function (newValue) {
-                      this._selected = newValue;
-                      this.change();
-                  }
-              });
-              Object.defineProperty(folder, "indeterminate", {
-                  get : function () {
-                      return this._selected;
-                  }
-              });
-              return folder;
+              }
           };
-          var folder = createSubFolder(),
-              tmp;
+          Object.defineProperty(OrganizedFolder.prototype, "selected", {
+              get : function () {
+                  return this._selected;
+              },
+              set : function (newValue) {
+                  this._selected = newValue;
+                  this.change();
+              }
+          });
+          Object.defineProperty(OrganizedFolder.prototype, "indeterminate", {
+              get : function () {
+                  var allSeleted = true;
+                  var allNotSelected = true;
+                  for (var p in this.dirs) {
+                      if (this.dirs.hasOwnProperty(p)) {
+                          if (this.dirs[p].indeterminate) {
+                              return true;
+                          }
+                          allSeleted &= this.dirs[p].selected;
+                          allNotSelected &= !this.dirs[p].selected;
+                      }
+                  }
+                  for (var i = 0; i < this.files.length; i++) {
+                      allSeleted &= this.files[i].selected;
+                      allNotSelected &= !this.files[i].selected;
+                  }
+                  return !allSeleted && !allNotSelected;// is not determinate when either all selected either all not selected;
+              }
+          });
+          var folder = new OrganizedFolder(), tmp;
           for (var i = 0; i < files.length; i++) {
               tmp = folder;
               var str = files[i].relpath;
               var arr = str.split("/");
               for (var j = 0; j < arr.length - 1; j++) {
                   if (!tmp.dirs[arr[j]]) {
-                      tmp.dirs[arr[j]] = createSubFolder();
+                      tmp.dirs[arr[j]] = new OrganizedFolder();
                   }
                   tmp = tmp.dirs[arr[j]];
               }
-              tmp.files[arr[arr.length - 1]] = files[i];
+              tmp.files.push(files[i]);
           }
+          folder.change();
           return folder;
       };
       this.groupedFiles = groupFiles(this.files);
diff --git a/js/directives/fileselect.js b/js/directives/fileselect.js
index d0d01c5..b3efbd5 100644
--- a/js/directives/fileselect.js
+++ b/js/directives/fileselect.js
@@ -1,6 +1,7 @@
 // watches changes in the file upload control (input[file]) and
 // puts the files selected in an attribute
-angular.module("webui.directives.fileselect", []).directive("indeterminate", function () {
+var app = angular.module("webui.directives.fileselect", []);
+app.directive("indeterminate", function () {
     return {
         // Restrict the directive so it can only be used as an attribute
         restrict : "A",
@@ -8,13 +9,48 @@ angular.module("webui.directives.fileselect", []).directive("indeterminate", fun
         link : function link (scope, elem, attr) {
             // Whenever the bound value of the attribute changes we update
             // the internal 'indeterminate' flag on the attached dom element
-            var watcher = scope.$watch(attr.indeterminate, function (value) {
-                elem[0].indeterminate = value;
+            // use upward emit notification for change to prevent the performance penalty bring by $scope.$watch
+            elem[0].indeterminate = scope.$eval(attr.indeterminate);
+            scope.$on("childSelectedChange", function (event, options) {
+                elem[0].indeterminate = scope.$eval(attr.indeterminate);
             });
 
-            // Remove the watcher when the directive is destroyed
-            scope.$on("$destroy", function () {
-                watcher();
+            /* var watcher = scope.$watch(attr.indeterminate, function (value) {
+             elem[0].indeterminate = value;
+             });
+
+             // Remove the watcher when the directive is destroyed
+             scope.$on("$destroy", function () {
+             watcher();
+             }); */
+        }
+    };
+});
+
+app.directive("monitor", function () {
+    return {
+        // Restrict the directive so it can only be used as an attribute
+        restrict : "A",
+
+        link : function link (scope, elem, attr) {
+            // Whenever the bound value of the attribute changes we update
+            // the internal 'indeterminate' flag on the attached dom element
+            elem.change(function () {
+                scope.$emit("childSelectedChange");
+            });
+        }
+    };
+});
+
+app.directive("selected", function () {
+    return {
+        // Restrict the directive so it can only be used as an attribute
+        restrict : "A",
+
+        link : function link (scope, elem, attr) {
+            elem[0].value = scope.$eval(attr.selected);
+            scope.$on("childSelectedChange", function (event, options) {
+                elem[0].value = scope.$eval(attr.selected);
             });
         }
     };

From 4fa683b4eede1c3aed24fc478911ee152aed84f0 Mon Sep 17 00:00:00 2001
From: vitam <psyviccccc@gmail.com>
Date: Sat, 29 Jul 2017 14:42:06 +0200
Subject: [PATCH 4/5] rewrite most of code into separate angular directive file

---
 index.html                  |   4 +-
 js/ctrls/modal.js           |  42 +---------
 js/directives/fileselect.js | 149 +++++++++++++++++++++++-------------
 3 files changed, 98 insertions(+), 97 deletions(-)

diff --git a/index.html b/index.html
index 6358a6f..c58e77e 100644
--- a/index.html
+++ b/index.html
@@ -1040,7 +1040,7 @@
       <!--click to toggle show the subfolders and files-->
       <div class="checkbox" data-ng-click="folder.show=!folder.show">
         <!-- The value of indeterminate="" can be bound to any angular expression -->
-        <input type="checkbox" ng-model="folder.selected" data-ng-click="$event.stopPropagation()" indeterminate="folder.indeterminate" monitor/>{{folderName}}
+        <input type="checkbox" data-ng-model="folder.selected" data-ng-click="$event.stopPropagation()" indeterminate/>{{folderName}}
         <span ng-show="!folder.show" class="control-label">{{ 'click the text to expand the folder' | translate }}</span>
         <span ng-show="folder.show" class="control-label">{{ 'click the text to collapse the folder' | translate }}</span>
       </div>
@@ -1055,7 +1055,7 @@
 
     <div class="controls">
       <label class="checkbox">
-        <input type="checkbox" ng-model="file.selected" monitor/>{{file.relpath}}
+        <input type="checkbox" data-ng-model="file.selected" indeterminate="false"/>{{file.relpath}}
       </label>
     </div>
     <br/>
diff --git a/js/ctrls/modal.js b/js/ctrls/modal.js
index b203de9..4fe4446 100644
--- a/js/ctrls/modal.js
+++ b/js/ctrls/modal.js
@@ -118,47 +118,8 @@ angular
               this.dirs = {};
               this.files = [];
               this.show = false;
-              this._selected = false;
+              this.selected = true;
           }
-          OrganizedFolder.prototype.change = function () {
-              for (var i = 0; i < this.files.length; i++) {
-                  this.files[i].selected = this.selected;
-              }
-              for (var folder in this.dirs) {
-                  if (this.dirs.hasOwnProperty(folder)) {
-                      this.dirs[folder].selected = this.selected;
-                  }
-              }
-          };
-          Object.defineProperty(OrganizedFolder.prototype, "selected", {
-              get : function () {
-                  return this._selected;
-              },
-              set : function (newValue) {
-                  this._selected = newValue;
-                  this.change();
-              }
-          });
-          Object.defineProperty(OrganizedFolder.prototype, "indeterminate", {
-              get : function () {
-                  var allSeleted = true;
-                  var allNotSelected = true;
-                  for (var p in this.dirs) {
-                      if (this.dirs.hasOwnProperty(p)) {
-                          if (this.dirs[p].indeterminate) {
-                              return true;
-                          }
-                          allSeleted &= this.dirs[p].selected;
-                          allNotSelected &= !this.dirs[p].selected;
-                      }
-                  }
-                  for (var i = 0; i < this.files.length; i++) {
-                      allSeleted &= this.files[i].selected;
-                      allNotSelected &= !this.files[i].selected;
-                  }
-                  return !allSeleted && !allNotSelected;// is not determinate when either all selected either all not selected;
-              }
-          });
           var folder = new OrganizedFolder(), tmp;
           for (var i = 0; i < files.length; i++) {
               tmp = folder;
@@ -172,7 +133,6 @@ angular
               }
               tmp.files.push(files[i]);
           }
-          folder.change();
           return folder;
       };
       this.groupedFiles = groupFiles(this.files);
diff --git a/js/directives/fileselect.js b/js/directives/fileselect.js
index b3efbd5..f2b1cdc 100644
--- a/js/directives/fileselect.js
+++ b/js/directives/fileselect.js
@@ -1,57 +1,98 @@
 // watches changes in the file upload control (input[file]) and
 // puts the files selected in an attribute
-var app = angular.module("webui.directives.fileselect", []);
-app.directive("indeterminate", function () {
-    return {
-        // Restrict the directive so it can only be used as an attribute
-        restrict : "A",
+var app = angular.module("webui.directives.fileselect", ["webui.services.deps"]);
+app.directive("indeterminate", [
+    "$parse", function syncInput (parse) {
+        return {
+            require  : "ngModel",
+            // Restrict the directive so it can only be used as an attribute
+            restrict : "A",
 
-        link : function link (scope, elem, attr) {
-            // Whenever the bound value of the attribute changes we update
-            // the internal 'indeterminate' flag on the attached dom element
-            // use upward emit notification for change to prevent the performance penalty bring by $scope.$watch
-            elem[0].indeterminate = scope.$eval(attr.indeterminate);
-            scope.$on("childSelectedChange", function (event, options) {
-                elem[0].indeterminate = scope.$eval(attr.indeterminate);
-            });
-
-            /* var watcher = scope.$watch(attr.indeterminate, function (value) {
-             elem[0].indeterminate = value;
-             });
-
-             // Remove the watcher when the directive is destroyed
-             scope.$on("$destroy", function () {
-             watcher();
-             }); */
-        }
-    };
-});
-
-app.directive("monitor", function () {
-    return {
-        // Restrict the directive so it can only be used as an attribute
-        restrict : "A",
-
-        link : function link (scope, elem, attr) {
-            // Whenever the bound value of the attribute changes we update
-            // the internal 'indeterminate' flag on the attached dom element
-            elem.change(function () {
-                scope.$emit("childSelectedChange");
-            });
-        }
-    };
-});
-
-app.directive("selected", function () {
-    return {
-        // Restrict the directive so it can only be used as an attribute
-        restrict : "A",
-
-        link : function link (scope, elem, attr) {
-            elem[0].value = scope.$eval(attr.selected);
-            scope.$on("childSelectedChange", function (event, options) {
-                elem[0].value = scope.$eval(attr.selected);
-            });
-        }
-    };
-});
+            link : function link (scope, elem, attr, ngModelCtrl) {
+                // Whenever the bound value of the attribute changes we update
+                // use upward emit notification for change to prevent the performance penalty bring by $scope.$watch
+                var getter = parse(attr["ngModel"]);
+                var setter = getter.assign;
+                var children = []; // cache children input
+                var get = function () {
+                    return getter(scope);
+                };
+                // the internal 'indeterminate' flag on the attached dom element
+                var setIndeterminateState = function (newValue) {
+                    elem.prop("indeterminate", newValue);
+                };
+                var setModelValueWithoutSideEffect = function (newVal) {
+                    setter(scope, newVal);
+                    ngModelCtrl.$modelValue = newVal;
+                    ngModelCtrl.$viewValue = newVal;
+                    ngModelCtrl.$render();
+                };
+                var setWithSideEffect = function (newVal) {
+                    ngModelCtrl.$setViewValue(newVal);
+                    ngModelCtrl.$render();
+                };
+                var passIfLeafChild = function (callback) {
+                    return function () {
+                        if (children.length > 0) {
+                            callback.apply(this, arguments);
+                        }
+                    };
+                };
+                var passIfNotIsLeafChild = function (callback) {
+                    return function () {
+                        if (children.length === 0) {
+                            callback.apply(this, arguments);
+                        }
+                    };
+                };
+                var passThroughThisScope = function (callback) {
+                    return function (event) {
+                        if (event.targetScope !== event.currentScope) {
+                            return callback.apply(this, arguments);
+                        }
+                    };
+                };
+                if (attr["indeterminate"] && parse(attr["indeterminate"]).constant && !scope.$eval(attr["indeterminate"])) {
+                    // is leaf input, Only receive parent change and emit child change event
+                    setIndeterminateState(scope.$eval(attr["indeterminate"]));
+                    ngModelCtrl.$viewChangeListeners.push(passIfNotIsLeafChild(function () {
+                        scope.$emit("childSelectedChange");
+                    }));
+                    scope.$on("ParentSelectedChange", passThroughThisScope(
+                        function (event, newVal) {
+                            setWithSideEffect(newVal);
+                        }));
+                    scope.$emit("i'm child input", get);
+                    setWithSideEffect(get());
+                    scope.$emit("childSelectedChange");
+                } else {
+                    // init first time and only once
+                    // establish parent-child's relation
+                    scope.$on("i'm child input", passThroughThisScope(
+                        function (event, child) {
+                            children.push(child);
+                        })
+                    );
+                    var updateBaseOnChildrenState = function () {
+                        var allSelected = children.every(function (child) {
+                            return child();
+                        });
+                        var anySeleted = children.some(function (child) {
+                            return child();
+                        });
+                        setIndeterminateState(allSelected !== anySeleted);
+                        setWithSideEffect(allSelected);
+                    };
+                    // is not leaf input, Only receive child change and parent change event
+                    ngModelCtrl.$viewChangeListeners.push(passIfLeafChild(function () {
+                        if (!elem.prop("indeterminate")) { // emit when prop indeterminate is set to false
+                            scope.$broadcast("ParentSelectedChange", get());
+                        }
+                    }));
+                    // reset input state base on children inputs
+                    scope.$on("childSelectedChange", passThroughThisScope(passIfLeafChild(updateBaseOnChildrenState)));
+                }
+            }
+        };
+    }
+]);

From ace00309d31e1693e3fdf58d843b4b2578536172 Mon Sep 17 00:00:00 2001
From: vitam <psyviccccc@gmail.com>
Date: Sat, 29 Jul 2017 17:35:03 +0200
Subject: [PATCH 5/5] add more comment

---
 js/directives/fileselect.js | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/js/directives/fileselect.js b/js/directives/fileselect.js
index f2b1cdc..6700691 100644
--- a/js/directives/fileselect.js
+++ b/js/directives/fileselect.js
@@ -21,31 +21,25 @@ app.directive("indeterminate", [
                 var setIndeterminateState = function (newValue) {
                     elem.prop("indeterminate", newValue);
                 };
-                var setModelValueWithoutSideEffect = function (newVal) {
-                    setter(scope, newVal);
-                    ngModelCtrl.$modelValue = newVal;
-                    ngModelCtrl.$viewValue = newVal;
-                    ngModelCtrl.$render();
-                };
                 var setWithSideEffect = function (newVal) {
                     ngModelCtrl.$setViewValue(newVal);
                     ngModelCtrl.$render();
                 };
-                var passIfLeafChild = function (callback) {
+                var passIfLeafChild = function (callback) { // ensure to execute callback when this input have one or more subinputs
                     return function () {
                         if (children.length > 0) {
                             callback.apply(this, arguments);
                         }
                     };
                 };
-                var passIfNotIsLeafChild = function (callback) {
+                var passIfNotIsLeafChild = function (callback) { // ensure to execute callback when this input havent subinput
                     return function () {
                         if (children.length === 0) {
                             callback.apply(this, arguments);
                         }
                     };
                 };
-                var passThroughThisScope = function (callback) {
+                var passThroughThisScope = function (callback) { // pass through the event from the scope where they sent
                     return function (event) {
                         if (event.targetScope !== event.currentScope) {
                             return callback.apply(this, arguments);
@@ -60,14 +54,14 @@ app.directive("indeterminate", [
                     }));
                     scope.$on("ParentSelectedChange", passThroughThisScope(
                         function (event, newVal) {
-                            setWithSideEffect(newVal);
+                            setWithSideEffect(newVal); // set value to parent's value; this will cause listener to emit childChange event; this won't be a infinite loop
                         }));
-                    scope.$emit("i'm child input", get);
-                    setWithSideEffect(get());
-                    scope.$emit("childSelectedChange");
-                } else {
                     // init first time and only once
+                    scope.$emit("i'm child input", get);
+                    scope.$emit("childSelectedChange"); // force emitted, and force the parent change their state base on children at first time
+                } else {
                     // establish parent-child's relation
+                    // listen for the child emitted token
                     scope.$on("i'm child input", passThroughThisScope(
                         function (event, child) {
                             children.push(child);
@@ -80,12 +74,13 @@ app.directive("indeterminate", [
                         var anySeleted = children.some(function (child) {
                             return child();
                         });
-                        setIndeterminateState(allSelected !== anySeleted);
+                        setIndeterminateState(allSelected !== anySeleted); // if at least one is selected, but not all then set input property indeterminate to true
                         setWithSideEffect(allSelected);
                     };
                     // is not leaf input, Only receive child change and parent change event
                     ngModelCtrl.$viewChangeListeners.push(passIfLeafChild(function () {
-                        if (!elem.prop("indeterminate")) { // emit when prop indeterminate is set to false
+                        // emit when property indeterminate is set to false, prevent recursively emitting event from parent to children, children to parent
+                        if (!elem.prop("indeterminate")) {
                             scope.$broadcast("ParentSelectedChange", get());
                         }
                     }));