panelset 0.5.0

package/src/docs/assets/scripts/example-async.js

@@ -0,0 +1,161 @@
+function renderRecipe(data) {
+	return `
+        <h2>${data.name}</h2>
+        <div class="recipe-meta">
+            <span>⏱️ ${data.prepTimeMinutes + data.cookTimeMinutes} mins</span>
+            <span>👥 ${data.servings} servings</span>
+            <span>🔥 ${data.caloriesPerServing} cal</span>
+            <span>⭐ ${data.rating} (${data.reviewCount} reviews)</span>
+        </div>
+        <div class="recipe">
+            <img class="recipe-image" src="${data.image}" alt="${data.name}">
+            <div class="recipe-ingredients">
+                <h3>Ingredients</h3>
+                <ul>
+                    ${data.ingredients.map(ing => `<li>${ing}</li>`).join('')}
+                </ul>
+            </div>
+        </div>
+        <div class="recipe-instructions">
+            <h3>Instructions</h3>
+            <ol>
+                ${data.instructions.map(step => `<li>${step}</li>`).join('')}
+            </ol>
+        </div>
+    `;
+}
+
+document.addEventListener('click', e => {
+	const button = e.target.closest('button[data-panel]');
+	if (!button) return;
+
+	const panelId = button.dataset.panel;
+	const container = document.getElementById(panelId)?.closest('[data-panelset]');
+
+	container?.panelSet?.show(panelId, true, { trigger: button });
+});
+
+function slowfetch(url, options = {}, delayMs = 1500) {
+	return new Promise((resolve, reject) => {
+		setTimeout(() => {
+			fetch(url, options)
+				.then(resolve)
+				.catch(reject);
+		}, delayMs);
+	});
+}
+
+function randomIntFromInterval(min, max) {
+	return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+const asyncDemo = document.getElementById('async-demo');
+const asyncPanelSet = asyncDemo.panelSet;
+
+// NORMAL EASY WAY
+
+asyncPanelSet.onBeforeActivate((targetPanel, signal) => {
+    if (targetPanel.id === 'async-panel-2') {
+        return slowfetch(`https://dummyjson.com/recipes/${randomIntFromInterval(1, 10)}`, { signal })
+            .then(response => response.json())
+            .then(data => {
+                targetPanel.innerHTML = renderRecipe(data);
+            });
+    }
+}, { once: false });
+
+
+
+
+
+// EVENT WAY:
+// THIS IS COMMENTED OUT, BUT LEFT HERE FOR REFERENCE
+
+// slowDemo.addEventListener('ps:beforeactivate', (e) => {
+// 	const { panelId, targetPanel, signal } = e.detail;
+
+// 	// Skip if already loaded
+// 	if (targetPanel.dataset.loaded === 'true') {
+// 		console.log(`Panel ${panelId} already loaded`);
+// 		return;
+// 	}
+
+// 	if (targetPanel.id === 'async-panel-2') {
+// 		// Just assign the fetch promise directly - no wrapping needed
+// 		e.detail.promise = slowfetch(`https://dummyjson.com/recipes/${randomIntFromInterval(1, 10)}`, { signal })
+// 		.then(response => response.json())
+// 		.then(data => {
+// 			targetPanel.innerHTML = renderRecipe(data);
+// 			targetPanel.dataset.loaded = 'true';
+// 		})
+// 		.catch(error => {
+// 			if (error.name === 'AbortError') {
+// 			console.log(`Load cancelled for ${panelId}`);
+// 			} else {
+// 			console.error(`Load failed for ${panelId}:`, error);
+// 			}
+// 			// Re-throw so PanelSet can handle it
+// 			throw error;
+// 		});
+// 	}
+// });
+
+
+
+// document.addEventListener('ps:beforeactivate', (e) => {
+//   const { instance, container, panelId, targetPanel, signal } = e.detail;
+
+//   if (panelId == 'async-panel-2') {
+
+// 	// Skip if already loaded
+// 	if (targetPanel.dataset.loaded === 'true') {
+// 		console.log(`Panel ${panelId} already loaded`);
+// 		return;
+// 	}
+// 	console.log(`Loading content for ${panelId}...`);
+// 	// Simulate slow API call
+// 	e.detail.promise = new Promise((resolve, reject) => {
+// 		const timeout = setTimeout(() => {
+// 		// Simulate loaded content
+// 		targetPanel.innerHTML = `
+// 			<h3>Loaded: ${panelId}</h3>
+// 			<p>This content was loaded asynchronously!</p>
+// 			<p>Loaded at: ${new Date().toLocaleTimeString()}</p>
+// 		`;
+// 		targetPanel.dataset.loaded = 'true';
+// 			resolve();
+// 		}, 2000);  // 2 second delay
+
+// 		// Handle abort (rapid clicks)
+// 		signal.addEventListener('abort', () => {
+// 			console.log(`Load cancelled for ${panelId}`);
+// 			clearTimeout(timeout);
+// 			reject(new Error('Aborted'));
+// 		});
+// 	});
+
+//   }
+
+// })
+
+// Log all events
+
+document.addEventListener('ps:ready', (e) => {
+	console.log('This panelset is ready:', e.detail.panelId);
+});
+
+document.addEventListener('ps:beforeactivate', (e) => {
+	console.log('Before doing any transitions:', e.detail.panelId);
+});
+
+document.addEventListener('ps:activationstart', (e) => {
+	console.log('Started a transition:', e.detail.panelId);
+});
+
+document.addEventListener('ps:activationcomplete', (e) => {
+	console.log('Completed a transition:', e.detail.panelId);
+});
+
+document.addEventListener('ps:activationaborted', (e) => {
+	console.log('Aborted the loading of a panel:', e.detail.panelId);
+});

package/src/docs/assets/scripts/example-closable.js

@@ -0,0 +1,27 @@
+document.addEventListener('click', e => {
+	const button = e.target.closest('button[data-panel]');
+	if (!button) return;
+	const panelId = button.dataset.panel;
+	const container = document.getElementById(panelId)?.closest('[data-panelset]');
+
+  const panelSet = container?.panelSet;
+  panelSet.show(panelId);
+});
+
+document.addEventListener('click', e => {
+  const actions = ['close', 'open', 'toggle'];
+  
+  for (const action of actions) {
+    const btn = e.target.closest(`[data-panelset-${action}]`);
+    if (btn) {
+      const selector = btn.getAttribute(`data-panelset-${action}`);
+      const container = document.querySelector(selector);
+      
+      if (container?.panelSet) {
+        const withTransition = !btn.hasAttribute('data-no-transition');
+        container.panelSet[action](withTransition);
+      }
+      return;
+    }
+  }
+});

package/src/docs/assets/scripts/example-megamenu.js

@@ -0,0 +1,84 @@
+
+// Delegated button handler
+// Delegated button handler with megamenu support
+document.addEventListener('click', e => {
+  const button = e.target.closest('button[data-panel]');
+  if (!button) return;
+  
+  const panelId = button.getAttribute('data-panel');
+  const panel = document.getElementById(panelId);
+  const container = panel?.closest('[data-panelset]');
+  
+  if (!container?.panelSet) return;
+  
+  const panelSet = container.panelSet;
+  const withTransition = !button.hasAttribute('data-no-transition');
+  
+  // Megamenu behavior for closable panelsets
+  if (container.hasAttribute('data-closable')) {
+    const isClosed = container.classList.contains('is-closed');
+    const isClosing = container.classList.contains('is-closing');
+    const isOpening = container.classList.contains('is-opening');
+    const pendingPanelId = panelSet.pendingPanel?.id;
+    
+    if (isClosed || isClosing) {
+      // Closed/closing → open to clicked panel
+      panelSet.show(panelId, withTransition, { trigger: button });
+      panelSet.open(withTransition);
+    } else if (pendingPanelId === panelId) {
+      // Same panel clicked
+      if (isOpening) {
+        // Opening → reverse to close
+        panelSet.close(withTransition);
+      } else if (!isClosing) {
+        // Fully open, not closing → close it
+        panelSet.close(withTransition);
+      }
+      // If closing → do nothing (let it finish)
+    } else {
+      // Different panel → switch
+      panelSet.show(panelId, withTransition, { trigger: button });
+    }
+  } else {
+    // Non-closable → just switch panels
+    panelSet.show(panelId, withTransition, { trigger: button });
+  }
+});
+
+document.addEventListener('click', e => {
+	// Close action
+	const closeBtn = e.target.closest('[data-panelset-close]');
+  alert('clicked close');
+	if (closeBtn) {
+		const selector = closeBtn.getAttribute('data-panelset-close');
+		const container = selector ? document.querySelector(selector) : closeBtn.closest('[data-panelset]');
+		if (container?.panelSet) {
+		const withTransition = !closeBtn.hasAttribute('data-no-transition');
+		container.panelSet.close(withTransition);
+		}
+		return;
+	}
+	
+	// Open action
+	const openBtn = e.target.closest('[data-panelset-open]');
+	if (openBtn) {
+		const selector = openBtn.getAttribute('data-panelset-open');
+		const container = selector ? document.querySelector(selector) : openBtn.closest('[data-panelset]');
+		if (container?.panelSet) {
+		const withTransition = !openBtn.hasAttribute('data-no-transition');
+		container.panelSet.open(withTransition);
+		}
+		return;
+	}
+	
+	// Toggle action
+	const toggleBtn = e.target.closest('[data-panelset-toggle]');
+	if (toggleBtn) {
+		const selector = toggleBtn.getAttribute('data-panelset-toggle');
+		const container = selector ? document.querySelector(selector) : toggleBtn.closest('[data-panelset]');
+		if (container?.panelSet) {
+		const withTransition = !toggleBtn.hasAttribute('data-no-transition');
+		container.panelSet.toggle(withTransition);
+		}
+	}
+});

package/src/docs/assets/scripts/example.js

@@ -0,0 +1,29 @@
+document.addEventListener('click', e => {
+	const button = e.target.closest('button[data-panel]');
+	if (!button) return;
+	const panelId = button.dataset.panel;
+	const container = document.getElementById(panelId)?.closest('[data-panelset]');
+	container?.panelSet?.show(panelId, true, { trigger: button });
+});
+
+// Log all events
+
+document.addEventListener('ps:ready', (e) => {
+	console.log('This panelset is ready:', e.detail.panelId);
+});
+
+document.addEventListener('ps:beforeactivate', (e) => {
+	console.log('Before doing any transitions:', e.detail.panelId);
+});
+
+document.addEventListener('ps:activationstart', (e) => {
+	console.log('Started a transition:', e.detail.panelId);
+});
+
+document.addEventListener('ps:activationcomplete', (e) => {
+	console.log('Completed a transition:', e.detail.panelId);
+});
+
+document.addEventListener('ps:activationaborted', (e) => {
+	console.log('Aborted the loading of a panel:', e.detail.panelId);
+});

package/src/docs/assets/scripts/main.js

@@ -0,0 +1,7 @@
+document.addEventListener('click', e => {
+	const button = e.target.closest('button[data-panel]');
+	if (!button) return;
+	const panelId = button.dataset.panel;
+	const container = document.getElementById(panelId)?.closest('[data-panelset]');
+	container?.panelSet?.show(panelId, true, { trigger: button });
+});

package/src/docs/assets/styles/_base.scss

@@ -0,0 +1,13 @@
+
+// Reset & Base
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--doc-gray-800);
+  background: #fff;
+}

