panelset 0.5.0 → 0.5.2

package/src/docs/views/examples/closable.pug

@@ -1,97 +0,0 @@
-extends /docs/views/templates/layouts/_base
-
-append variables
-	- pagetitle = "Closable panels"
-
-block content
-	.lane
-		.container
-			.page-header
-				h1 Closable panels
-
-	.lane
-		.container
-			.title-text
-				p If you want to be able to close the PanelSet, the main container needs a <code>data-closable</code> attribute. Furthermore, you need to add controls that will trigger the open/close/toggle actions. Below is an example of a script that uses some arbitrary data-attributes to handle these actions. In the end, all they do is call the respective methods on the instance. You may choose your own attributes and code for it. These can then be combined in the markup of your page to create buttons that control the PanelSet.
-
-
-			.example
-				.demo
-					.demo-controls
-						button(data-panel="demo-closable-panel-1") Panel 1
-						button(data-panel="demo-closable-panel-2") Panel 2
-						button(data-panel="demo-closable-panel-3") Panel3
-						button.secondary(data-panelset-close="#demo-closable") Close
-						button.secondary(data-panelset-open="#demo-closable") Open
-						button.secondary(data-panelset-toggle="#demo-closable") Toggle
-
-					+examplepanelset('demo-closable')(data-closable)
-
-				h2 Markup
-				+codeblock('HTML')
-					.demo-controls
-						button(data-panel="demo-closable-panel-1") Panel 1
-						button(data-panel="demo-closable-panel-2") Panel 2
-						button(data-panel="demo-closable-panel-3") Panel3
-						button.secondary(data-panelset-close="#demo-closable") Close
-						button.secondary(data-panelset-open="#demo-closable") Open
-						button.secondary(data-panelset-toggle="#demo-closable") Toggle
-
-					#demo-closable(data-panelset data-closable)
-						// Panels here
-
-				.title-text
-					h2 JavaScript
-					p The panel switching JavaScript is the same as in the other examples: 
-
-				+codeblock('JS').
-					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 });
-					});
-		
-				p The buttons to open, close or toggle the panelset could be handled like this:
-				+codeblock('JS').
-					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;
-					    }
-					  }
-					});
-
-
-
-
-
-
-
-
-append scripts
-	if isProd
-		script(type="module", vite-ignore).
-			import { PanelSet } from '/lib/panelset.js';
-			PanelSet.init();
-	else
-		script(type="module").
-			import { PanelSet } from '/src/lib/index.js';
-			import '/src/lib/styles/panelset.scss';
-			PanelSet.init({debug: true});
-
-	if isProd
-		script(src="/assets/scripts/example-closable.js" type="module" vite-ignore)
-	else
-		script(type="module" src="/src/docs/assets/scripts/example-closable.js")

package/src/docs/views/getting-started.pug

@@ -1,99 +0,0 @@
-extends /docs/views/templates/layouts/_base
-
-append variables
-	- pagetitle = "Getting started"
-
-block content
-	.lane
-		.container
-			.page-header
-				h1 Getting Started with PanelSet
-				p.lead Lightweight panel management with smooth transitions
-
-	.lane
-		.container
-			h2 Installation
-			.code-block
-				.code-header Terminal
-				pre
-					code npm install panelset
-	.lane
-		.container
-			.title-text
-				h2 Quick Start
-				p Import the npm package and create your first panelset:
-			
-				
-			+codeblock('JS').
-				import { PanelSet } from 'panelset';
-				import 'panelset/dist/panelset.css';
-	.lane
-		.container
-			.title-text
-				h2 Initializing PanelSet
-				p You can initialize PanelSet via the static init() method. This will scan the document for all panelset containers (with a <code>data-panelset</code> attribute) and initialize all of them. You can also pass a selector to target only a single panelset container. In both cases, you can also pass an options object:
-			
-			+codeblock('JS').
-				// Default selector, no options
-				PanelSet.init();
-
-				// With options only
-				PanelSet.init({debug: true});
-
-				// Custom selector, no options
-				PanelSet.init('#demo-panelset');
-
-				// Both selector and options
-				PanelSet.init('#demo-panelset', {debug: true});
-
-				// Or you can create a named instance directly:
-				const demoPanelSet = new PanelSet('#demo-panelset', {debug: true});
-
-
-	.lane
-		.container
-			.title-text
-				h2 Markup
-				p The main container of your panelset needs a <code>data-panelset</code> attribute. Each panel should have a unique ID and the <code>role="tabpanel"</code> attribute. The active panel should also have the <code>.active</code> class, while inactive panels should have the <code>hidden</code> attribute. You also need to wrap your panels in a <code>.panel-wrapper</code> element for better styling and layout control, but this is auto-generated if missing.
-
-			.example
-
-				.demo
-
-					.demo-controls
-						button(data-panel="demo-panel-1") Panel 1
-						button(data-panel="demo-panel-2") Panel 2
-						button(data-panel="demo-panel-3") Panel3
-					+examplepanelset('demo')(data-closable)
-				+codeblock('HTML')
-					+examplepanelset('demo')(data-closable)
-
-
-				p To actually control the panelset, you use the #[code show()] method. In this example, we add click event listeners to buttons that activate the corresponding panels when clicked. PanelSet does not tell you how to handle user interactions, so you can implement your own controls as needed, as long as they use the #[code show()] API.
-
-				+codeblock('JS').
-					document.addEventListener('click', event => {
-					  const button = event.target.closest('button[data-panel]');
-					  if (!button) return;
-					  const panelId = button.dataset.panel;
-					  const container = document.querySelector('[data-panelset]');
-					  container?.panelSet?.show(panelId, true, { trigger: button });
-					});
-				//-
-
-
-append scripts
-	if isProd
-		script(type="module", vite-ignore).
-			import { PanelSet } from '/lib/panelset.js';
-			PanelSet.init({debug: true});
-	else
-		script(type="module").
-			import { PanelSet } from '/src/lib/index.js';
-			import '/src/lib/styles/panelset.scss';
-			PanelSet.init();
-
-	if isProd
-		script(src="/assets/scripts/example.js" type="module" vite-ignore)
-	else
-		script(type="module" src="/src/docs/assets/scripts/example.js")

