Do not layout tiles when a new tile is added to an existing view - Local

js/sky/src/tiles/test/tiles.spec.js

@@ -991,10 +991,11 @@ describe('Tile', function () {
             $scope.layout = {
                 two_column_layout: [
                     [
-                        'Tile1',
-                        'Tile2'
+                        'Tile1'
+
                     ],
                     [
+                        'Tile2'
                     ]
                 ]
             };
@@ -1022,19 +1023,6 @@ describe('Tile', function () {
             tile1Scope = dashboard.el.isolateScope().$new();
             tile2Scope = dashboard.el.isolateScope().$new();
 
-            //ensure that layout is reloaded when new tiles are initialized
-            $scope.layout = {
-                two_column_layout: [
-                    [
-                        'Tile1'
-
-                    ],
-                    [
-                        'Tile2'
-                    ]
-                ]
-            };
-
             tile1El = $compile(
                 '<bb-tile>Tile 1</bb-tile>'
             )(tile1Scope);
@@ -1150,5 +1138,163 @@ describe('Tile', function () {
             expect(tile2.collapsed).toBe(false);
             expect(tile2.collapsed_small).toBe(false);
         });
+
+        it('should not reload the layout when new tiles are initialized if they are in an existing tile view that has already been placed into the layout', function () {
+            var $scope = $rootScope.$new(),
+                tile1Scope,
+                dashboard,
+                tile1,
+                tile1El,
+                tile2,
+                tile2El,
+                tile2Scope,
+                tile1TitleEl,
+                tile2TitleEl;
+
+            dashboard = createTileDashboard($scope, 'lg', true);
+
+            $scope.layout = {
+                two_column_layout: [
+                    [
+                        'Tile1',
+                        'Tile2'
+                    ]
+                ]
+            };
+
+            tile1 = {
+                id: 'Tile1'
+            };
+
+            tile2 = {
+                id: 'Tile2'
+            };
+
+            $scope.tiles = [tile1, tile2];
+
+            $scope.$digest();
+
+            $timeout.flush();
+
+            $scope.$digest();
+
+            tile1Scope = dashboard.el.isolateScope().$new();
+            tile2Scope = dashboard.el.isolateScope().$new();
+
+            $scope.layout = {
+                two_column_layout: [
+                    [
+                        'Tile1'
+
+                    ],
+                    [
+                        'Tile2'
+                    ]
+                ]
+            };
+
+            tile1El = $compile(
+                '<bb-tile>Tile 1</bb-tile>'
+            )(tile1Scope);
+
+            tile2El = $compile(
+                '<bb-tile>Tile 2</bb-tile>'
+            )(tile2Scope);
+
+            dashboard.el.find('div[data-tile-id="Tile1"]').append(tile1El);
+            dashboard.el.find('div[data-tile-id="Tile2"]').append(tile2El);
+
+            tile1Scope.$digest();
+            tile2Scope.$digest();
+            $timeout.flush();            
+
+            tile1TitleEl = dashboard.el.find('div[data-dashboard-column="1"] div[data-tile-id="Tile1"] .bb-tile-title');
+            expect(tile1TitleEl.length).toBe(1);
+
+            //Tile 2 should still in column 1, because the tiles are not layed out after a tile comes into an existing tile view
+            tile2TitleEl = dashboard.el.find('div[data-dashboard-column="1"] div[data-tile-id="Tile2"] .bb-tile-title');
+            expect(tile2TitleEl.length).toBe(1);            
+        });
+
+        it('should reload the layout when new tiles are initialized if they are in an  tile view that has not already been placed into the layout', function () {
+            var $scope = $rootScope.$new(),
+                tile1Scope,
+                dashboard,
+                tile1,
+                tile1El,
+                tile2,
+                tile2El,
+                tile2Scope,
+                tile1TitleEl,
+                tile2TitleEl;
+
+            dashboard = createTileDashboard($scope, 'lg', true);
+
+            $scope.layout = {
+                two_column_layout: [
+                    [
+                        'Tile1',
+                        'Tile2'
+                    ]
+                ]
+            };
+
+            tile1 = {
+                id: 'Tile1'
+            };
+
+            tile2 = {
+                id: 'Tile2'
+            };
+
+            $scope.tiles = [tile1, tile2];
+
+            $scope.$digest();
+
+            $timeout.flush();
+
+            $scope.$digest();
+
+            tile1Scope = dashboard.el.isolateScope().$new();
+            tile2Scope = dashboard.el.isolateScope().$new();
+
+            $scope.layout = {
+                two_column_layout: [
+                    [
+                        'Tile1'
+
+                    ],
+                    [
+                        'Tile2'
+                    ]
+                ]
+            };
+
+            tile1El = $compile(
+                '<bb-tile>Tile 1</bb-tile>'
+            )(tile1Scope);
+
+            tile2El = $compile(
+                '<bb-tile>Tile 2</bb-tile>'
+            )(tile2Scope);
+
+            dashboard.el.find('div[data-tile-id="Tile1"]').append(tile1El);
+            dashboard.el.find('div[data-tile-id="Tile2"]').append(tile2El);
+
+            //Remove flag that notes the tile view has already been layed out.  In practice this is removed when the view
+            //is created/destroyed based on state change.
+            dashboard.el.find('div[data-tile-id="Tile2"]').removeAttr('data-tile-initial-layout-complete');
+
+            tile1Scope.$digest();
+            tile2Scope.$digest();
+            $timeout.flush();
+
+            tile1TitleEl = dashboard.el.find('div[data-dashboard-column="1"] div[data-tile-id="Tile1"] .bb-tile-title');
+            expect(tile1TitleEl.length).toBe(1);
+
+            //Tile 2 should now be in column 2, because the tiles are layed out after a tile comes into an tile view that has not been layed out
+            tile2TitleEl = dashboard.el.find('div[data-dashboard-column="2"] div[data-tile-id="Tile2"] .bb-tile-title');
+            expect(tile2TitleEl.length).toBe(1);            
+        });
     });
-});
+});

