allow to disable floating toggle

cappuc · cappuc · commit f887c5ac9f14 · 2025-05-29T11:53:41.000+02:00
diff --git a/config/cookie-solution.php b/config/cookie-solution.php
@@ -22,6 +22,13 @@
      */
     'highlight_color' => null,
 
+    /**
+     * Floating banner toggle
+     * if false, the banner toggle will not be displayed.
+     * You need to add "data-cookie-solution-toggle" attribute to an element to open the banner.
+     */
+    'toggle_enabled' => true,
+
     /**
      * Cookie toggle position (left or right).
      */
diff --git a/resources/js/components/banner.ts b/resources/js/components/banner.ts
@@ -36,6 +36,8 @@ function newEmptyStatus(): AcceptStatus {
 export class CookieSolutionBanner extends LitElement {
     static styles = [styleSheet];
 
+    protected disconnectedController?: AbortController;
+
     @property({ type: String, attribute: 'cookie-name' })
     cookieName: string = 'laravel_cookie_solution';
 
@@ -66,6 +68,9 @@ export class CookieSolutionBanner extends LitElement {
     async connectedCallback() {
         super.connectedCallback();
 
+        this.disconnectedController = new AbortController();
+
+        this._initListeners();
         await this._loadConfig();
         this._loadStatus();
         this._loadContrastColor();
@@ -80,6 +85,34 @@ export class CookieSolutionBanner extends LitElement {
         }
     }
 
+    disconnectedCallback() {
+        this.disconnectedController?.abort();
+
+        super.disconnectedCallback();
+    }
+
+    private _initListeners(): void {
+        document.addEventListener(
+            'click',
+            (event) => {
+                let target = event.target;
+
+                if (!(target instanceof HTMLElement)) {
+                    return;
+                }
+
+                if (target.getAttribute('data-cookie-solution-toggle') === null) {
+                    return;
+                }
+
+                event.preventDefault();
+
+                this.show();
+            },
+            { signal: this.disconnectedController?.signal },
+        );
+    }
+
     private async _loadConfig(): Promise<void> {
         this._config = window._cookieSolution;
     }
@@ -265,7 +298,7 @@ export class CookieSolutionBanner extends LitElement {
         }
 
         if (!this._showModal) {
-            return this.modalToggle();
+            return !this._config.toggle_enabled ? null : this.modalToggle();
         }
 
         return html`
diff --git a/resources/js/laravel-cookie-solution.ts b/resources/js/laravel-cookie-solution.ts
@@ -27,7 +27,7 @@ declare global {
     }
 }
 
-(function() {
+(function () {
     if (!document.querySelector('cookie-solution-banner')) {
         const cookieSolutionBanner = document.createElement('cookie-solution-banner');
         document.body.append(cookieSolutionBanner);
diff --git a/resources/js/types.ts b/resources/js/types.ts
@@ -16,6 +16,7 @@ export interface CookieSolutionConfig {
     digest: string;
     cookie_name: string;
     cookie_lifetime: number;
+    toggle_enabled: boolean;
     toggle_position: 'left' | 'right';
     cookies: Record<CookiePurpose, ServiceConfig[]>;
     integrations?: {
diff --git a/src/CookieSolution.php b/src/CookieSolution.php
@@ -129,6 +129,7 @@ public function getConfig(): array
             'digest' => $this->configDigest(),
             'cookie_name' => config('cookie-solution.cookie_name'),
             'cookie_lifetime' => config('cookie-solution.cookie_lifetime'),
+            'toggle_enabled' => config('cookie-solution.toggle_enabled', true),
             'toggle_position' => config('cookie-solution.toggle_position', 'right'),
             'texts' => [
                 'tab_consent' => __('cookie-solution::texts.banner.tab_consent'),
diff --git a/workbench/app/Providers/WorkbenchServiceProvider.php b/workbench/app/Providers/WorkbenchServiceProvider.php
@@ -64,5 +64,10 @@ public function boot(): void
             });
 
         Route::view('manual-add', 'manual-add');
+        Route::get('custom-toggle', function () {
+            config()->set('cookie-solution.toggle_enabled', false);
+
+            return view('custom-toggle');
+        });
     }
 }
diff --git a/workbench/resources/views/custom-toggle.blade.php b/workbench/resources/views/custom-toggle.blade.php
@@ -0,0 +1,18 @@
+<html lang="{{ app()->getLocale() }}">
+<head>
+    <title>
+        Cookie Solution custom toggle
+    </title>
+    @include('cookie-solution::script')
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="font-sans antialiased">
+<main class="max-w-screen-lg mx-auto px-4 grid gap-16 py-16">
+   <div>
+       <button class="text-lg hover:underline" data-cookie-solution-toggle>
+           cookie preferences
+       </button>
+   </div>
+</main>
+</body>
+</html>
diff --git a/workbench/resources/views/index.blade.php b/workbench/resources/views/index.blade.php
@@ -15,6 +15,12 @@
     </nav>
 </header>
 <main class="max-w-screen-lg mx-auto px-4 grid gap-16 py-16">
+    <div>
+        <button class="text-lg hover:underline" data-cookie-solution-toggle>
+            cookie preferences
+        </button>
+    </div>
+    <hr>
     <section>
         @include('cookie-solution::cookie-policy')
     </section>

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ declare global {`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`
`30`		`-(function() {`
	`30`	`+(function () {`
`31`	`31`	`if (!document.querySelector('cookie-solution-banner')) {`
`32`	`32`	`const cookieSolutionBanner = document.createElement('cookie-solution-banner');`
`33`	`33`	`document.body.append(cookieSolutionBanner);`
Original file line number	Diff line number	Diff line change
`@@ -64,5 +64,10 @@ public function boot(): void`
`64`	`64`	`});`
`65`	`65`
`66`	`66`	`Route::view('manual-add', 'manual-add');`
	`67`	`+ Route::get('custom-toggle', function () {`
	`68`	`+ config()->set('cookie-solution.toggle_enabled', false);`
	`69`	`+`
	`70`	`+ return view('custom-toggle');`
	`71`	`+ });`
`67`	`72`	`}`
`68`	`73`	`}`