57 lines
1.4 KiB
Svelte
57 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import AddButton from "./add_button.svelte";
|
|
|
|
let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
|
|
let files = $state();
|
|
let img_src = $state();
|
|
|
|
function load_image(img: File) {
|
|
const reader = new FileReader();
|
|
reader.addEventListener("load", function () {
|
|
img_src = reader.result;
|
|
});
|
|
reader.readAsDataURL(img);
|
|
}
|
|
|
|
$effect(() => {
|
|
if (files && files.length > 0) {
|
|
image = files[0];
|
|
files = [];
|
|
} else {
|
|
if (image) load_image(image);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="{direction} input img-div {shape}" style="background-image: url('{img_src}')">
|
|
<AddButton type="image" bind:files/>
|
|
</div>
|
|
|
|
<style>
|
|
/* Вертикальное изображение */
|
|
.vertical {
|
|
aspect-ratio: 11 / 16;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Горизонтальное изображение */
|
|
.horisontal {
|
|
aspect-ratio: 16 / 11;
|
|
padding: 0;
|
|
}
|
|
|
|
:global(.img-div) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
align-content: center;
|
|
text-align: center;
|
|
width: 11rem;
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
:global(.img-div + .img-div) {
|
|
margin-left: 1rem !important;
|
|
}
|
|
</style>
|