package/src/docs/views/index.pug

@@ -1,38 +0,0 @@
-extends /docs/views/templates/layouts/_base
-
-append variables
-	- pagetitle = "Intro"
-	- page.class = 'intro'
-
-block content
-	.container
-
-		h1 PanelSet
-		p.lead Flexible panel management with smooth transitions. ~2.4 KB gzipped.
-
-		.example
-			.demo-controls.center
-				button(data-panel="demo-panel-1") Short panel
-				button(data-panel="demo-panel-2") Medium panel
-				button(data-panel="demo-panel-3") Tall panel
-			+examplepanelset('demo')(data-closable)
-
-
-		footer
-			p #[a(href="https://github.com/martinomagnifico") Martinomagnifico] • Open source • MIT License • TypeScript Ready
-
-append scripts
-	if isProd
-		script(type="module", vite-ignore).
-			import { PanelSet } from '/lib/panelset.js';
-			PanelSet.init();
-	else
-		script(type="module").
-			import { PanelSet } from '/src/lib/index.js';
-			import '/src/lib/styles/panelset.scss';
-			PanelSet.init({debug: true });
-
-	if isProd
-		script(type="module" src="/assets/scripts/example.js" vite-ignore)
-	else
-		script(type="module" src="/src/docs/assets/scripts/example.js")

package/src/docs/views/templates/includes/_head.pug

@@ -1,11 +0,0 @@
-head
-	block head
-		meta(charset="utf-8")
-		meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")
-		meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
-		link(rel="icon", href="data:,")
-		block styles
-			link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css")
-			link(rel="stylesheet" href="/src/docs/assets/styles/docs.scss")
-			if isProd
-				link(rel="stylesheet", href="/lib/panelset.css")

package/src/docs/views/templates/includes/_mixins.pug

