Fixes constant references

osano · Sep 6, 2019 · 0817f67 · 0817f67
1 parent 2e850ce
commit 0817f67
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 100 deletions.
diff --git a/build/cookieconsent.min.js b/build/cookieconsent.min.js
diff --git a/examples/example-1-themes.html b/examples/example-1-themes.html
@@ -33,7 +33,8 @@ <h1>
     </div>
 
     <script src="examples/script.js"></script>
-    <script src="build/cookieconsent.min.js"></script>
+    <!--<script src="build/cookieconsent.min.js"></script>-->
+    <script src="src/bundle.js"></script>
     <script>
       const palettes = {
         honeybee: { "popup": { "background": '#000' }, "button": { "background": '#f1d600', padding: '5px 25px' } },

diff --git a/src/bundle.js b/src/bundle.js
diff --git a/src/models/Popup.js b/src/models/Popup.js
@@ -265,15 +265,14 @@ export default class Popup extends Base {
    * @return { undefined }
   */
   setStatuses() {
-    const {name, expiryDays, domain, path, secure} = this.options.cookie
+    const { name, expiryDays, domain, path, secure } = this.options.cookie
 
-    // if `status` is valid
     const updateCategoryStatus = ( categoryName, status ) => {
       if (isValidStatus(status)) {
         const cookieName = name+'_'+categoryName
         const chosenBefore = statuses.indexOf( getCookie(cookieName) ) >= 0
         setCookie(cookieName, status, expiryDays, domain, path, secure)
-        this.emit( "statusChanged", cookieName, status.toUpperCase(), chosenBefore )
+        this.emit( "statusChanged", cookieName, status, chosenBefore )
       } else {
         this.clearStatuses()
       }
@@ -420,7 +419,7 @@ export default class Popup extends Base {
     el.addEventListener('click', event => this.handleButtonClick( event ) )
     el.querySelectorAll( '.cc-btn [type="checkbox"]' ).forEach( checkbox => {
       checkbox.addEventListener( 'change', () => {
-        this.userCategories[ checkbox.name.toUpperCase() ] = checkbox.checked ? 'ALLOW' : 'DENY'
+        this.userCategories[ checkbox.name ] = checkbox.checked ? 'ALLOW' : 'DENY'
       })
       checkbox.addEventListener( 'click', event => (event.stopPropagation()) )
     })
@@ -455,23 +454,27 @@ export default class Popup extends Base {
     if (btn.classList.contains( 'cc-btn' ) && btn.classList.contains( 'cc-save' )){
       this.setStatuses()
       this.close(true)
+      return
     }
     if (btn.classList.contains( 'cc-btn' )) {
       const matches = btn.className.match(
-        new RegExp('\\bcc-(' + statuses.map( str => str.toLowerCase().replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&') ).join('|') + ')\\b')
+        new RegExp('\\bcc-(' + statuses.map( str => str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&') ).join('|') + ')\\b')
       )
       const match = (matches && matches[1]) || false
       if (match) {
-        this.setStatuses(match.toUpperCase())
+        this.setStatuses(match)
         this.close(true)
       }
+      return
     }
     if (btn.classList.contains( 'cc-close' )) {
       this.setStatuses(statusDismiss)
       this.close(true)
+      return
     }
     if (btn.classList.contains( 'cc-revoke' )) {
       this.revokeChoice()
+      return
     }
   }
 

diff --git a/src/options/popup.js b/src/options/popup.js
@@ -1,5 +1,7 @@
 "use strict"
 
+import { statusDeny, statusAllow, statusDismiss, categories }  from "../constants/index.js"
+
 export default {
   // if false, this prevents the popup from showing (useful for giving to control to another piece of code)
   enabled: true,
@@ -15,7 +17,7 @@ export default {
     path: '/',
     // This is the domain that the cookie 'name' belongs to. The cookie can only be read on this domain.
     //  - Guide to cookie domains - https://www.mxsasha.eu/blog/2014/03/04/definitive-guide-to-cookie-domains/
-    domain: '',
+    domain: 'localhost',
     // The cookies expire date, specified in days (specify -1 for no expiry)
     expiryDays: 365,
     // If true the cookie will be created with the secure flag. Secure cookies will only be transmitted via HTTPS.
@@ -48,54 +50,26 @@ export default {
     messagelink:
       '<span id="cookieconsent:desc" class="cc-message">{{message}} <a aria-label="learn more about cookies" role=button tabindex="0" class="cc-link" href="{{href}}" rel="noopener noreferrer nofollow" target="{{target}}">{{link}}</a></span>',
     dismiss:
-      '<a aria-label="dismiss cookie message" role=button tabindex="0" class="cc-btn cc-dismiss">{{dismiss}}</a>',
+      `<a aria-label="dismiss cookie message" role=button tabindex="0" class="cc-btn cc-${statusDismiss}">{{dismiss}}</a>`,
     allow:
-      '<a aria-label="allow cookies" role=button tabindex="0"  class="cc-btn cc-allow">{{allow}}</a>',
+      `<a aria-label="allow cookies" role=button tabindex="0"  class="cc-btn cc-${statusAllow}">{{allow}}</a>`,
     deny:
-      '<a aria-label="deny cookies" role=button tabindex="0" class="cc-btn cc-deny">{{deny}}</a>',
+      `<a aria-label="deny cookies" role=button tabindex="0" class="cc-btn cc-${statusDeny}">{{deny}}</a>`,
     link:
       '<a aria-label="learn more about cookies" role=button tabindex="0" class="cc-link" href="{{href}}" rel="noopener noreferrer nofollow" target="{{target}}">{{link}}</a>',
     close:
       '<span aria-label="dismiss cookie message" role=button tabindex="0" class="cc-close">{{close}}</span>',
-    categories: ` 
-      <ul class="cc-categories">
-        <li class="cc-category">
-          <button class="cc-btn" tabindex="0"><input type="checkbox" name="uncategorized"/><span class="cc-btn-checkbox"></span>Uncategorized</button>
-          <button class="cc-btn cc-info" aria-label="Uncategorized Definition Button" tabindex="1">^</button>
-          <div class="cc-tooltip">
-            <p>This is the category for cookies that don't fit any other category.</p>
-          </div>
-        </li>
-        <li class="cc-category">
-          <button class="cc-btn" tabindex="2"><input type="checkbox" name="essential" checked disabled/><span class="cc-btn-checkbox"></span>Essential</button>
-          <button class="cc-btn cc-info" aria-label="Essential Definition Button" tabindex="3">^</button>
-          <div class="cc-tooltip">
-            <p>This is the category for essential application or website opperation cookies.</p>
-          </div>
-        </li>
-        <li class="cc-category">
-          <button class="cc-btn" tabindex="4"><input type="checkbox" name="personalization"/><span class="cc-btn-checkbox"></span>Personalization</button>
-          <button class="cc-btn cc-info" aria-label="Personalization Definition Button" tabindex="5">^</button>
-          <div class="cc-tooltip">
-            <p>This is the category for cookies used to help peronalize the application to a specific user.</p>
-          </div>
-        </li>
-        <li class="cc-category">
-          <button class="cc-btn" tabindex="6"><input type="checkbox" name="analytics"/><span class="cc-btn-checkbox"></span>Analytics</button>
-          <button class="cc-btn cc-info" aria-label="Analytics Definition Button" tabindex="7">^</button>
-          <div class="cc-tooltip">
-            <p>This is the category for cookies used to help analyize data.</p>
-          </div>
-        </li>
-        <li class="cc-category">
-          <button class="cc-btn" tabindex="8"><input type="checkbox" name="marketing"/><span class="cc-btn-checkbox"></span>Marketing</button>
-          <button class="cc-btn cc-info" aria-label="Marketing Definition Button" tabindex="9">^</button>
+    categories: '<ul class="cc-categories">' +
+      categories.map( ( category, index ) =>
+        `<li class="cc-category">
+          <button class="cc-btn" tabindex="0"><input type="checkbox" name="${category}"/><span class="cc-btn-checkbox"></span>${category}</button>
+          <button class="cc-btn cc-info" aria-label="${category} Definition Button" tabindex="${index+1}">^</button>
           <div class="cc-tooltip">
-            <p>This is the category for cookies used to help peronalize your internet shopping & advertisement experiences.</p>
+            <p>This is the category for cookies that don't fit the '${category.toLowerCase()}' category.</p>
           </div>
-        </li>
-      </ul>
-    `,
+        </li>`
+      ).join("")
+      + '</ul>',
     save: `<button class="cc-btn cc-save">Save</button>`
     //compliance: compliance is also an element, but it is generated by the application, depending on `type` below
   },
@@ -220,7 +194,7 @@ export default {
   blacklistPage: [],
 
   // If this is defined, then it is used as the inner html instead of layout. This allows for ultimate customisation.
-  // Be sure to use the classes `cc-btn` and `cc-allow`, `cc-deny` or `cc-dismiss`. They enable the app to register click
+  // Be sure to use the classes `cc-btn` and `cc-ALLOW`, `cc-DENY` or `cc-DISMISS`. They enable the app to register click
   // handlers. You can use other pre-existing classes too. See `src/styles` folder.
   overrideHTML: null
 }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
@@ -118,6 +118,7 @@
   .cc-btn {
     border-right: none;
     outline     : none;
+    text-transform: capitalize;
     input[type=checkbox]{
       float: left;
       height: 26px;

diff --git a/src/utils/cookie.js b/src/utils/cookie.js
@@ -11,7 +11,7 @@ export const getCookie = name => {
         .shift()
 }
 
-export const setCookie = ( name, value, expiryDays, domain, path, secure ) => {
+export const setCookie = function ( name, value, expiryDays, domain, path, secure ) {
   const exdate = new Date()
   exdate.setHours(exdate.getHours() + ((typeof expiryDays !== "number"  ? 365 : expiryDays ) * 24))
   document.cookie = name + '=' + value +