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

25
css/base.css
View file

@ -84,6 +84,31 @@ p {
z-index: 99; 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) { @media screen and (min-width: 700px) {
.block { .block {
background-color: var(--color-main-light); 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"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script> <link href="css/base.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -16,3 +16,4 @@
</body> </body>
</html> </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"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script> <link href="css/base.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -16,3 +16,4 @@
</body> </body>
</html> </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"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<script src="lib/anime.min.js"></script> <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"> <link href="css/index.css" rel="stylesheet">
</head> </head>
@ -83,5 +83,5 @@
</body> </body>
</html> </html>
<script src="js/base.js"></script>
<script src="js/index.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"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script> <link href="css/base.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -16,3 +16,4 @@
</body> </body>
</html> </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"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="../lib/anime.min.js"></script> <script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script> <link href="css/base.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -16,3 +16,4 @@
</body> </body>
</html> </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('/')); var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
//the head tag //the head tag
var headTag = document.getElementsByTagName("head")[0]; 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 //Global variable set to true when finished loading external html/css/js files
var finishedLoading = false; var finishedLoading = false;
@ -98,39 +100,64 @@ function concatPath(slashNum, basePath) {
return slashString + 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) { function popUpPlacement(className) {
var popup = document.getElementsByClassName(className)[0]; var popup = document.getElementsByClassName(className)[0];
var body = document.getElementsByTagName("body")[0]; var body = document.getElementsByTagName("body")[0];
body.insertBefore(popup, body.firstChild) 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 */ /* main */
/****************************************/ /****************************************/
window.addEventListener('load', function () { //Adding the loading bar
var body = document.getElementsByTagName("body")[0]; var loadingElement = loadingCreation();
//loading elements bodyTag.insertBefore(loadingElement, bodyTag.firstChild);
var loadingBackground = document.createElement("div");
loadingBackground.id = "loading-bg"; //We then create the animation
body.insertBefore(loadingBackground, body.firstChild); 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 //Loading the html,js and css of navbar and footer
window.addEventListener('load', function () { window.addEventListener('load', function () {
//instant loading //instant loading
loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag); 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/navbar.css", headTag);
loadCSS(urlStr + "css/footer.css", headTag); loadCSS(urlStr + "css/footer.css", headTag);
//async loading //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 = "";
}