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()));
};