js/sky/src/tiles/tiles.js

@@ -10,6 +10,7 @@
         angular.forEach(tiles, function (tileId) {
             var tile = sourceContainer.find('[data-tile-id="' + tileId + '"]');
             targetContainer.append(tile);
+            tile.attr('data-tile-initial-layout-complete', 'true');
         });
     }
 
@@ -205,7 +206,7 @@
                 if (dashboardCtrl.dashboardInitialized && !vm.tileInitialized) {
                     dashboardState = dashboardCtrl.getDashboardState();
                     initializeTile(dashboardState);
-                    dashboardCtrl.layoutTiles();
+                    dashboardCtrl.layoutNewTiles();
                 }
             }
         }
@@ -277,15 +278,6 @@
             return {tiles: vm.tiles, smallTileDisplayMode: vm.smallTileDisplayMode};
         };
 
-        vm.layoutTiles = function () {
-            /* This timeout is in place to allow a state change to
-               complete before laying out tiles
-            */
-            $timeout(function () {
-                vm.layoutTileColumns();
-            });
-        };
-
         vm.dashboardInitialized = false;
         vm.smallTileDisplayMode = false;
 
@@ -354,6 +346,19 @@
 
             vm.layoutTileColumns = layoutTileColumns;
 
+            function layoutNewTiles() {
+                /* This timeout is in place to allow a state change to
+                   complete before laying out tiles
+                */
+                $timeout(function () {
+                    //If there are any tile view's that have not been placed into containers, layout the tiles now.
+                    if (element.find('[data-tile-id]:not([data-tile-initial-layout-complete])').length) {
+                        vm.layoutTileColumns();
+                    }
+                });
+            }
+
+            vm.layoutNewTiles = layoutNewTiles;
 
             //Inspects the tiles in each column and updates model accordingly.
             function parseColumnTiles() {
@@ -468,4 +473,4 @@
         .directive('bbTileHeaderCheck', bbTileHeaderCheck)
         .directive('bbTileSection', bbTileSection)
         .directive('bbTileDashboard', bbTileDashboard);
-}());
+}());