Merge pull request #94 from Travelopia/feat/lightbox-navigation-bullets

Add Lightbox nav items

Author: junaid-travelopia

src/lightbox/README.md

@@ -62,7 +62,8 @@ Next, we need to trigger the lightbox with and give it some content. Any content
 |----------------|-------------------------------------------------------------|
 | change         | When any attribute has changed                              |
 | template-set   | When a template is set, before content has actually updated |
-| content-update | When the content has updated inside the lightbox            |
+| content-change | When the content has updated inside the lightbox            |
+| slide-set      | When a slide in the lightbox is set                         |
 
 ## Methods
 

src/lightbox/index.html

@@ -24,6 +24,12 @@
 				</tp-lightbox-next>
 				<tp-lightbox-content></tp-lightbox-content>
 				<tp-lightbox-count format="$current / $total"></tp-lightbox-count>
+				<tp-lightbox-nav>
+					<tp-lightbox-nav-item><button>1</button></tp-lightbox-nav-item>
+					<tp-lightbox-nav-item><button>2</button></tp-lightbox-nav-item>
+					<tp-lightbox-nav-item><button>3</button></tp-lightbox-nav-item>
+					<tp-lightbox-nav-item><button>4</button></tp-lightbox-nav-item>
+				</tp-lightbox-nav>
 			</dialog>
 		</tp-lightbox>
 
@@ -34,6 +40,20 @@
 			</template>
 		</tp-lightbox-trigger>
 
+		<tp-lightbox-trigger lightbox="my-lightbox" group="group-1">
+			<button>Open Lightbox: Group 1</button>
+			<template>
+				<img src="https://picsum.photos/id/77/600/300" width="600" height="300" alt="">
+			</template>
+		</tp-lightbox-trigger>
+
+		<tp-lightbox-trigger lightbox="my-lightbox" group="group-1">
+			<button>Open Lightbox: Group 1</button>
+			<template>
+				<img src="https://picsum.photos/id/78/600/300" width="600" height="300" alt="">
+			</template>
+		</tp-lightbox-trigger>
+
 		<tp-lightbox-trigger lightbox="my-lightbox" group="group-1">
 			<button>Open Lightbox: Group 1</button>
 			<template>

src/lightbox/index.ts

@@ -13,6 +13,8 @@ import { TPLightboxPreviousElement } from './tp-lightbox-previous';
 import { TPLightboxNextElement } from './tp-lightbox-next';
 import { TPLightboxCountElement } from './tp-lightbox-count';
 import { TPLightboxTriggerElement } from './tp-lightbox-trigger';
+import { TPLightboxNavElement } from './tp-lightbox-nav';
+import { TPLightboxNavItemElement } from './tp-lightbox-nav-item';
 
 /**
  * Register Components.
@@ -24,3 +26,5 @@ customElements.define( 'tp-lightbox-previous', TPLightboxPreviousElement );
 customElements.define( 'tp-lightbox-next', TPLightboxNextElement );
 customElements.define( 'tp-lightbox-count', TPLightboxCountElement );
 customElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );
+customElements.define( 'tp-lightbox-nav', TPLightboxNavElement );
+customElements.define( 'tp-lightbox-nav-item', TPLightboxNavItemElement );

src/lightbox/tp-lightbox-nav-item.ts

@@ -0,0 +1,63 @@
+/**
+ * Internal dependencies.
+ */
+import { TPLightboxElement } from './tp-lightbox';
+import { TPLightboxNavElement } from './tp-lightbox-nav';
+
+/**
+ * TP Lightbox Nav Item.
+ */
+export class TPLightboxNavItemElement extends HTMLElement {
+	/**
+	 * Properties.
+	 */
+	protected lightbox : TPLightboxElement | null;
+
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		// Initialize parent.
+		super();
+		this.lightbox = this.closest( 'tp-lightbox' );
+
+		// Get the nav-item button.
+		this.querySelector( 'button' )?.addEventListener( 'click', this.handleClick.bind( this ) );
+	}
+
+	/**
+	 * Handle when the button is clicked.
+	 */
+	handleClick(): void {
+		// Check if lightbox exists.
+		if ( ! this.lightbox ) {
+			// No its not! Terminate.
+			return;
+		}
+
+		// Set current slide.
+		this.lightbox.currentIndex = Number( this.getIndex() ) ?? 1;
+
+		// Update navigation current item.
+		this.lightbox.updateNavCurrentItem();
+	}
+
+	/**
+	 * Get index of this item inside the navigation.
+	 *
+	 * @return {number} Index.
+	 */
+	getIndex(): number {
+		// Bail if no lightbox.
+		if ( ! this.lightbox ) {
+			// Exit.
+			return 0;
+		}
+
+		// No, find it in the navigation.
+		const lightboxNav: TPLightboxNavElement | null = this.closest( 'tp-lightbox-nav' );
+
+		// Return index of this element considering the step value.
+		return ( Array.from( lightboxNav?.children ?? [] ).indexOf( this ) ) + 1;
+	}
+}

