From c641f9a0a57573c8cba3f3c36ab32435cfce5746 Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Sun, 25 Jun 2023 13:10:15 +0200 Subject: [PATCH] The loading now is respected before playing any animation. Added playIndexAnimation(), finishedLoading, load() function now has a promise. --- components/footer.html | 7 ------- css/navbar.css | 24 ++++++++++++++-------- js/base.js | 46 +++++++++++++++++++++++++----------------- js/index.js | 26 +++++++++++++++--------- 4 files changed, 59 insertions(+), 44 deletions(-) diff --git a/components/footer.html b/components/footer.html index d2d0049..0a53c45 100644 --- a/components/footer.html +++ b/components/footer.html @@ -39,13 +39,6 @@ données qui le concernent. Cependant, Saoul Bonmonsieur possède un droit de Veto dans votre dimension ainsi que 5 autres et ne vous autorise donc ni à accèder, ni à supprimer ces derniers

- Il en est de même des éventuelles bases de données figurant sur le site Internet qui sont protégées - par - les dispositions de la loi du 11 juillet 1998 portant transposition dans le Code de la propriété - intellectuelle (CPI) de la directive européenne du 11 mars 1996 relative à la protection juridique - des - bases de données. -

Le logo de Saoul Bonmonsieur n'est ni reproductible ni utilisable dans d'autres domaines. Nous savons qu'il est beau, voire magnifique. S'il vous arrive de l'utiliser Saul Bonmonsieur sera dans l'obligation de vous poursuivre en justice, et vous ne gagnerez pas, ni ne pouvez être défendu par diff --git a/css/navbar.css b/css/navbar.css index 409c587..d1af298 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -2,14 +2,6 @@ padding: 2.5rem; } -#navbar_logo-container { - height: 5rem; - width: 5rem; - display: flex; - position: fixed; - right: 5rem; -} - .navbar_logo { height: 5rem; } @@ -28,6 +20,14 @@ overflow: initial; } + #navbar_logo-container { + height: 5rem; + width: 5rem; + display: flex; + position: fixed; + right: 5rem; + } + #navbar_text-container { font-family: 'Josefin Sans', sans-serif; position: fixed; @@ -81,6 +81,14 @@ overflow: initial; } + #navbar_logo-container { + height: 5rem; + width: 5rem; + display: flex; + position: fixed; + right: 2.5rem; + } + #navbar_text-container { font-family: 'Josefin Sans', sans-serif; position: fixed; diff --git a/js/base.js b/js/base.js index f455e1a..dfaf82e 100644 --- a/js/base.js +++ b/js/base.js @@ -5,24 +5,30 @@ var urlStr = window.location.toString().slice(0, window.location.toString().lastIndexOf(window.location.pathname) + 1); //Getting the dir name by gathering the pathname and substract it with the last '/'. var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/')); +//Global variable set to true when finished loading external html/css/js files +var finishedLoading = false; /****************************************/ /* functions */ /****************************************/ function load(urlHTML, elementHTML, urlJS, elementJS) { - fetch(urlHTML).then(res => { - return res.text(); - }).then(htmltext => { - return elementHTML.innerHTML = htmltext; - }).then(loadedHTML => { - loadJS(urlJS, elementJS); - }) - .catch( - function (err) { - console.warn('Could not load ' + urlHTML + ': Add the correct tag ?', err); - } - ); + const returnPromise = new Promise((resolve, reject) => { + fetch(urlHTML).then(res => { + return res.text(); + }).then(htmltext => { + return elementHTML.innerHTML = htmltext; + }).then(loadedHTML => { + loadJS(urlJS, elementJS); + resolve(elementHTML); + }) + .catch( + function (err) { + reject('Could not load ' + urlHTML + ': Add the correct tag ?', err); + } + ); + }); + return returnPromise; } function loadHTML(url, element) { @@ -116,14 +122,16 @@ function popUpPlacement(className) { //During the loading process we need a loading status bar var headTag = document.getElementsByTagName("head")[0]; window.addEventListener('load', function () { - loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag) + //instant loading + loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag); loadCSS(urlStr + "css/base.css", headTag); loadCSS(urlStr + "css/navbar.css", headTag); - load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag); loadCSS(urlStr + "css/footer.css", headTag); - load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag) - setTimeout(() => { - //Will change - popUpPlacement("black-bg"); - }, 500); + //async loading + load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag).then(() => { + load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag).then(() => { + finishedLoading = true; + popUpPlacement("black-bg"); + }); + }); }) \ No newline at end of file diff --git a/js/index.js b/js/index.js index 1727fc3..2da3a21 100644 --- a/js/index.js +++ b/js/index.js @@ -2,6 +2,7 @@ /* global variables */ /****************************************/ +//status if saoul has disappeared or not var saulDisappeared = 0; /****************************************/ @@ -19,6 +20,7 @@ var nomoreSaoul = anime({ var saoulAnimation = anime({ targets: '.photosaoul', easing: 'easeOutQuint', + autoplay: false, translateX: [ { value: "", duration: 100, delay: 0 }, { value: "130%", duration: 1000, delay: 100 } @@ -55,15 +57,11 @@ var textAnimation = anime({ /* main */ /****************************************/ -saoulAnimation.reverse() -ready(function () { - setTimeout(() => { - saoulAnimation.play(); - whiteBandAnimation.play(); - textAnimation.play(); - }, 1000); -}); +//playing the first animation on the page +saoulAnimation.reverse(); +playIndexAnimation(); +//eventlistener to make saoul dissapear when scrolling at a certain point window.addEventListener("scroll", function (e) { var saoulPhoto = document.getElementsByClassName("photosaoul")[0]; if (document.getElementsByClassName("description")[0].getBoundingClientRect().y < 150) { @@ -94,6 +92,14 @@ window.addEventListener("scroll", function (e) { /* functions */ /****************************************/ -function superAnim() { - saoulAnimation.play() + +async function playIndexAnimation() { + while (!finishedLoading) { + await new Promise(resolve => setTimeout(resolve, 200)); + } + setTimeout(() => { + whiteBandAnimation.play(); + textAnimation.play(); + saoulAnimation.restart(); + }, 500); } \ No newline at end of file