Add a preview banner to Summon 1.0 to let folks try Summon 2.0.

about.markdown

Summon 2.0 Preview Banner

I wanted a way to add a banner to our Summon 1.0 site to give folks a heads-up that we will be switching to the 2.0 interface soon. But mostly I want folks to have a chance to play with the new search. I wrote a simple banner that is injected with JavaScript on page load that includes a close button. If a patron clicks the close button, the script will set a cookie called "noPreview" that will prevent the preview banner from showing up for 7 days.

This is probably the last script I'll write for Summon 1.0. That makes me kind of sad.

The cookie functions are verbetim from the master, ppk: http://www.quirksmode.org/js/cookies.html

summonpreview.js

function createCookie(name,value,days) {
	console.log("working");
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
	$("#gvsu-close-button").closest("#new-results").css("display","none");
}
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

if(readCookie('noPreview') !== 'prevent') {
	
	var newBanner = '<style> .gvsu-button, .gvsu-button-grey { padding: .333em .75em; font-size: 1.1em; line-height: 1.3125em; -webkit-border-radius: .25em; -moz-border-radius: .25em; border-radius: .25em; display: inline-block; font-weight: bold; text-decoration: none; cursor: pointer; margin-top: .825em; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } .gvsu-button { color: #fff; background: #20559a; border: 1px solid #4081af; border-bottom-color: #20559a; } a.gvsu-button:hover { color: #fff !important; } .gvsu-button-grey { color: #444; background: #eee; border: 1px solid #aaa; border-top: 1px solid #ccc; border-left: 1px solid #ccc;} a.gvsu-button-grey:hover { color: #333 !important; } #new-results { display: block; line-height: 1.5em; margin: 0; padding: .5em 1.6em; background: #7fc1ff; border: 1px solid #6694cc; text-align: left; color: #444; position: relative; } #new-results p { font-size: 1.4em; font-weight: bold; width: 55%; float: left; } #new-results ul { list-style-type: none; } #new-results ul li { width: 12em; float: left; margin-left: 2em; } .gvsu-close { cursor: pointer; position: absolute; top: .25em; right: .25em; text-indent: -9999px; background: transparent url(//gvsulib.com/labs/img/close-icon.png) top left no-repeat; height: 20px; width: 20px; } </style> <div id="new-results"> <p>We&#8217;re working to make library research even easier.</p> <ul> <li><a href="http://gvsu.preview.summon.serialssolutions.com" class="gvsu-button">Try the new search</a></li> <li><a href="mailto:library@gvsu.edu?subject=New%20Search%20Feedback" class="gvsu-button-grey FeedbackLink">Give Feedback</a></li> </ul> <div style="clear: both;"></div> <div class="gvsu-close" id="gvsu-close-button" onclick="createCookie(\'noPreview\',\'prevent\',7)">[x] Close</div> </div>';
	
	$("#page").prepend(newBanner);
	
}

If you are in the civilized world, you'll need to have some sort of How We Use Cookies notice if you use this script.