fix(breadcrumb): too many elements on small screen initially

Breadcrumb displays now 2 elements initially when page is smaller than 640px in width.

Closes #354.

CHANGELOG.md

@@ -1,4 +1,11 @@
 <a name="next"></a>
+### [next - TBD](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/releases/tag/next)
+
+#### Fixes
+
+- **uif-breadcrumb**
+  - fix(breadcrumb): too many elements on small screen initially (Closes [#354](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/354))
+
 <a name="0.11.0"></a>
 ### [0.11.0 - May 30, 2016](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/releases/tag/0.11.0)
 

src/components/breadcrumb/breadcrumbDirective.spec.ts

@@ -14,8 +14,9 @@ describe('breadcrumbDirective <uif-breadcrumb />', () => {
     angular.mock.module('officeuifabric.components.breadcrumb');
   });
 
-  beforeEach(inject(($rootScope: ng.IRootScopeService, $compile: Function) => {
+  beforeEach(inject(($rootScope: ng.IRootScopeService, $compile: Function, $window: ng.IWindowService) => {
 
+    $window.innerWidth = 800;
 
     let html: string = '<uif-breadcrumb uif-breadcrumb-links="breadcrumbLinks"></uif-breadcrumb>';
     scope = $rootScope;
@@ -149,6 +150,38 @@ describe('breadcrumbDirective <uif-breadcrumb />', () => {
       expect(overflowMenu).not.toHaveClass('is-open');
     });
 
+    it(
+      'should display 2 on small screen initially',
+      inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService, $window: ng.IWindowService
+      ) => {
+
+      $window.innerWidth = 620; // must be less than breaking point
+
+      let html: string = '<uif-breadcrumb uif-breadcrumb-links="breadcrumbLinks"></uif-breadcrumb>';
+      scope = $rootScope.$new();
+      scope.breadcrumbLinks = [
+        {href: 'http://ngofficeuifabric.com/1', linkText: 'ngOfficeUiFabric-1'},
+        {href: 'http://ngofficeuifabric.com/2', linkText: 'ngOfficeUiFabric-2'},
+        {href: 'http://ngofficeuifabric.com/3', linkText: 'ngOfficeUiFabric-3'},
+        {href: 'http://ngofficeuifabric.com/4', linkText: 'ngOfficeUiFabric-4'},
+        {href: 'http://ngofficeuifabric.com/5', linkText: 'ngOfficeUiFabric-5'},
+        {href: 'http://ngofficeuifabric.com/6', linkText: 'ngOfficeUiFabric-6'}
+      ];
+
+      element = $compile(html)(scope);    // jqLite object
+      element = jQuery(element[0]);       // jQuery object
+
+      scope.$digest();
+
+      let visibleLinks: JQuery = element.find('.ms-Breadcrumb-list li');
+      expect(visibleLinks.length === 2).toBeTruthy();
+
+      let overflowLinks: JQuery = element.find('.ms-ContextualMenu li');
+      expect(overflowLinks.length === 4).toBeTruthy();
+
+
+    }));
+
     it('should change breadcrumb count on resize', inject(($window: ng.IWindowService) => {
 
       let visibleLinks: JQuery = element.find('.ms-Breadcrumb-list li');

src/components/breadcrumb/breadcrumbDirective.ts

@@ -96,6 +96,7 @@ export class BreadcrumbLink {
  * @property {function} openOverflow      - Handler for opening overflow menu.
  * @property {function} isOverflow        - Function determining if thre are overflow elements.
  *                                          Returns true if there are such elements, false otherwise.
+ * @property {function} adjustVisibleElements - Determine visible elements count based on size
  */
 export interface IBreadcrumbScope extends ng.IScope {
   uifBreadcrumbLinks: BreadcrumbLink[];
@@ -104,7 +105,7 @@ export interface IBreadcrumbScope extends ng.IScope {
 
   overflowMenuOpen: boolean;
   openOverflow: (event: ng.IAngularEvent) => void;
-
+  adjustVisibleElements: () => void;
   isOverflow: () => boolean;
 }
 
@@ -141,20 +142,23 @@ export class BreadcrumbController {
 
     };
 
-    $document.find('html').on('click', (event: any) => {
-      $scope.overflowMenuOpen = false;
-      $scope.$apply();
-    });
-
-    windowElement.on('resize', () => {
+    $scope.adjustVisibleElements = () => {
       let width: number = $window.innerWidth;
 
       let elementsToShow: number = (width > BreadcrumbController._breakingWidth) ? 4 : 2;
       if (elementsToShow !== $scope.visibleElements) {
         $scope.visibleElements = elementsToShow;
         $scope.$apply();
       }
+    };
 
+    $document.find('html').on('click', (event: any) => {
+      $scope.overflowMenuOpen = false;
+      $scope.$apply();
+    });
+
+    windowElement.on('resize', () => {
+      $scope.adjustVisibleElements();
     });
   }
 }
@@ -211,6 +215,10 @@ export class BreadcrumbDirective implements ng.IDirective {
     return directive;
   }
 
+  public link(scope: IBreadcrumbScope, instanceElement: ng.IAugmentedJQuery, attrs: any, breadcrumbController: BreadcrumbController): void {
+    scope.adjustVisibleElements();
+  };
+
 };
 
 /**