From 735397727223db2bf15b79c92c2009e4b7af1cd0 Mon Sep 17 00:00:00 2001 From: Florian Sylvain Date: Tue, 16 Aug 2022 01:53:12 +0200 Subject: [PATCH] Cleaning and small refactors --- script.js | 175 +++++++++++++++++++------------------------- stylesheet-main.css | 5 -- 2 files changed, 76 insertions(+), 104 deletions(-) diff --git a/script.js b/script.js index cf5289e..1a979d3 100644 --- a/script.js +++ b/script.js @@ -1,178 +1,155 @@ -/*jslint browser */ -/*global window */ +const LARGE = 992 -const LARGE = 992; +const mainTitle = document.querySelector('.main-title') +const navBar = document.querySelector('body > header') +const navBarElems = document.querySelector('body > header > nav') +const scrollToTop = document.querySelector('#scrollToTop') +const contentElems = document.querySelectorAll('#content > section, .main-title') -const mainTitle = document.querySelector('.main-title'); -const navBar = document.querySelector('body > header'); -const navBarElems = document.querySelector('body > header > nav'); -const scrollToTop = document.querySelector('#scrollToTop'); -const contentElems = document.querySelectorAll('#content > section, .main-title'); - -const backgroundHider = document.querySelector('.background-hider'); -const projectsContentList = document.querySelectorAll('.article-content'); +const backgroundHider = document.querySelector('.background-hider') +const projectsContentList = document.querySelectorAll('.article-content') const projectsIDs = Array.from(projectsContentList) - .map((project) => project.id); + .map((project) => project.id) -let lastScrollTop = window.scrollY; +let lastScrollTop = window.scrollY function loadCSS() { - "use strict"; - const stylesheet = document.createElement('link'); - stylesheet.href = 'stylesheet-imgs.css'; - stylesheet.rel = 'stylesheet'; - stylesheet.type = 'text/css'; - document.querySelector('head').appendChild(stylesheet); + const stylesheet = document.createElement('link') + stylesheet.href = 'stylesheet-imgs.css' + stylesheet.rel = 'stylesheet' + stylesheet.type = 'text/css' + document.querySelector('head').appendChild(stylesheet) } -loadCSS(); +loadCSS() function toAddClass(toClass, inClass) { - "use strict"; - - const elementsToAddClass = document.querySelectorAll(toClass); + const elementsToAddClass = document.querySelectorAll(toClass) if (elementsToAddClass !== null) { elementsToAddClass.forEach(function (elem) { const distInView = elem.getBoundingClientRect().top - - window.innerHeight + 100; + - window.innerHeight + 100 if (distInView < 0) { - elem.classList.add(inClass); + elem.classList.add(inClass) } // else { - // elem.classList.remove(inClass); + // elem.classList.remove(inClass) // } - }); + }) } } function updateTitle() { - "use strict"; + const y = window.scrollY + const titlePos = mainTitle.getBoundingClientRect() - const y = window.scrollY; - const titlePos = mainTitle.getBoundingClientRect(); + if (titlePos.bottom <= 0) return; + const distanceToTop = window.scrollY + titlePos.top + const elementHeight = mainTitle.offsetHeight + const opacity = 1 - ((y - distanceToTop) / elementHeight) * 2 - if (titlePos.bottom > 0) { - const distanceToTop = window.scrollY + titlePos.top; - const elementHeight = mainTitle.offsetHeight; - const opacity = 1 - ((y - distanceToTop) / elementHeight) * 2; - - if (opacity > 0) { - const pixelsSpacing = (y * 0.005 <= 0.1 - ? 0.1 - : y * 0.005); - mainTitle.style.letterSpacing = (pixelsSpacing * 2) + 'em'; - mainTitle.style.opacity = opacity; - } - } + if (opacity <= 0) return; + const pixelsSpacing = (y * 0.005 <= 0.1 + ? 0.1 + : y * 0.005) + mainTitle.style.letterSpacing = (pixelsSpacing * 2) + 'em' + mainTitle.style.opacity = opacity } function updateUrl() { - "use strict"; - - const elements = []; - let max = null; - let index = null; + const elements = [] + let max = null + let index = null contentElems.forEach(function (elem) { - const pos = elem.getBoundingClientRect().top; + const pos = elem.getBoundingClientRect().top if (pos <= 50) { if (max === null || pos > max) { - max = pos; - index = Array.from(contentElems).indexOf(elem); + max = pos + index = Array.from(contentElems).indexOf(elem) } - elements.push(elem); + elements.push(elem) } - }); + }) if (elements[index] && !projectsIDs.includes(elements[index].id) && !window.location.href.includes(elements[index].id)) { - const hash = 'index.html#' + elements[index].id; - window.history.replaceState(null, null, hash); + const hash = 'index.html#' + elements[index].id + window.history.replaceState(null, null, hash) } } function switchArticle(article) { - "use strict"; - if (backgroundHider.classList.contains('bgh-off')) { - backgroundHider.classList.remove('bgh-off'); + backgroundHider.classList.remove('bgh-off') } else { - backgroundHider.classList.add('bgh-off'); + backgroundHider.classList.add('bgh-off') } if (article !== null) { - article.style.display = 'flex'; + article.style.display = 'flex' } else { projectsContentList.forEach(function (art) { - art.style.display = 'none'; - }); + art.style.display = 'none' + }) } } function updateScrollDirectionElems() { - "user strict"; - - const scrollTop = window.scrollY; - let opacity = "100%"; - let visibility = "visible"; + const scrollTop = window.scrollY + let opacity = "100%" + let visibility = "visible" if (scrollTop > lastScrollTop && window.innerWidth >= LARGE) { - opacity = "50%"; + opacity = "50%" } if (scrollTop < 100) { - visibility = "hidden"; + visibility = "hidden" } - navBar.style.opacity = opacity; - scrollToTop.style.visibility = visibility; - lastScrollTop = scrollTop; + navBar.style.opacity = opacity + scrollToTop.style.visibility = visibility + lastScrollTop = scrollTop } function scrollHandler() { - "use strict"; + toAddClass('.to-fade', 'fade-in') + toAddClass('.to-grow', 'grow-in') + toAddClass('.to-slide', 'slide-in') - toAddClass('.to-fade', 'fade-in'); - toAddClass('.to-grow', 'grow-in'); - toAddClass('.to-slide', 'slide-in'); - - updateScrollDirectionElems(); - - updateTitle(); - - updateUrl(); + updateScrollDirectionElems() + updateTitle() + updateUrl() } -scrollHandler(); +scrollHandler() -window.addEventListener('scroll', scrollHandler); +window.addEventListener('scroll', scrollHandler) function switchNavBar() { - "use strict"; - const header = document.querySelector('.hamburger').parentNode.classList; + const header = document.querySelector('.hamburger').parentNode.classList if (header.contains('slide-in') || header.contains('to-cross')) { - header.remove('slide-in'); - header.remove('to-cross'); - navBarElems.classList.remove('slide-elements'); + header.remove('slide-in') + header.remove('to-cross') + navBarElems.classList.remove('slide-elements') } else { - header.add('slide-in'); - header.add('to-cross'); - navBarElems.classList.add('slide-elements'); + header.add('slide-in') + header.add('to-cross') + navBarElems.classList.add('slide-elements') } } document.querySelectorAll('nav a').forEach(function (a) { - "use strict"; - a.onclick = switchNavBar; -}); + a.onclick = switchNavBar +}) document.querySelectorAll('.projects-list article').forEach(function (a) { - "use strict"; a.onclick = function () { - switchArticle(document.getElementById(a.classList[0])); - }; -}); + switchArticle(document.getElementById(a.classList[0])) + } +}) diff --git a/stylesheet-main.css b/stylesheet-main.css index e23982b..d7f217f 100644 --- a/stylesheet-main.css +++ b/stylesheet-main.css @@ -552,11 +552,6 @@ a { backdrop-filter: blur(2px); } -#landing-style-bar { - width: 10%; - background-color: ; -} - #scrollToTop:hover { opacity: 100%; transform: scale(1.05);