From b3e3dcb71280ca8a402aea38482f687f5b6e14cd Mon Sep 17 00:00:00 2001
From: Jay Freestone <jay.freestone@red-badger.com>
Date: Thu, 13 Jun 2019 15:48:46 +0100
Subject: [PATCH] feat(option): Add collapseAtCount.

---
 src/priorityPlus.ts | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/priorityPlus.ts b/src/priorityPlus.ts
index 61cd8f4..401e188 100644
--- a/src/priorityPlus.ts
+++ b/src/priorityPlus.ts
@@ -64,6 +64,7 @@ interface Options {
     [El.ToggleBtn]: string[];
     [El.NavItems]: string[];
   };
+  collapseAtCount: number;
   defaultOverflowVisible: boolean;
   innerToggleTemplate: string|((args: object) => string);
 }
@@ -78,6 +79,7 @@ const defaultOptions: Options = {
     [El.ToggleBtn]: ['p-plus__toggle-btn'],
     [El.NavItems]: ['p-plus__primary-nav-item'],
   },
+  collapseAtCount: -1,
   defaultOverflowVisible: false,
   innerToggleTemplate: 'More',
 };
@@ -230,6 +232,36 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
     }
   }
 
+  /**
+   * Get array of cloned navItems from primary/overflow.
+   */
+  function getCloneItemsByType(navType: NavType) {
+    const { itemMap } = inst;
+    // Always use the clone as the base for our new nav,
+    // since the order is canonical and it is never filtered.
+    return el.clone[El.NavItems].filter(item => itemMap.get(item) === navType);
+  }
+
+  /**
+   * Get a list of cloned elements that we need to
+   * render for our navType.
+   */
+  function getRenderableItems(navType: NavType) {
+    const { collapseAtCount } = options;
+
+    if (navType === El.PrimaryNav || collapseAtCount < 0) {
+      return getCloneItemsByType(navType);
+    }
+
+    const primaryCount = getCloneItemsByType(El.PrimaryNav).length;
+
+    if (primaryCount > 0 && primaryCount <= collapseAtCount) {
+      return el.clone[El.NavItems];
+    }
+
+    return getCloneItemsByType(navType);
+  }
+
   /**
    * (Re) generate the navigation list for either the visible or the overflow nav.
    * We use this to completely recreate the nav each time we update it,
@@ -237,13 +269,9 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
    * the mounted nav.
    */
   function generateNav(navType: NavType): HTMLElement {
-    const { itemMap } = inst;
     const newNav = el.primary[navType].cloneNode();
 
-    // Always use the clone as the base for our new nav,
-    // since the order is canonical and it is never filtered.
-    el.clone[El.NavItems]
-      .filter(item => itemMap.get(item) === navType)
+    getRenderableItems(navType)
       .forEach(item => {
         const elem = getElemMirror(
           el.clone[El.NavItems],