refactoring

scify · Feb 3, 2025 · 2e5b69f · 2e5b69f
1 parent 47382e3
commit 2e5b69f
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -466,6 +466,7 @@ Also, don't forget to update the `CHANGELOG.md` file with the new version name,
 ## Credits
 
 - [SciFY Dev Team](https://github.com/scify)
+- <a href="https://www.flaticon.com/free-icons/cookie" title="cookie icons">Cookie icons created by Freepik - Flaticon</a>
 
 ## License
 

diff --git a/public/cookies-consent.css b/public/cookies-consent.css
diff --git a/public/cookies-consent.js b/public/cookies-consent.js
diff --git a/resources/js/cookies-consent.js b/resources/js/cookies-consent.js
@@ -6,32 +6,91 @@ document.addEventListener('DOMContentLoaded', function () {
     initializeCookiePolicyLink();
 });
 
+/**
+ * Initializes the accordion buttons by attaching event listeners to them.
+ *
+ * @function initializeAccordionButtons
+ * @returns {void}
+ *
+ * @description
+ * This function initializes the accordion buttons by attaching event listeners to them.
+ */
 function initializeAccordionButtons() {
+
+    // Remove existing event listeners to avoid duplication
     document.querySelectorAll('.accordion-button').forEach(button => {
-        button.addEventListener('click', function () {
-            toggleAccordion(button);
-        });
+        button.removeEventListener('click', handleAccordionClick);
+    });
+
+    // Attach new event listeners
+    document.querySelectorAll('.accordion-button').forEach(button => {
+        button.addEventListener('click', handleAccordionClick);
     });
 }
 
+/**
+ * Handles the click event on an accordion button.
+ *
+ * @function handleAccordionClick
+ * @param event {Event} The click event
+ * @returns {void}
+ *
+ * @description
+ * This function handles the click event on an accordion button.
+ */
+function handleAccordionClick(event) {
+    event.stopPropagation(); // Stop event propagation
+    const button = event.currentTarget;
+    toggleAccordion(button);
+}
+
+/**
+ * Toggles the accordion item associated with the clicked button.
+ *
+ * @param button {Element} The clicked button
+ * @returns {void}
+ *
+ * @description
+ * This function toggles the accordion item associated with the clicked button.
+ * If the accordion item is already open, it closes it. If it is closed, it opens it.
+ * It also closes all other accordion items except the clicked one.
+ */
 function toggleAccordion(button) {
     const target = document.querySelector(button.dataset.target);
 
-    // Close all accordion items
+    // Close all accordion items except the clicked one
     document.querySelectorAll('.accordion-collapse').forEach(collapse => {
-        collapse.classList.remove('show');
-    });
-    document.querySelectorAll('.accordion-button').forEach(btn => {
-        btn.classList.add('collapsed');
+        if (collapse !== target) {
+            collapse.classList.remove('show');
+        }
     });
 
-    // Open the clicked accordion item
-    if (target) {
-        target.classList.toggle('show');
-        button.classList.toggle('collapsed');
+    // Toggle the clicked accordion item
+    if (target.classList.contains('show')) {
+        // If the accordion is already open, close it
+        target.classList.remove('show');
+        button.classList.add('collapsed');
+    } else {
+        // If the accordion is closed, open it
+        target.classList.add('show');
+        button.classList.remove('collapsed');
     }
 }
 
+/**
+ * Initializes the cookie banner by setting up the necessary event listeners and cookie handling.
+ *
+ * @function initializeCookieBanner
+ * @returns {void}
+ *
+ * @description
+ * This function initializes the cookie banner by setting up the necessary event listeners and cookie handling.
+ * It also sets the initial state of the banner based on the user's cookie consent.
+ * If the user has already accepted the cookies, the banner is hidden.
+ * If the user has not accepted the cookies, the banner is displayed
+ * and the floating button is shown if the configuration allows it.
+ * The cookie settings are stored as a JSON object with the category names as keys and their consent status as values.
+ */
 function initializeCookieBanner() {
     const cookieBanner = document.getElementById('cookies-consent-banner');
     const cookieButton = document.getElementById('scify-cookie-consent-floating-button');
@@ -78,6 +137,16 @@ function toggleBannerDisplay(cookieBanner, cookieButton, showFloatingButton, hid
     }
 }
 
+/**
+ * Sets the sliders based on the user's cookie consent.
+ * @param cookieConsent {string} The user's cookie consent as a JSON string
+ *
+ * @function setSliders
+ * @returns {void}
+ * @description
+ * This function sets the sliders based on the user's cookie consent.
+ * If the user has already accepted the cookies, the sliders are set according to the consent settings.
+ */
 function setSliders(cookieConsent) {
     if (cookieConsent) {
         const consentSettings = JSON.parse(cookieConsent);
@@ -110,6 +179,17 @@ function getConsentSettings(acceptAll = false, requiredCategory = null) {
     return consent;
 }
 
+/**
+ * Handles the user's cookie consent by sending an AJAX request to the server.
+ * @param consent {Object} The user's cookie consent settings
+ * @returns {void}
+ * @description
+ * This function handles the user's cookie consent by sending an AJAX request to the server.
+ * The consent settings are stored as a JSON object with the category names as keys and their consent status as values.
+ * The consent settings are then stored in a cookie with a specified prefix.
+ * If the consent is successfully stored, the cookie banner is hidden and a success message is displayed
+ * to inform the user about the successful storage of their consent.
+ */
 function handleCookieConsent(consent) {
     const cookieBanner = document.getElementById('cookies-consent-banner');
     const cookieButton = document.getElementById('scify-cookie-consent-floating-button');
@@ -181,10 +261,10 @@ function setCookie(name, value, days) {
 function getCookie(name) {
     const nameEQ = name + "=";
     const ca = document.cookie.split(';');
-    for (let i = 0; i < ca.length; i++) {
-        let c = ca[i].trim();
-        if (c.startsWith(nameEQ)) {
-            return c.substring(nameEQ.length, c.length);
+    for (const c of ca) {
+        let cookie = c.trim();
+        if (cookie.startsWith(nameEQ)) {
+            return cookie.substring(nameEQ.length, cookie.length);
         }
     }
     return null;

diff --git a/resources/scss/cookies-consent.scss b/resources/scss/cookies-consent.scss
@@ -44,7 +44,7 @@
   border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   max-width: 800px;
-  margin: 20px auto;
+  margin: 0;
 
   a {
     font-size: inherit;

diff --git a/resources/views/components/_cookie-categories.blade.php b/resources/views/components/_cookie-categories.blade.php
@@ -56,4 +56,4 @@ class="accordion-collapse {{ $alwaysOpen || $category === 'strictly_necessary' ?
             </div>
         </div>
     @endforeach
-</div>
+</div>
diff --git a/resources/views/components/laravel-cookies-consent.blade.php b/resources/views/components/laravel-cookies-consent.blade.php
@@ -1,11 +1,11 @@
-<section class="cookies-consent-banner banner cookies-policy-body" id="cookies-consent-banner" role="dialog"
-         aria-labelledby="cookie-consent-title"
-         aria-describedby="cookie-consent-description"
-         data-ajax-url="{{ url('/cookie-consent/save') }}"
-         data-show-floating-button="{{ config('cookies_consent.display_floating_button') }}"
-         data-hide-floating-button-on-mobile="{{ config('cookies_consent.hide_floating_button_on_mobile') }}"
-         data-cookie-prefix="{{ config('cookies_consent.cookie_prefix') }}"
-         style="display: none;">
+<dialog class="cookies-consent-banner banner cookies-policy-body" id="cookies-consent-banner"
+        aria-labelledby="cookie-consent-title"
+        aria-describedby="cookie-consent-description"
+        data-ajax-url="{{ url('/cookie-consent/save') }}"
+        data-show-floating-button="{{ config('cookies_consent.display_floating_button') }}"
+        data-hide-floating-button-on-mobile="{{ config('cookies_consent.hide_floating_button_on_mobile') }}"
+        data-cookie-prefix="{{ config('cookies_consent.cookie_prefix') }}"
+        style="display: none;">
     <div class="cookies-container">
         <h5 id="cookie-consent-title" class="h5 m-0 pt-0 pb-2">{{ __('cookies_consent::messages.title') }}</h5>
         <p id="cookie-consent-description" class="small">{{ __('cookies_consent::messages.description') }}</p>
@@ -57,15 +57,14 @@
             </div>
         </div>
     </div>
-</section>
+</dialog>
 
 @if(config('cookies_consent.display_floating_button'))
-    <div id="scify-cookie-consent-floating-button" class="cookie-button" style="display: none;"
-         onclick="toggleCookieBanner()" onkeyup="if (event.key === 'Enter') toggleCookieBanner()" role="button"
+    <button id="scify-cookie-consent-floating-button" class="cookie-button" style="display: none;"
+         onclick="toggleCookieBanner()" onkeyup="if (event.key === 'Enter') toggleCookieBanner()"
          tabindex="0">
         <img src="{{ asset('vendor/scify/laravel-cookies-consent/cookie.png') }}" alt="Cookie">
-    </div>
+    </button>
 @endif
-{{--<a href="javascript:void(0);" onclick="toggleCookieBanner()" onkeyup="if (event.key === 'Enter') toggleCookieBanner()" role="button" aria-label="Manage Cookies">Manage Cookies</a>--}}
 <link rel="stylesheet" href="{{ asset('vendor/scify/laravel-cookies-consent/cookies-consent.css') }}">
-<script src="{{ asset('vendor/scify/laravel-cookies-consent/cookies-consent.js') }}"></script>
+<script src="{{ asset('vendor/scify/laravel-cookies-consent/cookies-consent.js') }}"></script>
diff --git a/resources/views/cookie-policy.blade.php b/resources/views/cookie-policy.blade.php
@@ -1,4 +1,3 @@
-<!-- resources/views/cookie-policy.blade.php -->
 <!DOCTYPE html>
 <html lang="{{ \Illuminate\Support\Facades\App::getLocale() }}">
 <head>
@@ -52,13 +51,13 @@
     </div>
     <div class="row">
         <div class="col">
-            <section class="cookies-consent-banner" id="cookies-consent-banner" role="dialog"
-                     aria-labelledby="cookie-consent-title"
-                     aria-describedby="cookie-consent-description"
-                     data-ajax-url="{{ url('/cookie-consent/save') }}"
-                     data-cookie-prefix="{{ config('cookies_consent.cookie_prefix') }}"
-                     data-show-floating-button="false"
-                     data-hide-floating-button-on-mobile="{{ config('cookies_consent.hide_floating_button_on_mobile') }}">
+            <dialog class="cookies-consent-banner banner cookies-policy-body" id="cookies-consent-banner"
+                    aria-labelledby="cookie-consent-title"
+                    aria-describedby="cookie-consent-description"
+                    data-ajax-url="{{ url('/cookie-consent/save') }}"
+                    data-cookie-prefix="{{ config('cookies_consent.cookie_prefix') }}"
+                    data-show-floating-button="false"
+                    data-hide-floating-button-on-mobile="{{ config('cookies_consent.hide_floating_button_on_mobile') }}">
                 @include('cookies_consent::components._cookie-categories', ['alwaysOpen' => true])
                 <div class="cookie-actions">
                     <div class="container-fluid p-0">
@@ -84,10 +83,10 @@
                         </div>
                     </div>
                 </div>
-            </section>
+            </dialog>
         </div>
     </div>
 </div>
 <script type="module" src="{{ asset('vendor/cookies_consent/js/cookies-consent.js') }}"></script>
 </body>
-</html>
+</html>
-Original file line number
+Diff line change
@@ Expand Up @@
                 </div>
             </div>
         @endforeach
-    </div>
+    </div>