Skip to content
eikes edited this page Sep 21, 2011 · 3 revisions

Here are some code snippets which I have used multiple times, but haven't integrated into a branch.

This code allows "infinite scroll on demand" (ISOD) functionality:

function addInfiniteScroll() {
  var isInfinite = false,
    $loadmore = $('#loadmore'),
    $window = $(window),
    $document = $(document);
  $loadmore.click(function(){
    isInfinite = true;
  });
  $window.scroll(function () {
    if (isInfinite && ($document.height() - ($window.scrollTop() + $window.height()) < 500)) {
      $loadmore.trigger("click");
    }
  });
}

To create simple dropdown select boxes which can be used on mobile devices use this snippet. Show or hide them via mediaqueries:

//Use like this:
//$(settings.facetSelector).bind("facetuicreated", function(){
//  createMobileSelects(['#language', '#continent']);
//});
function createMobileSelects(facets) {
  var mobilSelects = $('<div class="mobileselects">');
  _.each(facets, function(item) {
    console.log($(item + ' .facettitle'));
    mobilSelects.append($.convertFacetToSelect.call($(item), {
      firstOption : '<option>' + $(item + ' .facettitle').text() + '</option>'
  }))});
  $('#facets .bottomline').after(mobilSelects);
  // Reset elements on "deselect"
  $('.deselectstartover').click(function() {
    $(".mobileselects select option:nth-child(1)").attr("selected", true);
  });
}

In the state of the faceted search can be persisted in the URL by using the jQuery BBQ plugin. Here is how:

var params = jQuery.deparam.fragment(true);
var settings = {}; // YOUR settings...
settings.state = { 
  orderBy : (params.orderBy ? params.orderBy : 'RANDOM'),
  filters: (params.filters ? params.filters : {}) 
};
$.facetelize(settings); // Create the faceted search 
keepFacetStateInURL(settings);

// create bookmarkable URLs and backbutton stuff:
function keepFacetStateInURL(settings) {

  var state = $(settings.facetSelector).data("settings").state;
  // Bind to the event which is clicked when a "order by" is clicked:
  $(settings.facetSelector).bind("facetedsearchorderby", function(event, orderby) {
    $.bbq.pushState(state, 2);
  });

  // Bind to the event which is triggered when a filter is clicked:
  $(settings.facetSelector).bind("facetedsearchfacetclick", function(event, filter) {
    $.bbq.pushState(state, 2);
  });

  // Bind to the event which is triggered when all filters are removed:
  $('.deselectstartover').click(function() {
    $.bbq.pushState(state, 2);
  });

  // When the back button is used, apply the filter that was previously used:
  $(window).bind('hashchange', function(event) {
    var params = event.getState(true);
    if (params && !_.isEqual(params, settings.state)) {
      params.filters = params.filters || {};
      params.orderBy = params.orderBy || {};
      settings.state = params;
      jQuery.facetUpdate();
    }
  });
}
Clone this wiki locally