mirrors/tiddlypwa
1
Fork 0
mirror of https://codeberg.org/valpackett/tiddlypwa.git synced 2026-04-27 08:10:44 -07:00
Code Issues Projects Releases Packages Wiki Activity

Docs: redo the form in JS to allow onsubmit handling and add recent list

Browse source
This commit is contained in:
Val Packett 2023-07-23 23:17:37 -03:00
parent 97a7b8ca63
commit 6ea7ebb185
3 changed files with 78 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
tiddlers/TiddlyPWA.tid
View file

@ -18,10 +18,7 @@ with ''encrypted'' local persistent storage and efficient ''synchronization'' wi
<div class="tpwadoc-card tpwadoc-card-try">
<div class="tpwadoc-title">Try It Out – Right Here, Right Now</div>
<div class="tpwadoc-subtitle">You can have multiple local on-device wikis when running from here. Pick a name and go!</div>
<div class="tpwadoc-goto">
<$edit-text tiddler="$:/temp/WikiToGoTo" tag="input" />
<$let wiki={{$:/temp/WikiToGoTo}}><a href=`/w/$(wiki)$/app.html`>Go!</a></$let>
</div>
<$goto-form/>
</div>
<div class="tpwadoc-row">

9
tiddlers/doc.css
View file

@ -31,5 +31,10 @@ Licensed under 0BSD, see license.tid.
.tpwadoc-card-glitch {--bg:#ff7698;}
.tpwadoc-card-diy {--bg:#eaeaea;}
.tpwadoc-card-try input, .tpwadoc-card-try a { padding: .5em; border-radius: 4px; background: #ffedda; color: #333; border: 1px solid #49411f; margin-top: 0.5rem; }
.tpwadoc-card-try a:hover { background: #f0e0d0; }
.tpwadoc-card-try input, .tpwadoc-card-try button { margin: 0 .25em; padding: .5em; border-radius: 4px; background: #ffedda; color: #333; border: 1px solid #49411f; margin-top: 0.5rem; }
.tpwadoc-card-try button:hover { background: #f0e0d0; }
.tpwadoc-card-try form div { line-height: 2.5; margin-top: .5em; }
.tpwa-visited-wiki { display: inline-block; vertical-align: baseline; padding: .2em .5em; margin: 0 .25em; line-height: 1; border-radius: 6px; background: color-mix(in srgb, var(--bg) 80%, #cacaca); }
.tpwa-visited-wiki:hover { background: color-mix(in srgb, var(--bg) 90%, #444); }
.tpwa-visited-wiki button { padding: 0.15em 0.35em; margin: 0 0 0 .5em; border: none; vertical-align: baseline; border-radius: 3px; background: none; }
.tpwa-visited-wiki button:hover { background: color-mix(in srgb, var(--bg) 90%, #ff0000); }

70
tiddlers/goto.js Normal file
View file

@ -0,0 +1,70 @@
/*\
title: $:/goto.js
type: application/javascript
module-type: widget
Licensed under 0BSD, see license.tid.
Formatted with `deno fmt`.
\*/
/// <reference types="npm:tw5-typed" />
(function () {
'use strict';
if (!$tw.browser) return;
const Widget = require('$:/core/modules/widgets/widget.js').widget;
exports['goto-form'] = class extends Widget {
#parent;
render(parent, nextSibling) {
this.computeAttributes();
if (parent) this.#parent = parent;
const form = this.document.createElement('form');
const input = this.document.createElement('input');
input.placeholder = 'test';
form.appendChild(input);
const button = this.document.createElement('button');
button.textContent = 'Go!';
form.appendChild(button);
let visited = localStorage.visitedWikis?.split(',') || [];
if (visited.length > 0) {
const vdiv = this.document.createElement('div');
vdiv.textContent = 'Recently visited: ';
for (const slug of visited) {
const wlink = this.document.createElement('a');
wlink.className = 'tpwa-visited-wiki';
wlink.href = `/w/${slug}/app.html`;
wlink.textContent = decodeURIComponent(slug);
const del = this.document.createElement('button');
del.textContent = '✗';
del.onclick = (e) => {
e.stopPropagation();
e.preventDefault();
visited = visited.filter((x) => x !== slug);
localStorage.visitedWikis = visited;
vdiv.removeChild(wlink);
};
wlink.appendChild(del);
vdiv.appendChild(wlink);
}
form.appendChild(vdiv);
}
form.onsubmit = (e) => {
e.preventDefault();
if (input.value.length < 1) input.value = 'test';
const slug = encodeURIComponent(input.value);
if (!visited.find((x) => x === slug)) {
visited.push(slug);
localStorage.visitedWikis = visited;
}
location.href = `/w/${slug}/app.html`;
};
this.#parent.insertBefore(form, nextSibling);
this.domNodes.push(form);
}
refresh(_chg) {
return false;
}
};
})();