Sha256: 73e52e2dc9f1174e8c163fc7a80ce4643d2257767dedf09a0395dbe0089b5b39
Contents?: true
Size: 1.61 KB
Versions: 13
Compression:
Stored size: 1.61 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
this.openValue ? this.open() : this.close()
}
// Toggle the 'open' value
toggle() {
this.openValue = !this.openValue
}
// Handle changes in the 'open' value
openValueChanged(isOpen, wasOpen) {
if (isOpen) {
this.open()
} else {
this.close()
}
}
// Open the accordion content
open() {
if (this.hasContentTarget) {
this.revealContent()
this.hasIconTarget && this.rotateIcon()
this.openValue = true
}
}
// Close the accordion content
close() {
if (this.hasContentTarget) {
this.hideContent()
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
13 entries across 13 versions & 1 rubygems