organizadores (#2)

Ya permite incluir logos de organizadores e incluso darles un caption por si no tienen nombre y hay que ponerlo.

Co-authored-by: Borja Robert <borja@brobert.net>
Reviewed-on: #2

src/lib/Counter.svelte

@@ -1,107 +0,0 @@
-<script>
-	import { spring } from 'svelte/motion';
-
-	let count = 0;
-
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
-
-	/**
-	 * @param {number} n
-	 * @param {number} m
-	 */
-	function modulo(n, m) {
-		// handle negative numbers
-		return ((n % m) + m) % m;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
-	</button>
-
-	<div class="counter-viewport">
-		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
-		</div>
-	</div>
-
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
-	</button>
-</div>
-
-<style>
-	.counter {
-		display: flex;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		margin: 1rem 0;
-	}
-
-	.counter button {
-		width: 2em;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background-color: transparent;
-		touch-action: manipulation;
-		color: var(--text-color);
-		font-size: 2rem;
-	}
-
-	.counter button:hover {
-		background-color: var(--secondary-color);
-	}
-
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: var(--text-color);
-	}
-
-	.counter-viewport {
-		width: 8em;
-		height: 4em;
-		overflow: hidden;
-		text-align: center;
-		position: relative;
-	}
-
-	.counter-viewport strong {
-		position: absolute;
-		display: flex;
-		width: 100%;
-		height: 100%;
-		font-weight: 400;
-		color: var(--accent-color);
-		font-size: 4rem;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.counter-digits {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-
-	.hidden {
-		top: -100%;
-		user-select: none;
-	}
-</style>

src/lib/form/Form.svelte

@@ -1,9 +1,21 @@
 <script>
 	import { onMount } from 'svelte';
 	import html2canvas from 'html2canvas';
-	import { title, heading, subtitle, content, date, address, canvas } from '$lib/stores/store';
+	import Organized from '$lib/form/Organized.svelte';
+	import {
+		title,
+		heading,
+		subtitle,
+		content,
+		date,
+		address,
+		organizedBy,
+		collabs,
+		canvas
+	} from '$lib/stores/store';
 
 	/** @type {HTMLDivElement} */ let editor;
+	let fileinput;
 
 	const handleSubmit = async () => {
 		console.log('submit');
@@ -43,7 +55,7 @@
 				toolbar: quillOptions
 			},
 			theme: 'snow',
-			placeholder: 'contenido'
+			placeholder: 'Detalles del evento'
 		});
 	});
 </script>
@@ -80,6 +92,10 @@
 			<input bind:value={$address} type="text" name="address" />
 		</div>
 	</div>
+	<div class="form-group">
+		<label for="organizedBy">Organiza:</label>
+		<Organized />
+	</div>
 </form>
 <button on:click|preventDefault={downloadCanvas}>Descargar</button>
 
@@ -118,4 +134,13 @@
 		font-size: 1.1rem;
 		cursor: pointer;
 	}
+
+	.upload {
+		max-width: 48px;
+		cursor: pointer;
+	}
+
+	.chan {
+		cursor: pointer;
+	}
 </style>

src/lib/form/Organized.svelte

@@ -0,0 +1,104 @@
+<script>
+	import {
+		title,
+		heading,
+		subtitle,
+		content,
+		date,
+		address,
+		organizedBy,
+		collabs,
+		canvas
+	} from '$lib/stores/store';
+
+	let fileinput, avatar;
+
+	const onFileSelected = (e) => {
+		let image = e.target.files[0];
+		let reader = new FileReader();
+		reader.readAsDataURL(image);
+		reader.onload = (e) => {
+			$organizedBy = [...$organizedBy, { image: e.target.result, text: '' }];
+		};
+	};
+
+	const removeOrganizer = (index) => {
+		if (index > -1) {
+			$organizedBy.splice(index, 1);
+			$organizedBy = $organizedBy;
+		}
+	};
+</script>
+
+<div class="organized-by">
+	{#if $organizedBy[0]}
+		{#each $organizedBy as organization, i}
+			<div class="organization">
+				<div
+					class="remove"
+					on:click|preventDefault={() => {
+						removeOrganizer(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>
+	.organized-by {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		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;
+	}
+	.organized-logo {
+		max-height: 64px;
+		max-width: 100px;
+		margin: 0 auto;
+	}
+
+	.remove {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		color: red;
+		cursor: pointer;
+	}
+	input {
+		display: block;
+		max-width: 100px;
+	}
+	button {
+		display: block;
+		padding: 0.5rem;
+		cursor: pointer;
+		margin: 1rem;
+	}
+</style>

src/lib/preview/Preview.svelte

@@ -1,6 +1,15 @@
 <script>
 	import html2canvas from 'html2canvas';
-	import { title, subtitle, date, address, content, heading, canvas } from '$lib/stores/store';
+	import {
+		title,
+		subtitle,
+		date,
+		address,
+		content,
+		heading,
+		organizedBy,
+		canvas
+	} from '$lib/stores/store';
 
 	let newdate = '';
 
@@ -35,6 +44,17 @@
 		{#if newdate}<div class="date">{newdate.date}</div>{/if}
 		{#if newdate}<div class="time">{newdate.time}</div>{/if}
 		<div class="address">{$address}</div>
+		{#if $organizedBy[0]}
+			<div class="imagetitle">Organiza:</div>
+			<div class="organized-by">
+				{#each $organizedBy as organization, i}
+					<div class="organization">
+						<img src={organization.image} />
+						<div class="caption">{organization.text}</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
 	</div>
 </div>
 
@@ -152,4 +172,48 @@
 		max-height: 4rem;
 		overflow: hidden;
 	}
+	.imagetitle {
+		position: absolute;
+		top: 700px;
+		font-size: 0.7rem;
+		color: #555;
+	}
+	.organized-by {
+		position: absolute;
+		top: 720px;
+		left: 1rem;
+		right: 1rem;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
+		grid-template-rows: min-content;
+		grid-auto-rows: auto;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.organization {
+		/* grid-row: 2/3; */
+		margin: 0 1rem;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
+		/* width: 64px;
+		height: 64px;
+		max-width: 100%; */
+	}
+	.organization img {
+		max-height: 64px;
+		max-width: 100px;
+		margin: 0 auto;
+		opacity: 75%;
+	}
+
+	.caption {
+		margin: 0.5rem 0;
+		font-size: 0.8rem;
+		font-family: monospace;
+		color: #666;
+	}
 </style>

src/lib/stores/store.js

@@ -6,4 +6,6 @@ export const subtitle = writable("");
 export const content = writable("");
 export const date = writable("");
 export const address = writable("");
+export const organizedBy = writable([]);
+export const collabs = writable([]);
 export const canvas = writable();