ianchanning/dismiss.js

## dismiss.js
/**
 * Dismissable divs that stay dismissed when you dismiss them
 *
 * Besides the dismiss/check its also a generic Cookie monster
 *
 * The cookie code is intially from the uk-cookie-consent plugin
 * @link https://wordpress.org/plugins/uk-cookie-consent/
 *
 * Make the js less obtrusive
 * @link http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript
 *
 * And objectify it
 * @link http://www.dustindiaz.com/json-for-the-masses/ Functional vs Classy section
 */
var dismiss = {
	closeButtons : Object,
	cookieName : window.location + '_dismiss',
	monster : Object,

	/**
	 *
	 * @param {String} cookieName The cookie name to store that the div is dismissed
	 * @param {Object} monster The cookie monster
	 */
	init : function(monster, cookieName) {
		if (cookieName !== undefined) {
			this.cookieName = cookieName;
		}
		this.closeButtons = document.getElementsByClassName('close');
		this.monster = monster;
		this.run();
	},
	/**
	 * Add the onclick events to the closeButtons
	 */
	run : function() {
		for (var i = 0; i < this.closeButtons.length; i++) {
			this.shouldIStayOrShouldIGo(this.closeButtons[i]);
			this.closeButtons[i].onclick = function () {
				dismiss.dismiss(this);
				return false;
			};
		}
	},
	/**
	 * Set the cookie and hide the div
	 *
	 * @param {Object} closeButton Element
	 * @returns {undefined}
	 */
	dismiss : function(closeButton) {
		this.monster.bakeCookie(this.cookieName, true, 30);
		this.shouldIStayOrShouldIGo(closeButton);
	},
	/**
	 * Show the div if the cookie isn't set
	 *
	 * @param {Object} closeButton Element
	 * @returns {undefined}
	 */
	shouldIStayOrShouldIGo : function(closeButton) {
		if (!this.monster.getCookie(this.cookieName)) {
			closeButton.parentNode.style.display = "block";
		} else {
			closeButton.parentNode.style.display = "none";
		}
	}
};

var monster = {
	/**
	 * Bare initialisation
	 */
	init : function() {
		this.run();
	},
	/**
	 * Add the onclick events to the closeButtons
	 */
	run : function() {
	},
	/**
	 * Add cookieName=cookieValue to the document that expires in nDays
	 * @param {String} cookieName
	 * @param {Mixed} cookieValue
	 * @param {Integer} expiresDays
	 * @returns {undefined}
	 */
	bakeCookie : function(cookieName, cookieValue, expiresDays) {
		var today = new Date();
		var expire = new Date();
		if (expiresDays === null || expiresDays === 0) {
			expiresDays = 1;
		}
		expire.setTime(today.getTime() + 3600000*24*expiresDays);
		document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString()+"; path=/";
	},
	/**
	 * Get the value of cookieName
	 *
	 * @param {String} cookieName
	 * @returns {String}
	 */
	getCookie : function(cookieName) {
		var theCookie = " "+document.cookie;
		var cookieIndex = theCookie.indexOf(" "+cookieName+"=");
		if (cookieIndex === -1) {
			cookieIndex = theCookie.indexOf(";"+cookieName+"=");
		}
		if (cookieIndex === -1 || cookieName === "") {
			return "";
		}
		var nextCookieIndex = theCookie.indexOf(";",cookieIndex+1);
		if (nextCookieIndex === -1) {
			nextCookieIndex = theCookie.length;
		}
		return unescape(theCookie.substring(cookieIndex+cookieName.length+2,nextCookieIndex));
	},
	/**
	 * Set the expiry of cookieName to a past date
	 *
	 * @param {String} cookieName
	 * @returns {undefined}
	 */
	eatCookie : function(cookieName) {
		var today = new Date();
		var expire = new Date() - 30;
		var cookieValue = '';
		expire.setTime(today.getTime() - 3600000*24*90);
		document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString();
	}
};


function pageLoader() {
	monster.init();
	dismiss.init(monster);
}

window.addEventListener('load',pageLoader,false);


