Feat: add cookie_table_caption option (close #485)

orestbida · Mar 26, 2023 · bdfe84e · bdfe84e
1 parent 0b1d14a
commit bdfe84e
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 4 deletions.
diff --git a/Readme.md b/Readme.md
@@ -279,6 +279,7 @@ A __lightweight__ & __gdpr compliant__ cookie consent plugin written in plain ja
                                     accept_all_btn: 'Accept all',
                                     reject_all_btn: 'Reject all',
                                     close_btn_label: 'Close',
+                                    // cookie_table_caption: 'Cookie list',
                                     cookie_table_headers: [
                                         {col1: 'Name'},
                                         {col2: 'Domain'},

diff --git a/dist/cookieconsent.css b/dist/cookieconsent.css
diff --git a/dist/cookieconsent.js b/dist/cookieconsent.js
diff --git a/src/cookieconsent.css b/src/cookieconsent.css
@@ -735,6 +735,14 @@ CookieConsent settings modal
     overflow: hidden;
 }
 
+#s-bl caption {
+    display: block;
+    padding: 0.5rem 1rem;
+    font-size: .9em;
+    border-top: 1px solid var(--cc-cookie-table-border);
+    font-weight: 600;
+}
+
 #s-bl td,
 #s-bl th {
     padding: 0.8em 0.625em;

diff --git a/src/cookieconsent.js b/src/cookieconsent.js
@@ -43,6 +43,7 @@
 
             /**
              * Global user configuration object
+             * @type {import('../types/types')}
              */
             user_config,
 
@@ -616,12 +617,13 @@
                 new_settings_blocks = _createNode('div');
                 new_settings_blocks.id = 's-bl';
             }
-
+            
             // Add label to close button
             settings_close_btn.setAttribute('aria-label', user_config.languages[lang]['settings_modal']['close_btn_label'] || 'Close');
 
             all_blocks = user_config.languages[lang]['settings_modal']['blocks'];
             all_table_headers = user_config.languages[lang]['settings_modal']['cookie_table_headers'];
+            var table_caption = user_config.languages[lang]['settings_modal']['cookie_table_caption'];
 
             var n_blocks = all_blocks.length;
 
@@ -810,8 +812,15 @@
                     var thead = _createNode('thead');
                     thead.appendChild(tr_tmp);
 
-                    // append header to table
                     var block_table = _createNode('table');
+
+                    if(table_caption) {
+                        var caption = _createNode('caption');
+                        caption.innerHTML = table_caption;
+                        block_table.appendChild(caption);
+                    }
+
+                    // append header to table
                     block_table.appendChild(thead);
 
                     var tbody_fragment = document.createDocumentFragment();

diff --git a/types/types.d.ts b/types/types.d.ts
@@ -74,6 +74,7 @@ declare global {
         title: string
         description: string
         toggle?: ToggleSetting
+        cookie_table_caption?: string,
         cookie_table_headers?: Record<string, string>[]
         cookie_table?: Record<string, string | boolean>[]
     }