diff --git a/facets.html b/facets.html
new file mode 100644
index 0000000..4096626
--- /dev/null
+++ b/facets.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Type, hit enter and see facets rendered by jquery.indextank.facetsrenderer.js
+
+
+
+
diff --git a/jquery.indextank.facetsrenderer.js b/jquery.indextank.facetsrenderer.js
index f93b75f..9c74f31 100644
--- a/jquery.indextank.facetsrenderer.js
+++ b/jquery.indextank.facetsrenderer.js
@@ -18,103 +18,121 @@
base.init = function(){
base.options = $.extend({},$.Indextank.FacetsRenderer.defaultOptions, options);
-
base.$el.bind( "Indextank.AjaxSearch.success", function (event, data) {
base.$el.show();
base.$el.html("");
- var stats = base.options.format(data);
- stats.appendTo(base.$el);
+ var queriedFacets = data.query.categoryFilters || {};
+
+ var $selectedFacetsContainer = $("").attr("id", "indextank-selected-facets");
+ var $availableFacetsContainer = $("").attr("id", "indextank-available-facets");
+
+ $.each( data.facets, function (catName, values){
+ if (catName in queriedFacets) {
+ var $selectedFacet = base.renderSelectedFacet(queriedFacets, catName, data);
+ $selectedFacetsContainer.append($selectedFacet);
+ } else {
+ var $availableFacet = base.renderAvailableFacet(queriedFacets, catName, values, data);
+ $availableFacetsContainer.append($availableFacet);
+ }
+ });
+
+ var $facetsContent = $("").append($selectedFacetsContainer, $availableFacetsContainer);
+ var $facetsTitle = $("").text("Filters");
+
+ base.$el.append($facetsTitle, $facetsContent);
+
});
};
-
- // Run initializer
- base.init();
- };
-
- $.Indextank.FacetsRenderer.defaultOptions = {
- format: function (data) {
+ base.renderSelectedFacet = function(queriedFacets, categoryName, data) {
+ // Render selected facet as a and return it
+ $item = $("");
- var queriedFacets = data.query.categoryFilters || {};
-
- var r = $("");
-
-
-
-
- $.each( data.facets, function (catName, values){
- $cat = $("").addClass("facets-container").addClass("ui-widget-content").text(catName);
- $list = $("");
- $cat.append($list);
- r.append($cat);
-
-
- // find out if we should collapse facets, or not
- sorted = []
- $extraFacets = $();
- $.each(values, function( ignored, count) { sorted.push(count);});
-
- if (sorted.length > 4 ) {
- $more = $("").addClass("more");
- $btn = $("").text("more " + catName + " options").button().data("mymore",$more);
-
- $extraFacets = $("");
- $more.append($extraFacets);
-
- $btn.click(function(event) {
- // need to call parents here, as 'button' messes up objects.
- $(event.target).parents().data("mymore").dialog("open");
- } );
-
+ $selectedCategory = $("").append(
+ $("").attr("href","#")
+ .append($("").text(categoryName + " - " + queriedFacets[categoryName]))
+ .click(function(){
+ // ensure query data has something on it
+ var query = data.query.clone();
+ query.withoutCategories([categoryName]);
+ // start over!
+ query.withStart(0);
+ data.searcher.trigger("Indextank.AjaxSearch.runQuery", [query]);
+ })
+ );
+
+ $item.append($selectedCategory);
+
+ return $item;
+ }
- $cat.append($btn);
- $cat.append($more);
- sorted = sorted.sort( function(a,b) { return b-a;});
-
- $more.dialog({autoOpen:false});
+ base.renderAvailableFacet = function(queriedFacets, categoryName, categoryValues, data) {
+ // Render available facet as a (definition list) and return it
+
+ $facetContainer = $("");
+ $availableFacet = $("
");
+ $facetContainer.append($availableFacet);
+ $availableFacet.append($("").text(categoryName));
+
+ // find out if we should collapse facets, or not
+ var sorted = [];
+ var categoriesCount = 0;
+ $.each(categoryValues, function( categoryValue, count) { categoriesCount += 1; sorted.push([categoryValue, count])});
+ sorted.sort(function(a,b){return b[1]-a[1];});
+ $extraValues = $();
+
+ if (categoriesCount > base.options.showableFacets) {
+ $more = $("").addClass("indextank-more-facets").hide();
+ $btn = $("").attr("href", "#").text("more " + categoryName + " options");
+
+ $extraValues = $("
");
+ $more.append($extraValues);
+
+ $btn.click(function(event) {
+ // need to call parents here, as 'button' messes up objects.
+ $(event.target).parents().children(".indextank-more-facets").toggle();
+ } );
+
+ $facetContainer.append($btn);
+ $facetContainer.append($more);
+ }
+
+ // for this category, render all the controls
+ $.each(sorted, function (idx, categoryCount) {
+ var categoryValue = categoryCount[0];
+ var count = categoryCount[1];
+ var dd = $("").append(
+ $("")
+ .attr("href", "#")
+ .text(categoryValue + " (" + count + ")")
+ .click(function(){
+ // ensure query data has something on it
+ var query = data.query.clone();
+ filter = {};
+ filter[categoryName] = categoryValue;
+ query.withCategoryFilters(filter);
+ // start over!
+ query.withStart(0);
+ data.searcher.trigger("Indextank.AjaxSearch.runQuery", [query]);
+ })
+ );
+
+ if (idx < base.options.showableFacets) {
+ $availableFacet.append(dd);
+ } else {
+ $extraValues.append(dd);
}
-
- threshold = sorted.length > 4 ? sorted[4] : 0;
-
- // for this category, render all the controls
- $.each(values, function (catValue, count) {
- var li = $("
").text(catValue + " (" + count + ")");
- if (queriedFacets[catName] == catValue) {
- li.addClass("ui-selected");
- }
-
-
- li.data("Indextank.FacetsRenderer.catValue", catValue);
- li.data("Indextank.FacetsRenderer.catName", catName);
- li.data("Indextank.FacetsRenderer.searcher", data.searcher);
-
- if (count >= threshold ) {
- $list.append(li);
- } else {
- $extraFacets.append(li);
- }
- });
+ });
+ return $facetContainer;
+ }
+ // Run initializer
+ base.init();
+ };
- $("li", $list).add( $("li", $extraFacets)).selectable( {
- stop: function(event, ui) {
-
- // ensure query data has something on it
- var query = data.query.clone();
- filter = {};
- filter[catName] = $(this).data("Indextank.FacetsRenderer.catValue");
- query.withCategoryFilters(filter);
- // start over!
- query.withStart(0);
- data.searcher.trigger("Indextank.AjaxSearch.runQuery", [query]);
-
- }
-
- } );
- });
- return r;
- }
+ $.Indextank.FacetsRenderer.defaultOptions = {
+ showableFacets: 4,
};
$.fn.indextank_FacetsRenderer = function(options){
diff --git a/querybuilder.js b/querybuilder.js
index ad9a2f8..ca224f4 100644
--- a/querybuilder.js
+++ b/querybuilder.js
@@ -82,6 +82,18 @@ Query.prototype.withCategoryFilters = function (categoryFilters) {
return this;
};
+Query.prototype.withoutCategories = function (categories) {
+ if (this.categoryFilters == null) {
+ this.categoryFilters = {};
+ } else {
+ for (idx in categories) {
+ delete this.categoryFilters[categories[idx]];
+ }
+ }
+
+ return this;
+};
+
Query.prototype.withQueryVariables = function (queryVariables) {
if (this.queryVariables == null) {
this.queryVariables = {};