From 209aee2b7768d0d18d26565d50aa2a20d2428d66 Mon Sep 17 00:00:00 2001
From: Nirav Sherasiya <sherasiyanirav@gmail.com>
Date: Thu, 28 Nov 2024 13:23:09 +0530
Subject: [PATCH 1/7] Add navitem subcomponent

---
 src/lightbox/index.html              | 20 +++++++++
 src/lightbox/index.ts                |  4 ++
 src/lightbox/tp-lightbox-nav-item.ts | 63 ++++++++++++++++++++++++++++
 src/lightbox/tp-lightbox-nav.ts      |  5 +++
 src/lightbox/tp-lightbox.ts          | 57 +++++++++++++++++++++++++
 5 files changed, 149 insertions(+)
 create mode 100644 src/lightbox/tp-lightbox-nav-item.ts
 create mode 100644 src/lightbox/tp-lightbox-nav.ts

diff --git a/src/lightbox/index.html b/src/lightbox/index.html
index 124dbe3..e6a5bca 100644
--- a/src/lightbox/index.html
+++ b/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>
diff --git a/src/lightbox/index.ts b/src/lightbox/index.ts
index e2c359d..8549804 100644
--- a/src/lightbox/index.ts
+++ b/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 );
diff --git a/src/lightbox/tp-lightbox-nav-item.ts b/src/lightbox/tp-lightbox-nav-item.ts
new file mode 100644
index 0000000..ef8e53e
--- /dev/null
+++ b/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.setCurrentSlide( this.getIndex() );
+
+		// 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 ) {
+			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;
+	}
+}
diff --git a/src/lightbox/tp-lightbox-nav.ts b/src/lightbox/tp-lightbox-nav.ts
new file mode 100644
index 0000000..34cc0c4
--- /dev/null
+++ b/src/lightbox/tp-lightbox-nav.ts
@@ -0,0 +1,5 @@
+/**
+ * TP Lightbox Nav.
+ */
+export class TPLightboxNavElement extends HTMLElement {
+}
diff --git a/src/lightbox/tp-lightbox.ts b/src/lightbox/tp-lightbox.ts
index 99e5590..de3f1a8 100644
--- a/src/lightbox/tp-lightbox.ts
+++ b/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 ) );
@@ -199,6 +202,9 @@ export class TPLightboxElement extends HTMLElement {
 		// Now, show the modal.
 		dialog.showModal();
 		this.setAttribute( 'open', 'yes' );
+
+		// Update navigation current item.
+		this.updateNavCurrentItem();
 	}
 
 	/**
@@ -237,6 +243,9 @@ export class TPLightboxElement extends HTMLElement {
 		if ( this.currentIndex > 1 ) {
 			this.currentIndex--;
 		}
+
+		// Update navigation current item.
+		this.updateNavCurrentItem();
 	}
 
 	/**
@@ -262,6 +271,9 @@ export class TPLightboxElement extends HTMLElement {
 		if ( this.currentIndex < allGroups.length ) {
 			this.currentIndex++;
 		}
+
+		// Update navigation current item.
+		this.updateNavCurrentItem();
 	}
 
 	/**
@@ -482,4 +494,49 @@ export class TPLightboxElement extends HTMLElement {
 			}
 		}
 	}
+
+	/**
+	 * Set the current slide index.
+	 *
+	 * @param {number} index Slide index.
+	 */
+	setCurrentSlide( index: number ): void {
+		// Check if slide index is valid.
+		if ( index > Number( this.getAttribute('total') ) || index <= 0 ) {
+			// Stop! It's not valid.
+			return;
+		}
+
+		// dispatch slide-set event.
+		this.dispatchEvent( new CustomEvent( 'slide-set', {
+			bubbles: true,
+			detail: {
+				slideIndex: index,
+			},
+		} ) );
+
+		// Set current slide index.
+		this.setAttribute( 'index', index.toString() );
+	}
+
+	/**
+	 * Update current item in navigation.
+	 */
+	updateNavCurrentItem(): void {
+
+		// Bail if we don't have nav items.
+		if ( ! this.lightboxNavItems ) {
+			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' );
+			}
+		} );
+	}
 }

From 7edd07c396dc601c0d349168d185da9e6f191c1a Mon Sep 17 00:00:00 2001
From: Nirav Sherasiya <sherasiyanirav@gmail.com>
Date: Thu, 28 Nov 2024 13:37:43 +0530
Subject: [PATCH 2/7] Update readme file

---
 src/lightbox/README.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lightbox/README.md b/src/lightbox/README.md
index e7fdcf6..e017b96 100644
--- a/src/lightbox/README.md
+++ b/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 slide get updated                                      |
 
 ## Methods
 
@@ -73,3 +74,7 @@ Open the lightbox.
 ### `close`
 
 Close the lightbox.
