You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.0 KiB
Svelte
111 lines
2.0 KiB
Svelte
<script>
|
|
import {
|
|
title,
|
|
heading,
|
|
subtitle,
|
|
content,
|
|
date,
|
|
address,
|
|
organizedBy,
|
|
colabs,
|
|
canvas
|
|
} from '$lib/stores/store';
|
|
|
|
/** @type {HTMLInputElement} */ let fileinput;
|
|
|
|
const onFileSelected = (/** @type {Event} */ e) => {
|
|
let image = e.target.files[0];
|
|
let reader = new FileReader();
|
|
reader.readAsDataURL(image);
|
|
reader.onload = (e) => {
|
|
$colabs = [...$colabs, { image: e.target.result, text: '' }];
|
|
};
|
|
};
|
|
|
|
const removecolabs = (/** @type {number} */ index) => {
|
|
if (index > -1) {
|
|
$colabs.splice(index, 1);
|
|
$colabs = $colabs;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div class="colabs">
|
|
{#if $colabs[0]}
|
|
{#each $colabs as organization, i}
|
|
<div class="organization">
|
|
<div
|
|
class="remove"
|
|
on:click|preventDefault={() => {
|
|
removecolabs(i);
|
|
}}
|
|
>
|
|
x
|
|
</div>
|
|
<img class="organized-logo" src={organization.image} alt={organization.text} />
|
|
<input class="logo-title" type="text" bind:value={organization.text} />
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
|
|
<button
|
|
on:click|preventDefault={() => {
|
|
fileinput.click();
|
|
}}>Añadir logo</button
|
|
>
|
|
<input
|
|
style="display:none;"
|
|
type="file"
|
|
accept=".jpg, .jpeg, .png"
|
|
on:change={(e) => onFileSelected(e)}
|
|
bind:this={fileinput}
|
|
/>
|
|
|
|
<style>
|
|
.colabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, min-content);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.organization {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: min-content min-content;
|
|
grid-gap: 0.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 1rem;
|
|
background-color: #ddd;
|
|
padding: 0.25rem;
|
|
}
|
|
.organized-logo {
|
|
max-height: 64px;
|
|
max-width: 100px;
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.remove {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -0.25rem;
|
|
color: red;
|
|
cursor: pointer;
|
|
background-color: white;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
input {
|
|
display: block;
|
|
max-width: 100px;
|
|
}
|
|
button {
|
|
display: block;
|
|
padding: 0.5rem;
|
|
cursor: pointer;
|
|
margin: 1rem;
|
|
}
|
|
</style>
|