Add line wrap toggle for editor and paste viewer (#130)
Shared client-side preference in localStorage 'palette-wrap', default off. Toggle button on /new editor head and paste title bar, plus a Line wrap checkbox in the settings menu; all read/write the same preference. Active state uses the accent treatment like other toggles. No em dashes in UI text.
This commit is contained in:
@@ -46,6 +46,37 @@
|
||||
// do not persist anything here: URL theme is a one-off override
|
||||
document.documentElement.dataset.preset = dark ? PAIRS[t].dark : PAIRS[t].light;
|
||||
})();
|
||||
// #130: shared line wrap preference (localStorage 'palette-wrap', default off)
|
||||
(function () {
|
||||
function wrapOn() {
|
||||
try { return localStorage.getItem('palette-wrap') === '1'; } catch (e) { return false; }
|
||||
}
|
||||
function wrapApply(on) {
|
||||
if (on) document.documentElement.setAttribute('data-wrap', '1');
|
||||
else document.documentElement.removeAttribute('data-wrap');
|
||||
document.querySelectorAll('.wrap-toggle').forEach(function (b) {
|
||||
b.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
});
|
||||
var s = document.getElementById('wrap-setting');
|
||||
if (s) s.checked = on;
|
||||
}
|
||||
window.paletteWrapToggle = function () {
|
||||
var on = !wrapOn();
|
||||
try { localStorage.setItem('palette-wrap', on ? '1' : '0'); } catch (e) {}
|
||||
wrapApply(on);
|
||||
return on;
|
||||
};
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
wrapApply(wrapOn());
|
||||
document.querySelectorAll('.wrap-toggle').forEach(function (b) {
|
||||
b.addEventListener('click', function () { window.paletteWrapToggle(); });
|
||||
});
|
||||
var s = document.getElementById('wrap-setting');
|
||||
if (s) s.addEventListener('change', function () {
|
||||
if (s.checked !== wrapOn()) window.paletteWrapToggle();
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<option>markdown</option><option>text</option>
|
||||
</select>
|
||||
<button class="btn btn-icon" id="reguess" title="Re-detect language" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg></button>
|
||||
<button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float editor-wrap">
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<h1>{{if .Title}}{{.Title}}{{else}}Untitled paste{{end}}</h1>
|
||||
{{if .CustomSlug}}<span class="slug">/{{.CustomSlug}}</span>{{end}}
|
||||
<div class="spacer"></div>
|
||||
<button type="button" class="iconbtn wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
|
||||
<a class="iconbtn" href="/raw/{{.ID}}">raw</a>
|
||||
<a class="iconbtn" href="#" id="copy-btn" onclick="copyContent(this); return false;">copy</a>
|
||||
{{if .DeletionToken}}<a class="iconbtn danger" href="#" onclick="redeem('{{.DeletionToken}}'); return false;">delete</a>{{end}}
|
||||
|
||||
@@ -13,6 +13,8 @@
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||||
<span>Dark mode</span>
|
||||
</button>
|
||||
<h3 style="margin-top:18px">Editor</h3>
|
||||
<label class="toggle" for="wrap-setting" style="display:inline-flex"><input type="checkbox" id="wrap-setting"> Line wrap</label>
|
||||
<p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user