Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added loading bar. base.js is now loaded at the end of the document to gather all DOM elements.

Browse source
This commit is contained in:
Yohan Boujon 2023-06-25 15:04:32 +02:00
parent 74f6ab0609
commit 49458f96fb
9 changed files with 103 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
avocat/index.html
View file

@ -8,8 +8,8 @@
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script>
<link href="../css/avocat.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
</head>
<body>
@ -30,3 +30,4 @@
</body>
</html>
<script src="js/base.js"></script>

25
css/base.css
View file

@ -84,6 +84,31 @@ p {
z-index: 99;
}
#loading-container {
width: auto;
height: 30%;
top: 35%;
position: relative;
display: flex;
flex-direction: column;
}
.loading-content img{
margin: 0.5rem;
height: auto;
width: 30%;
display: flex;
margin-left: auto;
margin-right: auto;
}
.loading-content p{
color: var(--color-dark);
font-size: xx-large;
text-align: center;
margin: 1rem;
}
@media screen and (min-width: 700px) {
.block {
background-color: var(--color-main-light);

3
droits/affaire.html
View file

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script>
<link href="css/base.css" rel="stylesheet">
</head>
<body>
@ -16,3 +16,4 @@
</body>
</html>
<script src="js/base.js"></script>

3
droits/penal.html
View file

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script>
<link href="css/base.css" rel="stylesheet">
</head>
<body>
@ -16,3 +16,4 @@
</body>
</html>
<script src="js/base.js"></script>

4
index.html
View file

@ -8,7 +8,7 @@
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<script src="lib/anime.min.js"></script>
<script src="js/base.js"></script>
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
@ -83,5 +83,5 @@
</body>
</html>
<script src="js/base.js"></script>
<script src="js/index.js"></script>

3
join/contact.html
View file

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script>
<link href="css/base.css" rel="stylesheet">
</head>
<body>
@ -16,3 +16,4 @@
</body>
</html>
<script src="js/base.js"></script>

3
join/coordonees.html
View file

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script>
<link href="css/base.css" rel="stylesheet">
</head>
<body>
@ -16,3 +16,4 @@
</body>
</html>
<script src="js/base.js"></script>

65
js/base.js
View file

@ -7,6 +7,8 @@ var urlStr = window.location.toString().slice(0, window.location.toString().last
var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
//the head tag
var headTag = document.getElementsByTagName("head")[0];
//the body tag
var bodyTag = document.getElementsByTagName("body")[0];
//Global variable set to true when finished loading external html/css/js files
var finishedLoading = false;
@ -98,39 +100,64 @@ function concatPath(slashNum, basePath) {
return slashString + basePath;
}
function showPopUp(className) {
document.getElementsByClassName(className)[0].style.display = "block";
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
function closePopUp(className) {
document.getElementsByClassName(className)[0].style.display = "none";
document.getElementsByTagName("body")[0].style.height = "";
document.getElementsByTagName("body")[0].style.overflow = "";
}
function popUpPlacement(className) {
var popup = document.getElementsByClassName(className)[0];
var body = document.getElementsByTagName("body")[0];
body.insertBefore(popup, body.firstChild)
}
function loadingCreation() {
var elementLoadingBg = document.createElement("div");
elementLoadingBg.id="loading-bg";
var elementLoadingContainer = document.createElement("div");
elementLoadingContainer.id="loading-container";
//the text inside the container
var elementLoadingContentTxt = document.createElement("div");
elementLoadingContentTxt.className="loading-content";
var txt = document.createElement("p");
txt.innerHTML="Loading...";
elementLoadingContentTxt.appendChild(txt);
//the image inside the container
var elementLoadingContentImg = document.createElement("div");
elementLoadingContentImg.className="loading-content";
var img = document.createElement("img");
img.className = "loading-img";
img.src = "assets/Logo.png";
elementLoadingContentImg.appendChild(img);
//we then append all
elementLoadingContainer.append(elementLoadingContentImg);
elementLoadingContainer.append(elementLoadingContentTxt);
elementLoadingBg.append(elementLoadingContainer);
return elementLoadingBg;
}
/****************************************/
/* main */
/****************************************/
window.addEventListener('load', function () {
var body = document.getElementsByTagName("body")[0];
//loading elements
var loadingBackground = document.createElement("div");
loadingBackground.id = "loading-bg";
body.insertBefore(loadingBackground, body.firstChild);
//Adding the loading bar
var loadingElement = loadingCreation();
bodyTag.insertBefore(loadingElement, bodyTag.firstChild);
//We then create the animation
var loadingAnimation = anime({
targets: '.loading-content .loading-img',
easing: 'easeOutQuint',
translateY: [
{ value: -30, duration: 1000, delay: 0 },
{ value: -30, duration: 500, delay: 0 },
{ value: 0, duration: 1000, delay: 0 }
],
loop: true
});
//Loading the html,js and css of navbar and footer
window.addEventListener('load', function () {
//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);
loadCSS(urlStr + "css/footer.css", headTag);
//async loading

15
js/footer.js
View file

@ -0,0 +1,15 @@
/****************************************/
/* functions */
/****************************************/
function showPopUp(className) {
document.getElementsByClassName(className)[0].style.display = "block";
document.getElementsByTagName("body")[0].style.height = "100%";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
}
function closePopUp(className) {
document.getElementsByClassName(className)[0].style.display = "none";
document.getElementsByTagName("body")[0].style.height = "";
document.getElementsByTagName("body")[0].style.overflow = "";
}