Commit 43a38b5d authored by f's avatar f
Browse files

buscador funcional

parent d65faed9
{%- assign param = include.param | default: 'search' -%}
<form method="get" action="" class="form-inline" data-controller="search">
<form method="get" action="" class="form-inline" data-controller="search" data-action="search#search">
<div class="form-group">
<label for="{{ param }}_q" class="sr-only">{{ site.i18n.search.label }}</label>
......
......@@ -8,25 +8,42 @@ require("lunr-languages/lunr.es")(lunr)
export default class extends Controller {
static targets = [ 'q' ]
connect () {
this.element.addEventListener('submit', async event => {
event.stopPropagation()
event.preventDefault()
get q () {
if (!this.hasQTarget) return
if (!this.qTarget.value.trim().length === 0) return
this.search()
})
return this.qTarget.value.trim()
}
connect () {
const q = window.location.search.match(/^\?q=(?<q>.*)&?/)
if (q) this.qTarget.value = decodeURI(q.groups.q)
// There can only be one
if (!window.search_fetching) this.fetch()
if (q) {
this.qTarget.value = decodeURI(q.groups.q)
this.search()
}
}
async search () {
const q = this.qTarget.value
async search (event) {
// Detiene el envío del formulario
if (event) {
event.preventDefault()
event.stopPropagation()
}
this.formDisable = true
// Obtiene el término de búsqueda
const q = this.q
// Si no hay término de búsqueda, no hay búsqueda
if (q) {
// Trae el índice de búsqueda
await this.fetch()
if (!q || q === '') return
// Hasta que no haya índice no buscamos nada, esto evita que se
// aprete enter dos veces y se fallen cosas.
if (!window.index) return
}
const main = document.querySelector('main')
const results = window.index.search(q).map(r => window.data.find(a => a.id == r.ref))
......@@ -40,12 +57,17 @@ export default class extends Controller {
document.title = title
main.innerHTML = html
this.formDisable = false
}
async fetch () {
window.search_fetching = true
// Solo permite descargar uno a la vez
if (this.fetching) return
this.fetching = true
let response
// Si no existe el índice, lo descarga y procesa Lunr
if (!window.data) {
response = await fetch('data.json')
window.data = await response.json()
......@@ -57,7 +79,12 @@ export default class extends Controller {
window.index = lunr.Index.load(idx)
}
if (this.qTarget.value !== '') this.search()
// Permitir volver a ejecutar
this.fetching = false
}
set formDisable (disable) {
this.element.elements.forEach(x => x.disabled = disable)
}
/*
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment