GUI -- Added KeyService and FnService; implemented 'T' key for toggle theme.
Change-Id: I6ae3cb76aaa5c72422eac180cb46d604ead21afc
Showing
4 changed files
with
212 additions
and
6 deletions
web/gui/src/main/webapp/app/fw/lib/fn.js
0 → 100644
| 1 | +/* | ||
| 2 | + * Copyright 2014 Open Networking Laboratory | ||
| 3 | + * | ||
| 4 | + * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| 5 | + * you may not use this file except in compliance with the License. | ||
| 6 | + * You may obtain a copy of the License at | ||
| 7 | + * | ||
| 8 | + * http://www.apache.org/licenses/LICENSE-2.0 | ||
| 9 | + * | ||
| 10 | + * Unless required by applicable law or agreed to in writing, software | ||
| 11 | + * distributed under the License is distributed on an "AS IS" BASIS, | ||
| 12 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| 13 | + * See the License for the specific language governing permissions and | ||
| 14 | + * limitations under the License. | ||
| 15 | + */ | ||
| 16 | + | ||
| 17 | +/* | ||
| 18 | + ONOS GUI -- General Purpose Functions | ||
| 19 | + | ||
| 20 | + @author Simon Hunt | ||
| 21 | + */ | ||
| 22 | +(function (onos) { | ||
| 23 | + 'use strict'; | ||
| 24 | + | ||
| 25 | + onos.factory('FnService', [function () { | ||
| 26 | + return { | ||
| 27 | + isF: function (f) { | ||
| 28 | + return $.isFunction(f) ? f : null; | ||
| 29 | + }, | ||
| 30 | + isA: function (a) { | ||
| 31 | + return $.isArray(a) ? a : null; | ||
| 32 | + }, | ||
| 33 | + isS: function (s) { | ||
| 34 | + return typeof s === 'string' ? s : null; | ||
| 35 | + }, | ||
| 36 | + isO: function (o) { | ||
| 37 | + return $.isPlainObject(o) ? o : null; | ||
| 38 | + } | ||
| 39 | + }; | ||
| 40 | + }]); | ||
| 41 | + | ||
| 42 | +}(ONOS)); |
web/gui/src/main/webapp/app/fw/lib/keys.js
0 → 100644
| 1 | +/* | ||
| 2 | + * Copyright 2014 Open Networking Laboratory | ||
| 3 | + * | ||
| 4 | + * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| 5 | + * you may not use this file except in compliance with the License. | ||
| 6 | + * You may obtain a copy of the License at | ||
| 7 | + * | ||
| 8 | + * http://www.apache.org/licenses/LICENSE-2.0 | ||
| 9 | + * | ||
| 10 | + * Unless required by applicable law or agreed to in writing, software | ||
| 11 | + * distributed under the License is distributed on an "AS IS" BASIS, | ||
| 12 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| 13 | + * See the License for the specific language governing permissions and | ||
| 14 | + * limitations under the License. | ||
| 15 | + */ | ||
| 16 | + | ||
| 17 | +/* | ||
| 18 | + ONOS GUI -- Key Handler Service | ||
| 19 | + | ||
| 20 | + @author Simon Hunt | ||
| 21 | + */ | ||
| 22 | +(function (onos) { | ||
| 23 | + 'use strict'; | ||
| 24 | + | ||
| 25 | + // references to injected services | ||
| 26 | + var f; | ||
| 27 | + | ||
| 28 | + // internal state | ||
| 29 | + var keyHandler = { | ||
| 30 | + globalKeys: {}, | ||
| 31 | + maskedKeys: {}, | ||
| 32 | + viewKeys: {}, | ||
| 33 | + viewFn: null, | ||
| 34 | + viewGestures: [] | ||
| 35 | + }, | ||
| 36 | + theme = 'light'; | ||
| 37 | + | ||
| 38 | + // TODO: we need to have the concept of view token here.. | ||
| 39 | + function getViewToken() { | ||
| 40 | + return 'NotYetAViewToken'; | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + function whatKey(code) { | ||
| 44 | + switch (code) { | ||
| 45 | + case 13: return 'enter'; | ||
| 46 | + case 16: return 'shift'; | ||
| 47 | + case 17: return 'ctrl'; | ||
| 48 | + case 18: return 'alt'; | ||
| 49 | + case 27: return 'esc'; | ||
| 50 | + case 32: return 'space'; | ||
| 51 | + case 37: return 'leftArrow'; | ||
| 52 | + case 38: return 'upArrow'; | ||
| 53 | + case 39: return 'rightArrow'; | ||
| 54 | + case 40: return 'downArrow'; | ||
| 55 | + case 91: return 'cmdLeft'; | ||
| 56 | + case 93: return 'cmdRight'; | ||
| 57 | + case 187: return 'equals'; | ||
| 58 | + case 189: return 'dash'; | ||
| 59 | + case 191: return 'slash'; | ||
| 60 | + case 192: return 'backQuote'; | ||
| 61 | + case 220: return 'backSlash'; | ||
| 62 | + default: | ||
| 63 | + if ((code >= 48 && code <= 57) || | ||
| 64 | + (code >= 65 && code <= 90)) { | ||
| 65 | + return String.fromCharCode(code); | ||
| 66 | + } else if (code >= 112 && code <= 123) { | ||
| 67 | + return 'F' + (code - 111); | ||
| 68 | + } | ||
| 69 | + return '.'; | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + | ||
| 73 | + function keyIn() { | ||
| 74 | + var event = d3.event, | ||
| 75 | + keyCode = event.keyCode, | ||
| 76 | + key = whatKey(keyCode), | ||
| 77 | + kh = keyHandler, | ||
| 78 | + gk = kh.globalKeys[key], | ||
| 79 | + gcb = f.isF(gk) || (f.isA(gk) && f.isF(gk[0])), | ||
| 80 | + vk = kh.viewKeys[key], | ||
| 81 | + vcb = f.isF(vk) || (f.isA(vk) && f.isF(vk[0])) || f.isF(kh.viewFn), | ||
| 82 | + token = getViewToken(); | ||
| 83 | + | ||
| 84 | + // global callback? | ||
| 85 | + if (gcb && gcb(token, key, keyCode, event)) { | ||
| 86 | + // if the event was 'handled', we are done | ||
| 87 | + return; | ||
| 88 | + } | ||
| 89 | + // otherwise, let the view callback have a shot | ||
| 90 | + if (vcb) { | ||
| 91 | + vcb(token, key, keyCode, event); | ||
| 92 | + } | ||
| 93 | + } | ||
| 94 | + | ||
| 95 | + function setupGlobalKeys() { | ||
| 96 | + $.extend(keyHandler, { | ||
| 97 | + globalKeys: { | ||
| 98 | + backSlash: [quickHelp, 'Show / hide Quick Help'], | ||
| 99 | + slash: [quickHelp, 'Show / hide Quick Help'], | ||
| 100 | + esc: [escapeKey, 'Dismiss dialog or cancel selections'], | ||
| 101 | + T: [toggleTheme, "Toggle theme"] | ||
| 102 | + }, | ||
| 103 | + globalFormat: ['backSlash', 'slash', 'esc', 'T'], | ||
| 104 | + | ||
| 105 | + // Masked keys are global key handlers that always return true. | ||
| 106 | + // That is, the view will never see the event for that key. | ||
| 107 | + maskedKeys: { | ||
| 108 | + slash: true, | ||
| 109 | + backSlash: true, | ||
| 110 | + T: true | ||
| 111 | + } | ||
| 112 | + }); | ||
| 113 | + } | ||
| 114 | + | ||
| 115 | + function quickHelp(view, key, code, ev) { | ||
| 116 | + // TODO: show quick help | ||
| 117 | + //libApi.quickHelp.show(keyHandler); | ||
| 118 | + console.log('QUICK-HELP'); | ||
| 119 | + return true; | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + function escapeKey(view, key, code, ev) { | ||
| 123 | + // TODO: plumb in handling of alerts and quick help dismissal | ||
| 124 | +/* | ||
| 125 | + if (alerts.open) { | ||
| 126 | + closeAlerts(); | ||
| 127 | + return true; | ||
| 128 | + } | ||
| 129 | + if (libApi.quickHelp.hide()) { | ||
| 130 | + return true; | ||
| 131 | + } | ||
| 132 | +*/ | ||
| 133 | + console.log('ESCAPE'); | ||
| 134 | + return false; | ||
| 135 | + } | ||
| 136 | + | ||
| 137 | + function toggleTheme(view, key, code, ev) { | ||
| 138 | + var body = d3.select('body'); | ||
| 139 | + theme = (theme === 'light') ? 'dark' : 'light'; | ||
| 140 | + body.classed('light dark', false); | ||
| 141 | + body.classed(theme, true); | ||
| 142 | + // TODO: emit theme-change event to current view... | ||
| 143 | + //theme(view); | ||
| 144 | + return true; | ||
| 145 | + } | ||
| 146 | + | ||
| 147 | + onos.factory('KeyService', ['FnService', function (fs) { | ||
| 148 | + f = fs; | ||
| 149 | + return { | ||
| 150 | + init: function () { | ||
| 151 | + console.log('initializing keydown handler....'); | ||
| 152 | + d3.select('body').on('keydown', keyIn); | ||
| 153 | + setupGlobalKeys(); | ||
| 154 | + } | ||
| 155 | + }; | ||
| 156 | + }]); | ||
| 157 | + | ||
| 158 | +}(ONOS)); |
| ... | @@ -27,13 +27,13 @@ | ... | @@ -27,13 +27,13 @@ |
| 27 | 27 | ||
| 28 | <script src="../tp/d3.js"></script> | 28 | <script src="../tp/d3.js"></script> |
| 29 | <script src="../tp/topojson.v1.min.js"></script> | 29 | <script src="../tp/topojson.v1.min.js"></script> |
| 30 | - | 30 | + <script src="../tp/jquery-2.1.1.min.js"></script> |
| 31 | - <!-- NOTE: We are going to see if we can dispense with jQuery... --> | ||
| 32 | - <!--<script src="../tp/jquery-2.1.1.min.js"></script>--> | ||
| 33 | 31 | ||
| 34 | <!-- ONOS UI Framework included here --> | 32 | <!-- ONOS UI Framework included here --> |
| 35 | <!-- TODO: use a single catenated-minified file here --> | 33 | <!-- TODO: use a single catenated-minified file here --> |
| 36 | <script src="onos.js"></script> | 34 | <script src="onos.js"></script> |
| 35 | + <script src="fw/lib/fn.js"></script> | ||
| 36 | + <script src="fw/lib/keys.js"></script> | ||
| 37 | <script src="fw/mast/mast.js"></script> | 37 | <script src="fw/mast/mast.js"></script> |
| 38 | 38 | ||
| 39 | <!-- Framework and library stylesheets included here --> | 39 | <!-- Framework and library stylesheets included here --> |
| ... | @@ -50,6 +50,7 @@ | ... | @@ -50,6 +50,7 @@ |
| 50 | <!-- TODO: inject style-sheet refs server-side --> | 50 | <!-- TODO: inject style-sheet refs server-side --> |
| 51 | </head> | 51 | </head> |
| 52 | <body class="light" ng-app="onosApp"> | 52 | <body class="light" ng-app="onosApp"> |
| 53 | + <div id="frame" ng-controller="OnosCtrl as onosCtrl"> | ||
| 53 | <div id="mast" | 54 | <div id="mast" |
| 54 | ng-controller="MastCtrl as mastCtrl" | 55 | ng-controller="MastCtrl as mastCtrl" |
| 55 | ng-include="'fw/mast/mast.html'"></div> | 56 | ng-include="'fw/mast/mast.html'"></div> |
| ... | @@ -61,5 +62,6 @@ | ... | @@ -61,5 +62,6 @@ |
| 61 | <div id="flash"></div> | 62 | <div id="flash"></div> |
| 62 | <div id="quickhelp"></div> | 63 | <div id="quickhelp"></div> |
| 63 | <div id="deathmask"></div> | 64 | <div id="deathmask"></div> |
| 65 | + </div> | ||
| 64 | </body> | 66 | </body> |
| 65 | </html> | 67 | </html> | ... | ... |
| ... | @@ -19,13 +19,17 @@ | ... | @@ -19,13 +19,17 @@ |
| 19 | 19 | ||
| 20 | @author Simon Hunt | 20 | @author Simon Hunt |
| 21 | */ | 21 | */ |
| 22 | + | ||
| 23 | +// our one global variable | ||
| 24 | +var ONOS; | ||
| 25 | + | ||
| 22 | (function () { | 26 | (function () { |
| 23 | 'use strict'; | 27 | 'use strict'; |
| 24 | 28 | ||
| 25 | - angular.module('onosApp', ['onosMast']) | 29 | + ONOS = angular.module('onosApp', ['onosMast']) |
| 26 | - .controller('OnosCtrl', [function () { | 30 | + .controller('OnosCtrl', ['KeyService', function (ks) { |
| 27 | - // controller logic here | ||
| 28 | console.log('OnosCtrl has been created'); | 31 | console.log('OnosCtrl has been created'); |
| 32 | + ks.init(); | ||
| 29 | }]); | 33 | }]); |
| 30 | 34 | ||
| 31 | }()); | 35 | }()); | ... | ... |
-
Please register or login to post a comment