Sha256: c5f726ac3b8794ad6d305cf9201c492cef38115d65a989c30da643a10e376269
Contents?: true
Size: 1.67 KB
Versions: 26
Compression:
Stored size: 1.67 KB
Contents
import {controllerFactory} from '@utils/createController' import {animate} from 'motion' export default class Controller extends controllerFactory()({ targets: { icon: HTMLElement, content: HTMLElement, }, values: { open: Boolean, }, }) { connect() { // Set the initial state of the accordion this.animationDurationValue = 0.15 if (this.openValue) { this.open() } else { this.close() } } // Toggle the 'open' value toggle() { this.openValue = !this.openValue } // Handle changes in the 'open' value openValueChanged(isOpen) { if (isOpen) { this.open() } else { this.close() } } // Open the accordion content open() { if (this.hasContentTarget) { this.revealContent() if (this.hasIconTarget) { this.rotateIcon() } this.openValue = true } } // Close the accordion content close() { if (this.hasContentTarget) { this.hideContent() if (this.hasIconTarget) { this.rotateIcon() } this.openValue = false } } // Reveal the accordion content with animation revealContent() { const contentHeight = this.contentTarget.scrollHeight animate( this.contentTarget, {height: `${contentHeight}px`}, {duration: this.animationDurationValue, easing: 'ease-in-out'}, ) } // Hide the accordion content with animation hideContent() { animate(this.contentTarget, {height: 0}, {duration: this.animationDurationValue, easing: 'ease-in-out'}) } // Rotate the accordion icon 180deg using animate function rotateIcon() { animate(this.iconTarget, {rotate: `${this.openValue ? 180 : 0}deg`}) } }
Version data entries
26 entries across 26 versions & 1 rubygems