Travelopia · junaidbhura · Apr 8, 2024 · Mar 25, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/src/lightbox/README.md b/src/lightbox/README.md
@@ -0,0 +1,73 @@
+# Lightbox
+
+<table width="100%">
+	<tr>
+		<td align="left" width="70%">
+        <p>Built by the super talented team at <strong><a href="https://www.travelopia.com/work-with-us/">Travelopia</a></strong>.</p>
+		</td>
+		<td align="center" width="30%">
+			<img src="https://www.travelopia.com/wp-content/themes/travelopia/assets/svg/logo-travelopia-circle.svg" width="50" />
+		</td>
+	</tr>
+</table>
+
+## Sample Usage
+
+This is a super minimal modal that is designed to be highly extendable.
+
+Example:
+
+First, create the lightbox and give it an ID. Style as needed:
+
+```html
+<tp-lightbox id="my-lightbox" close-on-overlay-click="yes">
+	<dialog>
+		<tp-lightbox-close>
+			<button>Close</button> <-- There must be a button inside this component.
+		</tp-lightbox-close>
+		<tp-lightbox-previous>
+			<button>Previous</button> <-- There must be a button inside this component.
+		</tp-lightbox-previous>
+		<tp-lightbox-next>
+			<button>Next</button> <-- There must be a button inside this component.
+		</tp-lightbox-next>
+		<tp-lightbox-content></tp-lightbox-content>
+		<tp-lightbox-count format="$current / $total"></tp-lightbox-count>
+	</dialog>
+</tp-lightbox>
+```
+
+Next, we need to trigger the lightbox with and give it some content. Any content added inside the `template` will be added to the lightbox, so you have full control over it:
+
+```html
+<tp-lightbox-trigger lightbox="my-lightbox" group="group-1"> <-- Group multiple lightboxes together with a unique name.
+	<button>Open Lightbox</button> <-- There must be a button inside this component.
+	<template> <-- There must be template inside this component.
+		<img src="https://picsum.photos/id/65/600/300" width="600" height="300" alt="">
+	</template>
+</tp-lightbox-trigger>
+```
+
+## Attributes
+
+| Attribute              | Required  | Values   | Notes                                        |
+|------------------------|-----------|----------|----------------------------------------------|
+| close-on-overlay-click | No        | `yes`    | Closes the modal when the overlay is clicked |
+
+## Events
+
+| Event          | Notes                                                       |
+|----------------|-------------------------------------------------------------|
+| 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            |
+
+## Methods
+
+### `open`
+
+Open the lightbox.
+
+### `close`
+
+Close the lightbox.
diff --git a/src/lightbox/index.html b/src/lightbox/index.html
@@ -0,0 +1,62 @@
+<!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</title>
+
+	<link rel="stylesheet" href="../../dist/lightbox/style.css" media="all">
+	<script type="module" src="../../dist/lightbox/index.js"></script>
+</head>
+<body>
+	<main>
+		<tp-lightbox id="my-lightbox" close-on-overlay-click="yes">
+			<dialog>
+				<tp-lightbox-close>
+					<button>Close</button>
+				</tp-lightbox-close>
+				<tp-lightbox-previous>
+					<button>Previous</button>
+				</tp-lightbox-previous>
+				<tp-lightbox-next>
+					<button>Next</button>
+				</tp-lightbox-next>
+				<tp-lightbox-content></tp-lightbox-content>
+				<tp-lightbox-count format="$current / $total"></tp-lightbox-count>
+			</dialog>
+		</tp-lightbox>
+
+		<tp-lightbox-trigger lightbox="my-lightbox" group="group-1">
+			<button>Open Lightbox: Group 1</button>
+			<template>
+				<img src="https://picsum.photos/id/65/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/76/600/300" width="600" height="300" alt="">
+			</template>
+		</tp-lightbox-trigger>
+
+		<br><br>
+
+		<tp-lightbox-trigger lightbox="my-lightbox" group="group-2">
+			<button>Open Lightbox: Group 2</button>
+			<template>
+				<p>Lorem ipsum.</p>
+				<p>Lorem ipsum.</p>
+			</template>
+		</tp-lightbox-trigger>
+
+		<tp-lightbox-trigger lightbox="my-lightbox" group="group-2">
+			<button>Open Lightbox: Group 2</button>
+			<template>
+				<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=ObmgotljlYd1J42S" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+			</template>
+		</tp-lightbox-trigger>
+	</main>
+</body>
+</html>
diff --git a/src/lightbox/index.ts b/src/lightbox/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Styles.
+ */
+import './style.scss';
+
+/**
+ * Components.
+ */
+import { TPLightboxElement } from './tp-lightbox';
+import { TPLightboxContentElement } from './tp-lightbox-content';
+import { TPLightboxCloseElement } from './tp-lightbox-close';
+import { TPLightboxPreviousElement } from './tp-lightbox-previous';
+import { TPLightboxNextElement } from './tp-lightbox-next';
+import { TPLightboxCountElement } from './tp-lightbox-count';
+import { TPLightboxTriggerElement } from './tp-lightbox-trigger';
+
+/**
+ * Register Components.
+ */
+customElements.define( 'tp-lightbox', TPLightboxElement );
+customElements.define( 'tp-lightbox-content', TPLightboxContentElement );
+customElements.define( 'tp-lightbox-close', TPLightboxCloseElement );
+customElements.define( 'tp-lightbox-previous', TPLightboxPreviousElement );
+customElements.define( 'tp-lightbox-next', TPLightboxNextElement );
+customElements.define( 'tp-lightbox-count', TPLightboxCountElement );
+customElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );
diff --git a/src/lightbox/style.scss b/src/lightbox/style.scss
@@ -0,0 +1,44 @@
+// Prevent scrolling when lightbox is open.
+:root:has(tp-lightbox dialog[open]) {
+	overflow: clip;
+}
+
+@keyframes show-tp-lightbox {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+tp-lightbox {
+
+	dialog {
+		border: 0;
+		padding: 0;
+
+		&[open] {
+			animation-name: show-tp-lightbox;
+			animation-duration: 0.5s;
+			animation-timing-function: ease-in-out;
+		}
+
+		&::backdrop {
+			background: rgba(0, 0, 0, 0.6);
+		}
+	}
+}
+
+tp-lightbox-content {
+	display: block;
+	position: relative;
+}
+
+tp-lightbox[loading] tp-lightbox-content::after {
+	position: absolute;
+	content: "Loading...";
+	z-index: 5;
+	top: 50px;
+	left: 50px;
+}
diff --git a/src/lightbox/tp-lightbox-close.ts b/src/lightbox/tp-lightbox-close.ts
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies.
+ */
+import { TPLightboxElement } from './tp-lightbox';
+
+/**
+ * TP Lightbox Close.
+ */
+export class TPLightboxCloseElement extends HTMLElement {
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		super();
+
+		// Events.
+		this.querySelector( 'button' )?.addEventListener( 'click', this.close.bind( this ) );
+	}
+
+	/**
+	 * Close the lightbox.
+	 */
+	close(): void {
+		const lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );
+		if ( lightbox ) {
+			setTimeout( (): void => {
+				lightbox.close();
+			}, 0 );
+		}
+	}
+}
diff --git a/src/lightbox/tp-lightbox-content.ts b/src/lightbox/tp-lightbox-content.ts
@@ -0,0 +1,5 @@
+/**
+ * TP Lightbox Content.
+ */
+export class TPLightboxContentElement extends HTMLElement {
+}
diff --git a/src/lightbox/tp-lightbox-count.ts b/src/lightbox/tp-lightbox-count.ts
@@ -0,0 +1,64 @@
+/**
+ * Internal dependencies.
+ */
+import { TPLightboxElement } from './tp-lightbox';
+
+/**
+ * TP Slider Count.
+ */
+export class TPLightboxCountElement extends HTMLElement {
+	/**
+	 * Get observed attributes.
+	 *
+	 * @return {Array} Observed attributes.
+	 */
+	static get observedAttributes(): string[] {
+		return [ 'format' ];
+	}
+
+	/**
+	 * Get format.
+	 *
+	 * @return {string} Format.
+	 */
+	get format(): string {
+		return this.getAttribute( 'format' ) ?? '$current / $total';
+	}
+
+	/**
+	 * Set format.
+	 *
+	 * @param {string} format Format.
+	 */
+	set format( format: string ) {
+		this.setAttribute( 'format', format );
+	}
+
+	/**
+	 * Attribute changed callback.
+	 */
+	attributeChangedCallback(): void {
+		this.update();
+	}
+
+	/**
+	 * Update component.
+	 */
+	update(): void {
+		const lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );
+		if ( ! lightbox ) {
+			return;
+		}
+
+		const current: string = lightbox.currentIndex.toString();
+		const total: string = lightbox.getAttribute( 'total' ) ?? '';
+
+		this.innerHTML =
+			this.format
+				.replace( '$current', current )
+				.replace( '$total', total );
+
+		this.setAttribute( 'current', current );
+		this.setAttribute( 'total', total );
+	}
+}
diff --git a/src/lightbox/tp-lightbox-next.ts b/src/lightbox/tp-lightbox-next.ts
@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies.
+ */
+import { TPLightboxElement } from './tp-lightbox';
+
+/**
+ * TP Lightbox Close.
+ */
+export class TPLightboxNextElement extends HTMLElement {
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		super();
+
+		// Events.
+		this.querySelector( 'button' )?.addEventListener( 'click', this.next.bind( this ) );
+	}
+
+	/**
+	 * Navigate next.
+	 */
+	next(): void {
+		if ( 'yes' === this.getAttribute( 'disabled' ) ) {
+			return;
+		}
+
+		const lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );
+		if ( lightbox ) {
+			setTimeout( (): void => {
+				lightbox.next();
+			}, 0 );
+		}
+	}
+}
diff --git a/src/lightbox/tp-lightbox-previous.ts b/src/lightbox/tp-lightbox-previous.ts
@@ -0,0 +1,35 @@
+/**
+ * Internal dependencies.
+ */
+import { TPLightboxElement } from './tp-lightbox';
+
+/**
+ * TP Lightbox Close.
+ */
+export class TPLightboxPreviousElement extends HTMLElement {
+	/**
+	 * Constructor.
+	 */
+	constructor() {
+		super();
+
+		// Events.
+		this.querySelector( 'button' )?.addEventListener( 'click', this.previous.bind( this ) );
+	}
+
+	/**
+	 * Navigate previous.
+	 */
+	previous(): void {
+		if ( 'yes' === this.getAttribute( 'disabled' ) ) {
+			return;
+		}
+
+		const lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );
+		if ( lightbox ) {
+			setTimeout( (): void => {
+				lightbox.previous();
+			}, 0 );
+		}
+	}
+}