Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Frontend: Added updateTimeLine() which reset the position of the slidestring array each time a resizing occurs. Updated CSS so that the sidebar is not shown if in mobile mode.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-15 23:48:03 +01:00
parent 282627ed0d
commit d3aceced88
4 changed files with 222 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

313
frontend/src/lib/components/slideshow.svelte
View file

@ -1,153 +1,190 @@
<script> <script>
import SvgIcon from "@jamescoyle/svelte-icon"; import SvgIcon from "@jamescoyle/svelte-icon";
import { mdiArrowRight, mdiChevronLeft } from "@mdi/js"; import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
import "$lib/css/slideshow.css"; import "$lib/css/slideshow.css";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { import {
createTimeLine, createTimeLine,
slideContainerCount, updateTimeLine,
slideTimelineCount, slideContainerCount,
slideStringCount, slideTimelineCount,
} from "$lib/js/slideshow.js"; slideStringCount,
} from "$lib/js/slideshow.js";
// Exported values // Exported values
export let data = []; export let data = [];
export let type; export let type;
export let timeline = false; export let timeline = false;
export let reverse = false; export let reverse = false;
if(reverse) { if (reverse) {
data = data.reverse(); data = data.reverse();
} }
// Slideshow global variables // Resizing variables
let resizing = false;
let slideshow_index = 0; // Slideshow global variables
let slideshow_hidden = []; let slideshow_index = 0;
let slideshow_hidden = [];
let slideshowTimeline; let slideshowTimeline;
let slideshowElements; let slideshowElements;
let slideshowBubbles;
// Timeline global variables // Timeline global variables
let slideshow; let slideshow;
let bubbles = []; let bubbles = [];
onMount(() => { onMount(() => {
/* Slideshow */ /* Slideshow */
//global writer count //global writer count
const currentSlideCount = $slideContainerCount; const currentSlideCount = $slideContainerCount;
// Sliced array from currentSlideCount to data.length // Sliced array from currentSlideCount to data.length
slideshowElements = Array.from( slideshowElements = Array.from(
document.querySelectorAll(".slide-container") document.querySelectorAll(".slide-container"),
).slice(currentSlideCount, currentSlideCount + data.length); ).slice(currentSlideCount, currentSlideCount + data.length);
// Updating with the current length // Updating with the current length
slideContainerCount.update((value) => { slideContainerCount.update((value) => {
return value + data.length; return value + data.length;
});
if (timeline) {
/* SlideTimeline */
//global writer count
const currentTimelineCount = $slideTimelineCount;
// Creating the string between the bubbles
const slideshowBubbles = Array.from(
document.querySelectorAll(".slide-bubble")
).slice(currentTimelineCount, currentTimelineCount + data.length);
// Creating strings
for (const element of slideshowBubbles) {
bubbles.push({
left: element.offsetLeft,
top: element.offsetTop,
});
}
const stringTimelineElements = createTimeLine(bubbles);
for (const div of stringTimelineElements) {
slideshow.appendChild(div);
}
// Updating with the current length
slideTimelineCount.update((value) => {
return value + data.length;
});
//global writer count
const currentStringCount = $slideStringCount;
// Sliced array from currentTimelineCount to data.length
slideshowTimeline = Array.from(
document.querySelectorAll(".slide-string")
).slice(
currentStringCount,
currentStringCount + stringTimelineElements.length
);
// Updating with the current length
slideStringCount.update((value) => {
return value + stringTimelineElements.length;
});
}
}); });
function slideCards() { if (timeline) {
// Set or reset slideshow index, hidden array and timeling. /* SlideTimeline */
if (slideshow_index >= data.length - 1) { //global writer count
slideshow_hidden = []; const currentTimelineCount = $slideTimelineCount;
slideshow_index = 0; // Creating the string between the bubbles
if (timeline) { slideshowBubbles = Array.from(
for (const timeline of slideshowTimeline) { document.querySelectorAll(".slide-bubble"),
timeline.style.backgroundColor = ""; ).slice(currentTimelineCount, currentTimelineCount + data.length);
}
}
} else {
slideshow_hidden.push(slideshow_index);
slideshow_index++;
}
// Incrementing the transformValue for each element // Creating strings
let transformValue = 0; for (const element of slideshowBubbles) {
for (const id of slideshow_hidden) { bubbles.push({
transformValue += slideshowElements[id].clientWidth; left: element.offsetLeft,
} top: element.offsetTop,
// Translating elements
console.log(slideshowTimeline)
slideshowElements.forEach((element, id) => {
/* Slideshow translating*/
let newtransformValue = transformValue;
if (slideshow_hidden.includes(id)) {
// 1.1 because when in 'unactive' state, the scale is 0.9, adjusting the actual ratio
newtransformValue *= 1.1;
}
element.style.transform = `translateX(-${newtransformValue}px)`;
/* Slideshow Timeline trnaslating */
if (timeline) {
if (slideshowTimeline[id] != undefined) {
slideshowTimeline[
id
].style.transform = `translateX(-${transformValue}px)`;
if (slideshow_hidden.includes(id)) {
slideshowTimeline[id].style.backgroundColor =
"var(--color-background)";
}
}
}
}); });
}
createTimelineStrings();
} }
});
function slideCards() {
// Set or reset slideshow index, hidden array and timeling.
if (slideshow_index >= data.length - 1) {
resetSlideCards();
} else {
slideshow_hidden.push(slideshow_index);
slideshow_index++;
}
// Incrementing the transformValue for each element
let transformValue = 0;
for (const id of slideshow_hidden) {
transformValue += slideshowElements[id].clientWidth;
}
// Translating elements
slideshowElements.forEach((element, id) => {
/* Slideshow translating*/
let newtransformValue = transformValue;
if (slideshow_hidden.includes(id)) {
// 1.1 because when in 'unactive' state, the scale is 0.9, adjusting the actual ratio
newtransformValue *= 1.1;
}
element.style.transform = `translateX(-${newtransformValue}px)`;
/* Slideshow Timeline translating */
if (timeline) {
if (slideshowTimeline[id] != undefined) {
slideshowTimeline[id].style.transform =
`translateX(-${transformValue}px)`;
if (slideshow_hidden.includes(id)) {
slideshowTimeline[id].style.backgroundColor =
"var(--color-background)";
}
}
}
});
}
function resetSlideCards() {
return new Promise((resolve) => {
slideshow_hidden = [];
slideshow_index = 0;
for (const element of slideshowElements) {
element.style.transform = "";
}
if (timeline) {
for (const timeline of slideshowTimeline) {
timeline.style.backgroundColor = "";
timeline.style.transform = "";
}
}
resolve();
});
}
function createTimelineStrings() {
const stringTimelineElements = createTimeLine(bubbles);
for (const div of stringTimelineElements) {
slideshow.appendChild(div);
}
// Updating with the current length
slideTimelineCount.update((value) => {
return value + data.length;
});
//global writer count
const currentStringCount = $slideStringCount;
/* Sliced array from currentTimelineCount to data.length
Everytime a slideshow created the slide string, the queryselector all will get all the elements
We do not want that and only want the slide-string we are interested in
Starting from the oldest count, finishing by our actual length */
slideshowTimeline = Array.from(
document.querySelectorAll(".slide-string"),
).slice(
currentStringCount,
currentStringCount + stringTimelineElements.length,
);
// Updating with the current length
slideStringCount.update((value) => {
return value + stringTimelineElements.length;
});
}
async function changeSize() {
if (timeline && !resizing) {
resizing = true;
await resetSlideCards();
await new Promise(resolve => setTimeout(resolve, 400));
updateTimeLine(slideshowTimeline, slideshowBubbles);
resizing = false;
//global writer count
}
}
</script> </script>
<svelte:window on:resize={changeSize} />
<div class="slideshow" bind:this={slideshow}> <div class="slideshow" bind:this={slideshow}>
<button class="slideshow_btn" on:click={slideCards}> <button class="slideshow_btn" on:click={slideCards}>
<div> <div>
<SvgIcon <SvgIcon
size="45" size="45"
path={slideshow_index >= data.length - 1 path={slideshow_index >= data.length - 1
? mdiChevronLeft ? mdiChevronLeft
: mdiArrowRight} : mdiArrowRight}
type="mdi" type="mdi"
/> />
</div> </div>
</button> </button>
{#each data as selected_data, index (index)} {#each data as selected_data, index (index)}
<svelte:component <svelte:component
this={type} this={type}
data={selected_data} data={selected_data}
active={index == slideshow_index ? true : false} active={index == slideshow_index ? true : false}
/> />
{/each} {/each}
</div> </div>

43
frontend/src/lib/css/cv.css
View file

@ -11,21 +11,38 @@ html {
flex-direction: row; flex-direction: row;
} }
.sidebar {
position: absolute; @media screen and (min-width: 1200px)
width: 16rem; {
height: 75rem; .sidebar {
background-color: var(--color-special); position: absolute;
z-index: 2; width: 16rem;
transition: all 0s ease 0s; height: 75rem;
background-color: var(--color-special);
z-index: 2;
transition: all 0s ease 0s;
}
.fake-sidebar {
width: 100%;
flex-basis: 20rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
background-color: var(--color-special);
z-index: 1;
}
} }
.fake-sidebar { @media screen and (max-width: 1200px)
width: 100%; {
flex-basis: 20rem; .sidebar {
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; position: absolute;
background-color: var(--color-special); width: 16rem;
z-index: 1; height: 75rem;
background-color: var(--color-special);
z-index: 2;
transition: all 0s ease 0s;
visibility: hidden;
}
} }
.profile-picture-container { .profile-picture-container {

10
frontend/src/lib/js/slideshow.js
View file

@ -16,6 +16,16 @@ export function createTimeLine(positionsArray) {
return divArray; return divArray;
} }
export function updateTimeLine(slideStringArray, positionsArray) {
for (let i = 0; i < positionsArray.length - 1; i++)
{
const left = positionsArray[i].offsetLeft + (2.5 * 16);
const top = positionsArray[i].offsetTop + 16;
slideStringArray[i].style.left = `${left}px`;
slideStringArray[i].style.top = `${top}px`;
}
}
export let slideContainerCount = writable(0); export let slideContainerCount = writable(0);
export let slideTimelineCount = writable(0); export let slideTimelineCount = writable(0);
export let slideStringCount = writable(0); export let slideStringCount = writable(0);

8
frontend/src/routes/+page.svelte
View file

@ -64,9 +64,15 @@
sidebar.style.top = ''; sidebar.style.top = '';
} }
} }
// Mobile check
$: innerWidth = 0;
function mobileCheck() {
//console.log(innerWidth);
}
</script> </script>
<svelte:window bind:scrollY bind:innerHeight on:scroll={sidebarScrollingHandler} /> <svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
{#if data.status == 0} {#if data.status == 0}
<div class="container-cv"> <div class="container-cv">