blob: 5dbe7dabcd5bd210721ec31c053a428d907c6ccf (
plain) (
blame)
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
|
{{/* index.html renders the full lectio-web page: top-bar controls (date,
lectionary, version checkboxes, all/gospel toggle, display select,
theme select) and the pre-rendered reading pane (#pane).
The controls form (#controls) carries hx-get="/readings" and fires on
any "change" bubbling up from its fields (htmx auto-includes an
hx-get element's enclosing form fields as the request's query
params -- no hx-include needed), so "display" needs no extra wiring
beyond living inside #controls. The date +/- buttons are separate
hx-get elements nested in the same form so their own field values are
included too; they override "date" via hx-vals. The theme <select>
has no server round trip: it swaps the #theme <link>'s href directly. */}}
<!doctype html>
<html lang="{{.Lang}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>lectio</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">
<form id="controls" class="controls" hx-get="/readings" hx-target="#pane" hx-trigger="change">
<span class="date-nav">
<button type="button" hx-get="/readings" hx-target="#pane"
hx-vals='{"date":"{{.PrevDate}}"}'>←</button>
<input type="date" name="date" value="{{.Date}}">
<button type="button" hx-get="/readings" hx-target="#pane"
hx-vals='{"date":"{{.NextDate}}"}'>→</button>
</span>
<label>{{.L.Lectionary}}
<select name="lectionary" onchange="var b=document.getElementById('ver-bt');if(b)b.style.display=this.value==='traditional'?'none':'';">
<option value="new" {{if eq .Lectionary "new"}}selected{{end}}>{{.L.OptModern}}</option>
<option value="traditional" {{if eq .Lectionary "traditional"}}selected{{end}}>{{.L.OptTraditional}}</option>
</select>
</label>
{{range .VersionOpts}}
<label id="ver-{{.Code}}"{{if and (eq .Code "bt") (eq $.Lectionary "traditional")}} style="display:none"{{end}}><input type="checkbox" name="v" value="{{.Code}}" {{if .Checked}}checked{{end}}> {{.Code}}</label>
{{end}}
<label>{{.L.Parts}}
<select name="all">
<option value="0" {{if not .All}}selected{{end}}>{{.L.OptGospel}}</option>
<option value="1" {{if .All}}selected{{end}}>{{.L.OptAll}}</option>
</select>
</label>
<label>{{.L.Layout}}
<select name="display">
<option value="horizontal" {{if eq .Display "horizontal"}}selected{{end}}>{{.L.OptHorizontal}}</option>
<option value="vertical" {{if eq .Display "vertical"}}selected{{end}}>{{.L.OptColumns}}</option>
<option value="interlinear" {{if eq .Display "interlinear"}}selected{{end}}>{{.L.OptInterlinear}}</option>
</select>
</label>
<a class="nav-link" href="/reader">{{.L.NavReader}} →</a>
</form>
<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 id="pane">{{.Reading}}</div>
</div>
</body>
</html>
|
