colabs (#3)

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

src/lib/form/Colabs.svelte

@@ -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>

src/lib/form/Form.svelte

@@ -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>

src/lib/form/Organized.svelte

@@ -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;
+		top: -4px;
-		right: 0px;
+		right: -0.25rem;
 		color: red;
 		cursor: pointer;
+		background-color: white;
+		padding: 0 0.25rem;
 	}
 	input {
 		display: block;

src/lib/preview/Preview.svelte

@@ -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.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>
-		{#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>

src/lib/stores/store.js

@@ -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();

src/routes/todos/+page.svelte

@@ -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;
 	}