package/src/docs/assets/styles/_code.scss

@@ -0,0 +1,121 @@
+
+code, .code {
+	background: var(--doc-gray-100);
+	padding: 0.2em 0.4em;
+	border-radius: 3px;
+	font-size: 1em;
+	display: inline-block;
+}
+
+p code, li code , dl code, dt.code {
+	background: var(--doc-code-transparent);
+	padding: 0em 0.3em;
+	font-size: 0.9em ;
+}
+
+pre {
+	background: var(--doc-gray-50);
+	border: 1px solid var(--doc-gray-200);
+	border-radius: 6px;
+	padding: 1rem;
+	overflow-x: auto;
+	margin-bottom: 1rem;
+	
+	code {
+		background: none;
+		padding: 0;
+	}
+}
+
+dl.horizontal {
+	display: grid;
+	grid-template-columns: max-content auto;
+	gap: 1rem;
+}
+
+.code-block {
+	position: relative;
+	
+	.code-header {
+		background: var(--doc-gray-100);
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
+		border: 1px solid var(--doc-gray-200);
+		border-bottom: none;
+		border-radius: 6px 6px 0 0;
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--doc-gray-600);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	
+	pre {
+		margin: 0;
+		border-radius: 0 0 6px 6px;
+	}
+
+	.lane:nth-child(even) & pre {
+		background: white;
+	}
+	.lane:nth-child(even) .example & pre {
+		background: var(--doc-gray-50);
+	}
+
+}
+
+// HIGHLIGHTING CODE
+
+.hljs-ln td.hljs-ln-numbers {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	text-align: right;
+	color: #ccc;
+	padding-right: 1.5rem;
+}
+.hljs-ln-code {
+	padding-left: 10px;
+}
+
+pre code.hljs {
+	padding: 0;
+	background: none;
+}
+
+.hljs-attribute, 
+.hljs-doctag, 
+.hljs-keyword, 
+.hljs-meta .hljs-keyword, 
+.hljs-name, 
+.hljs-selector-tag, 
+.hljs-section, 
+.hljs-title {
+	font-weight: 600;
+}
+
+button.copy {
+	background: var(--doc-gray-200);
+	border: none;
+	border-radius: 3px;
+	padding: 0.2rem 0.5rem;
+	font-size: 1rem;
+	font-weight: 400;
+	color: var(--doc-gray-600);
+	cursor: pointer;
+
+	transition: background 0.2s, color 0.2s;
+	outline-width: 2px;
+	
+	&:hover {
+		background: white;
+		color: var(--doc-primary-dark);
+	}
+	&.copied {
+		background: var(--doc-primary);
+		color: white;
+	}
+}

