knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#62,facets/view][s]: start refactoring the facet viewer to something nicer.

Browse Source 
* facet listing are bootstrap dropdowns and rename from FacetQueryEditor to FacetViewer to better reflect purpose.
This commit is contained in:
Rufus Pollock
2012-04-01 18:55:07 +01:00
parent add2afa93a
commit ccdc2aed2d
2 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/data-explorer.css
View File

@@ -60,10 +60,14 @@
clear: both; clear: both;
} }
.recline-query-facet-editor { .recline-facet-viewer {
clear: both; clear: both;
} }
.recline-facet-viewer .facet-summary label {
display: inline;
}
/********************************************************** /**********************************************************
* Notifications * Notifications
*********************************************************/ *********************************************************/

25
src/view.js
View File

@@ -168,7 +168,7 @@ my.DataExplorer = Backbone.View.extend({
model: this.model.queryState model: this.model.queryState
}); });
this.el.find('.header').append(queryEditor.el); this.el.find('.header').append(queryEditor.el);
var queryFacetEditor = new my.FacetQueryEditor({ var queryFacetEditor = new my.FacetViewer({
model: this.model model: this.model
}); });
this.el.find('.header').append(queryFacetEditor.el); this.el.find('.header').append(queryFacetEditor.el);
@@ -279,9 +279,10 @@ my.QueryEditor = Backbone.View.extend({
} }
}); });
my.FacetQueryEditor = Backbone.View.extend({ my.FacetViewer = Backbone.View.extend({
className: 'recline-query-facet-editor', className: 'recline-facet-viewer well',
template: ' \ template: ' \
<a class="close" href="#"><i class="icon-chevron-up"></i></a> \
<div class="dropdown js-add-facet"> \ <div class="dropdown js-add-facet"> \
<a class="btn dropdown-toggle" data-toggle="dropdown" href=".js-add-facet">Add Facet On <i class="caret"></i></a> \ <a class="btn dropdown-toggle" data-toggle="dropdown" href=".js-add-facet">Add Facet On <i class="caret"></i></a> \
<ul class="dropdown-menu"> \ <ul class="dropdown-menu"> \
@@ -290,21 +291,22 @@ my.FacetQueryEditor = Backbone.View.extend({
{{/fields}} \ {{/fields}} \
</ul> \ </ul> \
</div> \ </div> \
<div class="facets"> \ <div class="facets row"> \
{{#facets}} \ {{#facets}} \
<a class="btn js-facet-show-toggle" data-facet="{{id}}"><i class="icon-plus"></i> {{id}} {{label}}</a> \ <div class="facet-summary span2 dropdown" data-facet="{{id}}"> \
<ul class="facet-items" data-facet="{{id}}" style="display: none;"> \ <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \
<ul class="facet-items dropdown-menu"> \
{{#terms}} \ {{#terms}} \
<li>{{term}} ({{count}}) <input type="checkbox" class="facet-choice" data-facet="{{label}}" value="{{term}}" /></li> \ <li><input type="checkbox" class="facet-choice" value="{{term}}" name="{{term}}" /> <label for="{{term}}">{{term}} ({{count}})</label></li> \
{{/terms}} \ {{/terms}} \
</ul> \ </ul> \
</div> \
{{/facets}} \ {{/facets}} \
</div> \ </div> \
', ',
events: { events: {
'click .js-add-facet .dropdown-menu a': 'onAddFacet', 'click .js-add-facet .dropdown-menu a': 'onAddFacet',
'click .js-facet-show-toggle': 'onFacetShowToggle'
}, },
initialize: function(model) { initialize: function(model) {
_.bindAll(this, 'render'); _.bindAll(this, 'render');
@@ -325,13 +327,6 @@ my.FacetQueryEditor = Backbone.View.extend({
e.preventDefault(); e.preventDefault();
var fieldId = $(e.target).attr('href').slice(1); var fieldId = $(e.target).attr('href').slice(1);
this.model.queryState.addFacet(fieldId); this.model.queryState.addFacet(fieldId);
},
onFacetShowToggle: function(e) {
e.preventDefault();
var $a = $(e.target);
var facetId = $a.attr('data-facet');
var $ul = this.el.find('.facet-items[data-facet="' + facetId + '"]');
$ul.toggle();
} }
}); });