Skip to content

Instantly share code, notes, and snippets.

@didlix
Created September 11, 2022 17:46
Show Gist options
  • Save didlix/edda4d365dddc7b64d204308fac57e26 to your computer and use it in GitHub Desktop.
Save didlix/edda4d365dddc7b64d204308fac57e26 to your computer and use it in GitHub Desktop.
// src/controllers/clipboard_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["menu"];
static classes = ['entering', 'enteringTo', 'enteringFrom', 'leaving', 'leavingTo', 'leavingFrom']
static values = {
enterTimeout: { type: Number, default: 1000 },
leaveTimeout: { type: Number, default: 1000 },
hidden: Boolean
}
close() {
this._hide()
this.menuTarget.remove()
}
_show() {
this.menuTarget.classList.add(...this.enteringClasses)
requestAnimationFrame(() => {
this.menuTarget.classList.add(...this.enteringToClasses)
this.menuTarget.classList.remove(...this.enteringFromClasses)
setTimeout(() => {
this.menuTarget.classList.remove(...this.enteringClasses)
}, this.enterTimeoutValue)
})
}
_hide() {
this.menuTarget.classList.add(...this.leavingToClasses)
this.menuTarget.classList.remove(...this.leavingFromClasses)
this.menuTarget.classList.add(...this.leavingClasses)
setTimeout(() => {
this.menuTarget.classList.remove(...this.leavingClasses)
}, this.leaveTimeoutValue)
}
toggle() {
this.hiddenValue == true ? this._show() : this._hide();
this.hiddenValue = !this.hiddenValue
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment