-
Notifications
You must be signed in to change notification settings - Fork 1
3. Bouwen ⚒️
Svelte installeren was geen probleem, we hadden afgesproken eerst de functionaliteiten werkend te krijgen en daarna pas de styling toe te passen. De functionaliteiten zijn. Laat een lijst met jaarboeken zien, laat de details van een jaarboek zien wanneer de gebruiker er op klikt. Dit moet allemaal data zijn die uit prismic.io komt.
De Prismic installatie was wel anders dan waar we voorheen mee gewerkt hebben. Het ging goed alleen was het wel een hele nieuwe omgeving. De slice machine was onduidelijk in het begin omdat je een beetje wordt los gelaten. Uiteindelijk kwam ik er achter dat sommige velden verplicht zijn zoals je uid.
Nadat alles geinstalleerd was konden we beginnen met het datamodel in prismic. We hadden al snel de homepage werkend gekregen. We wilde ook een detail pagina maken met de squads er in. Dit ging wat minder makkelijk. We hebben heel veel verschillende mogenlijkheden geprobeerd. Uiteindelijk was het gelukt om de juiste url te krijgen wanneer je op de overzichtspagina op een element klikte alleen werden we nog niet goed geredirect. Pas toen we sveltekit routing begrepen werkte dit pas. We hebben een volder met boek gemaakt en daarin een volder [uid]. Daar binnenin zit +page.svelte en +page.server.js.
Hier is hoe de +page.server.js in elkaar zit
import { createClient } from "$lib/prismicio"
export async function load({fetch, request, params }){
const client = createClient({fetch, request})
const document = await client.getByUID('yearbook', params.uid)
return document.data
}We willen natuurlijk de juiste pagina laden met de juiste data. Als de gebruiker op een jaarboek klikt in het overzicht dat klikt hij op de slug van dat boek. De slug komt overeen met het uid van de pagina yearbook. Doormiddel het woordje params weet de server wat er aangeklikt is en kunnen we daar naartoe routen en de juiste data ophalen.
We hebben de website zo ontworpen dat er 20 members per pagina getoond kunnen worden. Omdat er meer dan 20 mensen in de prismic data zit is dit een uitdaging. We hebben nu een loop van 20 mensen. Milan heeft me uitgelegd dat je de loop op deze manier kan schrijven:
<div id="card-container" class="container">
{#each slice.items as item, index (item.slug.text)}
{#if index < currentItemIndex}
{:else if currentPage === 1 && index < currentItemIndex + 20}
<!-- Render the next 20 items on page 1 -->
<div class="card-item">
<div class="inner-card">
{#if !item.image.url}
<img class="yearbook-image" src="/img/placeholder-image.jpg" alt="" />
{:else}
<img class="yearbook-image" src={item.image.url} alt={item.image.alt} />
{/if}
<p>{item.name[0].text}</p>
</div>
</div>
{/if}
{/each}
</div>Omdat we een boek maken moet de loop opgesplits worden in meerdere delen. Elk deel moet weten waar de loop is opgehouden en het hervatten waar deze gebleven is. Dit is nog een uitdaging maar we denken wel dat het moet lukken.
De dag nadat dit geschreven was hadden we de oplossing gevonden. Je kan aangeven hoe veel items je wilt hebben uit je data. Met een foreach die er zo uit ziet {#each slice.items.slice(0, 20) as item} kan je de eerste 20 items ophalen. De volgende loop ziet er dan zo uit:
{#each slice.items.slice(20, 40) as item}
<div class="card-item">
<div class="inner-card">
{#if !item.image.url}
<img class="yearbook-image" src="/img/placeholder-image.jpg" alt="" />
{:else}
<img class="yearbook-image" src={item.image.url} alt={item.image.alt} />
{/if}
<p>{item.name[0].text}</p>
</div>
</div>
{/each}We wilde graag iets speels toevoegen voor de gebruiker. Op het internet zagen we dat als je zoekt naar "high school yearbook" er heel veel in getekend wordt. Soms zijn het handtekeningen en soms zijn het brilletjes op de foto's van de studenten. In Figma hebben we een potlood gemaakt waar je op kan klikken om de teken functie aan en uit te zetten. Dit is omdat je niet kan tekenen en kan klikken op de webpagina tegelijk.
De tekenfunctie is nu nog wel minimaal. We kregen het canvas niet helemaal juist dus de grootte is nu met pixels aangegeven. Dit is omdat als we het in procenten aangeven de tekening heel vaag en uitgerekt wordt. Het is wel leuk om te kunnen tekenen. Dit is hoe de JavaScript er achter eruit ziet:
function toggleDraw() {
var canvas = document.getElementById("drawing-canvas");
// Get the current value of the pointer-events property
var currentPointerEvents = canvas.style.pointerEvents || "none";
// Toggle the pointer-events property
if (currentPointerEvents === "auto") {
canvas.style.pointerEvents = "none";
} else {
canvas.style.pointerEvents = "auto";
}
}
// Get the drawing canvas element
const canvas = document.querySelector('.drawing-canvas');
const ctx = canvas.getContext('2d');
// Set the canvas size
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
// Variables
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let brushSize = 2; // You can set the desired default brush size
let brushColor = "#141414"; // Default brush color (black)
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}
function draw(e) {
if (!isDrawing) return;
const [x, y] = [e.offsetX, e.offsetY];
// Draw on the client's canvas with circular strokes
ctx.lineCap = "round"; // Set the line cap to round for circular strokes
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
// Set the line thickness and color
ctx.lineWidth = brushSize;
ctx.strokeStyle = brushColor;
ctx.stroke();
[lastX, lastY] = [x, y];
}
function stopDrawing() {
isDrawing = false;
}
// Add event listeners to handle drawing
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);Omdat het boek niet goed er uit zag op een resolutie van een telefoon heb ik het boek verborgen in mobiele weergaven en een andere section met daarin een andere loop beeld gegeven. Dit is wel in de zelfde stijl als het inhoud van het boek maar je kan de bladzijde niet omslaan. Dit is wel iets wat ik wil toevoegen maar ik denk dat dit een "could" have functie is. Dit is hoe de mobiele section er uit ziet:
<section class="mobile-book" data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
<div class="mobile-book">
<p>FDND laatstejaars studenten {context.title}</p>
<div id="card-container" class="container">
{#each slice.items as item}
<div class="card-item">
<div class="inner-card">
{#if !item.image.url}
<img class="yearbook-image" src="/img/placeholder-image.jpg" alt="" />
{:else}
<img class="yearbook-image" src={item.image.url} alt={item.image.alt} />
{/if}
<p>{item.name[0].text}</p>
</div>
</div>
{/each}
</div>
</div>
</section>Omdat we allebei aan andere dingen werkte hebben we elkaars code even aan elkaar uitgelegd in een kleine code review. We hebben eerst uitleg gegeven en daarna zijn we gaan kijken naar de opbouw van elkaars code. We hebben allebei goede en mooie code geschreven vonden we zelf.