76 lines
1.8 KiB
Svelte
76 lines
1.8 KiB
Svelte
|
<script>
|
||
|
|
import { copy_text, domain_url } from "../util/Util.svelte";
|
||
|
|
|
||
|
|
|
||
|
|
export let file = {
|
||
|
|
id: "",
|
||
|
|
}
|
||
|
|
export let list = {
|
||
|
|
id: "",
|
||
|
|
}
|
||
|
|
|
||
|
|
let embed_html = ""
|
||
|
|
let preview_area
|
||
|
|
|
||
|
|
$: update_file(file.id, list.id)
|
||
|
|
let update_file = () => {
|
||
|
|
let url
|
||
|
|
if (list.id === "") {
|
||
|
|
// Not a list, use file ID
|
||
|
|
url = domain_url()+"/u/"+file.id+"?embed"
|
||
|
|
} else {
|
||
|
|
url = domain_url()+"/l/"+list.id+"?embed"
|
||
|
|
}
|
||
|
|
|
||
|
|
embed_html = `<iframe ` +
|
||
|
|
`src="${url}" ` +
|
||
|
|
`style="border: none; width: 800px; max-width: 100%; height: 500px; border-radius: 16px;"` +
|
||
|
|
`></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.")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const example = () => {
|
||
|
|
preview_area.innerHTML = embed_html
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
You can embed pixeldrain's file viewer in your own web pages. We
|
||
|
|
have created a special HTML code which renders a minimalistic
|
||
|
|
version of the file viewer where the title bar is a bit thinner and
|
||
|
|
the toolbar is collapsed by default.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Unless it was uploaded using a pixeldrain Pro account the embedded
|
||
|
|
file will also show advertisements.
|
||
|
|
</p>
|
||
|
|
<h3>Code</h3>
|
||
|
|
<textarea bind:value={embed_html} style="width: 100%; height: 4em; margin: 0;"></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>
|
||
|
|
<button on:click={example}>
|
||
|
|
<i class="icon">visibility</i> Show example
|
||
|
|
</button>
|
||
|
|
<h3>Example</h3>
|
||
|
|
<div bind:this={preview_area} style="text-align: center;"></div>
|
||
|
|
</div>
|