Merge pull request #7 from jayfreestone/option-override-toggle

Options: Allow overriding toggle handler

Author: jayfreestone

README.md

@@ -170,6 +170,21 @@ inst.toggleOverflowNav();
 
 ## Options
 
+### `openOnToggle`
+
+You can disable the default behaviour of automatically opening the overflow when the toggle is clicked by passing `false`. If you wanted to re-implement your own toggle behaviour, you could do so by listening for the `toggleClicked` event:
+
+```javascript
+const inst = priorityPlus(document.querySelector('.js-p-target'), {
+  openOnToggle: false,
+})
+
+inst.on('toggleClicked', () => {
+  // Re-implement existing behaviour
+  inst.toggleOverflowNav();
+})
+```
+
 ### `collapseAtCount`
 
 If you'd like to collapse into the overflow when the primary navigation becomes depleted, you can do with the `collapseAtCount` option:
@@ -232,11 +247,12 @@ Be aware that if you alter the width of the element by changing its content, you
 
 Arguments are provided via the `details` property.
 
-| Name | Arguments  | Description |
-|:------|:----------|:----------|
-| `showOverflow` | None | Triggered when the overflow nav becomes visible.
-| `hideOverflow` | None | Triggered when the overflow nav becomes invisible.
-| `itemsChanged` | `overflowCount` (The number of items in the overflow nav) | Triggered when the navigation items are updated (either added/removed).
+| Name            | Arguments                                                 | Description                                                             |
+|:----------------|:----------------------------------------------------------|:------------------------------------------------------------------------|
+| `showOverflow`  | None                                                      | Triggered when the overflow nav becomes visible.                        |
+| `hideOverflow`  | None                                                      | Triggered when the overflow nav becomes invisible.                      |
+| `itemsChanged`  | `overflowCount` (The number of items in the overflow nav) | Triggered when the navigation items are updated (either added/removed). |
+| `toggleClicked` | `original` (The original click event)                     | Triggered when the overflow toggle button is clicked.                   |
 
 ## Defining a 'mobile' breakpoint
 

cypress/integration/pplus.js

@@ -27,7 +27,9 @@ describe('Events', () => {
         event: 'itemsChanged',
       };
 
-      cy.visit(`/?titleCB=${encodeURI(JSON.stringify(titleCallback))}`);
+      cy.visit('/', {
+        qs: { titleCB: JSON.stringify(titleCallback) },
+      });
       registerContext();
 
       cy.get('@instance')
@@ -68,7 +70,7 @@ describe('Events', () => {
       // Force overflow so we can see the dropdown
       cy.viewport(768, 660);
       // Show dropdown by default
-      cy.visit('/?showOverflow=true');
+      cy.visit('/', { qs: { showOverflow: true } });
       registerContext();
 
       // We need this get to ensure we have fully initialized
@@ -83,6 +85,30 @@ describe('Events', () => {
           expect(hideOverflowCB).to.be.calledOnce;
         });
     });
+
+    it('toggleClicked', () => {
+      const toggleClickedCB = cy.spy();
+
+      // Force overflow
+      cy.viewport(320, 660);
+      // Disable default behaviour (opening overflow)
+      cy.visit('/', {
+        qs: { openOnToggle: 'false' }
+      })
+      registerContext();
+
+      cy
+        .get('@instance')
+        .invoke('on', 'toggleClicked', toggleClickedCB)
+        .get('@toggle-btn')
+        .click()
+        // Confirm default behaviour doesn't occur
+        .get('@overflow-nav')
+        .should('not.be.visible')
+        .then(() => {
+          expect(toggleClickedCB).to.be.calledOnce;
+        });
+    });
   });
 });
 

index.html

@@ -62,6 +62,7 @@
     const queryParams = new URLSearchParams(window.location.search);
 
     const inst = priorityPlus(document.querySelector('.js-p-target'), {
+      openOnToggle: queryParams.get('openOnToggle') !== "false",
       defaultOverflowVisible: Boolean(queryParams.get('showOverflow')),
       classNames: {
         main: ['p-plus'],

src/events/createEvent.ts

@@ -2,6 +2,7 @@ export enum Events {
   ShowOverflow = 'showOverflow',
   HideOverflow = 'hideOverflow',
   ItemsChanged = 'itemsChanged',
+  ToggleClicked = 'toggleClicked',
 }
 
 export interface ItemsChangedEvent {
@@ -10,6 +11,12 @@ export interface ItemsChangedEvent {
   };
 }
 
+export interface ToggleClickedEvent {
+  detail: {
+    original: Event,
+  };
+}
+
 function createEvent(name: Events, payload = {}) {
   return new CustomEvent(name, {
     detail: payload,
@@ -28,4 +35,8 @@ export function createItemsChangedEvent({ overflowCount }: ItemsChangedEvent['de
   return createEvent(Events.ItemsChanged, { overflowCount });
 }
 
+export function createToggleClickedEvent({ original }: ToggleClickedEvent['detail']) {
+  return createEvent(Events.ToggleClicked, { original });
+}
+
 export default createEvent;

src/priorityPlus.ts

@@ -2,8 +2,8 @@ import {
   createHideOverflowEvent,
   createItemsChangedEvent,
   createShowOverflowEvent,
+  createToggleClickedEvent,
   Events,
-  ItemsChangedEvent,
 } from './events/createEvent';
 import createEventHandler from './events/eventHandler';
 import DeepPartial from './types/DeepPartial';
@@ -66,6 +66,7 @@ interface Options {
   };
   collapseAtCount: number;
   defaultOverflowVisible: boolean;
+  openOnToggle: boolean;
   innerToggleTemplate: string|((args: object) => string);
 }
 
@@ -80,6 +81,7 @@ const defaultOptions: Options = {
     [El.NavItems]: ['p-plus__primary-nav-item'],
   },
   collapseAtCount: -1,
+  openOnToggle: true,
   defaultOverflowVisible: false,
   innerToggleTemplate: 'More',
 };
@@ -373,7 +375,9 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
    */
   function onToggleClick(e: Event) {
     e.preventDefault();
-    toggleOverflowNav();
+    eventHandler.trigger(
+      createToggleClickedEvent({ original: e })
+    );
   }
 
   /**
@@ -413,6 +417,10 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
     el.primary[El.ToggleBtn].addEventListener('click', onToggleClick);
 
     eventHandler.on(Events.ItemsChanged, onItemsChanged, false);
+
+    if (options.openOnToggle) {
+      eventHandler.on(Events.ToggleClicked, toggleOverflowNav, false)
+    }
   }
 
   /**
@@ -435,7 +443,7 @@ function priorityPlus(targetElem: HTMLElement, userOptions: DeepPartial<Options>
   }
 
   (function init() {
-    validateAndThrow(targetElem, userOptions, defaultOptions),
+    validateAndThrow(targetElem, userOptions, defaultOptions);
     setupEl();
     bindListeners();
     if (options.defaultOverflowVisible) setOverflowNavOpen(true);