phiggins42/googleSelectionSearch.html

## googleSelectionSearch.html
<!DOCTYPE html>
<html>
	<head>

		<style type="text/css">
			#content-area { width:500px; padding:10px; }
		</style>

		<script src="trunk/dojo/dojo.js">
			// requires dojo 1.4
		</script>
		<script>

			var d = dojo;

			// these two functions copied from plugd/base.js and are used in this demo.
			var s = d.global.getSelection || d.doc.getSelection || d.doc.selection && function(){
				return d.doc.selection.createRange().text || "";
			} || function(){};
			d.getSelection = function(){ return s() + ""; };
			d.load = function(){
				var a = d._toArray(arguments), l = a.length,
					f = l && !d.isString(a[l - 1]) ? a.pop() : null
				;
				d.forEach(a, d.require, d);
				f && d.addOnLoad(f);
			}
			// end of plugd code.

			d.ready(function(){

				var selection = "", lastSelection = "", goog, searches = {}, ready;

				d.connect(d.doc, "onmouseup", function(e){

					// lazy load all of our dependencies. call ourselves again after modules ready.
					if(!ready){
						var a = arguments, fn = a.callee, tn = this;
						// we could do a string of require()s and an addOnLoad() here. load() is shorthand.
						d.load("dojo.cache", "dojox.rpc.Service", "dojo.io.script", function(){
							ready = true; // don't load these again.

							// generate the google service so we can search.
							goog = new dojox.rpc.Service(d.fromJson(d.cache("dojox.rpc", "SMDLibrary/google.smd")));

							fn.apply(tn, a); // call ourselves from before.
						});
						return;
					}

					// update the selection text.
					lastSelection = selection;
					selection = d.trim(d.getSelection());

					if(selection.length && lastSelection !== selection){
						// storing 't' because of the async nature of RPC calls. (we cache it later)
						// only run a search if we don't have cached results for some selection
						var t = selection;
						if(!searches[selection]){
							goog.webSearch({ q: selection })
								.addCallback(function(data){
									// handle the search response data
									searches[t] = data.responseData; // cache it.
									showSearch(searches[t]);
								})
								.addErrback(function(e){
									// generic error handler. this will fire if something is thrown
									// from the callback function above (or in showSearch) so handle
									// that appropriately.
									console.warn("something went wrong", e);
								})
							;
						}else{
							// just re-render the data we've already fetched.
							showSearch(searches[t]);
						}
					}

				});

				// ubersimple templating for Dojo 1.4:
				var itemTemplate = "<li><a href='{url}'>{title}</a></li>";
				var showSearch = function(set){
					d.empty("results");
					d.forEach(set.results, function(item){
						d.place(d.replace(itemTemplate, item), "results");
					});
				}

			});
		</script>
	</head>
	<body>
		<div id="content">

			<!-- some words to highlight -->
			<div id="content-area">
			.htaccess AJAX Apache / Server APIs Blog Bookmarking / Social Books Browsers CSS / Design Google Guest Blogger Hosting / Domain Javascript jQuery
			link() Microsoft MooTools MySQL Optimization PHP Poll rand() Security Shell Theory / Ideas Usability / Accessibility XML / XHTML
			This blog is targeted toward all levels of web designers and developers. All web topics are discussed, including CSS, Javascript (MooTools and jQuery), PHP, and more.
			</div>

			<!-- where the results will live, template is an LI -->
			<ul id="results">
				<li>Search results will show up here</li>
			</ul>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<style type="text/css">
	#content-area { width:500px; padding:10px; }
	</style>

	<script src="trunk/dojo/dojo.js">
	// requires dojo 1.4
	</script>
	<script>

	var d = dojo;

	// these two functions copied from plugd/base.js and are used in this demo.
	var s = d.global.getSelection \|\| d.doc.getSelection \|\| d.doc.selection && function(){
	return d.doc.selection.createRange().text \|\| "";
	} \|\| function(){};
	d.getSelection = function(){ return s() + ""; };
	d.load = function(){
	var a = d._toArray(arguments), l = a.length,
	f = l && !d.isString(a[l - 1]) ? a.pop() : null
	;
	d.forEach(a, d.require, d);
	f && d.addOnLoad(f);
	}
	// end of plugd code.

	d.ready(function(){

	var selection = "", lastSelection = "", goog, searches = {}, ready;

	d.connect(d.doc, "onmouseup", function(e){

	// lazy load all of our dependencies. call ourselves again after modules ready.
	if(!ready){
	var a = arguments, fn = a.callee, tn = this;
	// we could do a string of require()s and an addOnLoad() here. load() is shorthand.
	d.load("dojo.cache", "dojox.rpc.Service", "dojo.io.script", function(){
	ready = true; // don't load these again.

	// generate the google service so we can search.
	goog = new dojox.rpc.Service(d.fromJson(d.cache("dojox.rpc", "SMDLibrary/google.smd")));

	fn.apply(tn, a); // call ourselves from before.
	});
	return;
	}

	// update the selection text.
	lastSelection = selection;
	selection = d.trim(d.getSelection());

	if(selection.length && lastSelection !== selection){
	// storing 't' because of the async nature of RPC calls. (we cache it later)
	// only run a search if we don't have cached results for some selection
	var t = selection;
	if(!searches[selection]){
	goog.webSearch({ q: selection })
	.addCallback(function(data){
	// handle the search response data
	searches[t] = data.responseData; // cache it.
	showSearch(searches[t]);
	})
	.addErrback(function(e){
	// generic error handler. this will fire if something is thrown
	// from the callback function above (or in showSearch) so handle
	// that appropriately.
	console.warn("something went wrong", e);
	})
	;
	}else{
	// just re-render the data we've already fetched.
	showSearch(searches[t]);
	}
	}

	});

	// ubersimple templating for Dojo 1.4:
	var itemTemplate = "<li><a href='{url}'>{title}</a></li>";
	var showSearch = function(set){
	d.empty("results");
	d.forEach(set.results, function(item){
	d.place(d.replace(itemTemplate, item), "results");
	});
	}

	});
	</script>
	</head>
	<body>
	<div id="content">

	<!-- some words to highlight -->
	<div id="content-area">
	.htaccess AJAX Apache / Server APIs Blog Bookmarking / Social Books Browsers CSS / Design Google Guest Blogger Hosting / Domain Javascript jQuery
	link() Microsoft MooTools MySQL Optimization PHP Poll rand() Security Shell Theory / Ideas Usability / Accessibility XML / XHTML
	This blog is targeted toward all levels of web designers and developers. All web topics are discussed, including CSS, Javascript (MooTools and jQuery), PHP, and more.
	</div>

	<!-- where the results will live, template is an LI -->
	<ul id="results">
	<li>Search results will show up here</li>
	</ul>
	</div>
	</body>
	</html>