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
Show Stats 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;
}
.recline-query-facet-editor {
.recline-facet-viewer {
clear: both;
}
.recline-facet-viewer .facet-summary label {
display: inline;
}
/**********************************************************
* Notifications
*********************************************************/

25
src/view.js
View File

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