tangled.org
Fixes https://tangled.org/tangled.org/core/issues/390
Signed-off-by: marco.tngl.sh dev@marco.social
+47
-5
appview/pages/templates/repo/blob.html
+47
-5
appview/pages/templates/repo/blob.html
···
12
13
{{ define "repoContent" }}
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">
17
<div class="flex flex-col md:flex-row md:justify-between gap-2">
18
<div id="breadcrumbs" class="overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500">
19
{{ range $idx, $value := .BreadCrumbs }}
···
55
view {{ if .BlobView.ShowingRendered }}code{{ else }}rendered{{ end }}
56
</a>
57
{{ end }}
58
</div>
59
</div>
60
</div>
···
63
{{ template "repo/fragments/lastCommitPanel" $ }}
64
{{ end }}
65
66
{{ if .BlobView.IsUnsupported }}
67
<p class="text-center text-gray-400 dark:text-gray-500">
68
Previews are not supported for this file type.
···
85
</video>
86
</div>
87
{{ else if .BlobView.ContentType.IsSvg }}
88
-
<div class="overflow-auto relative">
89
{{ if .BlobView.ShowingRendered }}
90
<div class="text-center">
91
<img src="{{ .BlobView.ContentSrc }}"
···
97
{{ end }}
98
</div>
99
{{ else if .BlobView.ContentType.IsMarkup }}
100
-
<div class="overflow-auto relative">
101
{{ if .BlobView.ShowingRendered }}
102
<div id="blob-contents" class="prose dark:prose-invert">{{ .BlobView.Contents | readme }}</div>
103
{{ else }}
···
105
{{ end }}
106
</div>
107
{{ else if .BlobView.ContentType.IsCode }}
108
-
<div class="overflow-auto relative">
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>
110
</div>
111
{{ end }}
112
{{ template "fragments/multiline-select" }}
113
{{ end }}
···
12
13
{{ define "repoContent" }}
14
{{ $linkstyle := "no-underline hover:underline" }}
15
+
<div class="peer pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
16
<div class="flex flex-col md:flex-row md:justify-between gap-2">
17
<div id="breadcrumbs" class="overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500">
18
{{ range $idx, $value := .BreadCrumbs }}
···
54
view {{ if .BlobView.ShowingRendered }}code{{ else }}rendered{{ end }}
55
</a>
56
{{ end }}
57
+
58
+
{{ if .BlobView.ShowingText }}
59
+
<div id="toggle-wrap-content" class="flex items-center hidden">
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>
66
+
{{ end }}
67
</div>
68
</div>
69
</div>
···
72
{{ template "repo/fragments/lastCommitPanel" $ }}
73
{{ end }}
74
75
+
{{ $wrapContentClasses := "peer-has-[:checked]:*:whitespace-pre-wrap peer-has-[:checked]:*:[overflow-wrap:anywhere]" }}
76
+
77
{{ if .BlobView.IsUnsupported }}
78
<p class="text-center text-gray-400 dark:text-gray-500">
79
Previews are not supported for this file type.
···
96
</video>
97
</div>
98
{{ else if .BlobView.ContentType.IsSvg }}
99
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
100
{{ if .BlobView.ShowingRendered }}
101
<div class="text-center">
102
<img src="{{ .BlobView.ContentSrc }}"
···
108
{{ end }}
109
</div>
110
{{ else if .BlobView.ContentType.IsMarkup }}
111
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
112
{{ if .BlobView.ShowingRendered }}
113
<div id="blob-contents" class="prose dark:prose-invert">{{ .BlobView.Contents | readme }}</div>
114
{{ else }}
···
116
{{ end }}
117
</div>
118
{{ else if .BlobView.ContentType.IsCode }}
119
+
<div class="overflow-auto relative {{ $wrapContentClasses }}">
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>
121
</div>
122
{{ end }}
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>
155
{{ end }}
History
2 rounds
1 comment
marco.tngl.sh
submitted
#1
1 commit
expand
collapse
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>
expand 1 comment
pull request successfully merged
marco.tngl.sh
submitted
#0
1 commit
expand
collapse
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>
works like a charm, thank you for the contribution!