css/script.js

   1 $(document).ready(function(){
   2
   3         var config = {
   4                 siteURL         : 'www.bulletin.auf.org',       // Change this to your site
   5                 searchSite      : true,
   6                 type            : 'web',
   7                 append          : false,
   8                 perPage         : 8,                    // A maximum of 8 is allowed by Google
   9                 page            : 0                             // The start page
  10         }
  11
  12         // The small arrow that marks the active search icon:
  13         var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');
  14
  15         $('ul.icons li').click(function(){
  16                 var el = $(this);
  17
  18                 if(el.hasClass('active')){
  19                         // The icon is already active, exit
  20                         return false;
  21                 }
  22
  23                 el.siblings().removeClass('active');
  24                 el.addClass('active');
  25
  26                 // Move the arrow below this icon
  27                 arrow.stop().animate({
  28                         left            : el.position().left,
  29                         marginLeft      : (el.width()/1)-4
  30                 });
  31
  32                 // Set the search type
  33                 config.type = el.attr('data-searchType');
  34                 $('#more').fadeOut();
  35         });
  36
  37         // Adding the site domain as a label for the first radio button:
  38         $('#siteNameLabel').append(' '+config.siteURL);
  39
  40         // Marking the Search tutorialzine.com radio as active:
  41         $('#searchSite').click();
  42
  43         // Marking the web search icon as active:
  44         $('li.web').click();
  45
  46         // Focusing the input text box:
  47         $('#s').focus();
  48
  49         $('#searchForm').submit(function(){
  50                 googleSearch();
  51                 return false;
  52         });
  53
  54         $('#searchSite,#searchWeb').change(function(){
  55                 // Listening for a click on one of the radio buttons.
  56                 // config.searchSite is either true or false.
  57
  58                 config.searchSite = this.id == 'searchSite';
  59         });
  60
  61
  62         function googleSearch(settings){
  63
  64                 // If no parameters are supplied to the function,
  65                 // it takes its defaults from the config object above:
  66
  67                 settings = $.extend({},config,settings);
  68                 settings.term = settings.term || $('#s').val();
  69
  70                 if(settings.searchSite){
  71                         // Using the Google site:example.com to limit the search to a
  72                         // specific domain:
  73                         settings.term = 'site:'+settings.siteURL+' '+settings.term;
  74                 }
  75
  76                 // URL of Google's AJAX search API
  77                 var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+'?v=1.0&callback=?';
  78                 var resultsDiv = $('#resultsDiv');
  79
  80                 $.getJSON(apiURL,{q:settings.term,rsz:settings.perPage,start:settings.page*settings.perPage},function(r){
  81
  82                         var results = r.responseData.results;
  83                         $('#more').remove();
  84
  85                         if(results.length){
  86
  87                                 // If results were returned, add them to a pageContainer div,
  88                                 // after which append them to the #resultsDiv:
  89
  90                                 var pageContainer = $('<div>',{className:'pageContainer'});
  91
  92                                 for(var i=0;i<results.length;i++){
  93                                         // Creating a new result object and firing its toString method:
  94                                         pageContainer.append(new result(results[i]) + '');
  95                                 }
  96
  97                                 if(!settings.append){
  98                                         // This is executed when running a new search,
  99                                         // instead of clicking on the More button:
 100                                         resultsDiv.empty();
 101                                 }
 102
 103                                 pageContainer.append('<div class="clear"></div>')
 104                                                          .hide().appendTo(resultsDiv)
 105                                                          .fadeIn('slow');
 106
 107                                 var cursor = r.responseData.cursor;
 108
 109                                 // Checking if there are more pages with results,
 110                                 // and deciding whether to show the More button:
 111
 112                                 if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
 113                                         $('<div>',{id:'more'}).appendTo(resultsDiv).click(function(){
 114                                                 googleSearch({append:true,page:settings.page+1});
 115                                                 $(this).fadeOut();
 116                                         });
 117                                 }
 118                         }
 119                         else {
 120
 121                                 // No results were found for this search.
 122
 123                                 resultsDiv.empty();
 124                                 $('<p>',{className:'notFound',html:'Aucun résultat'}).hide().appendTo(resultsDiv).fadeIn();
 125                         }
 126                 });
 127         }
 128
 129         function result(r){
 130
 131                 // This is class definition. Object of this class are created for
 132                 // each result. The markup is generated by the .toString() method.
 133
 134                 var arr = [];
 135
 136                 // GsearchResultClass is passed by the google API
 137                 switch(r.GsearchResultClass){
 138
 139                         case 'GwebSearch':
 140                                 arr = [
 141                                         '<div class="webResult">',
 142                                         '<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
 143                                         '<p>',r.content,'</p>',
 144                                         '<a href="',r.unescapedUrl,'" target="_blank">',r.visibleUrl,'</a>',
 145                                         '</div>'
 146                                 ];
 147                         break;
 148                         case 'GimageSearch':
 149                                 arr = [
 150                                         '<div class="imageResult">',
 151                                         '<a target="_blank" href="',r.unescapedUrl,'" title="',r.titleNoFormatting,'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
 152                                         '<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',r.tbHeight,'" /></a>',
 153                                         '<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.visibleUrl,'</a>',
 154                                         '</div>'
 155                                 ];
 156                         break;
 157                         case 'GvideoSearch':
 158                                 arr = [
 159                                         '<div class="imageResult">',
 160                                         '<a target="_blank" href="',r.url,'" title="',r.titleNoFormatting,'" class="pic" style="width:150px;height:auto;">',
 161                                         '<img src="',r.tbUrl,'" width="100%" /></a>',
 162                                         '<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.publisher,'</a>',
 163                                         '</div>'
 164                                 ];
 165                         break;
 166                         case 'GnewsSearch':
 167                                 arr = [
 168                                         '<div class="webResult">',
 169                                         '<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
 170                                         '<p>',r.content,'</p>',
 171                                         '<a href="',r.unescapedUrl,'" target="_blank">',r.publisher,'</a>',
 172                                         '</div>'
 173                                 ];
 174                         break;
 175                 }
 176
 177                 // The toString method.
 178                 this.toString = function(){
 179                         return arr.join('');
 180                 }
 181         }
 182
 183
 184 });