feat: add consentOptout() feature + docs

RockFrontend.js

@@ -29,8 +29,24 @@
       let name = container.getAttribute("data-rfc-show");
       if (!C.isEnabled(name)) return;
       container.removeAttribute("hidden");
-      let el = container.querySelector("[data-src]");
-      let src = el.getAttribute("data-src");
+      let el = container.querySelector("[rfconsent-src]");
+      let src = el.getAttribute("rfconsent-src");
+      el.setAttribute("src", src);
+    });
+
+    // enable scripts that don't have an alternate markup
+    let enable = document.querySelectorAll("[rfconsent-src]");
+    this.each(enable, function (el) {
+      let name = el.getAttribute("rfconsent-name");
+      let optout = el.getAttribute("rfconsent") == "optout";
+
+      // on optout scripts we set the consent automatically if no entry exists
+      if (optout && typeof C.getStorage()[name] == "undefined") {
+        C.save(name, true);
+      }
+
+      if (!C.isEnabled(name)) return;
+      let src = el.getAttribute("rfconsent-src");
       el.setAttribute("src", src);
     });
 

RockFrontend.module.php

@@ -306,16 +306,26 @@ function (HookEvent $event) {
    */
   public function consent($name, $enabled, $disabled = null)
   {
-    $enabled = str_replace(" src=", " data-src=", $enabled);
-    $enabled = "<div data-rfc-show='$name' hidden>$enabled</div>";
+    $enabled = str_replace(" src=", " rfconsent-name='$name' rfconsent-src=", $enabled);
     if ($disabled) {
+      // we only add the wrapper if we have a disabled markup
+      // if we dont have a disabled markup that means we only have
+      // a script tag (like plausible analytics) so we don't need the
+      // wrapping div!
+      $enabled = "<div data-rfc-show='$name' hidden>$enabled</div>";
       $file = $this->getFile($disabled);
       if ($file) $disabled = $this->render($file);
       $disabled = "<div data-rfc-hide='$name' hidden>$disabled</div>";
     }
     return $this->html($enabled . $disabled);
   }
 
+  public function consentOptout($name, $script)
+  {
+    $enabled = str_replace(" src=", " rfconsent-name='$name' rfconsent=optout rfconsent-src=", $script);
+    return $this->html($enabled);
+  }
+
   public function ___addAlfredStyles()
   {
     $this->styles()->add($this->path . "Alfred.css", "", ['minify' => false]);

docs/consent-tools/readme.md

@@ -1,5 +1,7 @@
 # Consent Tools
 
+<div class="uk-alert uk-alert-warning">Disclaimer: These docs are only a technical guide and no legal advice in any means. It's your responsibility to comply with your local laws.</div>
+
 ## Usage
 
 ```php
@@ -27,6 +29,35 @@ In `youtube-consent.latte` you can have any code you want. The only thing you ne
 
 Once the user clicks on that link rockfrontend will show all `youtube` embeds.
 
+## Opt-Out
+
+If you want to include a script that you don't need prior consent for (like Plausible Analytics for example) you can do so like this:
+
+```php
+echo $rockfrontend->consentOptout(
+  "plausible",
+  "<script defer data-domain='{$config->httpHost}' src='https://plausible.yourdomain.com/js/script.js'></script>"
+);
+```
+
+This will render the following tag:
+
+```html
+<script
+  defer
+  rfconsent="optout"
+  rfconsent-name="plausible"
+  data-domain="yourdomain.com.ddev.site"
+  rfconsent-src="https://plausible.yourdomain.com/js/script.js"
+></script>
+```
+
+On the first pageload RockFrontend will check if an entry of `plausible` exists in the browsers localstorage. If not, it will create an entry which tells RockFrontend that it can load the script.
+
+Then RockFrontend will add the `src` attribute to the script tag which will make the script load and do its work.
+
+<div class=uk-alert>Note that you still need the possibility for the user to opt-out in your privacy policy. See the next section how to do that!</div>
+
 ## Managing Consent
 
 If the user has already granted access to one of your embeds he/she can toggle consent via simple checkboxes that you typically place into your privacy policy. Simply enable the `TextformatterRockFrontend` textformatter on any markup field and add the `rf-consent` tags to that markup:
@@ -43,4 +74,4 @@ This would render like this when showing that page:
 
 And it would render like this when frontend editing that page:
 
-<img src=checkbox2.png class=blur>
+<img src=checkbox2.png class=blur>