FrontEnd: Added Timeline below the slideshow.
This commit is contained in:
parent
5154a4f200
commit
057d2c7955
6 changed files with 166 additions and 44 deletions
|
|
@ -2,39 +2,50 @@
|
|||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiMapMarker, mdiCog } from "@mdi/js";
|
||||
import "$lib/css/education.css";
|
||||
import { formatYear } from "$lib/js/date.js"
|
||||
|
||||
export let active = false;
|
||||
export let data;
|
||||
|
||||
|
||||
const title = data.school;
|
||||
const location = data.school_location;
|
||||
const speciality = data.speciality;
|
||||
const option = data.school_options;
|
||||
const picture = data.picture_url;
|
||||
const end_year = data.end_year === null ? '' : formatYear(data.end_year);
|
||||
const start_year = data.start_year === null ? '' : (data.end_year === null ? formatYear(data.start_year) : '-'+formatYear(data.start_year));
|
||||
</script>
|
||||
|
||||
<div class="education-main {active ? '' : 'education-unactive'}">
|
||||
<div class="education-img-container">
|
||||
<img class="education-img" src={picture} alt="Education" />
|
||||
<div class="education-container">
|
||||
<div class="education-main {active ? '' : 'education-unactive'}">
|
||||
<div class="education-img-container">
|
||||
<img class="education-img" src={picture} alt="Education" />
|
||||
</div>
|
||||
<div class="education-text-container">
|
||||
<h1 class="education-title">{title}</h1>
|
||||
{#if location}
|
||||
<div class="education-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
|
||||
<p class="education-subtitle education-aftericon">
|
||||
{location}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if speciality}
|
||||
<div class="education-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiCog} type="mdi" />
|
||||
<p class="education-subtitle education-aftericon">
|
||||
{speciality}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if option}
|
||||
<p class="education-subtitle">{option}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="education-text-container">
|
||||
<h1 class="education-title">{title}</h1>
|
||||
{#if location}
|
||||
<div class="education-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
|
||||
<p class="education-subtitle education-aftericon">{location}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if speciality}
|
||||
<div class="education-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiCog} type="mdi" />
|
||||
<p class="education-subtitle education-aftericon">
|
||||
{speciality}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if option}
|
||||
<p class="education-subtitle">{option}</p>
|
||||
{/if}
|
||||
<div class="education-time">
|
||||
<div class="education-bubble" />
|
||||
<h2 class="education-date">{`${end_year}${start_year}`}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,37 +1,74 @@
|
|||
<script>
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
|
||||
import "$lib/css/slideshow.css"
|
||||
import "$lib/css/slideshow.css";
|
||||
import { onMount } from "svelte";
|
||||
import { createTimeLine } from "$lib/js/timeline.js";
|
||||
|
||||
// Exported values
|
||||
export let data = [];
|
||||
export let type;
|
||||
|
||||
// Slideshow global variables
|
||||
let slideshow_index = 0;
|
||||
let slideshow_hidden = [];
|
||||
|
||||
// Timeline global variables
|
||||
let slideshow;
|
||||
let bubbles = [];
|
||||
onMount(() => {
|
||||
for (const element of document.getElementsByClassName(
|
||||
"education-bubble"
|
||||
)) {
|
||||
bubbles.push({
|
||||
left: element.offsetLeft,
|
||||
top: element.offsetTop,
|
||||
});
|
||||
}
|
||||
for (const div of createTimeLine(bubbles)) {
|
||||
slideshow.appendChild(div);
|
||||
}
|
||||
});
|
||||
|
||||
function slideEducation() {
|
||||
const slideshowElements = document.querySelectorAll(".education-main");
|
||||
const slideshowElements = document.querySelectorAll(
|
||||
".education-container"
|
||||
);
|
||||
const slideshowTimeline =
|
||||
document.querySelectorAll(".education-string");
|
||||
|
||||
if (slideshow_index >= data.length - 1) {
|
||||
slideshow_hidden = [];
|
||||
slideshow_index = 0;
|
||||
for(const timeline of slideshowTimeline) {
|
||||
timeline.style.backgroundColor = '';
|
||||
}
|
||||
} else {
|
||||
slideshow_hidden.push(slideshow_index);
|
||||
slideshow_index++;
|
||||
}
|
||||
let transformValue = 0;
|
||||
for (const id of slideshow_hidden) {
|
||||
transformValue += (slideshowElements[id].clientWidth+(5*16));
|
||||
}
|
||||
transformValue += slideshowElements[id].clientWidth;
|
||||
}
|
||||
slideshowElements.forEach((element, id) => {
|
||||
let newtransformValue = transformValue;
|
||||
if(slideshow_hidden.includes(id)) {
|
||||
newtransformValue*=1.1;
|
||||
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)`;
|
||||
if(slideshowTimeline[id] != undefined) {
|
||||
slideshowTimeline[id].style.transform = `translateX(-${transformValue}px)`;
|
||||
if (slideshow_hidden.includes(id)) {
|
||||
slideshowTimeline[id].style.backgroundColor = 'var(--color-background)';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="slideshow">
|
||||
<div class="slideshow" bind:this={slideshow}>
|
||||
<button class="slideshow_btn" on:click={slideEducation}>
|
||||
<div>
|
||||
<SvgIcon
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
.education-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
||||
.education-main {
|
||||
display: flex;
|
||||
border-radius: 0.4rem;
|
||||
|
|
@ -55,5 +61,42 @@
|
|||
|
||||
.education-unactive {
|
||||
scale: 0.9;
|
||||
margin-left: 2.25rem !important;
|
||||
margin-right: 2.25rem !important;
|
||||
box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
|
||||
}
|
||||
|
||||
.education-time {
|
||||
margin-top: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.education-bubble {
|
||||
z-index: 2;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
background-color: var(--color-special);
|
||||
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
transition: all .3s ease 0s;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.education-date {
|
||||
color: var(--color-special);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.education-string {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
height: 3rem;
|
||||
background-color: var(--color-special);
|
||||
opacity: 0.5;
|
||||
transition: all .3s ease 0s;
|
||||
}
|
||||
|
|
@ -3,4 +3,11 @@ export function formatDate(date) {
|
|||
const cool_date = new Date(date);
|
||||
const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
export function formatYear(date) {
|
||||
const options = { year: 'numeric' };
|
||||
const cool_date = new Date(date);
|
||||
const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
|
||||
return formattedDate;
|
||||
}
|
||||
|
|
@ -1,15 +1,21 @@
|
|||
// processdata.js
|
||||
export function processData(data) {
|
||||
if (data.status === 0) {
|
||||
const info = data.info[0];
|
||||
const experiences = data.experience;
|
||||
const education = data.education;
|
||||
const skills = data.skills[1];
|
||||
const projects = data.skills[0];
|
||||
|
||||
return { info, experiences, education, skills, projects };
|
||||
} else {
|
||||
return null; // Indicates an error
|
||||
}
|
||||
function arrangeById(array) {
|
||||
let newArray = new Array(array.length);
|
||||
for (const value of array) {
|
||||
newArray[value.id-1] = value;
|
||||
}
|
||||
|
||||
return newArray;
|
||||
}
|
||||
|
||||
export function processData(data) {
|
||||
if (data.status === 0) {
|
||||
const info = data.info[0];
|
||||
const experiences = data.experience;
|
||||
const education = arrangeById(data.education);
|
||||
const skills = data.skills[1];
|
||||
const projects = data.skills[0];
|
||||
|
||||
return {info, experiences, education, skills, projects};
|
||||
} else {
|
||||
return null; // Indicates an error
|
||||
}
|
||||
}
|
||||
18
frontend/src/lib/js/timeline.js
Normal file
18
frontend/src/lib/js/timeline.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export function createTimeLine(positionsArray) {
|
||||
let divArray = []
|
||||
console.log(positionsArray);
|
||||
for(let i=0; i<positionsArray.length-1; i++)
|
||||
{
|
||||
var newDiv = document.createElement('div');
|
||||
newDiv.className = 'education-string';
|
||||
const left = positionsArray[i].left + (2.5*16);
|
||||
newDiv.style.left = `${left}px`;
|
||||
const top = positionsArray[i].top + 16;
|
||||
newDiv.style.top = `${top}px`;
|
||||
const width = ((positionsArray[i+1].left)-(positionsArray[i].left));
|
||||
console.log(width);
|
||||
newDiv.style.width = `${width}px`;
|
||||
divArray.push(newDiv);
|
||||
}
|
||||
return divArray;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue