tjh.dev
forked from
tangled.org/core
Mirror of @tangled.org/core. Running on a Raspberry Pi Zero 2
appview/repo/blob: add code wrap toggle
Fixes https://tangled.org/tangled.org/core/issues/390
Signed-off-by: marco.tngl.sh <dev@marco.social>
authored by
+47
-5
appview/pages/templates/repo/blob.html
+47
-5
appview/pages/templates/repo/blob.html
···
12
12
13
13
{{ define "repoContent" }}
14
14
{{ $linkstyle := "no-underline hover:underline" }}
15
-
16
-
<div class="pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
15
+
<div class="peer pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
17
16
<div class="flex flex-col md:flex-row md:justify-between gap-2">
18
17
<div id="breadcrumbs" class="overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500">
19
18
{{ range $idx, $value := .BreadCrumbs }}
···
54
55
view {{ if .BlobView.ShowingRendered }}code{{ else }}rendered{{ end }}
55
56
</a>
56
57
{{ end }}
58
+
59
+
{{ if .BlobView.ShowingText }}
60
+
<div id="toggle-wrap-content" class="flex items-center">
61
+
<span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
62
+
<label class="flex lowercase font-normal px-1 py-0 gap-1 text-xs md:text-sm">
63
+
<input id="toggle-wrap-content-checkbox" type="checkbox" name="wrap"/>
64
+
wrap content
65
+
</label>
66
+
</div>
67
+
{{ end }}
57
68
</div>
58
69
</div>
59
70
</div>
···
71
62
{{ if .LastCommitInfo }}
72
63
{{ template "repo/fragments/lastCommitPanel" $ }}
73
64
{{ end }}
65
+
66
+
{{ $wrapContentClasses := "peer-has-[:checked]:*:whitespace-pre-wrap peer-has-[:checked]:*:[overflow-wrap:anywhere]" }}
74
67
75
68
{{ if .BlobView.IsUnsupported }}
76
69
<p class="text-center text-gray-400 dark:text-gray-500">
···
96
85
</video>
97
86
</div>
98
87
{{ else if .BlobView.ContentType.IsSvg }}
99
-
<div class="overflow-auto relative">
88
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
100
89
{{ if .BlobView.ShowingRendered }}
101
90
<div class="text-center">
102
91
<img src="{{ .BlobView.ContentSrc }}"
···
108
97
{{ end }}
109
98
</div>
110
99
{{ else if .BlobView.ContentType.IsMarkup }}
111
-
<div class="overflow-auto relative">
100
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
112
101
{{ if .BlobView.ShowingRendered }}
113
102
<div id="blob-contents" class="prose dark:prose-invert">{{ .BlobView.Contents | readme }}</div>
114
103
{{ else }}
···
116
105
{{ end }}
117
106
</div>
118
107
{{ else if .BlobView.ContentType.IsCode }}
119
-
<div class="overflow-auto relative">
108
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
120
109
<div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ code .BlobView.Contents .Path | escapeHtml }}</div>
121
110
</div>
122
111
{{ end }}
123
112
{{ template "fragments/multiline-select" }}
113
+
<script>
114
+
(() => {
115
+
const abortController = new AbortController();
116
+
const toggle = document.querySelector('#toggle-wrap-content');
117
+
const toggleCheckbox = document.querySelector('#toggle-wrap-content-checkbox');
118
+
const contents = document.querySelector('#blob-contents');
119
+
120
+
function showWrapContentToggleOnOverflow() {
121
+
if(!toggle || !toggleCheckbox || !contents) return;
122
+
123
+
const isScrollable = contents.scrollWidth > contents.clientWidth;
124
+
const showToggle = isScrollable || toggleCheckbox.checked;
125
+
126
+
if(showToggle) {
127
+
toggle.classList.remove('hidden');
128
+
} else {
129
+
toggle.classList.add('hidden');
130
+
}
131
+
}
132
+
133
+
window.addEventListener('resize', () => showWrapContentToggleOnOverflow(), {signal: abortController.signal});
134
+
document.body.addEventListener('htmx:afterSettle', () => showWrapContentToggleOnOverflow(), {signal: abortController.signal});
135
+
document.body.addEventListener('htmx:beforeCleanupElement', (e) => {
136
+
if(e.target === toggle) {
137
+
abortController.abort();
138
+
}
139
+
}, {signal: abortController.signal});
140
+
141
+
showWrapContentToggleOnOverflow();
142
+
})();
143
+
</script>
124
144
{{ end }}