webui-aria2/js/directives/fileselect.js

// watches changes in the file upload control (input[file]) and
// puts the files selected in an attribute
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, 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 cacheSelectedSubInputNumber = 0;
                var cacheNoSelectedSubInputNumber = 0;
                var get = function () {
                    return getter(scope);
                };
                // the internal 'indeterminate' flag on the attached dom element
                var setIndeterminateState = function (newValue) {
                    elem.prop("indeterminate", newValue);
                };
                var setModelValueWithSideEffect = function (newVal) { // will cause to emit corresponding events
                    ngModelCtrl.$setViewValue(newVal);
                    ngModelCtrl.$render();
                };
                var passIfIsLeafChild = function (callback) { // ensure to execute callback only when this input has one or more subinputs
                    return function () {
                        if (children.length > 0) {
                            callback.apply(this, arguments);
                        }
                    };
                };
                var passIfNotIsLeafChild = function (callback) { // ensure to execute callback only when this input hasn't any subinput
                    return function () {
                        if (children.length === 0) {
                            callback.apply(this, arguments);
                        }
                    };
                };
                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);
                        }
                    };
                };
                var passIfIsIndeterminate = function (callback) { // pass through the event when this input is indeterminate
                    return function () {
                        if (!elem.prop("indeterminate")) {
                            return callback.apply(this, arguments);
                        }
                    };
                };
                /* var catchEventOnlyOnce = function (callback) { // only fire once, and stop event's propagation
                 return function (event) {
                 callback.apply(this, arguments);
                 return event.stopPropagation();
                 };
                 }; */
                if (attr["indeterminate"] && parse(attr["indeterminate"]).constant) {
                    setIndeterminateState(scope.$eval(attr["indeterminate"])); // set to default value (set in template)
                }
                if (attr["indeterminate"] && parse(attr["indeterminate"]).constant && !scope.$eval(attr["indeterminate"])) {
                    // when this input wont have subinput, they will only receive parent change and emit child change event
                    ngModelCtrl.$viewChangeListeners.push(passIfNotIsLeafChild(function () {
                        scope.$emit("childSelectedChange", get()); // notifies parents to change their state
                    }));
                    scope.$on("ParentSelectedChange", passThroughThisScope(passIfNotIsLeafChild(
                        function (event, newVal) {
                            setModelValueWithSideEffect(newVal); // set value to parent's value; this will cause listener to emit childChange event; this won't be a infinite loop
                        })));
                    // init first time and only once
                    scope.$emit("i'm child input", get); // traverses upwards toward the root scope notifying the listeners for keep reference to this input's value
                    scope.$emit("childSelectedChange", get()); // 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( // can't apply pass passIfIsLeafChild, at beginning all has not child input
                        function (event, child) {
                            children.push(child);
                        })
                    );
                    var updateBaseOnChildrenState = function (event, newChildValue) {
                        if ((cacheSelectedSubInputNumber + cacheNoSelectedSubInputNumber) !== children.length) {
                            // cache childern state
                            cacheSelectedSubInputNumber = 0;
                            cacheNoSelectedSubInputNumber = 0;
                            for (var i = 0; i < children.length; i++) {
                                if (children[i]()) {
                                    cacheSelectedSubInputNumber += 1;
                                } else {
                                    cacheNoSelectedSubInputNumber += 1;
                                }
                            }
                        } else {
                            // no need for recalculated children state
                            // just make a few change to cache value
                            if (newChildValue) {
                                cacheSelectedSubInputNumber++;
                                cacheNoSelectedSubInputNumber--;
                            } else {
                                cacheSelectedSubInputNumber--;
                                cacheNoSelectedSubInputNumber++;
                            }
                        }
                        var allSelected = (cacheNoSelectedSubInputNumber === 0); // if doesn't has any no selected input
                        var anySeleted = (cacheSelectedSubInputNumber > 0);
                        setIndeterminateState(allSelected !== anySeleted); // if at least one is selected, but not all then set input property indeterminate to true
                        setModelValueWithSideEffect(allSelected); // change binding model value and trigger onchange event
                    };
                    // is not leaf input, Only receive child change and parent change event
                    ngModelCtrl.$viewChangeListeners.push(passIfIsLeafChild(passIfIsIndeterminate(function () {
                        // emit when input property indeterminate is false, prevent recursively emitting event from parent to children, children to parent
                        scope.$broadcast("ParentSelectedChange", get());
                    })));
                    // reset input state base on children inputs
                    scope.$on("childSelectedChange", passThroughThisScope(passIfIsLeafChild(updateBaseOnChildrenState)));
                }
            }
        };
    }
]);