From 257f457b4cc28600d2daca4a0bb9615c42b94214 Mon Sep 17 00:00:00 2001
From: Amauri CHAMPEAUX <amauri@champeaux.fr>
Date: Fri, 26 Mar 2021 12:49:58 +0100
Subject: [PATCH] Add a popup style

---
 README.md        |  4 +++-
 tarteaucitron.js | 18 ++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c3bddaa..803bea6 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,9 @@ tarteaucitron.init({
     "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
     "cookieName": "tarteaucitron", /* Cookie name */
 
-    "orientation": "middle", /* Banner position (top - bottom) */
+    "orientation": "middle", /* Banner position (top - bottom - middle - popup) */
+
+    "groupServices": false, /* Group services by category */
 
     "showAlertSmall": false, /* Show the small banner on bottom right */
     "cookieslist": false, /* Show the cookie list */
diff --git a/tarteaucitron.js b/tarteaucitron.js
index bb082c2..5671199 100644
--- a/tarteaucitron.js
+++ b/tarteaucitron.js
@@ -266,8 +266,7 @@ var tarteaucitron = {
           }
             tarteaucitron.addInternalScript(pathToServices, '', function () {
 
-
-                // css for new middle bar
+                // css for the middle bar TODO: add it on the css file
                 if (tarteaucitron.orientation === 'middle') {
                     var customThemeMiddle = document.createElement('style'),
                         cssRuleMiddle = 'div#tarteaucitronRoot.tarteaucitronBeforeVisible:before {content: \'\';position: fixed;width: 100%;height: 100%;background: white;top: 0;left: 0;z-index: 999;opacity: 0.5;}div#tarteaucitronAlertBig:before {content: \'' + tarteaucitron.lang.middleBarHead + '\';font-size: 35px;}body #tarteaucitronRoot div#tarteaucitronAlertBig {width: 60%;min-width: 285px;height: auto;margin: auto;left: 50%;top: 50%;transform: translate(-50%, -50%);box-shadow: 0 0 9000px #000;border-radius: 20px;padding: 35px 25px;}span#tarteaucitronDisclaimerAlert {padding: 0 30px;}#tarteaucitronRoot span#tarteaucitronDisclaimerAlert {margin: 10px 0 30px;display: block;text-align: center;font-size: 21px;}@media screen and (max-width: 900px) {div#tarteaucitronAlertBig button {margin: 0 auto 10px!important;display: block!important;}}';
@@ -280,6 +279,21 @@ var tarteaucitron = {
                     }
                     document.getElementsByTagName('head')[0].appendChild(customThemeMiddle);
                 }
+
+                // css for the popup bar TODO: add it on the css file
+                if (tarteaucitron.orientation === 'popup') {
+                    var customThemePopup = document.createElement('style'),
+                        cssRulePopup = 'div#tarteaucitronAlertBig:before {content: \'' + tarteaucitron.lang.middleBarHead + '\';font-size: 22px;}body #tarteaucitronRoot div#tarteaucitronAlertBig {bottom: 0;top: auto!important;left: 8px!important;right: auto!important;transform: initial!important;border-radius: 5px 5px 0 0!important;max-width: 250px!important;width: Calc(100% - 16px)!important;min-width: 0!important;padding: 25px 0;}span#tarteaucitronDisclaimerAlert {padding: 0 30px;font-size: 15px!important;}#tarteaucitronRoot span#tarteaucitronDisclaimerAlert {margin: 10px 0 30px;display: block;text-align: center;font-size: 21px;}div#tarteaucitronAlertBig button {margin: 0 auto 10px!important;display: block!important;width: Calc(100% - 60px);box-sizing: border-box;}';
+
+                    customThemePopup.type = 'text/css';
+                    if (customThemePopup.styleSheet) {
+                        customThemePopup.styleSheet.cssText = cssRulePopup;
+                    } else {
+                        customThemePopup.appendChild(document.createTextNode(cssRulePopup));
+                    }
+                    document.getElementsByTagName('head')[0].appendChild(customThemePopup);
+                }
+                
                 var body = document.body,
                     div = document.createElement('div'),
                     html = '',