260 lines
9.7 KiB
HTML
260 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<title>widget.facetviewer.js</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
|
<link rel="stylesheet" media="all" href="docco.css" />
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="background"></div>
|
|
|
|
<ul id="jump_to">
|
|
<li>
|
|
<a class="large" href="javascript:void(0);">Jump To …</a>
|
|
<a class="small" href="javascript:void(0);">+</a>
|
|
<div id="jump_wrapper">
|
|
<div id="jump_page_wrapper">
|
|
<div id="jump_page">
|
|
|
|
|
|
<a class="source" href="backend.dataproxy.html">
|
|
backend.dataproxy.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="backend.memory.html">
|
|
backend.memory.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="ecma-fixes.html">
|
|
ecma-fixes.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="model.html">
|
|
model.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="view.flot.html">
|
|
view.flot.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="view.graph.html">
|
|
view.graph.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="view.grid.html">
|
|
view.grid.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="view.map.html">
|
|
view.map.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="view.multiview.html">
|
|
view.multiview.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="view.slickgrid.html">
|
|
view.slickgrid.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="view.timeline.html">
|
|
view.timeline.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="widget.facetviewer.html">
|
|
widget.facetviewer.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="widget.fields.html">
|
|
widget.fields.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="widget.filtereditor.html">
|
|
widget.filtereditor.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="widget.pager.html">
|
|
widget.pager.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="widget.queryeditor.html">
|
|
widget.queryeditor.js
|
|
</a>
|
|
|
|
|
|
<a class="source" href="widget.valuefilter.html">
|
|
widget.valuefilter.js
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="sections">
|
|
|
|
<li id="title">
|
|
<div class="annotation">
|
|
<h1>widget.facetviewer.js</h1>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
|
|
<li id="section-1">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-1">¶</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
|
|
|
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
|
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
|
|
|
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
|
<span class="hljs-pi"> "use strict"</span>;</pre></div></div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-2">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-2">¶</a>
|
|
</div>
|
|
<h2 id="facetviewer">FacetViewer</h2>
|
|
<p>Widget for displaying facets </p>
|
|
<p>Usage:</p>
|
|
<pre><code> <span class="hljs-keyword">var</span> viewer = <span class="hljs-keyword">new</span> FacetViewer({
|
|
model: dataset
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="content"><div class='highlight'><pre>my.FacetViewer = Backbone.View.extend({
|
|
className: <span class="hljs-string">'recline-facet-viewer'</span>,
|
|
template: <span class="hljs-string">' \
|
|
<div class="facets"> \
|
|
{{#facets}} \
|
|
<div class="facet-summary" data-facet="{{id}}"> \
|
|
<h3> \
|
|
{{id}} \
|
|
</h3> \
|
|
<ul class="facet-items"> \
|
|
{{#terms}} \
|
|
<li><a class="facet-choice js-facet-filter" data-value="{{term}}" href="#{{term}}">{{term}} ({{count}})</a></li> \
|
|
{{/terms}} \
|
|
{{#entries}} \
|
|
<li><a class="facet-choice js-facet-filter" data-value="{{time}}">{{term}} ({{count}})</a></li> \
|
|
{{/entries}} \
|
|
</ul> \
|
|
</div> \
|
|
{{/facets}} \
|
|
</div> \
|
|
'</span>,
|
|
|
|
events: {
|
|
<span class="hljs-string">'click .js-facet-filter'</span>: <span class="hljs-string">'onFacetFilter'</span>
|
|
},
|
|
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(model)</span> </span>{
|
|
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
|
|
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.facets, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
|
|
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
|
|
<span class="hljs-keyword">this</span>.render();
|
|
},
|
|
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
|
<span class="hljs-keyword">var</span> tmplData = {
|
|
fields: <span class="hljs-keyword">this</span>.model.fields.toJSON()
|
|
};
|
|
tmplData.facets = _.map(<span class="hljs-keyword">this</span>.model.facets.toJSON(), <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(facet)</span> </span>{
|
|
<span class="hljs-keyword">if</span> (facet._type === <span class="hljs-string">'date_histogram'</span>) {
|
|
facet.entries = _.map(facet.entries, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(entry)</span> </span>{
|
|
entry.term = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(entry.time).toDateString();
|
|
<span class="hljs-keyword">return</span> entry;
|
|
});
|
|
}
|
|
<span class="hljs-keyword">return</span> facet;
|
|
});
|
|
<span class="hljs-keyword">var</span> templated = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
|
<span class="hljs-keyword">this</span>.$el.html(templated);</pre></div></div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-3">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-3">¶</a>
|
|
</div>
|
|
<p>are there actually any facets to show?</p>
|
|
|
|
</div>
|
|
|
|
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.model.facets.length > <span class="hljs-number">0</span>) {
|
|
<span class="hljs-keyword">this</span>.$el.show();
|
|
} <span class="hljs-keyword">else</span> {
|
|
<span class="hljs-keyword">this</span>.$el.hide();
|
|
}
|
|
},
|
|
onHide: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
|
e.preventDefault();
|
|
<span class="hljs-keyword">this</span>.$el.hide();
|
|
},
|
|
onFacetFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
|
e.preventDefault();
|
|
<span class="hljs-keyword">var</span> $target= $(e.target);
|
|
<span class="hljs-keyword">var</span> fieldId = $target.closest(<span class="hljs-string">'.facet-summary'</span>).attr(<span class="hljs-string">'data-facet'</span>);
|
|
<span class="hljs-keyword">var</span> value = $target.attr(<span class="hljs-string">'data-value'</span>);
|
|
<span class="hljs-keyword">this</span>.model.queryState.addFilter({type: <span class="hljs-string">'term'</span>, field: fieldId, term: value});</pre></div></div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-4">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-4">¶</a>
|
|
</div>
|
|
<p>have to trigger explicitly for some reason</p>
|
|
|
|
</div>
|
|
|
|
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.model.query();
|
|
}
|
|
});
|
|
|
|
|
|
})(jQuery, recline.View);</pre></div></div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|