support custom page title placeholder style, and display preview in ariang settings page

src/index.html

@@ -334,6 +334,7 @@
 <script src="scripts/services/ariaNgMonitorService.js"></script>
 <script src="scripts/services/ariaNgNotificationService.js"></script>
 <script src="scripts/services/ariaNgSettingService.js"></script>
+<script src="scripts/services/ariaNgTitleService.js"></script>
 <script src="scripts/services/ariaNgLogService.js"></script>
 <script src="scripts/services/aria2HttpRpcService.js"></script>
 <script src="scripts/services/aria2WebSocketRpcService.js"></script>

src/langs/zh_CN.txt

@@ -122,6 +122,9 @@ Download Error=下载出错
 Language=语言
 Debug Mode=调试模式
 Page Title=页面标题
+Preview=预览
+Tips: You can use the "noprefix" tag to ignore the prefix, "nosuffix" tag ignore the suffix, and "scale\=n" tag to set the decimal precision.=小提示: 您可以使用 "noprefix" 标签忽略前缀, "nosuffix" 标签忽略后缀, 以及 "scale\=n" 标签设置小数的精度.
+Example: ${downspeed:noprefix:nosuffix:scale\=1}=示例: ${downspeed:noprefix:nosuffix:scale\=1}
 Page Title Refresh Interval=页面标题刷新间隔
 Enable Browser Notification=启用浏览器通知
 Aria2 RPC Host=Aria2 RPC 主机

src/scripts/config/defaultLanguage.js

@@ -126,6 +126,9 @@
             'Language': 'Language',
             'Debug Mode': 'Debug Mode',
             'Page Title': 'Page Title',
+            'Preview': 'Preview',
+            'Tips: You can use the "noprefix" tag to ignore the prefix, "nosuffix" tag ignore the suffix, and "scale=n" tag to set the decimal precision.': 'Tips: You can use the "noprefix" tag to ignore the prefix, "nosuffix" tag ignore the suffix, and "scale=n" tag to set the decimal precision.',
+            'Example: ${downspeed:noprefix:nosuffix:scale=1}': 'Example: ${downspeed:noprefix:nosuffix:scale=1}',
             'Page Title Refresh Interval': 'Page Title Refresh Interval',
             'Enable Browser Notification': 'Enable Browser Notification',
             'Aria2 RPC Host': 'Aria2 RPC Host',

src/scripts/controllers/main.js

@@ -1,26 +1,12 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').controller('MainController', ['$rootScope', '$scope', '$route', '$location', '$document', '$interval', 'aria2RpcErrors', 'ariaNgCommonService', 'ariaNgSettingService', 'ariaNgMonitorService', 'ariaNgNotificationService', 'aria2TaskService', 'aria2SettingService', function ($rootScope, $scope, $route, $location, $document, $interval, aria2RpcErrors, ariaNgCommonService, ariaNgSettingService, ariaNgMonitorService, ariaNgNotificationService, aria2TaskService, aria2SettingService) {
+    angular.module('ariaNg').controller('MainController', ['$rootScope', '$scope', '$route', '$location', '$document', '$interval', 'aria2RpcErrors', 'ariaNgCommonService', 'ariaNgSettingService', 'ariaNgTitleService', 'ariaNgMonitorService', 'ariaNgNotificationService', 'aria2TaskService', 'aria2SettingService', function ($rootScope, $scope, $route, $location, $document, $interval, aria2RpcErrors, ariaNgCommonService, ariaNgSettingService, ariaNgTitleService, ariaNgMonitorService, ariaNgNotificationService, aria2TaskService, aria2SettingService) {
         var pageTitleRefreshPromise = null;
         var globalStatRefreshPromise = null;
 
         var refreshPageTitle = function () {
-            var context = (function (globalStat) {
+            $document[0].title = ariaNgTitleService.getFinalTitleByGlobalStat($scope.globalStat);
-                if (!globalStat) {
-                    return null;
-                }
-
-                return {
-                    downloadingCount: globalStat.numActive,
-                    waitingCount: globalStat.numWaiting,
-                    stoppedCount: globalStat.numStopped,
-                    downloadSpeed: globalStat.downloadSpeed,
-                    uploadSpeed: globalStat.uploadSpeed
-                };
-            })($scope.globalStat);
-
-            $document[0].title = ariaNgSettingService.getFinalTitle(context);
         };
 
         var refreshGlobalStat = function (silent, callback) {

src/scripts/controllers/settings-ariang.js

@@ -1,13 +1,18 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').controller('AriaNgSettingsController', ['$rootScope', '$scope', '$routeParams', '$timeout', 'ariaNgLanguages', 'ariaNgCommonService', 'ariaNgSettingService', 'ariaNgNotificationService', function ($rootScope, $scope, $routeParams, $timeout, ariaNgLanguages, ariaNgCommonService, ariaNgSettingService, ariaNgNotificationService) {
+    angular.module('ariaNg').controller('AriaNgSettingsController', ['$rootScope', '$scope', '$routeParams', '$interval', '$timeout', 'ariaNgLanguages', 'ariaNgCommonService', 'ariaNgSettingService', 'ariaNgMonitorService', 'ariaNgNotificationService', 'ariaNgTitleService', function ($rootScope, $scope, $routeParams, $interval, $timeout, ariaNgLanguages, ariaNgCommonService, ariaNgSettingService, ariaNgMonitorService, ariaNgNotificationService, ariaNgTitleService) {
         var tabOrders = ['global', 'rpc'];
         var extendType = $routeParams.extendType;
 
+        var getFinalTitle = function () {
+            return ariaNgTitleService.getFinalTitleByGlobalStat(ariaNgMonitorService.getCurrentGlobalStat());
+        };
+
         $scope.context = {
             currentTab: 'global',
             languages: ariaNgLanguages,
+            titlePreview: getFinalTitle(),
             availableTime: ariaNgCommonService.getTimeOptions([1000, 2000, 3000, 5000, 10000, 30000, 60000], true),
             trueFalseOptions: [{name: 'True', value: true}, {name: 'False', value: false}],
             showRpcSecret: false,
@@ -21,6 +26,10 @@
             $scope.context.currentTab = tabName;
         };
 
+        $scope.updateTitlePreview = function () {
+            $scope.context.titlePreview = getFinalTitle();
+        };
+
         $rootScope.swipeActions.extentLeftSwipe = function () {
             var tabIndex = tabOrders.indexOf($scope.context.currentTab);
 

src/scripts/services/ariaNgMonitorService.js

@@ -2,6 +2,7 @@
     'use strict';
 
     angular.module('ariaNg').factory('ariaNgMonitorService', ['$filter', '$translate', 'moment', 'ariaNgConstants', function ($filter, $translate, moment, ariaNgConstants) {
+        var currentGlobalStat = {};
         var storagesInMemory = {};
         var globalStorageKey = 'global';
 
@@ -149,10 +150,14 @@
                 return this.getStatsData(key);
             },
             recordGlobalStat: function (stat) {
-                return this.recordStat(globalStorageKey, stat);
+                this.recordStat(globalStorageKey, stat);
+                currentGlobalStat = stat;
             },
             getGlobalStatsData: function () {
                 return this.getStatsData(globalStorageKey);
+            },
+            getCurrentGlobalStat: function () {
+                return currentGlobalStat;
             }
         };
     }]);

src/scripts/services/ariaNgSettingService.js

@@ -124,26 +124,6 @@
             getTitle: function () {
                 return getOption('title');
             },
-            getFinalTitle: function (context) {
-                var title = this.getTitle();
-
-                context = angular.extend({
-                    downloadingCount: 0,
-                    waitingCount: 0,
-                    stoppedCount: 0,
-                    downloadSpeed: 0,
-                    uploadSpeed: 0
-                }, context);
-
-                title = title.replace(/\$\{downloading\}/g, $translate.instant('Downloading') + ': ' + context.downloadingCount);
-                title = title.replace(/\$\{waiting\}/g, $translate.instant('Waiting') + ': ' + context.waitingCount);
-                title = title.replace(/\$\{stopped\}/g, $translate.instant('Downloaded / Stopped') + ': ' + context.stoppedCount);
-                title = title.replace(/\$\{downspeed\}/g, $translate.instant('Download') + ': ' + $filter('readableVolumn')(context.downloadSpeed) + '/s');
-                title = title.replace(/\$\{upspeed\}/g, $translate.instant('Upload') + ': ' + $filter('readableVolumn')(context.uploadSpeed) + '/s');
-                title = title.replace(/\$\{title\}/g, ariaNgConstants.title);
-
-                return title;
-            },
             setTitle: function (value) {
                 setOption('title', value);
             },

src/scripts/services/ariaNgTitleService.js

@@ -0,0 +1,143 @@
+(function () {
+    'use strict';
+
+    angular.module('ariaNg').factory('ariaNgTitleService', ['$filter', '$translate', 'ariaNgConstants', 'ariaNgSettingService', function ($filter, $translate, ariaNgConstants, ariaNgSettingService) {
+        var parseSettings = function (placeholder) {
+            if (!placeholder) {
+                return {};
+            }
+
+            var innerText = placeholder.substring(2, placeholder.length - 1); // remove ${ and }
+            var items = innerText.split(':');
+
+            var settings = {
+                oldValue: placeholder
+            };
+
+            for (var i = 1; i < items.length; i++) {
+                var pairs = items[i].split('=');
+
+                if (pairs.length == 1) {
+                    settings[pairs[0]] = true;
+                } else if (pairs.length == 2) {
+                    settings[pairs[0]] = pairs[1];
+                }
+            }
+
+            return settings;
+        };
+
+        var replacePlaerholder = function (title, context) {
+            var value = context.value;
+
+            if (context.type === 'volumn') {
+                value = $filter('readableVolumn')(value, context.scale);
+            }
+
+            if (context.prefix && !context.noprefix) {
+                value = context.prefix + value;
+            }
+
+            if (context.suffix && !context.nosuffix) {
+                value = value + context.suffix;
+            }
+
+            return title.replace(context.oldValue, value);
+        };
+
+        var replacePlaceholders = function (title, condition, context) {
+            var regex = new RegExp('\\$\\{' + condition + '(:[a-zA-Z0-9]+(=[a-zA-Z0-9]+)?)*\\}', 'g');
+            var results = title.match(regex);
+
+            if (results && results.length > 0) {
+                for (var i = 0; i < results.length; i++) {
+                    var innerContext = parseSettings(results[i]);
+                    angular.extend(innerContext, context);
+
+                    title = replacePlaerholder(title, innerContext);
+                }
+            }
+
+            return title;
+        };
+
+        var replaceDownloadingCount = function (title, value) {
+            return replacePlaceholders(title, 'downloading', {
+                prefix: $translate.instant('Downloading') + ': ',
+                value: value
+            });
+        };
+
+        var replaceWaitingCount = function (title, value) {
+            return replacePlaceholders(title, 'waiting', {
+                prefix: $translate.instant('Waiting') + ': ',
+                value: value
+            });
+        };
+
+        var replaceStoppedCount = function (title, value) {
+            return replacePlaceholders(title, 'stopped', {
+                prefix: $translate.instant('Downloaded / Stopped'),
+                value: value
+            });
+        };
+
+        var replaceDownloadSpeed = function (title, value) {
+            return replacePlaceholders(title, 'downspeed', {
+                prefix: $translate.instant('Download') + ': ',
+                value: value,
+                type: 'volumn',
+                suffix: '/s'
+            });
+        };
+
+        var replaceUploadSpeed = function (title, value) {
+            return replacePlaceholders(title, 'upspeed', {
+                prefix: $translate.instant('Upload') + ': ',
+                value: value,
+                type: 'volumn',
+                suffix: '/s'
+            });
+        };
+
+        var replaceAgiaNgTitle = function (title) {
+            return replacePlaceholders(title, 'title', {
+                value: ariaNgConstants.title
+            });
+        };
+
+        return {
+            getFinalTitle: function (context) {
+                var title = ariaNgSettingService.getTitle();
+
+                context = angular.extend({
+                    downloadingCount: 0,
+                    waitingCount: 0,
+                    stoppedCount: 0,
+                    downloadSpeed: 0,
+                    uploadSpeed: 0
+                }, context);
+
+                title = replaceDownloadingCount(title, context.downloadingCount);
+                title = replaceWaitingCount(title, context.waitingCount);
+                title = replaceStoppedCount(title, context.stoppedCount);
+                title = replaceDownloadSpeed(title, context.downloadSpeed);
+                title = replaceUploadSpeed(title, context.uploadSpeed);
+                title = replaceAgiaNgTitle(title);
+
+                return title;
+            },
+            getFinalTitleByGlobalStat: function (globalStat) {
+                var context = {
+                    downloadingCount: globalStat.numActive,
+                    waitingCount: globalStat.numWaiting,
+                    stoppedCount: globalStat.numStopped,
+                    downloadSpeed: globalStat.downloadSpeed,
+                    uploadSpeed: globalStat.uploadSpeed
+                };
+
+                return this.getFinalTitle(context);
+            }
+        };
+    }]);
+}());

src/views/settings-ariang.html

@@ -38,11 +38,20 @@
                             <span translate>Page Title</span>
                             <i class="icon-primary fa fa-question-circle" data-toggle="popover"
                                data-trigger="hover" data-placement="auto right" data-container="body" data-html="true"
-                               data-content="{{('Supported Placeholder' | translate) + ':<br/>' + ('AriaNg Title' | translate) + ': ${title}<br/>' + ('Downloading Count' | translate) + ': ${downloading}<br/>' + ('Waiting Count' | translate) + ': ${waiting}<br/>' + ('Stopped Count' | translate) + ': ${stopped}<br/>' + ('Download Speed' | translate) + ': ${downspeed}<br/>' + ('Upload Speed' | translate) + ': ${upspeed}<br/>'}}"></i>
+                               data-content="{{('Supported Placeholder' | translate) + ':<br/>' +
+                               ('AriaNg Title' | translate) + ': ${title}<br/>' +
+                               ('Downloading Count' | translate) + ': ${downloading}<br/>' +
+                                ('Waiting Count' | translate) + ': ${waiting}<br/>' +
+                                ('Stopped Count' | translate) + ': ${stopped}<br/>' +
+                                ('Download Speed' | translate) + ': ${downspeed}<br/>' +
+                                ('Upload Speed' | translate) + ': ${upspeed}<br/><br/>' +
+                                ('Tips: You can use the &quot;noprefix&quot; tag to ignore the prefix, &quot;nosuffix&quot; tag ignore the suffix, and &quot;scale=n&quot; tag to set the decimal precision.' | translate) + '<br/>' +
+                                ('Example: ${downspeed:noprefix:nosuffix:scale=1}' | translate)}}"></i>
                         </div>
                         <div class="setting-value col-sm-8">
                             <input class="form-control" type="text" ng-model="context.settings.title"
-                                   ng-change="settingService.setTitle(context.settings.title)"/>
+                                   ng-change="settingService.setTitle(context.settings.title); updateTitlePreview()"/>
+                            <em>[<span translate>Preview</span>] <span ng-bind="context.titlePreview"></span></em>
                         </div>
                     </div>
                     <div class="row">