Version avec modules séparés !
This commit is contained in:
Chouchen
62
modules/search/Search.php
Normal file
62
modules/search/Search.php
Normal file
@@ -0,0 +1,62 @@
|
||||
<?php
|
||||
class search extends Module {
|
||||
|
||||
protected $moduleName;
|
||||
protected $moduleTitle;
|
||||
protected $pathToModule;
|
||||
|
||||
protected static $paramsList = array(
|
||||
'visibility'
|
||||
);
|
||||
public $params = array();
|
||||
|
||||
public function __construct($params){
|
||||
$this->moduleName = get_class();
|
||||
$this->pathToModule = 'modules/'.$this->moduleName.'/';
|
||||
$this->setParams($params);
|
||||
echo '<link rel="stylesheet" type="text/css" href="'.$this->pathToModule.'css/search.css">
|
||||
<script type="text/javascript" src="'.$this->pathToModule.'js/jquery.search.js"></script>
|
||||
<form id="searchForm" method="post">
|
||||
<fieldset>
|
||||
<input id="s" type="text" />
|
||||
<input type="submit" value="Submit" id="submitButton" class="searchbutton" />
|
||||
|
||||
<ul class="icons">
|
||||
<li class="web" title="Web Search" data-searchType="web">Web</li>
|
||||
<li class="images" title="Image Search" data-searchType="images">Images</li>
|
||||
<li class="news" title="News Search" data-searchType="news">News</li>
|
||||
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
|
||||
</ul>
|
||||
|
||||
</fieldset>
|
||||
</form>';
|
||||
}
|
||||
|
||||
private function setParams($params){
|
||||
$this->params = $params;
|
||||
}
|
||||
|
||||
public static function start($params){
|
||||
$search = new search($params);
|
||||
}
|
||||
|
||||
public function setVisibility($visibility){
|
||||
// Saving the position and z-index of the note:
|
||||
$xmla = simplexml_load_file('../'.AccueilModules::CONFIG_FILE);
|
||||
|
||||
$path = $xmla->xpath("//item[@id='search']");
|
||||
$path[0]->visibility = $visibility;
|
||||
|
||||
$xmla->asXML('../'.AccueilModules::CONFIG_FILE);
|
||||
|
||||
echo "ok";
|
||||
}
|
||||
|
||||
public static function updateConfig($updated){
|
||||
foreach ($updated as $what=>$withWhat){
|
||||
if(in_array($what, self::$paramsList)){
|
||||
call_user_func(array(get_class(), "set".ucfirst($what)), $withWhat);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
164
modules/search/css/search.css
Normal file
164
modules/search/css/search.css
Normal file
@@ -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;
|
||||
}
|
||||
184
modules/search/js/search.js
Normal file
184
modules/search/js/search.js
Normal file
@@ -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('');
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user