index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

    html, body, input, p {
      font-family: 'Montserrat', 'Helvetica Neue', arial;
    }

    #r h2 {
      font-size: 1.5em;
      font-weight: bold;
      line-height: 3em;
      text-align: center;
    }

    #r h3 {
      color: #4a5568;
      text-align: center;
      line-height: 2.5em;
      font-style: italic;
      margin-bottom: 0.5em;
    }

    #r p {
      margin-bottom: 0.5em;
    }

    #r .end-line-group {
      display: block;
      margin-bottom: 0.5em;
    }

    #r .verse-num {
      font-size: 0.5em;
      font-weight: normal;
      vertical-align: super;
    }

    #r .fn {
      display: none;
    }

    #r .audio, #r .footnotes, #r .chapter-num {
      display: none;
    }

    #r p:last-child {
      display: none;
    }

    #r h4.speaker {
      font-style: italic;
    }

    input:focus {
      outline-width: 0;
    }
    </style>
  </head>
  <body class="font-mono text-gray-900">
    <form class="fixed w-full top-0 bg-gray-200 shadow z-10">
      <div class="max-w-2xl m-auto flex justify-between items-center h-12 p-2">
        <a
          class="text-xs text-gray-600 underline cursor-pointer"
          href="https://github.com/staab/esv"
          target="_blank"
          tabindex="-1">
          About
        </a>
        <div class="flex justify-center items-center">
          <img src="/search.svg" class="h-4 -mr-6 z-10 opacity-50" />
          <input name="q" class="rounded p-2 pl-8 h-8" type="text" />
        </div>
      </div>
    </form>
    <ul
      id="suggestions"
      class="hidden fixed right-0 -mr-1 pt-16 bg-white border
             border-gray-200 w-64 max-h-full shadow">
    </ul>
    <div class="p-2 pt-16 m-auto max-w-2xl">
      <p class="our-copyright -mt-5 text-gray-400 text-xs text-center hidden">
        Copyright
        <a
          class="underline cursor-pointer"
          href="https://www.esv.org"
          target="_blank"
          tabindex="-1">
          esv.org
        </a>
      </p>
      <p id="r" class="text-gray-900 text-sm"></p>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.4.5/fuse.min.js"></script>
    <script>
      const $ = document.querySelector.bind(document)
      const $q = $('[name="q"]')
      const $r = $('#r')
      const $copyright = $('.our-copyright')
      const $suggestions = $('#suggestions')
      const books = {
        'Genesis': 50, 'Exodus': 40, 'Leviticus': 27, 'Numbers': 36,
        'Deuteronomy': 34, 'Joshua': 24, 'Judges': 21, 'Ruth': 4,
        '1 Samuel': 31, '2 Samuel': 24, '1 Kings': 22, '2 Kings': 25,
        '1 Chronicles': 29, '2 Chronicles': 36, 'Ezra': 10, 'Nehemiah': 13,
        'Esther': 10, 'Job': 42, 'Psalms': 150, 'Proverbs': 31,
        'Ecclesiastes': 12, 'Song of Solomon': 8, 'Isaiah': 66, 'Jeremiah': 52,
        'Lamentations': 5, 'Ezekiel': 48, 'Daniel': 12, 'Hosea': 14,
        'Joel': 3, 'Amos': 9, 'Obadiah': 1, 'Jonah': 4, 'Micah': 7,
        'Nahum': 3, 'Habakkuk': 3, 'Zephaniah': 3, 'Haggai': 2,
        'Zechariah': 14, 'Malachi': 4, 'Matthew': 28, 'Mark': 16,
        'Luke': 24, 'John': 21, 'Acts': 28, 'Romans': 16, '1 Corinthians': 16,
        '2 Corinthians': 13, 'Galatians': 6, 'Ephesians': 6, 'Philippians': 4,
        'Colossians': 4, '1 Thessalonians': 5, '2 Thessalonians': 3,
        '1 Timothy': 6, '2 Timothy': 4, 'Titus': 3, 'Philemon': 1,
        'Hebrews': 13, 'James': 5, '1 Peter': 5, '2 Peter': 3, '1 John': 5,
        '2 John': 1, '3 John': 1, 'Jude': 1, 'Revelation': 22,
      }

      let prevQ = null
      let touching = false
      let pendingUpdate
      let prevScrollY = window.scrollY

      const fuse = new Fuse(
        Object.keys(books).map(book => ({book})),
        {shouldSort: true, keys: ['book']}
      )

      const qFromUrl = () => decodeURI(location.pathname.slice(1).replace(/\+/g, ' '))

      const getHeight = $el => $el ? $el.offsetHeight : 0

      const getOffset = $el => $el ? $el.offsetTop : 0

      const isVisible = $el => {
        if (!$el) {
          return false
        }

        const {top, bottom} = $el.getBoundingClientRect()

        return bottom > 0 && top <= innerHeight
      }

      search(qFromUrl() || localStorage.getItem('q') || 'John 1')

      $('form').addEventListener('submit', evt => {
        evt.preventDefault()

        search($q.value)

        $suggestions.classList.add('hidden')
      })

      window.addEventListener('keyup', evt => {
        if (evt.key === 'Escape') {
          $suggestions.classList.add('hidden')
        }
      })

      window.addEventListener('touchstart', evt => {
        touching = true
      })

      window.addEventListener('touchend', evt => {
        touching = false

        if (pendingUpdate) {
          applyUpdate(pendingUpdate)
          pendingUpdate = null
        }
      })

      window.addEventListener('scroll', evt => {
        const {scrollHeight} = document.body
        const $prev = $('.prev')
        const $next = $('.next')

        const prev = (
          isVisible($prev) &&
          (
            !isVisible($next) ||
            scrollY < 100
          ) &&
          prevScrollY > scrollY &&
          $prev.querySelector('h2').innerText
        )

        const next = (
          isVisible($next) &&
          (
            !isVisible($prev) ||
            scrollHeight - scrollY - innerHeight < 100
          ) &&
          prevScrollY < scrollY &&
          $next.querySelector('h2').innerText
        )

        if (prev) {
          search(prev, {mode: 'backward'})
        } else if (next) {
          search(next, {mode: 'forward'})
        }

        prevScrollY = scrollY
      })

      window.addEventListener('popstate', evt => {
        search(qFromUrl())
      })

      $q.addEventListener('mousedown', evt => {
        if (document.activeElement !== $q) {
          window.requestIdleCallback(() => evt.target.select())
        }
      })

      $q.addEventListener('blur', evt => {
        window.requestIdleCallback(() => $suggestions.classList.add('hidden'))
      })

      $q.addEventListener('input', evt => {
        $suggestions.innerHTML = ''

        const term = evt.target.value

        // If the search term already has a chapter/verse in it, don't
        // show suggestions
        const results = term.match(/[\w ]+[0-9]/g)
          ? []
          : fuse.search(term).filter(({book}) =>
            // Skip matches that are just a prefix of the search term
            term.toLowerCase().indexOf(book.toLowerCase()) !== 0
          )

        results.forEach(({book}) => {
          const $li = document.createElement('li')

          $li.innerText = book
          $li.classList.add('p-2')
          $li.classList.add('cursor-pointer')
          $li.classList.add('hover:bg-gray-100')
          $li.addEventListener('mousedown', evt => {
            evt.preventDefault()
            $q.value = book + ' '
            $q.focus()

            search($q.value, {setCanonical: false})

            $suggestions.classList.add('hidden')
          })

          $suggestions.appendChild($li)
        })

        if (results.length > 0) {
          $suggestions.classList.remove('hidden')
        } else {
          $suggestions.classList.add('hidden')
        }
      })

      function applyUpdate({contents, mode}) {
        // If they're touching the screen still, their finger will
        // override our attempt to scroll for them. Wait until they're done
        if (touching) {
          pendingUpdate = {contents, mode}

          return
        }

        const oldScrollY = window.scrollY
        const oldPrevHeight = getHeight($('.prev'))

        $r.innerHTML = contents

        $r.querySelectorAll('.copyright').forEach($el => {
          $el.parentNode.parentNode.removeChild($el.parentNode)
        })

        $r.querySelectorAll('.our-copyright').forEach($el => {
          $el.parentNode.removeChild($el)
        })

        $r.querySelectorAll('h2').forEach($h2 => {
          $cp = $copyright.cloneNode(true)
          $cp.classList.remove('hidden')
          $h2.parentNode.insertBefore($cp, $h2.nextSibling)
        })

        if (mode === 'backward') {
          window.scrollTo({
            top: oldScrollY + getHeight($('.prev')) + 7,
          })
        } else if (mode === 'forward') {
          window.scrollTo({
            top: oldScrollY - oldPrevHeight - 7,
          })
        } else {
          window.scrollTo({
            top: getOffset($('.cur')) - 48,
          })
        }

        prevScrollY = window.scrollY
      }

      function fetchPassage(query) {
        const url = `/api/passage/html/?q=${query}`

        return fetch(url).then(r => r.json())
      }

      async function search(q, {setCanonical = true, mode} = {}) {
        if (q === prevQ) {
          return
        }

        prevQ = q

        localStorage.setItem('q', q)

        const {canonical, passages, passage_meta, detail} = await fetchPassage(q)

        if (prevQ !== q) {
          return
        }

        if (!passages || passages.length === 0) {
          const $err = document.createElement("div")

          $err.innerText = detail
          $err.classList.add("text-center")
          $err.classList.add("mt-20")

          $r.innerHTML = $err.outerHTML
        } else {
          const [{prev_chapter, next_chapter}] = passage_meta

          if (setCanonical) {
            $q.value = canonical
          }

          history.pushState({q: $q.value}, null, $q.value.replace(/ /g, '+'))

          const [prev, next] = await Promise.all([
            prev_chapter ? fetchPassage(prev_chapter.join('-')) : null,
            next_chapter ? fetchPassage(next_chapter.join('-')) : null,
          ])

          let contents = '<div class="cur">' + passages[0] + '</div>'

          const hasPrev = prev && prev.passages.length && prev.passages[0] !== passages[0]
          const hasNext = next && next.passages.length && next.passages[0] !== passages[0]

          if (hasPrev) {
            contents = '<div class="prev">' + prev.passages[0] + '</div>' + contents
          }

          if (hasNext) {
            contents = contents + '<div class="next">' + next.passages[0] + '</div>'
          }

          applyUpdate({contents, mode})
        }

        searching = false
      }
    </script>
  </body>
</html>