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

Version Path
ariadne_view_components-0.0.95.5 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.95.4 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.95.3 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.95.2 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.95.1 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.95 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.94.6 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.94.5 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.94.4 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.94.3 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.94.2 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.94.1 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.94 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.93.2 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.93.1 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.93 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.92 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.91 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.90 app/components/ariadne/ui/accordion/component.ts
ariadne_view_components-0.0.89.1 app/components/ariadne/ui/accordion/component.ts