@magic-spells/collapsible-content 0.1.3 → 0.2.0

package/src/collapsible-content.js

@@ -1,108 +1,181 @@
-import './styles.css';
+import './index.scss';
 
+/**
+ * Custom element that creates a collapsible/expandable component with proper accessibility
+ */
 class CollapsibleComponent extends HTMLElement {
 	#handleClick;
 
+	/**
+	 * Initializes the component and sets up references to child elements
+	 */
 	constructor() {
 		super();
-		this.#handleClick = (e) => {
+		const _ = this;
+
+		// store references to elements once to avoid re-querying
+		_.button = null;
+		_.content = null;
+
+		// define click handler with proper this binding
+		_.#handleClick = (e) => {
 			e.preventDefault();
-			const button = this.querySelector('button');
-			const content = this.querySelector('collapsible-content');
-			const expanded =
-				button.getAttribute('aria-expanded') !== 'true';
-			button.setAttribute('aria-expanded', expanded);
-			content.hidden = !expanded;
+			// toggle expanded value
+			const expanded = _.button.getAttribute('aria-expanded') !== 'true';
+			_.button.setAttribute('aria-expanded', expanded);
+			_.content.hidden = !expanded;
 		};
 	}
 
+	/**
+	 * Called when element is added to the DOM
+	 * Sets up accessibility attributes and event listeners
+	 */
 	connectedCallback() {
-		const button = this.querySelector('button');
-		const content = this.querySelector('collapsible-content');
+		const _ = this;
+
+		// initialize element references once
+		_.button = _.querySelector('button');
+		_.content = _.querySelector('collapsible-content');
 
-		if (!button || !content) {
-			console.error(
-				'CollapsibleComponent requires a <button> and a <collapsible-content>.'
-			);
+		if (!_.button || !_.content) {
+			console.error('CollapsibleComponent requires a <button> and a <collapsible-content>.');
 			return;
 		}
 
-		button.id ||= `collapsible-button-${Math.random().toString(36).slice(2, 9)}`;
-		content.id ||= `collapsible-content-${Math.random().toString(36).slice(2, 9)}`;
+		// generate ids if not provided
+		_.button.id ||= `collapsible-button-${crypto.randomUUID().slice(0, 8)}`;
+		_.content.id ||= `collapsible-content-${crypto.randomUUID().slice(0, 8)}`;
 
-		button.setAttribute('aria-controls', content.id);
-		content.setAttribute('role', 'region');
-		content.setAttribute('aria-labelledby', button.id);
+		// set accessibility attributes
+		_.button.setAttribute('aria-controls', _.content.id);
+		_.content.setAttribute('role', 'region');
+		_.content.setAttribute('aria-labelledby', _.button.id);
 
-		const expanded = button.getAttribute('aria-expanded') === 'true';
-		content.hidden = !expanded;
+		// set initial state based on aria-expanded attribute
+		const expanded = _.button.getAttribute('aria-expanded') === 'true';
+
+		// make sure content state matches button state
+		_.content.hidden = !expanded;
 
-		button.addEventListener('click', this.#handleClick);
+		// add event listener
+		_.button.addEventListener('click', _.#handleClick);
 	}
 
+	/**
+	 * Called when element is removed from the DOM
+	 * Cleans up event listeners
+	 */
 	disconnectedCallback() {
-		const button = this.querySelector('button');
-		button?.removeEventListener('click', this.#handleClick);
+		const _ = this;
+		if (_.button) {
+			_.button.removeEventListener('click', _.#handleClick);
+		}
 	}
 }
 
+/**
+ * Custom element that provides animated collapsible content
+ */
 class CollapsibleContent extends HTMLElement {
+	#handleTransitionEnd;
+
+	/**
+	 * Initializes the content element and binds event handlers
+	 */
 	constructor() {
 		super();
-		this._onTransitionEnd = this._onTransitionEnd.bind(this);
-		// Add event listener to remove height after transition
-		this.addEventListener('transitionend', this._onTransitionEnd);
+		const _ = this;
+
+		// define event handler using arrow function for proper binding
+		_.#handleTransitionEnd = (event) => {
+			// exit if isn't height property
+			if (event.propertyName != 'height') return;
+
+			// remove the inline height to allow dynamic content changes
+			if (!_.hidden) {
+				_.style.height = 'auto';
+			}
+		};
+
+		// add event listener to remove height after transition
+		_.addEventListener('transitionend', _.#handleTransitionEnd);
 	}
 
+	/**
+	 * Called when element is added to the DOM
+	 * Sets initial height based on hidden state
+	 */
 	connectedCallback() {
-		if (this.hidden) {
-			this.style.height = '0';
+		const _ = this;
+
+		// get aria-expanded state from button
+		const component = _.closest('collapsible-component');
+		const button = component.querySelector('button');
+		const expanded = button.getAttribute('aria-expanded') === 'true';
+
+		if (expanded) {
+			_.style.height = 'auto';
 		} else {
-			this.style.height = `${this.scrollHeight}px`;
+			_.style.height = '0';
 		}
 	}
 
+	/**
+	 * Called when element is removed from the DOM
+	 * Cleans up event listeners
+	 */
 	disconnectedCallback() {
-		this.removeEventListener('transitionend', this._onTransitionEnd);
+		const _ = this;
+		_.removeEventListener('transitionend', _.#handleTransitionEnd);
 	}
 
+	/**
+	 * Handles setting the hidden attribute with animation
+	 * @param {boolean} value - Whether element should be hidden
+	 */
 	set hidden(value) {
+		const _ = this;
+
 		// animate to closed
 		if (value) {
 			// reset height to animate from
-			this.style.height = `${this.scrollHeight}px`;
+			_.style.height = `${_.scrollHeight}px`;
+
 			// wait one frame and animate to 0
 			setTimeout(() => {
-				this.style.height = '0px';
+				_.style.height = '0px';
 			}, 1);
 
-			this.setAttribute('aria-hidden', 'true');
-			this.setAttribute('inert', '');
-			this.setAttribute('hidden', '');
+			// set accessibility attributes
+			_.setAttribute('aria-hidden', 'true');
+			_.setAttribute('inert', '');
+			_.setAttribute('hidden', '');
 		} else {
-			// animate to open
-			this.style.height = `${this.scrollHeight}px`;
-			this.removeAttribute('aria-hidden');
-			this.removeAttribute('inert');
-			this.removeAttribute('hidden');
+			// only animate if not set to auto
+			if (_.style.height !== 'auto') {
+				// animate to open
+				_.style.height = `${_.scrollHeight}px`;
+			}
+
+			// remove accessibility attributes
+			_.removeAttribute('aria-hidden');
+			_.removeAttribute('inert');
+			_.removeAttribute('hidden');
 		}
 	}
 
+	/**
+	 * Gets the hidden state from the attribute
+	 * @returns {boolean} Whether element is hidden
+	 */
 	get hidden() {
-		return this.hasAttribute('hidden');
-	}
-
-	_onTransitionEnd(event) {
-		// exit if isn't height property
-		if (event.propertyName != 'height') return;
-
-		// Remove the inline height to allow dynamic content changes
-		if (!this.hidden) {
-			this.style.height = 'auto';
-		}
+		const _ = this;
+		return _.hasAttribute('hidden');
 	}
 }
 
+// register custom elements
 customElements.define('collapsible-content', CollapsibleContent);
 customElements.define('collapsible-component', CollapsibleComponent);
 

package/src/index.scss

@@ -0,0 +1,2 @@
+@forward "scss/variables";
+@forward "scss/collapsible-content";

package/src/scss/collapsible-content.scss

@@ -0,0 +1,25 @@
+// Import variables using the modern @use rule
+@use 'variables' as vars;
+
+collapsible-component {
+  display: var(--cc-component-display, block);
+  
+  button {
+    width: var(--cc-button-width, 100%);
+    text-align: var(--cc-button-text-align, left);
+    background: var(--cc-button-background, none);
+    border: var(--cc-button-border, none);
+    cursor: var(--cc-button-cursor, pointer);
+  }
+  
+  collapsible-content[hidden] {
+    display: var(--cc-content-display, block);
+  }
+}
+
+collapsible-content {
+  padding: var(--cc-content-padding, 0px);
+  display: var(--cc-content-display, block);
+  overflow: var(--cc-content-overflow, hidden);
+  transition: height var(--cc-transition-duration, 0.35s) var(--cc-transition-timing, ease-out);
+}

package/src/scss/variables.scss

@@ -0,0 +1,40 @@
+// Collapsible Content variables
+// SCSS variables for internal component use and customization
+// these variables can be customized by the user
+
+// layout
+$component-display: block !default;
+$button-width: 100% !default;
+$button-text-align: left !default;
+
+// appearance
+$button-background: none !default;
+$button-border: none !default;
+$button-cursor: pointer !default;
+
+// animation
+$content-padding: 0px !default;
+$content-display: block !default;
+$content-overflow: hidden !default;
+$transition-duration: 0.35s !default;
+$transition-timing: ease-out !default;
+
+// Define CSS Custom Properties using SCSS values
+:root {
+  // layout
+  --cc-component-display: #{$component-display};
+  --cc-button-width: #{$button-width};
+  --cc-button-text-align: #{$button-text-align};
+  
+  // appearance
+  --cc-button-background: #{$button-background};
+  --cc-button-border: #{$button-border};
+  --cc-button-cursor: #{$button-cursor};
+  
+  // animation
+  --cc-content-padding: #{$content-padding};
+  --cc-content-display: #{$content-display};
+  --cc-content-overflow: #{$content-overflow};
+  --cc-transition-duration: #{$transition-duration};
+  --cc-transition-timing: #{$transition-timing};
+}

package/src/styles.css

@@ -1,22 +0,0 @@
-collapsible-component {
-	display: block;
-}
-
-collapsible-component button {
-	width: 100%;
-	text-align: left;
-	background: none;
-	border: none;
-	cursor: pointer;
-}
-
-collapsible-content {
-	padding: 0px;
-	display: block;
-	overflow: hidden;
-	transition: height 0.35s ease-out;
-}
-
-collapsible-component collapsible-content[hidden] {
-	display: block;
-}