## example.htm
<!DOCTYPE HTML>
<!-- An example HTML to use dismiss.js with -->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Dismissed</title>
<style type="text/css">
    .dismiss {
        background: -moz-linear-gradient(center top , #fcfbfc 0px, #f7f6f7 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border-radius: 4px;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05) inset, 0 -2px 30px rgba(0, 0, 0, 0.016) inset, 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, 0.3);
        color: #5e5e5e;
        list-style: none outside none !important;
        margin: 0 0 2em !important;
        padding: 1em 1em 1em 3.5em !important;
        position: relative;
        text-shadow: 0 1px 0 #fff;
        width: auto;
    }
    button.close {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 0 none;
        cursor: pointer;
        padding: 0;
    }
    .close {
        color: #000;
        float: right;
        font-size: 21px;
        font-weight: 700;
        line-height: 1;
        opacity: 0.2;
        text-shadow: 0 1px 0 #fff;
    }
</style>
</head>
<body>
<div class="dismiss" style="display:none;">
<button class="close">&times;</button>
<p>Don't dismiss me!</p>
</div>
<script type="text/javascript" src="dismiss.js"></script>
</body>
</html>
	/**
	* Dismissable divs that stay dismissed when you dismiss them
	*
	* Besides the dismiss/check its also a generic Cookie monster
	*
	* The cookie code is intially from the uk-cookie-consent plugin
	* @link https://wordpress.org/plugins/uk-cookie-consent/
	*
	* Make the js less obtrusive
	* @link http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript
	*
	* And objectify it
	* @link http://www.dustindiaz.com/json-for-the-masses/ Functional vs Classy section
	*/
	var dismiss = {
	closeButtons : Object,
	cookieName : window.location + '_dismiss',
	monster : Object,

	/**
	*
	* @param {String} cookieName The cookie name to store that the div is dismissed
	* @param {Object} monster The cookie monster
	*/
	init : function(monster, cookieName) {
	if (cookieName !== undefined) {
	this.cookieName = cookieName;
	}
	this.closeButtons = document.getElementsByClassName('close');
	this.monster = monster;
	this.run();
	},
	/**
	* Add the onclick events to the closeButtons
	*/
	run : function() {
	for (var i = 0; i < this.closeButtons.length; i++) {
	this.shouldIStayOrShouldIGo(this.closeButtons[i]);
	this.closeButtons[i].onclick = function () {
	dismiss.dismiss(this);
	return false;
	};
	}
	},
	/**
	* Set the cookie and hide the div
	*
	* @param {Object} closeButton Element
	* @returns {undefined}
	*/
	dismiss : function(closeButton) {
	this.monster.bakeCookie(this.cookieName, true, 30);
	this.shouldIStayOrShouldIGo(closeButton);
	},
	/**
	* Show the div if the cookie isn't set
	*
	* @param {Object} closeButton Element
	* @returns {undefined}
	*/
	shouldIStayOrShouldIGo : function(closeButton) {
	if (!this.monster.getCookie(this.cookieName)) {
	closeButton.parentNode.style.display = "block";
	} else {
	closeButton.parentNode.style.display = "none";
	}
	}
	};

	var monster = {
	/**
	* Bare initialisation
	*/
	init : function() {
	this.run();
	},
	/**
	* Add the onclick events to the closeButtons
	*/
	run : function() {
	},
	/**
	* Add cookieName=cookieValue to the document that expires in nDays
	* @param {String} cookieName
	* @param {Mixed} cookieValue
	* @param {Integer} expiresDays
	* @returns {undefined}
	*/
	bakeCookie : function(cookieName, cookieValue, expiresDays) {
	var today = new Date();
	var expire = new Date();
	if (expiresDays === null \|\| expiresDays === 0) {
	expiresDays = 1;
	}
	expire.setTime(today.getTime() + 360000024expiresDays);
	document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString()+"; path=/";
	},
	/**
	* Get the value of cookieName
	*
	* @param {String} cookieName
	* @returns {String}
	*/
	getCookie : function(cookieName) {
	var theCookie = " "+document.cookie;
	var cookieIndex = theCookie.indexOf(" "+cookieName+"=");
	if (cookieIndex === -1) {
	cookieIndex = theCookie.indexOf(";"+cookieName+"=");
	}
	if (cookieIndex === -1 \|\| cookieName === "") {
	return "";
	}
	var nextCookieIndex = theCookie.indexOf(";",cookieIndex+1);
	if (nextCookieIndex === -1) {
	nextCookieIndex = theCookie.length;
	}
	return unescape(theCookie.substring(cookieIndex+cookieName.length+2,nextCookieIndex));
	},
	/**
	* Set the expiry of cookieName to a past date
	*
	* @param {String} cookieName
	* @returns {undefined}
	*/
	eatCookie : function(cookieName) {
	var today = new Date();
	var expire = new Date() - 30;
	var cookieValue = '';
	expire.setTime(today.getTime() - 36000002490);
	document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString();
	}
	};


	function pageLoader() {
	monster.init();
	dismiss.init(monster);
	}

	window.addEventListener('load',pageLoader,false);
	<!DOCTYPE HTML>
	<!-- An example HTML to use dismiss.js with -->
	<html lang="en-US">
	<head>
	<meta charset="UTF-8">
	<title>Dismissed</title>
	<style type="text/css">
	.dismiss {
	background: -moz-linear-gradient(center top , #fcfbfc 0px, #f7f6f7 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border-radius: 4px;
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05) inset, 0 -2px 30px rgba(0, 0, 0, 0.016) inset, 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, 0.3);
	color: #5e5e5e;
	list-style: none outside none !important;
	margin: 0 0 2em !important;
	padding: 1em 1em 1em 3.5em !important;
	position: relative;
	text-shadow: 0 1px 0 #fff;
	width: auto;
	}
	button.close {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 0 none;
	cursor: pointer;
	padding: 0;
	}
	.close {
	color: #000;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.2;
	text-shadow: 0 1px 0 #fff;
	}
	</style>
	</head>
	<body>
	<div class="dismiss" style="display:none;">
	<button class="close">×</button>
	<p>Don't dismiss me!</p>
	</div>
	<script type="text/javascript" src="dismiss.js"></script>
	</body>
	</html>