Miroirs/waforth
1
0
Fork 0
mirror of https://github.com/remko/waforth synced 2024-12-26 09:59:09 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

thurtle: Add copy button

Browse source
This commit is contained in:
Remko Tronçon 2024-01-20 16:32:56 +01:00
parent 88daa57838
commit 1090cd12ee
2 changed files with 73 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/web/thurtle/thurtle.css
View file

@ -64,3 +64,7 @@ label {
.right-pane {
flex: 2;
}
.copy-url-btn {
border: thin solid rgb(206, 212, 218) !important;
}

76
src/web/thurtle/thurtle.tsx
View file

@ -76,6 +76,46 @@ function About() {
const editor = new Editor();
const clipboardIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi"
viewBox="0 0 16 16"
>
<path
xmlns="http://www.w3.org/2000/svg"
d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"
/>
</svg>
);
const clipboardCheckIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi"
viewBox="0 0 16 16"
>
<path
xmlns="http://www.w3.org/2000/svg"
d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5z"
/>
<path
xmlns="http://www.w3.org/2000/svg"
d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708"
/>
</svg>
);
const rootEl = (
<div class={"root" + (qs.sn === "0" ? " no-nav" : "")}>
<nav class="navbar navbar-light bg-light">
@ -353,13 +393,23 @@ const rootEl = (
</div>
<div class="modal-body">
<p>Share URL</p>
<input
data-hook="url"
onClick={selectShareURL}
type="text"
readOnly={true}
class="form-control"
/>
<div class="input-group">
<input
data-hook="url"
onClick={selectShareURL}
type="text"
readOnly={true}
class="form-control"
/>
<button
data-hook="copy-url"
onclick={copyURL}
class="btn btn-outline-secondary copy-url-btn"
type="button"
>
{clipboardIcon}
</button>
</div>
</div>
<div class="modal-footer">
<button
@ -416,6 +466,9 @@ const savingModal = new bootstrap.Modal(
const shareModalURLEl = rootEl.querySelector(
"[data-hook=share-modal] [data-hook=url]"
) as HTMLInputElement;
const shareModalCopyButtonEl = rootEl.querySelector(
"button[data-hook=copy-url]"
)! as HTMLButtonElement;
const worldEl = rootEl.querySelector("[data-hook=world]") as SVGSVGElement;
//////////////////////////////////////////////////////////////////////////////////////////
@ -563,6 +616,15 @@ function selectShareURL() {
shareModalURLEl.scrollLeft = 0;
}
async function copyURL(ev: MouseEvent) {
ev.preventDefault();
await navigator.clipboard.writeText(shareModalURLEl.value);
shareModalCopyButtonEl.replaceChildren(clipboardCheckIcon);
window.setTimeout(() => {
shareModalCopyButtonEl.replaceChildren(clipboardIcon);
}, 1000);
}
shareModalEl.addEventListener("shown.bs.modal", () => {
selectShareURL();
});