https://assets.wanikani.com/assets/controllers/dismissable_controller-1845c74b.js

1import { Controller } from '@hotwired/stimulus';
2import { purgeStaleItems } from 'utils/purge_stale_items';
3
4export default class extends Controller {
5  static values = {
6    id: String,
7    connected: Boolean,
8    timeout: { type: Number, default: 0 },
9    animated: { type: Boolean, default: false }
10  }
11
12  connect() {
13    this.connectedValue = true
14    if (this.hasIdValue) {
15      const staleItemTimeout = 30 * 24 * 60 * 60 * 1000 // 30 days in milliseconds
16      purgeStaleItems(this._storage_key_prefix, staleItemTimeout)
17      const hidden = localStorage.getItem(this._storage_key) != null
18      if (hidden) {
19        this.dismiss()
20      } else {
21        this.element.hidden = false
22      }
23    }
24    if (this.timeoutValue > 0) {
25      this.tId = setTimeout(this.dismiss.bind(this), this.timeoutValue)
26    }
27    if (this.animatedValue) {
28      this._animateIn()
29    }
30  }
31
32  disconnect() {
33    this.connectedValue = false
34    clearTimeout(this.tId)
35  }
36
37  dismiss(event) {
38    event && event.preventDefault();
39    if (this.hasIdValue) {
40      localStorage.setItem(this._storage_key, new Date())
41    }
42    if (this.animatedValue) {
43      this._animateOut(() => this.element.remove())
44    } else {
45      this.element.remove()
46    }
47  }
48
49  get _storage_key() {
50    return this._storage_key_prefix + this.idValue
51  }
52
53  get _storage_key_prefix() {
54    return 'system_alerts/'
55  }
56
57  _animateIn() {
58    requestAnimationFrame(() => {
59      this.element.addEventListener('transitionend', () => {
60        this.element.toggleAttribute('animation-complete', true)
61      }, { once: true })
62      this.element.classList.add('animate-in') 
63    })
64  }
65
66  _animateOut(completion_callback) {
67    this.element.toggleAttribute('animation-complete', false)
68    this.element.classList.remove('animate-in')
69    this.element.classList.add('animate-out')
70    this.element.addEventListener("transitionend", () => {
71      this.element.toggleAttribute('animation-complete', true)
72      completion_callback()
73    }, {once: true})
74  }
75}