pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create a standard copy button component and remove a lot of redundant code

Browse Source
This commit is contained in:
Fornax
2024-02-20 17:33:15 +01:00
parent 47028f85b8
commit 99eba76c2e
12 changed files with 153 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
svelte/src/file_viewer/EmbedWindow.svelte
View File

@@ -1,6 +1,7 @@
<script>
import CopyButton from "../layout/CopyButton.svelte";
import ThemePicker from "../util/ThemePicker.svelte";
import { copy_text, domain_url } from "../util/Util.svelte";
import { domain_url } from "../util/Util.svelte";
import { file_type } from "./FileUtilities.svelte";
export let file = {
@@ -87,16 +88,6 @@ let html_escape = s => {
replace(/'/g, "&#039;");
}
let copy_status = "" // empty, success or error
const copy = () => {
if (copy_text(embed_html)) {
copy_status = "success"
} else {
copy_status = "error"
alert("Your browser does not support copying text.")
}
}
let example = false
const toggle_example = () => {
example = !example
@@ -177,16 +168,7 @@ const update_example = () => {
<div class="center">
<textarea bind:value={embed_html} style="width: 99%; height: 4em;"></textarea>
<br/>
<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
<i class="icon">content_copy</i>
{#if copy_status === "success"}
Copied!
{:else if copy_status === "error"}
Error!
{:else}
Copy HTML
{/if}
</button>
<CopyButton text={embed_html}>Copy HTML</CopyButton>
<button on:click={toggle_example} class:button_highlight={example}>
<i class="icon">visibility</i> Show example
</button>

43
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -1,6 +1,5 @@
<script>
import { onMount, tick } from "svelte";
import { copy_text } from "../util/Util.svelte";
import { file_struct, list_struct, file_set_href } from "./FileUtilities.svelte";
import Modal from "../util/Modal.svelte";
import DetailsWindow from "./DetailsWindow.svelte";
@@ -20,6 +19,7 @@ import TransferLimit from "./TransferLimit.svelte";
import ListStats from "./ListStats.svelte";
import ListUpdater from "./ListUpdater.svelte";
import HomeButton from "./HomeButton.svelte";
import CopyButton from "../layout/CopyButton.svelte";
let loading = true
let embedded = false
@@ -277,18 +277,6 @@ const apply_customizations = file => {
}
}
let copy_url_status = "" // empty, copied, or error
const copy_url = () => {
if (copy_text(window.location.href)) {
copy_url_status = "copied"
} else {
copy_url_status = "error"
alert("Your browser does not support copying text.")
}
setTimeout(() => { copy_url_status = "" }, 60000)
}
const grab_file = async () => {
if (!window.user_authenticated) {
return
@@ -313,6 +301,7 @@ const grab_file = async () => {
}
}
let copy_btn
const keyboard_event = evt => {
if (evt.ctrlKey || evt.altKey || evt.metaKey) {
return // prevent custom shortcuts from interfering with system shortcuts
@@ -355,7 +344,7 @@ const keyboard_event = evt => {
}
break
case "c": // C to copy to clipboard
copy_url()
copy_btn.copy()
break
case "i": // I to open the details window
details_window.toggle()
@@ -455,23 +444,9 @@ const keyboard_event = evt => {
</button>
{/if}
<button
on:click={copy_url}
class="toolbar_button"
class:button_highlight={copy_url_status === "copied"}
class:button_red={copy_url_status === "error"}
title="Copy a link to this page to your clipboard">
<i class="icon">content_copy</i>
<span>
{#if copy_url_status === "copied"}
Copied!
{:else if copy_url_status === "error"}
Error!
{:else}
<u>C</u>opy link
{/if}
</span>
</button>
<CopyButton bind:this={copy_btn} text={window.location.href} style="width: calc(100% - 6px)">
<u>C</u>opy link
</CopyButton>
{#if !disable_share_button}
<button
@@ -731,10 +706,8 @@ const keyboard_event = evt => {
}
.toolbar.toolbar_visible { left: 0; }
.toolbar_button {
text-align: left;
margin: 4px;
width: calc(100% - 8px);
.toolbar_button{
width: calc(100% - 6px);
}
.toolbar_button > span {
vertical-align: middle;

31
svelte/src/file_viewer/viewers/Torrent.svelte
View File

@@ -2,11 +2,11 @@
import { createEventDispatcher } from "svelte";
import Magnet from "../../icons/Magnet.svelte";
import { formatDate } from "../../util/Formatting.svelte"
import { copy_text } from "../../util/Util.svelte";
import IconBlock from "./IconBlock.svelte";
import TextBlock from "./TextBlock.svelte";
import TorrentItem from "./TorrentItem.svelte"
import FileTitle from "./FileTitle.svelte";
import CopyButton from "../../layout/CopyButton.svelte";
let dispatch = createEventDispatcher()
@@ -66,18 +66,6 @@ let torrent = {
}
let magnet = ""
let copy_magnet_status = "" // empty, copied, or error
const copy_magnet = () => {
if (copy_text(magnet)) {
copy_magnet_status = "copied"
} else {
copy_magnet_status = "error"
alert("Your browser does not support copying text.")
}
setTimeout(() => { copy_magnet_status = "" }, 60000)
}
</script>
<FileTitle title={file.name}/>
@@ -92,22 +80,7 @@ const copy_magnet = () => {
<Magnet/>
<span>Open magnet link</span>
</a>
<button
on:click={copy_magnet}
class:button_highlight={copy_magnet_status === "copied"}
class:button_red={copy_magnet_status === "error"}
>
<Magnet/>
<span>
{#if copy_magnet_status === ""}
Copy magnet link
{:else if copy_magnet_status === "copied"}
Copied magnet
{:else if copy_magnet_status === "error"}
Error!
{/if}
</span>
</button>
<CopyButton text={magnet}>Copy magnet link</CopyButton>
{:else if status === "too_large"}
<p>
Torrent file is too large to parse. Please download the file and

10
svelte/src/filesystem/DetailsWindow.svelte
View File

@@ -5,9 +5,9 @@ import Modal from "../util/Modal.svelte";
import { fs_timeseries } from "./FilesystemAPI";
import { fs_path_url } from "./FilesystemUtil";
import { generate_share_path, generate_share_url } from "./Sharebar.svelte";
import { color_by_name, copy_text } from "../util/Util.svelte";
import { color_by_name } from "../util/Util.svelte";
import { tick } from "svelte";
import Button from "../layout/Button.svelte";
import CopyButton from "../layout/CopyButton.svelte";
export let state
export let visible = false
@@ -176,7 +176,7 @@ let update_chart = async (base, timespan, interval) => {
<tr>
<td>Direct link</td>
<td>
<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(direct_url)}/>
<CopyButton text={direct_url}>Copy</CopyButton>
<a href="{direct_url}">{direct_url}</a>
</td>
</tr>
@@ -184,14 +184,14 @@ let update_chart = async (base, timespan, interval) => {
<tr>
<td>Sharing link</td>
<td>
<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(share_url)}/>
<CopyButton text={share_url}>Copy</CopyButton>
<a href="{share_url}">{share_url}</a>
</td>
</tr>
<tr>
<td>Direct sharing link</td>
<td>
<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(direct_share_url)}/>
<CopyButton text={direct_share_url}>Copy</CopyButton>
<a href="{direct_share_url}">{direct_share_url}</a>
</td>
</tr>

27
svelte/src/filesystem/edit_window/SharingOptions.svelte
View File

@@ -1,7 +1,7 @@
<script>
import { createEventDispatcher } from "svelte";
import { copy_text, domain_url } from "../../util/Util.svelte";
import Button from "../../layout/Button.svelte";
import { domain_url } from "../../util/Util.svelte";
import CopyButton from "../../layout/CopyButton.svelte";
let dispatch = createEventDispatcher()
export let shared
@@ -27,16 +27,6 @@ let embed_iframe = file => {
`></iframe>`
}
let copy_status = "" // empty, success or error
const copy = () => {
if (copy_text(embed_html)) {
copy_status = "success"
} else {
copy_status = "error"
alert("Your browser does not support copying text.")
}
}
let example = false
const toggle_example = () => {
if (is_shared) {
@@ -67,7 +57,7 @@ const toggle_example = () => {
{#if is_shared}
<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(share_link)}/>
<CopyButton text={share_link}>Copy</CopyButton>
{/if}
</div>
@@ -87,16 +77,7 @@ const toggle_example = () => {
<div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/>
<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
<i class="icon">content_copy</i>
{#if copy_status === "success"}
Copied!
{:else if copy_status === "error"}
Error!
{:else}
Copy HTML
{/if}
</button>
<CopyButton text={embed_html} label="Copy HTML"/>
<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example
</button>

31
svelte/src/filesystem/viewers/Torrent.svelte
View File

@@ -2,11 +2,11 @@
import { createEventDispatcher } from "svelte";
import Magnet from "../../icons/Magnet.svelte";
import { formatDate } from "../../util/Formatting.svelte"
import { copy_text } from "../../util/Util.svelte";
import TorrentItem from "./TorrentItem.svelte"
import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
import TextBlock from "../../file_viewer/viewers/TextBlock.svelte";
import { fs_node_icon, fs_path_url } from "../FilesystemUtil";
import CopyButton from "../../layout/CopyButton.svelte";
let dispatch = createEventDispatcher()
@@ -59,18 +59,6 @@ let torrent = {
}
let magnet = ""
let copy_magnet_status = "" // empty, copied, or error
const copy_magnet = () => {
if (copy_text(magnet)) {
copy_magnet_status = "copied"
} else {
copy_magnet_status = "error"
alert("Your browser does not support copying text.")
}
setTimeout(() => { copy_magnet_status = "" }, 60000)
}
</script>
<slot></slot>
@@ -87,22 +75,7 @@ const copy_magnet = () => {
<Magnet style=""/>
<span>Open magnet link</span>
</a>
<button
on:click={copy_magnet}
class:button_highlight={copy_magnet_status === "copied"}
class:button_red={copy_magnet_status === "error"}
>
<Magnet style=""/>
<span>
{#if copy_magnet_status === ""}
Copy magnet link
{:else if copy_magnet_status === "copied"}
Copied magnet
{:else if copy_magnet_status === "error"}
Error!
{/if}
</span>
</button>
<CopyButton text={magnet}>Copy magnet link</CopyButton>
{:else if status === "too_large"}
<p>
Torrent file is too large to parse. Please download the file and

173
svelte/src/home_page/UploadWidget.svelte
View File

@@ -1,6 +1,6 @@
<script>
import UploadProgressBar from "./UploadProgressBar.svelte"
import { copy_text, domain_url } from "../util/Util.svelte"
import { domain_url } from "../util/Util.svelte"
import { tick } from "svelte"
import Facebook from "../icons/Facebook.svelte"
import Reddit from "../icons/Reddit.svelte"
@@ -9,6 +9,7 @@ import Tumblr from "../icons/Tumblr.svelte"
import StorageProgressBar from "../user_home/StorageProgressBar.svelte"
import Konami from "../util/Konami.svelte"
import UploadStats from "./UploadStats.svelte";
import CopyButton from "../layout/CopyButton.svelte";
// === UPLOAD LOGIC ===
@@ -134,7 +135,7 @@ let btn_copy_links
let btn_copy_markdown
let btn_copy_bbcode
const uploads_finished = () => {
const uploads_finished = async () => {
let count = upload_queue.reduce(
(acc, curr) => curr.status === "finished" ? acc + 1 : acc, 0,
)
@@ -143,14 +144,17 @@ const uploads_finished = () => {
share_title = "Download " + upload_queue[0].name + " here"
share_link = domain_url() + "/u/" + upload_queue[0].id
} else if (count > 1) {
create_list(count+" files", true).then(resp => {
try {
const resp = await create_list(count+" files", true)
console.log("Automatic list ID " + resp.id)
share_title = "View a collection of "+count+" files here"
share_link = domain_url() + "/l/" + resp.id
}).catch(err => {
} catch (err) {
alert("Failed to generate link. Please check your internet connection and try again.\nError: " + err)
})
}
}
generate_link_list()
}
async function create_list(title, anonymous) {
@@ -182,19 +186,6 @@ async function create_list(title, anonymous) {
return await resp.json()
}
const copy_link = () => {
if (copy_text(share_link)) {
console.log('Text copied')
btn_copy_link.querySelector("span").textContent = "Copied!"
btn_copy_link.classList.add("button_highlight")
} else {
console.log('Copying not supported')
btn_copy_link.querySelector("span").textContent = "Failed"
btn_copy_link.classList.add("button_red")
alert("Your browser does not support copying text.")
}
}
let qr_visible = false
const open_link = () => window.open(share_link, "_blank")
const show_qr_code = () => qr_visible = !qr_visible
@@ -229,69 +220,35 @@ const get_finished_files = () => {
[],
)
}
const copy_links = () => {
let link_list = ""
let bbcode = ""
let markdown = ""
const generate_link_list = () => {
// Add the text to the textarea
let text = ""
link_list = ""
bbcode = ""
markdown = ""
let files = get_finished_files()
files.forEach(file => {
// Example: https://pixeldrain.com/u/abcd1234 Some_file.png
text += domain_url() + "/u/" + file.id + " " + file.name + "\n"
// Link list example: https://pixeldrain.com/u/abcd1234 Some_file.png
link_list += domain_url() + "/u/" + file.id + " " + file.name + "\n"
// BBCode example: [url=https://pixeldrain.com/u/abcd1234]Some_file.png[/url]
bbcode += "[url=" + domain_url() + "/u/" + file.id + "]" + file.name + "[/url]\n"
// Markdown example: * [Some_file.png](https://pixeldrain.com/u/abcd1234)
if (files.length > 1) {
markdown += " * "
}
markdown += "[" + file.name + "](" + domain_url() + "/u/" + file.id + ")\n"
})
if (share_link.includes("/l/")) {
text += "\n" + share_link + " All " + files.length + " files\n"
}
// Copy the selected text
if (copy_text(text)) {
btn_copy_links.classList.add("button_highlight")
btn_copy_links.innerHTML = "Links copied to clipboard!"
} else {
btn_copy_links.classList.add("button_red")
btn_copy_links.innerHTML = "Copying links failed"
}
}
const copy_bbcode = () => {
// Add the text to the textarea
let text = ""
let files = get_finished_files()
files.forEach(file => {
// Example: [url=https://pixeldrain.com/u/abcd1234]Some_file.png[/url]
text += "[url=" + domain_url() + "/u/" + file.id + "]" + file.name + "[/url]\n"
})
if (share_link.includes("/l/")) {
text += "\n[url=" + share_link + "]All " + files.length + " files[/url]\n"
}
// Copy the selected text
if (copy_text(text)) {
btn_copy_bbcode.classList.add("button_highlight")
btn_copy_bbcode.innerHTML = "BBCode copied to clipboard!"
} else {
btn_copy_bbcode.classList.add("button_red")
btn_copy_bbcode.innerHTML = "Copying links failed"
}
}
const copy_markdown = () => {
// Add the text to the textarea
let text = ""
let files = get_finished_files()
files.forEach(file => {
// Example: * [Some_file.png](https://pixeldrain.com/u/abcd1234)
if (files.length > 1) { text += " * " }
text += "[" + file.name + "](" + domain_url() + "/u/" + file.id + ")\n"
})
if (share_link.includes("/l/")) {
text += " * [All " + files.length + " files](" + share_link + ")\n"
}
// Copy the selected text
if (copy_text(text)) {
btn_copy_markdown.classList.add("button_highlight")
btn_copy_markdown.innerHTML = "Markdown copied to clipboard!"
} else {
btn_copy_markdown.classList.add("button_red")
btn_copy_markdown.innerHTML = "Copying links failed"
link_list += "\n" + share_link + " All " + files.length + " files\n"
bbcode += "\n[url=" + share_link + "]All " + files.length + " files[/url]\n"
markdown += " * [All " + files.length + " files](" + share_link + ")\n"
}
}
@@ -305,7 +262,7 @@ const keydown = (e) => {
switch (e.key) {
case "u": file_input_field.click(); break
case "t": btn_upload_text.click(); break
case "c": btn_copy_link.click(); break
case "c": btn_copy_link.copy(); break
case "o": btn_open_link.click(); break
case "q": btn_show_qr.click(); break
case "l": btn_create_list.click(); break
@@ -314,9 +271,9 @@ const keydown = (e) => {
case "f": btn_share_facebook.click(); break
case "r": btn_share_reddit.click(); break
case "m": btn_share_tumblr.click(); break
case "a": btn_copy_links.click(); break
case "d": btn_copy_markdown.click(); break
case "b": btn_copy_bbcode.click(); break
case "a": btn_copy_links.copy(); break
case "d": btn_copy_markdown.copy(); break
case "b": btn_copy_bbcode.copy(); break
}
}
@@ -408,38 +365,35 @@ const keydown = (e) => {
Share
</button>
</div>
<button bind:this={btn_copy_link} on:click={copy_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">content_copy</i><br/>
<span><u>C</u>opy link</span>
</button>
<CopyButton bind:this={btn_copy_link} text={share_link} large_icon><u>C</u>opy link</CopyButton>
<button bind:this={btn_open_link} on:click={open_link} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">open_in_new</i><br/>
<i class="icon">open_in_new</i>
<span><u>O</u>pen link</span>
</button>
<button bind:this={btn_show_qr} on:click={show_qr_code} class="social_buttons" disabled={state !== "finished"} class:button_highlight={qr_visible}>
<i class="icon">qr_code</i><br/>
<i class="icon">qr_code</i>
<span><u>Q</u>R code</span>
</button>
<div class="social_buttons" class:hide={navigator_share}>
<div style="display: inline-block;" class:hide={navigator_share}>
<button bind:this={btn_share_email} on:click={share_mail} class="social_buttons" disabled={state !== "finished"}>
<i class="icon">email</i><br/>
<u>E</u>-Mail
<i class="icon">email</i>
<span><u>E</u>-Mail</span>
</button>
<button bind:this={btn_share_twitter} on:click={share_twitter} class="social_buttons" disabled={state !== "finished"}>
<Twitter style="width: 40px; height: 40px; margin: 5px 15px;"></Twitter><br/>
T<u>w</u>itter
<Twitter style="width: 40px; height: 40px;"></Twitter>
<span>T<u>w</u>itter</span>
</button>
<button bind:this={btn_share_facebook} on:click={share_facebook} class="social_buttons" disabled={state !== "finished"}>
<Facebook style="width: 40px; height: 40px; margin: 5px 15px;"></Facebook><br/>
<u>F</u>acebook
<Facebook style="width: 40px; height: 40px;"></Facebook>
<span><u>F</u>acebook</span>
</button>
<button bind:this={btn_share_reddit} on:click={share_reddit} class="social_buttons" disabled={state !== "finished"}>
<Reddit style="width: 40px; height: 40px; margin: 5px 15px;"></Reddit><br/>
<u>R</u>eddit
<Reddit style="width: 40px; height: 40px;"></Reddit>
<span><u>R</u>eddit</span>
</button>
<button bind:this={btn_share_tumblr} on:click={share_tumblr} class="social_buttons" disabled={state !== "finished"}>
<Tumblr style="width: 40px; height: 40px; margin: 5px 15px;"></Tumblr><br/>
Tu<u>m</u>blr
<Tumblr style="width: 40px; height: 40px;"></Tumblr>
<span>Tu<u>m</u>blr</span>
</button>
</div>
<br/>
@@ -447,18 +401,10 @@ const keydown = (e) => {
<img src="/api/misc/qr?text={encodeURIComponent(share_link)}" alt="QR code" style="width: 300px; max-width: 100%;">
<br/>
{/if}
<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
<i class="icon">content_copy</i>
<span>Copy <u>a</u>ll links to clipboard</span>
</button>
<button bind:this={btn_copy_markdown} on:click={copy_markdown} disabled={state !== "finished"}>
<i class="icon">content_copy</i>
<span>Copy mark<u>d</u>own to clipboard</span>
</button>
<button bind:this={btn_copy_bbcode} on:click={copy_bbcode} disabled={state !== "finished"}>
<i class="icon">content_copy</i>
<span>Copy <u>B</u>BCode to clipboard</span>
</button>
<CopyButton bind:this={btn_copy_links} text={link_list}>Copy <u>a</u>ll links to clipboard</CopyButton>
<CopyButton bind:this={btn_copy_markdown} text={markdown}>Copy mark<u>d</u>own to clipboard</CopyButton>
<CopyButton bind:this={btn_copy_bbcode} text={bbcode}>Copy <u>B</u>BCode to clipboard</CopyButton>
<br/>
{#if window.user.subscription.name === ""}
@@ -498,7 +444,7 @@ const keydown = (e) => {
width: 40%;
min-width: 300px;
max-width: 400px;
margin: 10px !important;
margin: 10px;
border-radius: 32px;
font-size: 1.8em;
justify-content: center;
@@ -537,8 +483,8 @@ const keydown = (e) => {
}
.social_buttons {
margin: 5px;
display: inline-block
flex-direction: column;
min-width: 5em;
}
.social_buttons.hide {
display: none;
@@ -546,9 +492,6 @@ const keydown = (e) => {
.social_buttons > .icon {
font-size: 40px;
display: inline-block;
width: 40px;
height: 40px;
margin: 5px 15px;
}
.hide {
display: none;

58
svelte/src/layout/CopyButton.svelte Normal file
View File

@@ -0,0 +1,58 @@
<script>
import { copy_text } from "../util/Util.svelte";
export let text = ""
export let style = ""
export let large_icon = false
let failed = false
let success = false
// Exported so it can be called manually
export const copy = () => {
try {
copy_text(text)
success = true
} catch (err) {
console.error("Failed to copy text", err)
failed = true
}
setTimeout(() => {
success = false
failed = false
}, 10000)
}
</script>
<button
on:click={copy}
style={style}
class="button"
class:button_highlight={success}
class:button_red={failed}
class:large_icon
title="Copy text to clipboard"
disabled={text === ""}
>
<i class="icon">content_copy</i>
<span>
{#if success}
Copied!
{:else if failed}
Copy failed
{:else}
<slot></slot>
{/if}
</span>
</button>
<style>
.large_icon {
flex-direction: column;
min-width: 5em;
}
.large_icon>.icon {
font-size: 40px;
display: block;
}
</style>

4
svelte/src/speedtest/Index.svelte
View File

@@ -20,9 +20,9 @@ import Speedtest from "./Speedtest.svelte";
</p>
<p>
The speed measured is the maximum speed reached for two continuous
seconds during the test. The normal test has a time limit of 15
seconds during the test. The normal test has a time limit of 12
seconds and the long test 30 seconds. When the maximum speed has not
changed for a third of the test duration (5 or 10 seconds) the test
changed for a third of the test duration (4 or 10 seconds) the test
will end and the result will be final. The long test will use much
more bandwidth, so if you're on a cap it's recommended to use the
normal test.

12
svelte/src/speedtest/Speedtest.svelte
View File

@@ -3,7 +3,7 @@ import { onMount } from "svelte";
import Button from "../layout/Button.svelte";
import { formatDataVolume, formatDataVolumeBits } from "../util/Formatting.svelte";
import ProgressBar from "../util/ProgressBar.svelte";
import { copy_text } from "../util/Util.svelte";
import CopyButton from "../layout/CopyButton.svelte";
let running = false
let data_received = 0
@@ -161,15 +161,9 @@ onMount(() => {
<section class="highlight_border">
<div style="text-align: center">
<Button icon="speed" label="Start test" click={() => start(15000)} disabled={running} highlight={!running}/>
<Button icon="speed" label="Start test" click={() => start(12000)} disabled={running} highlight={!running}/>
<Button icon="speed" label="Long test" click={() => start(30000)} disabled={running}/>
<Button
highlight_on_click
disabled={result_link === ""}
icon="content_copy"
label="Copy test result"
click={e => copy_text(result_link)}
/>
<CopyButton text={result_link}>Copy test result</CopyButton>
</div>
<!-- This progress bar shows either the progress for the test duration, or

18
svelte/src/user_home/ConnectApp.svelte
View File

@@ -1,7 +1,7 @@
<script>
import { onMount } from "svelte";
import LoadingIndicator from "../util/LoadingIndicator.svelte";
import { copy_text } from "../util/Util.svelte";
import CopyButton from "../layout/CopyButton.svelte";
let loading = false
let app_name = ""
@@ -31,13 +31,6 @@ const create_key = async () => {
}
}
let copied = false
const copy_key = () => {
if (copy_text(api_key)) {
copied = true
}
}
let show_key = ""
const toggle_show_key = () => {
if (show_key === "") {
@@ -109,14 +102,7 @@ onMount(() => {
<h4>Key created</h4>
<div class="copy_container">
<button on:click={copy_key} class="copy_button" class:button_highlight={copied}>
<i class="icon">content_copy</i>
{#if copied}
Copied!
{:else}
Copy key to clipboard
{/if}
</button>
<CopyButton text={api_key}>Copy key to clipboard</CopyButton>
<button on:click={toggle_show_key} class="copy_button" class:button_highlight={show_key !== ""}>
<i class="icon">visibility</i>
{#if show_key === ""}

19
svelte/src/util/Util.svelte
View File

@@ -12,19 +12,12 @@ export function print_date(date, hours, minutes, seconds) {
}
export function copy_text(text) {
// Create a textarea to copy the text from
let ta = document.createElement("textarea");
ta.setAttribute("readonly", "readonly")
ta.style.position = "absolute";
ta.style.left = "-9999px";
ta.value = text; // Put the text in the textarea
// Add the textarea to the DOM so it can be seleted by the user
document.body.appendChild(ta);
ta.select() // Select the contents of the textarea
let success = document.execCommand("copy"); // Copy the selected text
document.body.removeChild(ta); // Remove the textarea
return success;
try {
navigator.clipboard.writeText(text)
} catch (err) {
return false
}
return true;
}
export function domain_url() {