300 lines
10 KiB
HTML
300 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<title>widget.fields.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.fields.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></pre></div></div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-2">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-2">¶</a>
|
|
</div>
|
|
<p>Field Info</p>
|
|
<p>For each field</p>
|
|
<p>Id / Label / type / format</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-3">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-3">¶</a>
|
|
</div>
|
|
<p>Editor — to change type (and possibly format)
|
|
Editor for show/hide …</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-4">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-4">¶</a>
|
|
</div>
|
|
<p>Summaries of fields</p>
|
|
<p>Top values / number empty
|
|
If number: max, min average …</p>
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-5">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-5">¶</a>
|
|
</div>
|
|
<p>Box to boot transform editor …</p>
|
|
|
|
</div>
|
|
|
|
<div class="content"><div class='highlight'><pre>
|
|
<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>;
|
|
|
|
my.Fields = Backbone.View.extend({
|
|
className: <span class="hljs-string">'recline-fields-view'</span>,
|
|
template: <span class="hljs-string">' \
|
|
<div class="panel-group fields-list well"> \
|
|
<h3>Fields <a href="#" class="js-show-hide">+</a></h3> \
|
|
{{#fields}} \
|
|
<div class="panel panel-default field"> \
|
|
<div class="panel-heading"> \
|
|
<i class="glyphicon glyphicon-file"></i> \
|
|
<h4> \
|
|
{{label}} \
|
|
<small> \
|
|
{{type}} \
|
|
<a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; </a> \
|
|
</small> \
|
|
</h4> \
|
|
</div> \
|
|
<div id="collapse{{id}}" class="panel-collapse collapse"> \
|
|
<div class="panel-body"> \
|
|
{{#facets}} \
|
|
<div class="facet-summary" data-facet="{{id}}"> \
|
|
<ul class="facet-items"> \
|
|
{{#terms}} \
|
|
<li class="facet-item"><span class="term">{{term}}</span> <span class="count">[{{count}}]</span></li> \
|
|
{{/terms}} \
|
|
</ul> \
|
|
</div> \
|
|
{{/facets}} \
|
|
<div class="clear"></div> \
|
|
</div> \
|
|
</div> \
|
|
</div> \
|
|
{{/fields}} \
|
|
</div> \
|
|
'</span>,
|
|
|
|
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(model)</span> </span>{
|
|
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
|
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);</pre></div></div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-6">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-6">¶</a>
|
|
</div>
|
|
<p>TODO: this is quite restrictive in terms of when it is re-run
|
|
e.g. a change in type will not trigger a re-run atm.
|
|
being more liberal (e.g. binding to all) can lead to being called a lot (e.g. for change:width)</p>
|
|
|
|
</div>
|
|
|
|
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'reset'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(action)</span> </span>{
|
|
self.model.fields.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
|
field.facets.unbind(<span class="hljs-string">'all'</span>, self.render);
|
|
field.facets.bind(<span class="hljs-string">'all'</span>, self.render);
|
|
});</pre></div></div>
|
|
|
|
</li>
|
|
|
|
|
|
<li id="section-7">
|
|
<div class="annotation">
|
|
|
|
<div class="pilwrap ">
|
|
<a class="pilcrow" href="#section-7">¶</a>
|
|
</div>
|
|
<p>fields can get reset or changed in which case we need to recalculate</p>
|
|
|
|
</div>
|
|
|
|
<div class="content"><div class='highlight'><pre> self.model.getFieldsSummary();
|
|
self.render();
|
|
});
|
|
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'.collapse'</span>).collapse();
|
|
<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> self = <span class="hljs-keyword">this</span>;
|
|
<span class="hljs-keyword">var</span> tmplData = {
|
|
fields: []
|
|
};
|
|
<span class="hljs-keyword">this</span>.model.fields.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
|
<span class="hljs-keyword">var</span> out = field.toJSON();
|
|
out.facets = field.facets.toJSON();
|
|
tmplData.fields.push(out);
|
|
});
|
|
<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);
|
|
}
|
|
});
|
|
|
|
})(jQuery, recline.View);</pre></div></div>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|