Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added "Customize Cookies" Banner, Added Session-Only Cookies Functionality, and Added Test Suite #84

Open
wants to merge 22 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added glowcookies customizer options
This includes a completely new button that allows more in-depth cookie selection. Previously, you could only accept all or reject all, but now you are able to specify what specifically you want to accept or reject using different switches. More customization options coming soon to this for styling and such.
  • Loading branch information
avgentile committed Mar 20, 2024
commit 5e4b4fa47c914602c412d28985606e734eb6885e
70 changes: 67 additions & 3 deletions src/glowCookies.css
Original file line number Diff line number Diff line change
@@ -17,6 +17,72 @@
transform: scale(1) !important;
}

.glowCookies__customize {
position: fixed;
bottom: 15px;
z-index: 999;
min-height: 200px;
min-width: 300px;
font-family: inherit;
font-size: 15px;
font-weight: bolder;
line-height: normal;
border: none;
padding: 12px 18px;
text-decoration: none;
user-select: none;
display: flex;
flex-direction: column;
gap: 50px;
-webkit-box-shadow: 0 .625em 1.875em rgba(2,2,3,.1);
-moz-box-shadow: 0 .625em 1.875em rgba(2,2,3,.1);
box-shadow: 0 .625em 1.875em rgba(2,2,3,.1);
}

.glowCookies__customize_item_container{
display: flex;
width: 100%;
flex-direction: row;
font-size: 1em;
justify-content: space-between;
}

.glowCookies__customize_text{
justify-self: flex-start;
}

.glowCookies__customize_switch_button {
justify-self: flex-start;
align-self: flex-start;
align-self: center;
display : inline-block;
min-width: 40px;
height: 1.5em;
display: flex;
align-items: center;
border-radius: 20px;
}

.glowCookies__customize_switch_button_on{
background-color: blue;
border: 2px solid gray;
justify-content: flex-end;
}

.glowCookies__customize_switch_button_off{
background-color: gray;
border: 2px solid gray;
justify-content: flex-start;
}

.glowCookies__customize_switch_circle {
background-color: white;
height: 1.4em;
width: 1.4em;
border-radius: 100%;

}

/* COMMON STYLES */
/* ========================= */
.glowCookies__banner {
@@ -28,12 +94,10 @@
width: auto;
max-width: 375px;
z-index: 999;
-webkit-box-shadow: 0 .625em 1.875em rgba(2,2,3,.2);
-moz-box-shadow: 0 .625em 1.875em rgba(2,2,3,.2);
box-shadow: 0 .625em 1.875em rgba(2,2,3,.2);
transition: transform .2s ease, opacity .2s ease !important;
}


