Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/uclab-potsdam/syllabus-site
Browse files Browse the repository at this point in the history
  • Loading branch information
@elproffesore
elproffesore committed Feb 24, 2024
2 parents 165904c + 0f3161a commit e2b2b89
Showing 1 changed file with 50 additions and 41 deletions.
91 changes: 50 additions & 41 deletions src/syllabussite.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ async function init() {
let session = {}
session.index = sessionIndex;
session.alignment = Math.random() > 0.5 ? true : false;
session.height = 0;
session.text = sessionContent.shift();
session.items = []

Expand All @@ -31,7 +30,9 @@ async function init() {
item.session = session;
item.markdown = content;
item.left = contentIndex % 2 == 0 ? session.alignment : !session.alignment

item.varianz = item.left ? Math.random() * window.innerWidth * 0.1 : Math.random() * -window.innerWidth * 0.1
item.x = item.left ? window.innerWidth * 0.05 + item.varianz : window.innerWidth * 0.95 + item.varianz
// CREATE HTML ELEMENT
let itemHTMLRootElement = document.createElement('div');
itemHTMLRootElement.classList.add('fixObjects');
itemHTMLRootElement.classList.add(item.left ? 'left' : 'right');
Expand All @@ -40,32 +41,13 @@ async function init() {
let parsed = marked.parse(content).replace('<img ', '<img loading="lazy" ');;
itemHTMLRootElement.innerHTML = parsed;
contentHTMLRootElement.appendChild(itemHTMLRootElement);

// SET PARAMETERS
item.domObject = itemHTMLRootElement;
item.bounding = item.domObject.getBoundingClientRect();
item.height = item.bounding.height * 0.75 + window.innerHeight * 0.1;
item.margin = item.index === 0 ? 0 : session.items[item.index - 1].margin + session.items[item.index - 1].height;
item.varianz = item.left ? Math.random() * window.innerWidth * 0.1 : Math.random() * -window.innerWidth * 0.1
item.x = item.left ? window.innerWidth * 0.05 + item.varianz : window.innerWidth * 0.95 + item.varianz

session.height += item.bounding.height + window.innerHeight * 0.2;
updateItem(item,session)
// APPEND TO SESSION
session.items.push(item);
})
// ADJUST SESSION HEIGHT, MARGIN AND PADDING
session.margin = session.index == 0 ? 0 : sessions[session.index - 1].margin + sessions[session.index - 1].height - sessions[session.index - 1].padding;
session.padding = window.innerHeight * 1.5;
session.height += session.padding;

// SET POSITION OF ITEMS
session.items.map((item) => {
item.y = session.margin + //margin to the top
session.padding + //height of the session padding-top
item.margin * 1.25 //margin to the top of the session

item.domObject.style.top = item.y + "px";
item.domObject.style.transform = `translate(${item.varianz}px,0)`
});

updateSession(session)
setHTML(session, anchorsHTMLRootElement, cursorsHTMLRootElement);
sessions.push(session);
})
Expand All @@ -88,6 +70,38 @@ async function init() {
// START THE LOOP
loop();
}
window.addEventListener('resize', () => {
sessions.map(session => {
updateSession(session)
})
document.querySelector('#wrapper').style.visibility = 'visible';
document.querySelector('#app').style.height = sessions[sessions.length - 1].margin + sessions[sessions.length - 1].height + "px";
})
function updateSession(session){
session.height = 0;
session.items.map(item => {
updateItem(item,session)
})
session.margin = session.index == 0 ? -session.height/3 : sessions[session.index - 1].margin + sessions[session.index - 1].height - sessions[session.index - 1].padding * 0.6;
session.padding = window.innerHeight * 2;
session.height += session.padding;

session.items.map((item) => {
item.y = session.margin + //margin to the top
session.padding + //height of the session padding-top
item.margin //margin to the top
//padding-top of the item
item.domObject.style.top = item.y + "px";
item.domObject.style.transform = `translate(${item.varianz}px,0)`
});
}
function updateItem(item,session){
item.bounding = item.domObject.getBoundingClientRect();
item.height = item.bounding.height;
item.margin = item.index === 0 ? 0 : session.items[item.index - 1].margin + session.items[item.index - 1].padding + session.items[item.index - 1].height;
item.padding = window.innerHeight * 0.25;
session.height += item.bounding.height + item.padding;
}
window.onload = init;
// LINK HTML
function setHTML(session, anchors, cursors) {
Expand Down Expand Up @@ -161,13 +175,18 @@ function loop() {
}
function update() {
let links = [];
let anchorProgress = 1;
let anchor = undefined;
sessions.map(session => {
let sessionProgress = (window.scrollY - session.margin) / session.height;
let [cursorPosition, cursorHeight] = updateCursor(session, sessionProgress)
if (session.margin <= window.scrollY && window.scrollY <= (session.margin + session.height)) {
if (session.anchor != undefined) {
session.anchor.classList.add('active');
}
if (session.anchor != undefined && Math.abs(sessionProgress) < anchorProgress) {
anchorProgress = Math.abs(sessionProgress);
if(anchor != undefined) anchor.classList.remove('active');
anchor = session.anchor;
anchor.classList.add('active');
}
let anchor1 = [window.innerWidth / 2, cursorPosition + cursorHeight / 2];
session.items.map((item) => {
let bounding = item.domObject.getBoundingClientRect();
Expand All @@ -176,12 +195,9 @@ function update() {
});
links.push(session.items)
}else{
if (session.anchor != undefined) {
session.anchor.classList.remove('active');
}
if (session.anchor != undefined) session.anchor.classList.remove('active');
}

})
})
updateLinks(links.flat());
}
function updateCursor(session, sessionProgress) {
Expand Down Expand Up @@ -225,13 +241,6 @@ function preventDefault(e) {
resetEnlargedImage();
}

function remapRange(value, low1, high1, low2, high2) {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}

function calculateDistanceY(p1, p2) {
return Math.abs(p2[1] - p1[1]);
}
function resetEnlargedImage() {
document.body.removeEventListener('touchstart', preventDefault);
document.body.removeEventListener('wheel', preventDefault);
Expand Down Expand Up @@ -344,4 +353,4 @@ function setFontSize() {
fontSize = 7 + .7 * vw + .3 * vh;
document.querySelector("body").style.fontSize = fontSize + "px";
}
window.onresize = setFontSize;
window.onresize = setFontSize;

0 comments on commit e2b2b89

Please sign in to comment.