Refactoring: ControlPanel is now extracted, which simplifies the main…

… controller. This refactoring is prep work for #22, #24, #30 and pretty much everything that's related to customising Build Monitor on client-by-client basis.
jenkinsci · Dec 18, 2013 · 2f392ca · 2f392ca
1 parent e4528af
commit 2f392ca
Showing 6 changed files with 30 additions and 25 deletions.
diff --git a/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-jobViews.jelly b/...rces/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main-jobViews.jelly
@@ -1,6 +1,6 @@
 <ul id="job-views"
-    style="font-size: {{fontSize}}em"
-    class="columns-{{ numberOfColumns }}">
+    style="font-size: {{ settings.fontSize }}em"
+    class="columns-{{ settings.numberOfColumns }}">
 
     <li ng-repeat="job in jobs" class="{{job.status}}">
         <div class="progress" style="width: {{job.progress}}%">

diff --git a/...onitor/BuildMonitorView/main-config.jelly → ...itor/BuildMonitorView/main-settings.jelly b/...onitor/BuildMonitorView/main-config.jelly → ...itor/BuildMonitorView/main-settings.jelly
@@ -1,16 +1,16 @@
-<nav data-ng-class="{ showSettings:toggleSettings }">
+<nav data-ng-class="{ showSettings:toggleSettings }" data-ng-controller="controlPanel">
     <input id="toggleSettings" type="checkbox" class="settings" data-ng-model="toggleSettings" />
     <label for="toggleSettings" title="Configure Build Monitor Settings">Settings</label>
 
     <!-- workaround for angular-slider not working when initialised within a hidden element -->
     <ul>
         <li>
             <span class="slider-label">Font size</span>
-            <slider floor="0.5" ceiling="2" step="0.1" precision="1" data-ng-model="fontSize"></slider>
+            <slider floor="0.5" ceiling="2" step="0.1" precision="1" data-ng-model="settings.fontSize"></slider>
         </li>
         <li>
             <span class="slider-label">Columns</span>
-            <slider floor="1" ceiling="8" step="1" precision="0" data-ng-model="numberOfColumns"></slider>
+            <slider floor="1" ceiling="8" step="1" precision="0" data-ng-model="settings.numberOfColumns"></slider>
         </li>
         <li>
             <a class="btn"

diff --git a/...ain/resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main.jelly b/...ain/resources/com/smartcodeltd/jenkinsci/plugins/buildmonitor/BuildMonitorView/main.jelly
@@ -27,7 +27,7 @@
                     <h1><a href="configure" title="Configure the '${it.displayName}' view">${it.displayName}</a></h1>
                 </header>
 
-                <st:include page="main-config.jelly"/>
+                <st:include page="main-settings.jelly"/>
 
                 <j:choose>
                     <j:when test="${it.isEmpty()}">
@@ -83,6 +83,7 @@
             <script src="${resourcesURL}/scripts/jenkins.js"></script>
             <script src="${resourcesURL}/scripts/controllers.js"></script>
             <script src="${resourcesURL}/scripts/templates.js"></script>
+            <script src="${resourcesURL}/scripts/settings.js"></script>
             <script>
                 'use strict';
 

diff --git a/src/main/webapp/scripts/app.js b/src/main/webapp/scripts/app.js
@@ -1,9 +1,11 @@
 'use strict';
 
 angular.
-    module('buildMonitor', [ 'buildMonitor.controllers', 'uiSlider', 'jenkins' ]).
-    run(function($rootScope, notifyUser) {
+    module('buildMonitor', [ 'buildMonitor.controllers', 'buildMonitor.settings' ]).
+    run(['$rootScope', 'notifyUser', function($rootScope, notifyUser) {
+        $rootScope.settings = { };
+
         if (! Modernizr.flexbox) {
             notifyUser.aboutInsufficientSupportOfCSS3('flexbox');
         }
-    });
+    }]);
diff --git a/src/main/webapp/scripts/controllers.js b/src/main/webapp/scripts/controllers.js
@@ -1,28 +1,14 @@
 'use strict';
 
 angular.
-    module('buildMonitor.controllers', [ 'buildMonitor.services', 'buildMonitor.cron', 'uiSlider']).
+    module('buildMonitor.controllers', [ 'buildMonitor.services', 'buildMonitor.cron', 'uiSlider', 'jenkins']).
 
     controller('JobViews', ['$scope', '$rootScope', 'proxy', 'cookieJar', 'every', 'connectionErrorHandler',
         function ($scope, $rootScope, proxy, cookieJar, every, connectionErrorHandler) {
-
-            // todo: consider extracting a Configuration Controller
-            $scope.fontSize = cookieJar.get('fontSize', 1);
-            $scope.numberOfColumns = cookieJar.get('numberOfColumns', 2);
-
-            $scope.$watch('fontSize', function (currentFontSize) {
-                cookieJar.put('fontSize', currentFontSize);
-            });
-            $scope.$watch('numberOfColumns', function (currentNumberOfColumns) {
-                cookieJar.put('numberOfColumns', currentNumberOfColumns);
-            });
-
-            //
-
             var handleErrorAndDecideOnNext = connectionErrorHandler.handleErrorAndNotify,
                 fetchJobViews              = proxy.buildMonitor.fetchJobViews;
 
-            $scope.jobs = {};
+            $scope.jobs     = {};
 
             every(5000, function (step) {
 

diff --git a/src/main/webapp/scripts/settings.js b/src/main/webapp/scripts/settings.js
@@ -0,0 +1,16 @@
+angular.
+    module('buildMonitor.settings', [ 'buildMonitor.services', 'uiSlider']).
+
+    controller('controlPanel', ['$scope', 'cookieJar',
+        function ($scope, cookieJar) {
+            'use strict';
+
+            $scope.settings.fontSize        = cookieJar.get('fontSize',        1);
+            $scope.settings.numberOfColumns = cookieJar.get('numberOfColumns', 2);
+
+            angular.forEach($scope.settings, function(value, name) {
+                $scope.$watch('settings.' + name, function(currentValue) {
+                    cookieJar.put(name, currentValue);
+                });
+            });
+        }]);