Add optional description for scripts

docs/advanced/manage-scripts.md

@@ -8,6 +8,7 @@ There are two ways to manage your scripts:
 
 * `data-category`: name of the category
 * `data-service` (optional): if specified, a toggle will be generated in the `preferencesModal`
+* `data-description` (optional): if specified, a description will be added to toggle in the `preferencesModal`
 * `data-type` (optional): custom type (e.g. `"module"`)
 * `data-src` (optional): can be used instead of `src` to avoid validation issues
 
@@ -17,6 +18,7 @@ Example usage:
     type="text/plain"
     data-category="analytics"
     data-service="Google Analytics"
+    data-description="Google Analytics is used to analyze the usage and improve the service."
 >/*...code*/</script>
 ```
 
@@ -139,4 +141,4 @@ CookieConsent.run({
 
 ::: info
 A `<script>` tag can be enabled and disabled at most once, unlike the `onChange` callback — or its equivalent event listener — which can be executed multiple times.
-:::
+:::

src/core/global.js

@@ -26,6 +26,7 @@ import { COOKIE_NAME, OPT_IN_MODE } from '../utils/constants';
  * @typedef {Object} ScriptInfo
  * @property {HTMLScriptElement} _script
  * @property {string} _categoryName
+ * @property {string | null} _description
  * @property {string} [_serviceName]
  * @property {boolean} _executed
  * @property {boolean} _runOnDisable

src/core/modals/preferencesModal.js

@@ -22,7 +22,7 @@ import {
 import { guiManager } from '../../utils/gui-manager';
 import {
     PREFERENCES_MODAL_NAME,
-    SCRIPT_TAG_SELECTOR,
+    SCRIPT_CATEGORY_TAG_SELECTOR,
     DIV_TAG,
     ARIA_HIDDEN,
     BUTTON_TAG,
@@ -197,24 +197,32 @@ export const createPreferencesModal = (api, createMainContainer) => {
                 addClassPm(servicesContainer, 'section-services');
 
                 for (const serviceName of sServiceNames) {
+                    const scriptInfo = globalObj._state._allScriptTags.find((s) => s._serviceName === serviceName);
+                    const description = scriptInfo?._description;
                     const service = sServices[serviceName];
                     const serviceLabel = service && service.label || serviceName;
                     const serviceDiv = createNode(DIV_TAG);
+                    const serviceDescription = createNode(DIV_TAG);
                     const serviceHeader = createNode(DIV_TAG);
                     const serviceIconContainer = createNode(DIV_TAG);
                     const serviceTitle = createNode(DIV_TAG);
 
                     addClassPm(serviceDiv, 'service');
                     addClassPm(serviceTitle, 'service-title');
+                    addClassPm(serviceDescription, 'service-description');
                     addClassPm(serviceHeader, 'service-header');
                     addClassPm(serviceIconContainer, 'service-icon');
 
                     const toggleLabel = createToggleLabel(serviceLabel, serviceName, sCurrentCategoryObject, true, sLinkedCategory);
 
                     serviceTitle.innerHTML = serviceLabel;
+                    serviceDescription.innerHTML += description;
 
                     appendChild(serviceHeader, serviceIconContainer);
                     appendChild(serviceHeader, serviceTitle);
+                    if (description) {
+                        appendChild(serviceTitle, serviceDescription);
+                    }
                     appendChild(serviceDiv, serviceHeader);
                     appendChild(serviceDiv, toggleLabel);
                     appendChild(servicesContainer, serviceDiv);
@@ -529,7 +537,7 @@ function createToggleLabel(label, value, sCurrentCategoryObject, isService, cate
 
     if (isService) {
         addClass(toggleLabel, 'toggle-service');
-        setAttribute(toggle, SCRIPT_TAG_SELECTOR, categoryName);
+        setAttribute(toggle, SCRIPT_CATEGORY_TAG_SELECTOR, categoryName);
 
         // Save reference to toggles to avoid using document.querySelector later on
         dom._serviceCheckboxInputs[categoryName][value] = toggle;

src/scss/core/components/_preferences-modal.scss

@@ -501,6 +501,11 @@ $service-toggle-knob-icon-width: 1.7px;
         width: 100%;
     }
 
+    .pm__service-description{
+        display: block;
+        margin-top: 5px;
+    }
+
     .pm__section-desc{
         line-height: 1.5em;
     }

src/utils/constants.js

@@ -7,7 +7,8 @@ export const TOGGLE_CONSENT_MODAL_CLASS = 'show--consent';
 export const TOGGLE_PREFERENCES_MODAL_CLASS = 'show--preferences';
 export const TOGGLE_DISABLE_INTERACTION_CLASS = 'disable--interaction';
 
-export const SCRIPT_TAG_SELECTOR = 'data-category';
+export const SCRIPT_CATEGORY_TAG_SELECTOR = 'data-category';
+export const SCRIPT_DESCRIPTION_TAG_SELECTOR = 'data-description';
 
 export const DIV_TAG = 'div';
 export const BUTTON_TAG = 'button';

src/utils/general.js

@@ -1,6 +1,7 @@
 import { globalObj } from '../core/global';
 import {
-    SCRIPT_TAG_SELECTOR,
+    SCRIPT_CATEGORY_TAG_SELECTOR,
+    SCRIPT_DESCRIPTION_TAG_SELECTOR,
     BUTTON_TAG, CLICK_EVENT,
     TOGGLE_DISABLE_INTERACTION_CLASS
 } from './constants';
@@ -211,10 +212,11 @@ export const retrieveScriptElements = () => {
     /**
      * @type {NodeListOf<HTMLScriptElement>}
      */
-    const scripts = querySelectorAll(document, 'script[' + SCRIPT_TAG_SELECTOR +']');
+    const scripts = querySelectorAll(document, 'script[' + SCRIPT_CATEGORY_TAG_SELECTOR +']');
 
     for (const scriptTag of scripts) {
-        let scriptCategoryName = getAttribute(scriptTag, SCRIPT_TAG_SELECTOR);
+        let scriptCategoryName = getAttribute(scriptTag, SCRIPT_CATEGORY_TAG_SELECTOR);
+        let scriptDescription = getAttribute(scriptTag, SCRIPT_DESCRIPTION_TAG_SELECTOR) || null;
         let scriptServiceName = scriptTag.dataset.service || '';
         let runOnDisable = false;
 
@@ -237,6 +239,7 @@ export const retrieveScriptElements = () => {
                 _executed: false,
                 _runOnDisable: runOnDisable,
                 _categoryName: scriptCategoryName,
+                _description: scriptDescription,
                 _serviceName: scriptServiceName
             });
 

src/utils/scripts.js

@@ -1,6 +1,6 @@
 import { globalObj } from '../core/global';
 import { createNode, setAttribute, elContains, getAttribute, removeAttribute, isFunction } from './general';
-import { SCRIPT_TAG_SELECTOR, OPT_OUT_MODE } from './constants';
+import { SCRIPT_CATEGORY_TAG_SELECTOR, OPT_OUT_MODE } from './constants';
 
 /**
  * @param {string} type
@@ -121,7 +121,7 @@ export const manageExistingScripts = (defaultEnabledCategories) => {
             const dataType = getAttribute(currScript, 'type', true);
 
             removeAttribute(currScript, 'type', !!dataType);
-            removeAttribute(currScript, SCRIPT_TAG_SELECTOR);
+            removeAttribute(currScript, SCRIPT_CATEGORY_TAG_SELECTOR);
 
             // Get current script data-src (if there is one)
             let src = getAttribute(currScript, 'src', true);