Travelopia · abhishekxix · Feb 27, 2024 · Feb 27, 2024 · Feb 27, 2024 · Feb 29, 2024
diff --git a/src/lightbox/index.html b/src/lightbox/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Web Component: Lightbox Gallery</title>
+
+	<link rel="stylesheet" href="../../dist/lightbox/style.css" media="all">
+	<script type="module" src="../../dist/lightbox/index.js"></script>
+
+	<style>
+	</style>
+</head>
+
+<body>
+	<main>
+		<tp-lightbox-trigger>
+			<button type="button">Default gallery</button>
+			<template>
+				<div style="height:400px;width:400px;background-color:#d864d8;">
+				</div>
+			</template>
+		</tp-lightbox-trigger>
+		<tp-lightbox-trigger>
+			<button type="button">Default gallery 2</button>
+			<template>
+				<div style="height:400px;width:400px;background-color:#ff0000;">
+				</div>
+			</template>
+		</tp-lightbox-trigger>
+		<tp-lightbox-trigger gallery-id="my_gallery">
+			<button type="button">My gallery</button>
+			<template>
+				<div style="height:400px;width:400px;background-color:pink;">
+				</div>
+			</template>
+		</tp-lightbox-trigger>
+		<tp-lightbox-trigger gallery-id="my_gallery">
+			<button type="button">My gallery 2</button>
+			<template>
+				<div style="height:400px;width:400px;background-color:green;">
+				</div>
+			</template>
+		</tp-lightbox-trigger>
+	</main>
+</body>
+
+</html>
diff --git a/src/lightbox/index.ts b/src/lightbox/index.ts
@@ -0,0 +1,32 @@
+/**
+ * Styles.
+ */
+import './style.scss';
+
+/**
+ * Components
+ */
+import { TPLightboxElement } from './tp-lightbox';
+import { TPLightboxTriggerElement } from './tp-lightbox-trigger';
+import { TPLightboxGalleryElement } from './tp-lightbox-gallery';
+import { TPLightboxSliderTrackElement } from './tp-lightbox-slider-track';
+import { TPLightboxSliderElement } from './tp-lightbox-slider';
+import { TPLightboxSlideElement } from './tp-lightbox-slide';
+import { TPLightboxNavElement } from './tp-lightbox-nav';
+import { TPLightboxNavButtonElement } from './tp-lightbox-nav-button';
+import { TPLightboxCounterElement } from './tp-lightbox-counter';
+import { TPLightboxCloseElement } from './tp-lightbox-close';
+
+/**
+ * Register Components
+ */
+customElements.define( 'tp-lightbox', TPLightboxElement );
+customElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );
+customElements.define( 'tp-lightbox-gallery', TPLightboxGalleryElement );
+customElements.define( 'tp-lightbox-slider-track', TPLightboxSliderTrackElement );
+customElements.define( 'tp-lightbox-slider', TPLightboxSliderElement );
+customElements.define( 'tp-lightbox-slide', TPLightboxSlideElement );
+customElements.define( 'tp-lightbox-nav', TPLightboxNavElement );
+customElements.define( 'tp-lightbox-nav-button', TPLightboxNavButtonElement );
+customElements.define( 'tp-lightbox-counter', TPLightboxCounterElement );
+customElements.define( 'tp-lightbox-close', TPLightboxCloseElement );
diff --git a/src/lightbox/style.scss b/src/lightbox/style.scss
@@ -0,0 +1,34 @@
+tp-lightbox {
+
+	@keyframes fade-in {
+		to {
+			opacity: 1;
+		}
+	}
+
+	&-gallery {
+		display: none;
+
+		&[open] {
+			display: block;
+			position: fixed;
+			inset: 0;
+			background-color: rgba(0, 0, 0, 0.9);
+		}
+	}
+
+	&-close {
+		display: block;
+		position: absolute;
+		inset: 5px 10px auto auto;
+		height: fit-content;
+		width: fit-content;
+
+		&::before {
+			content: "\00d7";
+			color: #fff;
+			font-size: 2.5rem;
+			font-weight: 400;
+		}
+	}
+}
diff --git a/src/lightbox/tp-lightbox-close.ts b/src/lightbox/tp-lightbox-close.ts
@@ -0,0 +1,20 @@
+import { TPLightboxGalleryElement } from './tp-lightbox-gallery';
+
+/**
+ * TP Lightbox Close
+ */
+export class TPLightboxCloseElement extends HTMLElement {
+	/**
+	 * Connected Callback
+	 */
+	connectedCallback() {
+		this.addEventListener( 'click', this.handleClick.bind( this ) );
+	}
+
+	/**
+	 * Handle Click
+	 */
+	handleClick() {
+		this.closest<TPLightboxGalleryElement>( 'tp-lightbox-gallery' )?.close();
+	}
+}
diff --git a/src/lightbox/tp-lightbox-counter.ts b/src/lightbox/tp-lightbox-counter.ts
@@ -0,0 +1,6 @@
+/**
+ * TP Lightbox Counter
+ */
+export class TPLightboxCounterElement extends HTMLElement {
+
+}
diff --git a/src/lightbox/tp-lightbox-gallery.ts b/src/lightbox/tp-lightbox-gallery.ts
@@ -0,0 +1,90 @@
+/**
+ * TP Lightbox Gallery
+ */
+export class TPLightboxGalleryElement extends HTMLElement {
+	/**
+	 * Properties
+	 */
+	private galleryID: string | null;
+	private numSlides: number;
+	private currentSlide: number;
+
+	/**
+	 * Constructor
+	 */
+	constructor() {
+		super();
+
+		this.galleryID = this.getAttribute( 'gallery-id' );
+		this.numSlides = 0;
+		this.currentSlide = 0;
+	}
+
+	/**
+	 * Connected callback
+	 */
+	connectedCallback() {
+		const innerElements = [
+			document.createElement( 'tp-lightbox-counter' ),
+			document.createElement( 'tp-lightbox-close' ),
+			document.createElement( 'tp-lightbox-slider' ),
+		];
+
+		if ( null !== this.galleryID ) {
+			const prevBtn = document.createElement( 'tp-lightbox-nav-button' );
+			const nextBtn = document.createElement( 'tp-lightbox-nav-button' );
+			prevBtn.setAttribute( 'direction', 'prev' );
+			nextBtn.setAttribute( 'direction', 'next' );
+
+			innerElements.push( prevBtn, nextBtn );
+		}
+
+		innerElements.forEach( ( innerElement ) => this.appendChild( innerElement ) );
+
+		this.addEventListener( 'click', this.handleClick.bind( this ) );
+	}
+
+	/**
+	 * Adds slide
+	 *
+	 * @param { HTMLElement | undefined } slideContent
+	 */
+	addSlide( slideContent: HTMLElement | undefined ): number | undefined {
+		if ( ! slideContent ) {
+			return undefined;
+		}
+
+		const slideElement = document.createElement( 'tp-lightbox-slide' );
+		slideElement.appendChild( slideContent );
+
+		this.querySelector( 'tp-lightbox-slider' )?.appendChild( slideElement );
+
+		this.numSlides++;
+
+		return this.numSlides;
+	}
+
+	// Open the lightbox gallery.
+	open( slideIndex: number | undefined ) {
+		if ( ! slideIndex ) {
+			return;
+		}
+
+		this.currentSlide = slideIndex;
+		this.setAttribute( 'current-slide', this.currentSlide.toString() );
+		this.setAttribute( 'open', '' );
+		this.dispatchEvent( new CustomEvent( 'open', { bubbles: false } ) );
+	}
+
+	// Close the lightbox gallery.
+	close() {
+		this.removeAttribute( 'open' );
+		this.dispatchEvent( new CustomEvent( 'close', { bubbles: false } ) );
+	}
+
+	handleClick( e: Event ) {
+		if ( e.target === this ) {
+			this.close();
+		}
+	}
+}
diff --git a/src/lightbox/tp-lightbox-nav-button.ts b/src/lightbox/tp-lightbox-nav-button.ts
@@ -0,0 +1,6 @@
+/**
+ * TP Lightbox Nav Button
+ */
+export class TPLightboxNavButtonElement extends HTMLElement {
+
+}
diff --git a/src/lightbox/tp-lightbox-nav.ts b/src/lightbox/tp-lightbox-nav.ts
@@ -0,0 +1,6 @@
+/**
+ * TP Lightbox Nav
+ */
+export class TPLightboxNavElement extends HTMLElement {
+
+}
diff --git a/src/lightbox/tp-lightbox-slide.ts b/src/lightbox/tp-lightbox-slide.ts
@@ -0,0 +1,6 @@
+/**
+ * TP Lightbox Slide
+ */
+export class TPLightboxSlideElement extends HTMLElement {
+
+}
diff --git a/src/lightbox/tp-lightbox-slider-track.ts b/src/lightbox/tp-lightbox-slider-track.ts
@@ -0,0 +1,6 @@
+/**
+ * TP Lightbox Slider Track
+ */
+export class TPLightboxSliderTrackElement extends HTMLElement {
+
+}
diff --git a/src/lightbox/tp-lightbox-slider.ts b/src/lightbox/tp-lightbox-slider.ts
@@ -0,0 +1,38 @@
+import { TPLightboxGalleryElement } from './tp-lightbox-gallery';
+import { TPLightboxTriggerElement } from './tp-lightbox-trigger';
+
+/**
+ * TP Lightbox Slider
+ */
+export class TPLightboxSliderElement extends HTMLElement {
+	/**
+	 * Connected callback
+	 */
+	connectedCallback() {
+		const gallery = this.closest( 'tp-lightbox-gallery' ) as TPLightboxGalleryElement;
+
+		if ( ! gallery ) {
+			return;
+		}
+
+		const galleryID = gallery.getAttribute( 'gallery-id' );
+
+		let triggerQuery = 'tp-lightbox-trigger';
+
+		if ( ! galleryID ) {
+			triggerQuery += ':not([gallery-id])';
+		} else {
+			triggerQuery += `[gallery-id="${ galleryID }"]`;
+		}
+
+		const triggers = Array.from( document.querySelectorAll<TPLightboxTriggerElement>( triggerQuery ) );
+
+		triggers.forEach( ( trigger ) => {
+			const slideIndex = gallery.addSlide( trigger.lightboxContentTemplate?.content.cloneNode( true ) as HTMLElement );
+
+			if ( slideIndex ) {
+				trigger.setAttribute( 'slide-index', slideIndex.toString() );
+			}
+		} );
+	}
+}