GUI -- implemented Theme Service.
- moved body class handling into Theme Service, (out of Key Service).
Change-Id: Ied0d22523fec36cadef8b9669194089585f73959
diff --git a/web/gui/src/main/webapp/app/fw/util/keys.js b/web/gui/src/main/webapp/app/fw/util/keys.js
index 5cae514..ad8ede5 100644
--- a/web/gui/src/main/webapp/app/fw/util/keys.js
+++ b/web/gui/src/main/webapp/app/fw/util/keys.js
@@ -23,7 +23,7 @@
'use strict';
// references to injected services
- var $log, f;
+ var $log, fs, ts;
// internal state
var keyHandler = {
@@ -32,8 +32,7 @@
viewKeys: {},
viewFn: null,
viewGestures: []
- },
- theme = 'light';
+ };
// TODO: we need to have the concept of view token here..
function getViewToken() {
@@ -76,9 +75,9 @@
key = whatKey(keyCode),
kh = keyHandler,
gk = kh.globalKeys[key],
- gcb = f.isF(gk) || (f.isA(gk) && f.isF(gk[0])),
+ gcb = fs.isF(gk) || (fs.isA(gk) && fs.isF(gk[0])),
vk = kh.viewKeys[key],
- vcb = f.isF(vk) || (f.isA(vk) && f.isF(vk[0])) || f.isF(kh.viewFn),
+ vcb = fs.isF(vk) || (fs.isA(vk) && fs.isF(vk[0])) || fs.isF(kh.viewFn),
token = getViewToken();
d3.event.stopPropagation();
@@ -137,12 +136,7 @@
}
function toggleTheme(view, key, code, ev) {
- var body = d3.select('body');
- theme = (theme === 'light') ? 'dark' : 'light';
- body.classed('light dark', false);
- body.classed(theme, true);
- // TODO: emit theme-change event to current view...
- //theme(view);
+ ts.toggleTheme();
return true;
}
@@ -150,7 +144,7 @@
var viewKeys,
masked = [];
- if (f.isF(keyArg)) {
+ if (fs.isF(keyArg)) {
// set general key handler callback
keyHandler.viewFn = keyArg;
} else {
@@ -173,7 +167,7 @@
var gkeys = d3.map(keyHandler.globalKeys).keys(),
masked = d3.map(keyHandler.maskedKeys).keys(),
vkeys = d3.map(keyHandler.viewKeys).keys(),
- vfn = !!f.isF(keyHandler.viewFn);
+ vfn = !!fs.isF(keyHandler.viewFn);
return {
globalKeys: gkeys,
@@ -184,17 +178,17 @@
}
angular.module('onosUtil')
- .factory('KeyService', ['$log', 'FnService', function ($l, fs) {
- $log = $l;
- f = fs;
+ .factory('KeyService', ['$log', 'FnService', 'ThemeService',
+ function (_$log_, _fs_, _ts_) {
+ $log = _$log_;
+ fs = _fs_;
+ ts = _ts_;
+
return {
installOn: function (elem) {
elem.on('keydown', keyIn);
setupGlobalKeys();
},
- theme: function () {
- return theme;
- },
keyBindings: function (x) {
if (x === undefined) {
return getKeyBindings();
@@ -206,7 +200,7 @@
if (g === undefined) {
return keyHandler.viewGestures;
} else {
- keyHandler.viewGestures = f.isA(g) || [];
+ keyHandler.viewGestures = fs.isA(g) || [];
}
}
};
diff --git a/web/gui/src/main/webapp/app/fw/util/theme.js b/web/gui/src/main/webapp/app/fw/util/theme.js
new file mode 100644
index 0000000..029d463
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/util/theme.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2014 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Util -- Theme Service
+
+ @author Simon Hunt
+ */
+(function () {
+ 'use strict';
+
+ var $log;
+
+ var themes = ['light', 'dark'],
+ themeStr = themes.join(' '),
+ thidx;
+
+ function init() {
+ thidx = 0;
+ updateBodyClass();
+ }
+
+ function getTheme() {
+ return themes[thidx];
+ }
+
+ function setTheme(t) {
+ var idx = themes.indexOf(t);
+ if (idx > -1 && idx !== thidx) {
+ thidx = idx;
+ updateBodyClass();
+ themeEvent('set');
+ }
+ }
+
+ function toggleTheme() {
+ var i = thidx + 1;
+ thidx = (i===themes.length) ? 0 : i;
+ updateBodyClass();
+ themeEvent('toggle');
+ return getTheme();
+ }
+
+ function updateBodyClass() {
+ var body = d3.select('body');
+ body.classed(themeStr, false);
+ body.classed(getTheme(), true);
+ }
+
+ function themeEvent(w) {
+ // TODO: emit a theme-changed event
+ var m = 'Theme-Change-('+w+'): ' + getTheme();
+ $log.debug(m);
+ }
+
+ // TODO: add hook for theme-change listener
+
+ angular.module('onosUtil')
+ .factory('ThemeService', ['$log', function (_$log_) {
+ $log = _$log_;
+ thidx = 0;
+
+ return {
+ init: init,
+ theme: function (x) {
+ if (x === undefined) {
+ return getTheme();
+ } else {
+ setTheme(x);
+ }
+ },
+ toggleTheme: toggleTheme
+ };
+ }]);
+
+}());