GUI -- Resize and table directives clean up. Veil service given init function and unit tests.
Change-Id: I7c29db8f2c79e83e880c96854297c4a432e12d48
diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
index 8bd31e2..f04eca2 100644
--- a/web/gui/src/main/webapp/app/directives.js
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -25,32 +25,39 @@
// Create a resize directive, that we can apply to elements
// so that they can respond to window resize events.
- .directive('resize', ['$window', function ($window) {
- return function (scope, element, attrs) {
- var w = angular.element($window);
- scope.$watch(function () {
- return {
- h: window.innerHeight,
- w: window.innerWidth
- };
- }, function (newVal, oldVal) {
- scope.windowHeight = newVal.h;
- scope.windowWidth = newVal.w;
-
- scope.resizeWithOffset = function (offH, offW) {
- var oh = offH || 0,
- ow = offW || 0;
- scope.$eval(attrs.notifier);
+ .directive('resize', ['$window', 'FnService', function ($window, fs) {
+ return {
+ scope: {
+ offsetHeight: '@',
+ offsetWidth: '@',
+ notifier: '&'
+ },
+ link: function (scope, element) {
+ var elem = d3.select(element[0]);
+ scope.$watchCollection(function () {
return {
- height: (newVal.h - oh) + 'px',
- width: (newVal.w - ow) + 'px'
+ h: $window.innerHeight,
+ w: $window.innerWidth
};
- };
- }, true);
+ }, function () {
+ var offH = scope.offsetHeight || 0,
+ offW = scope.offsetWidth || 0,
+ wsz = fs.windowSize(offH, offW);
- w.bind('resize', function () {
- scope.$apply();
- });
+ elem.style({
+ height: wsz.height + 'px',
+ width: wsz.width + 'px'
+ });
+
+ if (fs.isF(scope.notifier)) {
+ scope.notifier();
+ }
+ });
+
+ angular.element($window).bind('resize', function () {
+ scope.$apply();
+ });
+ }
};
}])
@@ -69,15 +76,14 @@
scope.iconId, scope.iconSize);
}
};
-
}])
// create a general ng-repeat complete notifier directive
.directive('ngRepeatDone', [function () {
- return function (scope, element, attrs) {
- if(scope.$last) {
+ return function (scope) {
+ if (scope.$last) {
scope.$emit('LastElement');
}
- }
+ };
}]);
}());
diff --git a/web/gui/src/main/webapp/app/fw/layer/veil.js b/web/gui/src/main/webapp/app/fw/layer/veil.js
index 91de19e..309b9f0 100644
--- a/web/gui/src/main/webapp/app/fw/layer/veil.js
+++ b/web/gui/src/main/webapp/app/fw/layer/veil.js
@@ -24,13 +24,33 @@
'use strict';
// injected references
- var $log, $route, fs, ks;
+ var $log, $route, fs, ks, gs;
- var veil, pdiv, svg;
+ var veil;
+
+ function init() {
+ var wSize = fs.windowSize(),
+ ww = wSize.width,
+ wh = wSize.height,
+ shrink = wh * 0.3,
+ birdDim = wh - shrink,
+ birdCenter = (ww - birdDim) / 2,
+ svg;
+
+ veil = d3.select('#veil');
+
+ svg = veil.select('svg').attr({
+ width: ww,
+ height: wh
+ }).style('opacity', 0.2);
+
+ gs.addGlyph(svg, 'bird', birdDim, false, [birdCenter, shrink/2]);
+ }
// msg should be an array of strings
function show(msg) {
- var msgs = fs.isA(msg) || [msg];
+ var msgs = fs.isA(msg) || [msg],
+ pdiv = veil.select('.msg');
pdiv.selectAll('p').remove();
msgs.forEach(function (line) {
@@ -60,32 +80,15 @@
.factory('VeilService',
['$log', '$route', 'FnService', 'KeyService', 'GlyphService',
- function (_$log_, _$route_, _fs_, _ks_, gs) {
+ function (_$log_, _$route_, _fs_, _ks_, _gs_) {
$log = _$log_;
$route = _$route_;
fs = _fs_;
ks = _ks_;
-
- var wSize = fs.windowSize(),
- ww = wSize.width,
- wh = wSize.height,
- vbox = '0 0 ' + ww + ' ' + wh,
- shrink = wh * 0.3,
- birdDim = wh - shrink,
- birdCenter = (ww - birdDim) / 2;
-
- veil = d3.select('#veil');
- pdiv = veil.append('div').classed('msg', true);
-
- svg = veil.append('svg').attr({
- width: ww,
- height: wh,
- viewBox: vbox
- }).style('opacity', 0.2);
-
- gs.addGlyph(svg, 'bird', birdDim, false, [birdCenter, shrink/2]);
+ gs = _gs_;
return {
+ init: init,
show: show,
hide: hide,
lostServer: lostServer
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 0ed0b42..b4b1e4c 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -155,11 +155,10 @@
fs = _fs_;
mast = _mast_;
- var w = angular.element($window),
- table = d3.select(element[0]),
+ var table = d3.select(element[0]),
canAdjust = false;
- scope.$watch(function () {
+ scope.$watchCollection(function () {
return {
h: $window.innerHeight,
w: $window.innerWidth
@@ -182,10 +181,6 @@
if (canAdjust) {
adjustTable(table, wWidth, wHeight);
}
- }, true);
-
- w.bind('onos-fixed-header', function () {
- scope.$apply();
});
};
}])
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.html b/web/gui/src/main/webapp/app/view/topo/topo.html
index 8ed618b..8a64abb 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.html
+++ b/web/gui/src/main/webapp/app/view/topo/topo.html
@@ -1,7 +1,7 @@
<!-- Topology View partial HTML -->
<div id="ov-topo">
<svg viewBox="0 0 1000 1000"
- resize
- ng-style="resizeWithOffset(56, 12)"
- notifier="ctrl.notifyResize()"></svg>
+ resize offset-height="56" offset-width="12"
+ notifier="notifyResize()">
+ </svg>
</div>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index 3c04e65..02a7fca 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -29,7 +29,7 @@
];
// references to injected services etc.
- var $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
+ var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip;
// DOM elements
@@ -336,12 +336,11 @@
'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
'TopoToolbarService', 'TopoSpriteService', 'TooltipService',
- function ($scope, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
+ function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
_zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tes_, _tfs_,
_tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_, tspr,
_ttip_) {
- var self = this,
- projection,
+ var projection,
dim,
uplink = {
// provides function calls back into this space
@@ -352,6 +351,7 @@
opacifyMap: opacifyMap
};
+ $scope = _$scope_;
$log = _$log_;
$cookies = _$cookies_;
fs = _fs_;
@@ -378,7 +378,7 @@
ttbs = _ttbs_;
ttip = _ttip_;
- self.notifyResize = function () {
+ $scope.notifyResize = function () {
svgResized(fs.windowSize(mast.mastHeight()));
};
diff --git a/web/gui/src/main/webapp/index.html b/web/gui/src/main/webapp/index.html
index 7dd2f42..c84c372 100644
--- a/web/gui/src/main/webapp/index.html
+++ b/web/gui/src/main/webapp/index.html
@@ -157,9 +157,10 @@
<div id="tooltip"></div>
<div id="flash"></div>
<div id="quickhelp"></div>
- <div id="veil"
- resize
- ng-style="resizeWithOffset(0, 0)"></div>
+ <div id="veil">
+ <div class="msg"></div>
+ <svg resize></svg>
+ </div>
</div>
<script>
diff --git a/web/gui/src/main/webapp/onos.js b/web/gui/src/main/webapp/onos.js
index d49d2c0..01e910d 100644
--- a/web/gui/src/main/webapp/onos.js
+++ b/web/gui/src/main/webapp/onos.js
@@ -70,11 +70,12 @@
.controller('OnosCtrl', [
'$log', '$route', '$routeParams', '$location',
- 'KeyService', 'ThemeService', 'GlyphService', 'PanelService',
- 'FlashService', 'QuickHelpService', 'WebSocketService',
+ 'KeyService', 'ThemeService', 'GlyphService', 'VeilService',
+ 'PanelService', 'FlashService', 'QuickHelpService',
+ 'WebSocketService',
function ($log, $route, $routeParams, $location,
- ks, ts, gs, ps, flash, qhs, wss) {
+ ks, ts, gs, vs, ps, flash, qhs, wss) {
var self = this;
self.$route = $route;
@@ -87,6 +88,7 @@
ks.installOn(d3.select('body'));
ks.bindQhs(qhs);
gs.init();
+ vs.init();
ps.init();
flash.initFlash();
qhs.initQuickHelp();
diff --git a/web/gui/src/main/webapp/tests/app/fw/layer/veil-spec.js b/web/gui/src/main/webapp/tests/app/fw/layer/veil-spec.js
new file mode 100644
index 0000000..155ebaa
--- /dev/null
+++ b/web/gui/src/main/webapp/tests/app/fw/layer/veil-spec.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2015 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 -- Layer -- Veil Service - Unit Tests
+ */
+
+describe('factory: fw/layer/veil.js', function () {
+ var $log, $route, vs, fs, ks, gs;
+
+ beforeEach(module('onosLayer', 'onosNav', 'onosSvg', 'ngRoute'));
+
+ beforeEach(inject(function (_$log_, _$route_, VeilService, FnService,
+ KeyService, GlyphService) {
+ $log = _$log_;
+ $route = _$route_;
+ vs = VeilService;
+ fs = FnService;
+ ks = KeyService;
+ gs = GlyphService;
+ }));
+
+ it('should define VeilService', function () {
+ expect(vs).toBeDefined();
+ });
+
+ it('should define api functions', function () {
+ expect(fs.areFunctions(vs, [
+ 'init', 'show', 'hide', 'lostServer'
+ ])).toBeTruthy();
+ });
+});