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