Skip to content

Commit 002a854

Browse files
selvaklncselvaklnc
committed
add
1 parent 3232021 commit 002a854

31 files changed

Lines changed: 5591 additions & 18 deletions

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,14 @@
11
# WM Cookie Consent
2+
3+
Lightweight open-source JavaScript library for **GDPR compliant cookie consent and script blocking**.
4+
5+
![License](https://img.shields.io/github/license/wikimint/wm-cookie-consent)
6+
![Stars](https://img.shields.io/github/stars/wikimint/wm-cookie-consent)
7+
![Issues](https://img.shields.io/github/issues/wikimint/wm-cookie-consent)
8+
![CDN](https://img.shields.io/jsdelivr/gh/hm/wikimint/wm-cookie-consent)
9+
10+
A lightweight **pure JavaScript cookie consent banner with script blocking support**.
11+
212
WM Cookie Consent: Seamlessly manage cookie consent on your site. Enhance privacy compliance with customizable prompts and granular controls.
313

414
[![Demo](https://img.shields.io/badge/Demo-View%20Demo-brightgreen)](https://code.wikimint.com/2024/03/cookie-consent-javascript-cdn-library.html)

overview.html renamed to cookie-overview.html

File renamed without changes.

‎demo/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<script src="../dist/wm-cookie-consent.js"
6+
data-consent-title="We value your privacy"
7+
data-consent-description="This website uses cookies to ensure you get the best experience on our website."
8+
data-policy-link="/privacy-policy"
9+
data-policy-title="Privacy Policy"
10+
data-theme="light"
11+
data-position="bottom-left"
12+
data-font-family="system-ui"
13+
data-cookie-manage="true">
14+
</script>
15+
16+
</head>
17+
18+
<body>
19+
20+
<h1>WM Cookie Consent Demo</h1>
21+
22+
<script
23+
type="text/plain"
24+
data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"
25+
data-consent="analytics"
26+
async>
27+
</script>
28+
29+
</body>
30+
</html>

‎dist/main.js‎

Lines changed: 334 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
var wm_cookie_theme = "light";
2+
var wm_cookie_position = "bottom-left";
3+
var wm_cookie_font = "inherit";
4+
var wm_cookie_title = "Cookie Consent";
5+
var wm_cookie_policy_title = "Policy";
6+
var wm_cookie_read_more = "";
7+
var wm_cookie_current_script = document.currentScript;
8+
var wm_cookie_message = "This website uses cookies to ensure you get the best experience on our website.";
9+
if (wm_cookie_current_script.getAttribute("data-consent-description")) {
10+
wm_cookie_message = wm_cookie_current_script.getAttribute("data-consent-description");
11+
}
12+
if (wm_cookie_current_script.getAttribute("data-consent-title")) {
13+
wm_cookie_title = wm_cookie_current_script.getAttribute("data-consent-title");
14+
}
15+
if (wm_cookie_current_script.getAttribute("data-theme")) {
16+
wm_cookie_theme = wm_cookie_current_script.getAttribute("data-theme");
17+
}
18+
if (wm_cookie_current_script.getAttribute("data-position")) {
19+
wm_cookie_position = wm_cookie_current_script.getAttribute("data-position");
20+
}
21+
if (wm_cookie_current_script.getAttribute("data-font-family")) {
22+
wm_cookie_font = wm_cookie_current_script.getAttribute("data-font-family");
23+
}
24+
if (wm_cookie_current_script.getAttribute("data-policy-title")) {
25+
wm_cookie_policy_title = wm_cookie_current_script.getAttribute("data-policy-title");
26+
}
27+
if (wm_cookie_current_script.getAttribute("data-policy-link")) {
28+
var wm_cookie_policy_link = wm_cookie_current_script.getAttribute("data-policy-link");
29+
var wm_full_link = '<a target="_blank" href="' + wm_cookie_policy_link + '">' + wm_cookie_policy_title + "</a>.";
30+
wm_cookie_read_more = " For more information, see our " + wm_full_link;
31+
}
32+
const wm_cookie_element = document.createElement("DIV");
33+
wm_cookie_element.innerHTML = `
34+
<div id="wm_cookie" data-theme="` + wm_cookie_theme + `" data-position="` + wm_cookie_position + `">
35+
<div id="wm_cookie-consent">
36+
<h3>` + wm_cookie_icon + wm_cookie_title + `</h3>
37+
<p>` + wm_cookie_message + wm_cookie_read_more + `</p>
38+
<button id="wm_cookie-preferences">Settings</button>
39+
<button id="wm_deny-cookies">Deny</button>
40+
<button id="wm_accept-cookies">Accept</button>
41+
</div>
42+
<div id="wm_cookie-preferences-modal">
43+
<div id="wm_cookie-preferences-modal-content">
44+
<div style="margin-bottom:20px;display:inline-flex;overflow-x: auto;width:100%">
45+
<button class="wm_cookie-tab-button active" onclick="wmCookieTabs(event, 'wm_cookie-tab1')">Preferences</button>
46+
<button class="wm_cookie-tab-button" onclick="wmCookieTabs(event, 'wm_cookie-tab2')">Cookies</button>
47+
<button class="wm_cookie-tab-button" onclick="wmCookieTabs(event, 'wm_cookie-tab3')">Overview</button>
48+
</div>
49+
<div id="wm_cookie-preferences-modal-body">
50+
<div id="wm_cookie-tab1" class="wm_cookie-tab active"></div>
51+
<div id="wm_cookie-tab2" class="wm_cookie-tab">
52+
<h3>Cookies in action</h3>
53+
<table></table>
54+
<h3>Cookies blocked</h3>
55+
<div id="wm_cookies-blocked">
56+
<p>No blocked cookies found.</p>
57+
</div>
58+
</div>
59+
<div id="wm_cookie-tab3" class="wm_cookie-tab">
60+
<div id="wm_cookie-overview"></div>
61+
</div>
62+
</div>
63+
<div class="buttons-brand">
64+
<button id="wm_save-preferences">Save Preferences</button>
65+
<button id="wm_close-preferences">Close</button>
66+
<span class="wm_brand">Powered by <a href='https://developer.wikimint.com/p/cookie-consent-javascript-library.html' target='_blank'><button>wikimint</button></a></span>
67+
</div>
68+
</style>
69+
</div>
70+
</div>
71+
</div> `;
72+
document.body.appendChild(wm_cookie_element);
73+
var pref = {};
74+
pref["essential"] = "Essential cookies are necessary for the website to function properly.";
75+
pref["performance"] = "Performance cookies are used to analyze how visitors use a website.";
76+
pref["functionality"] = "Functionality cookies enable a website to remember information and provide enhanced features.";
77+
pref["advertising"] = "Advertising cookies are used to deliver advertisements relevant to the user's interests.";
78+
pref["third-party"] = "Third-party cookies are placed by domains other than the one the user is visiting.";
79+
pref["analytical"] = "Analytical cookies help website owners understand how visitors interact with the website.";
80+
pref["session"] = "Session cookies are temporary cookies that are erased when the user closes the browser.";
81+
pref["persistant"] = "Persistent cookies are stored on a user's device between browser sessions.";
82+
pref["other"] = "All other cookies if any not listed in the above categories come under other cookies.";
83+
for (var key in pref) {
84+
if (pref.hasOwnProperty(key)) {
85+
var accor = document.createElement("DIV");
86+
accor.setAttribute("class", "wm_cookie-accordion");
87+
accor.innerHTML = `
88+
<div class="wm_cookie-option" onclick="wmCookieAccordion(this)">
89+
<input type="checkbox" id="wm_cookie-` + key + `">
90+
<label style="text-transform: capitalize;" for="wm_cookie-` + key + `">` + key + ` Cookies</label>
91+
</div>
92+
<div class="wm_cookie-accordion-body">
93+
` + pref[key] + `
94+
</div>`;
95+
document.getElementById("wm_cookie-tab1").appendChild(accor);
96+
}
97+
}
98+
function wm_setCookie(name, value, days) {
99+
const expires = /* @__PURE__ */ new Date();
100+
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1e3);
101+
document.cookie = name + `=` + value + `;expires=` + expires.toUTCString() + `;path=/`;
102+
}
103+
function wm_getCookie(name) {
104+
const keyValue = document.cookie.match(`(^|;) ?` + name + `=([^;]*)(;|$)`);
105+
return keyValue ? keyValue[2] : null;
106+
}
107+
function wm_deleteCookie(name) {
108+
document.cookie = name + `=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
109+
}
110+
function wm_savePreferences(preferences) {
111+
localStorage.setItem("wm_cookie_preferences", JSON.stringify(preferences));
112+
}
113+
function wm_loadPreferences() {
114+
const preferences = localStorage.getItem("wm_cookie_preferences");
115+
return preferences ? JSON.parse(preferences) : {};
116+
}
117+
function wm_setConsent(consent) {
118+
wm_setCookie("cookie_consent", consent, 365);
119+
document.getElementById("wm_cookie-consent").style.display = "none";
120+
var value;
121+
if (consent === "accepted") {
122+
value = true;
123+
} else {
124+
value = false;
125+
}
126+
const preferences = {
127+
essential: value,
128+
performance: value,
129+
functionality: value,
130+
advertising: value,
131+
thirdParty: value,
132+
analytical: value,
133+
session: value,
134+
persistent: value,
135+
other: value
136+
};
137+
wm_setCookie("cookie_preferences", JSON.stringify(preferences), 365);
138+
wm_savePreferences(preferences);
139+
wm_manageCookies();
140+
document.querySelectorAll('#wm_cookie-preferences-modal-content input[type="checkbox"]').forEach(function(checkbox) {
141+
checkbox.checked = true;
142+
});
143+
}
144+
document.getElementById("wm_accept-cookies").addEventListener("click", function() {
145+
wm_setConsent("accepted");
146+
document.cookie = "cookie_consent=accepted; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
147+
wm_manageCookies();
148+
document.getElementById("wm_cookie-consent").style.display = "none";
149+
});
150+
document.getElementById("wm_deny-cookies").addEventListener("click", function() {
151+
wm_setConsent("denied");
152+
document.cookie = "cookie_consent=denied; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
153+
wm_manageCookies();
154+
document.getElementById("wm_cookie-consent").style.display = "none";
155+
});
156+
document.getElementById("wm_cookie-preferences").addEventListener("click", function() {
157+
const preferences = wm_loadPreferences();
158+
if (preferences) {
159+
for (const key2 in preferences) {
160+
if (preferences.hasOwnProperty(key2)) {
161+
const checkbox = document.getElementById("wm_cookie-" + key2);
162+
if (checkbox) {
163+
checkbox.checked = preferences[key2];
164+
}
165+
}
166+
}
167+
}
168+
document.getElementById("wm_cookie-preferences-modal").style.display = "block";
169+
if (!wm_cookie_overview) {
170+
fetch(wm_info_src).then((response) => {
171+
if (!response.ok) {
172+
throw new Error("Network response was not ok");
173+
}
174+
return response.text();
175+
}).then((content) => {
176+
document.getElementById("wm_cookie-overview").innerHTML = content;
177+
wm_cookie_overview = true;
178+
}).catch((error) => {
179+
console.error("There was a problem with your fetch operation:", error);
180+
});
181+
}
182+
});
183+
document.getElementById("wm_save-preferences").addEventListener("click", function() {
184+
document.getElementById("wm_cookie-preferences-modal").style.display = "none";
185+
const preferences = {};
186+
document.querySelectorAll('#wm_cookie-preferences-modal-content input[type="checkbox"]').forEach(function(checkbox) {
187+
preferences[checkbox.id.replace("wm_cookie-", "")] = checkbox.checked;
188+
});
189+
wm_savePreferences(preferences);
190+
wm_setCookie("cookie_preferences", JSON.stringify(preferences), 365);
191+
var preference = "accepted";
192+
for (var key2 in preferences) {
193+
if (preferences.hasOwnProperty(key2) && preferences[key2] === false) {
194+
preference = "preferred";
195+
break;
196+
}
197+
}
198+
wm_setCookie("cookie_consent", preference, 365);
199+
wm_manageCookies();
200+
document.getElementById("wm_cookie-consent").style.display = "none";
201+
});
202+
document.getElementById("wm_close-preferences").addEventListener("click", function() {
203+
document.getElementById("wm_cookie-preferences-modal").style.display = "none";
204+
wm_manageCookies();
205+
});
206+
document.getElementById("wm_cookie-manage").addEventListener("click", function() {
207+
document.getElementById("wm_cookie-consent").style.display = "block";
208+
});
209+
function wm_start_cookies() {
210+
var cookies = document.cookie.split(";").reduce((cookiesObj, cookie2) => {
211+
const [name, value] = cookie2.split("=");
212+
cookiesObj[name.trim()] = decodeURIComponent(value);
213+
return cookiesObj;
214+
}, {});
215+
var cookie_table = document.getElementById("wm_cookie-tab2").getElementsByTagName("table")[0];
216+
cookie_table.innerHTML = "";
217+
var blockBtn;
218+
for (var cookie in cookies) {
219+
if (!(cookie == "cookie_consent" || cookie == "cookie_preferences")) {
220+
blockBtn = "<button class='wm_cookie-block'>Block</button>";
221+
} else {
222+
blockBtn = "<button class='wm_cookie-must'>Must</button>";
223+
}
224+
var cookieList = document.createElement("tr");
225+
cookieList.innerHTML = "<td style='display:flex;'>" + blockBtn + "</td><td><div style='font-weight:600;' class='wm_cookie-name'>" + cookie + "</div><span class='wm_cookie-value'>" + cookies[cookie] + "</span></td>";
226+
cookie_table.appendChild(cookieList);
227+
if (localStorage.wm_cookie_blocked) {
228+
var cookie_block_table = document.getElementById("wm_cookies-blocked");
229+
cookie_block_table.innerHTML = "";
230+
var unBlockBtn = "<button class='wm_cookie-unblock'>Unblock</button>";
231+
var blockCookies = JSON.parse(localStorage.getItem("wm_cookie_blocked"));
232+
blockCookies.forEach(function(blockCookie) {
233+
var cookieList2 = document.createElement("div");
234+
cookieList2.setAttribute("style", "margin:0 6px 6px 0;");
235+
cookieList2.innerHTML = unBlockBtn + " <span>" + blockCookie + "</span>";
236+
cookie_block_table.appendChild(cookieList2);
237+
});
238+
}
239+
}
240+
}
241+
wm_start_cookies();
242+
function wm_manageCookies() {
243+
var cookies = document.cookie.split(";").reduce((cookiesObj, cookie2) => {
244+
const [name, value] = cookie2.split("=");
245+
cookiesObj[name.trim()] = decodeURIComponent(value);
246+
return cookiesObj;
247+
}, {});
248+
var cookie_consent = wm_getCookie("cookie_consent");
249+
if (cookie_consent && cookie_consent == "denied") {
250+
for (var cookie in cookies) {
251+
if (!(cookie == "cookie_consent" || cookie == "cookie_preferences")) {
252+
wm_deleteCookie(cookie);
253+
}
254+
}
255+
} else if (cookie_consent && cookie_consent == "preferred") {
256+
var cookie_preferences = wm_getCookie("cookie_preferences");
257+
} else if (cookie_consent === null) {
258+
document.getElementById("wm_cookie-consent").style.display = "block";
259+
}
260+
if (localStorage.wm_cookie_blocked) {
261+
var blockCookies = JSON.parse(localStorage.getItem("wm_cookie_blocked"));
262+
blockCookies.forEach(function(blockCookie) {
263+
wm_deleteCookie(blockCookie);
264+
});
265+
}
266+
wm_start_cookies();
267+
wm_block_init();
268+
wm_unblock_init();
269+
}
270+
wm_manageCookies();
271+
function wm_block_init() {
272+
var blockBtn = document.querySelectorAll(".wm_cookie-block");
273+
blockBtn.forEach(function(button) {
274+
button.addEventListener("click", function() {
275+
var blockCookies;
276+
var cookieName = this.closest("td").nextElementSibling.querySelector("div").textContent;
277+
if (localStorage.wm_cookie_blocked) {
278+
blockCookies = JSON.parse(localStorage.getItem("wm_cookie_blocked"));
279+
} else {
280+
blockCookies = [];
281+
}
282+
if (!blockCookies.includes(cookieName)) {
283+
blockCookies.push(cookieName);
284+
localStorage.setItem("wm_cookie_blocked", JSON.stringify(blockCookies));
285+
wm_manageCookies();
286+
}
287+
});
288+
});
289+
}
290+
function wm_unblock_init() {
291+
var blockBtn = document.querySelectorAll(".wm_cookie-unblock");
292+
blockBtn.forEach(function(button) {
293+
button.addEventListener("click", function() {
294+
var blockCookies;
295+
var cookieName = this.closest("div").querySelector("span").textContent;
296+
if (localStorage.wm_cookie_blocked) {
297+
blockCookies = JSON.parse(localStorage.getItem("wm_cookie_blocked"));
298+
if (blockCookies.includes(cookieName)) {
299+
blockCookies = blockCookies.filter(function(blockCookie) {
300+
return blockCookie !== cookieName;
301+
});
302+
localStorage.setItem("wm_cookie_blocked", JSON.stringify(blockCookies));
303+
wm_manageCookies();
304+
}
305+
}
306+
});
307+
});
308+
}
309+
window.onload = function() {
310+
wm_block_init();
311+
wm_unblock_init();
312+
};
313+
function wmCookieTabs(evt, tabName) {
314+
var i, tabContent, tabButtons;
315+
tabContent = document.getElementsByClassName("wm_cookie-tab");
316+
for (i = 0; i < tabContent.length; i++) {
317+
tabContent[i].style.display = "none";
318+
}
319+
tabButtons = document.getElementsByClassName("wm_cookie-tab-button");
320+
for (i = 0; i < tabButtons.length; i++) {
321+
tabButtons[i].className = tabButtons[i].className.replace(" active", "");
322+
}
323+
document.getElementById(tabName).style.display = "block";
324+
evt.currentTarget.className += " active";
325+
}
326+
function wmCookieAccordion(accordion) {
327+
accordion.classList.toggle("active");
328+
var panel = accordion.nextElementSibling;
329+
if (panel.style.display === "block") {
330+
panel.style.display = "none";
331+
} else {
332+
panel.style.display = "block";
333+
}
334+
}

0 commit comments

Comments
 (0)