q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change some code for better perfomance, support indeterminate

Browse Source
This commit is contained in:
vitam 2017-07-27 22:31:33 +02:00
parent 2b6fe4b2bd
commit caa1e940e2
3 changed files with 92 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -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/>

85
js/ctrls/modal.js
View File

@ -124,56 +124,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);

48
js/directives/fileselect.js
View File

@ -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);
});
}
};