src/lightbox/tp-lightbox-nav.ts

@@ -0,0 +1,5 @@
+/**
+ * TP Lightbox Nav.
+ */
+export class TPLightboxNavElement extends HTMLElement {
+}

src/lightbox/tp-lightbox.ts

@@ -6,6 +6,7 @@ import { TPLightboxPreviousElement } from './tp-lightbox-previous';
 import { TPLightboxNextElement } from './tp-lightbox-next';
 import { TPLightboxTriggerElement } from './tp-lightbox-trigger';
 import { TPLightboxCountElement } from './tp-lightbox-count';
+import { TPLightboxNavItemElement } from './tp-lightbox-nav-item';
 
 /**
  * TP Lightbox.
@@ -21,6 +22,7 @@ export class TPLightboxElement extends HTMLElement {
 	protected touchStartY: number = 0;
 	protected swipeThreshold: number = 200;
 	protected dialogElement: HTMLDialogElement | null;
+	protected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null;
 
 	/**
 	 * Constructor.
@@ -31,6 +33,7 @@ export class TPLightboxElement extends HTMLElement {
 
 		// Initialize
 		this.dialogElement = this.querySelector( 'dialog' );
+		this.lightboxNavItems = this.querySelectorAll( 'tp-lightbox-nav-item' );
 
 		// Event listeners.
 		this.dialogElement?.addEventListener( 'click', this.handleDialogClick.bind( this ) );
@@ -69,6 +72,11 @@ export class TPLightboxElement extends HTMLElement {
 		if ( 'index' === name ) {
 			this.triggerCurrentIndexTarget();
 		}
+
+		// Trigger navigation update if open or index has changed.
+		if ( 'open' === name || 'index' === name ) {
+			this.updateNavCurrentItem();
+		}
 	}
 
 	/**
@@ -159,6 +167,13 @@ export class TPLightboxElement extends HTMLElement {
 
 		// Setting this attributes triggers a re-trigger.
 		this.setAttribute( 'index', index.toString() );
+
+		// dispatch slide-set event.
+		this.dispatchEvent( new CustomEvent( 'slide-set', {
+			detail: {
+				slideIndex: index,
+			},
+		} ) );
 	}
 
 	/**
@@ -482,4 +497,25 @@ export class TPLightboxElement extends HTMLElement {
 			}
 		}
 	}
+
+	/**
+	 * Update current item in navigation.
+	 */
+	updateNavCurrentItem(): void {
+		// Bail if we don't have nav items.
+		if ( ! this.lightboxNavItems ) {
+			// Exit.
+			return;
+		}
+
+		// Update current item.
+		this.lightboxNavItems.forEach( ( navItem: TPLightboxNavItemElement, index: number ): void => {
+			// Update current attribute.
+			if ( this.currentIndex - 1 === index ) {
+				navItem.setAttribute( 'current', 'yes' );
+			} else {
+				navItem.removeAttribute( 'current' );
+			}
+		} );
+	}
 }