CookieBar

cookiebar.js

(function() {

	function onDocumentReady(func) {
		var callback = function() {
			if (! func.done) {
				func.done = true;
				func();
			}
		};
		if (document.readyState === "complete") {
			callback();
		}
		else if (document.addEventListener) {
			document.addEventListener("DOMContentLoaded", callback, false);
			window.addEventListener("load", callback, false);
		}
		else {
			document.attachEvent("onreadystatechange", function() {
				if (document.readyState === "complete") callback();
			});
			window.attachEvent("onload", callback);
		}
	}

	function storageGet(key) {
		if (window.localStorage && window.localStorage.getItem) {
			var value = window.localStorage.getItem(key);
			return value !== null ? value : undefined;
		}
	}
	function storageSet(key, value) {
		if (window.localStorage && window.localStorage.setItem) {
			window.localStorage.setItem(key, value);
			return (storageGet(key) == value);
		}
		return false;
	}

	function cookieGet(key) {
		if (document.cookie.length) {
			var start = document.cookie.indexOf(key + "=");
			if (start != -1) {
				var end = document.cookie.indexOf(";", start);
				if (end == -1) end = document.cookie.length;
				return unescape(document.cookie.substring(start, end).substring(key.length + 1));
			}
		}
	}
	function cookieSet(key, value) {
		var expirationDate = new Date();
		expirationDate.setFullYear(expirationDate.getFullYear() + 1);
		document.cookie = key + "=" + escape(value) + ";path=/;expires=" + expirationDate.toUTCString();
		return (cookieGet(key) == value);
	}

	function get(key) {
		return storageGet(key) || cookieGet(key);
	}
	function set(key, value) {
		return storageSet(key, value) || cookieSet(key, value);
	}

	onDocumentReady(function() {
		// Variables
		window.cookiebar = window.cookiebar || {};
		var message    = window.cookiebar.message || "Cookies help us deliver this website. By using this website, you agree to our use of cookies.",
			moreUrl    = window.cookiebar.moreUrl || false;
			moreLabel  = window.cookiebar.moreLabel || "Learn more",
			closeLabel = window.cookiebar.closeLabel || "Got it",
			onClose    = window.cookiebar.onClose || function() {},
			onShow     = window.cookiebar.onShow || function() {},
			onSkip     = window.cookiebar.onSkip || function() {};

		// Skip
		if (get("cookiebar") == "skip") {
			return onSkip();
		}

		// Body class
		document.body.className += " with-cookiebar";

		// Div & message
		var div = document.createElement("div");
		document.body.insertBefore(div, document.body.firstChild);

		div.id = "cookiebar";
		div.innerHTML = '<span class="message">' + message + '</span>';

		// Button more
		if (moreUrl) {
			var button = document.createElement("a");
			div.appendChild(button);

			button.className = "more";
			button.innerHTML = moreLabel;
			button.onclick = function() {
				if (typeof(moreUrl) == "function") {
					moreUrl();
				} else {
					window.open(moreUrl, "_blank");
				}
			};
		}

		// Button close
		var button = document.createElement("a");
		div.appendChild(button);

		button.className = "close";
		button.innerHTML = closeLabel;
		button.onclick = function() {
			div.style.display = "none";
			document.body.className = document.body.className.replace(" with-cookiebar", "");
			set("cookiebar", "skip");
			onClose();
		};

		onShow();
	});

})();

optionnel.css

body.with-cookiebar {
	padding-top:30px;
}
#cookiebar {
	position:fixed;
	top:0; left:0; right:0;
	width:100%;
}

style.css

#cookiebar {
	background: #5a5a5a;
	color: #fff;
	font-family: arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	height: 20px;
	line-height: 19px;
	padding: 5px 12px;
}
#cookiebar a {
	background: #303030;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	color: #fff;
	cursor: default !important;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	line-height: 19px;
	margin-left: 16px;
	padding: 0 8px;
	text-decoration: none !important;
	white-space: nowrap;
}
#cookiebar a:hover {
	color: #d9d9d9 !important;
}

usage.html

<script src="cookiebar.js"></script>
<script>
var cookiebar = {
	message    : "Les cookies assurent le bon fonctionnement de ce site. En utilisant ce dernier, vous acceptez l'utilisation des cookies.",
	moreUrl    : "/chemin/vers/la/page.html",
	moreLabel  : "En savoir plus",
	closeLabel : "OK"
};
</script>