diff --git a/src/lib/components/DataProject.svelte b/src/lib/components/DataProject.svelte index 4331642..a6faa9b 100644 --- a/src/lib/components/DataProject.svelte +++ b/src/lib/components/DataProject.svelte @@ -4,6 +4,9 @@ import ImageGallery from './ImageGallery.svelte'; import { urlFor } from '$lib/sanityClient'; import { browser } from '$app/environment'; + import { slide } from 'svelte/transition'; + import { cubicInOut } from 'svelte/easing'; + const { project, corsoColor } = $props(); let showModal = $state(false); let currentMediaIndex = $state(0); @@ -22,7 +25,6 @@ } function handleImageClick(index) { - //console.log('handleImageClick'); showModal = true; isVideo = false; currentMediaIndex = index; @@ -33,7 +35,6 @@ } function nextMedia() { - //console.log('nextMedia'); if (isVideo) return; if (currentMediaIndex < project.immagini.length - 1) { currentMediaIndex++; @@ -41,7 +42,6 @@ } function prevMedia() { - //console.log('prevMedia'); if (isVideo) return; if (currentMediaIndex > 0) { currentMediaIndex--; @@ -61,10 +61,8 @@ }); $effect(() => { - //console.log(browser, showModal, !isVideo, modalContent, Hammer, 'check'); if (browser && showModal && !isVideo && modalContent && Hammer) { const hammer = new Hammer(modalContent); - //console.log('Hammer initialized'); hammer.on('swipeleft', nextMedia); hammer.on('swiperight', prevMedia); @@ -106,36 +104,14 @@ {#if showModal} -
+
-
-
-
-
- {#if !isVideo && project.immagini && project.immagini.length > 1} - - - {/if} -
+
+
+
-
+
{#if isVideo && project.video} -
@@ -187,4 +194,13 @@ background-color: white !important; color: var(--corso-color) !important; } + .modal-content { + background-color: transparent; + border: none; + } + .image-container { + display: flex; + align-items: center; + justify-content: center; + } diff --git a/src/lib/cursorEffect.js b/src/lib/cursorEffect.js new file mode 100644 index 0000000..c96f38f --- /dev/null +++ b/src/lib/cursorEffect.js @@ -0,0 +1,59 @@ +// Configuration variables for the grid +const MIN_GRID_SIZE = 50; // Minimum size of each grid cell in pixels +const MAX_GRID_SIZE = 50; // Maximum size of each grid cell in pixels +const ANIMATION_DURATION = 1000; // Duration of the square's visibility in milliseconds +const PADDING = 0; // Padding between squares in pixels +const BORDER_ONLY = false; // If true, only draw the border of the div + +/** + * Creates a square div at the mouse position and fades it out + * @param {number} x - The x-coordinate of the mouse + * @param {number} y - The y-coordinate of the mouse + */ +export function createSquareAtMouse(x, y) { + // Generate a random grid size within the configured range + const GRID_SIZE = Math.floor(Math.random() * (MAX_GRID_SIZE - MIN_GRID_SIZE + 1)) + MIN_GRID_SIZE; + + // Calculate the grid cell position + const cellX = Math.floor(x / (GRID_SIZE + PADDING)) * (GRID_SIZE + PADDING); + const cellY = Math.floor(y / (GRID_SIZE + PADDING)) * (GRID_SIZE + PADDING); + + // Check if a square already exists at this position + const existingSquare = document.querySelector(`div[data-x="${cellX}"][data-y="${cellY}"]`); + if (existingSquare) { + return; // If a square already exists, don't create a new one + } + + // Create the square div + const square = document.createElement('div'); + square.style.position = 'absolute'; + square.style.left = `${cellX}px`; + square.style.top = `${cellY}px`; + square.style.width = `${GRID_SIZE}px`; + square.style.height = `${GRID_SIZE}px`; + square.style.mixBlendMode = 'difference'; // This will invert the colors underneath + square.style.pointerEvents = 'none'; // Ensure it doesn't interfere with other elements + square.style.transition = 'opacity ' + ANIMATION_DURATION / 1000 + 's ease-out'; // Add transition for fading effect + square.dataset.x = cellX; // Add data attributes to identify the square's position + square.dataset.y = cellY; + + if (BORDER_ONLY) { + square.style.border = '3px solid rgba(0, 0, 255, 0.8)'; // Blue border with 80% opacity + square.style.backgroundColor = 'transparent'; // Transparent background + } else { + square.style.backgroundColor = 'rgba(0, 0, 255, 0.8)'; // Use blue with 80% opacity + } + + // Add the square to the document + document.body.appendChild(square); + + // Start the fading effect after a short delay + setTimeout(() => { + square.style.opacity = '0'; + }, 50); + + // Remove the square after the animation completes + setTimeout(() => { + document.body.removeChild(square); + }, ANIMATION_DURATION); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 607adbb..009b0ff 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,7 +3,7 @@ import Header from '$lib/components/Header.svelte'; -
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 138c959..e08a6bf 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,23 +1,46 @@ -
+

- Il laboratorio di Information Design, sviluppato su due moduli integrati, ha l’obiettivo di + Il laboratorio di Information Design, sviluppato su due moduli integrati, ha l'obiettivo di introdurre gli studenti alla progettazione di artefatti comunicativi che hanno lo scopo di veicolare temi e informazioni complesse e offrire una visione ampia sul valore, sulle potenzialità e i limiti dei dati. Gli studenti, organizzati in gruppi di lavoro, partiranno - dalla selezione di un tema di ricerca che svilupperanno tramite la selezione e l’analisi + dalla selezione di un tema di ricerca che svilupperanno tramite la selezione e l'analisi visuale di set di dati che ne rappresentano alcune dimensioni. Dopo una prima fase di analisi, gli studenti dovranno sviluppare un progetto composto da tre elementi: una pubblicazione digitale in grado di presentare il tema e i dati analizzati; - un’installazione/campagna di comunicazione capace di riportare l’esperienza digitale in uno - spazio fisico; un video che racconta l’intera esperienza in tutte le sue fasi significative. + un'installazione/campagna di comunicazione capace di riportare l'esperienza digitale in uno + spazio fisico; un video che racconta l'intera esperienza in tutte le sue fasi significative.

@@ -54,7 +77,7 @@

- {corso.titolo} + {corso.titolo}

- {data.corso.titolo} + {data.corso.titolo} {data.corso.anno} -

{gruppo.nome}

+

{gruppo.nome}

{/each} diff --git a/src/routes/gruppi/[slug]/+page.svelte b/src/routes/gruppi/[slug]/+page.svelte index a1b1f40..824497f 100644 --- a/src/routes/gruppi/[slug]/+page.svelte +++ b/src/routes/gruppi/[slug]/+page.svelte @@ -37,7 +37,7 @@ href="{base}/corsi/{data.gruppo.corso.slug.current}" class="text-decoration-none text-white" > - {data.gruppo.corso.titolo} + {data.gruppo.corso.titolo}