@@ -1,100 +0,0 @@
-mixin html
-	doctype html
-	html(class=page.class, lang=page.language)
-		if block
-			block
-
-
-mixin badge(pluginname, extraclass)
-	a.github-corner(class=extraclass, href=plugin.homepage target="blank" title='View source on GitHub')
-		svg(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 55')
-			path(fill='currentColor' d='M27.5 11.2a16.3 16.3 0 0 0-5.1 31.7c.8.2 1.1-.3 1.1-.7v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.2-1 .6-1.8 1-2.2-3.5-.4-7.3-1.8-7.3-8 0-1.8.6-3.3 1.6-4.4-.1-.5-.7-2.1.2-4.4 0 0 1.4-.4 4.5 1.7a15.6 15.6 0 0 1 8.1 0c3.1-2 4.5-1.7 4.5-1.7.9 2.3.3 4 .2 4.4 1 1 1.6 2.6 1.6 4.3 0 6.3-3.8 7.7-7.4 8 .6.6 1.1 1.6 1.1 3v4.6c0 .4.3.9 1.1.7a16.3 16.3 0 0 0-5.2-31.7')
-
-
-mixin examplepanelset(id)
-	div(id=id data-panelset)&attributes(attributes)
-		.panel-wrapper
-			.active(role="tabpanel", id=`${id}-panel-1`)
-				h3 Key Features
-				ul
-					li This is out most important feature ever!
-
-			div(role="tabpanel", id=`${id}-panel-2`, hidden)
-				h3 Pricing Plans
-				ul
-					li Starter Plan: Whenever you do not want to pay a lot.
-					li Professional Plan: Ideal for managers who like to spend money!
-
-			div(role="tabpanel", id=`${id}-panel-3`, hidden)
-				h3 Support Options
-				ul
-					li If you send us an email, we will probably ignore it.
-					li We don’t even have a community forum.
-					li Opening an issue on GitHub is your next best option. Or even better: PR’s! You do the work!
-
-
-
-mixin revealsrc(kind, thesource)
-	- let isProd = process.env.NODE_ENV === 'production';
-	if isProd
-		if kind === 'script'
-			script(src=`${thesource}`)
-		else
-			link(rel="stylesheet", href=`${thesource}`)
-	else
-		if kind === 'script'
-			script(src=`/node_modules/reveal.js/${thesource}`)
-		else
-			link(rel="stylesheet", href=`/node_modules/reveal.js/${thesource}`)
-
--
-	const reindentCode = (code) => {
-		const lines = code.split('\n');
-		let minIndent = Infinity;
-		
-		for (const line of lines) {
-			if (line.trim().length > 0) {
-				const match = line.match(/^(\s*)/);
-				if (match && match[1].length < minIndent) {
-					minIndent = match[1].length;
-				}
-			}
-		}
-		
-		if (minIndent === Infinity) {
-			minIndent = 0;
-		}
-
-		const deindentedLines = lines.map(line => line.substring(minIndent));
-		return deindentedLines.join('\n').trim();
-	};
-
-
-mixin escape()
-	- var oldBuf = pug_html;
-	- pug_html = '';
-	block
-	- pug_html = oldBuf + pug.escape(pug_html);
-
-
-mixin reindent_block_html()
-	- var oldBuf = pug_html;
-	- pug_html = '';
-	block
-	- var rawPugSource = pug_html;
-	- pug_html = oldBuf;
-	- var deindentedCode = reindentCode(rawPugSource)
-	- pug_html += deindentedCode
-
-
-mixin codeblock(type)
-	.code-block
-		.code-header
-			| #{type}
-			button.copy Copy
-		pre
-			code(class=`language-${type}`)
-				if block
-					+escape()
-						+reindent_block_html()
-							block

package/src/docs/views/templates/includes/_scripts.pug

@@ -1,14 +0,0 @@
-block scripts
-	script(src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js")
-	script(src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.6.0/highlightjs-line-numbers.min.js")
-
-	if isProd
-		script(src="/assets/scripts/copybutton.js" type="module" vite-ignore)
-
-	else
-		script(type="module" src="/src/docs/assets/scripts/copybutton.js")
-
-
-	script.
-		hljs.highlightAll();
-		hljs.initLineNumbersOnLoad();

package/src/docs/views/templates/includes/_sidebar.pug

@@ -1,18 +0,0 @@
-aside.docs-sidebar
-	.logo PanelSet
-
-	nav
-		ul
-			each link in sidebar.mainLinks
-				- let active = (link.text === pagetitle);
-				li
-					a(class=(active ? "active" : "") href=link.href) #{link.text}
-
-		each section in sidebar.sections
-			.nav-section
-				h4=section.title
-				ul
-					each link in section.links
-						- let active = (link.text === pagetitle);
-						li
-							a(class=(active ? "active" : "") href=link.href) #{link.text}

package/src/docs/views/templates/layouts/_base.pug

@@ -1,36 +0,0 @@
-include ../includes/_mixins
-
-block variables
-	- let page = {title: "Title", language: "en", author: "Author"}
-	-
-		const sidebar = {
-			"mainLinks": [
-				{ text: "Intro", href: "/index.html" },
-				{ text: "Getting started", href: "/getting-started.html", active: true },
-				{ text: "Configuration", href: "/configuration.html" },
-				{ text: "Transitions", href: "/transitions.html" },
-				{ text: "Events", href: "/events.html" },
-				{ text: "API reference", href: "/api-reference.html" }
-			],
-			"sections": [
-				{
-				title: "Examples",
-				links: [
-					{ text: "Basic tabs", href: "/examples/basic.html" },
-					{ text: "Async panels", href: "/examples/async.html" },
-					{ text: "Closable panels", href: "/examples/closable.html" }
-				]
-				}
-			]
-		};
-
-
-
-+html
-	include ../includes/_head
-	body
-		.docs-layout
-			include /docs/views/templates/includes/_sidebar.pug
-			main.docs-content
-				block content
-		include ../includes/_scripts

package/src/docs/views/transitions.pug

@@ -1,141 +0,0 @@
-extends /docs/views/templates/layouts/_base
-
-append variables
-	- pagetitle = "Transitions"
-
-block content
-
-	.lane
-		.container
-			.page-header
-				h1 Transitions
-				p.lead There is not much to style. Only transitions.
-
-	.lane
-		.container
-			.title-text
-				h2 Built-in transitions
-				p PanelSet only uses CSS transitions. You can customize the transition speeds, delays and timing functions using CSS variables on the <code>[data-panelset]</code> element. The values below are default, but you can easily override them if you include your own CSS.
-			.example
-				.demo
-					.demo-controls
-						button(data-panel="demo-panel-1") Short Panel
-						button(data-panel="demo-panel-2") Medium Panel
-						button(data-panel="demo-panel-3") Tall Panel
-
-					+examplepanelset('demo')
-
-				+codeblock('CSS').
-					[data-panelset] {
-					  --fadeout-speed: 0.33s;
-					  --fadein-speed: 0.33s;
-					  --fadein-delay: 0.33s;
-					  --height-duration-ratio: 1;
-					  --transition-timing: ease-in-out;
-					  --loading-panel-opacity: 0.1;
-					  --close-speed: 0.33s;
-					  --open-speed: 0.33s;
-					  --open-timing: ease-in-out;
-					  --close-timing: ease-in-out;
-					}
-
-
-
-				dl.horizontal
-					dt #[code --fadeout-speed]
-					dd Duration of the fade-out transition when closing a panel. Default is <code>0.33s</code>.
-					dt #[code --fadein-speed]
-					dd Duration of the fade-in transition when opening a panel. Default is <code>0.33s</code>.
-					dt #[code --fadein-delay]
-					dd Delay before starting the fade-in transition when opening a panel. Default is <code>0.33s</code>.
-					dt #[code --height-duration-ratio]
-					dd Ratio between height transition duration and fade-in speed. A value of 1 means the height transition will have the same duration as the fade-in speed. Default is <code>1</code>.
-					dt #[code --transition-timing]
-					dd Timing function for both fade-in and fade-out transitions. Default is <code>ease-in-out</code>.
-					dt #[code --loading-panel-opacity]
-					dd Opacity of the panel that is being closed while the new panel is loading. Default is <code>0.1</code>.
-					dt #[code --close-speed]
-					dd Duration of the height transition when closing a panel. Default is <code>0.33s</code>.
-					dt #[code --open-speed]
-					dd Duration of the height transition when opening a panel. Default is <code>0.33s</code>.
-					dt #[code --open-timing]
-					dd Timing function for the height transition when opening a panel. Default is <code>ease-in-out</code>.
-					dt #[code --close-timing]
-					dd Timing function for the height transition when closing a panel. Default is <code>ease-in-out</code>.
-
-
-
-	.lane
-		.container
-			.title-text
-				h2 Slower transitions
-				p The example below slows things down to better show the transitions. Fade-out and fade-in are both set to 1 second, and they actually start at the same time, but because fade-in has a delay of 1 second, it fades in after the original panel fades out. The total transition time is thus 2 seconds.
-			.example
-				.demo
-					.demo-controls
-						button(data-panel="slowdemo-panel-1") Short Panel
-						button(data-panel="slowdemo-panel-2") Medium Panel
-						button(data-panel="slowdemo-panel-3") Tall Panel
-
-					+examplepanelset('slowdemo')
-
-
-				+codeblock('CSS').
-					#slowdemo {
-					  --fadeout-speed: 1s;
-					  --fadein-speed: 1s;
-					  --fadein-delay: 1s;
-					}
-
-	.lane
-		.container
-			.title-text
-				h2 Slower transitions, crossfading
-				p This example has crossfading panels, because of the delay of the incoming panel that is set to 0s. It could also be set to a value in between.
-
-			.example
-				.demo
-					.demo-controls
-						button(data-panel="crossfade-panel-1") Short Panel
-						button(data-panel="crossfade-panel-2") Medium Panel
-						button(data-panel="crossfade-panel-3") Tall Panel
-					+examplepanelset('crossfade')
-				+codeblock('CSS').
-					#crossfade {
-					  --fadeout-speed: 1s;
-					  --fadein-speed: 1s;
-					  --fadein-delay: 1s;
-					}
-
-
-
-append scripts
-	if isProd
-		script(type="module", vite-ignore).
-			import { PanelSet } from '/lib/panelset.js';
-			PanelSet.init();
-	else
-		script(type="module").
-			import { PanelSet } from '/src/lib/index.js';
-			import '/src/lib/styles/panelset.scss';
-			PanelSet.init({debug: true});
-			
-
-	if isProd
-		script(src="/assets/scripts/example.js" type="module" vite-ignore)
-	else
-		script(type="module" src="/src/docs/assets/scripts/example.js")
-
-
-append styles
-	style.
-		#slowdemo {
-			--fadeout-speed: 1s;
-			--fadein-speed: 1s;
-			--fadein-delay: 1s;
-		}
-		#crossfade {
-			--fadeout-speed: 1s;
-			--fadein-speed: 1s;
-			--fadein-delay: 0s;
-		}