Merge branch 'master' into gh-pages
This commit is contained in:
Rufus Pollock
commit
e75c989a6f
@ -1,17 +1,24 @@
|
||||
.data-explorer .header .navigation,
|
||||
.data-explorer .header .navigation li,
|
||||
.data-explorer .header .pagination,
|
||||
.data-explorer .header .pagination form
|
||||
.recline-data-explorer .header .navigation,
|
||||
.recline-data-explorer .header .navigation li,
|
||||
.recline-data-explorer .header .pagination,
|
||||
.recline-data-explorer .header .pagination form
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.data-explorer .header .navigation {
|
||||
.recline-data-explorer .header .navigation {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.recline-data-explorer .header .menu-right {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
padding-left: 5px;
|
||||
border-left: solid 2px #ddd;
|
||||
}
|
||||
|
||||
.header .recline-results-info {
|
||||
line-height: 28px;
|
||||
margin-left: 20px;
|
||||
@ -40,13 +47,14 @@
|
||||
|
||||
.header .recline-query-editor .pagination a {
|
||||
line-height: 26px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.header .recline-query-editor form button {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.data-view-container {
|
||||
.recline-data-explorer .data-view-container {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
@ -63,7 +71,7 @@
|
||||
* Notifications
|
||||
*********************************************************/
|
||||
|
||||
.notification-loader {
|
||||
.recline-data-explorer .notification-loader {
|
||||
width: 18px;
|
||||
margin-left: 5px;
|
||||
background: url(images/small-spinner.gif) no-repeat;
|
||||
@ -75,33 +83,33 @@
|
||||
* Data Table
|
||||
*********************************************************/
|
||||
|
||||
.data-table .btn-group .dropdown-toggle {
|
||||
.recline-grid .btn-group .dropdown-toggle {
|
||||
padding: 1px 3px;
|
||||
line-height: auto;
|
||||
}
|
||||
|
||||
.data-table-container {
|
||||
.recline-grid-container {
|
||||
overflow: auto;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
.recline-grid {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-table td, .data-table th {
|
||||
.recline-grid td, .recline-grid th {
|
||||
border-left: 1px solid #ccc;
|
||||
padding: 3px 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data-table tr td:first-child, .data-table tr th:first-child {
|
||||
.recline-grid tr td:first-child, .recline-grid tr th:first-child {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* direct borrowing from twitter buttons */
|
||||
.data-table th,
|
||||
.recline-grid th,
|
||||
.transform-column-view .expression-preview-table-wrapper th
|
||||
{
|
||||
background-color: #e6e6e6;
|
||||
@ -140,27 +148,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-header-recon-stats-bar {
|
||||
margin-top: 10px;
|
||||
height: 4px;
|
||||
background: #ddd;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.column-header-recon-stats-matched {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #282;
|
||||
}
|
||||
|
||||
.column-header-recon-stats-blanks {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #3d3;
|
||||
}
|
||||
|
||||
div.data-table-cell-content {
|
||||
line-height: 1.2;
|
||||
color: #222;
|
||||
@ -188,7 +175,7 @@ a.data-table-cell-edit:hover {
|
||||
background-position: -25px 0px;
|
||||
}
|
||||
|
||||
.data-table td:hover .data-table-cell-edit {
|
||||
.recline-grid td:hover .data-table-cell-edit {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -205,21 +192,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* TODO: not sure the rest of this is needed */
|
||||
.data-table-cell-editor, .data-table-topic-popup {
|
||||
overflow: auto;
|
||||
border: 1px solid #bcf;
|
||||
background: #e3e9ff;
|
||||
padding: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.data-table-topic-popup-header {
|
||||
padding: 0 0 5px;
|
||||
}
|
||||
|
||||
.data-table-cell-editor-editor {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
@ -249,28 +221,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
ul.sorting-dialog-blank-error-positions {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
height: 10em;
|
||||
border: 1px solid #ccc;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
ul.sorting-dialog-blank-error-positions > li {
|
||||
display: block;
|
||||
border: 1px solid #ccc;
|
||||
background: #eee;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
cursor: move;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Dialogs
|
||||
@ -432,8 +382,8 @@ td.expression-preview-value {
|
||||
* Read-only mode
|
||||
*********************************************************/
|
||||
|
||||
.read-only .no-hidden .data-table tr td:first-child,
|
||||
.read-only .no-hidden .data-table tr th:first-child
|
||||
.read-only .no-hidden .recline-grid tr td:first-child,
|
||||
.read-only .no-hidden .recline-grid tr th:first-child
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -94,36 +94,79 @@ also returned.</p> </td> <td class="code">
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h2><a id="document">A Document (aka Row)</a></h2>
|
||||
|
||||
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</span><span class="p">,</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'getFieldValue'</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h3>getFieldValue</h3>
|
||||
|
||||
<p>For the provided Field get the corresponding rendered computed data value
|
||||
for this document.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getFieldValue</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">val</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">renderer</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">val</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">renderer</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'DocumentList'</span><span class="p">,</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h2><a id="field">A Field (aka Column) on a Dataset</a></h2>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2><a id="field">A Field (aka Column) on a Dataset</a></h2>
|
||||
|
||||
<p>Following attributes as standard:</p>
|
||||
<p>Following (Backbone) attributes as standard:</p>
|
||||
|
||||
<ul>
|
||||
<li>id: a unique identifer for this field- usually this should match the key in the documents hash</li>
|
||||
<li>label: the visible label used for this field</li>
|
||||
<li>type: the type of the data</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<li>label: (optional: defaults to id) the visible label used for this field</li>
|
||||
<li>type: (optional: defaults to string) the type of the data in this field. Should be a string as per type names defined by ElasticSearch - see Types list on <a href="http://www.elasticsearch.org/guide/reference/mapping/">http://www.elasticsearch.org/guide/reference/mapping/</a></li>
|
||||
<li>format: (optional) used to indicate how the data should be formatted. For example:
|
||||
<ul><li>type=date, format=yyyy-mm-dd</li>
|
||||
<li>type=float, format=percentage</li>
|
||||
<li>type=float, format='###,###.##'</li></ul></li>
|
||||
<li>is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).</li>
|
||||
</ul>
|
||||
|
||||
<p>Following additional instance properties:</p>
|
||||
|
||||
<p>@property {Function} renderer: a function to render the data for this field.
|
||||
Signature: function(value, field, doc) where value is the value of this
|
||||
cell, field is corresponding field object and document is the document
|
||||
object. Note that implementing functions can ignore arguments (e.g.
|
||||
function(value) would be a valid formatter function).</p>
|
||||
|
||||
<p>@property {Function} deriver: a function to derive/compute the value of data
|
||||
in this field as a function of this field's value (if any) and the current
|
||||
document, its signature and behaviour is the same as for renderer. Use of
|
||||
this function allows you to define an entirely new value for data in this
|
||||
field. This provides support for a) 'derived/computed' fields: i.e. fields
|
||||
whose data are functions of the data in other fields b) transforming the
|
||||
value of this field prior to rendering.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h3>defaults - define default values</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="s1">'String'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>if a hash not passed in the first argument throw error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">'0'</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span>
|
||||
<span class="nx">format</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">is_derived</span><span class="o">:</span> <span class="kc">false</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h3>initialize</h3>
|
||||
|
||||
<p>@param {Object} data: standard Backbone model attributes</p>
|
||||
|
||||
<p>@param {Object} options: renderer and/or deriver functions.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>if a hash not passed in the first argument throw error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">'0'</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'Looks like you did not pass a proper hash with id to Field constructor'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">label</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">label</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">renderer</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">deriver</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">deriver</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Field</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h2><a id="query">Query</a></h2>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h2><a id="query">Query</a></h2>
|
||||
|
||||
<p>Query instances encapsulate a query to the backend (see <a
|
||||
href="backend/base.html">query method on backend</a>). Useful both
|
||||
@ -179,10 +222,10 @@ execution.</p></li>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span>
|
||||
<span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="mi">0</span>
|
||||
<span class="p">,</span> <span class="nx">facets</span><span class="o">:</span> <span class="p">{}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p><a href="http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html</a>
|
||||
, filter: {}</p> </td> <td class="code"> <div class="highlight"><pre> </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>list of simple filters which will be add to 'add' filter of filter</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">,</span> <span class="nx">filters</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">,</span> <span class="nx">facets</span><span class="o">:</span> <span class="p">{}</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p><a href="http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html</a>
|
||||
, filter: {}</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">,</span> <span class="nx">filters</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h4>addTermFilter</h4>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <h4>addTermFilter</h4>
|
||||
|
||||
<p>Set (update or add) a terms filter to filters</p>
|
||||
|
||||
@ -191,13 +234,23 @@ execution.</p></li>
|
||||
<span class="kd">var</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">term</span><span class="o">:</span> <span class="p">{}</span> <span class="p">};</span>
|
||||
<span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
|
||||
<span class="nx">filters</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>change does not seem to be triggered ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <h3>addFacet</h3>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>change does not seem to be triggered automatically</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>adding a new blank filter and do not want to trigger a new query</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change:filters:new-blank'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <h3>removeFilter</h3>
|
||||
|
||||
<p>Remove a filter from filters at index filterIndex</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filterIndex</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">);</span>
|
||||
<span class="nx">filters</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">filterIndex</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <h3>addFacet</h3>
|
||||
|
||||
<p>Add a Facet to this query</p>
|
||||
|
||||
<p>See <a href="http://www.elasticsearch.org/guide/reference/api/search/facets/">http://www.elasticsearch.org/guide/reference/api/search/facets/</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addFacet</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'facets'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Assume id and fieldId should be the same (TODO: this need not be true if we want to add two different type of facets on same field)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">facets</span><span class="p">),</span> <span class="nx">fieldId</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'facets'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>Assume id and fieldId should be the same (TODO: this need not be true if we want to add two different type of facets on same field)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">facets</span><span class="p">),</span> <span class="nx">fieldId</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">return</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">facets</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
|
||||
@ -206,7 +259,7 @@ execution.</p></li>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">facets</span><span class="o">:</span> <span class="nx">facets</span><span class="p">},</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'facet:add'</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <h2><a id="facet">A Facet (Result)</a></h2>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <h2><a id="facet">A Facet (Result)</a></h2>
|
||||
|
||||
<p>Object to store Facet information, that is summary information (e.g. values
|
||||
and counts) about a field obtained by some faceting method on the
|
||||
@ -253,9 +306,9 @@ key used to specify this facet in the facet query):</p>
|
||||
<span class="nx">terms</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <h2>A Collection/List of Facets</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <h2>A Collection/List of Facets</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Facet</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <h2>Backend registry</h2>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <h2>Backend registry</h2>
|
||||
|
||||
<p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view-flot-graph.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-flot-graph.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html> <html> <head> <title>view-flot-graph.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-flot-graph.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>Graph view for a Dataset using Flot graphing library.</h2>
|
||||
|
||||
@ -1,21 +1,17 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view-grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html> <html> <head> <title>view-grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>DataGrid</h2>
|
||||
|
||||
<p>Provides a tabular view on a Dataset.</p>
|
||||
|
||||
<p>Initialize it with a recline.Dataset object.</p>
|
||||
|
||||
<p>Additional options passed in second arguments. Options:</p>
|
||||
|
||||
<ul>
|
||||
<li>cellRenderer: function used to render individual cells. See DataGridRow for more.</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGrid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGrid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"data-table-container"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"recline-grid-container"</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">modelEtc</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">modelEtc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
@ -24,7 +20,6 @@
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -67,6 +62,9 @@ Column and row menus</p> </td> <td class="code">
|
||||
<span class="nx">facet</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFacet</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">filter</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">'transform'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">sortAsc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'asc'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">sortDesc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'desc'</span><span class="p">)</span> <span class="p">},</span>
|
||||
@ -135,7 +133,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>======================================================</p>
|
||||
|
||||
<h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <table class="data-table table-striped table-condensed" cellspacing="0"> \</span>
|
||||
<span class="s1"> <table class="recline-grid table-striped table-condensed" cellspacing="0"> \</span>
|
||||
<span class="s1"> <thead> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> {{#notEmpty}} \</span>
|
||||
@ -154,9 +152,13 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="s1"> <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \</span>
|
||||
<span class="s1"> <ul class="dropdown-menu data-table-menu pull-right"> \</span>
|
||||
<span class="s1"> <li><a data-action="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \</span>
|
||||
<span class="s1"> <li><a data-action="filter" href="JavaScript:void(0);">Text Filter</a></li> \</span>
|
||||
<span class="s1"> <li class="divider"></li> \</span>
|
||||
<span class="s1"> <li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \</span>
|
||||
<span class="s1"> <li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \</span>
|
||||
<span class="s1"> <li class="divider"></li> \</span>
|
||||
<span class="s1"> <li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \</span>
|
||||
<span class="s1"> <li class="divider"></li> \</span>
|
||||
<span class="s1"> <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
@ -188,9 +190,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">doc</span><span class="p">,</span>
|
||||
<span class="nx">el</span><span class="o">:</span> <span class="nx">tr</span><span class="p">,</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">options</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">));</span>
|
||||
@ -202,16 +202,6 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
|
||||
<p>In addition you <em>must</em> pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.</p>
|
||||
|
||||
<p>Additional options can be passed in a second hash argument. Options:</p>
|
||||
|
||||
<ul>
|
||||
<li>cellRenderer: function to render cells. Signature: function(value,
|
||||
field, doc) where value is the value of this cell, field is
|
||||
corresponding field object and document is the document object. Note
|
||||
that implementing functions can ignore arguments (e.g.
|
||||
function(value) would be a valid cellRenderer function).</li>
|
||||
</ul>
|
||||
|
||||
<p>Example:</p>
|
||||
|
||||
<pre>
|
||||
@ -219,21 +209,11 @@ var row = new DataGridRow({
|
||||
model: dataset-document,
|
||||
el: dom-element,
|
||||
fields: mydatasets.fields // a FieldList object
|
||||
}, {
|
||||
cellRenderer: my-cell-renderer-function
|
||||
}
|
||||
);
|
||||
});
|
||||
</pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGridRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initData</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initData</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">initData</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span> <span class="o">&&</span> <span class="nx">options</span><span class="p">.</span><span class="nx">cellRenderer</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_cellRenderer</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">cellRenderer</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_cellRenderer</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">value</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
@ -268,7 +248,7 @@ var row = new DataGridRow({
|
||||
<span class="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_cellRenderer</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">),</span> <span class="nx">field</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">})</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">}</span>
|
||||
|
||||
194
docs/view.html
194
docs/view.html
@ -1,4 +1,5 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html> <html> <head> <title>view.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>DataExplorer</h2>
|
||||
@ -53,7 +54,7 @@ operate in read-only mode (hiding all editing options).</li>
|
||||
<p>NB: the element already being in the DOM is important for rendering of
|
||||
FlotGraph subview.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataExplorer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="data-explorer"> \</span>
|
||||
<span class="s1"> <div class="recline-data-explorer"> \</span>
|
||||
<span class="s1"> <div class="alert-messages"></div> \</span>
|
||||
<span class="s1"> \</span>
|
||||
<span class="s1"> <div class="header"> \</span>
|
||||
@ -65,6 +66,12 @@ FlotGraph subview.</p> </td> <td class="code">
|
||||
<span class="s1"> <div class="recline-results-info"> \</span>
|
||||
<span class="s1"> Results found <span class="doc-count">{{docCount}}</span> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="menu-right"> \</span>
|
||||
<span class="s1"> <a href="#" class="btn" data-action="filters">Filters</a> \</span>
|
||||
<span class="s1"> <a href="#" class="btn" data-action="facets">Facets</a> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="query-editor-here" style="display:inline;"></div> \</span>
|
||||
<span class="s1"> <div class="clearfix"></div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="data-view-container"></div> \</span>
|
||||
<span class="s1"> <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \</span>
|
||||
@ -75,6 +82,9 @@ FlotGraph subview.</p> </td> <td class="code">
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .menu-right a'</span><span class="o">:</span> <span class="s1">'onMenuClick'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
@ -158,11 +168,17 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="kd">var</span> <span class="nx">queryEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.header'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">queryFacetEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span><span class="p">({</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.query-editor-here'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">filterEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FilterEditor</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$filterEditor</span> <span class="o">=</span> <span class="nx">filterEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.header'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">filterEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">facetViewer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.header'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryFacetEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$facetViewer</span> <span class="o">=</span> <span class="nx">facetViewer</span><span class="p">.</span><span class="nx">el</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.header'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">facetViewer</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">setupRouting</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -188,10 +204,19 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onMenuClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">action</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-action'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">===</span> <span class="s1">'filters'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$filterEditor</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">===</span> <span class="s1">'facets'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$facetViewer</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-query-editor'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
@ -199,28 +224,21 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="s1"> <div class="input-prepend text-query"> \</span>
|
||||
<span class="s1"> <span class="add-on"><i class="icon-search"></i></span> \</span>
|
||||
<span class="s1"> <input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \</span>
|
||||
<span class="s1"> <div class="btn-group menu"> \</span>
|
||||
<span class="s1"> <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \</span>
|
||||
<span class="s1"> <ul class="dropdown-menu"> \</span>
|
||||
<span class="s1"> <li><a data-action="size" href="">Number of items to show ({{size}})</a></li> \</span>
|
||||
<span class="s1"> <li><a data-action="from" href="">Show from ({{from}})</a></li> \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="pagination"> \</span>
|
||||
<span class="s1"> <ul> \</span>
|
||||
<span class="s1"> <li class="prev action-pagination-update"><a href="">&laquo;</a></li> \</span>
|
||||
<span class="s1"> <li class="active"><a>{{from}} &ndash; {{to}}</a></li> \</span>
|
||||
<span class="s1"> <li class="active"><a><input name="from" type="text" value="{{from}}" /> &ndash; <input name="to" type="text" value="{{to}}" /> </a></li> \</span>
|
||||
<span class="s1"> <li class="next action-pagination-update"><a href="">&raquo;</a></li> \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <button type="submit" class="btn">Go &raquo;</button> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'submit form'</span><span class="o">:</span> <span class="s1">'onFormSubmit'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-pagination-update'</span><span class="o">:</span> <span class="s1">'onPaginationUpdate'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .menu li a'</span><span class="o">:</span> <span class="s1">'onMenuItemClick'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -232,7 +250,9 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">onFormSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.text-query input'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">q</span><span class="o">:</span> <span class="nx">query</span><span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'input[name="from"]'</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
|
||||
<span class="kd">var</span> <span class="nx">newSize</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'input[name="to"]'</span><span class="p">).</span><span class="nx">val</span><span class="p">())</span> <span class="o">-</span> <span class="nx">newFrom</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">size</span><span class="o">:</span> <span class="nx">newSize</span><span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">,</span> <span class="nx">q</span><span class="o">:</span> <span class="nx">query</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onPaginationUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
@ -244,20 +264,6 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onMenuItemClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">attrName</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-action'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="s1">'New value (<%= value %>)'</span><span class="p">,</span>
|
||||
<span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">attrName</span><span class="p">)}</span>
|
||||
<span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">newValue</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="nx">msg</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">newValue</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">newValue</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">newValue</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">update</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">update</span><span class="p">[</span><span class="nx">attrName</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">to</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'from'</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'size'</span><span class="p">);</span>
|
||||
@ -266,6 +272,101 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">FilterEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-filter-editor well'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <a class="close js-hide" href="#">&times;</a> \</span>
|
||||
<span class="s1"> <div class="row filters"> \</span>
|
||||
<span class="s1"> <div class="span1"> \</span>
|
||||
<span class="s1"> <h3>Filters</h3> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="span11"> \</span>
|
||||
<span class="s1"> <form class="form-horizontal"> \</span>
|
||||
<span class="s1"> <div class="row"> \</span>
|
||||
<span class="s1"> <div class="span6"> \</span>
|
||||
<span class="s1"> {{#termFilters}} \</span>
|
||||
<span class="s1"> <div class="control-group filter-term filter" data-filter-id={{id}}> \</span>
|
||||
<span class="s1"> <label class="control-label" for="">{{label}}</label> \</span>
|
||||
<span class="s1"> <div class="controls"> \</span>
|
||||
<span class="s1"> <div class="input-append"> \</span>
|
||||
<span class="s1"> <input type="text" value="{{value}}" name="{{fieldId}}" class="span4" data-filter-field="{{fieldId}}" data-filter-id="{{id}}" data-filter-type="term" /> \</span>
|
||||
<span class="s1"> <a class="btn js-remove-filter"><i class="icon-remove"></i></a> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> {{/termFilters}} \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="span4"> \</span>
|
||||
<span class="s1"> <p>To add a filter use the column menu in the grid view.</p> \</span>
|
||||
<span class="s1"> <button type="submit" class="btn">Update</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .js-hide'</span><span class="o">:</span> <span class="s1">'onHide'</span><span class="p">,</span>
|
||||
<span class="s1">'click .js-remove-filter'</span><span class="o">:</span> <span class="s1">'onRemoveFilter'</span><span class="p">,</span>
|
||||
<span class="s1">'submit form'</span><span class="o">:</span> <span class="s1">'onTermFiltersUpdate'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change:filters:new-blank'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="p">{},</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>we will use idx in list as there id ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">filter</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">idx</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">filter</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">termFilters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">term</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">termFilters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">termFilters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
|
||||
<span class="nx">fieldId</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onHide</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onRemoveFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">filterId</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'.filter'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-filter-id'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">removeFilter</span><span class="p">(</span><span class="nx">filterId</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onTermFiltersUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">$form</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">$form</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'input'</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">input</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">filterIndex</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-filter-id'</span><span class="p">));</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-filter-field'</span><span class="p">);</span>
|
||||
<span class="nx">filters</span><span class="p">[</span><span class="nx">filterIndex</span><span class="p">].</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-facet-viewer well'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
@ -279,7 +380,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="s1"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \</span>
|
||||
<span class="s1"> <ul class="facet-items dropdown-menu"> \</span>
|
||||
<span class="s1"> {{#terms}} \</span>
|
||||
<span class="s1"> <li><input type="checkbox" class="facet-choice js-facet-filter" value="{{term}}" name="{{term}}" /> <label for="{{term}}">{{term}} ({{count}})</label></li> \</span>
|
||||
<span class="s1"> <li><a class="facet-choice js-facet-filter" data-value="{{term}}">{{term}} ({{count}})</a></li> \</span>
|
||||
<span class="s1"> {{/terms}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
@ -289,7 +390,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .js-hide'</span><span class="o">:</span> <span class="s1">'onHide'</span><span class="p">,</span>
|
||||
<span class="s1">'change .js-facet-filter'</span><span class="o">:</span> <span class="s1">'onFacetFilter'</span>
|
||||
<span class="s1">'click .js-facet-filter'</span><span class="o">:</span> <span class="s1">'onFacetFilter'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
@ -304,7 +405,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
@ -314,14 +415,15 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onFacetFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>todo: uncheck</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">$checkbox</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$checkbox</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'.facet-summary'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-facet'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$checkbox</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="nx">onFacetFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$target</span><span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'.facet-summary'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-facet'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-value'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Parse the Hash section of a URL into path and query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Parse the Hash section of a URL into path and query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">parsed</span> <span class="o">=</span> <span class="nx">urlPathRegex</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">parsed</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{};</span>
|
||||
@ -331,7 +433,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">||</span> <span class="s1">''</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{};</span>
|
||||
<span class="p">}</span>
|
||||
@ -344,13 +446,13 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">q</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">.</span><span class="nx">length</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">'?'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">q</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
|
||||
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">urlParams</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">q</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">).</span><span class="nx">query</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="s1">'?'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -362,7 +464,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryPart</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">queryPart</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
@ -370,7 +472,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <h2>notify</h2>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <h2>notify</h2>
|
||||
|
||||
<p>Create a notification (a div.alert in div.alert-messsages) using provide messages and options. Options are:</p>
|
||||
|
||||
@ -393,7 +495,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="s1"> {{/loader}} \</span>
|
||||
<span class="s1"> </div>'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.data-explorer .alert-messages'</span><span class="p">));</span>
|
||||
<span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.recline-data-explorer .alert-messages'</span><span class="p">));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">persist</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -401,10 +503,10 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <h2>clearNotifications</h2>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <h2>clearNotifications</h2>
|
||||
|
||||
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.data-explorer .alert-messages .alert'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.recline-data-explorer .alert-messages .alert'</span><span class="p">);</span>
|
||||
<span class="nx">$notifications</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
|
||||
626
recline.js
626
recline.js
@ -72,17 +72,33 @@ this.recline.Model = this.recline.Model || {};
|
||||
|
||||
(function($, my) {
|
||||
|
||||
// ## A Dataset model
|
||||
// ## <a id="dataset">A Dataset model</a>
|
||||
//
|
||||
// A model has the following (non-Backbone) attributes:
|
||||
//
|
||||
// * fields: (aka columns) is a FieldList listing all the fields on this
|
||||
// Dataset (this can be set explicitly, or, will be set by Dataset.fetch() or Dataset.query()
|
||||
// * currentDocuments: a DocumentList containing the Documents we have
|
||||
// currently loaded for viewing (you update currentDocuments by calling query)
|
||||
// * docCount: total number of documents in this dataset
|
||||
// @property {FieldList} fields: (aka columns) is a `FieldList` listing all the
|
||||
// fields on this Dataset (this can be set explicitly, or, will be set by
|
||||
// Dataset.fetch() or Dataset.query()
|
||||
//
|
||||
// @property {DocumentList} currentDocuments: a `DocumentList` containing the
|
||||
// Documents we have currently loaded for viewing (updated by calling query
|
||||
// method)
|
||||
//
|
||||
// @property {number} docCount: total number of documents in this dataset
|
||||
//
|
||||
// @property {Backend} backend: the Backend (instance) for this Dataset
|
||||
//
|
||||
// @property {Query} queryState: `Query` object which stores current
|
||||
// queryState. queryState may be edited by other components (e.g. a query
|
||||
// editor view) changes will trigger a Dataset query.
|
||||
//
|
||||
// @property {FacetList} facets: FacetList object containing all current
|
||||
// Facets.
|
||||
my.Dataset = Backbone.Model.extend({
|
||||
__type__: 'Dataset',
|
||||
// ### initialize
|
||||
//
|
||||
// Sets up instance properties (see above)
|
||||
initialize: function(model, backend) {
|
||||
_.bindAll(this, 'query');
|
||||
this.backend = backend;
|
||||
@ -154,11 +170,29 @@ my.Dataset = Backbone.Model.extend({
|
||||
}
|
||||
});
|
||||
|
||||
// ## A Document (aka Row)
|
||||
// ## <a id="document">A Document (aka Row)</a>
|
||||
//
|
||||
// A single entry or row in the dataset
|
||||
my.Document = Backbone.Model.extend({
|
||||
__type__: 'Document'
|
||||
__type__: 'Document',
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'getFieldValue');
|
||||
},
|
||||
|
||||
// ### getFieldValue
|
||||
//
|
||||
// For the provided Field get the corresponding rendered computed data value
|
||||
// for this document.
|
||||
getFieldValue: function(field) {
|
||||
var val = this.get(field.id);
|
||||
if (field.deriver) {
|
||||
val = field.deriver(val, field, this);
|
||||
}
|
||||
if (field.renderer) {
|
||||
val = field.renderer(val, field, this);
|
||||
}
|
||||
return val;
|
||||
}
|
||||
});
|
||||
|
||||
// ## A Backbone collection of Documents
|
||||
@ -167,29 +201,59 @@ my.DocumentList = Backbone.Collection.extend({
|
||||
model: my.Document
|
||||
});
|
||||
|
||||
// ## A Field (aka Column) on a Dataset
|
||||
// ## <a id="field">A Field (aka Column) on a Dataset</a>
|
||||
//
|
||||
// Following attributes as standard:
|
||||
// Following (Backbone) attributes as standard:
|
||||
//
|
||||
// * id: a unique identifer for this field- usually this should match the key in the documents hash
|
||||
// * label: the visible label used for this field
|
||||
// * type: the type of the data
|
||||
// * id: a unique identifer for this field- usually this should match the key in the documents hash
|
||||
// * label: (optional: defaults to id) the visible label used for this field
|
||||
// * type: (optional: defaults to string) the type of the data in this field. Should be a string as per type names defined by ElasticSearch - see Types list on <http://www.elasticsearch.org/guide/reference/mapping/>
|
||||
// * format: (optional) used to indicate how the data should be formatted. For example:
|
||||
// * type=date, format=yyyy-mm-dd
|
||||
// * type=float, format=percentage
|
||||
// * type=float, format='###,###.##'
|
||||
// * is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).
|
||||
//
|
||||
// Following additional instance properties:
|
||||
//
|
||||
// @property {Function} renderer: a function to render the data for this field.
|
||||
// Signature: function(value, field, doc) where value is the value of this
|
||||
// cell, field is corresponding field object and document is the document
|
||||
// object. Note that implementing functions can ignore arguments (e.g.
|
||||
// function(value) would be a valid formatter function).
|
||||
//
|
||||
// @property {Function} deriver: a function to derive/compute the value of data
|
||||
// in this field as a function of this field's value (if any) and the current
|
||||
// document, its signature and behaviour is the same as for renderer. Use of
|
||||
// this function allows you to define an entirely new value for data in this
|
||||
// field. This provides support for a) 'derived/computed' fields: i.e. fields
|
||||
// whose data are functions of the data in other fields b) transforming the
|
||||
// value of this field prior to rendering.
|
||||
my.Field = Backbone.Model.extend({
|
||||
// ### defaults - define default values
|
||||
defaults: {
|
||||
id: null,
|
||||
label: null,
|
||||
type: 'String'
|
||||
type: 'string',
|
||||
format: null,
|
||||
is_derived: false
|
||||
},
|
||||
// In addition to normal backbone initialization via a Hash you can also
|
||||
// just pass a single argument representing id to the ctor
|
||||
initialize: function(data) {
|
||||
// if a hash not passed in the first argument is set as value for key 0
|
||||
// ### initialize
|
||||
//
|
||||
// @param {Object} data: standard Backbone model attributes
|
||||
//
|
||||
// @param {Object} options: renderer and/or deriver functions.
|
||||
initialize: function(data, options) {
|
||||
// if a hash not passed in the first argument throw error
|
||||
if ('0' in data) {
|
||||
throw new Error('Looks like you did not pass a proper hash with id to Field constructor');
|
||||
}
|
||||
if (this.attributes.label == null) {
|
||||
this.set({label: this.id});
|
||||
}
|
||||
if (options) {
|
||||
this.renderer = options.renderer;
|
||||
this.deriver = options.deriver;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -197,30 +261,99 @@ my.FieldList = Backbone.Collection.extend({
|
||||
model: my.Field
|
||||
});
|
||||
|
||||
// ## A Query object storing Dataset Query state
|
||||
// ## <a id="query">Query</a>
|
||||
//
|
||||
// Query instances encapsulate a query to the backend (see <a
|
||||
// href="backend/base.html">query method on backend</a>). Useful both
|
||||
// for creating queries and for storing and manipulating query state -
|
||||
// e.g. from a query editor).
|
||||
//
|
||||
// **Query Structure and format**
|
||||
//
|
||||
// Query structure should follow that of [ElasticSearch query
|
||||
// language](http://www.elasticsearch.org/guide/reference/api/search/).
|
||||
//
|
||||
// **NB: It is up to specific backends how to implement and support this query
|
||||
// structure. Different backends might choose to implement things differently
|
||||
// or not support certain features. Please check your backend for details.**
|
||||
//
|
||||
// Query object has the following key attributes:
|
||||
//
|
||||
// * size (=limit): number of results to return
|
||||
// * from (=offset): offset into result set - http://www.elasticsearch.org/guide/reference/api/search/from-size.html
|
||||
// * sort: sort order - <http://www.elasticsearch.org/guide/reference/api/search/sort.html>
|
||||
// * query: Query in ES Query DSL <http://www.elasticsearch.org/guide/reference/api/search/query.html>
|
||||
// * filter: See filters and <a href="http://www.elasticsearch.org/guide/reference/query-dsl/filtered-query.html">Filtered Query</a>
|
||||
// * fields: set of fields to return - http://www.elasticsearch.org/guide/reference/api/search/fields.html
|
||||
// * facets: TODO - see http://www.elasticsearch.org/guide/reference/api/search/facets/
|
||||
//
|
||||
// Additions:
|
||||
//
|
||||
// * q: either straight text or a hash will map directly onto a [query_string
|
||||
// query](http://www.elasticsearch.org/guide/reference/query-dsl/query-string-query.html)
|
||||
// in backend
|
||||
//
|
||||
// * Of course this can be re-interpreted by different backends. E.g. some
|
||||
// may just pass this straight through e.g. for an SQL backend this could be
|
||||
// the full SQL query
|
||||
//
|
||||
// * filters: dict of ElasticSearch filters. These will be and-ed together for
|
||||
// execution.
|
||||
//
|
||||
// **Examples**
|
||||
//
|
||||
// <pre>
|
||||
// {
|
||||
// q: 'quick brown fox',
|
||||
// filters: [
|
||||
// { term: { 'owner': 'jones' } }
|
||||
// ]
|
||||
// }
|
||||
// </pre>
|
||||
my.Query = Backbone.Model.extend({
|
||||
defaults: function() {
|
||||
return {
|
||||
size: 100
|
||||
, from: 0
|
||||
, facets: {}
|
||||
// http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html
|
||||
// <http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html>
|
||||
// , filter: {}
|
||||
// list of simple filters which will be add to 'add' filter of filter
|
||||
, filters: []
|
||||
}
|
||||
},
|
||||
// Set (update or add) a terms filter
|
||||
// http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html
|
||||
// #### addTermFilter
|
||||
//
|
||||
// Set (update or add) a terms filter to filters
|
||||
//
|
||||
// See <http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html>
|
||||
addTermFilter: function(fieldId, value) {
|
||||
var filters = this.get('filters');
|
||||
var filter = { term: {} };
|
||||
filter.term[fieldId] = value;
|
||||
filters.push(filter);
|
||||
this.set({filters: filters});
|
||||
// change does not seem to be triggered ...
|
||||
// change does not seem to be triggered automatically
|
||||
if (value) {
|
||||
this.trigger('change');
|
||||
} else {
|
||||
// adding a new blank filter and do not want to trigger a new query
|
||||
this.trigger('change:filters:new-blank');
|
||||
}
|
||||
},
|
||||
// ### removeFilter
|
||||
//
|
||||
// Remove a filter from filters at index filterIndex
|
||||
removeFilter: function(filterIndex) {
|
||||
var filters = this.get('filters');
|
||||
filters.splice(filterIndex, 1);
|
||||
this.set({filters: filters});
|
||||
this.trigger('change');
|
||||
},
|
||||
// ### addFacet
|
||||
//
|
||||
// Add a Facet to this query
|
||||
//
|
||||
// See <http://www.elasticsearch.org/guide/reference/api/search/facets/>
|
||||
addFacet: function(fieldId) {
|
||||
var facets = this.get('facets');
|
||||
// Assume id and fieldId should be the same (TODO: this need not be true if we want to add two different type of facets on same field)
|
||||
@ -236,18 +369,51 @@ my.Query = Backbone.Model.extend({
|
||||
});
|
||||
|
||||
|
||||
// ## A Facet (Result)
|
||||
// ## <a id="facet">A Facet (Result)</a>
|
||||
//
|
||||
// Object to store Facet information, that is summary information (e.g. values
|
||||
// and counts) about a field obtained by some faceting method on the
|
||||
// backend.
|
||||
//
|
||||
// Structure of a facet follows that of Facet results in ElasticSearch, see:
|
||||
// <http://www.elasticsearch.org/guide/reference/api/search/facets/>
|
||||
//
|
||||
// Specifically the object structure of a facet looks like (there is one
|
||||
// addition compared to ElasticSearch: the "id" field which corresponds to the
|
||||
// key used to specify this facet in the facet query):
|
||||
//
|
||||
// <pre>
|
||||
// {
|
||||
// "id": "id-of-facet",
|
||||
// // type of this facet (terms, range, histogram etc)
|
||||
// "_type" : "terms",
|
||||
// // total number of tokens in the facet
|
||||
// "total": 5,
|
||||
// // @property {number} number of documents which have no value for the field
|
||||
// "missing" : 0,
|
||||
// // number of facet values not included in the returned facets
|
||||
// "other": 0,
|
||||
// // term object ({term: , count: ...})
|
||||
// "terms" : [ {
|
||||
// "term" : "foo",
|
||||
// "count" : 2
|
||||
// }, {
|
||||
// "term" : "bar",
|
||||
// "count" : 2
|
||||
// }, {
|
||||
// "term" : "baz",
|
||||
// "count" : 1
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// </pre>
|
||||
my.Facet = Backbone.Model.extend({
|
||||
defaults: function() {
|
||||
return {
|
||||
_type: 'terms',
|
||||
// total number of tokens in the facet
|
||||
total: 0,
|
||||
// number of facet values not included in the returned facets
|
||||
other: 0,
|
||||
// number of documents which have no value for the field
|
||||
missing: 0,
|
||||
// term object ({term: , count: ...})
|
||||
terms: []
|
||||
}
|
||||
}
|
||||
@ -265,6 +431,8 @@ my.backends = {};
|
||||
|
||||
}(jQuery, this.recline.Model));
|
||||
|
||||
/*jshint multistr:true */
|
||||
|
||||
var util = function() {
|
||||
var templates = {
|
||||
transformActions: '<li><a data-action="transform" class="menuAction" href="JavaScript:void(0);">Global transform...</a></li>'
|
||||
@ -415,6 +583,8 @@ var util = function() {
|
||||
observeExit: observeExit
|
||||
};
|
||||
}();
|
||||
/*jshint multistr:true */
|
||||
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
@ -767,6 +937,8 @@ my.FlotGraph = Backbone.View.extend({
|
||||
|
||||
})(jQuery, recline.View);
|
||||
|
||||
/*jshint multistr:true */
|
||||
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
@ -775,16 +947,12 @@ this.recline.View = this.recline.View || {};
|
||||
//
|
||||
// Provides a tabular view on a Dataset.
|
||||
//
|
||||
// Initialize it with a recline.Dataset object.
|
||||
//
|
||||
// Additional options passed in second arguments. Options:
|
||||
//
|
||||
// * cellRenderer: function used to render individual cells. See DataGridRow for more.
|
||||
// Initialize it with a `recline.Model.Dataset`.
|
||||
my.DataGrid = Backbone.View.extend({
|
||||
tagName: "div",
|
||||
className: "data-table-container",
|
||||
className: "recline-grid-container",
|
||||
|
||||
initialize: function(modelEtc, options) {
|
||||
initialize: function(modelEtc) {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
_.bindAll(this, 'render');
|
||||
@ -793,7 +961,6 @@ my.DataGrid = Backbone.View.extend({
|
||||
this.model.currentDocuments.bind('remove', this.render);
|
||||
this.state = {};
|
||||
this.hiddenFields = [];
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
events: {
|
||||
@ -843,6 +1010,9 @@ my.DataGrid = Backbone.View.extend({
|
||||
facet: function() {
|
||||
self.model.queryState.addFacet(self.state.currentColumn);
|
||||
},
|
||||
filter: function() {
|
||||
self.model.queryState.addTermFilter(self.state.currentColumn, '');
|
||||
},
|
||||
transform: function() { self.showTransformDialog('transform') },
|
||||
sortAsc: function() { self.setColumnSort('asc') },
|
||||
sortDesc: function() { self.setColumnSort('desc') },
|
||||
@ -915,7 +1085,7 @@ my.DataGrid = Backbone.View.extend({
|
||||
// ======================================================
|
||||
// #### Templating
|
||||
template: ' \
|
||||
<table class="data-table table-striped table-condensed" cellspacing="0"> \
|
||||
<table class="recline-grid table-striped table-condensed" cellspacing="0"> \
|
||||
<thead> \
|
||||
<tr> \
|
||||
{{#notEmpty}} \
|
||||
@ -934,9 +1104,13 @@ my.DataGrid = Backbone.View.extend({
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
|
||||
<ul class="dropdown-menu data-table-menu pull-right"> \
|
||||
<li><a data-action="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \
|
||||
<li><a data-action="filter" href="JavaScript:void(0);">Text Filter</a></li> \
|
||||
<li class="divider"></li> \
|
||||
<li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
|
||||
<li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
|
||||
<li class="divider"></li> \
|
||||
<li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
|
||||
<li class="divider"></li> \
|
||||
<li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
|
||||
</ul> \
|
||||
</div> \
|
||||
@ -970,9 +1144,7 @@ my.DataGrid = Backbone.View.extend({
|
||||
model: doc,
|
||||
el: tr,
|
||||
fields: self.fields
|
||||
},
|
||||
self.options
|
||||
);
|
||||
});
|
||||
newView.render();
|
||||
});
|
||||
this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0));
|
||||
@ -986,14 +1158,6 @@ my.DataGrid = Backbone.View.extend({
|
||||
//
|
||||
// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.
|
||||
//
|
||||
// Additional options can be passed in a second hash argument. Options:
|
||||
//
|
||||
// * cellRenderer: function to render cells. Signature: function(value,
|
||||
// field, doc) where value is the value of this cell, field is
|
||||
// corresponding field object and document is the document object. Note
|
||||
// that implementing functions can ignore arguments (e.g.
|
||||
// function(value) would be a valid cellRenderer function).
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// <pre>
|
||||
@ -1001,22 +1165,12 @@ my.DataGrid = Backbone.View.extend({
|
||||
// model: dataset-document,
|
||||
// el: dom-element,
|
||||
// fields: mydatasets.fields // a FieldList object
|
||||
// }, {
|
||||
// cellRenderer: my-cell-renderer-function
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
// </pre>
|
||||
my.DataGridRow = Backbone.View.extend({
|
||||
initialize: function(initData, options) {
|
||||
initialize: function(initData) {
|
||||
_.bindAll(this, 'render');
|
||||
this._fields = initData.fields;
|
||||
if (options && options.cellRenderer) {
|
||||
this._cellRenderer = options.cellRenderer;
|
||||
} else {
|
||||
this._cellRenderer = function(value) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
this.el = $(this.el);
|
||||
this.model.bind('change', this.render);
|
||||
},
|
||||
@ -1051,7 +1205,7 @@ my.DataGridRow = Backbone.View.extend({
|
||||
var cellData = this._fields.map(function(field) {
|
||||
return {
|
||||
field: field.id,
|
||||
value: self._cellRenderer(doc.get(field.id), field, doc)
|
||||
value: doc.getFieldValue(field)
|
||||
}
|
||||
})
|
||||
return { id: this.id, cells: cellData }
|
||||
@ -1104,6 +1258,174 @@ my.DataGridRow = Backbone.View.extend({
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);
|
||||
/*jshint multistr:true */
|
||||
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
(function($, my) {
|
||||
|
||||
my.Map = Backbone.View.extend({
|
||||
|
||||
tagName: 'div',
|
||||
className: 'data-map-container',
|
||||
|
||||
latitudeFieldNames: ['lat','latitude'],
|
||||
longitudeFieldNames: ['lon','longitude'],
|
||||
geometryFieldNames: ['geom','the_geom','geometry','spatial'],
|
||||
|
||||
//TODO: In case we want to change the default markers
|
||||
/*
|
||||
markerOptions: {
|
||||
radius: 5,
|
||||
color: 'grey',
|
||||
fillColor: 'orange',
|
||||
weight: 2,
|
||||
opacity: 1,
|
||||
fillOpacity: 1
|
||||
},
|
||||
*/
|
||||
|
||||
template: ' \
|
||||
<div class="panel map"> \
|
||||
</div> \
|
||||
',
|
||||
|
||||
initialize: function(options, config) {
|
||||
var self = this;
|
||||
|
||||
this.el = $(this.el);
|
||||
this.render();
|
||||
this.model.bind('change', function() {
|
||||
self._setupGeometryField();
|
||||
});
|
||||
|
||||
this.mapReady = false;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
|
||||
var self = this;
|
||||
|
||||
htmls = $.mustache(this.template, this.model.toTemplateJSON());
|
||||
$(this.el).html(htmls);
|
||||
this.$map = this.el.find('.panel.map');
|
||||
|
||||
this.model.bind('query:done', function() {
|
||||
if (!self.geomReady){
|
||||
self._setupGeometryField();
|
||||
}
|
||||
|
||||
if (!self.mapReady){
|
||||
self._setupMap();
|
||||
}
|
||||
self.redraw()
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
redraw: function(){
|
||||
|
||||
var self = this;
|
||||
|
||||
if (this.geomReady){
|
||||
if (this.model.currentDocuments.length > 0){
|
||||
this.features.clearLayers();
|
||||
var bounds = new L.LatLngBounds();
|
||||
|
||||
this.model.currentDocuments.forEach(function(doc){
|
||||
var feature = self._getGeometryFromDocument(doc);
|
||||
if (feature){
|
||||
// Build popup contents
|
||||
// TODO: mustache?
|
||||
html = ''
|
||||
for (key in doc.attributes){
|
||||
html += '<div><strong>' + key + '</strong>: '+ doc.attributes[key] + '</div>'
|
||||
}
|
||||
feature.properties = {popupContent: html};
|
||||
|
||||
self.features.addGeoJSON(feature);
|
||||
|
||||
// TODO: bounds and center map
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_getGeometryFromDocument: function(doc){
|
||||
if (this.geomReady){
|
||||
if (this._geomFieldName){
|
||||
// We assume that the contents of the field are a valid GeoJSON object
|
||||
return doc.attributes[this._geomFieldName];
|
||||
} else if (this._lonFieldName && this._latFieldName){
|
||||
// We'll create a GeoJSON like point object from the two lat/lon fields
|
||||
return {
|
||||
type: 'Point',
|
||||
coordinates: [
|
||||
doc.attributes[this._lonFieldName],
|
||||
doc.attributes[this._latFieldName],
|
||||
]
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
_setupGeometryField: function(){
|
||||
var geomField, latField, lonField;
|
||||
|
||||
// Check if there is a field with GeoJSON geometries or alternatively,
|
||||
// two fields with lat/lon values
|
||||
this._geomFieldName = this._checkField(this.geometryFieldNames);
|
||||
this._latFieldName = this._checkField(this.latitudeFieldNames);
|
||||
this._lonFieldName = this._checkField(this.longitudeFieldNames);
|
||||
|
||||
// TODO: Allow users to choose the fields
|
||||
|
||||
this.geomReady = (this._geomFieldName || (this._latFieldName && this._lonFieldName));
|
||||
},
|
||||
|
||||
_checkField: function(fieldNames){
|
||||
var field;
|
||||
for (var i = 0; i < fieldNames.length; i++){
|
||||
field = this.model.fields.get(fieldNames[i]);
|
||||
if (field) return field.id;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
_setupMap: function(){
|
||||
|
||||
this.map = new L.Map(this.$map.get(0));
|
||||
|
||||
// MapQuest OpenStreetMap base map
|
||||
var mapUrl = "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png";
|
||||
var osmAttribution = 'Map data © 2011 OpenStreetMap contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">';
|
||||
var bg = new L.TileLayer(mapUrl, {maxZoom: 18, attribution: osmAttribution ,subdomains: '1234'});
|
||||
this.map.addLayer(bg);
|
||||
|
||||
// Layer to hold the features
|
||||
this.features = new L.GeoJSON();
|
||||
this.features.on('featureparse', function (e) {
|
||||
if (e.properties && e.properties.popupContent){
|
||||
e.layer.bindPopup(e.properties.popupContent);
|
||||
}
|
||||
});
|
||||
this.map.addLayer(this.features);
|
||||
|
||||
this.map.setView(new L.LatLng(0, 0), 2);
|
||||
|
||||
this.mapReady = true;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);
|
||||
|
||||
/*jshint multistr:true */
|
||||
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
@ -1310,6 +1632,7 @@ my.ColumnTransform = Backbone.View.extend({
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);
|
||||
/*jshint multistr:true */
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
@ -1365,7 +1688,7 @@ this.recline.View = this.recline.View || {};
|
||||
// FlotGraph subview.
|
||||
my.DataExplorer = Backbone.View.extend({
|
||||
template: ' \
|
||||
<div class="data-explorer"> \
|
||||
<div class="recline-data-explorer"> \
|
||||
<div class="alert-messages"></div> \
|
||||
\
|
||||
<div class="header"> \
|
||||
@ -1377,6 +1700,12 @@ my.DataExplorer = Backbone.View.extend({
|
||||
<div class="recline-results-info"> \
|
||||
Results found <span class="doc-count">{{docCount}}</span> \
|
||||
</div> \
|
||||
<div class="menu-right"> \
|
||||
<a href="#" class="btn" data-action="filters">Filters</a> \
|
||||
<a href="#" class="btn" data-action="facets">Facets</a> \
|
||||
</div> \
|
||||
<div class="query-editor-here" style="display:inline;"></div> \
|
||||
<div class="clearfix"></div> \
|
||||
</div> \
|
||||
<div class="data-view-container"></div> \
|
||||
<div class="dialog-overlay" style="display: none; z-index: 101; "> </div> \
|
||||
@ -1387,6 +1716,9 @@ my.DataExplorer = Backbone.View.extend({
|
||||
</div> \
|
||||
</div> \
|
||||
',
|
||||
events: {
|
||||
'click .menu-right a': 'onMenuClick'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
@ -1479,11 +1811,17 @@ my.DataExplorer = Backbone.View.extend({
|
||||
var queryEditor = new my.QueryEditor({
|
||||
model: this.model.queryState
|
||||
});
|
||||
this.el.find('.header').append(queryEditor.el);
|
||||
var queryFacetEditor = new my.FacetViewer({
|
||||
this.el.find('.query-editor-here').append(queryEditor.el);
|
||||
var filterEditor = new my.FilterEditor({
|
||||
model: this.model.queryState
|
||||
});
|
||||
this.$filterEditor = filterEditor.el;
|
||||
this.el.find('.header').append(filterEditor.el);
|
||||
var facetViewer = new my.FacetViewer({
|
||||
model: this.model
|
||||
});
|
||||
this.el.find('.header').append(queryFacetEditor.el);
|
||||
this.$facetViewer = facetViewer.el;
|
||||
this.el.find('.header').append(facetViewer.el);
|
||||
},
|
||||
|
||||
setupRouting: function() {
|
||||
@ -1513,10 +1851,19 @@ my.DataExplorer = Backbone.View.extend({
|
||||
view.view.el.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onMenuClick: function(e) {
|
||||
e.preventDefault();
|
||||
var action = $(e.target).attr('data-action');
|
||||
if (action === 'filters') {
|
||||
this.$filterEditor.show();
|
||||
} else if (action === 'facets') {
|
||||
this.$facetViewer.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
my.QueryEditor = Backbone.View.extend({
|
||||
className: 'recline-query-editor',
|
||||
template: ' \
|
||||
@ -1524,28 +1871,21 @@ my.QueryEditor = Backbone.View.extend({
|
||||
<div class="input-prepend text-query"> \
|
||||
<span class="add-on"><i class="icon-search"></i></span> \
|
||||
<input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
|
||||
<div class="btn-group menu"> \
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
|
||||
<ul class="dropdown-menu"> \
|
||||
<li><a data-action="size" href="">Number of items to show ({{size}})</a></li> \
|
||||
<li><a data-action="from" href="">Show from ({{from}})</a></li> \
|
||||
</ul> \
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="pagination"> \
|
||||
<ul> \
|
||||
<li class="prev action-pagination-update"><a href="">«</a></li> \
|
||||
<li class="active"><a>{{from}} – {{to}}</a></li> \
|
||||
<li class="active"><a><input name="from" type="text" value="{{from}}" /> – <input name="to" type="text" value="{{to}}" /> </a></li> \
|
||||
<li class="next action-pagination-update"><a href="">»</a></li> \
|
||||
</ul> \
|
||||
</div> \
|
||||
<button type="submit" class="btn">Go »</button> \
|
||||
</form> \
|
||||
',
|
||||
|
||||
events: {
|
||||
'submit form': 'onFormSubmit'
|
||||
, 'click .action-pagination-update': 'onPaginationUpdate'
|
||||
, 'click .menu li a': 'onMenuItemClick'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
@ -1557,7 +1897,9 @@ my.QueryEditor = Backbone.View.extend({
|
||||
onFormSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
var query = this.el.find('.text-query input').val();
|
||||
this.model.set({q: query});
|
||||
var newFrom = parseInt(this.el.find('input[name="from"]').val());
|
||||
var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
|
||||
this.model.set({size: newSize, from: newFrom, q: query});
|
||||
},
|
||||
onPaginationUpdate: function(e) {
|
||||
e.preventDefault();
|
||||
@ -1569,20 +1911,6 @@ my.QueryEditor = Backbone.View.extend({
|
||||
}
|
||||
this.model.set({from: newFrom});
|
||||
},
|
||||
onMenuItemClick: function(e) {
|
||||
e.preventDefault();
|
||||
var attrName = $(e.target).attr('data-action');
|
||||
var msg = _.template('New value (<%= value %>)',
|
||||
{value: this.model.get(attrName)}
|
||||
);
|
||||
var newValue = prompt(msg);
|
||||
if (newValue) {
|
||||
newValue = parseInt(newValue);
|
||||
var update = {};
|
||||
update[attrName] = newValue;
|
||||
this.model.set(update);
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var tmplData = this.model.toJSON();
|
||||
tmplData.to = this.model.get('from') + this.model.get('size');
|
||||
@ -1591,6 +1919,105 @@ my.QueryEditor = Backbone.View.extend({
|
||||
}
|
||||
});
|
||||
|
||||
my.FilterEditor = Backbone.View.extend({
|
||||
className: 'recline-filter-editor well',
|
||||
template: ' \
|
||||
<a class="close js-hide" href="#">×</a> \
|
||||
<div class="row filters"> \
|
||||
<div class="span1"> \
|
||||
<h3>Filters</h3> \
|
||||
</div> \
|
||||
<div class="span11"> \
|
||||
<form class="form-horizontal"> \
|
||||
<div class="row"> \
|
||||
<div class="span6"> \
|
||||
{{#termFilters}} \
|
||||
<div class="control-group filter-term filter" data-filter-id={{id}}> \
|
||||
<label class="control-label" for="">{{label}}</label> \
|
||||
<div class="controls"> \
|
||||
<div class="input-append"> \
|
||||
<input type="text" value="{{value}}" name="{{fieldId}}" class="span4" data-filter-field="{{fieldId}}" data-filter-id="{{id}}" data-filter-type="term" /> \
|
||||
<a class="btn js-remove-filter"><i class="icon-remove"></i></a> \
|
||||
</div> \
|
||||
</div> \
|
||||
</div> \
|
||||
{{/termFilters}} \
|
||||
</div> \
|
||||
<div class="span4"> \
|
||||
<p>To add a filter use the column menu in the grid view.</p> \
|
||||
<button type="submit" class="btn">Update</button> \
|
||||
</div> \
|
||||
</form> \
|
||||
</div> \
|
||||
</div> \
|
||||
',
|
||||
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(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: ' \
|
||||
@ -1604,7 +2031,7 @@ my.FacetViewer = Backbone.View.extend({
|
||||
<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><input type="checkbox" class="facet-choice js-facet-filter" value="{{term}}" name="{{term}}" /> <label for="{{term}}">{{term}} ({{count}})</label></li> \
|
||||
<li><a class="facet-choice js-facet-filter" data-value="{{term}}">{{term}} ({{count}})</a></li> \
|
||||
{{/terms}} \
|
||||
</ul> \
|
||||
</div> \
|
||||
@ -1614,7 +2041,7 @@ my.FacetViewer = Backbone.View.extend({
|
||||
|
||||
events: {
|
||||
'click .js-hide': 'onHide',
|
||||
'change .js-facet-filter': 'onFacetFilter'
|
||||
'click .js-facet-filter': 'onFacetFilter'
|
||||
},
|
||||
initialize: function(model) {
|
||||
_.bindAll(this, 'render');
|
||||
@ -1642,10 +2069,9 @@ my.FacetViewer = Backbone.View.extend({
|
||||
this.el.hide();
|
||||
},
|
||||
onFacetFilter: function(e) {
|
||||
// todo: uncheck
|
||||
var $checkbox = $(e.target);
|
||||
var fieldId = $checkbox.closest('.facet-summary').attr('data-facet');
|
||||
var value = $checkbox.val();
|
||||
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);
|
||||
}
|
||||
});
|
||||
@ -1742,7 +2168,7 @@ my.notify = function(message, options) {
|
||||
{{/loader}} \
|
||||
</div>';
|
||||
var _templated = $.mustache(_template, tmplData);
|
||||
_templated = $(_templated).appendTo($('.data-explorer .alert-messages'));
|
||||
_templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
|
||||
if (!options.persist) {
|
||||
setTimeout(function() {
|
||||
$(_templated).fadeOut(1000, function() {
|
||||
@ -1756,7 +2182,7 @@ my.notify = function(message, options) {
|
||||
//
|
||||
// Clear all existing notifications
|
||||
my.clearNotifications = function() {
|
||||
var $notifications = $('.data-explorer .alert-messages .alert');
|
||||
var $notifications = $('.recline-data-explorer .alert-messages .alert');
|
||||
$notifications.remove();
|
||||
}
|
||||
|
||||
|
||||
66
src/model.js
66
src/model.js
@ -106,7 +106,25 @@ my.Dataset = Backbone.Model.extend({
|
||||
//
|
||||
// A single entry or row in the dataset
|
||||
my.Document = Backbone.Model.extend({
|
||||
__type__: 'Document'
|
||||
__type__: 'Document',
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'getFieldValue');
|
||||
},
|
||||
|
||||
// ### getFieldValue
|
||||
//
|
||||
// For the provided Field get the corresponding rendered computed data value
|
||||
// for this document.
|
||||
getFieldValue: function(field) {
|
||||
var val = this.get(field.id);
|
||||
if (field.deriver) {
|
||||
val = field.deriver(val, field, this);
|
||||
}
|
||||
if (field.renderer) {
|
||||
val = field.renderer(val, field, this);
|
||||
}
|
||||
return val;
|
||||
}
|
||||
});
|
||||
|
||||
// ## A Backbone collection of Documents
|
||||
@ -117,18 +135,46 @@ my.DocumentList = Backbone.Collection.extend({
|
||||
|
||||
// ## <a id="field">A Field (aka Column) on a Dataset</a>
|
||||
//
|
||||
// Following attributes as standard:
|
||||
// Following (Backbone) attributes as standard:
|
||||
//
|
||||
// * id: a unique identifer for this field- usually this should match the key in the documents hash
|
||||
// * label: the visible label used for this field
|
||||
// * type: the type of the data
|
||||
// * id: a unique identifer for this field- usually this should match the key in the documents hash
|
||||
// * label: (optional: defaults to id) the visible label used for this field
|
||||
// * type: (optional: defaults to string) the type of the data in this field. Should be a string as per type names defined by ElasticSearch - see Types list on <http://www.elasticsearch.org/guide/reference/mapping/>
|
||||
// * format: (optional) used to indicate how the data should be formatted. For example:
|
||||
// * type=date, format=yyyy-mm-dd
|
||||
// * type=float, format=percentage
|
||||
// * type=float, format='###,###.##'
|
||||
// * is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).
|
||||
//
|
||||
// Following additional instance properties:
|
||||
//
|
||||
// @property {Function} renderer: a function to render the data for this field.
|
||||
// Signature: function(value, field, doc) where value is the value of this
|
||||
// cell, field is corresponding field object and document is the document
|
||||
// object. Note that implementing functions can ignore arguments (e.g.
|
||||
// function(value) would be a valid formatter function).
|
||||
//
|
||||
// @property {Function} deriver: a function to derive/compute the value of data
|
||||
// in this field as a function of this field's value (if any) and the current
|
||||
// document, its signature and behaviour is the same as for renderer. Use of
|
||||
// this function allows you to define an entirely new value for data in this
|
||||
// field. This provides support for a) 'derived/computed' fields: i.e. fields
|
||||
// whose data are functions of the data in other fields b) transforming the
|
||||
// value of this field prior to rendering.
|
||||
my.Field = Backbone.Model.extend({
|
||||
// ### defaults - define default values
|
||||
defaults: {
|
||||
id: null,
|
||||
label: null,
|
||||
type: 'String'
|
||||
type: 'string',
|
||||
format: null,
|
||||
is_derived: false
|
||||
},
|
||||
initialize: function(data) {
|
||||
// ### initialize
|
||||
//
|
||||
// @param {Object} data: standard Backbone model attributes
|
||||
//
|
||||
// @param {Object} options: renderer and/or deriver functions.
|
||||
initialize: function(data, options) {
|
||||
// if a hash not passed in the first argument throw error
|
||||
if ('0' in data) {
|
||||
throw new Error('Looks like you did not pass a proper hash with id to Field constructor');
|
||||
@ -136,6 +182,10 @@ my.Field = Backbone.Model.extend({
|
||||
if (this.attributes.label == null) {
|
||||
this.set({label: this.id});
|
||||
}
|
||||
if (options) {
|
||||
this.renderer = options.renderer;
|
||||
this.deriver = options.deriver;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -8,16 +8,12 @@ this.recline.View = this.recline.View || {};
|
||||
//
|
||||
// Provides a tabular view on a Dataset.
|
||||
//
|
||||
// Initialize it with a recline.Dataset object.
|
||||
//
|
||||
// Additional options passed in second arguments. Options:
|
||||
//
|
||||
// * cellRenderer: function used to render individual cells. See DataGridRow for more.
|
||||
// Initialize it with a `recline.Model.Dataset`.
|
||||
my.DataGrid = Backbone.View.extend({
|
||||
tagName: "div",
|
||||
className: "data-table-container",
|
||||
className: "recline-grid-container",
|
||||
|
||||
initialize: function(modelEtc, options) {
|
||||
initialize: function(modelEtc) {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
_.bindAll(this, 'render');
|
||||
@ -26,7 +22,6 @@ my.DataGrid = Backbone.View.extend({
|
||||
this.model.currentDocuments.bind('remove', this.render);
|
||||
this.state = {};
|
||||
this.hiddenFields = [];
|
||||
this.options = options;
|
||||
},
|
||||
|
||||
events: {
|
||||
@ -151,7 +146,7 @@ my.DataGrid = Backbone.View.extend({
|
||||
// ======================================================
|
||||
// #### Templating
|
||||
template: ' \
|
||||
<table class="data-table table-striped table-condensed" cellspacing="0"> \
|
||||
<table class="recline-grid table-striped table-condensed" cellspacing="0"> \
|
||||
<thead> \
|
||||
<tr> \
|
||||
{{#notEmpty}} \
|
||||
@ -210,9 +205,7 @@ my.DataGrid = Backbone.View.extend({
|
||||
model: doc,
|
||||
el: tr,
|
||||
fields: self.fields
|
||||
},
|
||||
self.options
|
||||
);
|
||||
});
|
||||
newView.render();
|
||||
});
|
||||
this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0));
|
||||
@ -226,14 +219,6 @@ my.DataGrid = Backbone.View.extend({
|
||||
//
|
||||
// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.
|
||||
//
|
||||
// Additional options can be passed in a second hash argument. Options:
|
||||
//
|
||||
// * cellRenderer: function to render cells. Signature: function(value,
|
||||
// field, doc) where value is the value of this cell, field is
|
||||
// corresponding field object and document is the document object. Note
|
||||
// that implementing functions can ignore arguments (e.g.
|
||||
// function(value) would be a valid cellRenderer function).
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// <pre>
|
||||
@ -241,22 +226,12 @@ my.DataGrid = Backbone.View.extend({
|
||||
// model: dataset-document,
|
||||
// el: dom-element,
|
||||
// fields: mydatasets.fields // a FieldList object
|
||||
// }, {
|
||||
// cellRenderer: my-cell-renderer-function
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
// </pre>
|
||||
my.DataGridRow = Backbone.View.extend({
|
||||
initialize: function(initData, options) {
|
||||
initialize: function(initData) {
|
||||
_.bindAll(this, 'render');
|
||||
this._fields = initData.fields;
|
||||
if (options && options.cellRenderer) {
|
||||
this._cellRenderer = options.cellRenderer;
|
||||
} else {
|
||||
this._cellRenderer = function(value) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
this.el = $(this.el);
|
||||
this.model.bind('change', this.render);
|
||||
},
|
||||
@ -291,7 +266,7 @@ my.DataGridRow = Backbone.View.extend({
|
||||
var cellData = this._fields.map(function(field) {
|
||||
return {
|
||||
field: field.id,
|
||||
value: self._cellRenderer(doc.get(field.id), field, doc)
|
||||
value: doc.getFieldValue(field)
|
||||
}
|
||||
})
|
||||
return { id: this.id, cells: cellData }
|
||||
|
||||
28
src/view.js
28
src/view.js
@ -54,7 +54,7 @@ this.recline.View = this.recline.View || {};
|
||||
// FlotGraph subview.
|
||||
my.DataExplorer = Backbone.View.extend({
|
||||
template: ' \
|
||||
<div class="data-explorer"> \
|
||||
<div class="recline-data-explorer"> \
|
||||
<div class="alert-messages"></div> \
|
||||
\
|
||||
<div class="header"> \
|
||||
@ -66,6 +66,10 @@ my.DataExplorer = Backbone.View.extend({
|
||||
<div class="recline-results-info"> \
|
||||
Results found <span class="doc-count">{{docCount}}</span> \
|
||||
</div> \
|
||||
<div class="menu-right"> \
|
||||
<a href="#" class="btn" data-action="filters">Filters</a> \
|
||||
<a href="#" class="btn" data-action="facets">Facets</a> \
|
||||
</div> \
|
||||
<div class="query-editor-here" style="display:inline;"></div> \
|
||||
<div class="clearfix"></div> \
|
||||
</div> \
|
||||
@ -78,6 +82,9 @@ my.DataExplorer = Backbone.View.extend({
|
||||
</div> \
|
||||
</div> \
|
||||
',
|
||||
events: {
|
||||
'click .menu-right a': 'onMenuClick'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
@ -174,10 +181,12 @@ my.DataExplorer = Backbone.View.extend({
|
||||
var filterEditor = new my.FilterEditor({
|
||||
model: this.model.queryState
|
||||
});
|
||||
this.$filterEditor = filterEditor.el;
|
||||
this.el.find('.header').append(filterEditor.el);
|
||||
var facetViewer = new my.FacetViewer({
|
||||
model: this.model
|
||||
});
|
||||
this.$facetViewer = facetViewer.el;
|
||||
this.el.find('.header').append(facetViewer.el);
|
||||
},
|
||||
|
||||
@ -208,6 +217,16 @@ my.DataExplorer = Backbone.View.extend({
|
||||
view.view.el.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onMenuClick: function(e) {
|
||||
e.preventDefault();
|
||||
var action = $(e.target).attr('data-action');
|
||||
if (action === 'filters') {
|
||||
this.$filterEditor.show();
|
||||
} else if (action === 'facets') {
|
||||
this.$facetViewer.show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -290,7 +309,8 @@ my.FilterEditor = Backbone.View.extend({
|
||||
</div> \
|
||||
{{/termFilters}} \
|
||||
</div> \
|
||||
<div class="span2"> \
|
||||
<div class="span4"> \
|
||||
<p>To add a filter use the column menu in the grid view.</p> \
|
||||
<button type="submit" class="btn">Update</button> \
|
||||
</div> \
|
||||
</form> \
|
||||
@ -514,7 +534,7 @@ my.notify = function(message, options) {
|
||||
{{/loader}} \
|
||||
</div>';
|
||||
var _templated = $.mustache(_template, tmplData);
|
||||
_templated = $(_templated).appendTo($('.data-explorer .alert-messages'));
|
||||
_templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
|
||||
if (!options.persist) {
|
||||
setTimeout(function() {
|
||||
$(_templated).fadeOut(1000, function() {
|
||||
@ -528,7 +548,7 @@ my.notify = function(message, options) {
|
||||
//
|
||||
// Clear all existing notifications
|
||||
my.clearNotifications = function() {
|
||||
var $notifications = $('.data-explorer .alert-messages .alert');
|
||||
var $notifications = $('.recline-data-explorer .alert-messages .alert');
|
||||
$notifications.remove();
|
||||
}
|
||||
|
||||
|
||||
@ -38,6 +38,37 @@ test('Field: basics', function () {
|
||||
equal('XX', out[0].label);
|
||||
});
|
||||
|
||||
test('Field: deriver and renderer', function () {
|
||||
var doc = new recline.Model.Document({x: 123});
|
||||
var cellRenderer = function(value, field) {
|
||||
return '<span class="field-' + field.id + '">' + value + '</span>';
|
||||
}
|
||||
var deriver = function(val, field, doc) {
|
||||
return doc.get('x') * 2
|
||||
}
|
||||
|
||||
var field = new recline.Model.Field({id: 'computed', is_derived: true}, {
|
||||
deriver: deriver
|
||||
});
|
||||
var out = doc.getFieldValue(field);
|
||||
var exp = 246;
|
||||
equal(out, exp);
|
||||
|
||||
var field = new recline.Model.Field({id: 'x'}, {
|
||||
renderer: cellRenderer
|
||||
});
|
||||
var out = doc.getFieldValue(field);
|
||||
var exp = '<span class="field-x">123</span>'
|
||||
equal(out, exp);
|
||||
|
||||
var field = new recline.Model.Field({id: 'computed'}, {
|
||||
renderer: cellRenderer,
|
||||
deriver: deriver
|
||||
});
|
||||
var out = doc.getFieldValue(field);
|
||||
var exp = '<span class="field-computed">246</span>'
|
||||
equal(out, exp);
|
||||
});
|
||||
|
||||
// =================================
|
||||
// Dataset
|
||||
|
||||
@ -20,20 +20,6 @@ test('new DataGridRow View', function () {
|
||||
var tds = $el.find('td');
|
||||
equal(tds.length, 3);
|
||||
equal($(tds[1]).attr('data-field'), 'a');
|
||||
|
||||
var view = new recline.View.DataGridRow({
|
||||
model: doc
|
||||
, el: $el
|
||||
, fields: new recline.Model.FieldList([{id: 'a'}, {id: 'b'}])
|
||||
},
|
||||
{
|
||||
cellRenderer: function(value, field) {
|
||||
return '<span class="field-' + field.id + '">' + value + '</span>';
|
||||
}
|
||||
});
|
||||
view.render();
|
||||
var tds = $el.find('td .data-table-cell-value');
|
||||
equal($(tds[0]).html(), '<span class="field-a">1</span>', 'Checking cellRenderer works');
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user