refactor code

app/index.html

@@ -276,6 +276,7 @@
 <script src="scripts/controllers/settings-aria2.js"></script>
 <script src="scripts/controllers/status.js"></script>
 <script src="scripts/directives/placeholder.js"></script>
+<script src="scripts/directives/setting.js"></script>
 <script src="scripts/filters/dateDuration.js"></script>
 <script src="scripts/filters/fileOrderBy.js"></script>
 <script src="scripts/filters/percent.js"></script>

app/scripts/controllers/settings-aria2.js

@@ -1,9 +1,8 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').controller('Aria2SettingsController', ['$rootScope', '$scope', '$location', '$timeout', 'ariaNgConstants', 'ariaNgCommonService', 'aria2SettingService', function ($rootScope, $scope, $location, $timeout, ariaNgConstants, ariaNgCommonService, aria2SettingService) {
+    angular.module('ariaNg').controller('Aria2SettingsController', ['$rootScope', '$scope', '$location', 'ariaNgConstants', 'ariaNgCommonService', 'aria2SettingService', function ($rootScope, $scope, $location, ariaNgConstants, ariaNgCommonService, aria2SettingService) {
         var location = $location.path().substring($location.path().lastIndexOf('/') + 1);
-        var pendingSaveRequests = {};
 
         var getAvailableOptions = function (type) {
             var keys = aria2SettingService.getAvailableOptionsKeys(type);
@@ -19,33 +18,16 @@
         $scope.optionStatus = {};
         $scope.availableOptions = getAvailableOptions(location);
 
-        $scope.setGlobalOption = function (option, value, lazySave) {
+        $scope.pendingGlobalOption = function (key, value) {
-            if (!option || !option.key || option.readonly) {
+            $scope.optionStatus[key] = 'pending';
-                return;
+        };
-            }
 
-            var key = option.key;
+        $scope.setGlobalOption = function (key, value) {
-            var invoke = function () {
+            $scope.optionStatus[key] = 'saving';
-                $scope.optionStatus[key] = 'saving';
 
-                return aria2SettingService.setGlobalOption(key, value, function (result) {
+            return aria2SettingService.setGlobalOption(key, value, function (result) {
-                    $scope.optionStatus[key] = 'saved';
+                $scope.optionStatus[key] = 'saved';
-                });
+            });
-            };
-
-            delete $scope.optionStatus[key];
-
-            if (lazySave) {
-                if (pendingSaveRequests[key]) {
-                    $timeout.cancel(pendingSaveRequests[key]);
-                }
-
-                pendingSaveRequests[key] = $timeout(function () {
-                    invoke();
-                }, ariaNgConstants.lazySaveTimeout);
-            } else {
-                invoke();
-            }
         };
 
         $rootScope.loadPromise = (function () {

app/scripts/directives/setting.js

@@ -0,0 +1,72 @@
+(function () {
+    'use strict';
+
+    angular.module("ariaNg").directive('ngSetting', ['$timeout', 'ariaNgConstants', function ($timeout, ariaNgConstants) {
+        return {
+            restrict: 'E',
+            templateUrl: "views/setting.html",
+            require: '?ngModel',
+            replace: true,
+            scope: {
+                option: '=',
+                ngModel: '=',
+                status: '=',
+                beforeChangeValue: '&',
+                onChangeValue: '&'
+            },
+            link: function (scope, element, attrs, ngModel) {
+                var pendingSaveRequest = null;
+                var options = {
+                    lazySaveTimeout: ariaNgConstants.lazySaveTimeout
+                };
+
+                angular.extend(options, attrs);
+
+                scope.getTotalCount = function () {
+                    if (!scope.optionValue && !angular.isString(scope.optionValue)) {
+                        return 0;
+                    }
+
+                    return scope.optionValue.split(scope.option.split).length;
+                };
+
+                scope.changeValue = function (optionValue, lazySave) {
+                    scope.optionValue = optionValue;
+
+                    if (!scope.option || !scope.option.key || scope.option.readonly) {
+                        return;
+                    }
+
+                    var data = {
+                        key: scope.option.key,
+                        value: optionValue
+                    };
+
+                    if (scope.beforeChangeValue) {
+                        scope.beforeChangeValue(data);
+                    }
+
+                    if (pendingSaveRequest) {
+                        $timeout.cancel(pendingSaveRequest);
+                    }
+
+                    if (scope.onChangeValue) {
+                        if (lazySave) {
+                            pendingSaveRequest = $timeout(function () {
+                                scope.onChangeValue(data);
+                            }, options.lazySaveTimeout);
+                        } else {
+                            scope.onChangeValue(data);
+                        }
+                    }
+                };
+
+                scope.$watch(function () {
+                    return ngModel.$viewValue;
+                }, function (value) {
+                    scope.optionValue = value;
+                });
+            }
+        };
+    }]);
+})();

app/views/setting.html

@@ -0,0 +1,54 @@
+<div class="row" data-option-key="{{option.key}}">
+    <div class="setting-key setting-key-without-desc col-sm-4">
+        <span ng-bind="option.nameKey | translate"></span>
+        <em ng-bind="'(' + option.key + ')'"></em>
+        <i class="icon-primary fa fa-question-circle" data-toggle="tooltip" data-placement="right"
+           title="{{option.descriptionKey | translate}}" ng-if="(option.descriptionKey | translate) != ''"></i>
+        <span class="description" ng-if="option.showCount && option.split && optionValue"
+              ng-bind="'(' + ('Total Count' | translate) + ': ' + getTotalCount() + ')'"></span>
+    </div>
+    <div class="setting-value col-sm-8">
+        <div ng-class="{'input-group': option.suffix}">
+            <div class="form-group" ng-if="option.type == 'string' || option.type == 'integer' || option.type == 'float'"
+                 ng-class="{'has-success': status && status == 'saved'}">
+                <div class="has-feedback">
+                    <input class="form-control" type="text" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, true)"/>
+                    <div class="form-control-icon" ng-if="status">
+                    <span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="form-group" ng-if="option.type == 'text'" ng-class="{'has-success': status && status == 'saved'}">
+                <div class="has-feedback">
+                    <textarea class="form-control" rows="6" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, true)"></textarea>
+                    <div class="form-control-icon" ng-if="status">
+                    <span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="form-group" ng-if="option.type == 'boolean'" ng-class="{'has-success': status && status == 'saved'}">
+                <div class="has-feedback">
+                    <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, false)">
+                        <option value="true" translate>True</option>
+                        <option value="false" translate>False</option>
+                    </select>
+                    <div class="form-control-icon" ng-if="status">
+                    <span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="form-group" ng-if="option.type == 'option'" ng-class="{'has-success': status && status == 'saved'}">
+                <div class="has-feedback">
+                    <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
+                            ng-model="optionValue" ng-change="changeValue(optionValue, false)"
+                            ng-options="(value | translate) for value in option.options">
+                    </select>
+                    <div class="form-control-icon" ng-if="status">
+                        <span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
+                    </div>
+                </div>
+            </div>
+            <span class="input-group-addon" ng-if="option.suffix" ng-bind="option.suffix | translate"></span>
+        </div>
+    </div>
+</div>

app/views/settings-aria2.html

@@ -1,73 +1,6 @@
 <section class="content no-padding">
     <div class="settings-table">
-        <div class="row" ng-repeat="option in availableOptions" data-option-key="{{option.key}}">
+        <ng-setting ng-repeat="option in availableOptions" option="option" ng-model="globalOptions[option.key]" status="optionStatus[option.key]"
-            <div class="setting-key setting-key-without-desc col-sm-4">
+                    before-change-value="pendingGlobalOption(key, value)" on-change-value="setGlobalOption(key, value)"></ng-setting>
-                <span ng-bind="option.nameKey | translate"></span>
-                <em ng-bind="'(' + option.key + ')'"></em>
-                <i class="icon-primary fa fa-question-circle" data-toggle="tooltip" data-placement="right"
-                   title="{{option.descriptionKey | translate}}"
-                   ng-if="(option.descriptionKey | translate) != ''"></i>
-                <span class="description" ng-if="option.showCount && option.split && globalOptions[option.key]"
-                      ng-bind="'(' + ('Total Count' | translate) + ': ' + globalOptions[option.key].split(option.split).length + ')'"></span>
-            </div>
-            <div class="setting-value col-sm-8">
-                <div ng-class="{'input-group': option.suffix}">
-                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
-                         ng-if="option.type == 'string' || option.type == 'integer' || option.type == 'float'">
-                        <div class="has-feedback">
-                            <input class="form-control" type="text" ng-disabled="!!option.readonly"
-                                   ng-model="globalOptions[option.key]"
-                                   ng-change="setGlobalOption(option, globalOptions[option.key], true)"/>
-                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
-                                <span class="fa form-control-feedback"
-                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
-                         ng-if="option.type == 'text'">
-                        <div class="has-feedback">
-                            <textarea class="form-control" rows="6" ng-disabled="!!option.readonly"
-                                      ng-model="globalOptions[option.key]"
-                                      ng-change="setGlobalOption(option, globalOptions[option.key], true)"></textarea>
-                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
-                                <span class="fa form-control-feedback"
-                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
-                         ng-if="option.type == 'boolean'">
-                        <div class="has-feedback">
-                            <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
-                                    ng-model="globalOptions[option.key]"
-                                    ng-change="setGlobalOption(option, globalOptions[option.key], false)">
-                                <option value="true" translate>True</option>
-                                <option value="false" translate>False</option>
-                            </select>
-                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
-                                <span class="fa form-control-feedback"
-                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
-                         ng-if="option.type == 'option'">
-                        <div class="has-feedback">
-                            <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
-                                    ng-model="globalOptions[option.key]"
-                                    ng-change="setGlobalOption(option, globalOptions[option.key], false)" ng-options="(value | translate) for value in option.options">
-                            </select>
-                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
-                                <span class="fa form-control-feedback"
-                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
-                            </div>
-                        </div>
-                    </div>
-                    <span class="input-group-addon" ng-if="option.suffix" ng-bind="option.suffix | translate"></span>
-                </div>
-            </div>
-        </div>
     </div>
 </section>