+
+### `setCurrentSlide`
+
+Set the current slide.

From fe928abf2b71eab64fc38f880347afa90400d046 Mon Sep 17 00:00:00 2001
From: Nirav Sherasiya <sherasiyanirav@gmail.com>
Date: Thu, 28 Nov 2024 13:57:11 +0530
Subject: [PATCH 3/7] Fix lint errors

---
 src/lightbox/tp-lightbox-nav-item.ts | 2 +-
 src/lightbox/tp-lightbox.ts          | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lightbox/tp-lightbox-nav-item.ts b/src/lightbox/tp-lightbox-nav-item.ts
index ef8e53e..f29c73b 100644
--- a/src/lightbox/tp-lightbox-nav-item.ts
+++ b/src/lightbox/tp-lightbox-nav-item.ts
@@ -48,9 +48,9 @@ export class TPLightboxNavItemElement extends HTMLElement {
 	 * @return {number} Index.
 	 */
 	getIndex(): number {
-
 		// Bail if no lightbox.
 		if ( ! this.lightbox ) {
+			// Exit.
 			return 0;
 		}
 
diff --git a/src/lightbox/tp-lightbox.ts b/src/lightbox/tp-lightbox.ts
index de3f1a8..982ad1f 100644
--- a/src/lightbox/tp-lightbox.ts
+++ b/src/lightbox/tp-lightbox.ts
@@ -22,7 +22,7 @@ export class TPLightboxElement extends HTMLElement {
 	protected touchStartY: number = 0;
 	protected swipeThreshold: number = 200;
 	protected dialogElement: HTMLDialogElement | null;
-	protected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null
+	protected lightboxNavItems: NodeListOf<TPLightboxNavItemElement> | null;
 
 	/**
 	 * Constructor.
@@ -502,7 +502,7 @@ export class TPLightboxElement extends HTMLElement {
 	 */
 	setCurrentSlide( index: number ): void {
 		// Check if slide index is valid.
-		if ( index > Number( this.getAttribute('total') ) || index <= 0 ) {
+		if ( index > Number( this.getAttribute( 'total' ) ) || index <= 0 ) {
 			// Stop! It's not valid.
 			return;
 		}
@@ -523,9 +523,9 @@ 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;
 		}
 

From 5b33675f81a52ad507d3a3f2d4d69f25dac80330 Mon Sep 17 00:00:00 2001
From: Nirav Sherasiya <sherasiyanirav@gmail.com>
Date: Fri, 29 Nov 2024 12:22:14 +0530
Subject: [PATCH 4/7] Refactor function call and remove bubble from custom
 event

---
 src/lightbox/tp-lightbox.ts | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/lightbox/tp-lightbox.ts b/src/lightbox/tp-lightbox.ts
index 982ad1f..a648946 100644
--- a/src/lightbox/tp-lightbox.ts
+++ b/src/lightbox/tp-lightbox.ts
@@ -72,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();
+		}
 	}
 
 	/**
@@ -202,9 +207,6 @@ export class TPLightboxElement extends HTMLElement {
 		// Now, show the modal.
 		dialog.showModal();
 		this.setAttribute( 'open', 'yes' );
-
-		// Update navigation current item.
-		this.updateNavCurrentItem();
 	}
 
 	/**
@@ -243,9 +245,6 @@ export class TPLightboxElement extends HTMLElement {
 		if ( this.currentIndex > 1 ) {
 			this.currentIndex--;
 		}
-
-		// Update navigation current item.
-		this.updateNavCurrentItem();
 	}
 
 	/**
@@ -271,9 +270,6 @@ export class TPLightboxElement extends HTMLElement {
 		if ( this.currentIndex < allGroups.length ) {
 			this.currentIndex++;
 		}
-
-		// Update navigation current item.
-		this.updateNavCurrentItem();
 	}
 
 	/**
@@ -509,7 +505,6 @@ export class TPLightboxElement extends HTMLElement {
 
 		// dispatch slide-set event.
 		this.dispatchEvent( new CustomEvent( 'slide-set', {
-			bubbles: true,
 			detail: {
 				slideIndex: index,
 			},

From 1ce35860648b7b651d36765e74f71196217cb720 Mon Sep 17 00:00:00 2001
From: Nirav Sherasiya <sherasiyanirav@gmail.com>
Date: Fri, 29 Nov 2024 12:24:47 +0530
Subject: [PATCH 5/7] Add space before paren

---
 src/lightbox/tp-lightbox.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lightbox/tp-lightbox.ts b/src/lightbox/tp-lightbox.ts
index a648946..ec7c912 100644
--- a/src/lightbox/tp-lightbox.ts
+++ b/src/lightbox/tp-lightbox.ts
@@ -74,7 +74,7 @@ export class TPLightboxElement extends HTMLElement {
 		}
 
 		// Trigger navigation update if open or index has changed.
-		if ( 'open' === name || 'index' === name) {
+		if ( 'open' === name || 'index' === name ) {
 			this.updateNavCurrentItem();
 		}
 	}

From fbfa74152b954000a0e63fb45924c1c301bf813b Mon Sep 17 00:00:00 2001
From: Nirav Sherasiya <sherasiyanirav@gmail.com>
Date: Mon, 2 Dec 2024 10:26:17 +0530
Subject: [PATCH 6/7] Remove setCurrentSlide api

---
 src/lightbox/README.md               |  4 ----
 src/lightbox/tp-lightbox-nav-item.ts |  2 +-
 src/lightbox/tp-lightbox.ts          | 30 +++++++---------------------
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/src/lightbox/README.md b/src/lightbox/README.md
index e017b96..a9261f9 100644
--- a/src/lightbox/README.md
+++ b/src/lightbox/README.md
@@ -74,7 +74,3 @@ Open the lightbox.
 ### `close`
 
 Close the lightbox.
-
-### `setCurrentSlide`
-
-Set the current slide.
diff --git a/src/lightbox/tp-lightbox-nav-item.ts b/src/lightbox/tp-lightbox-nav-item.ts
index f29c73b..15aec1c 100644
--- a/src/lightbox/tp-lightbox-nav-item.ts
+++ b/src/lightbox/tp-lightbox-nav-item.ts
@@ -36,7 +36,7 @@ export class TPLightboxNavItemElement extends HTMLElement {
 		}
 
 		// Set current slide.
-		this.lightbox.setCurrentSlide( this.getIndex() );
+		this.lightbox.currentIndex = Number( this.getIndex() ) ?? 1;
 
 		// Update navigation current item.
 		this.lightbox.updateNavCurrentItem();
diff --git a/src/lightbox/tp-lightbox.ts b/src/lightbox/tp-lightbox.ts
index ec7c912..a4dfa67 100644
--- a/src/lightbox/tp-lightbox.ts
+++ b/src/lightbox/tp-lightbox.ts
@@ -165,6 +165,13 @@ export class TPLightboxElement extends HTMLElement {
 			index = 1;
 		}
 
+		// dispatch slide-set event.
+		this.dispatchEvent( new CustomEvent( 'slide-set', {
+			detail: {
+				slideIndex: index,
+			},
+		} ) );
+
 		// Setting this attributes triggers a re-trigger.
 		this.setAttribute( 'index', index.toString() );
 	}
@@ -491,29 +498,6 @@ export class TPLightboxElement extends HTMLElement {
 		}
 	}
 
-	/**
-	 * Set the current slide index.
-	 *
-	 * @param {number} index Slide index.
-	 */
-	setCurrentSlide( index: number ): void {
-		// Check if slide index is valid.
-		if ( index > Number( this.getAttribute( 'total' ) ) || index <= 0 ) {
-			// Stop! It's not valid.
-			return;
-		}
-
-		// dispatch slide-set event.
-		this.dispatchEvent( new CustomEvent( 'slide-set', {
-			detail: {
-				slideIndex: index,
-			},
-		} ) );
-
-		// Set current slide index.
-		this.setAttribute( 'index', index.toString() );
-	}
-
 	/**
 	 * Update current item in navigation.
 	 */

From 589672748c8c45a4edb9ef9e876939770d32f6d4 Mon Sep 17 00:00:00 2001
From: Nirav Sherasiya <sherasiyanirav@gmail.com>
Date: Mon, 2 Dec 2024 12:46:40 +0530
Subject: [PATCH 7/7] Refactor code and  update readme

---
 src/lightbox/README.md      | 2 +-
 src/lightbox/tp-lightbox.ts | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lightbox/README.md b/src/lightbox/README.md
index a9261f9..b7f7788 100644
--- a/src/lightbox/README.md
+++ b/src/lightbox/README.md
@@ -63,7 +63,7 @@ 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-change | When the content has updated inside the lightbox            |
-| slide-set      | When slide get updated                                      |
+| slide-set      | When a slide in the lightbox is set                         |
 
 ## Methods
 
diff --git a/src/lightbox/tp-lightbox.ts b/src/lightbox/tp-lightbox.ts
index a4dfa67..f433d84 100644
--- a/src/lightbox/tp-lightbox.ts
+++ b/src/lightbox/tp-lightbox.ts
@@ -165,15 +165,15 @@ export class TPLightboxElement extends HTMLElement {
 			index = 1;
 		}
 
+		// 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,
 			},
 		} ) );
-
-		// Setting this attributes triggers a re-trigger.
-		this.setAttribute( 'index', index.toString() );
 	}
 
 	/**