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

Change-Id: I7c29db8f2c79e83e880c96854297c4a432e12d48

@@ -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 () {
+        .directive('resize', ['$window', 'FnService', function ($window, fs) {
             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);
+                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);
+
+                        elem.style({
+                            height: wsz.height + 'px',
+                            width: wsz.width + 'px'
+                        });
 
-                w.bind('resize', function () {
+                        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');
                 }
-            }
+            };
         }]);
 }());

@@ -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

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

 <!-- 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>

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

@@ -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>

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

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