Merge remote-tracking branch 'origin/develop'

schalkt · Nov 6, 2020 · 2d66151 · 2d66151
2 parents c7e0a36 + 8d0c0ce
commit 2d66151
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 106 deletions.
diff --git a/README.md b/README.md
@@ -108,7 +108,3 @@ EU Cookie Law warning message
  </div>
 
 ```
-
-## TODO
-
-- add more info to the demo pages
diff --git a/demo/index-bootstrap.html b/demo/index-bootstrap.html
@@ -5,28 +5,32 @@
     <title>EU Cookie Law warning message demo page</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="./index.css">
+    <script src="./index.js"></script>
 
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-
     <script id="cookieWarn" type="text/javascript" src="./../dist/cookie-warn.js" data-debug="true"></script>
-    <style>
-        body {
-            color: #d2d2d2; 
-            background-color: #424242;         
-        }
-    </style>
+
 </head>
 
 <body>
     <div class="container">
-        <h2>EU cookie warning example</h2>    
+        <h1>EU cookie warning example</h1>    
         <ul>
             <li>html lang en</li> 
             <li>bootstrap 4 loaded</li>               
         </ul>
+        <br>
+        <h2>More examples</h2>
+        <ul>
+            <li><a href="./index.html">Basic example</a></li>
+            <li><a href="./index-params.html">Different style and all parameters with reject info</a></li>
+            <li><a href="./index-bootstrap.html">Bootstrap example</a></li>
+        </ul>
+        <div id="output"></div>
     </div>
 
 </body>

diff --git a/demo/index-params.html b/demo/index-params.html
@@ -5,55 +5,48 @@
     <title>EU Cookie Law warning message demo page</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <script id="cookieWarn" type="text/javascript" src="./../dist/cookie-warn.js"        
+    <link rel="stylesheet" href="./index.css">
+    <script src="./index.js"></script>
+
+    <script id="cookieWarn" type="text/javascript" src="./../dist/cookie-warn.js" 
         data-lang-en="{
              'text':'Our website uses cookies.',
              'accept_text': 'I accept',
              'more_text': 'Click here for more information',
              'more_link': 'http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm',
              'reject_text': 'I reject',
              'reject_info': 'You can disable unwanted cookies by using this program',
-             'reject_link': 'https://www.ghostery.com/'
-            }"
-        data-debug="true"
+             'reject_link': 'https://www.ghostery.com/',
+             'close_text': 'Close'
+            }" 
+        data-debug="true" 
         data-expire="90" 
-        data-path="/projects/cookie-warn/demo"
-        data-delay="220" 
+        data-path="/projects/cookie-warn/demo" 
+        data-delay="220"
         data-class="myCookieWarningClass"
         data-style="#cookieWarnBox a { color: lightblue } #cookieWarnBox .btn { border-radius: 5px }"
-        data-callback="cookieWarnCallback"
-        >
-    </script>
-    <style>
-        body {
-            color: #d2d2d2; 
-            background-color: #424242;         
-        }
-        .myCookieWarningClass {
-            box-shadow: 0px 0px 10px 1px #101010;
-            border-radius: 5px;
-            border: 1px solid #a1a1a1;
-            margin: 30px;
-        }
-    </style>
+        data-callback="cookieWarnCallback">
+        </script>
+
 </head>
 
 <body>
+
     <div class="container">
-        <h2>EU cookie warning example</h2>    
+        <h1>EU cookie warning example</h1>
+        <ul>
+            <li>with parameters (cookie expire and path, debug, animation delay, custom style)</li>
+            <li>with reject info box and close button</li>
+        </ul>
+        <br>
+        <h2>More examples</h2>
         <ul>
-            <li>with parameters</li>               
+            <li><a href="./index.html">Basic example</a></li>
+            <li><a href="./index-params.html">Different style and all parameters with reject info</a></li>
+            <li><a href="./index-bootstrap.html">Bootstrap example</a></li>
         </ul>
-    </div>
-
-    <script>
-
-        // callback 
-        var cookieWarnCallback = function(accepted) {
-            console.log('I am a callback, cookies accepted: ' + (accepted ? 'true' : 'false'));
-        };  
-
-    </script>
+        <div id="output"></div>
+    </div>   
 
 </body>
 

diff --git a/demo/index.css b/demo/index.css
@@ -0,0 +1,33 @@
+body {
+	color: #d2d2d2;
+	background-color: #424242;
+	margin: 2%;
+    line-height: 1.8em;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+a {
+	color: white;
+	text-decoration: none;
+    padding-bottom: 3px;    
+	border-bottom: 1px dashed #a1a1a1;
+}
+
+a:hover {
+    color: white;
+    text-decoration: none;
+	border-bottom: 1px solid #f1f1f1;
+}
+
+.myCookieWarningClass {
+	box-shadow: 0px 0px 10px 1px #101010;
+	border-radius: 5px;
+	border: 1px solid #a1a1a1;
+	margin: 30px;
+}
+
+#output {
+    color: orange;
+    letter-spacing: 2px;    
+}
+
diff --git a/demo/index.html b/demo/index.html
@@ -1,26 +1,32 @@
 <!DOCTYPE HTML>
-<html lang="en">
+<html>
 
 <head>
     <title>EU Cookie Law warning message demo page</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <script id="cookieWarn" type="text/javascript" src="./../dist/cookie-warn.js" data-debug="true"></script>
-    <style>
-        body {
-            color: #d2d2d2;
-            background-color: #424242;
-        }
-    </style>
+    <link rel="stylesheet" href="./index.css">
+    <script src="./index.js"></script>
+
+    <script id="cookieWarn" type="text/javascript" src="./../dist/cookie-warn.js"></script>
+
 </head>
 
 <body>
     <div class="container">
-        <h2>EU cookie warning example</h2>
+        <h1>EU cookie warning example</h1>
         <ul>
             <li>without html lang attribute (default "en")</li>
             <li>without and any other parameters</li>
         </ul>
+        <br>
+        <h2>More examples</h2>
+        <ul>
+            <li><a href="./index.html">Basic example</a></li>
+            <li><a href="./index-params.html">Different style and all parameters with reject info</a></li>
+            <li><a href="./index-bootstrap.html">Bootstrap example</a></li>
+        </ul>
+        <div id="output"></div>
     </div>
 </body>
 

diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,11 @@
+
+// callback 
+
+var cookieWarnCallback = function (accepted) {
+
+    var message = 'I am a callback, cookies accepted: ' + (accepted ? 'TRUE' : 'FALSE');
+
+    document.getElementById('output').innerHTML = message;
+    console.log(message);
+
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -108,7 +108,3 @@ EU Cookie Law warning message @@
      </div>
     ```
-    ## TODO
-    - add more info to the demo pages