brobert
/
carteles
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

colabs (#3)

Browse Source 
Co-authored-by: Borja Robert <borja@brobert.net>
Reviewed-on: #3
pull/4/head
brobert 2 years ago
parent 41afe44c51
commit 9c70564063
6 changed files with 211 additions and 30 deletions
Show Stats Download Patch File Download Diff File

110
src/lib/form/Colabs.svelte
Unescape Escape View File

@ -0,0 +1,110 @@
<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>

20
src/lib/form/Form.svelte
Unescape Escape View File

@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import html2canvas from 'html2canvas';
import Organized from '$lib/form/Organized.svelte';
import Colabs from './Colabs.svelte';
import {
title,
heading,
@ -10,7 +11,7 @@
date,
address,
organizedBy,
collabs,
colabs,
canvas
} from '$lib/stores/store';
@ -26,12 +27,14 @@
console.log('no hay editor');
return;
}
$content = editor.firstChild.innerHTML;
if (editor && editor.firstChild !== null) {
$content = editor.firstChild.innerHTML;
}
};
const downloadCanvas = async () => {
if ($canvas !== undefined) {
const res = await html2canvas($canvas);
const res = await html2canvas($canvas, { backgroundColor: '#fffffff' });
const image = await res.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'cartel.png';
@ -95,6 +98,8 @@
<div class="form-group">
<label for="organizedBy">Organiza:</label>
<Organized />
<label for="colabs">Colabora:</label>
<Colabs />
</div>
</form>
<button on:click|preventDefault={downloadCanvas}>Descargar</button>
@ -134,13 +139,4 @@
font-size: 1.1rem;
cursor: pointer;
}
.upload {
max-width: 48px;
cursor: pointer;
}
.chan {
cursor: pointer;
}
</style>

19
src/lib/form/Organized.svelte
Unescape Escape View File

@ -7,13 +7,13 @@
date,
address,
organizedBy,
collabs,
colabs,
canvas
} from '$lib/stores/store';
let fileinput, avatar;
/** @type {HTMLInputElement} */ let fileinput;
const onFileSelected = (e) => {
const onFileSelected = (/** @type {Event} */ e) => {
let image = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(image);
@ -22,7 +22,7 @@
};
};
const removeOrganizer = (index) => {
const removeOrganizer = (/** @type {number} */ index) => {
if (index > -1) {
$organizedBy.splice(index, 1);
$organizedBy = $organizedBy;
@ -65,7 +65,7 @@
<style>
.organized-by {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(5, min-content);
align-items: center;
justify-content: center;
}
@ -77,19 +77,24 @@
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: 0px;
right: 0px;
top: -4px;
right: -0.25rem;
color: red;
cursor: pointer;
background-color: white;
padding: 0 0.25rem;
}
input {
display: block;

89
src/lib/preview/Preview.svelte
Unescape Escape View File

@ -8,12 +8,13 @@
content,
heading,
organizedBy,
colabs,
canvas
} from '$lib/stores/store';
let newdate = '';
/** @type {Object<string,string>} */ let newdate = {};
const convertDateTime = (datetime) => {
const convertDateTime = (/** @type {string | undefined} */ datetime) => {
if (datetime == undefined) {
return {
date: '',
@ -41,15 +42,48 @@
<div class="title">{$title}</div>
<div class="subtitle">{$subtitle}</div>
<div class="content">{@html $content}</div>
{#if newdate}<div class="date">{newdate.date}</div>{/if}
{#if newdate}<div class="time">{newdate.time}</div>{/if}
{#if newdate.date}<div class="date">{newdate.date}</div>{/if}
{#if newdate.time}<div class="time">{newdate.time}</div>{/if}
<div class="address">{$address}</div>
{#if $organizedBy[0]}
{#if $organizedBy[0] && $colabs[0]}
<div class="orgcolab">
<div class="org">Organiza:</div>
<div class="colab">Colabora:</div>
<div class="orgmixed">
{#each $organizedBy as organization, i}
<div class="organization">
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
</div>
{/each}
</div>
<div class="colabmixed">
{#each $colabs as organization, i}
<div class="organization">
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
</div>
{/each}
</div>
</div>
{/if}
{#if $organizedBy[0] && !$colabs[0]}
<div class="imagetitle">Organiza:</div>
<div class="organized-by">
{#each $organizedBy as organization, i}
<div class="organization">
<img src={organization.image} />
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
</div>
{/each}
</div>
{/if}
{#if $colabs[0] && !$organizedBy[0]}
<div class="imagetitle">Colabora:</div>
<div class="organized-by">
{#each $colabs as organization, i}
<div class="organization">
<img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div>
</div>
{/each}
@ -77,8 +111,7 @@
background-size: contain;
position: relative;
padding: 1rem;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
border-radius: 0.5rem;
/* border-radius: 0.5rem; */
}
.heading {
@ -204,7 +237,7 @@
max-width: 100%; */
}
.organization img {
max-height: 64px;
max-height: 48px;
max-width: 100px;
margin: 0 auto;
opacity: 75%;
@ -216,4 +249,42 @@
font-family: monospace;
color: #666;
}
.orgcolab {
position: absolute;
top: 710px;
height: 7rem;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 1fr;
grid-gap: 0.25rem;
justify-content: start;
align-items: center;
width: 100%;
}
.org {
grid-row: 1/2;
grid-column: 1/2;
font-size: 0.8rem;
}
.colab {
font-size: 0.8rem;
grid-row: 1/2;
grid-column: 2/3;
}
.orgmixed {
grid-row: 2/3;
grid-column: 1/2;
display: flex;
}
.colabmixed {
grid-row: 2/3;
grid-column: 2/3;
display: flex;
}
</style>

2
src/lib/stores/store.js
Unescape Escape View File

@ -7,5 +7,5 @@ export const content = writable("");
export const date = writable("");
export const address = writable("");
export const organizedBy = writable([]);
export const collabs = writable([]);
export const colabs = writable([]);
export const canvas = writable();

1
src/routes/todos/+page.svelte
Unescape Escape View File

@ -89,7 +89,6 @@
}
input:focus-visible {
box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #ff3e00 !important;
outline: none;
}

Write Preview
Loading…
Cancel
Save