\
-
\
-
Filters
\
- \
-
\
- ',
- events: {
- 'click .js-hide': 'onHide',
- 'click .js-remove-filter': 'onRemoveFilter',
- 'submit form': 'onTermFiltersUpdate'
- },
- initialize: function() {
- this.el = $(this.el);
- _.bindAll(this, 'render');
- this.model.bind('change', this.render);
- this.model.bind('change:filters:new-blank', this.render);
- this.render();
- },
- render: function() {
- var tmplData = $.extend(true, {}, this.model.toJSON());
- // we will use idx in list as there id ...
- tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
- filter.id = idx;
- return filter;
- });
- tmplData.termFilters = _.filter(tmplData.filters, function(filter) {
- return filter.term !== undefined;
- });
- tmplData.termFilters = _.map(tmplData.termFilters, function(filter) {
- var fieldId = _.keys(filter.term)[0];
- return {
- id: filter.id,
- fieldId: fieldId,
- label: fieldId,
- value: filter.term[fieldId]
- };
- });
- var out = Mustache.render(this.template, tmplData);
- this.el.html(out);
- // are there actually any facets to show?
- if (this.model.get('filters').length > 0) {
- this.el.show();
- } else {
- this.el.hide();
- }
- },
- onHide: function(e) {
- e.preventDefault();
- this.el.hide();
- },
- onRemoveFilter: function(e) {
- e.preventDefault();
- var $target = $(e.target);
- var filterId = $target.closest('.filter').attr('data-filter-id');
- this.model.removeFilter(filterId);
- },
- onTermFiltersUpdate: function(e) {
- var self = this;
- e.preventDefault();
- var filters = self.model.get('filters');
- var $form = $(e.target);
- _.each($form.find('input'), function(input) {
- var $input = $(input);
- var filterIndex = parseInt($input.attr('data-filter-id'));
- var value = $input.val();
- var fieldId = $input.attr('data-filter-field');
- filters[filterIndex].term[fieldId] = value;
- });
- self.model.set({filters: filters});
- self.model.trigger('change');
- }
-});
-
-my.FacetViewer = Backbone.View.extend({
- className: 'recline-facet-viewer well',
- template: ' \
-
× \
-
\
-
\
-
Facets
\
- \
- {{#facets}} \
-
\
- {{/facets}} \
-
\
- ',
-
- events: {
- 'click .js-hide': 'onHide',
- 'click .js-facet-filter': 'onFacetFilter'
- },
- initialize: function(model) {
- _.bindAll(this, 'render');
- this.el = $(this.el);
- this.model.facets.bind('all', this.render);
- this.model.fields.bind('all', this.render);
- this.render();
- },
- render: function() {
- var tmplData = {
- facets: this.model.facets.toJSON(),
- fields: this.model.fields.toJSON()
- };
- tmplData.facets = _.map(tmplData.facets, function(facet) {
- if (facet._type === 'date_histogram') {
- facet.entries = _.map(facet.entries, function(entry) {
- entry.term = new Date(entry.time).toDateString();
- return entry;
- });
- }
- return facet;
- });
- var templated = Mustache.render(this.template, tmplData);
- this.el.html(templated);
- // are there actually any facets to show?
- if (this.model.facets.length > 0) {
- this.el.show();
- } else {
- this.el.hide();
- }
- },
- onHide: function(e) {
- e.preventDefault();
- this.el.hide();
- },
- onFacetFilter: function(e) {
- var $target= $(e.target);
- var fieldId = $target.closest('.facet-summary').attr('data-facet');
- var value = $target.attr('data-value');
- this.model.queryState.addTermFilter(fieldId, value);
- }
-});
-
-
})(jQuery, recline.View);
diff --git a/src/widget.filtereditor.js b/src/widget.filtereditor.js
new file mode 100644
index 00000000..1564e3ab
--- /dev/null
+++ b/src/widget.filtereditor.js
@@ -0,0 +1,109 @@
+/*jshint multistr:true */
+
+this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
+
+(function($, my) {
+
+my.FilterEditor = Backbone.View.extend({
+ className: 'recline-filter-editor well',
+ template: ' \
+
× \
+
\
+
\
+
Filters
\
+ \
+
\
+ ',
+ events: {
+ 'click .js-hide': 'onHide',
+ 'click .js-remove-filter': 'onRemoveFilter',
+ 'submit form': 'onTermFiltersUpdate'
+ },
+ initialize: function() {
+ this.el = $(this.el);
+ _.bindAll(this, 'render');
+ this.model.bind('change', this.render);
+ this.model.bind('change:filters:new-blank', this.render);
+ this.render();
+ },
+ render: function() {
+ var tmplData = $.extend(true, {}, this.model.toJSON());
+ // we will use idx in list as there id ...
+ tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
+ filter.id = idx;
+ return filter;
+ });
+ tmplData.termFilters = _.filter(tmplData.filters, function(filter) {
+ return filter.term !== undefined;
+ });
+ tmplData.termFilters = _.map(tmplData.termFilters, function(filter) {
+ var fieldId = _.keys(filter.term)[0];
+ return {
+ id: filter.id,
+ fieldId: fieldId,
+ label: fieldId,
+ value: filter.term[fieldId]
+ };
+ });
+ var out = Mustache.render(this.template, tmplData);
+ this.el.html(out);
+ // are there actually any facets to show?
+ if (this.model.get('filters').length > 0) {
+ this.el.show();
+ } else {
+ this.el.hide();
+ }
+ },
+ onHide: function(e) {
+ e.preventDefault();
+ this.el.hide();
+ },
+ onRemoveFilter: function(e) {
+ e.preventDefault();
+ var $target = $(e.target);
+ var filterId = $target.closest('.filter').attr('data-filter-id');
+ this.model.removeFilter(filterId);
+ },
+ onTermFiltersUpdate: function(e) {
+ var self = this;
+ e.preventDefault();
+ var filters = self.model.get('filters');
+ var $form = $(e.target);
+ _.each($form.find('input'), function(input) {
+ var $input = $(input);
+ var filterIndex = parseInt($input.attr('data-filter-id'));
+ var value = $input.val();
+ var fieldId = $input.attr('data-filter-field');
+ filters[filterIndex].term[fieldId] = value;
+ });
+ self.model.set({filters: filters});
+ self.model.trigger('change');
+ }
+});
+
+
+})(jQuery, recline.View);
+
diff --git a/test/index.html b/test/index.html
index 6a328121..b38518d8 100644
--- a/test/index.html
+++ b/test/index.html
@@ -48,6 +48,7 @@
+