https://assets.wanikani.com/assets/controllers/detail_controller-214fb0da.js

1import { Controller } from '@hotwired/stimulus';
2
3export default class extends Controller {
4  static targets = ["anchor", 'parent', "content"];
5  static values = { connected: { type: Boolean, default: false } }
6
7  connect() {
8    this.connectedValue = true;
9    this.contentTargets.forEach(el => el.hidden = true)
10  }
11
12  disconnect() {
13    this.connectedValue = false;
14  }
15
16  showDetail(event) {
17    event.preventDefault();
18    event.stopPropagation();
19    const href = event.currentTarget.getAttribute('href')
20    this.showContent(href)
21  }
22
23  showContent(href) {
24    const selectedId = href.slice(1)
25    this.visibleContent = this.contentTargets.find(el => el.id === selectedId)
26    requestAnimationFrame(() => {
27      this.visibleContent.hidden = false
28      requestAnimationFrame(() => {
29        this.parentTarget.addEventListener('transitionend', () => {
30          this.parentTarget.style.visibility = 'hidden'
31        }, { once: true })
32        this.parentTarget.classList.add('animate-out')
33        this._trackTransistion(this.visibleContent)
34        this.visibleContent.classList.add('animate-in')
35        this.anchorTargets.forEach(el => {
36          if (el.getAttribute('href') === href) {
37            el.setAttribute('aria-selected', true)
38          } else {
39            el.removeAttribute('aria-selected')
40          }
41        })
42      })
43    })
44  }
45
46  close(event) {
47    event.preventDefault()
48    this.animateOut(this.visibleContent)
49    this.parentTarget.style.visibility = null
50    this._trackTransistion(this.parentTarget)
51    this.parentTarget.classList.remove('animate-out')
52    this.anchorTargets.forEach(el => { el.removeAttribute('aria-selected') })
53  }
54
55  animateOut(element) {
56    element.addEventListener("transitionend", () => {
57      element.classList.remove('animate-out')
58      element.hidden = true
59    }, { once: true }) 
60    element.classList.remove('animate-in')
61    element.classList.add('animate-out')
62  }
63
64  _trackTransistion(element) {
65    element.toggleAttribute('animation-complete', false)
66    element.addEventListener("transitionend", () => {
67      element.toggleAttribute('animation-complete', true)
68    }, { once: true }) 
69  }
70}