Sha256: 164e6f4f0a10fd634b8c7f65c44c1ab41dcabd3a0ba145e2ac4cc21aeaca83f9
Contents?: true
Size: 1.36 KB
Versions: 36
Compression:
Stored size: 1.36 KB
Contents
/* eslint-disable no-alert */
import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
spinnerMarkup = `<div class="button-spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>`;
confirmed = false
connect() {
this.context.scope.element.addEventListener('click', (e) => {
// If the user has to confirm the action
if (this.confirmationMessage) {
// Intervene only if not confirmed
if (!this.confirmed) {
e.preventDefault()
if (window.confirm(this.confirmationMessage)) {
this.applyLoader()
}
}
} else {
this.applyLoader()
}
})
}
get button() {
return this.context.scope.element
}
get confirmationMessage() {
return this.context.scope.element.getAttribute('data-avo-confirm')
}
applyLoader() {
const { button } = this
button.style.width = `${button.getBoundingClientRect().width}px`
button.style.height = `${button.getBoundingClientRect().height}px`
button.innerHTML = this.spinnerMarkup
button.classList.add('justify-center')
setTimeout(() => {
this.markConfirmed()
button.click()
button.setAttribute('disabled', 'disabled')
}, 1)
}
markConfirmed() {
this.confirmed = true
}
markUnconfirmed() {
this.confirmed = false
}
}
Version data entries
36 entries across 36 versions & 1 rubygems