marco.tngl.sh
forked from
tangled.org/core
Monorepo for Tangled
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>
+47
-5
+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
53
<a href="/{{ .RepoInfo.FullName }}/blob/{{ .Ref }}/{{ .Path }}?code={{ .BlobView.ShowingRendered }}" hx-boost="true">
55
54
view {{ if .BlobView.ShowingRendered }}code{{ else }}rendered{{ end }}
56
55
</a>
56
+
{{ end }}
57
+
58
+
{{ if .BlobView.ShowingText }}
59
+
<div id="toggle-wrap-content" class="flex items-center">
60
+
<span class="select-none px-1 md:px-2 [&:before]:content-['·']"></span>
61
+
<label class="flex lowercase font-normal px-1 py-0 gap-1 text-xs md:text-sm">
62
+
<input id="toggle-wrap-content-checkbox" type="checkbox" name="wrap"/>
63
+
wrap content
64
+
</label>
65
+
</div>
57
66
{{ end }}
58
67
</div>
59
68
</div>
···
63
72
{{ template "repo/fragments/lastCommitPanel" $ }}
64
73
{{ end }}
65
74
75
+
{{ $wrapContentClasses := "peer-has-[:checked]:*:whitespace-pre-wrap peer-has-[:checked]:*:[overflow-wrap:anywhere]" }}
76
+
66
77
{{ if .BlobView.IsUnsupported }}
67
78
<p class="text-center text-gray-400 dark:text-gray-500">
68
79
Previews are not supported for this file type.
···
85
96
</video>
86
97
</div>
87
98
{{ else if .BlobView.ContentType.IsSvg }}
88
-
<div class="overflow-auto relative">
99
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
89
100
{{ if .BlobView.ShowingRendered }}
90
101
<div class="text-center">
91
102
<img src="{{ .BlobView.ContentSrc }}"
···
97
108
{{ end }}
98
109
</div>
99
110
{{ else if .BlobView.ContentType.IsMarkup }}
100
-
<div class="overflow-auto relative">
111
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
101
112
{{ if .BlobView.ShowingRendered }}
102
113
<div id="blob-contents" class="prose dark:prose-invert">{{ .BlobView.Contents | readme }}</div>
103
114
{{ else }}
···
105
116
{{ end }}
106
117
</div>
107
118
{{ else if .BlobView.ContentType.IsCode }}
108
-
<div class="overflow-auto relative">
119
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
109
120
<div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ code .BlobView.Contents .Path | escapeHtml }}</div>
110
121
</div>
111
122
{{ end }}
112
123
{{ template "fragments/multiline-select" }}
124
+
<script>
125
+
(() => {
126
+
const abortController = new AbortController();
127
+
const toggle = document.querySelector('#toggle-wrap-content');
128
+
const toggleCheckbox = document.querySelector('#toggle-wrap-content-checkbox');
129
+
const contents = document.querySelector('#blob-contents');
130
+
131
+
function showWrapContentToggleOnOverflow() {
132
+
if(!toggle || !toggleCheckbox || !contents) return;
133
+
134
+
const isScrollable = contents.scrollWidth > contents.clientWidth;
135
+
const showToggle = isScrollable || toggleCheckbox.checked;
136
+
137
+
if(showToggle) {
138
+
toggle.classList.remove('hidden');
139
+
} else {
140
+
toggle.classList.add('hidden');
141
+
}
142
+
}
143
+
144
+
window.addEventListener('resize', () => showWrapContentToggleOnOverflow(), {signal: abortController.signal});
145
+
document.body.addEventListener('htmx:afterSettle', () => showWrapContentToggleOnOverflow(), {signal: abortController.signal});
146
+
document.body.addEventListener('htmx:beforeCleanupElement', (e) => {
147
+
if(e.target === toggle) {
148
+
abortController.abort();
149
+
}
150
+
}, {signal: abortController.signal});
151
+
152
+
showWrapContentToggleOnOverflow();
153
+
})();
154
+
</script>
113
155
{{ end }}