materio-base-d7/js/materio_search_api_ajax.js

// @codekit-prepend "gui.js"

(function($) {

MaterioSearchApiAjax = function(){
  var _isloadingresults = false;
  var _$content = $('#content');
      // TODO:  define $content by module settings  
  /**
  * init()
  */
  function init(){
    trace('init MaterioSearchApiAjax');

    initSearchAjax();
    initViewMode();

  };

  /**
  * searchAjax
  */
  function initSearchAjax(){
    // trace('initSearchAjax');

    $('#materio-search-api-search-form').bind('submit', function(event) {
      // trace('search submited', event);
      var $this = $(this);
      setTimeout(function(){
        loadResults(getSearchKeys());
      },10);
      return false;
    });

    // /!\ AUTOCOMPLETE SELECT EVENT need a patch http://drupal.org/node/365241#comment-5374686
    $("#edit-searchfield").bind('autocompleteSelect', function(event) {
      $(this).parents('.form').trigger('submit');
    });

    $(document)
      .bind('init-scroller-pager', onInitScrollerPager)
      .bind('load-scroller-pager', onLoadScrollerPager)
      .bind('view-mode-changed', onViewModeChanged)
      .bind('history-state-change', onHistoryStateChange);
    
    // trigger updated event for direct html loading
    if( isActuality() || isExplore() ){
      setTimeout(function(){
        var event = jQuery.Event('resultschanged');
        
        if(isExplore())
          event.container = '#content .search-results';
  
        if(isActuality())
          event.container = '#content .actuality-items';  

        trace('MaterioSearchApiAjax :: initSearchAjax :: triggering resultschanged')
        $.event.trigger(event);  
      }, 10);
    }
  };
  
  function getSearchKeys(){
    return $('#materio-search-api-search-form').find('input[name*="searchfield"]').val();
  };

  function loadResults(keys){
    // trace('keys', keys);
    if(keys !== undefined){
      keys = keys.replace('/', ' ');

      var types = {}, stringTypes = [];
      $('#edit-bundles-filter', '#materio-search-api-search-form').find('input[type*="checkbox"]').each(function(i){
        $this = $(this);
        if ( $this.attr('checked') )
          stringTypes.push($this.val());
        types[$this.val()] = $this.attr('checked');
      });
      trace('types', types);


      if(!_isloadingresults){
        $.event.trigger('loading-content');
        _isloadingresults = true;
        $('#materio-search-api-search-form').addClass('loading');

        // google analytics
        var estat = jQuery.Event('record-stat');
        estat.path = false;
        estat.categorie = 'Search event';
        estat.action = 'Search';
        estat.label = 'keys :'+ keys +' | filters : '+ stringTypes.join(' ,');
        $.event.trigger(estat);

        // TODO:  record ajax path in a variable from materio_search_api_ajax_init
        $.getJSON(Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/search/'+keys, 
          {'types':types},
          function(json){
            trace('json', json);
            $.event.trigger('loaded-content');      
            _isloadingresults = false;
            $('#materio-search-api-search-form').removeClass('loading');

            changeContent(json);
        });
      }
    }
  };

  function loadActuality(){
    if(!_isloadingresults){
      $.event.trigger('loading-content');
      _isloadingresults = true;
      $('#materio-search-api-search-form').addClass('loading');

      var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/actuality';
      $.getJSON(url, 
        function(json){
          trace('json', json);
          $.event.trigger('resultsloaded');      
          _isloadingresults = false;
          $('#materio-search-api-search-form').removeClass('loading');
          changeContent(json);
      });
    }
  };

  function changeContent(json){
    trace('MaterioSearchApiAjax changeContent | json', json);

    if(json.return){
      $.event.trigger('loaded-content');
      $('.inner-content',_$content).html(json.return);
      triggerContentChanged();
    }else{
      trace('no results');
    }

    var event = jQuery.Event('new-history-page');
    event.path = Drupal.settings.basePath + Drupal.settings.pathPrefix + json.search_path + '/' + json.keys;
    event.title = json.title;
    event.content = json.return;
    $.event.trigger(event);
    
    for (language in Drupal.settings.materio_search_api_ajax.languages) {
      var l = Drupal.settings.materio_search_api_ajax.languages[language];
      $('#block-locale-language li.'+language+' a').attr('href', Drupal.settings.basePath + l.prefix+'/' + json.search_path + '/' + json.keys)        
    };
  };

  function triggerContentChanged(){
    trace('MaterioSearchApiAjax :: triggerContentChanged');
    var event = jQuery.Event('resultschanged');
    event.container = '#content .search-results, #content .actuality-items';
    // event.title = json.title;
    $.event.trigger(event);
  };

  function onInitScrollerPager(event){
    if(isActuality() || isExplore())
      event.pager.hide();
  };

  function onLoadScrollerPager(event){
    if (isExplore())
      loadNextResultsPage(event.href);

    if(isActuality())
      loadNextActualityPage(event.href);
  };

  function loadNextResultsPage(href){
    // trace('loadNextResultsPage');
    if(!_isloadingresults){
      var keys = href.match(/explore\/([^\/|\?]+)/);
      var page = href.match(/\?page=([0-9]+)/);
      var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/search/'+keys[1]+'/'+page[1];
      
      loadNextPage(url, $('.materiobase-results', _$content), '.search-results');
    }
  };

  function loadNextActualityPage(href){
    // trace('loadNextActualityPage');
    if(!_isloadingresults){
      var page = href.match(/\?page=([0-9]+)/);
      var url = Drupal.settings.basePath+Drupal.settings.pathPrefix+'materio_search_api_ajax/actuality/'+page[1];

      loadNextPage(url, $('.materiobase-actuality', _$content), '.actuality-items');
    }
  };

  function loadNextPage(url, $container, target){
    trace('loadNextPage');
    _isloadingresults = true;
    $container.addClass('loading');
    $.getJSON(url, function(json){
      trace('json', json);
      _isloadingresults = false;
      $container.removeClass('loading');
      addNextpage(json, target);
    });
  };

  function addNextpage(json, container_class){
    var $newcontent = $(json.return),
        $newitems = $(container_class, $newcontent).children('article').addClass('just-added'),
        $newpager = $('ul.pager', $newcontent);
    
    $(container_class, _$content).append($newitems);
    $('ul.pager', _$content).replaceWith($newpager.hide());

    // TODO: animation, this should be on theme side
    $(container_class, _$content).children('.just-added').each(function(i){
      // $(this).delay(5000*i).removeClass('just-added');
      var $this = $(this);
      setTimeout(function(){
        $this.removeClass('just-added');
      }, 150*i);
    });

    var event = jQuery.Event('resultscompleted');
    event.container = $(container_class, _$content);
    $.event.trigger(event);
  };

  /**
  * viewmode
  */
  function initViewMode(){
    $('.viewmode-link').click(function(event){
      event.preventDefault();
      changeViewMode($(this).attr('rel'), $(this));
      return false;
    });
  };

  function changeViewMode(vm, $btn){
    $.getJSON(Drupal.settings.basePath+'materio_search_api_ajax/viewmode/change/'+vm, function(json){
      trace('viewmode json', json);
      if (json.statut == "saved"){
        
        // google analytics
        var estat = jQuery.Event('record-stat');
        estat.path = false;
        estat.categorie = 'Viewmode';
        estat.action = vm;
        if(isExplore())
          estat.label = 'Search results';  

        if(isActuality())
          estat.label = 'Actualities';  
        
        $.event.trigger(estat);

        $.event.trigger('view-mode-changed');
        $('.viewmode-link, .viewmode-link i').removeClass('active');
        $btn.addClass('active').find('i').addClass('active');
      }
        
    });
  };

  function onViewModeChanged(event){
    if (isExplore())
      loadResults(getSearchKeys());

    if(isActuality())
      loadActuality();
  };

  /**
  * history
  */
  function onHistoryStateChange(event){
    if(isExplore() || isActuality())
      triggerContentChanged();
    // TODO:  pushstate trogger state change, so we have a retriggerring here on loading new results … how to avoid this  
  };

  /**
  * helpers
  */
  function isExplore(){
     return $('.search-results', '#content').length;
  };

  function isActuality(){
    return $('.actuality-items', '#content').length;
  };
    


  init();


};

  var materiosearchapiajax = new MaterioSearchApiAjax();
  
})(jQuery);