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

Labels Milestones

New Pull Request

colabs #3

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

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

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

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

@ -8,12 +8,13 @@
content, content,
heading, heading,
organizedBy, organizedBy,
colabs,
canvas canvas
} from '$lib/stores/store'; } from '$lib/stores/store';
let newdate = ''; /** @type {Object<string,string>} */ let newdate = {};
const convertDateTime = (datetime) => { const convertDateTime = (/** @type {string | undefined} */ datetime) => {
if (datetime == undefined) { if (datetime == undefined) {
return { return {
date: '', date: '',
@ -41,15 +42,48 @@
<div class="title">{$title}</div> <div class="title">{$title}</div>
<div class="subtitle">{$subtitle}</div> <div class="subtitle">{$subtitle}</div>
<div class="content">{@html $content}</div> <div class="content">{@html $content}</div>
{#if newdate}<div class="date">{newdate.date}</div>{/if} {#if newdate.date}<div class="date">{newdate.date}</div>{/if}
{#if newdate}<div class="time">{newdate.time}</div>{/if} {#if newdate.time}<div class="time">{newdate.time}</div>{/if}
<div class="address">{$address}</div> <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="imagetitle">Organiza:</div>
<div class="organized-by"> <div class="organized-by">
{#each $organizedBy as organization, i} {#each $organizedBy as organization, i}
<div class="organization"> <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 class="caption">{organization.text}</div>
</div> </div>
{/each} {/each}
@ -77,8 +111,7 @@
background-size: contain; background-size: contain;
position: relative; position: relative;
padding: 1rem; padding: 1rem;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3); /* border-radius: 0.5rem; */
border-radius: 0.5rem;
} }
.heading { .heading {
@ -204,7 +237,7 @@
max-width: 100%; */ max-width: 100%; */
} }
.organization img { .organization img {
max-height: 64px; max-height: 48px;
max-width: 100px; max-width: 100px;
margin: 0 auto; margin: 0 auto;
opacity: 75%; opacity: 75%;
@ -216,4 +249,42 @@
font-family: monospace; font-family: monospace;
color: #666; 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> </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 date = writable("");
export const address = writable(""); export const address = writable("");
export const organizedBy = writable([]); export const organizedBy = writable([]);
export const collabs = writable([]); export const colabs = writable([]);
export const canvas = writable(); export const canvas = writable();

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

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

Write Preview
Loading…
Cancel
Save