@magic-spells/cart-panel 0.3.1 → 1.0.0

package/src/cart-item.js

@@ -0,0 +1,448 @@
+// =============================================================================
+// CartItem Component
+// =============================================================================
+
+/**
+ * CartItem class that handles the functionality of a cart item component
+ */
+class CartItem extends HTMLElement {
+	// Static template functions shared across all instances
+	static #templates = new Map();
+	static #processingTemplate = null;
+
+	// Private fields
+	#currentState = 'ready';
+	#isDestroying = false;
+	#isAppearing = false;
+	#handlers = {};
+	#itemData = null;
+	#cartData = null;
+	#lastRenderedHTML = '';
+
+	/**
+	 * Set the template function for rendering cart items
+	 * @param {string} name - Template name ('default' for default template)
+	 * @param {Function} templateFn - Function that takes (itemData, cartData) and returns HTML string
+	 */
+	static setTemplate(name, templateFn) {
+		if (typeof name !== 'string') {
+			throw new Error('Template name must be a string');
+		}
+		if (typeof templateFn !== 'function') {
+			throw new Error('Template must be a function');
+		}
+		CartItem.#templates.set(name, templateFn);
+	}
+
+	/**
+	 * Set the processing template function for rendering processing overlay
+	 * @param {Function} templateFn - Function that returns HTML string for processing state
+	 */
+	static setProcessingTemplate(templateFn) {
+		if (typeof templateFn !== 'function') {
+			throw new Error('Processing template must be a function');
+		}
+		CartItem.#processingTemplate = templateFn;
+	}
+
+	/**
+	 * Create a cart item with appearing animation
+	 * @param {Object} itemData - Shopify cart item data
+	 * @param {Object} cartData - Full Shopify cart object
+	 * @returns {CartItem} Cart item instance that will animate in
+	 */
+	static createAnimated(itemData, cartData) {
+		return new CartItem(itemData, cartData, { animate: true });
+	}
+
+	/**
+	 * Define which attributes should be observed for changes
+	 */
+	static get observedAttributes() {
+		return ['state', 'key'];
+	}
+
+	/**
+	 * Called when observed attributes change
+	 */
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+
+		if (name === 'state') {
+			this.#currentState = newValue || 'ready';
+		}
+	}
+
+	constructor(itemData = null, cartData = null, options = {}) {
+		super();
+
+		// Store item and cart data if provided
+		this.#itemData = itemData;
+		this.#cartData = cartData;
+
+		// Set initial state - start with 'appearing' only if explicitly requested
+		const shouldAnimate = options.animate || this.hasAttribute('animate-in');
+		this.#currentState =
+			itemData && shouldAnimate ? 'appearing' : this.getAttribute('state') || 'ready';
+
+		// Bind event handlers
+		this.#handlers = {
+			click: this.#handleClick.bind(this),
+			change: this.#handleChange.bind(this),
+			transitionEnd: this.#handleTransitionEnd.bind(this),
+		};
+	}
+
+	connectedCallback() {
+		const _ = this;
+
+		// If we have item data, render it first
+		if (_.#itemData) _.#render();
+
+		// Find child elements and attach listeners
+		_.#queryDOM();
+		_.#updateLinePriceElements();
+		_.#attachListeners();
+
+		// If we started with 'appearing' state, handle the entry animation
+		if (_.#currentState === 'appearing') {
+			_.setAttribute('state', 'appearing');
+			_.#isAppearing = true;
+
+			requestAnimationFrame(() => {
+				_.style.height = `${_.scrollHeight}px`;
+				requestAnimationFrame(() => _.setState('ready'));
+			});
+		}
+	}
+
+	disconnectedCallback() {
+		// Cleanup event listeners
+		this.#detachListeners();
+	}
+
+	/**
+	 * Query and cache DOM elements
+	 */
+	#queryDOM() {
+		this.content = this.querySelector('cart-item-content');
+		this.processing = this.querySelector('cart-item-processing');
+	}
+
+	/**
+	 * Attach event listeners
+	 */
+	#attachListeners() {
+		const _ = this;
+		_.addEventListener('click', _.#handlers.click);
+		_.addEventListener('change', _.#handlers.change);
+		_.addEventListener('quantity-input:change', _.#handlers.change);
+		_.addEventListener('transitionend', _.#handlers.transitionEnd);
+	}
+
+	/**
+	 * Detach event listeners
+	 */
+	#detachListeners() {
+		const _ = this;
+		_.removeEventListener('click', _.#handlers.click);
+		_.removeEventListener('change', _.#handlers.change);
+		_.removeEventListener('quantity-input:change', _.#handlers.change);
+		_.removeEventListener('transitionend', _.#handlers.transitionEnd);
+	}
+
+	/**
+	 * Get the current state
+	 */
+	get state() {
+		return this.#currentState;
+	}
+
+	/**
+	 * Get the cart key for this item
+	 */
+	get cartKey() {
+		return this.getAttribute('key');
+	}
+
+	/**
+	 * Handle click events (for Remove buttons, etc.)
+	 */
+	#handleClick(e) {
+		// Check if clicked element is a remove button
+		const removeButton = e.target.closest('[data-action-remove-item]');
+		if (removeButton) {
+			e.preventDefault();
+			this.#emitRemoveEvent();
+		}
+	}
+
+	/**
+	 * Handle change events (for quantity inputs and quantity-input component)
+	 */
+	#handleChange(e) {
+		// Check if event is from quantity-input component
+		if (e.type === 'quantity-input:change') {
+			this.#emitQuantityChangeEvent(e.detail.value);
+			return;
+		}
+
+		// Check if changed element is a quantity input
+		const quantityInput = e.target.closest('[data-cart-quantity]');
+		if (quantityInput) {
+			this.#emitQuantityChangeEvent(quantityInput.value);
+		}
+	}
+
+	/**
+	 * Handle transition end events for destroy animation and appearing animation
+	 */
+	#handleTransitionEnd(e) {
+		if (e.propertyName === 'height' && this.#isDestroying) {
+			// Remove from DOM after height animation completes
+			this.remove();
+		} else if (e.propertyName === 'height' && this.#isAppearing) {
+			// Remove explicit height after appearing animation completes
+			this.style.height = '';
+			this.#isAppearing = false;
+		}
+	}
+
+	/**
+	 * Emit remove event
+	 */
+	#emitRemoveEvent() {
+		this.dispatchEvent(
+			new CustomEvent('cart-item:remove', {
+				bubbles: true,
+				detail: {
+					cartKey: this.cartKey,
+					element: this,
+				},
+			})
+		);
+	}
+
+	/**
+	 * Emit quantity change event
+	 */
+	#emitQuantityChangeEvent(quantity) {
+		this.dispatchEvent(
+			new CustomEvent('cart-item:quantity-change', {
+				bubbles: true,
+				detail: {
+					cartKey: this.cartKey,
+					quantity: parseInt(quantity),
+					element: this,
+				},
+			})
+		);
+	}
+
+	/**
+	 * Render cart item from data using the appropriate template
+	 */
+	#render() {
+		const _ = this;
+		if (!_.#itemData || CartItem.#templates.size === 0) return;
+
+		// Set the key attribute from item data
+		const key = _.#itemData.key || _.#itemData.id;
+		if (key) _.setAttribute('key', key);
+
+		// Generate HTML from template and store for future comparisons
+		const templateHTML = _.#generateTemplateHTML();
+		_.#lastRenderedHTML = templateHTML;
+
+		// Generate processing HTML from template or use default
+		const processingHTML = CartItem.#processingTemplate
+			? CartItem.#processingTemplate()
+			: '<div class="cart-item-loader"></div>';
+
+		// Create the cart-item structure with template content inside cart-item-content
+		_.innerHTML = `
+			<cart-item-content>
+				${templateHTML}
+			</cart-item-content>
+			<cart-item-processing>
+				${processingHTML}
+			</cart-item-processing>
+		`;
+	}
+
+	/**
+	 * Update the cart item with new data
+	 * @param {Object} itemData - Shopify cart item data
+	 * @param {Object} cartData - Full Shopify cart object
+	 */
+	setData(itemData, cartData = null) {
+		const _ = this;
+
+		// Update internal data
+		_.#itemData = itemData;
+		if (cartData) _.#cartData = cartData;
+
+		// Generate new HTML with updated data
+		const newHTML = _.#generateTemplateHTML();
+
+		// Compare with previously rendered HTML
+		if (newHTML === _.#lastRenderedHTML) {
+			// HTML hasn't changed, just reset processing state
+			_.setState('ready');
+			_.#updateQuantityInput();
+			return;
+		}
+
+		// HTML is different, proceed with full update
+		_.setState('ready');
+		_.#render();
+		_.#queryDOM();
+		_.#updateLinePriceElements();
+	}
+
+	/**
+	 * Generate HTML from the current template with current data
+	 * @returns {string} Generated HTML string or empty string if no template
+	 * @private
+	 */
+	#generateTemplateHTML() {
+		// If no templates are available, return empty string
+		if (!this.#itemData || CartItem.#templates.size === 0) {
+			return '';
+		}
+
+		// Determine which template to use
+		const templateName = this.#itemData.properties?._cart_template || 'default';
+		const templateFn = CartItem.#templates.get(templateName) || CartItem.#templates.get('default');
+
+		if (!templateFn) {
+			return '';
+		}
+
+		// Generate and return HTML from template
+		return templateFn(this.#itemData, this.#cartData);
+	}
+
+	/**
+	 * Update quantity input component to match server data
+	 * @private
+	 */
+	#updateQuantityInput() {
+		if (!this.#itemData) return;
+
+		const quantityInput = this.querySelector('quantity-input');
+		if (quantityInput) {
+			quantityInput.value = this.#itemData.quantity;
+		}
+	}
+
+	/**
+	 * Update elements with data-content-line-price attribute
+	 * @private
+	 */
+	#updateLinePriceElements() {
+		if (!this.#itemData) return;
+
+		const linePriceElements = this.querySelectorAll('[data-content-line-price]');
+		const formattedLinePrice = this.#formatCurrency(this.#itemData.line_price || 0);
+
+		linePriceElements.forEach((element) => {
+			element.textContent = formattedLinePrice;
+		});
+	}
+
+	/**
+	 * Format currency value from cents to dollar string
+	 * @param {number} cents - Price in cents
+	 * @returns {string} Formatted currency string (e.g., "$29.99")
+	 * @private
+	 */
+	#formatCurrency(cents) {
+		if (typeof cents !== 'number') return '$0.00';
+		return `$${(cents / 100).toFixed(2)}`;
+	}
+
+	/**
+	 * Get the current item data
+	 */
+	get itemData() {
+		return this.#itemData;
+	}
+
+	/**
+	 * Set the state of the cart item
+	 * @param {string} state - 'ready', 'processing', 'destroying', or 'appearing'
+	 */
+	setState(state) {
+		if (['ready', 'processing', 'destroying', 'appearing'].includes(state)) {
+			this.setAttribute('state', state);
+		}
+	}
+
+	/**
+	 * Gracefully animate this cart item closed, then remove it
+	 */
+	destroyYourself() {
+		const _ = this;
+
+		// bail if already in the middle of a destroy cycle
+		if (_.#isDestroying) return;
+		_.#isDestroying = true;
+
+		// snapshot the current rendered height before applying any "destroying" styles
+		const initialHeight = _.offsetHeight;
+		_.setState('destroying');
+
+		// lock the measured height on the next animation frame to ensure layout is fully flushed
+		requestAnimationFrame(() => {
+			_.style.height = `${initialHeight}px`;
+
+			// read the css custom property for timing, defaulting to 400ms
+			const destroyDuration =
+				getComputedStyle(_).getPropertyValue('--cart-item-destroying-duration')?.trim() || '400ms';
+
+			// animate only the height to zero; other properties stay under stylesheet control
+			_.style.transition = `height ${destroyDuration} ease`;
+			_.style.height = '0px';
+
+			setTimeout(() => _.remove(), 600);
+		});
+	}
+}
+
+/**
+ * Supporting component classes for cart item
+ */
+class CartItemContent extends HTMLElement {
+	constructor() {
+		super();
+	}
+}
+
+class CartItemProcessing extends HTMLElement {
+	constructor() {
+		super();
+	}
+}
+
+// =============================================================================
+// Register Custom Elements
+// =============================================================================
+
+if (!customElements.get('cart-item')) {
+	customElements.define('cart-item', CartItem);
+}
+if (!customElements.get('cart-item-content')) {
+	customElements.define('cart-item-content', CartItemContent);
+}
+if (!customElements.get('cart-item-processing')) {
+	customElements.define('cart-item-processing', CartItemProcessing);
+}
+
+export { CartItem, CartItemContent, CartItemProcessing };
+export default CartItem;
+
+// Make CartItem available globally for Shopify themes
+if (typeof window !== 'undefined') {
+	window.CartItem = CartItem;
+}

