홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
068814de 1 parent 5460d624

GUI -- Resize and table directives clean up. Veil service given init function and unit tests. 

Change-Id: I7c29db8f2c79e83e880c96854297c4a432e12d48
Inline Side-by-side
Showing 8 changed files with 123 additions and 71 deletions
...@@ -25,32 +25,39 @@ ...@@ -25,32 +25,39 @@
25 25
26 // Create a resize directive, that we can apply to elements 26 // Create a resize directive, that we can apply to elements
27 // so that they can respond to window resize events. 27 // so that they can respond to window resize events.
28 - .directive('resize', ['$window', function ($window) { 28 + .directive('resize', ['$window', 'FnService', function ($window, fs) {
29 - return function (scope, element, attrs) { 29 + return {
30 - var w = angular.element($window); 30 + scope: {
31 - scope.$watch(function () { 31 + offsetHeight: '@',
32 - return { 32 + offsetWidth: '@',
33 - h: window.innerHeight, 33 + notifier: '&'
34 - w: window.innerWidth 34 + },
35 - }; 35 + link: function (scope, element) {
36 - }, function (newVal, oldVal) { 36 + var elem = d3.select(element[0]);
37 - scope.windowHeight = newVal.h; 37 + scope.$watchCollection(function () {
38 - scope.windowWidth = newVal.w;
39 -
40 - scope.resizeWithOffset = function (offH, offW) {
41 - var oh = offH || 0,
42 - ow = offW || 0;
43 - scope.$eval(attrs.notifier);
44 return { 38 return {
45 - height: (newVal.h - oh) + 'px', 39 + h: $window.innerHeight,
46 - width: (newVal.w - ow) + 'px' 40 + w: $window.innerWidth
47 }; 41 };
48 - }; 42 + }, function () {
49 - }, true); 43 + var offH = scope.offsetHeight || 0,
44 + offW = scope.offsetWidth || 0,
45 + wsz = fs.windowSize(offH, offW);
46 +
47 + elem.style({
48 + height: wsz.height + 'px',
49 + width: wsz.width + 'px'
50 + });
50 51
51 - w.bind('resize', function () { 52 + if (fs.isF(scope.notifier)) {
52 - scope.$apply(); 53 + scope.notifier();
53 - }); 54 + }
55 + });
56 +
57 + angular.element($window).bind('resize', function () {
58 + scope.$apply();
59 + });
60 + }
54 }; 61 };
55 }]) 62 }])
56 63
...@@ -69,15 +76,14 @@ ...@@ -69,15 +76,14 @@
69 scope.iconId, scope.iconSize); 76 scope.iconId, scope.iconSize);
70 } 77 }
71 }; 78 };
72 -
73 }]) 79 }])
74 80
75 // create a general ng-repeat complete notifier directive 81 // create a general ng-repeat complete notifier directive
76 .directive('ngRepeatDone', [function () { 82 .directive('ngRepeatDone', [function () {
77 - return function (scope, element, attrs) { 83 + return function (scope) {
78 - if(scope.$last) { 84 + if (scope.$last) {
79 scope.$emit('LastElement'); 85 scope.$emit('LastElement');
80 } 86 }
81 - } 87 + };
82 }]); 88 }]);
83 }()); 89 }());
......
...@@ -24,13 +24,33 @@ ...@@ -24,13 +24,33 @@
24 'use strict'; 24 'use strict';
25 25
26 // injected references 26 // injected references
27 - var $log, $route, fs, ks; 27 + var $log, $route, fs, ks, gs;
28 28
29 - var veil, pdiv, svg; 29 + var veil;
30 +
31 + function init() {
32 + var wSize = fs.windowSize(),
33 + ww = wSize.width,
34 + wh = wSize.height,
35 + shrink = wh * 0.3,
36 + birdDim = wh - shrink,
37 + birdCenter = (ww - birdDim) / 2,
38 + svg;
39 +
40 + veil = d3.select('#veil');
41 +
42 + svg = veil.select('svg').attr({
43 + width: ww,
44 + height: wh
45 + }).style('opacity', 0.2);
46 +
47 + gs.addGlyph(svg, 'bird', birdDim, false, [birdCenter, shrink/2]);
48 + }
30 49
31 // msg should be an array of strings 50 // msg should be an array of strings
32 function show(msg) { 51 function show(msg) {
33 - var msgs = fs.isA(msg) || [msg]; 52 + var msgs = fs.isA(msg) || [msg],
53 + pdiv = veil.select('.msg');
34 pdiv.selectAll('p').remove(); 54 pdiv.selectAll('p').remove();
35 55
36 msgs.forEach(function (line) { 56 msgs.forEach(function (line) {
...@@ -60,32 +80,15 @@ ...@@ -60,32 +80,15 @@
60 .factory('VeilService', 80 .factory('VeilService',
61 ['$log', '$route', 'FnService', 'KeyService', 'GlyphService', 81 ['$log', '$route', 'FnService', 'KeyService', 'GlyphService',
62 82
63 - function (_$log_, _$route_, _fs_, _ks_, gs) { 83 + function (_$log_, _$route_, _fs_, _ks_, _gs_) {
64 $log = _$log_; 84 $log = _$log_;
65 $route = _$route_; 85 $route = _$route_;
66 fs = _fs_; 86 fs = _fs_;
67 ks = _ks_; 87 ks = _ks_;
68 - 88 + gs = _gs_;
69 - var wSize = fs.windowSize(),
70 - ww = wSize.width,
71 - wh = wSize.height,
72 - vbox = '0 0 ' + ww + ' ' + wh,
73 - shrink = wh * 0.3,
74 - birdDim = wh - shrink,
75 - birdCenter = (ww - birdDim) / 2;
76 -
77 - veil = d3.select('#veil');
78 - pdiv = veil.append('div').classed('msg', true);
79 -
80 - svg = veil.append('svg').attr({
81 - width: ww,
82 - height: wh,
83 - viewBox: vbox
84 - }).style('opacity', 0.2);
85 -
86 - gs.addGlyph(svg, 'bird', birdDim, false, [birdCenter, shrink/2]);
87 89
88 return { 90 return {
91 + init: init,
89 show: show, 92 show: show,
90 hide: hide, 93 hide: hide,
91 lostServer: lostServer 94 lostServer: lostServer
......
...@@ -155,11 +155,10 @@ ...@@ -155,11 +155,10 @@
155 fs = _fs_; 155 fs = _fs_;
156 mast = _mast_; 156 mast = _mast_;
157 157
158 - var w = angular.element($window), 158 + var table = d3.select(element[0]),
159 - table = d3.select(element[0]),
160 canAdjust = false; 159 canAdjust = false;
161 160
162 - scope.$watch(function () { 161 + scope.$watchCollection(function () {
163 return { 162 return {
164 h: $window.innerHeight, 163 h: $window.innerHeight,
165 w: $window.innerWidth 164 w: $window.innerWidth
...@@ -182,10 +181,6 @@ ...@@ -182,10 +181,6 @@
182 if (canAdjust) { 181 if (canAdjust) {
183 adjustTable(table, wWidth, wHeight); 182 adjustTable(table, wWidth, wHeight);
184 } 183 }
185 - }, true);
186 -
187 - w.bind('onos-fixed-header', function () {
188 - scope.$apply();
189 }); 184 });
190 }; 185 };
191 }]) 186 }])
......
1 <!-- Topology View partial HTML --> 1 <!-- Topology View partial HTML -->
2 <div id="ov-topo"> 2 <div id="ov-topo">
3 <svg viewBox="0 0 1000 1000" 3 <svg viewBox="0 0 1000 1000"
4 - resize 4 + resize offset-height="56" offset-width="12"
5 - ng-style="resizeWithOffset(56, 12)" 5 + notifier="notifyResize()">
6 - notifier="ctrl.notifyResize()"></svg> 6 + </svg>
7 </div> 7 </div>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 ]; 29 ];
30 30
31 // references to injected services etc. 31 // references to injected services etc.
32 - var $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps, 32 + var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
33 tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip; 33 tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip;
34 34
35 // DOM elements 35 // DOM elements
...@@ -336,12 +336,11 @@ ...@@ -336,12 +336,11 @@
336 'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService', 336 'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
337 'TopoToolbarService', 'TopoSpriteService', 'TooltipService', 337 'TopoToolbarService', 'TopoSpriteService', 'TooltipService',
338 338
339 - function ($scope, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_, 339 + function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
340 _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tes_, _tfs_, 340 _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tes_, _tfs_,
341 _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_, tspr, 341 _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_, tspr,
342 _ttip_) { 342 _ttip_) {
343 - var self = this, 343 + var projection,
344 - projection,
345 dim, 344 dim,
346 uplink = { 345 uplink = {
347 // provides function calls back into this space 346 // provides function calls back into this space
...@@ -352,6 +351,7 @@ ...@@ -352,6 +351,7 @@
352 opacifyMap: opacifyMap 351 opacifyMap: opacifyMap
353 }; 352 };
354 353
354 + $scope = _$scope_;
355 $log = _$log_; 355 $log = _$log_;
356 $cookies = _$cookies_; 356 $cookies = _$cookies_;
357 fs = _fs_; 357 fs = _fs_;
...@@ -378,7 +378,7 @@ ...@@ -378,7 +378,7 @@
378 ttbs = _ttbs_; 378 ttbs = _ttbs_;
379 ttip = _ttip_; 379 ttip = _ttip_;
380 380
381 - self.notifyResize = function () { 381 + $scope.notifyResize = function () {
382 svgResized(fs.windowSize(mast.mastHeight())); 382 svgResized(fs.windowSize(mast.mastHeight()));
383 }; 383 };
384 384
......
...@@ -157,9 +157,10 @@ ...@@ -157,9 +157,10 @@
157 <div id="tooltip"></div> 157 <div id="tooltip"></div>
158 <div id="flash"></div> 158 <div id="flash"></div>
159 <div id="quickhelp"></div> 159 <div id="quickhelp"></div>
160 - <div id="veil" 160 + <div id="veil">
161 - resize 161 + <div class="msg"></div>
162 - ng-style="resizeWithOffset(0, 0)"></div> 162 + <svg resize></svg>
163 + </div>
163 </div> 164 </div>
164 165
165 <script> 166 <script>
......
...@@ -70,11 +70,12 @@ ...@@ -70,11 +70,12 @@
70 70
71 .controller('OnosCtrl', [ 71 .controller('OnosCtrl', [
72 '$log', '$route', '$routeParams', '$location', 72 '$log', '$route', '$routeParams', '$location',
73 - 'KeyService', 'ThemeService', 'GlyphService', 'PanelService', 73 + 'KeyService', 'ThemeService', 'GlyphService', 'VeilService',
74 - 'FlashService', 'QuickHelpService', 'WebSocketService', 74 + 'PanelService', 'FlashService', 'QuickHelpService',
75 + 'WebSocketService',
75 76
76 function ($log, $route, $routeParams, $location, 77 function ($log, $route, $routeParams, $location,
77 - ks, ts, gs, ps, flash, qhs, wss) { 78 + ks, ts, gs, vs, ps, flash, qhs, wss) {
78 var self = this; 79 var self = this;
79 80
80 self.$route = $route; 81 self.$route = $route;
...@@ -87,6 +88,7 @@ ...@@ -87,6 +88,7 @@
87 ks.installOn(d3.select('body')); 88 ks.installOn(d3.select('body'));
88 ks.bindQhs(qhs); 89 ks.bindQhs(qhs);
89 gs.init(); 90 gs.init();
91 + vs.init();
90 ps.init(); 92 ps.init();
91 flash.initFlash(); 93 flash.initFlash();
92 qhs.initQuickHelp(); 94 qhs.initQuickHelp();
......
1 +/*
2 + * Copyright 2015 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 -- Layer -- Veil Service - Unit Tests
19 + */
20 +
21 +describe('factory: fw/layer/veil.js', function () {
22 + var $log, $route, vs, fs, ks, gs;
23 +
24 + beforeEach(module('onosLayer', 'onosNav', 'onosSvg', 'ngRoute'));
25 +
26 + beforeEach(inject(function (_$log_, _$route_, VeilService, FnService,
27 + KeyService, GlyphService) {
28 + $log = _$log_;
29 + $route = _$route_;
30 + vs = VeilService;
31 + fs = FnService;
32 + ks = KeyService;
33 + gs = GlyphService;
34 + }));
35 +
36 + it('should define VeilService', function () {
37 + expect(vs).toBeDefined();
38 + });
39 +
40 + it('should define api functions', function () {
41 + expect(fs.areFunctions(vs, [
42 + 'init', 'show', 'hide', 'lostServer'
43 + ])).toBeTruthy();
44 + });
45 +});