Nouvelle version de la recherche

class/Search.php

@@ -7,21 +7,22 @@ class search extends Module {
 	public $params = array();
 	
 	public function __construct($params){
-		echo '<center>
+		echo '<link rel="stylesheet" type="text/css" href="css/search.css">
-				<form method="get" action="http://www.google.fr/custom" target="_top" name="form" id="form">
+				<script type="text/javascript" src="js/jquery.search.js"></script>
-				<table bgcolor="#ffffff" id="recherche">
+				<form id="searchForm" method="post">
-				<tr><td nowrap="nowrap" valign="top" align="left" height="32">
+				<fieldset>
-				<input type="text" name="q" id="q" size="31" maxlength="255" value=""></input>
+					<input id="s" type="text" />
-				<input type="submit" name="sa" value="Rechercher" class="searchbutton"></input>
+					<input type="submit" value="Submit" id="submitButton" />
-				<input type="hidden" name="client" value="pub-5878090856826866"></input>
+
-				<input type="hidden" name="forid" value="1"></input>
+					<ul class="icons">
-				<input type="hidden" name="ie" value="ISO-8859-1"></input>
+						<li class="web" title="Web Search" data-searchType="web">Web</li>
-				<input type="hidden" name="oe" value="ISO-8859-1"></input>
+						<li class="images" title="Image Search" data-searchType="images">Images</li>
-				<input type="hidden" name="cof" 				value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
+						<li class="news" title="News Search" data-searchType="news">News</li>
-				<input type="hidden" name="hl" value="fr"></input>
+						<li class="videos" title="Video Search" data-searchType="video">Videos</li>
-				</td></tr></table>
+					</ul>
-				</form>
+
-				</center>';
+				</fieldset>
+			</form>';
 	}
 	
 	private function setParams($params){

css/search.css

@@ -0,0 +1,164 @@
+#searchForm{
+	/* The search form. */
+	width:525px;
+	/*background-color:#4C5A65;
+	padding:50px 50px 30px;*/
+	margin:0 auto;
+	position:relative;
+
+	-moz-border-radius:16px;
+	-webkit-border-radius:16px;
+	border-radius:16px;
+}
+
+fieldset{
+	border:none;
+}
+
+#s{
+	/* The search text box. */
+
+	border:none;
+	color:#888888;
+	/*background:url("../images/interface/searchBox.png") no-repeat;*/
+	background:url('../images/interface/zoom.png') 10px center no-repeat;
+	border:1px solid #888888;
+	float:left;
+	font-family:Arial,Helvetica,sans-serif;
+	font-size:15px;
+	height:36px;
+	line-height:36px;
+	margin-right:12px;
+	outline:medium none;
+	padding:0 0 0 35px;
+	text-shadow:1px 1px 0 white;
+	width:385px;
+	-moz-border-radius:10px;
+	-webkit-border-radius:10px;
+	border-radius:10px;
+	-moz-box-shadow: 2px 2px 3px #888;
+	-webkit-box-shadow: 2px 2px 3px #888;
+	box-shadow: 2px 2px 3px #888;
+	/* For IE 8 */
+	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888')";
+	/* For IE 5.5 - 7 */
+	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888');
+
+}
+.icons{
+	background:#4C5A65;
+	padding:3px 3px 10px 3px;
+	list-style:none;
+	margin:10px 0;
+	height:19px;
+	position:relative;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+	border-radius:5px;
+}
+
+.icons li{
+	background:url("../images/interface/icons.png") no-repeat;
+	float:left;
+	height:19px;
+	text-indent:-999px;
+	cursor:pointer;
+	margin-right:5px;
+}
+
+/* Styling each icon */
+
+li.web{ width:15px;}
+li.web.active,
+li.web:hover{ background-position:left bottom;}
+
+li.images{ width:22px; background-position:-18px 0;}
+li.images.active,
+li.images:hover{ background-position:-18px bottom;}
+
+li.news{ width:14px; background-position:-44px 0;}
+li.news.active,
+li.news:hover{ background-position:-44px bottom;}
+
+li.videos{ width:17px; background-position:right 0;}
+li.videos.active,
+li.videos:hover{ background-position:right bottom;}
+
+span.arrow{
+	/* The little arrow that moves below the icons */
+
+	width:11px;
+	height:6px;
+	margin:21px 0 0 5px;
+	position:absolute;
+	background:url('../images/interface/arrow.png') no-repeat;
+	left:0;
+}
+
+/* The submit button */
+
+#submitButton{
+	background:url('../images/interface/buttons.png') no-repeat;
+	width:83px;
+	height:36px;
+	text-indent:-9999px;
+	overflow:hidden;
+	text-transform:uppercase;
+	border:none;
+	cursor:pointer;
+}
+
+#submitButton:hover{
+	background-position:left bottom;
+}
+
+/* Web & news results */
+
+.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
+.webResult h2{
+	background-color:#5D6F7B;
+	font-size:18px;
+	font-weight:normal;
+	padding:8px 20px;
+
+	/* Applying CSS3 rounded corners */
+	-moz-border-radius:18px;
+	-webkit-border-radius:18px;
+	border-radius:18px;
+}
+.webResult h2 b{ color:#fff; }
+.webResult h2 a{ color:#eee;border:none;}
+.webResult p{ line-height:1.5;padding:15px 20px;}
+.webResult p b{ color:white;}
+.webResult > a{ margin-left:20px;}
+
+/* Image & video search results */
+
+.imageResult{
+	float:left;
+	height:170px;
+	margin:0 0 20px 40px;
+	text-align:center;
+	width:150px;
+}
+.imageResult img{ display:block;border:none;}
+.imageResult a.pic{
+	border:1px solid #fff;
+	outline:1px solid #777;
+	display:block;
+	margin:0 auto 15px;
+}
+
+/* The show more button */
+
+#more{
+	width:83px;
+	height:24px;
+	background:url('../images/interface/more.png') no-repeat;
+	cursor:pointer;
+	margin:40px auto;
+}
+
+#more:hover{
+	background-position:left bottom;
+}