package/src/cart-panel.css

@@ -0,0 +1,231 @@
+/* =============================================================================
+   Cart Panel Component
+   ============================================================================= */
+
+cart-panel {
+	display: block;
+	height: 100%;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+/* =============================================================================
+   Cart Item Component
+   ============================================================================= */
+
+cart-item {
+	/* CSS Custom Properties for customization */
+	--cart-item-processing-duration: 250ms;
+	--cart-item-destroying-duration: 600ms;
+	--cart-item-appearing-duration: 400ms;
+	--cart-item-shadow-color: rgba(0, 0, 0, 0.15);
+	--cart-item-shadow-color-strong: rgba(0, 0, 0, 0.5);
+	--cart-item-destroying-bg: rgba(0, 0, 0, 0.1);
+	--cart-item-processing-scale: 0.98;
+	--cart-item-destroying-scale: 0.85;
+	--cart-item-appearing-scale: 0.9;
+	--cart-item-processing-blur: 1px;
+	--cart-item-destroying-blur: 10px;
+	--cart-item-appearing-blur: 2px;
+	--cart-item-destroying-opacity: 0.2;
+	--cart-item-appearing-opacity: 0.5;
+	--cart-item-destroying-brightness: 0.6;
+	--cart-item-destroying-saturate: 0.3;
+
+	display: block;
+	position: relative;
+	overflow: hidden;
+	padding: 0px;
+	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0);
+	transition:
+		filter var(--cart-item-processing-duration) ease-out,
+		background-color var(--cart-item-processing-duration) ease-out,
+		box-shadow var(--cart-item-processing-duration) ease-out;
+}
+
+cart-item::after {
+	content: '';
+	display: block;
+	position: absolute;
+	background: rgba(0, 0, 0, 0);
+	width: 100%;
+	pointer-events: none;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	transition: background-color var(--cart-item-processing-duration) ease;
+}
+
+/* Ready state (default) */
+cart-item[state='ready'] {
+	transition:
+		filter var(--cart-item-processing-duration) ease-out,
+		background-color var(--cart-item-processing-duration) ease-out,
+		box-shadow var(--cart-item-processing-duration) ease-out,
+		height var(--cart-item-appearing-duration) ease-out;
+}
+
+cart-item[state='ready'] cart-item-content {
+	transform: scale(1);
+	filter: blur(0px);
+	opacity: 1;
+	transition:
+		transform var(--cart-item-appearing-duration) ease-out,
+		filter var(--cart-item-appearing-duration) ease-out,
+		opacity var(--cart-item-appearing-duration) ease-out;
+}
+
+cart-item[state='ready'] cart-item-processing {
+	opacity: 0;
+	visibility: hidden;
+}
+
+/* Processing state - content slightly scaled and blurred, processing overlay visible */
+cart-item[state='processing'] {
+	box-shadow: inset 0px 2px 10px var(--cart-item-shadow-color);
+}
+
+cart-item[state='processing']::after {
+	background: rgba(0, 0, 0, 0.15);
+}
+
+cart-item[state='processing'] cart-item-content {
+	transform: scale(var(--cart-item-processing-scale));
+	filter: blur(var(--cart-item-processing-blur));
+	opacity: 0.9;
+	pointer-events: none;
+	transition:
+		transform var(--cart-item-processing-duration) ease-out,
+		filter var(--cart-item-processing-duration) ease-out,
+		opacity var(--cart-item-processing-duration) ease-out;
+}
+
+cart-item[state='processing'] cart-item-processing {
+	opacity: 1;
+	visibility: visible;
+}
+
+/* Destroying state - heavy effects on content, darker background */
+cart-item[state='destroying'] {
+	background-color: var(--cart-item-destroying-bg);
+	box-shadow: inset 0px 2px 20px var(--cart-item-shadow-color-strong);
+	margin-top: 0px;
+	margin-bottom: 0px;
+	transition:
+		filter var(--cart-item-destroying-duration) ease,
+		background-color var(--cart-item-destroying-duration) ease,
+		box-shadow var(--cart-item-destroying-duration) ease,
+		margin var(--cart-item-destroying-duration) ease;
+}
+
+cart-item[state='destroying']::after {
+	background: rgba(0, 0, 0, 0.9);
+	transition: background-color var(--cart-item-destroying-duration) ease;
+}
+
+cart-item[state='destroying'] cart-item-content {
+	transition:
+		transform var(--cart-item-destroying-duration) ease,
+		filter var(--cart-item-destroying-duration) ease,
+		opacity var(--cart-item-destroying-duration) ease;
+	transform: scale(var(--cart-item-destroying-scale));
+	filter: blur(var(--cart-item-destroying-blur)) saturate(var(--cart-item-destroying-saturate));
+	opacity: var(--cart-item-destroying-opacity);
+	pointer-events: none;
+}
+
+cart-item[state='destroying'] cart-item-processing {
+	opacity: 0;
+	transition: opacity var(--cart-item-processing-duration) ease;
+}
+
+/* Appearing state - reverse of destroying for smooth entry animation */
+cart-item[state='appearing'] {
+	height: 0px;
+	overflow: hidden;
+	transition:
+		height var(--cart-item-appearing-duration) ease-out,
+		filter var(--cart-item-appearing-duration) ease-out,
+		opacity var(--cart-item-appearing-duration) ease-out;
+}
+
+cart-item[state='appearing'] cart-item-content {
+	transform: scale(var(--cart-item-appearing-scale));
+	filter: blur(var(--cart-item-appearing-blur));
+	opacity: var(--cart-item-appearing-opacity);
+	transition:
+		transform var(--cart-item-appearing-duration) ease-out,
+		filter var(--cart-item-appearing-duration) ease-out,
+		opacity var(--cart-item-appearing-duration) ease-out;
+}
+
+cart-item[state='appearing'] cart-item-processing {
+	opacity: 0;
+	visibility: hidden;
+}
+
+/* =============================================================================
+   Cart Item Child Components
+   ============================================================================= */
+
+cart-item-content {
+	display: block;
+}
+
+cart-item-processing {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: transparent;
+	opacity: 0;
+	visibility: hidden;
+	transition:
+		opacity var(--cart-item-processing-duration) ease-out,
+		visibility var(--cart-item-processing-duration) ease-out;
+	z-index: 10;
+}
+
+/* Default loader animation */
+cart-item-processing .cart-item-loader {
+	width: 60px;
+	aspect-ratio: 2;
+	--_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
+	background:
+		var(--_g) 0% 50%,
+		var(--_g) 50% 50%,
+		var(--_g) 100% 50%;
+	background-size: calc(100% / 3) 50%;
+	animation: cart-item-loader 1s infinite linear;
+}
+
+@keyframes cart-item-loader {
+	20% {
+		background-position:
+			0% 0%,
+			50% 50%,
+			100% 50%;
+	}
+	40% {
+		background-position:
+			0% 100%,
+			50% 0%,
+			100% 50%;
+	}
+	60% {
+		background-position:
+			0% 50%,
+			50% 100%,
+			100% 0%;
+	}
+	80% {
+		background-position:
+			0% 50%,
+			50% 50%,
+			100% 100%;
+	}
+}