78 lines
2.4 KiB
Svelte
78 lines
2.4 KiB
Svelte
<script>
|
|
import Icon from "../../common/Icon.svelte";
|
|
|
|
import { createEventDispatcher, getContext } from "svelte";
|
|
import Preview from "../../files/Preview.svelte";
|
|
import Dropdown from "../../common/Dropdown.svelte";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
const channel = getContext("channel");
|
|
export let file;
|
|
export let hasDelete = false;
|
|
export let hasInsert = false;
|
|
|
|
let imagePresets = Object.keys(channel.imageFilters);
|
|
|
|
function remove(e) {
|
|
e.preventDefault();
|
|
dispatch("remove_file", file.id);
|
|
}
|
|
|
|
function insert(e, preset) {
|
|
e.preventDefault();
|
|
// let html = htmlurl(channel, record, preset);
|
|
// let url = !preset
|
|
// ? `/${record._file.path}`
|
|
// : `/templates/${preset}/${record._file.path}`;
|
|
// dispatch("editor-insert", {
|
|
// html: html,
|
|
// url: channel.filesUrl + url,
|
|
// originalUrl: channel.filesUrl + "/" + record._file.path,
|
|
// record: record,
|
|
// });
|
|
}
|
|
</script>
|
|
|
|
<div class="preview-file">
|
|
<div style="display: flex;align-items: center;gap: 10px;">
|
|
<div class="image">
|
|
<Preview {file} size="small" />
|
|
</div>
|
|
<div class="title">
|
|
<div>
|
|
{file.filename}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="display: flex;gap:4px; align-items: center; margin-right: 10px;"
|
|
>
|
|
{#if hasInsert}
|
|
<div class="reference-action">
|
|
<Dropdown>
|
|
<div slot="button">
|
|
<Icon icon="photo-film" />
|
|
</div>
|
|
<button
|
|
class="dropdown-item button"
|
|
on:click={(e) => insert(e, null)}>original</button
|
|
>
|
|
{#each imagePresets as preset}
|
|
<button
|
|
class="dropdown-item button"
|
|
on:click={(e) => insert(e, preset)}>{preset}</button
|
|
>
|
|
{/each}
|
|
</Dropdown>
|
|
</div>
|
|
{/if}
|
|
{#if hasDelete}
|
|
<div class="reference-action">
|
|
<button class="button" on:click={remove}>
|
|
<Icon icon="trash-can" />
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|