feat: allow opening via click on any [data-cookieman-show]

Fixes: #205

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>

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'
 

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>

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

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()

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);
+    }
+}