internal/web/templates/reader.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

{{/* reader.html — lectio-web Bible reader: pick a book (sigla-dialect names),
     navigate chapters, compare corpus versions. The controls form re-fetches
     /reader and hx-selects #reader-root (so the book/chapter/version selects
     re-render in sync); the theme/mono controls live OUTSIDE #reader-root so
     they persist across swaps, exactly like index.html. Reuses the same
     reading-pane templates, role classes and themes as the daily view. */}}
<!doctype html>
<html lang="{{.Lang}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lectio — reader</title>
<link rel="stylesheet" href="/static/base.css">
<link id="theme" rel="stylesheet" href="/theme.css?name={{.Theme}}">
<script src="/static/htmx.min.js"></script>
</head>
<body{{if .Mono}} class="mono"{{end}}>
<div class="page">
  <div id="reader-root">
    <form class="controls" action="/reader" method="get"
          hx-get="/reader" hx-target="#reader-root" hx-select="#reader-root" hx-swap="outerHTML" hx-trigger="change">
      <a class="nav-link" href="/">&larr; {{.L.BannerReadings}}</a>
      <a class="nav-link" href="/settings">{{.L.NavSettings}}</a>
      <a class="nav-link" href="/bookmarks">{{.L.NavBookmarks}}</a>

      <label>{{.L.WebBook}}
        <select name="book">
          {{range .BookOpts}}<option value="{{.Value}}" {{if .Selected}}selected{{end}}>{{.Label}}</option>{{end}}
        </select>
      </label>

      {{/* Arrows drive the chapter <select> (the single source of truth) and
           fire its change, so navigation always carries the CURRENT book +
           target chapter -- no duplicate "chap" param from a competing hx-vals. */}}
      <span class="chap-nav">
        <button type="button" onclick="var s=this.closest('.controls').querySelector('select[name=chap]');s.value='{{.PrevChap}}';s.dispatchEvent(new Event('change',{bubbles:true}));">&larr;</button>
        <label>{{.L.WebChapter}}
          <select name="chap">
            {{range .ChapOpts}}<option value="{{.N}}" {{if .Selected}}selected{{end}}>{{.N}}</option>{{end}}
          </select>
        </label>
        <button type="button" onclick="var s=this.closest('.controls').querySelector('select[name=chap]');s.value='{{.NextChap}}';s.dispatchEvent(new Event('change',{bubbles:true}));">&rarr;</button>
      </span>

      {{range .VersionOpts}}
      <label><input type="checkbox" name="v" value="{{.Code}}" {{if .Checked}}checked{{end}}> {{.Code}}</label>
      {{end}}

      <label>{{.L.Layout}}
        <select name="display">
          <option value="vertical" {{if eq .Display "vertical"}}selected{{end}}>{{.L.OptColumns}}</option>
          <option value="horizontal" {{if eq .Display "horizontal"}}selected{{end}}>{{.L.OptHorizontal}}</option>
          <option value="interlinear" {{if eq .Display "interlinear"}}selected{{end}}>{{.L.OptInterlinear}}</option>
        </select>
      </label>
    </form>

    <form class="bookmark-add" method="post" action="/reader/bookmark">
      <input type="hidden" name="book" value="{{.Book}}">
      <input type="hidden" name="chap" value="{{.Chap}}">
      <input type="number" name="verse" min="1" placeholder="{{.L.WebVerseOptional}}">
      <input type="text" name="note" placeholder="{{.L.ReaderMarkNote}}">
      <input type="text" name="tags" placeholder="{{.L.WebTagsPlaceholder}}">
      <button type="submit">★ {{.L.WebAddBookmark}}</button>
    </form>

    {{/* #pane is OUTSIDE the form so its reading text inherits body's
         --font-reading (mono-responsive), not the form's --font-ui. It stays
         inside #reader-root so an hx-select swap re-renders it with the controls. */}}
    <div id="pane">{{.Reading}}</div>
  </div>

  <label class="theme-picker">{{.L.Theme}}
    <select id="theme-select"
            onchange="var o=document.getElementById('theme'),n=o.cloneNode(false);n.setAttribute('href','/theme.css?name='+encodeURIComponent(this.value));o.replaceWith(n);">
      {{range .ThemeOpts}}
      <option value="{{.Name}}" {{if .Selected}}selected{{end}}>{{.Name}}</option>
      {{end}}
    </select>
  </label>

  <label class="mono-toggle"><input type="checkbox" {{if .Mono}}checked{{end}}
         onchange="document.body.classList.toggle('mono', this.checked)"> {{.L.Mono}}</label>

</div>
</body>
</html>