js/jquery.search.js

@@ -0,0 +1,184 @@
+$(document).ready(function(){
+
+	var config = {
+		type		: 'web',
+		perPage		: 8,			// A maximum of 8 is allowed by Google
+		page		: 0				// The start page
+	}
+
+	// The small arrow that marks the active search icon:
+	var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');
+
+	$('ul.icons li').click(function(){
+		var el = $(this);
+
+		if(el.hasClass('active')){
+			// The icon is already active, exit
+			return false;
+		}
+
+		el.siblings().removeClass('active');
+		el.addClass('active');
+
+		// Move the arrow below this icon
+		arrow.stop().animate({
+			left		: el.position().left,
+			marginLeft	: (el.width()/2)-4
+		});
+
+		// Set the search type
+		config.type = el.attr('data-searchType');
+		$('#more').fadeOut();
+	});
+
+	// Focusing the input text box:
+	$('#s').focus();
+
+	$('#searchForm').submit(function(){
+		googleSearch();
+		return false;
+	});
+
+	function googleSearch(settings){
+
+	// If no parameters are supplied to the function,
+	// it takes its defaults from the config object above:
+
+	settings = $.extend({},config,settings);
+	settings.term = settings.term || $('#s').val();
+
+	// URL of Google's AJAX search API
+	var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+
+					'?v=1.0&callback=?';
+	
+	$.getJSON(apiURL,{
+		q	: settings.term,
+		rsz	: settings.perPage,
+		start	: settings.page*settings.perPage
+	},function(r){
+
+		var results = r.responseData.results;
+		$('#more').remove();
+
+		if(results.length){
+
+			// If results were returned, add them to a pageContainer div,
+			// after which append them to the #resultsDiv:
+
+			var pageContainer = $('<div>',{className:'pageContainer'});
+
+			for(var i=0;i<results.length;i++){
+				// Creating a new result object and firing its toString method:
+				pageContainer.append(new result(results[i]) + '');
+			}
+
+			var cursor = r.responseData.cursor;
+
+			// Checking if there are more pages with results,
+			// and deciding whether to show the More button:
+
+			if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
+				$('<div>',{id:'more'}).appendTo(pageContainer).click(function(){
+					googleSearch({append:true,page:settings.page+1});
+					$(this).fadeOut();
+				});
+			}
+			
+			pageContainer.append('<div class="clear"></div>').hide();
+
+			$.fancybox(
+				$(pageContainer).html(),
+				{
+					'autoDimensions'	: false,
+					'width'         	: 400,
+					'height'        	: 'auto',
+					'showNavArrows'		: false,
+					'transitionIn'		: 'elastic'
+				}
+			);
+			$('#more').click(function(){
+				googleSearch({append:true,page:settings.page+1});
+			});
+		}
+		else {
+			
+			var pageContainer = $('<div>',{className:'pageContainer'});
+			// No results were found for this search.
+
+			$('<p>',{
+				className	: 'notFound',
+				html		: 'No Results Were Found!'
+			}).appendTo(pageContainer);
+			// .hide().appendTo(resultsDiv).fadeIn();
+			$.fancybox(
+				$(pageContainer).html(),
+				{
+					'autoDimensions'	: false,
+					'width'         	: 400,
+					'height'        	: 'auto',
+					'showNavArrows'		: false,
+					'transitionIn'		: 'elastic'
+				}
+			);
+		}
+	});
+}
+
+	function result(r){
+
+		// This is class definition. Object of this class are created for
+		// each result. The markup is generated by the .toString() method.
+
+		var arr = [];
+
+		// GsearchResultClass is passed by the google API
+		switch(r.GsearchResultClass){
+
+			case 'GwebSearch':
+				arr = [
+					'<div class="webResult">',
+					'<h2><a href="',r.url,'">',r.title,'</a></h2>',
+					'<p>',r.content,'</p>',
+					'<a href="',r.url,'">',r.visibleUrl,'</a>',
+					'</div>'
+				];
+			break;
+			case 'GimageSearch':
+				arr = [
+					'<div class="imageResult">',
+					'<a href="',r.url,'" title="',r.titleNoFormatting,
+					'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
+					'<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',
+					r.tbHeight,'" /></a>','<div class="clear"></div>',
+					'<a href="',r.originalContextUrl,'">',r.visibleUrl,'</a>',
+					'</div>'
+				];
+			break;
+			case 'GvideoSearch':
+				arr = [
+					'<div class="imageResult">',
+					'<a href="',r.url,'" title="',r.titleNoFormatting,
+					'" class="pic" style="width:150px;height:auto;">',
+					'<img src="',r.tbUrl,'" width="100%" /></a>',
+					'<div class="clear"></div>','<a href="',
+					r.originalContextUrl,'">',r.publisher,'</a>',
+					'</div>'
+				];
+			break;
+			case 'GnewsSearch':
+				arr = [
+					'<div class="webResult">',
+					'<h2><a href="',r.unescapedUrl,'">',r.title,'</a></h2>',
+					'<p>',r.content,'</p>',
+					'<a href="',r.unescapedUrl,'">',r.publisher,'</a>',
+					'</div>'
+				];
+			break;
+		}
+
+		// The toString method.
+		this.toString = function(){
+			return arr.join('');
+		}
+	}
+});