informar el delay para enviar el formulario
This commit is contained in:
parent
fe682d22c1
commit
2908d93043
3 changed files with 49 additions and 1 deletions
|
@ -9,6 +9,8 @@ envío del formulario.
|
|||
encuentra en _data/forms/contacto.yml
|
||||
{% endcomment %}
|
||||
<form
|
||||
data-controller="contact"
|
||||
data-delay="60"
|
||||
action="https://api.sutty.nl/v1/sites/{{ site.hostname }}/contact/{{ include.name }}"
|
||||
method="post">
|
||||
{%- for field in include.form -%}
|
||||
|
|
|
@ -1 +1,5 @@
|
|||
<input type="submit" class="btn btn-success" value="{{ include.field[1].label[site.locale] }}" />
|
||||
<input
|
||||
data-target="contact.submit"
|
||||
type="submit"
|
||||
class="btn btn-success"
|
||||
value="{{ include.field[1].label[site.locale] }}" />
|
||||
|
|
42
_packs/controllers/contact_controller.js
Normal file
42
_packs/controllers/contact_controller.js
Normal file
|
@ -0,0 +1,42 @@
|
|||
import { Controller } from 'stimulus'
|
||||
|
||||
/*
|
||||
* Sólo permite enviar el formulario de contacto después de unos
|
||||
* segundos, para evitar el spam.
|
||||
*/
|
||||
export default class extends Controller {
|
||||
static targets = [ 'submit' ]
|
||||
|
||||
connect () {
|
||||
if (!this.hasSubmitTarget) return
|
||||
|
||||
this.submitTarget.disabled = true
|
||||
|
||||
this._value = this.submitTarget.value
|
||||
|
||||
// Esperar un minuto desde que se carga la página hasta que se
|
||||
// permite enviar.
|
||||
this._interval = setInterval(() => {
|
||||
const delay = this.delay
|
||||
|
||||
if (this.delay == 0) {
|
||||
clearInterval(this._interval)
|
||||
this.submitTarget.disabled = false
|
||||
this.submitTarget.value = this._value
|
||||
} else {
|
||||
this.delay = delay - 1
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
get delay () {
|
||||
const delay = parseInt(this.element.dataset.delay)
|
||||
|
||||
return isNaN(delay) ? 0 : delay
|
||||
}
|
||||
|
||||
set delay (value) {
|
||||
this.element.dataset.delay = value
|
||||
this.submitTarget.value = `${this._value} (${value})`
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue