From 8b140851b7349e2bb41b24c0e4df8f63dd2ca6b6 Mon Sep 17 00:00:00 2001
From: Jonas Eberle <flightvision@googlemail.com>
Date: Wed, 6 Mar 2024 18:53:07 +0100
Subject: [PATCH] feat: allow opening via click on any [data-cookieman-show]

Fixes: #205
---
 .../Configuration/TypoScript/setup.typoscript |  2 +
 .../ext_typoscript_setup.typoscript           |  2 +
 .../Configuration/Customization/Index.rst     | 20 ++++++++
 Documentation/Developer/JavaScript.rst        | 10 ++--
 Resources/Public/Js/cookieman.js              | 22 ++++++++
 Tests/Acceptance/Frontend/OpenPopupCest.php   | 51 +++++++++++++++++++
 6 files changed, 101 insertions(+), 6 deletions(-)
 create mode 100644 Tests/Acceptance/Frontend/OpenPopupCest.php

diff --git a/Build/cookieman_test/Configuration/TypoScript/setup.typoscript b/Build/cookieman_test/Configuration/TypoScript/setup.typoscript
index e69de29b..41adc4ee 100644
--- a/Build/cookieman_test/Configuration/TypoScript/setup.typoscript
+++ b/Build/cookieman_test/Configuration/TypoScript/setup.typoscript
@@ -0,0 +1,2 @@
+page.5 = TEXT
+page.5.value = <button data-cookieman-show>Example button: Adjust your cookie preferences</button>
diff --git a/Build/cookieman_test/ext_typoscript_setup.typoscript b/Build/cookieman_test/ext_typoscript_setup.typoscript
index 81befbc8..e5c0f733 100644
--- a/Build/cookieman_test/ext_typoscript_setup.typoscript
+++ b/Build/cookieman_test/ext_typoscript_setup.typoscript
@@ -1,3 +1,5 @@
+@import 'EXT:cookieman_test/Configuration/TypoScript/setup.typoscript'
+
 @import 'EXT:cookieman/Configuration/TypoScript/setup.typoscript'
 @import 'EXT:cookieman/Configuration/TypoScript/Example/setup.typoscript'
 
diff --git a/Documentation/Configuration/Customization/Index.rst b/Documentation/Configuration/Customization/Index.rst
index 41cb0208..bd7edc54 100644
--- a/Documentation/Configuration/Customization/Index.rst
+++ b/Documentation/Configuration/Customization/Index.rst
@@ -131,3 +131,23 @@ Uncheck all checkboxes
               data-cookieman-save>
                   {f:translate(key: 'deny')}
       </button>
+
+
+Global functionality with data-attributes
+=========================================
+
+<* data-cookieman-show>
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+.. rst-class:: dl-parameters
+
+Opens the cookieman dialog
+   It can be added to any HTML element. The element does not have to be there on
+   initial load (thus it should work with web components, VueJS, react, etc.).
+
+   Example:
+
+   .. code-block:: HTML
+
+      <button data-cookieman-show>
+        Adjust your cookie preferences
+      </button>
diff --git a/Documentation/Developer/JavaScript.rst b/Documentation/Developer/JavaScript.rst
index 39ca8f87..9fd5a718 100644
--- a/Documentation/Developer/JavaScript.rst
+++ b/Documentation/Developer/JavaScript.rst
@@ -28,18 +28,16 @@ cookieman.show()
    :sep:`|` :aspect:`Data type:` void
    :sep:`|`
 
-   Shows the confirmation modal. You can call that from anywhere you need it (e.g. with a link from your data protection declaration page).
+   Shows the confirmation modal.
+
+   You can also use the attribute `data-cookieman-show` on any element to show the modal when clicked.
 
    .. code-block:: HTML
 
-      <button onclick="cookieman.show()">
+      <button data-cookieman-show>
         Adjust your cookie preferences
       </button>
 
-   .. attention::
-
-      If your website uses a strict `Content-Security-Policy` (see `Mozilla Developer Network <https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP>`__) the onclick= needs to be replaced with registering a click-handler from an external <script> (also see :ref:`how cookieman supports Content-Security-Policy <content-security-policy>`).
-
 cookieman.hide()
 ^^^^^^^^^^^^^^^^
 .. rst-class:: dl-parameters
diff --git a/Resources/Public/Js/cookieman.js b/Resources/Public/Js/cookieman.js
index c9c57cc1..d0fd995b 100644
--- a/Resources/Public/Js/cookieman.js
+++ b/Resources/Public/Js/cookieman.js
@@ -112,6 +112,21 @@ var cookieman = (function () {
         }
     }
 
+    /**
+     * Intercepts clicks on elements with `data-cookieman-show` attribute
+     * even when they are not yet in the DOM.
+     */
+    function onBodyClick(e) {
+        const target = e.target
+        if (!target) {
+            return
+        }
+
+        if (target.dataset.hasOwnProperty('cookiemanShow')) {
+            cookieman.show()
+        }
+    }
+
     function onSaveClick(e) {
         e.preventDefault()
         saveSelections()
@@ -380,6 +395,13 @@ var cookieman = (function () {
             )
         }
 
+        // Intercepts clicks on elements with `data-cookieman-show` attribute
+        // even when they are not yet in the DOM.
+        document.body.addEventListener(
+            'click',
+            onBodyClick
+        )
+
         // load form state
         loadCheckboxStates()
         setDntTextIfEnabled()
diff --git a/Tests/Acceptance/Frontend/OpenPopupCest.php b/Tests/Acceptance/Frontend/OpenPopupCest.php
new file mode 100644
index 00000000..0adee66e
--- /dev/null
+++ b/Tests/Acceptance/Frontend/OpenPopupCest.php
@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * This file is part of the package dmind/cookieman.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE file that was distributed with this source code.
+ */
+
+namespace Dmind\Cookieman\Tests\Acceptance\Frontend;
+
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+use Codeception\Util\Locator;
+use Dmind\Cookieman\Tests\Acceptance\Support\AcceptanceTester;
+use Exception;
+
+/**
+ * Tests opening the popup
+ */
+class OpenPopupCest
+{
+    public const PATH_imprint = '/imprint';
+    public const SELECTOR_modal = '#cookieman-modal';
+    public const SELECTOR_btnDataCookiemanShow = '[data-cookieman-show]';
+
+    /**
+     * @param AcceptanceTester $I
+     * @throws Exception
+     */
+    public function openViaClickOnDataCookiemanShowElement(AcceptanceTester $I)
+    {
+        $I->amOnPage(self::PATH_imprint);
+        $I->waitForJS('return typeof cookieman === "object"', 10);
+        $I->clickWithLeftButton(['css' => self::SELECTOR_btnDataCookiemanShow]);
+        $I->waitForElementVisible(self::SELECTOR_modal);
+    }
+}