!19 : Ajout de la police Luciole + switch vers le thème accessible

views/index.ejs

@@ -20,6 +20,10 @@
         <script src="/libs/vue/vue.global.prod.js"></script>
     
         <script>
+            /**
+             * Fonction permettant d'afficher un message dans un toastr
+             * @param {String} message
+             */
             function showToastr(message) {
                 let x = document.getElementById("toastr");
                 if ( message ) {
@@ -30,12 +34,82 @@
                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
             };
 
+            /**
+             * Fonction permettant de masquer le toastr
+             */
             function hideToastr() {
                 let x = document.getElementById("toastr");
                 
                 x.className = x.className.replace("show", "");
+                x.getElementsByTagName("SPAN")[0].innerHTML = "";
+            }
+
+            /**
+             * Fonction permettant de récupérer la valeur d'un cookie
+             * @param {String} cname
+             * @param {String} defaultValue
+             * 
+             * @return {String}
+             */
+            function getCookie(cname, defaultValue = 'false') {
+                let name = cname + "=";
+                let decodedCookie = decodeURIComponent(document.cookie);
+                let ca = decodedCookie.split(';');
+                for(let i = 0; i < ca.length; i+=1) {
+                    let c = ca[i];
+                    while (c.charAt(0) == ' ') {
+                    c = c.substring(1);
+                    }
+                    if (c.indexOf(name) == 0) {
+                    return c.substring(name.length, c.length);
+                    }
+                }
+                return defaultValue;
+            }
+
+            /**
+             * Fonction permettant de créer un cookie
+             * @param {String} cname
+             * @param {String} cvalue
+             * @param {Number} exdays
+             */
+            function setCookie(cname, cvalue, exdays = 30) {
+                const d = new Date();
+                d.setTime(d.getTime() + (exdays*24*60*60*1000));
+                let expires = "expires="+ d.toUTCString();
+                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+            }
+
+            /**
+             * Fonction de (dé)charger le thème accessible
+             * @param {String} value
+             */
+            function setAriaTheme(value) {
+                let body = document.body;
+                if ( value === 'true' ) {
+                    let classesString = body.className || "";
+                    if (classesString.indexOf("is-accessible") === -1) {
+                        body.classList.add("is-accessible");
+                    }
+                } else {
+                    body.classList.remove("is-accessible");
+                }
+            }
+
+            /**
+             * Fonction de (dé)charger  le thème accessible
+             */
+            function switchAriaTheme() {
+                let body = document.body;
+                
+                body.classList.toggle("is-accessible");
+
+                setCookie('ariatheme', body.classList.contains("is-accessible"));
             }
     
+            /**
+             * Ensemble d'actions effectuées au chargement de la page
+             */
             document.addEventListener('DOMContentLoaded', () => {
                 const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
                 if ($navbarBurgers.length > 0) {
@@ -49,6 +123,11 @@
                         });
                     });
                 }
+
+                const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
+                switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
+
+                setAriaTheme(getCookie('ariatheme'));
             });
         </script>
     </head>
@@ -105,6 +184,9 @@
                     <% } %>
                     <div class="navbar-item">
                         <div class="buttons">
+                            <button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site">
+                                <i class="icon-eye"></i>
+                            </button>
                             <% if ( !user ) { %>
                             <a class="button is-link" href="/connexion">
                                 <strong>Connexion</strong>
@@ -157,7 +239,7 @@
         <footer class="footer layout-hero">
             <p>
                 <strong title="Merci Brunus ! 😜">My Music Library</strong> par <a href="https://www.darkou.fr" target="_blank" rel="noopener noreferrer">Damien Broqua <i class="icon-link"></i></a>.
-                Fait avec ❤ à Bordeaux.
+                Fait avec ❤️ à Bordeaux.
                 Le code source est sous licence <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a>.
             </p>
         </footer>