refactor(app): modalbox and menu logic with smart reloading.

Author: Nde-Code

js/app.js

@@ -14,14 +14,14 @@ $(window).on('resize', () => {
 
     let newWidth = $(document).width();
 
-    if (Math.abs(globalData.starting_width - newWidth) > globalData.tol_resize) document.location.reload(true);
+    if (Math.abs(globalData.starting_width - newWidth) > globalData.tol_resize) document.location.reload();
 
 });
 
-function openNotesBox() {
+function getNotesTemplate() {
 
-    let aboutBoxHtml = `
-    <div class="modalbox-class" id="modalbox-notes" role="dialog">
+    return `
+    <div class="modalbox-class" id="modalbox-notes" role="dialog" style="display:none;">
 
         <header class="modalbox-header-class">
 
@@ -107,77 +107,96 @@ function openNotesBox() {
 
     </div>`;
 
-    $("#modalbox-notes").remove();
+}
 
-    $("#modalbox-open-div").append(aboutBoxHtml);
+function openNotesBox() {
 
-    mobileNotesBox(globalData.modalbox_size);
+    let $modal = $("#modalbox-notes");
 
-    $('.overlay').css('display', 'block');
+    if ($modal.length === 0) {
+
+        $("#modalbox-open-div").append(getNotesTemplate());
+
+        $modal = $("#modalbox-notes"); 
+        
+    }
+
+    applyMobileStyles($modal);
+    
+    $modal.show();
+
+    $('.overlay').show();
 
 }
 
-function mobileNotesBox(windowSize) {
+function applyMobileStyles($element) {
 
     if ($(window).width() <= 768) {
 
-        $("#modalbox-notes").css({
+        $element.css({
 
             'marginLeft': 'unset',
 
             'left': 'unset',
 
-            'width': windowSize
+            'width': globalData.modalbox_size
 
         });
 
     }
 
 }
 
-// Merci: https://stackoverflow.com/questions/48002147/how-to-activate-and-disable-jquery-click-events-on-an-html-element
-$('#display-mobile-menu').on('click', function () {
+$(document).ready(function () {
+
+    $("#notes-btn-id").on("click", openNotesBox);
 
-    let $this = $(this);
+    $(document).on('click', '#close-notes-btn, .overlay', () => {
 
-    if (!$this.is(".active")) {
+        $('#modalbox-notes').hide();
 
-        $this.addClass('active');
+        $('.overlay').hide();
 
-        $this.attr('aria-expanded', 'true');
+    });
 
-        $this.attr('aria-label', 'Fermer le menu de navigation.');
+    $("#copyright").text(new Date().getFullYear());
 
-        $(".menu-dropdown .menu-dropdown-btn").css("display", "block");
+    // Merci: https://stackoverflow.com/questions/48002147/how-to-activate-and-disable-jquery-click-events-on-an-html-element
+    $('#display-mobile-menu').on('click', function () {
 
-        $(".menu-item").css("display", "block");
+        let $this = $(this);
 
-        $this.html('<i class="fa-solid fa-xmark"></i>');
+        if (!$this.is(".active")) {
 
-    } else {
+            $this.addClass('active');
 
-        $this.removeClass('active');
+            $this.attr('aria-expanded', 'true');
 
-        $this.attr('aria-expanded', 'false');
+            $this.attr('aria-label', 'Fermer le menu de navigation.');
 
-        $this.attr('aria-label', 'Ouvrir le menu de navigation.');
+            $(".menu-dropdown .menu-dropdown-btn").css("display", "block");
 
-        $this.html('<i class="fa-solid fa-bars"></i>');
+            $(".menu-item").css("display", "block");
 
-        $(".menu-dropdown .menu-dropdown-btn").css("display", "none");
+            $this.html('<i class="fa-solid fa-xmark"></i>');
 
-        $(".menu-item").css("display", "none");
+        } else {
 
-    }
+            $this.removeClass('active');
 
-});
+            $this.attr('aria-expanded', 'false');
 
-$(document).ready(function () {
+            $this.attr('aria-label', 'Ouvrir le menu de navigation.');
 
-    $("#notes-btn-id").on("click", openNotesBox);
+            $this.html('<i class="fa-solid fa-bars"></i>');
+
+            $(".menu-dropdown .menu-dropdown-btn").css("display", "none");
 
-    $(document).on('click', '#close-notes-btn, .overlay', () => { $('#modalbox-notes, .overlay').hide(); });
+            $(".menu-item").css("display", "none");
 
-    $("#copyright").html(new Date().getFullYear());
+        }
+
+    });
 
 });
+

online/meteorites-map.html

@@ -951,7 +951,7 @@ <h2>Top ${extendedData.ranking} des classes de météorites:</h2>
 
             let newWidth = $(document).width();
 
-            if (Math.abs(extendedData.starting_width - newWidth) > extendedData.tol_resize) document.location.reload(true);
+            if (Math.abs(extendedData.starting_width - newWidth) > extendedData.tol_resize) document.location.reload();
 
         });