book/index.html

Summary

Maintainability
Test Coverage
<!--#include virtual="/header-start.html" -->
<title>Bibliographie</title>
<!--#include virtual="/header-end.html" -->
<p>Publications citées dans ce site.</p>
<style>
  #searchForm {
    padding: 1em 0.5em;
    border: 1px solid grey;
    margin: 1em 0;
  }

  #searchForm + ul {
    column-width: 14em;
  }

  #searchForm label, output {
    padding: 0.5em 1em;
    white-space: nowrap;
  }

  #searchForm input[name="text"] {
    margin-left: 0.5em;
  }

  #searchForm output {
    color: grey;
  }
</style>
<form id="searchForm">
  <input disabled name="text" oninput="findCase(event)" placeholder="Activez JavaScript"
      size="24" style="margin-left: 1em" type="search">
  <output></output>
</form>
<!--#echo var="directories" -->
<script>
  const textInput = document.querySelector("#searchForm input[name='text']")
  textInput.disabled = false
  textInput.setAttribute("placeholder", "Auteur, titre, année")

  function findCase(e) {
    const value = textInput.value.toLowerCase()
    const list = document.querySelector("#searchForm + ul")
    let found = 0
    for (const child of list.children) {
      const matchText = child.textContent.toLowerCase().indexOf(value) >= 0
      if (matchText) {
        child.style.display = "list-item"
        found++
      } else {
        child.style.display = "none"
      }
    }
    const output = document.querySelector("#searchForm output")
    output.textContent = `${found > 0 ? found : "Aucune"} publication${found > 1 ? "s" : ""} / ${list.children.length}`
  }

  textInput.dispatchEvent(new Event("input"))
</script>
<!--#include virtual="/footer.html" -->