https://kinorex.ch/js/cookieBar.js

1/*!
2 * Simple JS plugin for generating a basic cookie consent notice easily
3 *
4 * Copyright (c) 2022 @louisho5
5 * Under the MIT license.
6 *
7 * @version 1.0.0
8 */
9
10var cookieBar = function (options) {
11	this.options = options;
12	if (this.options == undefined) {
13		this.options = {}
14	}
15	// Set options to default value when not set manually
16	if (this.options.selector == undefined) {
17		this.options.selector = '#cookieBar';
18	}
19	if (this.options.message == undefined) {
20		this.options.message = 'By using our site you agree to our use of cookies to give you the best experience on our website.';
21	}
22	if (this.options.button == undefined) {
23		this.options.button = 'GOT IT';
24	}
25	if (this.options.theme == undefined) {
26		this.options.theme = '#666';
27	}
28	if (this.options.expire == undefined) {
29		this.options.expire = 24;
30	}
31	var ccExpire = this.options.expire;
32	var ccbar = document.querySelector(this.options.selector);
33	var ccbarMsgBox = document.createElement('div');
34	ccbarMsgBox.classList.add("cc-bar-col");
35	ccbarMsgBox.innerHTML = this.options.message;
36	ccbar.appendChild(ccbarMsgBox);
37	var ccbarBtnBox = document.createElement('div');
38	ccbarBtnBox.classList.add("cc-bar-col");
39	ccbarBtnBox.innerHTML = '<a class="cc-bar-btn" href="#">' + this.options.button + '</a>';
40	ccbar.appendChild(ccbarBtnBox);
41
42	// Check if cookie has been accepted
43	window.onload = function () {
44		if (getCookie("cc-bar-cookies") != "accepted") {
45			ccbar.style.display = "flex";
46			ccbar.style.animation =
47				"cc-bar-fadeIn 0.5s ease both";
48		}
49		// Update cookies when clicked button
50		ccbarBtnBox.querySelector(".cc-bar-btn").addEventListener('click', function (e) {
51			e.preventDefault();
52			setCookie("cc-bar-cookies", "accepted", ccExpire);
53			ccbar.style.animation =
54				"cc-bar-fadeOut 0.5s ease both";
55			setTimeout(function () {
56				ccbar.style.display = "none";
57			}, 500);
58		});
59	}
60
61	// Cookies Controls
62	var setCookie = function (name, value, expireHrs) {
63		var d = new Date();
64		d.setTime(d.getTime() + expireHrs * 60 * 60 * 1000);
65		document.cookie = name + "=" + value + ";" + "expires=" + d.toUTCString() + ";path=/";
66	}
67
68	var getCookie = function (name) {
69		function escape(s) {
70			return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, "\\$1");
71		}
72		var match = document.cookie.match(
73			RegExp("(?:^|;\\s*)" + escape(name) + "=([^;]*)")
74		);
75		return match ? match[1] : null;
76	}
77
78	document.head.insertAdjacentHTML("beforeend", "<style>"
79	+ this.options.selector + " {\
80		display: none;\
81		position: fixed;\
82		left: 0;\
83		bottom: 0;\
84		z-index: 1;\
85		align-items: center;\
86		flex-direction: row;\
87		justify-content: space-between;\
88		color: black;\
89		background-color: white;\
90		font-family: inherit;\
91		font-size: 14px;\
92		line-height: 1.5;\
93		padding: 15px 15px;\
94		margin: 15px;\
95		width: calc(100% - 50px);\
96		box-shadow: 0 -1px 10px 0 rgba(170, 170, 170, 0.3);\
97		box-sizing: border-box;\
98		border: 3px solid " + this.options.theme + ";\
99		border-radius: 7px;\
100	}"
101	+ this.options.selector + " .cc-bar-col {\
102		width: auto;\
103	}"
104	+ this.options.selector + " .cc-bar-col .cc-bar-btn {\
105		display: block;\
106		font-size: 14px;\
107		padding: 7px 15px;\
108		margin: 0 0 0 10px;\
109		color: white;\
110		background-color: " + this.options.theme + ";\
111		text-decoration: none;\
112		white-space: nowrap;\
113		text-align: center;\
114	}\
115	@keyframes cc-bar-fadeIn {\
116		from { opacity:0; transform:translateY(50px); }\
117		to { opacity:1; transform:translateY(0); }\
118	}\
119	@keyframes cc-bar-fadeOut {\
120		from { opacity:1; transform:translateY(0); }\
121		to { opacity:0; transform:translateY(50px); }\
122	}\
123	@media only screen and (max-width: 991px) {"
124		+ this.options.selector + " {\
125			font-size: 16px;\
126			flex-direction: column;\
127			margin: 0;\
128			width: 100%;\
129			border-radius: 0;\
130		}"
131		+ this.options.selector + " .cc-bar-col {\
132			width: 100%;\
133		}"
134		+ this.options.selector + " .cc-bar-col .cc-bar-btn {\
135			font-size: 16px;\
136			margin: 10px 0 0 0;\
137		}\
138	}\
139	</style>")
140}