Merge pull request #153 from insites/ipImprovements

Ability to customize locationServices. Tweaks.
osano · Sep 19, 2016 · 04ed566 · 04ed566
2 parents fd59402 + 098a715
commit 04ed566
Show file tree

Hide file tree

Showing 19 changed files with 879 additions and 692 deletions.
diff --git a/build/cookieconsent.min.css b/build/cookieconsent.min.css
diff --git a/build/cookieconsent.min.js b/build/cookieconsent.min.js
diff --git a/examples/customTheme.css b/examples/customTheme.css
@@ -0,0 +1,58 @@
+
+.cc-window {
+  color: black;
+}
+
+.cc-message {
+  width: auto;
+  background: white;
+  padding: 20px 76px 20px 16px;
+  border-radius: 10px;
+  margin-right: -70px;
+  margin-left: 20%;
+}
+
+.cc-link, .cc-link:visited {
+  color: red;
+}
+
+.cc-btn {
+  background: #0000ff;
+  background: -moz-radial-gradient(center, ellipse cover, #0000ff 0%, #99007c 100%);
+  background: -webkit-radial-gradient(center, ellipse cover, #0000ff 0%,#99007c 100%);
+  background: radial-gradient(ellipse at center, #0000ff 0%,#99007c 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#99007c',GradientType=1 );
+  padding: 58px 0;
+  color: red;
+  border: 4px dotted red;
+  border-radius: 100px;
+  -webkit-animation:spin 4s linear infinite;
+  -moz-animation:spin 4s linear infinite;
+  animation:spin 4s linear infinite;
+}
+
+.cc-btn:hover {
+  background: #99007c;
+  -webkit-animation: none;
+  -moz-animation:none;
+  animation:none;
+}
+
+@-moz-keyframes spin {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform:rotate(360deg);
+  }
+}
diff --git a/examples/example-1-themes.html b/examples/example-1-themes.html
@@ -8,6 +8,7 @@
   <title>Demo 1 - Themes</title>
 
   <link href="examples/style.css" rel="stylesheet">
+  <link href="build/cookieconsent.min.css" rel="stylesheet">
 
 <body role="document">
 
@@ -58,7 +59,6 @@ <h1><span>Demo 1</span> Themes</h1>
           type: 'info',
           position: 'top',
           palette: palettes.honeybee,
-          pushdown: false
         },
         'Blurple': {
           type: 'opt-out',
@@ -72,7 +72,7 @@ <h1><span>Demo 1</span> Themes</h1>
         'Nuclear': {
           type: 'info',
           position: 'bottom-right',
-          windowstyle: "edgeless",
+          theme: "edgeless",
           palette: palettes.nuclear,
           content: {
             "dismiss": "I accept certain doom"
@@ -85,7 +85,7 @@ <h1><span>Demo 1</span> Themes</h1>
         },
         'Neon': {
           type: 'info',
-          windowstyle: "classic",
+          theme: "classic",
           position: 'bottom-left',
           palette: palettes.neon,
         },

diff --git a/examples/example-2-custom-theme.html b/examples/example-2-custom-theme.html
@@ -8,49 +8,11 @@
   <title>Demo 2 - Custom CSS</title>
 
   <link href="examples/style.css" rel="stylesheet">
+  <link href="build/cookieconsent.min.css" rel="stylesheet">
+  <link href="examples/customTheme.css" rel="stylesheet">
 
 <body class="example2" role="document">
 
-  <style>
-  .cc-window {
-    color: black;
-  }
-  .cc-message {
-    width: auto;
-    background: white;
-    padding: 20px 76px 20px 16px;
-    border-radius: 10px;
-    margin-right: -70px;
-    margin-left: 20%;
-  }
-  .cc-link, .cc-link:visited {
-    color: red;
-  }
-  .cc-btn {
-    background: #0000ff;
-    background: -moz-radial-gradient(center, ellipse cover, #0000ff 0%, #99007c 100%);
-    background: -webkit-radial-gradient(center, ellipse cover, #0000ff 0%,#99007c 100%);
-    background: radial-gradient(ellipse at center, #0000ff 0%,#99007c 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#99007c',GradientType=1 );
-    padding: 58px 0;
-    color: red;
-    border: 4px dotted red;
-    border-radius: 100px;
-    -webkit-animation:spin 4s linear infinite;
-    -moz-animation:spin 4s linear infinite;
-    animation:spin 4s linear infinite;
-  }
-  .cc-btn:hover {
-    background: #99007c;
-     -webkit-animation: none;
-    -moz-animation:none;
-    animation:none;
-  }
-  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-  </style>
-
   <div class="center-outer fit">
     <div class="center-inner">
       <div class="example-window" role="main">

diff --git a/examples/example-3-informational.html b/examples/example-3-informational.html
@@ -8,6 +8,7 @@
   <title>Demo 3 - Informational</title>
 
   <link href="examples/style.css" rel="stylesheet">
+  <link href="build/cookieconsent.min.css" rel="stylesheet">
 
 <body class="example3" role="document">
 

diff --git a/examples/example-4-opt-out.html b/examples/example-4-opt-out.html
@@ -8,6 +8,7 @@
   <title>Demo 4 - Opt-out</title>
 
   <link href="examples/style.css" rel="stylesheet">
+  <link href="build/cookieconsent.min.css" rel="stylesheet">
 
 <body class="example4" role="document">
 

diff --git a/examples/example-5-opt-in.html b/examples/example-5-opt-in.html
@@ -8,6 +8,7 @@
   <title>Demo 5 - Opt-in</title>
 
   <link href="examples/style.css" rel="stylesheet">
+  <link href="build/cookieconsent.min.css" rel="stylesheet">
 
 <body class="example5" role="document">
 

diff --git a/examples/example-6-location.html b/examples/example-6-location.html
@@ -8,6 +8,7 @@
   <title>Demo 6 - Location</title>
 
   <link href="examples/style.css" rel="stylesheet">
+  <link href="build/cookieconsent.min.css" rel="stylesheet">
 
   <style>
     #message {height: 5em}
@@ -40,8 +41,9 @@ <h1><span>Demo 6</span> Location</h1>
   </div>
 
 <script src="examples/script.js"></script>
-<script src="build/cookieconsent.min.js"></script>
+<script src="src/cookieconsent.js"></script>
 <script>
+
   var COUNTRY_CODES = {
     // Representative group of countries with key differences
     'US' : 'United States',
@@ -245,62 +247,77 @@ <h1><span>Demo 6</span> Location</h1>
     'YE' : 'Yemen',
     'ZM' : 'Zambia',
     'ZW' : 'Zimbabwe'
-    };
+  };
 
   (function (C, U) {
 
-    var elems = U.createInputs(['location']);
+    var popupInst;
+    var $loc = document.getElementById('location');
 
-    var updater = U.createUpdater(elems, draw.bind(null, '__cookieconsent_popup'));
+    U.fillSelect($loc, COUNTRY_CODES, COUNTRY_CODES['AC']);
 
-    U.fillSelect(elems.location, COUNTRY_CODES, COUNTRY_CODES['AC'])
+    $loc.onchange = function () {
+      var code = $loc.selectedIndex >= 0 ?
+        $loc[$loc.selectedIndex].value : undefined;
 
-    updater(); // trigger the first update
-    elems.location.focus(); // focus the first input
+      if (!code)
+        return;
+
+      draw(code);
+    };
 
-    function draw(name, inputs) {
-      var code = inputs.location;
-      if (!code) return;
+    draw($loc[0].value);
 
-      // applyLaw takes the "preferred" options and changes them slightly to match the country's law
-      var options = getOptions(inputs);
-      options.countryCode = code;
+    $loc.focus();
 
-      if (!window[name]) {
-        window[name] = cookieconsent.factory(options);
-      } else {
-        window[name].clearStatus();
-        window[name].initialise(options);
+    function draw(code) {
+      var options = getOptions(code);
+
+      if (popupInst) {
+        popupInst.clearStatus();
+        popupInst.destroy();
+        popupInst = null;
       }
-      window[name].open();
+
+      cookieconsent.initialise(options, function (popup) {
+        popupInst = popup;
+        popupInst.autoOpen();
+      }, function (err) {
+        console.error(err)
+      });
 
       // show country options on screen (so user knows how this country affected the settings)
       document.getElementById('message').innerHTML = getCountryDetails(code);
     }
 
-    function getOptions(input) {
+    function getOptions(code) {
       return {
         type: 'info',
-        revokable: 'false',
         regionalLaw: true,
-        palette: {"popup":{"background":"#343c66","text":"#cfcfe8"},"button":{"background":"#f71559"}}
+        palette: {
+          "popup":{"background":"#343c66","text":"#cfcfe8"},
+          "button":{"background":"#f71559"}
+        },
+        law: {
+          // takes the "preferred" options and changes them slightly to match the country's law
+          countryCode: code,
+        }
       }
     }
 
     function getCountryDetails(code) {
       // We only get these to show (on screen) how the country behaves
-      var countryOpts = cookieconsent.law.get(code);
+      var law = new cookieconsent.Law({});
+      var countryOpts = law.get(code);
 
       if (!countryOpts.hasLaw) {
-        return U.tabularObject({
-          'Has cookie law?': 'no'
-        });
+        return 'Has cookie law? no';
       }
 
       return U.tabularObject({
         'Has cookie law?': 'yes',
-        'Choice has to be revokable?': U.yn(countryOpts.revokable),
-        'Can be automatically dismissed?': U.yn(!countryOpts.explicitAction),
+        'Choice has to be revokable?': countryOpts.revokable ? 'yes' : 'no',
+        'Can be automatically dismissed?': countryOpts.explicitAction ? 'no' : 'yes',
       });
     }
 

diff --git a/examples/example-7-javascript-api.html b/examples/example-7-javascript-api.html
@@ -8,6 +8,7 @@
   <title>Demo 7 - JavaScript API</title>
 
   <link href="examples/style.css" rel="stylesheet">
+  <link href="build/cookieconsent.min.css" rel="stylesheet">
 
 <body class="example7" role="document">
 
@@ -49,8 +50,8 @@ <h3>Console</h3>
     </div>
   </div>
 
-<script src="build/cookieconsent.min.js"></script>
 <script src="examples/script.js"></script>
+<script src="build/cookieconsent.min.js"></script>
 <script>
 
   var h = document.getElementById('console');
@@ -60,21 +61,32 @@ <h3>Console</h3>
     h.scrollTop = h.scrollHeight;
   }
 
-  var p = cookieconsent.factory({
+  var p;
+  cookieconsent.initialise({
     type: 'opt-out',
-    palette: {"popup":{"background":"#eaf7f7","text":"#5c7291"},"button":{"background":"#56cbdb","text":"#ffffff"}},
+    palette: {
+      "popup":{"background":"#eaf7f7","text":"#5c7291"},
+      "button":{"background":"#56cbdb","text":"#ffffff"},
+    },
     onPopupOpen: function() {
       log('<em>onPopupOpen()</em> called');
     },
     onPopupClose: function() {
       log('<em>onPopupClose()</em> called');
     },
+    onInitialise: function (status) {
+      log('<em>onInitialise()</em> called with status <em>'+status+'</em>');
+    },
     onStatusChange: function(status) {
       log('<em>onStatusChange()</em> called with status <em>'+status+'</em>');
     },
     onRevokeChoice: function() {
       log('<em>onRevokeChoice()</em> called');
     },
+  }, function (popup) {
+    p = popup;
+  }, function (err) {
+    console.error(err);
   });
 
   document.getElementById('btn-dismissCookie').onclick = function (e) {
@@ -99,13 +111,8 @@ <h3>Console</h3>
   };
 
   document.getElementById('btn-revokeChoice').onclick = function (e) {
-
     log("Calling <em>revokeChoice()</em>");
-
-    // @todo Add revokeChoice() method to Cookie Consent, replace all of this with that
-    p.options.onRevokeChoice();
-    p.clearStatus();
-    p.open();
+    p.revokeChoice();
 
   };