package/src/docs/assets/styles/_demos.scss

@@ -0,0 +1,180 @@
+// Demo block
+
+.example {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: var(--standard-padding);
+  border: 2px solid var(--doc-gray-200);
+  border-radius: 16px;
+  gap: 1rem;
+  background: white;
+
+  h2 {
+    margin: 0;
+    font-size: 1.5rem;
+
+  }
+
+  @media (max-width: 768px) {
+    padding: 1rem;
+  }
+
+  &.white {
+    background: white;
+  }
+  .code-block + * {
+    margin-top: 1rem;
+  }
+}
+
+.api {
+  gap: 0;
+  h3.code {
+    font-size: 1.2rem;
+    color: var(--doc-primary-dark);
+    margin-bottom: 0.5rem;
+  }
+  h4 {
+    font-size: 1.1rem;
+    margin-bottom: 0.25rem;
+    margin-top: 1rem;
+  }
+  dt {
+    font-weight: 600;
+    margin-top: 0.5rem;
+    font-size: 0.9em;
+  }
+}
+
+.card-row {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.card {
+  flex: 1;
+  min-width: 200px;
+  border: 1px solid var(--doc-gray-200);
+  border-radius: 8px;
+  padding: 1rem;
+  background: var(--doc-gray-50);
+
+  h4 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+  }
+}
+
+// Demo Styles
+.demo {
+  background: var(--doc-gray-50);
+  border-radius: 8px;
+  padding: var(--standard-padding);
+}
+
+.demo-controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  &.center {
+    justify-content: center;
+  }
+
+  button {
+    background: var(--doc-primary);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 24px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+      background: var(--doc-primary-dark);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &.secondary {
+      background: var(--doc-secondary);
+    }
+  }
+}
+
+// SLOW DATA
+
+.recipe {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+
+  & > * {
+    flex: 1;
+  }
+}
+
+.recipe-meta {
+  display: flex;
+  gap: 16px;
+  margin: 16px 0;
+  padding: 12px;
+  background: white;
+  border-radius: 8px;
+}
+
+img.testimage {
+  display: block;
+  margin-top: 1em;
+  width: 100%;
+}
+
+img.recipe-image {
+  width: 100%;
+  max-width: 256px;
+  border-radius: 8px;
+  object-fit: cover;
+  margin: 0 auto;
+}
+
+.recipe-meta span {
+  font-size: 14px;
+}
+
+.recipe {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
+  grid-column-gap: 2rem;
+  grid-row-gap: 0px;
+  margin-bottom: 2rem;
+}
+
+img.recipe-image {
+  grid-area: 1 / 1 / 2 / 2;
+}
+.recipe-ingredients {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+@media (max-width: 768px) {
+  .recipe {
+    display: flex;
+    flex-direction: column;
+
+    img {
+      width: 100%;
+      max-width: unset;
+      max-height: 256px;
+    }
+  }
+  .recipe-ingredients {
+    margin-top: 2rem;
+    width: 100%;
+  }
+}

package/src/docs/assets/styles/_landingpage.scss

@@ -0,0 +1,41 @@
+// Landing Page Styles
+
+html.intro {
+	.docs-content {
+		// background: linear-gradient(135deg, var(--doc-primary) 0%, var(--doc-primary-dark) 100%);
+
+		// min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		padding: var(--standard-padding);
+		text-align: center;
+
+		.container {
+			width: 100%;
+			margin: auto auto;
+			gap: var(--standard-padding);
+		}
+		.example {
+			text-align: left;
+			border: none;
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+		}
+
+		p.lead {
+			font-size: 1.25rem;
+			opacity: 0.9;
+		}
+
+	}
+}
+
+.badge {
+	display: inline-block;
+	background: var(--doc-gray-200);
+	padding: 0.25rem 0.75rem;
+	border-radius: 999px;
+	font-size: 1rem;
+	font-weight: 400;
+	margin-bottom: 1rem;
+	line-height: 1.5em;
+}