-
Notifications
You must be signed in to change notification settings - Fork 40
Code Snippets
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();
}
});
}