689 lines
105 KiB
HTML
689 lines
105 KiB
HTML
<!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-graph.html"> view-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view-map.html"> view-map.js </a> <a class="source" href="view.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></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h1>Recline Views</h1>
|
||
|
||
<p>Recline Views are Backbone Views and in keeping with normal Backbone views
|
||
are Widgets / Components displaying something in the DOM. Like all Backbone
|
||
views they have a pointer to a model or a collection and is bound to an
|
||
element.</p>
|
||
|
||
<p>Views provided by core Recline are crudely divided into two types:</p>
|
||
|
||
<ul>
|
||
<li>Dataset Views: a View intended for displaying a recline.Model.Dataset
|
||
in some fashion. Examples are the Grid, Graph and Map views.</li>
|
||
<li>Widget Views: a widget used for displaying some specific (and
|
||
smaller) aspect of a dataset or the application. Examples are
|
||
QueryEditor and FilterEditor which both provide a way for editing (a
|
||
part of) a <code>recline.Model.Query</code> associated to a Dataset.</li>
|
||
</ul>
|
||
|
||
<h2>Dataset View</h2>
|
||
|
||
<p>These views are just Backbone views with a few additional conventions:</p>
|
||
|
||
<ol>
|
||
<li>The model passed to the View should always be a recline.Model.Dataset instance</li>
|
||
<li>Views should generate their own root element rather than having it passed
|
||
in.</li>
|
||
<li>Views should apply a css class named 'recline-{view-name-lower-cased} to
|
||
the root element (and for all CSS for this view to be qualified using this
|
||
CSS class)</li>
|
||
<li>Read-only mode: CSS for this view should respect/utilize
|
||
recline-read-only class to trigger read-only behaviour (this class will
|
||
usually be set on some parent element of the view's root element.</li>
|
||
<li><p>State: state (configuration) information for the view should be stored on
|
||
an attribute named state that is an instance of a Backbone Model (or, more
|
||
speficially, be an instance of <code>recline.Model.ObjectState</code>). In addition,
|
||
a state attribute may be specified in the Hash passed to a View on
|
||
iniitialization and this information should be used to set the initial
|
||
state of the view.</p>
|
||
|
||
<p>Example of state would be the set of fields being plotted in a graph
|
||
view.</p>
|
||
|
||
<p>More information about State can be found below.</p></li>
|
||
</ol>
|
||
|
||
<p>To summarize some of this, the initialize function for a Dataset View should
|
||
look like:</p>
|
||
|
||
<pre>
|
||
initialize: {
|
||
model: {a recline.Model.Dataset instance}
|
||
// el: {do not specify - instead view should create}
|
||
state: {(optional) Object / Hash specifying initial state}
|
||
...
|
||
}
|
||
</pre>
|
||
|
||
<p>Note: Dataset Views in core Recline have a common layout on disk as
|
||
follows, where ViewName is the named of View class:</p>
|
||
|
||
<pre>
|
||
src/view-{lower-case-ViewName}.js
|
||
css/{lower-case-ViewName}.css
|
||
test/view-{lower-case-ViewName}.js
|
||
</pre>
|
||
|
||
<h3>State</h3>
|
||
|
||
<p>State information exists in order to support state serialization into the
|
||
url or elsewhere and reloading of application from a stored state.</p>
|
||
|
||
<p>State is available not only for individual views (as described above) but
|
||
for the dataset (e.g. the current query). For an example of pulling together
|
||
state from across multiple components see <code>recline.View.DataExplorer</code>.</p>
|
||
|
||
<h3>Writing your own Views</h3>
|
||
|
||
<p>See the existing Views.</p>
|
||
|
||
<hr /> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Standard JS module setup</p> </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>
|
||
<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-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h2>DataExplorer</h2>
|
||
|
||
<p>The primary view for the entire application. Usage:</p>
|
||
|
||
<pre>
|
||
var myExplorer = new model.recline.DataExplorer({
|
||
model: {{recline.Model.Dataset instance}}
|
||
el: {{an existing dom element}}
|
||
views: {{dataset views}}
|
||
state: {{state configuration -- see below}}
|
||
});
|
||
</pre>
|
||
|
||
<h3>Parameters</h3>
|
||
|
||
<p><strong>model</strong>: (required) recline.model.Dataset instance.</p>
|
||
|
||
<p><strong>el</strong>: (required) DOM element to bind to. NB: the element already
|
||
being in the DOM is important for rendering of some subviews (e.g.
|
||
Graph).</p>
|
||
|
||
<p><strong>views</strong>: (optional) the dataset views (Grid, Graph etc) for
|
||
DataExplorer to show. This is an array of view hashes. If not provided
|
||
initialize with (recline.View.)Grid, Graph, and Map views (with obvious id
|
||
and labels!).</p>
|
||
|
||
<pre>
|
||
var views = [
|
||
{
|
||
id: 'grid', // used for routing
|
||
label: 'Grid', // used for view switcher
|
||
view: new recline.View.Grid({
|
||
model: dataset
|
||
})
|
||
},
|
||
{
|
||
id: 'graph',
|
||
label: 'Graph',
|
||
view: new recline.View.Graph({
|
||
model: dataset
|
||
})
|
||
}
|
||
];
|
||
</pre>
|
||
|
||
<p><strong>state</strong>: standard state config for this view. This state is slightly
|
||
special as it includes config of many of the subviews.</p>
|
||
|
||
<pre>
|
||
state = {
|
||
query: {dataset query state - see dataset.queryState object}
|
||
view-{id1}: {view-state for this view}
|
||
view-{id2}: {view-state for }
|
||
...
|
||
// Explorer
|
||
currentView: id of current view (defaults to first view if not specified)
|
||
readOnly: (default: false) run in read-only mode
|
||
}
|
||
</pre>
|
||
|
||
<p>Note that at present we do <em>not</em> serialize information about the actual set
|
||
of views in use -- e.g. those specified by the views argument -- but instead
|
||
expect either that the default views are fine or that the client to have
|
||
initialized the DataExplorer with the relevant views themselves.</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="recline-data-explorer"> \</span>
|
||
<span class="s1"> <div class="alert-messages"></div> \</span>
|
||
<span class="s1"> \</span>
|
||
<span class="s1"> <div class="header"> \</span>
|
||
<span class="s1"> <ul class="navigation"> \</span>
|
||
<span class="s1"> {{#views}} \</span>
|
||
<span class="s1"> <li><a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \</span>
|
||
<span class="s1"> {{/views}} \</span>
|
||
<span class="s1"> </ul> \</span>
|
||
<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>
|
||
<span class="s1"> <div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; "> \</span>
|
||
<span class="s1"> <div class="dialog-frame" style="width: 700px; visibility: visible; "> \</span>
|
||
<span class="s1"> <div class="dialog-content dialog-border"></div> \</span>
|
||
<span class="s1"> </div> \</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 .menu-right a'</span><span class="o">:</span> <span class="s1">'_onMenuClick'</span><span class="p">,</span>
|
||
<span class="s1">'click .navigation a'</span><span class="o">:</span> <span class="s1">'_onSwitchView'</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>
|
||
<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">_setupState</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">state</span><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> <p>Hash of 'page' views (i.e. those for whole page) keyed by page name</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">views</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">views</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">pageViews</span> <span class="o">=</span> <span class="p">[{</span>
|
||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'grid'</span><span class="p">,</span>
|
||
<span class="nx">label</span><span class="o">:</span> <span class="s1">'Grid'</span><span class="p">,</span>
|
||
<span class="nx">view</span><span class="o">:</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Grid</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">state</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'view-grid'</span><span class="p">)</span>
|
||
<span class="p">}),</span>
|
||
<span class="p">},</span> <span class="p">{</span>
|
||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'graph'</span><span class="p">,</span>
|
||
<span class="nx">label</span><span class="o">:</span> <span class="s1">'Graph'</span><span class="p">,</span>
|
||
<span class="nx">view</span><span class="o">:</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Graph</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">state</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'view-graph'</span><span class="p">)</span>
|
||
<span class="p">}),</span>
|
||
<span class="p">},</span> <span class="p">{</span>
|
||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'map'</span><span class="p">,</span>
|
||
<span class="nx">label</span><span class="o">:</span> <span class="s1">'Map'</span><span class="p">,</span>
|
||
<span class="nx">view</span><span class="o">:</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Map</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">state</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'view-map'</span><span class="p">)</span>
|
||
<span class="p">}),</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> <p>these must be called after pageViews are created</p> </td> <td class="code"> <div class="highlight"><pre> <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">_bindStateChanges</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> <p>now do updates based on state (need to come after render)</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'readOnly'</span><span class="p">))</span> <span class="p">{</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">setReadOnly</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'currentView'</span><span class="p">))</span> <span class="p">{</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'currentView'</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">updateNav</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">();</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">setupRouting</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">'query:start'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Loading data'</span><span class="p">,</span> <span class="p">{</span><span class="nx">loader</span><span class="o">:</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">bind</span><span class="p">(</span><span class="s1">'query:done'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span><span class="p">();</span>
|
||
<span class="nx">self</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">'.doc-count'</span><span class="p">).</span><span class="nx">text</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">docCount</span> <span class="o">||</span> <span class="s1">'Unknown'</span><span class="p">);</span>
|
||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Data loaded'</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</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>update navigation</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||
<span class="nx">qs</span><span class="p">.</span><span class="nx">reclineQuery</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</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">toJSON</span><span class="p">());</span>
|
||
<span class="kd">var</span> <span class="nx">out</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">qs</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>self.router.navigate(out);</p> </td> <td class="code"> <div class="highlight"><pre> <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">'query:fail'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span><span class="p">();</span>
|
||
<span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">msg</span> <span class="o">=</span> <span class="nx">error</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="k">typeof</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'object'</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">msg</span> <span class="o">=</span> <span class="nx">error</span><span class="p">.</span><span class="nx">title</span> <span class="o">+</span> <span class="s1">': '</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">msg</span> <span class="o">+=</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||
<span class="nx">msg</span> <span class="o">=</span> <span class="s1">'There was an error querying the backend'</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">msg</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">persist</span><span class="o">:</span> <span class="kc">true</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>retrieve basic data like fields etc
|
||
note this.model and dataset returned are the same</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fetch</span><span class="p">()</span>
|
||
<span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">dataset</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">query</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">get</span><span class="p">(</span><span class="s1">'query'</span><span class="p">));</span>
|
||
<span class="p">})</span>
|
||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||
<span class="p">});</span>
|
||
<span class="p">},</span>
|
||
|
||
<span class="nx">setReadOnly</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="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'recline-read-only'</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">toTemplateJSON</span><span class="p">();</span>
|
||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">views</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">;</span>
|
||
<span class="kd">var</span> <span class="nx">template</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="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">html</span><span class="p">(</span><span class="nx">template</span><span class="p">);</span>
|
||
<span class="kd">var</span> <span class="nx">$dataViewContainer</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">'.data-view-container'</span><span class="p">);</span>
|
||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">,</span> <span class="nx">pageName</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">$dataViewContainer</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><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="p">});</span>
|
||
<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">'.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">$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>
|
||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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>Default route
|
||
this.router.route(/^(\?.<em>)?$/, this.pageViews[0].id, function(queryString) {
|
||
self.updateNav(self.pageViews[0].id, queryString);
|
||
});
|
||
$.each(this.pageViews, function(idx, view) {
|
||
self.router.route(/^([^?]+)(\?.</em>)?/, 'view', function(viewId, queryString) {
|
||
self.updateNav(viewId, queryString);
|
||
});
|
||
});</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="sr">/.*/</span><span class="p">,</span> <span class="s1">'view'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="p">});</span>
|
||
<span class="p">},</span>
|
||
|
||
<span class="nx">updateNav</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pageName</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">find</span><span class="p">(</span><span class="s1">'.navigation li'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">'active'</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">'.navigation li a'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">'disabled'</span><span class="p">);</span>
|
||
<span class="kd">var</span> <span class="nx">$el</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">'.navigation li a[data-view="'</span> <span class="o">+</span> <span class="nx">pageName</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">);</span>
|
||
<span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
||
<span class="nx">$el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'disabled'</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>show the specific page</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">pageName</span><span class="p">)</span> <span class="p">{</span>
|
||
<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">show</span><span class="p">();</span>
|
||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'view:show'</span><span class="p">);</span>
|
||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||
<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="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'view: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="nx">_onSwitchView</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">viewName</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-view'</span><span class="p">);</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="nx">viewName</span><span class="p">);</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">currentView</span><span class="o">:</span> <span class="nx">viewName</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>create a state object for this view and do the job of</p>
|
||
|
||
<p>a) initializing it from both data passed in and other sources (e.g. hash url)</p>
|
||
|
||
<p>b) ensure the state object is updated in responese to changes in subviews, query etc.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupState</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initialState</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></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>get data from the query string / hash url plus some defaults</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">reclineQuery</span><span class="p">;</span>
|
||
<span class="nx">query</span> <span class="o">=</span> <span class="nx">query</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">query</span><span class="p">)</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">queryState</span><span class="p">.</span><span class="nx">toJSON</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>backwards compatability (now named view-graph but was named graph)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">graphState</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">[</span><span class="s1">'view-graph'</span><span class="p">]</span> <span class="o">||</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">graph</span><span class="p">;</span>
|
||
<span class="nx">graphState</span> <span class="o">=</span> <span class="nx">graphState</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">graphState</span><span class="p">)</span> <span class="o">:</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>now get default data + hash url plus initial state and initial our state object with it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||
<span class="nx">query</span><span class="o">:</span> <span class="nx">query</span><span class="p">,</span>
|
||
<span class="s1">'view-graph'</span><span class="o">:</span> <span class="nx">graphState</span><span class="p">,</span>
|
||
<span class="nx">backend</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">backend</span><span class="p">.</span><span class="nx">__type__</span><span class="p">,</span>
|
||
<span class="nx">dataset</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">currentView</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||
<span class="nx">readOnly</span><span class="o">:</span> <span class="kc">false</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">initialState</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="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">stateData</span><span class="p">);</span>
|
||
<span class="p">},</span>
|
||
|
||
<span class="nx">_bindStateChanges</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">self</span> <span class="o">=</span> <span class="k">this</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>finally ensure we update our state object when state of sub-object changes so that state is always up to date</p> </td> <td class="code"> <div class="highlight"><pre> <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">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</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">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">query</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">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()});</span>
|
||
<span class="p">});</span>
|
||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pageView</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span> <span class="o">&&</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">bind</span><span class="p">)</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="s1">'view-'</span> <span class="o">+</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</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">set</span><span class="p">(</span><span class="nx">update</span><span class="p">);</span>
|
||
<span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</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="kd">function</span><span class="p">()</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="s1">'view-'</span> <span class="o">+</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</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">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="p">});</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>DataExplorer.restore</h3>
|
||
|
||
<p>Restore a DataExplorer instance from a serialized state including the associated dataset</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="p">.</span><span class="nx">restore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="kd">var</span> <span class="nx">dataset</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Dataset</span><span class="p">.</span><span class="nx">restore</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span>
|
||
<span class="kd">var</span> <span class="nx">explorer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataExplorer</span><span class="p">({</span>
|
||
<span class="nx">model</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">,</span>
|
||
<span class="nx">state</span><span class="o">:</span> <span class="nx">state</span>
|
||
<span class="p">});</span>
|
||
<span class="k">return</span> <span class="nx">explorer</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>
|
||
<span class="s1"> <form action="" method="GET" class="form-inline"> \</span>
|
||
<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> \</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><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="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">'render'</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="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||
<span class="p">},</span>
|
||
<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="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>
|
||
<span class="kd">var</span> <span class="nx">$el</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">newFrom</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">'prev'</span><span class="p">))</span> <span class="p">{</span>
|
||
<span class="nx">newFrom</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="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</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">'size'</span><span class="p">));</span>
|
||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||
<span class="nx">newFrom</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>
|
||
<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">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>
|
||
<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>
|
||
<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-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</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-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</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>
|
||
<span class="s1"> <a class="close js-hide" href="#">&times;</a> \</span>
|
||
<span class="s1"> <div class="facets row"> \</span>
|
||
<span class="s1"> <div class="span1"> \</span>
|
||
<span class="s1"> <h3>Facets</h3> \</span>
|
||
<span class="s1"> </div> \</span>
|
||
<span class="s1"> {{#facets}} \</span>
|
||
<span class="s1"> <div class="facet-summary span2 dropdown" data-facet="{{id}}"> \</span>
|
||
<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><a class="facet-choice js-facet-filter" data-value="{{term}}">{{term}} ({{count}})</a></li> \</span>
|
||
<span class="s1"> {{/terms}} \</span>
|
||
<span class="s1"> {{#entries}} \</span>
|
||
<span class="s1"> <li><a class="facet-choice js-facet-filter" data-value="{{time}}">{{term}} ({{count}})</a></li> \</span>
|
||
<span class="s1"> {{/entries}} \</span>
|
||
<span class="s1"> </ul> \</span>
|
||
<span class="s1"> </div> \</span>
|
||
<span class="s1"> {{/facets}} \</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-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>
|
||
<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">facets</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'all'</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">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'all'</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="p">{</span>
|
||
<span class="nx">facets</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">facets</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span>
|
||
<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="nx">tmplData</span><span class="p">.</span><span class="nx">facets</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">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">facet</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">if</span> <span class="p">(</span><span class="nx">facet</span><span class="p">.</span><span class="nx">_type</span> <span class="o">===</span> <span class="s1">'date_histogram'</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">facet</span><span class="p">.</span><span class="nx">entries</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">facet</span><span class="p">.</span><span class="nx">entries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">entry</span><span class="p">.</span><span class="nx">term</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">time</span><span class="p">).</span><span class="nx">toDateString</span><span class="p">();</span>
|
||
<span class="k">return</span> <span class="nx">entry</span><span class="p">;</span>
|
||
<span class="p">});</span>
|
||
<span class="p">}</span>
|
||
<span class="k">return</span> <span class="nx">facet</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-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</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>
|
||
<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">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-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</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-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</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>
|
||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="p">{</span>
|
||
<span class="nx">path</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
|
||
<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-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</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>
|
||
<span class="kd">var</span> <span class="nx">urlParams</span> <span class="o">=</span> <span class="p">{},</span>
|
||
<span class="nx">e</span><span class="p">,</span> <span class="nx">d</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="nx">unescape</span><span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\+/g</span><span class="p">,</span> <span class="s2">" "</span><span class="p">));</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">r</span> <span class="o">=</span> <span class="sr">/([^&=]+)=?([^&]*)/g</span><span class="p">;</span>
|
||
|
||
<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-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</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-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</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-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</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>
|
||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'object'</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="nx">value</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="nx">items</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">key</span> <span class="o">+</span> <span class="s1">'='</span> <span class="o">+</span> <span class="nx">value</span><span class="p">);</span>
|
||
<span class="p">});</span>
|
||
<span class="nx">queryString</span> <span class="o">+=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'&'</span><span class="p">);</span>
|
||
<span class="k">return</span> <span class="nx">queryString</span><span class="p">;</span>
|
||
<span class="p">};</span>
|
||
|
||
<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-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</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>
|
||
<span class="p">};</span>
|
||
|
||
<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-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <h2>notify</h2>
|
||
|
||
<p>Create a notification (a div.alert in div.alert-messsages) using provide messages and options. Options are:</p>
|
||
|
||
<ul>
|
||
<li>category: warning (default), success, error</li>
|
||
<li>persist: if true alert is persistent, o/w hidden after 3s (default = false)</li>
|
||
<li>loader: if true show loading spinner</li>
|
||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">notify</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">options</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">options</span><span class="p">)</span> <span class="nx">options</span> <span class="o">=</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="nx">msg</span><span class="o">:</span> <span class="nx">message</span><span class="p">,</span>
|
||
<span class="nx">category</span><span class="o">:</span> <span class="s1">'warning'</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">options</span><span class="p">);</span>
|
||
<span class="kd">var</span> <span class="nx">_template</span> <span class="o">=</span> <span class="s1">' \</span>
|
||
<span class="s1"> <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \</span>
|
||
<span class="s1"> {{msg}} \</span>
|
||
<span class="s1"> {{#loader}} \</span>
|
||
<span class="s1"> <span class="notification-loader">&nbsp;</span> \</span>
|
||
<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">'.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>
|
||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
|
||
<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-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</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">'.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>
|
||
|
||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||
|
||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html> |