@product7/product7-js 0.1.0

package/src/widgets/ChangelogWidget.js

@@ -0,0 +1,615 @@
+import { BaseWidget } from './BaseWidget.js';
+
+export class ChangelogWidget extends BaseWidget {
+	constructor(options) {
+		super({ ...options, type: 'changelog' });
+		this.changelogs = [];
+		this.isLoading = false;
+		this.modalElement = null;
+		this.sidebarElement = null;
+		this.listModalBackdropElement = null;
+		this.currentIndex = 0;
+	}
+
+	_hasTrigger() {
+		return this.options.trigger === true || this.options.trigger === undefined;
+	}
+
+	_render() {
+		if (!this._hasTrigger()) {
+			const placeholder = document.createElement('div');
+			placeholder.style.display = 'none';
+			return placeholder;
+		}
+
+		const trigger = document.createElement('div');
+		trigger.className = `changelog-widget position-${this.options.position} changelog-theme-${this.options.theme || 'light'}`;
+		trigger.innerHTML = `
+			<button class="changelog-trigger-btn" type="button" aria-label="View Updates">
+				<svg class="changelog-icon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+					<path d="M5.8 21L7.4 14L2 9.2L9.2 8.6L12 2L14.8 8.6L22 9.2L16.6 14L18.2 21L12 17.3L5.8 21Z"/>
+				</svg>
+				<span class="changelog-text">${this.options.triggerText || "What's New"}</span>
+				<span class="changelog-confetti-emoji">🎉</span>
+				${this.options.showBadge ? '<span class="changelog-badge"></span>' : ''}
+			</button>
+		`;
+
+		if (this.options.customStyles) {
+			Object.assign(trigger.style, this.options.customStyles);
+		}
+
+		return trigger;
+	}
+
+	_attachEvents() {
+		if (!this._hasTrigger()) return;
+
+		const button = this.element.querySelector('.changelog-trigger-btn');
+		button.addEventListener('click', () => {
+			this.openSidebar();
+		});
+	}
+
+	async openModal() {
+		if (this.modalElement) return;
+
+		this.state.isOpen = true;
+		this._createModal();
+
+		if (this.changelogs.length === 0) {
+			await this._loadChangelogs();
+		}
+
+		this.currentIndex = 0;
+		this._renderCurrentChangelog();
+
+		document.body.style.overflow = 'hidden';
+
+		requestAnimationFrame(() => {
+			if (this.modalElement) {
+				this.modalElement.classList.add('open');
+			}
+			if (this.backdropElement) {
+				this.backdropElement.classList.add('show');
+			}
+		});
+	}
+
+	closeModal() {
+		document.body.style.overflow = '';
+
+		if (this.modalElement) {
+			this.modalElement.classList.remove('open');
+		}
+		if (this.backdropElement) {
+			this.backdropElement.classList.remove('show');
+		}
+
+		setTimeout(() => {
+			this.state.isOpen = false;
+			if (this.modalElement && this.modalElement.parentNode) {
+				this.modalElement.parentNode.removeChild(this.modalElement);
+				this.modalElement = null;
+			}
+			if (this.backdropElement && this.backdropElement.parentNode) {
+				this.backdropElement.parentNode.removeChild(this.backdropElement);
+				this.backdropElement = null;
+			}
+		}, 300);
+	}
+
+	_createModal() {
+		if (this.options.showBackdrop !== false) {
+			this.backdropElement = document.createElement('div');
+			this.backdropElement.className = `changelog-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
+			document.body.appendChild(this.backdropElement);
+			this.backdropElement.addEventListener('click', () => this.closeModal());
+		}
+
+		this.modalElement = document.createElement('div');
+		this.modalElement.className = `changelog-modal changelog-theme-${this.options.theme || 'light'}`;
+		this.modalElement.innerHTML = `
+			<div class="changelog-modal-container">
+				<button class="changelog-modal-close" type="button" aria-label="Close">
+					<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+				</button>
+				<div class="changelog-modal-content">
+					<div class="changelog-loading">
+						<div class="sdk-spinner"></div>
+					</div>
+				</div>
+			</div>
+		`;
+
+		document.body.appendChild(this.modalElement);
+
+		this.modalElement
+			.querySelector('.changelog-modal-container')
+			.addEventListener('click', (e) => e.stopPropagation());
+
+		this.modalElement
+			.querySelector('.changelog-modal-close')
+			.addEventListener('click', () => this.closeModal());
+
+		this._escapeHandler = (e) => {
+			if (e.key === 'Escape') this.closeModal();
+		};
+		document.addEventListener('keydown', this._escapeHandler);
+	}
+
+	async openSidebar() {
+		if (this.listModalElement) return;
+
+		if (this.modalElement) {
+			this.closeModal();
+			await new Promise((resolve) => setTimeout(resolve, 350));
+		}
+
+		this.state.isOpen = true;
+		this._createListModal();
+
+		if (this.changelogs.length === 0) {
+			await this._loadChangelogs();
+		}
+
+		this._renderChangelogList();
+
+		document.body.style.overflow = 'hidden';
+
+		requestAnimationFrame(() => {
+			if (this.listModalElement) {
+				this.listModalElement.classList.add('open');
+				this._showConfetti();
+			}
+			if (this.listModalBackdropElement) {
+				this.listModalBackdropElement.classList.add('show');
+			}
+		});
+	}
+
+	_showConfetti() {
+		const colors = [
+			'#FF6B6B',
+			'#4ECDC4',
+			'#FFE66D',
+			'#95E1D3',
+			'#F38181',
+			'#AA96DA',
+			'#FCBAD3',
+			'#A8D8EA',
+		];
+		const confettiCount = 50;
+		const container = document.createElement('div');
+		container.className = 'changelog-confetti-container';
+		document.body.appendChild(container);
+
+		for (let i = 0; i < confettiCount; i++) {
+			const confetti = document.createElement('div');
+			confetti.className = 'changelog-confetti';
+			confetti.style.left = Math.random() * 100 + '%';
+			confetti.style.backgroundColor =
+				colors[Math.floor(Math.random() * colors.length)];
+			confetti.style.animationDelay = Math.random() * 0.5 + 's';
+			confetti.style.animationDuration = Math.random() * 1 + 1.5 + 's';
+
+			const shapes = ['circle', 'square', 'rectangle'];
+			const shape = shapes[Math.floor(Math.random() * shapes.length)];
+			if (shape === 'circle') {
+				confetti.style.borderRadius = '50%';
+				confetti.style.width = Math.random() * 8 + 4 + 'px';
+				confetti.style.height = confetti.style.width;
+			} else if (shape === 'rectangle') {
+				confetti.style.width = Math.random() * 4 + 3 + 'px';
+				confetti.style.height = Math.random() * 10 + 8 + 'px';
+			} else {
+				confetti.style.width = Math.random() * 8 + 4 + 'px';
+				confetti.style.height = confetti.style.width;
+			}
+
+			container.appendChild(confetti);
+		}
+
+		setTimeout(() => {
+			if (container.parentNode) container.parentNode.removeChild(container);
+		}, 2500);
+	}
+
+	closeSidebar() {
+		document.body.style.overflow = '';
+
+		if (this.listModalElement) {
+			this.listModalElement.classList.remove('open');
+		}
+		if (this.listModalBackdropElement) {
+			this.listModalBackdropElement.classList.remove('show');
+		}
+
+		setTimeout(() => {
+			this.state.isOpen = false;
+			if (this.listModalElement && this.listModalElement.parentNode) {
+				this.listModalElement.parentNode.removeChild(this.listModalElement);
+				this.listModalElement = null;
+			}
+			if (
+				this.listModalBackdropElement &&
+				this.listModalBackdropElement.parentNode
+			) {
+				this.listModalBackdropElement.parentNode.removeChild(
+					this.listModalBackdropElement
+				);
+				this.listModalBackdropElement = null;
+			}
+			if (this._listModalEscapeHandler) {
+				document.removeEventListener('keydown', this._listModalEscapeHandler);
+			}
+		}, 300);
+	}
+
+	_createListModal() {
+		if (this.options.showBackdrop !== false) {
+			this.listModalBackdropElement = document.createElement('div');
+			this.listModalBackdropElement.className = `changelog-list-modal-backdrop changelog-theme-${this.options.theme || 'light'}`;
+			document.body.appendChild(this.listModalBackdropElement);
+			this.listModalBackdropElement.addEventListener('click', () =>
+				this.closeSidebar()
+			);
+		}
+
+		this.listModalElement = document.createElement('div');
+		this.listModalElement.className = `changelog-list-modal changelog-theme-${this.options.theme || 'light'}`;
+		this.listModalElement.innerHTML = `
+			<div class="changelog-list-modal-container">
+				<div class="changelog-list-modal-header">
+					<h2>${this.options.title || "What's New"} 🎉</h2>
+					<button class="changelog-list-modal-close" type="button" aria-label="Close">
+						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					</button>
+				</div>
+				<div class="changelog-list-modal-body">
+					<div class="changelog-loading">
+						<div class="sdk-spinner"></div>
+					</div>
+				</div>
+			</div>
+		`;
+
+		document.body.appendChild(this.listModalElement);
+
+		this.listModalElement
+			.querySelector('.changelog-list-modal-container')
+			.addEventListener('click', (e) => e.stopPropagation());
+
+		this.listModalElement
+			.querySelector('.changelog-list-modal-close')
+			.addEventListener('click', () => this.closeSidebar());
+
+		this._listModalEscapeHandler = (e) => {
+			if (e.key === 'Escape') this.closeSidebar();
+		};
+		document.addEventListener('keydown', this._listModalEscapeHandler);
+	}
+
+	_renderChangelogList() {
+		const body = this.listModalElement.querySelector(
+			'.changelog-list-modal-body'
+		);
+
+		if (this.isLoading) return;
+
+		if (this.changelogs.length === 0) {
+			body.innerHTML = `
+				<div class="changelog-empty">
+					<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+						<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+						<polyline points="14,2 14,8 20,8"/>
+					</svg>
+					<p>No updates yet</p>
+				</div>
+			`;
+			return;
+		}
+
+		body.innerHTML = `
+			<div class="changelog-list">
+				${this.changelogs.map((changelog, index) => this._renderChangelogListItem(changelog, index)).join('')}
+			</div>
+		`;
+
+		body.querySelectorAll('.changelog-list-item').forEach((item, index) => {
+			item.addEventListener('click', () => {
+				this._handleViewUpdate(this.changelogs[index]);
+			});
+		});
+	}
+
+	_renderChangelogListItem(changelog, index) {
+		const hasImage = changelog.cover_image || changelog.image;
+		const imageUrl = changelog.cover_image || changelog.image;
+		const date = changelog.published_at
+			? this._formatDate(changelog.published_at)
+			: '';
+		const description = this._truncateDescription(
+			changelog.excerpt || changelog.description,
+			100
+		);
+		const labelsHTML =
+			changelog.labels && changelog.labels.length > 0
+				? `<div class="changelog-list-item-labels">
+						${changelog.labels
+							.map(
+								(label) =>
+									`<span class="changelog-label" style="background-color: ${label.color || '#E5E7EB'}; color: ${this._getContrastColor(label.color || '#E5E7EB')}">${label.name}</span>`
+							)
+							.join('')}
+					</div>`
+				: '';
+
+		return `
+			<div class="changelog-list-item" data-index="${index}">
+				<div class="changelog-list-item-content">
+					<div class="changelog-list-item-meta">
+						${date ? `<span class="changelog-list-item-date">${date}</span>` : ''}
+						${labelsHTML}
+					</div>
+					<h3 class="changelog-list-item-title">${changelog.title}</h3>
+					${description ? `<p class="changelog-list-item-description">${description}</p>` : ''}
+				</div>
+				${hasImage ? `<div class="changelog-list-item-image"><img src="${imageUrl}" alt="${changelog.title}" loading="lazy" /></div>` : ''}
+				<iconify-icon icon="ph:caret-right" class="changelog-list-item-arrow" width="16" height="16"></iconify-icon>
+			</div>
+		`;
+	}
+
+	async _loadChangelogs() {
+		this.isLoading = true;
+
+		try {
+			const result = await this.apiService.getChangelogs();
+			this.changelogs = result.data || [];
+			this.sdk.eventBus.emit('changelog:loaded', {
+				changelogs: this.changelogs,
+			});
+		} catch (error) {
+			this.changelogs = [];
+			this.sdk.eventBus.emit('changelog:error', { error });
+		} finally {
+			this.isLoading = false;
+		}
+	}
+
+	_renderCurrentChangelog() {
+		const content = this.modalElement.querySelector('.changelog-modal-content');
+
+		if (this.isLoading) return;
+
+		if (this.changelogs.length === 0) {
+			content.innerHTML = `
+				<div class="changelog-empty">
+					<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+						<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
+						<polyline points="14,2 14,8 20,8"/>
+					</svg>
+					<p>No updates yet</p>
+				</div>
+			`;
+			return;
+		}
+
+		const changelog = this.changelogs[this.currentIndex];
+		const hasImage = changelog.cover_image || changelog.image;
+		const imageUrl = changelog.cover_image || changelog.image;
+		const hasMultiple = this.changelogs.length > 1;
+		const description = this._truncateDescription(
+			changelog.excerpt || changelog.description,
+			160
+		);
+
+		content.innerHTML = `
+			<div class="changelog-popup-item">
+				${
+					hasImage
+						? `
+					<div class="changelog-popup-image">
+						<img src="${imageUrl}" alt="${changelog.title}" loading="lazy" />
+					</div>
+				`
+						: ''
+				}
+				<div class="changelog-popup-body">
+					<h2 class="changelog-popup-title">${changelog.title}</h2>
+					${description ? `<p class="changelog-popup-description">${description}</p>` : ''}
+					<button class="changelog-popup-btn" type="button">
+						${this.options.viewButtonText || 'View Update'}
+					</button>
+				</div>
+				<div class="changelog-popup-footer">
+					${
+						hasMultiple
+							? `
+						<div class="changelog-popup-dots">
+							${this.changelogs
+								.map(
+									(_, i) => `
+								<span class="changelog-dot ${i === this.currentIndex ? 'active' : ''}" data-index="${i}"></span>
+							`
+								)
+								.join('')}
+						</div>
+					`
+							: ''
+					}
+					<button class="changelog-view-all-btn" type="button">
+						View all updates
+						<iconify-icon icon="ph:arrow-right" width="16" height="16"></iconify-icon>
+					</button>
+				</div>
+			</div>
+		`;
+
+		content
+			.querySelector('.changelog-popup-btn')
+			.addEventListener('click', () => {
+				this._handleViewUpdate(changelog);
+			});
+
+		content
+			.querySelector('.changelog-view-all-btn')
+			.addEventListener('click', () => {
+				this.closeModal();
+				setTimeout(() => this.openSidebar(), 350);
+			});
+
+		if (hasMultiple) {
+			content.querySelectorAll('.changelog-dot').forEach((dot) => {
+				dot.addEventListener('click', (e) => {
+					this.currentIndex = parseInt(e.target.dataset.index, 10);
+					this._renderCurrentChangelog();
+				});
+			});
+		}
+	}
+
+	_handleViewUpdate(changelog) {
+		this.sdk.eventBus.emit('changelog:view', { changelog });
+
+		const changelogBase = (this.options.changelogBaseUrl || '').replace(
+			/\/$/,
+			''
+		);
+		const url =
+			changelog.url ||
+			(changelog.slug && changelogBase
+				? `${changelogBase}/${changelog.slug}`
+				: null) ||
+			changelogBase ||
+			null;
+
+		if (url) {
+			if (this.options.openInNewTab !== false) {
+				window.open(url, '_blank', 'noopener,noreferrer');
+			} else {
+				window.location.href = url;
+			}
+		}
+
+		if (typeof this.options.onViewUpdate === 'function') {
+			this.options.onViewUpdate(changelog);
+		}
+	}
+
+	_stripHtml(html) {
+		const tmp = document.createElement('div');
+		tmp.innerHTML = html;
+		return (tmp.textContent || tmp.innerText || '').trim();
+	}
+
+	_truncateDescription(html, maxLength = 120) {
+		if (!html) return '';
+		const plain = this._stripHtml(html);
+		if (plain.length <= maxLength) return plain;
+		return plain.substring(0, maxLength).trimEnd() + '...';
+	}
+
+	_formatDate(dateString) {
+		const date = new Date(dateString);
+		return date.toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric',
+		});
+	}
+
+	_getContrastColor(hexColor) {
+		const hex = hexColor.replace('#', '');
+		const r = parseInt(hex.substr(0, 2), 16);
+		const g = parseInt(hex.substr(2, 2), 16);
+		const b = parseInt(hex.substr(4, 2), 16);
+		const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+		return luminance > 0.5 ? '#1F2937' : '#FFFFFF';
+	}
+
+	hideBadge() {
+		const badge = this.element?.querySelector('.changelog-badge');
+		if (badge) badge.style.display = 'none';
+	}
+
+	showBadge() {
+		const badge = this.element?.querySelector('.changelog-badge');
+		if (badge) badge.style.display = 'block';
+	}
+
+	nextChangelog() {
+		if (this.currentIndex < this.changelogs.length - 1) {
+			this.currentIndex++;
+			this._renderCurrentChangelog();
+		}
+	}
+
+	prevChangelog() {
+		if (this.currentIndex > 0) {
+			this.currentIndex--;
+			this._renderCurrentChangelog();
+		}
+	}
+
+	async refresh() {
+		this.changelogs = [];
+		await this._loadChangelogs();
+		if (this.modalElement) {
+			this.currentIndex = 0;
+			this._renderCurrentChangelog();
+		}
+		if (this.listModalElement) {
+			this._renderChangelogList();
+		}
+	}
+
+	open() {
+		this.openSidebar();
+		return this;
+	}
+
+	close() {
+		this.closeSidebar();
+		return this;
+	}
+
+	toggle() {
+		if (this.state.isOpen) {
+			this.closeSidebar();
+		} else {
+			this.openSidebar();
+		}
+		return this;
+	}
+
+	mount(container) {
+		super.mount(container);
+
+		// Bind to a custom trigger element if provided
+		if (this.options.trigger && this.options.trigger !== true) {
+			const triggerEl =
+				typeof this.options.trigger === 'string'
+					? document.querySelector(this.options.trigger)
+					: this.options.trigger instanceof Element
+						? this.options.trigger
+						: null;
+			if (triggerEl) {
+				triggerEl.addEventListener('click', () => this.open());
+			}
+		}
+	}
+
+	destroy() {
+		if (this._escapeHandler) {
+			document.removeEventListener('keydown', this._escapeHandler);
+		}
+		if (this._listModalEscapeHandler) {
+			document.removeEventListener('keydown', this._listModalEscapeHandler);
+		}
+		this.closeModal();
+		this.closeSidebar();
+		super.destroy();
+	}
+}