.glowCookies__banner .accept__btn__styles {
border: none;
padding: 13px 15px;
119 changes: 116 additions & 3 deletions src/glowCookies.js
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@ class GlowCookies {
this.tracking = undefined
// DOM ELEMENTS
this.PreBanner = undefined
this.CustomizeSwitches = [undefined, undefined, undefined] // At most 3 valid switches
this.Cookies = undefined
this.DOMbanner = undefined
}
@@ -27,7 +28,7 @@ class GlowCookies {
addCss() {
const stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('href', `https://cdn.jsdelivr.net/gh/manucaralmo/[email protected]/src/glowCookies.min.css`);
stylesheet.setAttribute('href', `./glowCookies.css`);
document.head.appendChild(stylesheet);
}

@@ -46,7 +47,10 @@ class GlowCookies {
this.Cookies.innerHTML = `<div
id="glowCookies-banner"
class="glowCookies__banner glowCookies__banner__${this.config.bannerStyle} glowCookies__${this.config.border} glowCookies__${this.config.position}"
style="background-color: ${this.banner.background};"
style="background-color: ${this.banner.background};
-webkit-box-shadow: 0 .625em 1.875em rgba(2,2,3,.2);
-moz-box-shadow: 0 .625em 1.875em rgba(2,2,3,.2);
box-shadow: 0 .625em ${this.banner.shadowSpread} ${this.banner.shadowColor};"
>
<span class="close_btn_styles" ${this.banner.closeBtnHiddenText} style="color: ${this.banner.closeColor}; cursor: pointer" onclick="this.parentNode.parentNode.remove(); return false;">&#10006;</span>
<h3 style="color: ${this.banner.color};">${this.banner.heading}</h3>
@@ -65,6 +69,9 @@ class GlowCookies {
<button type="button" id="acceptCookies" class="btn__accept accept__btn__styles" style="color: ${this.banner.acceptBtn.color}; background-color: ${this.banner.acceptBtn.background};">
${this.banner.acceptBtn.text}
</button>
<button type="button" id="customizeButton" class="btn__settings settings__btn__styles" style="color: ${this.banner.customizeButton.color}; display: ${this.banner.customizeButton.display}; background-color: ${this.banner.customizeButton.background};">
${this.banner.customizeButton.text}
</button>
<button type="button" id="rejectCookies" class="btn__settings settings__btn__styles" style="color: ${this.banner.rejectBtn.color}; background-color: ${this.banner.rejectBtn.background};">
${this.banner.rejectBtn.text}
</button>
@@ -74,11 +81,72 @@ class GlowCookies {
document.body.appendChild(this.Cookies);
this.DOMbanner = document.getElementById('glowCookies-banner')

// COOKIES BANNER
this.switch_on = ["glowCookies__customize_switch_button_off", "glowCookies__customize_switch_button_off", "glowCookies__customize_switch_button_off"];
this.Customizer = document.createElement("div");
this.Customizer.innerHTML = `<div
id="glowCookies-customize"
class="glowCookies__customize glowCookies__${this.config.position}"
style="">
<h1>Customize Cookies</h1>
<div class ="glowCookies__customize_item_container">
<div class ="glowCookies__customize_text">
User Preferences
</div>
<div>
<button id="glowCookies-customize-switch-1" class="glowCookies__customize_switch_button">
<div class=glowCookies__customize_switch_circle>

</div>
</button>
</div>
</div>
<div class ="glowCookies__customize_item_container">
<div class ="glowCookies__customize_text">
Analytics
</div>
<div>
<button id="glowCookies-customize-switch-2" class="glowCookies__customize_switch_button">
<div class=glowCookies__customize_switch_circle>

</div>
</button>
</div>
</div>
<div class ="glowCookies__customize_item_container">
<div class ="glowCookies__customize_text">
Third Party Cookies
</div>
<div>
<button id="glowCookies-customize-switch-3" class="glowCookies__customize_switch_button">
<div class=glowCookies__customize_switch_circle>

</div>
</button>
</div>
</div>
<button id="glowCookies-customize-save">
Save cookie preferences
</button>
</div>
</div>
`;
document.body.appendChild(this.Customizer);
for(let i = 1; i < 4; i++){
this.CustomizeSwitches[i - 1] = document.getElementById('glowCookies-customize-switch-' + i)
}


// SET EVENT LISTENERS
document.getElementById('prebannerBtn').addEventListener('click', () => this.openSelector())
document.getElementById('acceptCookies').addEventListener('click', () => this.acceptCookies())
document.getElementById('rejectCookies').addEventListener('click', () => this.rejectCookies())
document.getElementById('customizeButton').addEventListener('click', () => this.openCustomizer())
document.getElementById('glowCookies-customize-switch-1').addEventListener('click', () => this.switchCustomizer(1))
document.getElementById('glowCookies-customize-switch-2').addEventListener('click', () => this.switchCustomizer(2))
document.getElementById('glowCookies-customize-switch-3').addEventListener('click', () => this.switchCustomizer(3))
document.getElementById('glowCookies-customize-save').addEventListener('click', () => this.savePreferences())
// Add a new click listener for the 'closeManager'
}

checkStatus() {
@@ -99,6 +167,7 @@ class GlowCookies {
openManageCookies() {
this.PreBanner.style.display = this.config.hideAfterClick ? "none" : "block"
this.DOMbanner.classList.remove('glowCookies__show')
this.Customizer.style.display = "none"
}

openSelector() {
@@ -119,6 +188,37 @@ class GlowCookies {
this.disableTracking();
}

openCustomizer() {
// Close out the banner, and we need to open the new banner
this.DOMbanner.classList.remove('glowCookies__show');
this.Customizer.style.display = "block";
for(let i = 1; i < 4; i++){
this.CustomizeSwitches[i - 1].classList.add("glowCookies__customize_switch_button_off");
}
}

switchCustomizer(switch_num) {
switch_num = switch_num - 1
this.CustomizeSwitches[switch_num].classList.remove(this.switch_on[switch_num]);
if(this.switch_on[switch_num] == "glowCookies__customize_switch_button_off"){
// Off to on
this.switch_on[switch_num] = "glowCookies__customize_switch_button_on";

}else{
// On to off
this.switch_on[switch_num] = "glowCookies__customize_switch_button_off"
}
this.CustomizeSwitches[switch_num].classList.add(this.switch_on[switch_num]);
}

savePreferences(){
this.DOMbanner.classList.add('glowCookies__show');
this.Customizer.style.display = "none";
for(let i = 1; i < 4; i++){
this.CustomizeSwitches[i - 1].classList.remove("glowCookies__customize_switch_button_off");
}
}

activateTracking() {
// Google Analytics Tracking
if (this.tracking.AnalyticsCode) {
@@ -251,12 +351,17 @@ class GlowCookies {
HotjarTrackingCode: obj.hotjar || undefined,
customScript: obj.customScript || undefined
}

let customizeBtnDisplayVal = 'block';
if (!obj.customizeBtnDisplay){
customizeBtnDisplayVal = 'none';
}
this.banner = {
description: obj.bannerDescription || lang.bannerDescription,
linkText: obj.bannerLinkText || lang.bannerLinkText,
link: obj.policyLink || '#link',
background: obj.bannerBackground || '#fff',
shadowSpread: obj.shadowSpread || 0,
shadowColor: obj.shadowColor || 'rgb(0,0,0,0)',
color: obj.bannerColor || '#1d2e38',
closeColor: obj.closeColor || '#000',
closeBtnHiddenText: obj.closeBtnHidden ? 'hidden' : '',
@@ -266,6 +371,12 @@ class GlowCookies {
background: obj.acceptBtnBackground || '#253b48',
color: obj.acceptBtnColor || '#fff'
},
customizeButton: {
display: customizeBtnDisplayVal,
text: obj.customizeBtnText || lang.customizeBtnText,
background: obj.customizeBtnBackground || '#E8E8E8',
color: obj.customizeBtnColor || '#636363'
},
rejectBtn: {
text: obj.rejectBtnText || lang.rejectBtnText,
background: obj.rejectBtnBackground || '#E8E8E8',
@@ -292,6 +403,7 @@ class LanguagesGC {
this.bannerLinkText = lang['bannerLinkText']
this.acceptBtnText = lang['acceptBtnText']
this.rejectBtnText = lang['rejectBtnText']
this.customizeBtnText = lang['customizeBtnText']
this.manageText = lang['manageText']
}

@@ -327,6 +439,7 @@ class LanguagesGC {
'bannerLinkText': 'Read more about cookies',
'acceptBtnText': 'Accept cookies',
'rejectBtnText': 'Reject',
'customizeBtnText': 'More options',
'manageText': 'Manage cookies'
},
sv: {