Merge branch 'master' into gh-pages
This commit is contained in:
Rufus Pollock
commit
60e72b863a
@ -4,7 +4,7 @@ toolkit, all in pure javascript and html.
|
||||
|
||||
Designed for standalone use or as a library to integrate into your own app.
|
||||
|
||||
Live demo: http://okfnlabs.org/recline/demo/
|
||||
<h3><a href="http://okfnlabs.org/recline/">Recline Website - including Overview, Documentation, Demos etc</a></h3>
|
||||
|
||||
|
||||
## Features
|
||||
@ -15,21 +15,16 @@ Live demo: http://okfnlabs.org/recline/demo/
|
||||
* View and edit your data in clean tabular interface
|
||||
* Bulk update/clean your data using an easy scripting UI
|
||||
* Visualize your data
|
||||
* And more ... see <http://okfnlabs.org/recline/>
|
||||
|
||||
|
||||
|
||||
|
||||
## Demo App
|
||||
|
||||
Open demo/index.html in your favourite browser.
|
||||
|
||||
|
||||
## Developer Notes
|
||||
|
||||
Running the tests by opening `test/index.html` in your browser.
|
||||
|
||||
|
||||
|
||||
## Copyright and License
|
||||
|
||||
Copyright 2011 Max Ogden and Rufus Pollock.
|
||||
|
||||
@ -28,8 +28,6 @@
|
||||
<script type="text/javascript" src="../src/model.js"></script>
|
||||
<script type="text/javascript" src="../src/backend.js"></script>
|
||||
<script type="text/javascript" src="../src/view.js"></script>
|
||||
<script type="text/javascript" src="../src/view-data-explorer.js"></script>
|
||||
<script type="text/javascript" src="../src/view-data-table.js"></script>
|
||||
<script type="text/javascript" src="../src/view-flot-graph.js"></script>
|
||||
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
|
||||
@ -2,9 +2,26 @@ $(function() {
|
||||
var $el = $('<div />');
|
||||
$el.appendTo($('.data-explorer-here'));
|
||||
var dataset = demoDataset();
|
||||
var views = [
|
||||
{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new recline.View.DataTable({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new recline.View.FlotGraph({
|
||||
model: dataset
|
||||
})
|
||||
}
|
||||
];
|
||||
window.dataExplorer = new recline.View.DataExplorer({
|
||||
el: $el
|
||||
, model: dataset
|
||||
, views: views
|
||||
});
|
||||
Backbone.history.start();
|
||||
setupLoadFromWebstore(function(dataset) {
|
||||
@ -34,8 +51,8 @@ function demoDataset() {
|
||||
title: 'My Test Dataset'
|
||||
, name: '1-my-test-dataset'
|
||||
, id: datasetId
|
||||
, headers: ['x', 'y', 'z']
|
||||
},
|
||||
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}],
|
||||
documents: [
|
||||
{id: 0, x: 1, y: 2, z: 3}
|
||||
, {id: 1, x: 2, y: 4, z: 6}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html> <html> <head> <title>backend.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.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> <h1>Recline Backends</h1>
|
||||
<!DOCTYPE html> <html> <head> <title>backend.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.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> <h1>Recline Backends</h1>
|
||||
|
||||
<p>Backends are connectors to backend data sources and stores</p>
|
||||
|
||||
@ -41,7 +41,7 @@ purposes.</p>
|
||||
<p>To use it you should provide in your constructor data:</p>
|
||||
|
||||
<ul>
|
||||
<li>metadata (including headers array)</li>
|
||||
<li>metadata (including fields array)</li>
|
||||
<li><p>documents: list of hashes, each hash being one doc. A doc <em>must</em> have an id attribute which is unique.</p>
|
||||
|
||||
<p>Example:</p>
|
||||
@ -52,9 +52,9 @@ var backend = Backend();
|
||||
backend.addDataset({
|
||||
metadata: {
|
||||
id: 'my-id',
|
||||
title: 'My Title',
|
||||
headers: ['x', 'y', 'z'],
|
||||
title: 'My Title'
|
||||
},
|
||||
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}],
|
||||
documents: [
|
||||
{id: 0, x: 1, y: 2, z: 3},
|
||||
{id: 1, x: 2, y: 4, z: 6}
|
||||
@ -79,6 +79,7 @@ etc ...
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">==</span> <span class="s1">'Dataset'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">rawDataset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">datasets</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</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">rawDataset</span><span class="p">.</span><span class="nx">metadata</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">reset</span><span class="p">(</span><span class="nx">rawDataset</span><span class="p">.</span><span class="nx">fields</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="nx">rawDataset</span><span class="p">.</span><span class="nx">documents</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
@ -141,12 +142,12 @@ etc ...
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="nx">wrapInTimeout</span><span class="p">(</span><span class="nx">jqxhr</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">schema</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">headers</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">schema</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">;</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">headers</span><span class="o">:</span> <span class="nx">headers</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldData</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">schema</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">item</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
|
||||
<span class="k">delete</span> <span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">item</span><span class="p">;</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">reset</span><span class="p">(</span><span class="nx">fieldData</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="nx">schema</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">jqxhr</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
@ -214,9 +215,10 @@ etc ...
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="nx">wrapInTimeout</span><span class="p">(</span><span class="nx">jqxhr</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">results</span><span class="p">)</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">headers</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">fields</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">reset</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">};</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">jqxhr</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">arguments</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -276,7 +278,10 @@ var dataset = new recline.Model.Dataset({
|
||||
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</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">'url'</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">result</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">gdocsToJavascript</span><span class="p">(</span><span class="nx">d</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="s1">'headers'</span><span class="o">:</span> <span class="nx">result</span><span class="p">.</span><span class="nx">header</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>cache data onto dataset (we have loaded whole gdoc it seems!)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">model</span><span class="p">.</span><span class="nx">_dataCache</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">data</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">reset</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">field</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">};</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>cache data onto dataset (we have loaded whole gdoc it seems!)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">model</span><span class="p">.</span><span class="nx">_dataCache</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span> <span class="p">}</span>
|
||||
@ -284,7 +289,7 @@ var dataset = new recline.Model.Dataset({
|
||||
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">dataset</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">fields</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'headers'</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>zip the field headers with the data rows to produce js objs
|
||||
<span class="kd">var</span> <span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">dataset</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="s1">'id'</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>zip the fields with the data rows to produce js objs
|
||||
TODO: factor this out as a common method with other backends</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">objs</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">dataset</span><span class="p">.</span><span class="nx">_dataCache</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">obj</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">_</span><span class="p">.</span><span class="nx">zip</span><span class="p">(</span><span class="nx">fields</span><span class="p">,</span> <span class="nx">d</span><span class="p">),</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">x</span><span class="p">[</span><span class="mi">0</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">x</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> <span class="p">})</span>
|
||||
@ -296,9 +301,9 @@ TODO: factor this out as a common method with other backends</p> </t
|
||||
<span class="nx">gdocsToJavascript</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="cm">/*</span>
|
||||
<span class="cm"> :options: (optional) optional argument dictionary:</span>
|
||||
<span class="cm"> columnsToUse: list of columns to use (specified by header names)</span>
|
||||
<span class="cm"> columnsToUse: list of columns to use (specified by field names)</span>
|
||||
<span class="cm"> colTypes: dictionary (with column names as keys) specifying types (e.g. range, percent for use in conversion).</span>
|
||||
<span class="cm"> :return: tabular data object (hash with keys: header and data).</span>
|
||||
<span class="cm"> :return: tabular data object (hash with keys: field and data).</span>
|
||||
|
||||
<span class="cm"> Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.</span>
|
||||
<span class="cm"> */</span>
|
||||
@ -307,25 +312,25 @@ TODO: factor this out as a common method with other backends</p> </t
|
||||
<span class="nx">options</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="s1">'header'</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="s1">'field'</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="s1">'data'</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>default is no special info on type of columns</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">colTypes</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">colTypes</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">colTypes</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">colTypes</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>either extract column headings from spreadsheet directly, or used supplied ones</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">columnsToUse</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>columns set to subset supplied</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">results</span><span class="p">.</span><span class="nx">header</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</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>either extract column headings from spreadsheet directly, or used supplied ones</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">columnsToUse</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>columns set to subset supplied</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>set columns to use to be all available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</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">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">k</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'gsx'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">k</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">header</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">col</span><span class="p">);</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">col</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-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>converts non numberical values that should be numerical (22.3%[string] -> 0.223[float])</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">rep</span> <span class="o">=</span> <span class="sr">/^([\d\.\-]+)\%$/</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">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">row</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">results</span><span class="p">.</span><span class="nx">header</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">results</span><span class="p">.</span><span class="nx">header</span><span class="p">[</span><span class="nx">k</span><span class="p">];</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">[</span><span class="nx">k</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">_keyname</span> <span class="o">=</span> <span class="s1">'gsx$'</span> <span class="o">+</span> <span class="nx">col</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">entry</span><span class="p">[</span><span class="nx">_keyname</span><span class="p">][</span><span class="s1">'$t'</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>if labelled as % and value contains %, convert</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">colTypes</span><span class="p">[</span><span class="nx">col</span><span class="p">]</span> <span class="o">==</span> <span class="s1">'percent'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">rep</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> <span class="p">{</span>
|
||||
|
||||
138
docs/model.html
138
docs/model.html
@ -1,72 +1,104 @@
|
||||
<!DOCTYPE html> <html> <head> <title>model.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> model.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> <h1>Recline Backbone Models</h1> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html> <html> <head> <title>model.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="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> model.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> <h1>Recline Backbone Models</h1> </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">Model</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">Model</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>A Dataset model</h2>
|
||||
|
||||
<p>Other than standard list of Backbone methods it has two important attributes:</p>
|
||||
<p>A model must have the following (Backbone) attributes:</p>
|
||||
|
||||
<ul>
|
||||
<li>fields: (aka columns) is a FieldList listing all the fields on this
|
||||
Dataset (this can be set explicitly, or, on fetch() of Dataset
|
||||
information from the backend, or as is perhaps most common on the first
|
||||
query)</li>
|
||||
<li>currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)</li>
|
||||
<li>docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Dataset'</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="nx">backend</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">backend</span> <span class="o">&&</span> <span class="nx">backend</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">==</span> <span class="nb">String</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">backends</span><span class="p">[</span><span class="nx">backend</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">currentDocuments</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">defaultQuery</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span>
|
||||
<span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="mi">0</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>this.queryState = {};</p> </td> <td class="code"> <div class="highlight"><pre> <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> <h3>getDocuments</h3>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Dataset'</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="nx">backend</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">'query'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">backend</span> <span class="o">&&</span> <span class="nx">backend</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">==</span> <span class="nb">String</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">backends</span><span class="p">[</span><span class="nx">backend</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">currentDocuments</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Query</span><span class="p">();</span>
|
||||
<span class="k">this</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="k">this</span><span class="p">.</span><span class="nx">query</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h3>query</h3>
|
||||
|
||||
<p>AJAX method with promise API to get rows (documents) from the backend.</p>
|
||||
<p>AJAX method with promise API to get documents from the backend.</p>
|
||||
|
||||
<p>It will query based on current query state (given by this.queryState)
|
||||
updated by queryObj (if provided).</p>
|
||||
|
||||
<p>Resulting DocumentList are used to reset this.currentDocuments and are
|
||||
also returned.</p>
|
||||
|
||||
<p>:param numRows: passed onto backend getDocuments.
|
||||
:param start: passed onto backend getDocuments.</p>
|
||||
|
||||
<p>this does not fit very well with Backbone setup. Backbone really expects you to know the ids of objects your are fetching (which you do in classic RESTful ajax-y world). But this paradigm does not fill well with data set up we have here.
|
||||
This also illustrates the limitations of separating the Dataset and the Backend</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryObj</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">queryState</span> <span class="o">=</span> <span class="nx">queryObj</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">defaultQuery</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</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">size</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="mi">0</span><span class="p">},</span> <span class="k">this</span><span class="p">.</span><span class="nx">queryState</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">queryState</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">rows</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">docs</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">rows</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">_doc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">dataset</span> <span class="o">=</span> <span class="nx">self</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">_doc</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">docs</span><span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</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">arguments</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">arguments</span><span class="p">);</span>
|
||||
also returned.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryObj</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">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">,</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</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="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">rows</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">docs</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">rows</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">_doc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="nx">_doc</span><span class="p">.</span><span class="nx">dataset</span> <span class="o">=</span> <span class="nx">self</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">_doc</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">docs</span><span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">currentDocuments</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">arguments</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">arguments</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toTemplateJSON</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">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">data</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">docCount</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
|
||||
<span class="nx">toTemplateJSON</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">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">data</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">docCount</span><span class="p">;</span>
|
||||
<span class="nx">data</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">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">data</span><span class="p">;</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>A Document (aka Row)</h2>
|
||||
|
||||
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'DocumentList'</span><span class="p">,</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h2>A Field (aka Column) on a Dataset</h2>
|
||||
|
||||
<p>Following attributes as standard:</p>
|
||||
|
||||
<ul>
|
||||
<li>id: a unique identifer for this field- usually this should match the key in the documents hash</li>
|
||||
<li>label: the visible label used for this field</li>
|
||||
<li>type: the type of the data</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="s1">'String'</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>In addition to normal backbone initialization via a Hash you can also
|
||||
just pass a single argument representing id to the ctor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>if a hash not passed in the first argument is set as value for key 0</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">'0'</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'Looks like you did not pass a proper hash with id to Field constructor'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h2>A Document (aka Row)</h2>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">label</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">label</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'DocumentList'</span><span class="p">,</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h2>Backend registry</h2>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Field</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h2>A Query object storing Dataset Query state</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Query</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span>
|
||||
<span class="p">,</span> <span class="nx">offset</span><span class="o">:</span> <span class="mi">0</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> <h2>Backend registry</h2>
|
||||
|
||||
<p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">}(</span><span class="nx">jQuery</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">Model</span><span class="p">));</span>
|
||||
|
||||
|
||||
213
docs/view-flot-graph.html
Normal file
213
docs/view-flot-graph.html
Normal file
@ -0,0 +1,213 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view-flot-graph.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-flot-graph.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>Graph view for a Dataset using Flot graphing library.</h2>
|
||||
|
||||
<p>Initialization arguments:</p>
|
||||
|
||||
<ul>
|
||||
<li>model: recline.Model.Dataset</li>
|
||||
<li><p>config: (optional) graph configuration hash of form:</p>
|
||||
|
||||
<p>{
|
||||
group: {column name for x-axis},
|
||||
series: [{column name for series A}, {column name series B}, ... ],
|
||||
graphType: 'line'
|
||||
}</p></li>
|
||||
</ul>
|
||||
|
||||
<p>NB: should <em>not</em> provide an el argument to the view but must let the view
|
||||
generate the element itself (you can then append view.el to the DOM.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FlotGraph</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"data-graph-container"</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="editor"> \</span>
|
||||
<span class="s1"> <div class="editor-info editor-hide-info"> \</span>
|
||||
<span class="s1"> <h3 class="action-toggle-help">Help &raquo;</h3> \</span>
|
||||
<span class="s1"> <p>To create a chart select a column (group) to use as the x-axis \</span>
|
||||
<span class="s1"> then another column (Series A) to plot against it.</p> \</span>
|
||||
<span class="s1"> <p>You can add add \</span>
|
||||
<span class="s1"> additional series by clicking the "Add series" button</p> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <form class="form-stacked"> \</span>
|
||||
<span class="s1"> <div class="clearfix"> \</span>
|
||||
<span class="s1"> <label>Graph Type</label> \</span>
|
||||
<span class="s1"> <div class="input editor-type"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> <option value="line">Line</option> \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <label>Group Column (x-axis)</label> \</span>
|
||||
<span class="s1"> <div class="input editor-group"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-series-group"> \</span>
|
||||
<span class="s1"> <div class="editor-series"> \</span>
|
||||
<span class="s1"> <label>Series <span>A (y-axis)</span></label> \</span>
|
||||
<span class="s1"> <div class="input"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons"> \</span>
|
||||
<span class="s1"> <button class="btn editor-add">Add Series</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \</span>
|
||||
<span class="s1"> <button class="editor-save">Save</button> \</span>
|
||||
<span class="s1"> <input type="hidden" class="editor-id" value="chart-1" /> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="panel graph"></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">'change form select'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .editor-add'</span><span class="o">:</span> <span class="s1">'addSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-remove-series'</span><span class="o">:</span> <span class="s1">'removeSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-toggle-help'</span><span class="o">:</span> <span class="s1">'toggleHelp'</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="nx">config</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'redraw'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>we need the model.fields to render properly</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">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">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</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">'add'</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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">configFromHash</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">graph</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">configFromHash</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">configFromHash</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">configFromHash</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</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">group</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">series</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">graphType</span><span class="o">:</span> <span class="s1">'line'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">configFromHash</span><span class="p">,</span>
|
||||
<span class="nx">config</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="nx">htmls</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="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">$</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">htmls</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> <p>now set a load of stuff up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$graph</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">'.panel.graph'</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>for use later when adding additional series
|
||||
could be simpler just to have a common template!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</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">'.editor-series'</span><span class="p">).</span><span class="nx">clone</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onEditorSubmit</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">select</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">'.editor-group select'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_getEditorData</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>update navigation
|
||||
TODO: make this less invasive (e.g. preserve other keys in query string)</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="s1">'graph'</span><span class="p">]</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">;</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span><span class="p">(</span><span class="nx">qs</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>There appear to be issues generating a Flot graph if either:</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <ul>
|
||||
<li><p>The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with</p>
|
||||
|
||||
<p>Uncaught Invalid dimensions for plot, width = 0, height = 0</p></li>
|
||||
<li>There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value' </li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">areWeVisible</span> <span class="o">=</span> <span class="o">!</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">expr</span><span class="p">.</span><span class="nx">filters</span><span class="p">.</span><span class="nx">hidden</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="mi">0</span><span class="p">]);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">&&</span> <span class="p">(</span><span class="o">!</span><span class="nx">areWeVisible</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">currentDocuments</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">return</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>create this.plot and cache it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">plot</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>only lines for the present</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'line'</span><span class="p">,</span>
|
||||
<span class="nx">name</span><span class="o">:</span> <span class="s1">'Line Chart'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">plot</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$graph</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">(),</span> <span class="nx">options</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">setData</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">());</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">resize</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">setupGrid</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">draw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">_getEditorData</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$editor</span> <span class="o">=</span> <span class="k">this</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">makeArray</span><span class="p">(</span><span class="nx">series</span><span class="p">)</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</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">'.editor-group select'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">createSeries</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>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</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">chartConfig</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">chartConfig</span><span class="p">.</span><span class="nx">series</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">seriesIndex</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">points</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">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">x</span> <span class="o">===</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">points</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">series</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">points</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="nx">field</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">series</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Public: Adds a new empty series select box to the editor.</p>
|
||||
|
||||
<p>All but the first select box will have a remove button that allows them
|
||||
to be removed.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addSeries</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">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span><span class="p">.</span><span class="nx">clone</span><span class="p">(),</span>
|
||||
<span class="nx">label</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'label'</span><span class="p">),</span>
|
||||
<span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</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">'.editor-series-group'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">' [<a href="#remove" class="action-remove-series">Remove</a>]'</span><span class="p">);</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">64</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Public: Removes a series list item from the editor.</p>
|
||||
|
||||
<p>Also updates the labels of the remaining series elements.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeSeries</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="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">parent</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">labelSpan</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">prev</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">);</span>
|
||||
<span class="nx">labelSpan</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">index</span> <span class="o">+</span> <span class="mi">65</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">onEditorSubmit</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toggleHelp</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">find</span><span class="p">(</span><span class="s1">'.editor-info'</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'editor-hide-info'</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>Private: Resets the series property to reference the select elements.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_updateSeries</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">$series</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">'.editor-series select'</span><span class="p">);</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>
|
||||
740
docs/view.html
740
docs/view.html
@ -1,33 +1,49 @@
|
||||
<!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="costco-csv-worker.html"> costco-csv-worker.js </a> <a class="source" href="costco.html"> costco.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="util.html"> util.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Views module following classic module pattern</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
|
||||
<!DOCTYPE html> <html> <head> <title>view.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.html"> backend.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<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="kd">var</span> <span class="nx">my</span> <span class="o">=</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">function</span> <span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</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="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>DataExplorer</h2>
|
||||
|
||||
<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-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</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-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>The primary view for the entire application.</p>
|
||||
<p>The primary view for the entire application. Usage:</p>
|
||||
|
||||
<p>It should be initialized with a recline.Model.Dataset object and an existing
|
||||
dom element to attach to (the existing DOM element is important for
|
||||
rendering of FlotGraph subview).</p>
|
||||
<pre>
|
||||
var myExplorer = new model.recline.DataExplorer({
|
||||
model: {{recline.Model.Dataset instance}}
|
||||
el: {{an existing dom element}}
|
||||
views: {{page views}}
|
||||
config: {{config options -- see below}}
|
||||
});
|
||||
</pre>
|
||||
|
||||
<p>To pass in configuration options use the config key in initialization hash
|
||||
e.g.</p>
|
||||
<h3>Parameters</h3>
|
||||
|
||||
<pre><code> var explorer = new DataExplorer({
|
||||
config: {...}
|
||||
})
|
||||
</code></pre>
|
||||
<p><strong>model</strong>: (required) Dataset instance.</p>
|
||||
|
||||
<p>Config options:</p>
|
||||
<p><strong>el</strong>: (required) DOM element.</p>
|
||||
|
||||
<p><strong>views</strong>: (optional) the views (Grid, Graph etc) for DataExplorer to
|
||||
show. This is an array of view hashes. If not provided
|
||||
just initialize a DataTable with id 'grid'. Example:</p>
|
||||
|
||||
<pre>
|
||||
var views = [
|
||||
{
|
||||
id: 'grid', // used for routing
|
||||
label: 'Grid', // used for view switcher
|
||||
view: new recline.View.DataTable({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new recline.View.FlotGraph({
|
||||
model: dataset
|
||||
})
|
||||
}
|
||||
];
|
||||
</pre>
|
||||
|
||||
<p><strong>config</strong>: Config options like:</p>
|
||||
|
||||
<ul>
|
||||
<li>displayCount: how many documents to display initially (default: 10)</li>
|
||||
@ -35,19 +51,21 @@ e.g.</p>
|
||||
operate in read-only mode (hiding all editing options).</li>
|
||||
</ul>
|
||||
|
||||
<p>All other views as contained in this one.</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>
|
||||
<p>NB: the element already being in the DOM is important for rendering of
|
||||
FlotGraph subview.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataExplorer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="data-explorer"> \</span>
|
||||
<span class="s1"> <div class="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"> <li class="active"><a href="#grid" class="btn">Grid</a> \</span>
|
||||
<span class="s1"> <li><a href="#graph" class="btn">Graph</a></li> \</span>
|
||||
<span class="s1"> {{#views}} \</span>
|
||||
<span class="s1"> <li><a href="#{{id}}" class="btn">{{label}}</a> \</span>
|
||||
<span class="s1"> {{/views}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> <div class="pagination"> \</span>
|
||||
<span class="s1"> <form class="display-count"> \</span>
|
||||
<span class="s1"> Showing 0 to <input name="displayCount" type="text" value="{{displayCount}}" /> of <span class="doc-count">{{docCount}}</span> \</span>
|
||||
<span class="s1"> Showing 0 to <input name="displayCount" type="text" value="{{displayCount}}" title="Edit and hit enter to change the number of rows displayed" /> of <span class="doc-count">{{docCount}}</span> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
@ -68,33 +86,57 @@ operate in read-only mode (hiding all editing options).</li>
|
||||
<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">config</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">config</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">displayCount</span><span class="o">:</span> <span class="mi">10</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="k">this</span><span class="p">.</span><span class="nx">config</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">displayCount</span><span class="o">:</span> <span class="mi">50</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">options</span><span class="p">.</span><span class="nx">config</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">config</span><span class="p">.</span><span class="nx">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></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</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">this</span><span class="p">.</span><span class="nx">pageViews</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">grid</span><span class="o">:</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataTable</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="p">,</span> <span class="nx">graph</span><span class="o">:</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FlotGraph</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="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>this 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="p">}</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</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">DataTable</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="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> <p>this 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">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></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>retrieve basic data like headers 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="nx">then</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">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="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>initialize of dataTable calls render</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">getDocuments</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">displayCount</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupRouting</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>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">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">self</span><span class="p">.</span><span class="nx">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">query</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">config</span><span class="p">.</span><span class="nx">displayCount</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="displayCount"]'</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
|
||||
<span class="kd">var</span> <span class="nx">queryObj</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">displayCount</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="k">this</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">queryObj</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="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</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>
|
||||
<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">clearNotifications</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">onDisplayCountUpdate</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">config</span><span class="p">.</span><span class="nx">displayCount</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="displayCount"]'</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">getDocuments</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">displayCount</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">query</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>
|
||||
@ -104,45 +146,40 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<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">displayCount</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">displayCount</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">el</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="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>
|
||||
<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="s1">''</span><span class="p">,</span> <span class="s1">'grid'</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">updateNav</span><span class="p">(</span><span class="s1">'grid'</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-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Default route</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="s1">''</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="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="nx">self</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="p">.</span><span class="nx">route</span><span class="p">(</span><span class="sr">/grid(\?.*)?/</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="nx">queryString</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="s1">'grid'</span><span class="p">,</span> <span class="nx">queryString</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="p">.</span><span class="nx">route</span><span class="p">(</span><span class="sr">/graph(\?.*)?/</span><span class="p">,</span> <span class="s1">'graph'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryString</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="s1">'graph'</span><span class="p">,</span> <span class="nx">queryString</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>we have to call here due to fact plot may not have been able to draw
|
||||
if it was hidden until now - see comments in FlotGraph.redraw</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">qsParsed</span> <span class="o">=</span> <span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">queryString</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="s1">'graph'</span> <span class="k">in</span> <span class="nx">qsParsed</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">chartConfig</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">qsParsed</span><span class="p">[</span><span class="s1">'graph'</span><span class="p">]);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="s1">'graph'</span><span class="p">].</span><span class="nx">chartConfig</span><span class="p">,</span> <span class="nx">chartConfig</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="s1">'graph'</span><span class="p">].</span><span class="nx">redraw</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">idx</span><span class="p">,</span> <span class="nx">view</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</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="nx">viewId</span><span class="p">,</span> <span class="nx">queryString</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="nx">viewId</span><span class="p">,</span> <span class="nx">queryString</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="nx">queryString</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="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[href=#'</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></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</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">pageViewName</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">pageViewName</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">el</span><span class="p">.</span><span class="nx">show</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></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</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="p">}</span> <span class="k">else</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">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="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>DataTable provides a tabular view on a Dataset.</p>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2>DataTable</h2>
|
||||
|
||||
<p>Provides a tabular view on a Dataset.</p>
|
||||
|
||||
<p>Initialize it with a recline.Dataset object.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataTable</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
@ -156,13 +193,15 @@ if it was hidden until now - see comments in FlotGraph.redraw</p> </
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .column-header-menu'</span><span class="o">:</span> <span class="s1">'onColumnHeaderClick'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .row-header-menu'</span><span class="o">:</span> <span class="s1">'onRowHeaderClick'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .root-header-menu'</span><span class="o">:</span> <span class="s1">'onRootHeaderClick'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .data-table-menu li a'</span><span class="o">:</span> <span class="s1">'onMenuClick'</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>TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
|
||||
<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>TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
|
||||
showDialog: function(template, data) {
|
||||
if (!data) data = {};
|
||||
util.show('dialog');
|
||||
@ -171,9 +210,9 @@ showDialog: function(template, data) {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>======================================================
|
||||
},</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>======================================================
|
||||
Column and row menus</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onColumnHeaderClick</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</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">siblings</span><span class="p">().</span><span class="nx">text</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">currentColumn</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">closest</span><span class="p">(</span><span class="s1">'.column-header'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'columnActions'</span><span class="p">,</span> <span class="s1">'data-table-menu'</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
@ -183,31 +222,40 @@ Column and row menus</p> </td> <td class="code">
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'rowActions'</span><span class="p">,</span> <span class="s1">'data-table-menu'</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onRootHeaderClick</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">util</span><span class="p">.</span><span class="nx">position</span><span class="p">(</span><span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="nx">e</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'rootActions'</span><span class="p">,</span> <span class="s1">'data-table-menu'</span><span class="p">,</span> <span class="p">{</span><span class="s1">'columns'</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</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="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">actions</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">bulkEdit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformColumnDialog</span><span class="p">(</span><span class="s1">'bulkEdit'</span><span class="p">,</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">})</span> <span class="p">},</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">'transform'</span><span class="p">)</span> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>TODO: Delete or re-implement ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">csv</span><span class="o">:</span> <span class="kd">function</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">href</span> <span class="o">=</span> <span class="nx">app</span><span class="p">.</span><span class="nx">csvUrl</span> <span class="p">},</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">'transform'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">sortAsc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'asc'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">sortDesc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'desc'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">hideColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hideColumn</span><span class="p">()</span> <span class="p">},</span>
|
||||
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showColumn</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>TODO: Delete or re-implement ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">csv</span><span class="o">:</span> <span class="kd">function</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">href</span> <span class="o">=</span> <span class="nx">app</span><span class="p">.</span><span class="nx">csvUrl</span> <span class="p">},</span>
|
||||
<span class="nx">json</span><span class="o">:</span> <span class="kd">function</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">href</span> <span class="o">=</span> <span class="s2">"_rewrite/api/json"</span> <span class="p">},</span>
|
||||
<span class="nx">urlImport</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">showDialog</span><span class="p">(</span><span class="s1">'urlImport'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">pasteImport</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">showDialog</span><span class="p">(</span><span class="s1">'pasteImport'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">uploadImport</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">showDialog</span><span class="p">(</span><span class="s1">'uploadImport'</span><span class="p">)</span> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>END TODO</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deleteColumn</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">msg</span> <span class="o">=</span> <span class="s2">"Are you sure? This will delete '"</span> <span class="o">+</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span> <span class="o">+</span> <span class="s2">"' from all documents."</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>TODO:</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">alert</span><span class="p">(</span><span class="s1">'This function needs to be re-implemented'</span><span class="p">);</span>
|
||||
<span class="nx">uploadImport</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">showDialog</span><span class="p">(</span><span class="s1">'uploadImport'</span><span class="p">)</span> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>END TODO</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">deleteColumn</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">msg</span> <span class="o">=</span> <span class="s2">"Are you sure? This will delete '"</span> <span class="o">+</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span> <span class="o">+</span> <span class="s2">"' from all documents."</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>TODO:</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">alert</span><span class="p">(</span><span class="s1">'This function needs to be re-implemented'</span><span class="p">);</span>
|
||||
<span class="k">return</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="nx">msg</span><span class="p">))</span> <span class="nx">costco</span><span class="p">.</span><span class="nx">deleteColumn</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">deleteRow</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">doc</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</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">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>important this is == as the currentRow will be string (as comes
|
||||
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</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">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>important this is == as the currentRow will be string (as comes
|
||||
from DOM) while id may be int</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentRow</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">destroy</span><span class="p">().</span><span class="nx">then</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">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">doc</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Row deleted successfully"</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="s2">"Row deleted successfully"</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">err</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Errorz! "</span> <span class="o">+</span> <span class="nx">err</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="s2">"Errorz! "</span> <span class="o">+</span> <span class="nx">err</span><span class="p">)</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
@ -234,7 +282,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="nx">showTransformDialog</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">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog-content'</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="kd">var</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">DataTransform</span><span class="p">({</span>
|
||||
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">DataTransform</span><span class="p">({</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">empty</span><span class="p">();</span>
|
||||
@ -243,23 +291,49 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">hide</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog'</span><span class="p">).</span><span class="nx">draggable</span><span class="p">({</span> <span class="nx">handle</span><span class="o">:</span> <span class="s1">'.dialog-header'</span><span class="p">,</span> <span class="nx">cursor</span><span class="o">:</span> <span class="s1">'move'</span> <span class="p">});</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>======================================================
|
||||
Core Templating</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">setColumnSort</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">order</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">query</span><span class="p">({</span>
|
||||
<span class="nx">sort</span><span class="o">:</span> <span class="p">[</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">currentColumn</span><span class="p">,</span> <span class="nx">order</span><span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">hideColumn</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">hiddenFields</span><span class="p">.</span><span class="nx">push</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">currentColumn</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">showColumn</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="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">without</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">,</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">data</span><span class="p">(</span><span class="s1">'column'</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></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>======================================================</p>
|
||||
|
||||
<h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="data-table-menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \</span>
|
||||
<span class="s1"> <ul class="data-table-menu"></ul> \</span>
|
||||
<span class="s1"> <table class="data-table" cellspacing="0"> \</span>
|
||||
<span class="s1"> <thead> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> {{#notEmpty}}<th class="column-header"></th>{{/notEmpty}} \</span>
|
||||
<span class="s1"> {{#headers}} \</span>
|
||||
<span class="s1"> {{#notEmpty}} \</span>
|
||||
<span class="s1"> <th class="column-header"> \</span>
|
||||
<span class="s1"> <div class="column-header-title"> \</span>
|
||||
<span class="s1"> <a class="root-header-menu"></a> \</span>
|
||||
<span class="s1"> <span class="column-header-name"></span> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </th> \</span>
|
||||
<span class="s1"> {{/notEmpty}} \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \</span>
|
||||
<span class="s1"> <div class="column-header-title"> \</span>
|
||||
<span class="s1"> <a class="column-header-menu"></a> \</span>
|
||||
<span class="s1"> <span class="column-header-name">{{.}}</span> \</span>
|
||||
<span class="s1"> <span class="column-header-name">{{label}}</span> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </th> \</span>
|
||||
<span class="s1"> {{/headers}} \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> </thead> \</span>
|
||||
<span class="s1"> <tbody></tbody> \</span>
|
||||
@ -268,11 +342,14 @@ Core Templating</p> </td> <td class="code">
|
||||
|
||||
<span class="nx">toTemplateJSON</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">modelData</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">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="nx">modelData</span><span class="p">.</span><span class="nx">headers</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="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</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>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span> <span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">modelData</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">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">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">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">,</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">==</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">htmls</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="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</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">htmls</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">currentDocuments</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -281,26 +358,28 @@ Core Templating</p> </td> <td class="code">
|
||||
<span class="kd">var</span> <span class="nx">newView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataTableRow</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">doc</span><span class="p">,</span>
|
||||
<span class="nx">el</span><span class="o">:</span> <span class="nx">tr</span><span class="p">,</span>
|
||||
<span class="nx">headers</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">'headers'</span><span class="p">)</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>DataTableRow View for rendering an individual document.</p>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <h2>DataTableRow View for rendering an individual document.</h2>
|
||||
|
||||
<p>Since we want this to update in place it is up to creator to provider the element to attach to.
|
||||
In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataTableRow</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>
|
||||
In addition you must pass in a fields in the constructor options. This should be list of fields for the DataTable.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataTableRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</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">_headers</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">headers</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <td><a class="row-header-menu"></a></td> \</span>
|
||||
<span class="s1"> {{#cells}} \</span>
|
||||
<span class="s1"> <td data-header="{{header}}"> \</span>
|
||||
<span class="s1"> <td data-field="{{field}}"> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-content"> \</span>
|
||||
<span class="s1"> <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-value">{{value}}</div> \</span>
|
||||
@ -309,14 +388,14 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="s1"> {{/cells}} \</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 .data-table-cell-edit'</span><span class="o">:</span> <span class="s1">'onEditClick'</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>cell editor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s1">'click .data-table-cell-editor .okButton'</span><span class="o">:</span> <span class="s1">'onEditorOK'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-cell-edit'</span><span class="o">:</span> <span class="s1">'onEditClick'</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>cell editor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="s1">'click .data-table-cell-editor .okButton'</span><span class="o">:</span> <span class="s1">'onEditorOK'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-cell-editor .cancelButton'</span><span class="o">:</span> <span class="s1">'onEditorCancel'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toTemplateJSON</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">doc</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="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_headers</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">header</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">header</span><span class="o">:</span> <span class="nx">header</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">header</span><span class="p">)}</span>
|
||||
<span class="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">)}</span>
|
||||
<span class="p">})</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
@ -326,8 +405,7 @@ In addition you must pass in a headers in the constructor options. This should b
|
||||
<span class="kd">var</span> <span class="nx">html</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="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</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">html</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>======================================================
|
||||
Cell Editor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onEditClick</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="p">},</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <h1>Cell Editor</h1> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onEditClick</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">editing</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-table-cell-editor-editor'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">editing</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="nx">editing</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-edit'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
@ -341,17 +419,17 @@ Cell Editor</p> </td> <td class="code"> <d
|
||||
<span class="nx">onEditorOK</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">cell</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">rowId</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'tr'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-id'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">header</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'td'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-header'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'td'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">newValue</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-editor'</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-table-cell-editor-editor'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">newData</span><span class="p">[</span><span class="nx">header</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
|
||||
<span class="nx">newData</span><span class="p">[</span><span class="nx">field</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">newData</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Updating row..."</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="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Updating row..."</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="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Row updated successfully"</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>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Row updated successfully"</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>
|
||||
<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="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Error saving row'</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">'Error saving row'</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>
|
||||
@ -362,394 +440,86 @@ Cell Editor</p> </td> <td class="code"> <d
|
||||
<span class="kd">var</span> <span class="nx">cell</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">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">);</span>
|
||||
<span class="nx">cell</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">cell</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'previousContents'</span><span class="p">)).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-edit'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
<span class="p">}</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>View (Dialog) for doing data transformations (on columns of data).</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">ColumnTransform</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">'transform-column-view'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="dialog-header"> \</span>
|
||||
<span class="s1"> Functional transform on column {{name}} \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="dialog-body"> \</span>
|
||||
<span class="s1"> <div class="grid-layout layout-tight layout-full"> \</span>
|
||||
<span class="s1"> <table> \</span>
|
||||
<span class="s1"> <tbody> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> <td colspan="4"> \</span>
|
||||
<span class="s1"> <div class="grid-layout layout-tight layout-full"> \</span>
|
||||
<span class="s1"> <table rows="4" cols="4"> \</span>
|
||||
<span class="s1"> <tbody> \</span>
|
||||
<span class="s1"> <tr style="vertical-align: bottom;"> \</span>
|
||||
<span class="s1"> <td colspan="4"> \</span>
|
||||
<span class="s1"> Expression \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> <td colspan="3"> \</span>
|
||||
<span class="s1"> <div class="input-container"> \</span>
|
||||
<span class="s1"> <textarea class="expression-preview-code"></textarea> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> <td class="expression-preview-parsing-status" width="150" style="vertical-align: top;"> \</span>
|
||||
<span class="s1"> No syntax error. \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> <td colspan="4"> \</span>
|
||||
<span class="s1"> <div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"> \</span>
|
||||
<span class="s1"> <span>Preview</span> \</span>
|
||||
<span class="s1"> <div id="expression-preview-tabs-preview" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> \</span>
|
||||
<span class="s1"> <div class="expression-preview-container" style="width: 652px; "> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> </tbody> \</span>
|
||||
<span class="s1"> </table> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> </tbody> \</span>
|
||||
<span class="s1"> </table> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="dialog-footer"> \</span>
|
||||
<span class="s1"> <button class="okButton btn primary">&nbsp;&nbsp;Update All&nbsp;&nbsp;</button> \</span>
|
||||
<span class="s1"> <button class="cancelButton btn danger">Cancel</button> \</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 .okButton'</span><span class="o">:</span> <span class="s1">'onSubmit'</span>
|
||||
<span class="p">,</span> <span class="s1">'keydown .expression-preview-code'</span><span class="o">:</span> <span class="s1">'onEditorKeydown'</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="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">htmls</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="p">{</span><span class="nx">name</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">currentColumn</span><span class="p">}</span>
|
||||
<span class="p">)</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</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>Put in the basic (identity) transform script
|
||||
TODO: put this into the template?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">editor</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">'.expression-preview-code'</span><span class="p">);</span>
|
||||
<span class="nx">editor</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="s2">"function(doc) {\n doc['"</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">currentColumn</span><span class="o">+</span><span class="s2">"'] = doc['"</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">currentColumn</span><span class="o">+</span><span class="s2">"'];\n return doc;\n}"</span><span class="p">);</span>
|
||||
<span class="nx">editor</span><span class="p">.</span><span class="nx">focus</span><span class="p">().</span><span class="nx">get</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">setSelectionRange</span><span class="p">(</span><span class="mi">18</span><span class="p">,</span> <span class="mi">18</span><span class="p">);</span>
|
||||
<span class="nx">editor</span><span class="p">.</span><span class="nx">keydown</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onSubmit</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="kd">var</span> <span class="nx">funcText</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">'.expression-preview-code'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">editFunc</span> <span class="o">=</span> <span class="nx">costco</span><span class="p">.</span><span class="nx">evalFunction</span><span class="p">(</span><span class="nx">funcText</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Error with function! "</span> <span class="o">+</span> <span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">);</span>
|
||||
<span class="k">return</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">hide</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Updating all visible docs. This could take a while..."</span><span class="p">,</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="nx">loader</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">docs</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">currentDocuments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">toJSON</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: notify about failed docs? </p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">toUpdate</span> <span class="o">=</span> <span class="nx">costco</span><span class="p">.</span><span class="nx">mapDocs</span><span class="p">(</span><span class="nx">docs</span><span class="p">,</span> <span class="nx">editFunc</span><span class="p">).</span><span class="nx">edited</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">totalToUpdate</span> <span class="o">=</span> <span class="nx">toUpdate</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
||||
<span class="kd">function</span> <span class="nx">onCompletedUpdate</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">totalToUpdate</span> <span class="o">+=</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">totalToUpdate</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">toUpdate</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="s2">" documents updated successfully"</span><span class="p">);</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'WARNING: We have only updated the docs in this view. (Updating of all docs not yet implemented!)'</span><span class="p">);</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</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>TODO: Very inefficient as we search through all docs every time!</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="nx">toUpdate</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">editedDoc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">realDoc</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">currentDocuments</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">editedDoc</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="nx">realDoc</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">editedDoc</span><span class="p">);</span>
|
||||
<span class="nx">realDoc</span><span class="p">.</span><span class="nx">save</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="nx">onCompletedUpdate</span><span class="p">).</span><span class="nx">fail</span><span class="p">(</span><span class="nx">onCompletedUpdate</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onEditorKeydown</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></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>if you don't setTimeout it won't grab the latest character if you call e.target.value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</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="kd">var</span> <span class="nx">errors</span> <span class="o">=</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">'.expression-preview-parsing-status'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">editFunc</span> <span class="o">=</span> <span class="nx">costco</span><span class="p">.</span><span class="nx">evalFunction</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">value</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">errors</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">'No syntax error.'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">docs</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">currentDocuments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">previewData</span> <span class="o">=</span> <span class="nx">costco</span><span class="p">.</span><span class="nx">previewTransform</span><span class="p">(</span><span class="nx">docs</span><span class="p">,</span> <span class="nx">editFunc</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'editPreview'</span><span class="p">,</span> <span class="s1">'expression-preview-container'</span><span class="p">,</span> <span class="p">{</span><span class="nx">rows</span><span class="o">:</span> <span class="nx">previewData</span><span class="p">});</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">errors</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">editFunc</span><span class="p">.</span><span class="nx">errorMessage</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span> <span class="mi">1</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</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>View (Dialog) for doing data transformations on whole dataset.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataTransform</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">'transform-view'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="dialog-header"> \</span>
|
||||
<span class="s1"> Recursive transform on all rows \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="dialog-body"> \</span>
|
||||
<span class="s1"> <div class="grid-layout layout-full"> \</span>
|
||||
<span class="s1"> <p class="info">Traverse and transform objects by visiting every node on a recursive walk using <a href="https://github.com/substack/js-traverse">js-traverse</a>.</p> \</span>
|
||||
<span class="s1"> <table> \</span>
|
||||
<span class="s1"> <tbody> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> <td colspan="4"> \</span>
|
||||
<span class="s1"> <div class="grid-layout layout-tight layout-full"> \</span>
|
||||
<span class="s1"> <table rows="4" cols="4"> \</span>
|
||||
<span class="s1"> <tbody> \</span>
|
||||
<span class="s1"> <tr style="vertical-align: bottom;"> \</span>
|
||||
<span class="s1"> <td colspan="4"> \</span>
|
||||
<span class="s1"> Expression \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> <td colspan="3"> \</span>
|
||||
<span class="s1"> <div class="input-container"> \</span>
|
||||
<span class="s1"> <textarea class="expression-preview-code"></textarea> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> <td class="expression-preview-parsing-status" width="150" style="vertical-align: top;"> \</span>
|
||||
<span class="s1"> No syntax error. \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> <td colspan="4"> \</span>
|
||||
<span class="s1"> <div id="expression-preview-tabs" class="refine-tabs ui-tabs ui-widget ui-widget-content ui-corner-all"> \</span>
|
||||
<span class="s1"> <span>Preview</span> \</span>
|
||||
<span class="s1"> <div id="expression-preview-tabs-preview" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> \</span>
|
||||
<span class="s1"> <div class="expression-preview-container" style="width: 652px; "> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> </tbody> \</span>
|
||||
<span class="s1"> </table> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> </tbody> \</span>
|
||||
<span class="s1"> </table> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="dialog-footer"> \</span>
|
||||
<span class="s1"> <button class="okButton button">&nbsp;&nbsp;Update All&nbsp;&nbsp;</button> \</span>
|
||||
<span class="s1"> <button class="cancelButton button">Cancel</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</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="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="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="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">);</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> <p>Graph view for a Dataset using Flot graphing library.</p>
|
||||
|
||||
<p>Initialization arguments:</p>
|
||||
|
||||
<ul>
|
||||
<li>model: recline.Model.Dataset</li>
|
||||
<li><p>config: (optional) graph configuration hash of form:</p>
|
||||
|
||||
<p>{
|
||||
group: {column name for x-axis},
|
||||
series: [{column name for series A}, {column name series B}, ... ],
|
||||
graphType: 'line'
|
||||
}</p></li>
|
||||
</ul>
|
||||
|
||||
<p>NB: should <em>not</em> provide an el argument to the view but must let the view
|
||||
generate the element itself (you can then append view.el to the DOM.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FlotGraph</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"data-graph-container"</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="editor"> \</span>
|
||||
<span class="s1"> <div class="editor-info editor-hide-info"> \</span>
|
||||
<span class="s1"> <h3 class="action-toggle-help">Help &raquo;</h3> \</span>
|
||||
<span class="s1"> <p>To create a chart select a column (group) to use as the x-axis \</span>
|
||||
<span class="s1"> then another column (Series A) to plot against it.</p> \</span>
|
||||
<span class="s1"> <p>You can add add \</span>
|
||||
<span class="s1"> additional series by clicking the "Add series" button</p> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <form class="form-stacked"> \</span>
|
||||
<span class="s1"> <div class="clearfix"> \</span>
|
||||
<span class="s1"> <label>Graph Type</label> \</span>
|
||||
<span class="s1"> <div class="input editor-type"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> <option value="line">Line</option> \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <label>Group Column (x-axis)</label> \</span>
|
||||
<span class="s1"> <div class="input editor-group"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#headers}} \</span>
|
||||
<span class="s1"> <option value="{{.}}">{{.}}</option> \</span>
|
||||
<span class="s1"> {{/headers}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-series-group"> \</span>
|
||||
<span class="s1"> <div class="editor-series"> \</span>
|
||||
<span class="s1"> <label>Series <span>A (y-axis)</span></label> \</span>
|
||||
<span class="s1"> <div class="input"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#headers}} \</span>
|
||||
<span class="s1"> <option value="{{.}}">{{.}}</option> \</span>
|
||||
<span class="s1"> {{/headers}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons"> \</span>
|
||||
<span class="s1"> <button class="btn editor-add">Add Series</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \</span>
|
||||
<span class="s1"> <button class="editor-save">Save</button> \</span>
|
||||
<span class="s1"> <input type="hidden" class="editor-id" value="chart-1" /> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="panel graph"></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">'change form select'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .editor-add'</span><span class="o">:</span> <span class="s1">'addSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-remove-series'</span><span class="o">:</span> <span class="s1">'removeSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-toggle-help'</span><span class="o">:</span> <span class="s1">'toggleHelp'</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="nx">config</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'redraw'</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> <p>we need the model.headers to render properly</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">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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</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">group</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">series</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">graphType</span><span class="o">:</span> <span class="s1">'line'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">config</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">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</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="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="nx">htmls</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="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</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">htmls</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>now set a load of stuff up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$graph</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">'.panel.graph'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> <p>for use later when adding additional series
|
||||
could be simpler just to have a common template!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</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">'.editor-series'</span><span class="p">).</span><span class="nx">clone</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onEditorSubmit</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">select</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">'.editor-group select'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_getEditorData</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">¶</a> </div> <p>update navigation
|
||||
TODO: make this less invasive (e.g. preserve other keys in query string)</p> </td> <td class="code"> <div class="highlight"><pre> <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="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="o">+</span>
|
||||
<span class="s1">'?graph='</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="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</a> </div> <p>There appear to be issues generating a Flot graph if either:</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">¶</a> </div> <ul>
|
||||
<li><p>The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with</p>
|
||||
|
||||
<p>Uncaught Invalid dimensions for plot, width = 0, height = 0</p></li>
|
||||
<li>There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value' </li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">areWeVisible</span> <span class="o">=</span> <span class="o">!</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">expr</span><span class="p">.</span><span class="nx">filters</span><span class="p">.</span><span class="nx">hidden</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="mi">0</span><span class="p">]);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">&&</span> <span class="p">(</span><span class="o">!</span><span class="nx">areWeVisible</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">currentDocuments</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">return</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">¶</a> </div> <p>create this.plot and cache it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> <p>only lines for the present</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="s1">'line'</span><span class="p">,</span>
|
||||
<span class="nx">name</span><span class="o">:</span> <span class="s1">'Line Chart'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">plot</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$graph</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">(),</span> <span class="nx">options</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">setData</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">());</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">resize</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">setupGrid</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span><span class="p">.</span><span class="nx">draw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">_getEditorData</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$editor</span> <span class="o">=</span> <span class="k">this</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">makeArray</span><span class="p">(</span><span class="nx">series</span><span class="p">)</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</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">'.editor-group select'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">createSeries</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>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</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">chartConfig</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">chartConfig</span><span class="p">.</span><span class="nx">series</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">seriesIndex</span><span class="p">,</span> <span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">points</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">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">x</span> <span class="o">===</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">points</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">series</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">points</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="nx">field</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">series</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">¶</a> </div> <p>Public: Adds a new empty series select box to the editor.</p>
|
||||
|
||||
<p>All but the first select box will have a remove button that allows them
|
||||
to be removed.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addSeries</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">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span><span class="p">.</span><span class="nx">clone</span><span class="p">(),</span>
|
||||
<span class="nx">label</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'label'</span><span class="p">),</span>
|
||||
<span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</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">'.editor-series-group'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">' [<a href="#remove" class="action-remove-series">Remove</a>]'</span><span class="p">);</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">64</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <p>Public: Removes a series list item from the editor.</p>
|
||||
|
||||
<p>Also updates the labels of the remaining series elements.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeSeries</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="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">parent</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">labelSpan</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">prev</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">);</span>
|
||||
<span class="nx">labelSpan</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">index</span> <span class="o">+</span> <span class="mi">65</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">onEditorSubmit</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toggleHelp</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">find</span><span class="p">(</span><span class="s1">'.editor-info'</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'editor-hide-info'</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">¶</a> </div> <p>Private: Resets the series property to reference the select elements.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_updateSeries</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">$series</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">'.editor-series select'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="k">return</span> <span class="nx">my</span><span class="p">;</span>
|
||||
|
||||
<span class="p">}(</span><span class="nx">jQuery</span><span class="p">);</span>
|
||||
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</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-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</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-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</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="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-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</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-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</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-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</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="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">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">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">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="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="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="p">}</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <h2>notify</h2>
|
||||
|
||||
<p>Create a notification (a div.alert-message 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="kd">var</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-message {{category}} fade in" data-alert="alert"><a class="close" href="#">×</a> \</span>
|
||||
<span class="s1"> <p>{{msg}} \</span>
|
||||
<span class="s1"> {{#loader}} \</span>
|
||||
<span class="s1"> <img src="images/small-spinner.gif" class="notification-loader"> \</span>
|
||||
<span class="s1"> {{/loader}} \</span>
|
||||
<span class="s1"> </p> \</span>
|
||||
<span class="s1"> </div>'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.data-explorer .alert-messages'</span><span class="p">));</span>
|
||||
<span class="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-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <h2>clearNotifications</h2>
|
||||
|
||||
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.data-explorer .alert-message'</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>
|
||||
@ -86,8 +86,10 @@
|
||||
<li>Componentized design means you use only what you need</li>
|
||||
</ul>
|
||||
|
||||
<img src="http://farm8.staticflickr.com/7020/6847468031_0f474de5f7_b.jpg" alt="Recline Data Explorer Screenshot" style="width: 95%; display: block; margin: auto; margin-bottom: 30px;" />
|
||||
|
||||
<h2 id="demo">Demo</h2>
|
||||
<p><a href="demo/index.html" class="btn">Demo »</a></p>
|
||||
<p><a href="demo/index.html" class="btn">For Recline Demo Click Here »</a></p>
|
||||
|
||||
<h2 id="downloads">Downloads & Dependencies <small>(Right-click, and use 'Save As')</small></h2>
|
||||
<p><a href="recline.js" class="btn">Recline Current Version (v0.2) »</a></p>
|
||||
@ -147,6 +149,7 @@ Backbone.history.start();
|
||||
<li><a href="docs/model.html">Models</a></li>
|
||||
<li><a href="docs/backend.html">Backends</a></li>
|
||||
<li><a href="docs/view.html">Views including the main Data Explorer</a></li>
|
||||
<li><a href="docs/view-flot-graph.html">Graph View (based on Flot)</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="tests">Tests</h2>
|
||||
|
||||
1388
recline.js
1388
recline.js
File diff suppressed because it is too large
Load Diff
@ -48,7 +48,7 @@ this.recline.Model = this.recline.Model || {};
|
||||
//
|
||||
// To use it you should provide in your constructor data:
|
||||
//
|
||||
// * metadata (including headers array)
|
||||
// * metadata (including fields array)
|
||||
// * documents: list of hashes, each hash being one doc. A doc *must* have an id attribute which is unique.
|
||||
//
|
||||
// Example:
|
||||
@ -59,9 +59,9 @@ this.recline.Model = this.recline.Model || {};
|
||||
// backend.addDataset({
|
||||
// metadata: {
|
||||
// id: 'my-id',
|
||||
// title: 'My Title',
|
||||
// headers: ['x', 'y', 'z'],
|
||||
// title: 'My Title'
|
||||
// },
|
||||
// fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}],
|
||||
// documents: [
|
||||
// {id: 0, x: 1, y: 2, z: 3},
|
||||
// {id: 1, x: 2, y: 4, z: 6}
|
||||
@ -86,6 +86,7 @@ this.recline.Model = this.recline.Model || {};
|
||||
if (model.__type__ == 'Dataset') {
|
||||
var rawDataset = this.datasets[model.id];
|
||||
model.set(rawDataset.metadata);
|
||||
model.fields.reset(rawDataset.fields);
|
||||
model.docCount = rawDataset.documents.length;
|
||||
dfd.resolve(model);
|
||||
}
|
||||
@ -153,12 +154,12 @@ this.recline.Model = this.recline.Model || {};
|
||||
});
|
||||
var dfd = $.Deferred();
|
||||
wrapInTimeout(jqxhr).done(function(schema) {
|
||||
headers = _.map(schema.data, function(item) {
|
||||
return item.name;
|
||||
});
|
||||
model.set({
|
||||
headers: headers
|
||||
var fieldData = _.map(schema.data, function(item) {
|
||||
item.id = item.name;
|
||||
delete item.name;
|
||||
return item;
|
||||
});
|
||||
model.fields.reset(fieldData);
|
||||
model.docCount = schema.count;
|
||||
dfd.resolve(model, jqxhr);
|
||||
})
|
||||
@ -227,9 +228,10 @@ this.recline.Model = this.recline.Model || {};
|
||||
});
|
||||
var dfd = $.Deferred();
|
||||
wrapInTimeout(jqxhr).done(function(results) {
|
||||
model.set({
|
||||
headers: results.fields
|
||||
});
|
||||
model.fields.reset(_.map(results.fields, function(fieldId) {
|
||||
return {id: fieldId};
|
||||
})
|
||||
);
|
||||
dfd.resolve(model, jqxhr);
|
||||
})
|
||||
.fail(function(arguments) {
|
||||
@ -293,7 +295,10 @@ this.recline.Model = this.recline.Model || {};
|
||||
|
||||
$.getJSON(model.get('url'), function(d) {
|
||||
result = self.gdocsToJavascript(d);
|
||||
model.set({'headers': result.header});
|
||||
model.fields.reset(_.map(result.field, function(fieldId) {
|
||||
return {id: fieldId};
|
||||
})
|
||||
);
|
||||
// cache data onto dataset (we have loaded whole gdoc it seems!)
|
||||
model._dataCache = result.data;
|
||||
dfd.resolve(model);
|
||||
@ -303,9 +308,9 @@ this.recline.Model = this.recline.Model || {};
|
||||
|
||||
query: function(dataset, queryObj) {
|
||||
var dfd = $.Deferred();
|
||||
var fields = dataset.get('headers');
|
||||
var fields = _.pluck(dataset.fields.toJSON(), 'id');
|
||||
|
||||
// zip the field headers with the data rows to produce js objs
|
||||
// zip the fields with the data rows to produce js objs
|
||||
// TODO: factor this out as a common method with other backends
|
||||
var objs = _.map(dataset._dataCache, function (d) {
|
||||
var obj = {};
|
||||
@ -318,9 +323,9 @@ this.recline.Model = this.recline.Model || {};
|
||||
gdocsToJavascript: function(gdocsSpreadsheet) {
|
||||
/*
|
||||
:options: (optional) optional argument dictionary:
|
||||
columnsToUse: list of columns to use (specified by header names)
|
||||
columnsToUse: list of columns to use (specified by field names)
|
||||
colTypes: dictionary (with column names as keys) specifying types (e.g. range, percent for use in conversion).
|
||||
:return: tabular data object (hash with keys: header and data).
|
||||
:return: tabular data object (hash with keys: field and data).
|
||||
|
||||
Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.
|
||||
*/
|
||||
@ -329,7 +334,7 @@ this.recline.Model = this.recline.Model || {};
|
||||
options = arguments[1];
|
||||
}
|
||||
var results = {
|
||||
'header': [],
|
||||
'field': [],
|
||||
'data': []
|
||||
};
|
||||
// default is no special info on type of columns
|
||||
@ -340,14 +345,14 @@ this.recline.Model = this.recline.Model || {};
|
||||
// either extract column headings from spreadsheet directly, or used supplied ones
|
||||
if (options.columnsToUse) {
|
||||
// columns set to subset supplied
|
||||
results.header = options.columnsToUse;
|
||||
results.field = options.columnsToUse;
|
||||
} else {
|
||||
// set columns to use to be all available
|
||||
if (gdocsSpreadsheet.feed.entry.length > 0) {
|
||||
for (var k in gdocsSpreadsheet.feed.entry[0]) {
|
||||
if (k.substr(0, 3) == 'gsx') {
|
||||
var col = k.substr(4)
|
||||
results.header.push(col);
|
||||
results.field.push(col);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -357,8 +362,8 @@ this.recline.Model = this.recline.Model || {};
|
||||
var rep = /^([\d\.\-]+)\%$/;
|
||||
$.each(gdocsSpreadsheet.feed.entry, function (i, entry) {
|
||||
var row = [];
|
||||
for (var k in results.header) {
|
||||
var col = results.header[k];
|
||||
for (var k in results.field) {
|
||||
var col = results.field[k];
|
||||
var _keyname = 'gsx$' + col;
|
||||
var value = entry[_keyname]['$t'];
|
||||
// if labelled as % and value contains %, convert
|
||||
|
||||
189
src/model.js
189
src/model.js
@ -3,85 +3,124 @@ this.recline = this.recline || {};
|
||||
this.recline.Model = this.recline.Model || {};
|
||||
|
||||
(function($, my) {
|
||||
// ## A Dataset model
|
||||
//
|
||||
// Other than standard list of Backbone methods it has two important attributes:
|
||||
//
|
||||
// * currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)
|
||||
// * docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)
|
||||
my.Dataset = Backbone.Model.extend({
|
||||
__type__: 'Dataset',
|
||||
initialize: function(model, backend) {
|
||||
this.backend = backend;
|
||||
if (backend && backend.constructor == String) {
|
||||
this.backend = my.backends[backend];
|
||||
}
|
||||
this.currentDocuments = new my.DocumentList();
|
||||
this.docCount = null;
|
||||
this.defaultQuery = {
|
||||
size: 100
|
||||
, offset: 0
|
||||
};
|
||||
// this.queryState = {};
|
||||
},
|
||||
|
||||
// ### getDocuments
|
||||
//
|
||||
// AJAX method with promise API to get rows (documents) from the backend.
|
||||
//
|
||||
// Resulting DocumentList are used to reset this.currentDocuments and are
|
||||
// also returned.
|
||||
//
|
||||
// :param numRows: passed onto backend getDocuments.
|
||||
// :param start: passed onto backend getDocuments.
|
||||
//
|
||||
// this does not fit very well with Backbone setup. Backbone really expects you to know the ids of objects your are fetching (which you do in classic RESTful ajax-y world). But this paradigm does not fill well with data set up we have here.
|
||||
// This also illustrates the limitations of separating the Dataset and the Backend
|
||||
query: function(queryObj) {
|
||||
var self = this;
|
||||
this.queryState = queryObj || this.defaultQuery;
|
||||
this.queryState = _.extend({size: 100, offset: 0}, this.queryState);
|
||||
var dfd = $.Deferred();
|
||||
this.backend.query(this, this.queryState).done(function(rows) {
|
||||
var docs = _.map(rows, function(row) {
|
||||
var _doc = new my.Document(row);
|
||||
_doc.backend = self.backend;
|
||||
_doc.dataset = self;
|
||||
return _doc;
|
||||
});
|
||||
self.currentDocuments.reset(docs);
|
||||
dfd.resolve(self.currentDocuments);
|
||||
})
|
||||
.fail(function(arguments) {
|
||||
dfd.reject(arguments);
|
||||
});
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
toTemplateJSON: function() {
|
||||
var data = this.toJSON();
|
||||
data.docCount = this.docCount;
|
||||
return data;
|
||||
// ## A Dataset model
|
||||
//
|
||||
// A model must have the following (Backbone) attributes:
|
||||
//
|
||||
// * fields: (aka columns) is a FieldList listing all the fields on this
|
||||
// Dataset (this can be set explicitly, or, on fetch() of Dataset
|
||||
// information from the backend, or as is perhaps most common on the first
|
||||
// query)
|
||||
// * currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)
|
||||
// * docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)
|
||||
my.Dataset = Backbone.Model.extend({
|
||||
__type__: 'Dataset',
|
||||
initialize: function(model, backend) {
|
||||
_.bindAll(this, 'query');
|
||||
this.backend = backend;
|
||||
if (backend && backend.constructor == String) {
|
||||
this.backend = my.backends[backend];
|
||||
}
|
||||
});
|
||||
this.fields = new my.FieldList();
|
||||
this.currentDocuments = new my.DocumentList();
|
||||
this.docCount = null;
|
||||
this.queryState = new my.Query();
|
||||
this.queryState.bind('change', this.query);
|
||||
},
|
||||
|
||||
// ## A Document (aka Row)
|
||||
//
|
||||
// A single entry or row in the dataset
|
||||
my.Document = Backbone.Model.extend({
|
||||
__type__: 'Document'
|
||||
});
|
||||
|
||||
// ## A Backbone collection of Documents
|
||||
my.DocumentList = Backbone.Collection.extend({
|
||||
__type__: 'DocumentList',
|
||||
model: my.Document
|
||||
});
|
||||
|
||||
// ## Backend registry
|
||||
// ### query
|
||||
//
|
||||
// Backends will register themselves by id into this registry
|
||||
my.backends = {};
|
||||
// AJAX method with promise API to get documents from the backend.
|
||||
//
|
||||
// It will query based on current query state (given by this.queryState)
|
||||
// updated by queryObj (if provided).
|
||||
//
|
||||
// Resulting DocumentList are used to reset this.currentDocuments and are
|
||||
// also returned.
|
||||
query: function(queryObj) {
|
||||
var self = this;
|
||||
this.queryState.set(queryObj, {silent: true});
|
||||
var dfd = $.Deferred();
|
||||
this.backend.query(this, this.queryState.toJSON()).done(function(rows) {
|
||||
var docs = _.map(rows, function(row) {
|
||||
var _doc = new my.Document(row);
|
||||
_doc.backend = self.backend;
|
||||
_doc.dataset = self;
|
||||
return _doc;
|
||||
});
|
||||
self.currentDocuments.reset(docs);
|
||||
dfd.resolve(self.currentDocuments);
|
||||
})
|
||||
.fail(function(arguments) {
|
||||
dfd.reject(arguments);
|
||||
});
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
toTemplateJSON: function() {
|
||||
var data = this.toJSON();
|
||||
data.docCount = this.docCount;
|
||||
data.fields = this.fields.toJSON();
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
// ## A Document (aka Row)
|
||||
//
|
||||
// A single entry or row in the dataset
|
||||
my.Document = Backbone.Model.extend({
|
||||
__type__: 'Document'
|
||||
});
|
||||
|
||||
// ## A Backbone collection of Documents
|
||||
my.DocumentList = Backbone.Collection.extend({
|
||||
__type__: 'DocumentList',
|
||||
model: my.Document
|
||||
});
|
||||
|
||||
// ## A Field (aka Column) on a Dataset
|
||||
//
|
||||
// Following attributes as standard:
|
||||
//
|
||||
// * id: a unique identifer for this field- usually this should match the key in the documents hash
|
||||
// * label: the visible label used for this field
|
||||
// * type: the type of the data
|
||||
my.Field = Backbone.Model.extend({
|
||||
defaults: {
|
||||
id: null,
|
||||
label: null,
|
||||
type: 'String'
|
||||
},
|
||||
// In addition to normal backbone initialization via a Hash you can also
|
||||
// just pass a single argument representing id to the ctor
|
||||
initialize: function(data) {
|
||||
// if a hash not passed in the first argument is set as value for key 0
|
||||
if ('0' in data) {
|
||||
throw new Error('Looks like you did not pass a proper hash with id to Field constructor');
|
||||
}
|
||||
if (this.attributes.label == null) {
|
||||
this.set({label: this.id});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
my.FieldList = Backbone.Collection.extend({
|
||||
model: my.Field
|
||||
});
|
||||
|
||||
// ## A Query object storing Dataset Query state
|
||||
my.Query = Backbone.Model.extend({
|
||||
defaults: {
|
||||
size: 100
|
||||
, offset: 0
|
||||
}
|
||||
});
|
||||
|
||||
// ## Backend registry
|
||||
//
|
||||
// Backends will register themselves by id into this registry
|
||||
my.backends = {};
|
||||
|
||||
}(jQuery, this.recline.Model));
|
||||
|
||||
|
||||
@ -1,171 +0,0 @@
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
// Views module following classic module pattern
|
||||
(function($, my) {
|
||||
|
||||
// The primary view for the entire application.
|
||||
//
|
||||
// It should be initialized with a recline.Model.Dataset object and an existing
|
||||
// dom element to attach to (the existing DOM element is important for
|
||||
// rendering of FlotGraph subview).
|
||||
//
|
||||
// To pass in configuration options use the config key in initialization hash
|
||||
// e.g.
|
||||
//
|
||||
// var explorer = new DataExplorer({
|
||||
// config: {...}
|
||||
// })
|
||||
//
|
||||
// Config options:
|
||||
//
|
||||
// * displayCount: how many documents to display initially (default: 10)
|
||||
// * readOnly: true/false (default: false) value indicating whether to
|
||||
// operate in read-only mode (hiding all editing options).
|
||||
//
|
||||
// All other views as contained in this one.
|
||||
my.DataExplorer = Backbone.View.extend({
|
||||
template: ' \
|
||||
<div class="data-explorer"> \
|
||||
<div class="alert-messages"></div> \
|
||||
\
|
||||
<div class="header"> \
|
||||
<ul class="navigation"> \
|
||||
<li class="active"><a href="#grid" class="btn">Grid</a> \
|
||||
<li><a href="#graph" class="btn">Graph</a></li> \
|
||||
</ul> \
|
||||
<div class="pagination"> \
|
||||
<form class="display-count"> \
|
||||
Showing 0 to <input name="displayCount" type="text" value="{{displayCount}}" title="Edit and hit enter to change the number of rows displayed" /> of <span class="doc-count">{{docCount}}</span> \
|
||||
</form> \
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="data-view-container"></div> \
|
||||
<div class="dialog-overlay" style="display: none; z-index: 101; "> </div> \
|
||||
<div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; "> \
|
||||
<div class="dialog-frame" style="width: 700px; visibility: visible; "> \
|
||||
<div class="dialog-content dialog-border"></div> \
|
||||
</div> \
|
||||
</div> \
|
||||
</div> \
|
||||
',
|
||||
|
||||
events: {
|
||||
'submit form.display-count': 'onDisplayCountUpdate'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
this.config = _.extend({
|
||||
displayCount: 50
|
||||
, readOnly: false
|
||||
},
|
||||
options.config);
|
||||
if (this.config.readOnly) {
|
||||
this.setReadOnly();
|
||||
}
|
||||
// Hash of 'page' views (i.e. those for whole page) keyed by page name
|
||||
this.pageViews = {
|
||||
grid: new my.DataTable({
|
||||
model: this.model,
|
||||
config: this.config
|
||||
})
|
||||
, graph: new my.FlotGraph({
|
||||
model: this.model
|
||||
})
|
||||
};
|
||||
// this must be called after pageViews are created
|
||||
this.render();
|
||||
|
||||
this.router = new Backbone.Router();
|
||||
this.setupRouting();
|
||||
|
||||
// retrieve basic data like headers etc
|
||||
// note this.model and dataset returned are the same
|
||||
this.model.fetch()
|
||||
.done(function(dataset) {
|
||||
self.el.find('.doc-count').text(self.model.docCount || 'Unknown');
|
||||
self.query();
|
||||
})
|
||||
.fail(function(error) {
|
||||
my.notify(error.message, {category: 'error', persist: true});
|
||||
});
|
||||
},
|
||||
|
||||
query: function() {
|
||||
this.config.displayCount = parseInt(this.el.find('input[name="displayCount"]').val());
|
||||
var queryObj = {
|
||||
size: this.config.displayCount
|
||||
};
|
||||
my.notify('Loading data', {loader: true});
|
||||
this.model.query(queryObj)
|
||||
.done(function() {
|
||||
my.clearNotifications();
|
||||
my.notify('Data loaded', {category: 'success'});
|
||||
})
|
||||
.fail(function(error) {
|
||||
my.clearNotifications();
|
||||
my.notify(error.message, {category: 'error', persist: true});
|
||||
});
|
||||
},
|
||||
|
||||
onDisplayCountUpdate: function(e) {
|
||||
e.preventDefault();
|
||||
this.query();
|
||||
},
|
||||
|
||||
setReadOnly: function() {
|
||||
this.el.addClass('read-only');
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var tmplData = this.model.toTemplateJSON();
|
||||
tmplData.displayCount = this.config.displayCount;
|
||||
var template = $.mustache(this.template, tmplData);
|
||||
$(this.el).html(template);
|
||||
var $dataViewContainer = this.el.find('.data-view-container');
|
||||
_.each(this.pageViews, function(view, pageName) {
|
||||
$dataViewContainer.append(view.el)
|
||||
});
|
||||
},
|
||||
|
||||
setupRouting: function() {
|
||||
var self = this;
|
||||
this.router.route('', 'grid', function() {
|
||||
self.updateNav('grid');
|
||||
});
|
||||
this.router.route(/grid(\?.*)?/, 'view', function(queryString) {
|
||||
self.updateNav('grid', queryString);
|
||||
});
|
||||
this.router.route(/graph(\?.*)?/, 'graph', function(queryString) {
|
||||
self.updateNav('graph', queryString);
|
||||
// we have to call here due to fact plot may not have been able to draw
|
||||
// if it was hidden until now - see comments in FlotGraph.redraw
|
||||
qsParsed = parseQueryString(queryString);
|
||||
if ('graph' in qsParsed) {
|
||||
var chartConfig = JSON.parse(qsParsed['graph']);
|
||||
_.extend(self.pageViews['graph'].chartConfig, chartConfig);
|
||||
}
|
||||
self.pageViews['graph'].redraw();
|
||||
});
|
||||
},
|
||||
|
||||
updateNav: function(pageName, queryString) {
|
||||
this.el.find('.navigation li').removeClass('active');
|
||||
var $el = this.el.find('.navigation li a[href=#' + pageName + ']');
|
||||
$el.parent().addClass('active');
|
||||
// show the specific page
|
||||
_.each(this.pageViews, function(view, pageViewName) {
|
||||
if (pageViewName === pageName) {
|
||||
view.el.show();
|
||||
} else {
|
||||
view.el.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);
|
||||
|
||||
|
||||
@ -1,298 +0,0 @@
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
// Views module following classic module pattern
|
||||
(function($, my) {
|
||||
|
||||
// DataTable provides a tabular view on a Dataset.
|
||||
//
|
||||
// Initialize it with a recline.Dataset object.
|
||||
my.DataTable = Backbone.View.extend({
|
||||
tagName: "div",
|
||||
className: "data-table-container",
|
||||
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
_.bindAll(this, 'render');
|
||||
this.model.currentDocuments.bind('add', this.render);
|
||||
this.model.currentDocuments.bind('reset', this.render);
|
||||
this.model.currentDocuments.bind('remove', this.render);
|
||||
this.state = {};
|
||||
this.hiddenHeaders = [];
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .column-header-menu': 'onColumnHeaderClick'
|
||||
, 'click .row-header-menu': 'onRowHeaderClick'
|
||||
, 'click .root-header-menu': 'onRootHeaderClick'
|
||||
, 'click .data-table-menu li a': 'onMenuClick'
|
||||
},
|
||||
|
||||
// TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
|
||||
// showDialog: function(template, data) {
|
||||
// if (!data) data = {};
|
||||
// util.show('dialog');
|
||||
// util.render(template, 'dialog-content', data);
|
||||
// util.observeExit($('.dialog-content'), function() {
|
||||
// util.hide('dialog');
|
||||
// })
|
||||
// $('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
// },
|
||||
|
||||
|
||||
// ======================================================
|
||||
// Column and row menus
|
||||
|
||||
onColumnHeaderClick: function(e) {
|
||||
this.state.currentColumn = $(e.target).siblings().text();
|
||||
util.position('data-table-menu', e);
|
||||
util.render('columnActions', 'data-table-menu');
|
||||
},
|
||||
|
||||
onRowHeaderClick: function(e) {
|
||||
this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
|
||||
util.position('data-table-menu', e);
|
||||
util.render('rowActions', 'data-table-menu');
|
||||
},
|
||||
|
||||
onRootHeaderClick: function(e) {
|
||||
util.position('data-table-menu', e);
|
||||
util.render('rootActions', 'data-table-menu', {'columns': this.hiddenHeaders});
|
||||
},
|
||||
|
||||
onMenuClick: function(e) {
|
||||
var self = this;
|
||||
e.preventDefault();
|
||||
var actions = {
|
||||
bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.state.currentColumn}) },
|
||||
transform: function() { self.showTransformDialog('transform') },
|
||||
sortAsc: function() { self.setColumnSort('asc') },
|
||||
sortDesc: function() { self.setColumnSort('desc') },
|
||||
hideColumn: function() { self.hideColumn() },
|
||||
showColumn: function() { self.showColumn(e) },
|
||||
// TODO: Delete or re-implement ...
|
||||
csv: function() { window.location.href = app.csvUrl },
|
||||
json: function() { window.location.href = "_rewrite/api/json" },
|
||||
urlImport: function() { showDialog('urlImport') },
|
||||
pasteImport: function() { showDialog('pasteImport') },
|
||||
uploadImport: function() { showDialog('uploadImport') },
|
||||
// END TODO
|
||||
deleteColumn: function() {
|
||||
var msg = "Are you sure? This will delete '" + self.state.currentColumn + "' from all documents.";
|
||||
// TODO:
|
||||
alert('This function needs to be re-implemented');
|
||||
return;
|
||||
if (confirm(msg)) costco.deleteColumn(self.state.currentColumn);
|
||||
},
|
||||
deleteRow: function() {
|
||||
var doc = _.find(self.model.currentDocuments.models, function(doc) {
|
||||
// important this is == as the currentRow will be string (as comes
|
||||
// from DOM) while id may be int
|
||||
return doc.id == self.state.currentRow
|
||||
});
|
||||
doc.destroy().then(function() {
|
||||
self.model.currentDocuments.remove(doc);
|
||||
my.notify("Row deleted successfully");
|
||||
})
|
||||
.fail(function(err) {
|
||||
my.notify("Errorz! " + err)
|
||||
})
|
||||
}
|
||||
}
|
||||
util.hide('data-table-menu');
|
||||
actions[$(e.target).attr('data-action')]();
|
||||
},
|
||||
|
||||
showTransformColumnDialog: function() {
|
||||
var $el = $('.dialog-content');
|
||||
util.show('dialog');
|
||||
var view = new my.ColumnTransform({
|
||||
model: this.model
|
||||
});
|
||||
view.state = this.state;
|
||||
view.render();
|
||||
$el.empty();
|
||||
$el.append(view.el);
|
||||
util.observeExit($el, function() {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},
|
||||
|
||||
showTransformDialog: function() {
|
||||
var $el = $('.dialog-content');
|
||||
util.show('dialog');
|
||||
var view = new recline.View.DataTransform({
|
||||
});
|
||||
view.render();
|
||||
$el.empty();
|
||||
$el.append(view.el);
|
||||
util.observeExit($el, function() {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},
|
||||
|
||||
setColumnSort: function(order) {
|
||||
var query = _.extend(this.model.queryState, {sort: [[this.state.currentColumn, order]]});
|
||||
this.model.query(query);
|
||||
},
|
||||
|
||||
hideColumn: function() {
|
||||
this.hiddenHeaders.push(this.state.currentColumn);
|
||||
this.render();
|
||||
},
|
||||
|
||||
showColumn: function(e) {
|
||||
this.hiddenHeaders = _.without(this.hiddenHeaders, $(e.target).data('column'));
|
||||
this.render();
|
||||
},
|
||||
|
||||
// ======================================================
|
||||
// Core Templating
|
||||
template: ' \
|
||||
<div class="data-table-menu-overlay" style="display: none; z-index: 101; "> </div> \
|
||||
<ul class="data-table-menu"></ul> \
|
||||
<table class="data-table" cellspacing="0"> \
|
||||
<thead> \
|
||||
<tr> \
|
||||
{{#notEmpty}} \
|
||||
<th class="column-header"> \
|
||||
<div class="column-header-title"> \
|
||||
<a class="root-header-menu"></a> \
|
||||
<span class="column-header-name"></span> \
|
||||
</div> \
|
||||
</th> \
|
||||
{{/notEmpty}} \
|
||||
{{#headers}} \
|
||||
<th class="column-header"> \
|
||||
<div class="column-header-title"> \
|
||||
<a class="column-header-menu"></a> \
|
||||
<span class="column-header-name">{{.}}</span> \
|
||||
</div> \
|
||||
</div> \
|
||||
</th> \
|
||||
{{/headers}} \
|
||||
</tr> \
|
||||
</thead> \
|
||||
<tbody></tbody> \
|
||||
</table> \
|
||||
',
|
||||
|
||||
toTemplateJSON: function() {
|
||||
var modelData = this.model.toJSON()
|
||||
modelData.notEmpty = ( this.headers.length > 0 )
|
||||
modelData.headers = this.headers;
|
||||
return modelData;
|
||||
},
|
||||
render: function() {
|
||||
var self = this;
|
||||
this.headers = _.filter(this.model.get('headers'), function(header) {
|
||||
return _.indexOf(self.hiddenHeaders, header) == -1;
|
||||
});
|
||||
var htmls = $.mustache(this.template, this.toTemplateJSON());
|
||||
this.el.html(htmls);
|
||||
this.model.currentDocuments.forEach(function(doc) {
|
||||
var tr = $('<tr />');
|
||||
self.el.find('tbody').append(tr);
|
||||
var newView = new my.DataTableRow({
|
||||
model: doc,
|
||||
el: tr,
|
||||
headers: self.headers,
|
||||
});
|
||||
newView.render();
|
||||
});
|
||||
this.el.toggleClass('no-hidden', (self.hiddenHeaders.length == 0));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
// DataTableRow View for rendering an individual document.
|
||||
//
|
||||
// Since we want this to update in place it is up to creator to provider the element to attach to.
|
||||
// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
|
||||
my.DataTableRow = Backbone.View.extend({
|
||||
initialize: function(options) {
|
||||
_.bindAll(this, 'render');
|
||||
this._headers = options.headers;
|
||||
this.el = $(this.el);
|
||||
this.model.bind('change', this.render);
|
||||
},
|
||||
|
||||
template: ' \
|
||||
<td><a class="row-header-menu"></a></td> \
|
||||
{{#cells}} \
|
||||
<td data-header="{{header}}"> \
|
||||
<div class="data-table-cell-content"> \
|
||||
<a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell"> </a> \
|
||||
<div class="data-table-cell-value">{{value}}</div> \
|
||||
</div> \
|
||||
</td> \
|
||||
{{/cells}} \
|
||||
',
|
||||
events: {
|
||||
'click .data-table-cell-edit': 'onEditClick',
|
||||
// cell editor
|
||||
'click .data-table-cell-editor .okButton': 'onEditorOK',
|
||||
'click .data-table-cell-editor .cancelButton': 'onEditorCancel'
|
||||
},
|
||||
|
||||
toTemplateJSON: function() {
|
||||
var doc = this.model;
|
||||
var cellData = _.map(this._headers, function(header) {
|
||||
return {header: header, value: doc.get(header)}
|
||||
})
|
||||
return { id: this.id, cells: cellData }
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.el.attr('data-id', this.model.id);
|
||||
var html = $.mustache(this.template, this.toTemplateJSON());
|
||||
$(this.el).html(html);
|
||||
return this;
|
||||
},
|
||||
|
||||
// ======================================================
|
||||
// Cell Editor
|
||||
|
||||
onEditClick: function(e) {
|
||||
var editing = this.el.find('.data-table-cell-editor-editor');
|
||||
if (editing.length > 0) {
|
||||
editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
|
||||
}
|
||||
$(e.target).addClass("hidden");
|
||||
var cell = $(e.target).siblings('.data-table-cell-value');
|
||||
cell.data("previousContents", cell.text());
|
||||
util.render('cellEditor', cell, {value: cell.text()});
|
||||
},
|
||||
|
||||
onEditorOK: function(e) {
|
||||
var cell = $(e.target);
|
||||
var rowId = cell.parents('tr').attr('data-id');
|
||||
var header = cell.parents('td').attr('data-header');
|
||||
var newValue = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
|
||||
var newData = {};
|
||||
newData[header] = newValue;
|
||||
this.model.set(newData);
|
||||
my.notify("Updating row...", {loader: true});
|
||||
this.model.save().then(function(response) {
|
||||
my.notify("Row updated successfully", {category: 'success'});
|
||||
})
|
||||
.fail(function() {
|
||||
my.notify('Error saving row', {
|
||||
category: 'error',
|
||||
persist: true
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
onEditorCancel: function(e) {
|
||||
var cell = $(e.target).parents('.data-table-cell-value');
|
||||
cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);
|
||||
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
// Views module following classic module pattern
|
||||
(function($, my) {
|
||||
|
||||
// Graph view for a Dataset using Flot graphing library.
|
||||
// ## Graph view for a Dataset using Flot graphing library.
|
||||
//
|
||||
// Initialization arguments:
|
||||
//
|
||||
@ -44,9 +43,9 @@ my.FlotGraph = Backbone.View.extend({
|
||||
<label>Group Column (x-axis)</label> \
|
||||
<div class="input editor-group"> \
|
||||
<select> \
|
||||
{{#headers}} \
|
||||
<option value="{{.}}">{{.}}</option> \
|
||||
{{/headers}} \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
</div> \
|
||||
<div class="editor-series-group"> \
|
||||
@ -54,9 +53,9 @@ my.FlotGraph = Backbone.View.extend({
|
||||
<label>Series <span>A (y-axis)</span></label> \
|
||||
<div class="input"> \
|
||||
<select> \
|
||||
{{#headers}} \
|
||||
<option value="{{.}}">{{.}}</option> \
|
||||
{{/headers}} \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
</div> \
|
||||
</div> \
|
||||
@ -86,25 +85,29 @@ my.FlotGraph = Backbone.View.extend({
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
_.bindAll(this, 'render', 'redraw');
|
||||
// we need the model.headers to render properly
|
||||
// we need the model.fields to render properly
|
||||
this.model.bind('change', this.render);
|
||||
this.model.fields.bind('reset', this.render);
|
||||
this.model.fields.bind('add', this.render);
|
||||
this.model.currentDocuments.bind('add', this.redraw);
|
||||
this.model.currentDocuments.bind('reset', this.redraw);
|
||||
var configFromHash = my.parseHashQueryString().graph;
|
||||
if (configFromHash) {
|
||||
configFromHash = JSON.parse(configFromHash);
|
||||
}
|
||||
this.chartConfig = _.extend({
|
||||
group: null,
|
||||
series: [],
|
||||
graphType: 'line'
|
||||
},
|
||||
config)
|
||||
configFromHash,
|
||||
config
|
||||
);
|
||||
this.render();
|
||||
},
|
||||
|
||||
toTemplateJSON: function() {
|
||||
return this.model.toJSON();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
htmls = $.mustache(this.template, this.toTemplateJSON());
|
||||
htmls = $.mustache(this.template, this.model.toTemplateJSON());
|
||||
$(this.el).html(htmls);
|
||||
// now set a load of stuff up
|
||||
this.$graph = this.el.find('.panel.graph');
|
||||
@ -120,8 +123,9 @@ my.FlotGraph = Backbone.View.extend({
|
||||
this._getEditorData();
|
||||
// update navigation
|
||||
// TODO: make this less invasive (e.g. preserve other keys in query string)
|
||||
window.location.hash = window.location.hash.split('?')[0] +
|
||||
'?graph=' + JSON.stringify(this.chartConfig);
|
||||
var qs = my.parseHashQueryString();
|
||||
qs['graph'] = this.chartConfig;
|
||||
my.setHashQueryString(qs);
|
||||
this.redraw();
|
||||
},
|
||||
|
||||
|
||||
525
src/view.js
525
src/view.js
@ -1,11 +1,511 @@
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
// Views module following classic module pattern
|
||||
(function($, my) {
|
||||
// ## DataExplorer
|
||||
//
|
||||
// The primary view for the entire application. Usage:
|
||||
//
|
||||
// <pre>
|
||||
// var myExplorer = new model.recline.DataExplorer({
|
||||
// model: {{recline.Model.Dataset instance}}
|
||||
// el: {{an existing dom element}}
|
||||
// views: {{page views}}
|
||||
// config: {{config options -- see below}}
|
||||
// });
|
||||
// </pre>
|
||||
//
|
||||
// ### Parameters
|
||||
//
|
||||
// **model**: (required) Dataset instance.
|
||||
//
|
||||
// **el**: (required) DOM element.
|
||||
//
|
||||
// **views**: (optional) the views (Grid, Graph etc) for DataExplorer to
|
||||
// show. This is an array of view hashes. If not provided
|
||||
// just initialize a DataTable with id 'grid'. Example:
|
||||
//
|
||||
// <pre>
|
||||
// var views = [
|
||||
// {
|
||||
// id: 'grid', // used for routing
|
||||
// label: 'Grid', // used for view switcher
|
||||
// view: new recline.View.DataTable({
|
||||
// model: dataset
|
||||
// })
|
||||
// },
|
||||
// {
|
||||
// id: 'graph',
|
||||
// label: 'Graph',
|
||||
// view: new recline.View.FlotGraph({
|
||||
// model: dataset
|
||||
// })
|
||||
// }
|
||||
// ];
|
||||
// </pre>
|
||||
//
|
||||
// **config**: Config options like:
|
||||
//
|
||||
// * displayCount: how many documents to display initially (default: 10)
|
||||
// * readOnly: true/false (default: false) value indicating whether to
|
||||
// operate in read-only mode (hiding all editing options).
|
||||
//
|
||||
// NB: the element already being in the DOM is important for rendering of
|
||||
// FlotGraph subview.
|
||||
my.DataExplorer = Backbone.View.extend({
|
||||
template: ' \
|
||||
<div class="data-explorer"> \
|
||||
<div class="alert-messages"></div> \
|
||||
\
|
||||
<div class="header"> \
|
||||
<ul class="navigation"> \
|
||||
{{#views}} \
|
||||
<li><a href="#{{id}}" class="btn">{{label}}</a> \
|
||||
{{/views}} \
|
||||
</ul> \
|
||||
<div class="pagination"> \
|
||||
<form class="display-count"> \
|
||||
Showing 0 to <input name="displayCount" type="text" value="{{displayCount}}" title="Edit and hit enter to change the number of rows displayed" /> of <span class="doc-count">{{docCount}}</span> \
|
||||
</form> \
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="data-view-container"></div> \
|
||||
<div class="dialog-overlay" style="display: none; z-index: 101; "> </div> \
|
||||
<div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; "> \
|
||||
<div class="dialog-frame" style="width: 700px; visibility: visible; "> \
|
||||
<div class="dialog-content dialog-border"></div> \
|
||||
</div> \
|
||||
</div> \
|
||||
</div> \
|
||||
',
|
||||
|
||||
events: {
|
||||
'submit form.display-count': 'onDisplayCountUpdate'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
this.config = _.extend({
|
||||
displayCount: 50
|
||||
, readOnly: false
|
||||
},
|
||||
options.config);
|
||||
if (this.config.readOnly) {
|
||||
this.setReadOnly();
|
||||
}
|
||||
// Hash of 'page' views (i.e. those for whole page) keyed by page name
|
||||
if (options.views) {
|
||||
this.pageViews = options.views;
|
||||
} else {
|
||||
this.pageViews = [{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new my.DataTable({
|
||||
model: this.model
|
||||
})
|
||||
}];
|
||||
}
|
||||
// this must be called after pageViews are created
|
||||
this.render();
|
||||
|
||||
this.router = new Backbone.Router();
|
||||
this.setupRouting();
|
||||
|
||||
// retrieve basic data like fields etc
|
||||
// note this.model and dataset returned are the same
|
||||
this.model.fetch()
|
||||
.done(function(dataset) {
|
||||
self.el.find('.doc-count').text(self.model.docCount || 'Unknown');
|
||||
self.query();
|
||||
})
|
||||
.fail(function(error) {
|
||||
my.notify(error.message, {category: 'error', persist: true});
|
||||
});
|
||||
},
|
||||
|
||||
query: function() {
|
||||
this.config.displayCount = parseInt(this.el.find('input[name="displayCount"]').val());
|
||||
var queryObj = {
|
||||
size: this.config.displayCount
|
||||
};
|
||||
my.notify('Loading data', {loader: true});
|
||||
this.model.query(queryObj)
|
||||
.done(function() {
|
||||
my.clearNotifications();
|
||||
my.notify('Data loaded', {category: 'success'});
|
||||
})
|
||||
.fail(function(error) {
|
||||
my.clearNotifications();
|
||||
my.notify(error.message, {category: 'error', persist: true});
|
||||
});
|
||||
},
|
||||
|
||||
onDisplayCountUpdate: function(e) {
|
||||
e.preventDefault();
|
||||
this.query();
|
||||
},
|
||||
|
||||
setReadOnly: function() {
|
||||
this.el.addClass('read-only');
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var tmplData = this.model.toTemplateJSON();
|
||||
tmplData.displayCount = this.config.displayCount;
|
||||
tmplData.views = this.pageViews;
|
||||
var template = $.mustache(this.template, tmplData);
|
||||
$(this.el).html(template);
|
||||
var $dataViewContainer = this.el.find('.data-view-container');
|
||||
_.each(this.pageViews, function(view, pageName) {
|
||||
$dataViewContainer.append(view.view.el)
|
||||
});
|
||||
},
|
||||
|
||||
setupRouting: function() {
|
||||
var self = this;
|
||||
// Default route
|
||||
this.router.route('', this.pageViews[0].id, function() {
|
||||
self.updateNav(self.pageViews[0].id);
|
||||
});
|
||||
$.each(this.pageViews, function(idx, view) {
|
||||
self.router.route(/^([^?]+)(\?.*)?/, 'view', function(viewId, queryString) {
|
||||
self.updateNav(viewId, queryString);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateNav: function(pageName, queryString) {
|
||||
this.el.find('.navigation li').removeClass('active');
|
||||
var $el = this.el.find('.navigation li a[href=#' + pageName + ']');
|
||||
$el.parent().addClass('active');
|
||||
// show the specific page
|
||||
_.each(this.pageViews, function(view, idx) {
|
||||
if (view.id === pageName) {
|
||||
view.view.el.show();
|
||||
} else {
|
||||
view.view.el.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ## DataTable
|
||||
//
|
||||
// Provides a tabular view on a Dataset.
|
||||
//
|
||||
// Initialize it with a recline.Dataset object.
|
||||
my.DataTable = Backbone.View.extend({
|
||||
tagName: "div",
|
||||
className: "data-table-container",
|
||||
|
||||
initialize: function() {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
_.bindAll(this, 'render');
|
||||
this.model.currentDocuments.bind('add', this.render);
|
||||
this.model.currentDocuments.bind('reset', this.render);
|
||||
this.model.currentDocuments.bind('remove', this.render);
|
||||
this.state = {};
|
||||
this.hiddenFields = [];
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .column-header-menu': 'onColumnHeaderClick'
|
||||
, 'click .row-header-menu': 'onRowHeaderClick'
|
||||
, 'click .root-header-menu': 'onRootHeaderClick'
|
||||
, 'click .data-table-menu li a': 'onMenuClick'
|
||||
},
|
||||
|
||||
// TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
|
||||
// showDialog: function(template, data) {
|
||||
// if (!data) data = {};
|
||||
// util.show('dialog');
|
||||
// util.render(template, 'dialog-content', data);
|
||||
// util.observeExit($('.dialog-content'), function() {
|
||||
// util.hide('dialog');
|
||||
// })
|
||||
// $('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
// },
|
||||
|
||||
|
||||
// ======================================================
|
||||
// Column and row menus
|
||||
|
||||
onColumnHeaderClick: function(e) {
|
||||
this.state.currentColumn = $(e.target).closest('.column-header').attr('data-field');
|
||||
util.position('data-table-menu', e);
|
||||
util.render('columnActions', 'data-table-menu');
|
||||
},
|
||||
|
||||
onRowHeaderClick: function(e) {
|
||||
this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
|
||||
util.position('data-table-menu', e);
|
||||
util.render('rowActions', 'data-table-menu');
|
||||
},
|
||||
|
||||
onRootHeaderClick: function(e) {
|
||||
util.position('data-table-menu', e);
|
||||
util.render('rootActions', 'data-table-menu', {'columns': this.hiddenFields});
|
||||
},
|
||||
|
||||
onMenuClick: function(e) {
|
||||
var self = this;
|
||||
e.preventDefault();
|
||||
var actions = {
|
||||
bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.state.currentColumn}) },
|
||||
transform: function() { self.showTransformDialog('transform') },
|
||||
sortAsc: function() { self.setColumnSort('asc') },
|
||||
sortDesc: function() { self.setColumnSort('desc') },
|
||||
hideColumn: function() { self.hideColumn() },
|
||||
showColumn: function() { self.showColumn(e) },
|
||||
// TODO: Delete or re-implement ...
|
||||
csv: function() { window.location.href = app.csvUrl },
|
||||
json: function() { window.location.href = "_rewrite/api/json" },
|
||||
urlImport: function() { showDialog('urlImport') },
|
||||
pasteImport: function() { showDialog('pasteImport') },
|
||||
uploadImport: function() { showDialog('uploadImport') },
|
||||
// END TODO
|
||||
deleteColumn: function() {
|
||||
var msg = "Are you sure? This will delete '" + self.state.currentColumn + "' from all documents.";
|
||||
// TODO:
|
||||
alert('This function needs to be re-implemented');
|
||||
return;
|
||||
if (confirm(msg)) costco.deleteColumn(self.state.currentColumn);
|
||||
},
|
||||
deleteRow: function() {
|
||||
var doc = _.find(self.model.currentDocuments.models, function(doc) {
|
||||
// important this is == as the currentRow will be string (as comes
|
||||
// from DOM) while id may be int
|
||||
return doc.id == self.state.currentRow
|
||||
});
|
||||
doc.destroy().then(function() {
|
||||
self.model.currentDocuments.remove(doc);
|
||||
my.notify("Row deleted successfully");
|
||||
})
|
||||
.fail(function(err) {
|
||||
my.notify("Errorz! " + err)
|
||||
})
|
||||
}
|
||||
}
|
||||
util.hide('data-table-menu');
|
||||
actions[$(e.target).attr('data-action')]();
|
||||
},
|
||||
|
||||
showTransformColumnDialog: function() {
|
||||
var $el = $('.dialog-content');
|
||||
util.show('dialog');
|
||||
var view = new my.ColumnTransform({
|
||||
model: this.model
|
||||
});
|
||||
view.state = this.state;
|
||||
view.render();
|
||||
$el.empty();
|
||||
$el.append(view.el);
|
||||
util.observeExit($el, function() {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},
|
||||
|
||||
showTransformDialog: function() {
|
||||
var $el = $('.dialog-content');
|
||||
util.show('dialog');
|
||||
var view = new recline.View.DataTransform({
|
||||
});
|
||||
view.render();
|
||||
$el.empty();
|
||||
$el.append(view.el);
|
||||
util.observeExit($el, function() {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},
|
||||
|
||||
setColumnSort: function(order) {
|
||||
this.model.query({
|
||||
sort: [
|
||||
[this.state.currentColumn, order]
|
||||
]
|
||||
});
|
||||
},
|
||||
|
||||
hideColumn: function() {
|
||||
this.hiddenFields.push(this.state.currentColumn);
|
||||
this.render();
|
||||
},
|
||||
|
||||
showColumn: function(e) {
|
||||
this.hiddenFields = _.without(this.hiddenFields, $(e.target).data('column'));
|
||||
this.render();
|
||||
},
|
||||
|
||||
// ======================================================
|
||||
// #### Templating
|
||||
template: ' \
|
||||
<div class="data-table-menu-overlay" style="display: none; z-index: 101; "> </div> \
|
||||
<ul class="data-table-menu"></ul> \
|
||||
<table class="data-table" cellspacing="0"> \
|
||||
<thead> \
|
||||
<tr> \
|
||||
{{#notEmpty}} \
|
||||
<th class="column-header"> \
|
||||
<div class="column-header-title"> \
|
||||
<a class="root-header-menu"></a> \
|
||||
<span class="column-header-name"></span> \
|
||||
</div> \
|
||||
</th> \
|
||||
{{/notEmpty}} \
|
||||
{{#fields}} \
|
||||
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \
|
||||
<div class="column-header-title"> \
|
||||
<a class="column-header-menu"></a> \
|
||||
<span class="column-header-name">{{label}}</span> \
|
||||
</div> \
|
||||
</div> \
|
||||
</th> \
|
||||
{{/fields}} \
|
||||
</tr> \
|
||||
</thead> \
|
||||
<tbody></tbody> \
|
||||
</table> \
|
||||
',
|
||||
|
||||
toTemplateJSON: function() {
|
||||
var modelData = this.model.toJSON()
|
||||
modelData.notEmpty = ( this.fields.length > 0 )
|
||||
// TODO: move this sort of thing into a toTemplateJSON method on Dataset?
|
||||
modelData.fields = _.map(this.fields, function(field) { return field.toJSON() });
|
||||
return modelData;
|
||||
},
|
||||
render: function() {
|
||||
var self = this;
|
||||
this.fields = this.model.fields.filter(function(field) {
|
||||
return _.indexOf(self.hiddenFields, field.id) == -1;
|
||||
});
|
||||
var htmls = $.mustache(this.template, this.toTemplateJSON());
|
||||
this.el.html(htmls);
|
||||
this.model.currentDocuments.forEach(function(doc) {
|
||||
var tr = $('<tr />');
|
||||
self.el.find('tbody').append(tr);
|
||||
var newView = new my.DataTableRow({
|
||||
model: doc,
|
||||
el: tr,
|
||||
fields: self.fields,
|
||||
});
|
||||
newView.render();
|
||||
});
|
||||
this.el.toggleClass('no-hidden', (self.hiddenFields.length == 0));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
// ## DataTableRow View for rendering an individual document.
|
||||
//
|
||||
// Since we want this to update in place it is up to creator to provider the element to attach to.
|
||||
// In addition you must pass in a fields in the constructor options. This should be list of fields for the DataTable.
|
||||
my.DataTableRow = Backbone.View.extend({
|
||||
initialize: function(options) {
|
||||
_.bindAll(this, 'render');
|
||||
this._fields = options.fields;
|
||||
this.el = $(this.el);
|
||||
this.model.bind('change', this.render);
|
||||
},
|
||||
|
||||
template: ' \
|
||||
<td><a class="row-header-menu"></a></td> \
|
||||
{{#cells}} \
|
||||
<td data-field="{{field}}"> \
|
||||
<div class="data-table-cell-content"> \
|
||||
<a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell"> </a> \
|
||||
<div class="data-table-cell-value">{{value}}</div> \
|
||||
</div> \
|
||||
</td> \
|
||||
{{/cells}} \
|
||||
',
|
||||
events: {
|
||||
'click .data-table-cell-edit': 'onEditClick',
|
||||
// cell editor
|
||||
'click .data-table-cell-editor .okButton': 'onEditorOK',
|
||||
'click .data-table-cell-editor .cancelButton': 'onEditorCancel'
|
||||
},
|
||||
|
||||
toTemplateJSON: function() {
|
||||
var doc = this.model;
|
||||
var cellData = this._fields.map(function(field) {
|
||||
return {field: field.id, value: doc.get(field.id)}
|
||||
})
|
||||
return { id: this.id, cells: cellData }
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.el.attr('data-id', this.model.id);
|
||||
var html = $.mustache(this.template, this.toTemplateJSON());
|
||||
$(this.el).html(html);
|
||||
return this;
|
||||
},
|
||||
|
||||
// Cell Editor
|
||||
// ===========
|
||||
|
||||
onEditClick: function(e) {
|
||||
var editing = this.el.find('.data-table-cell-editor-editor');
|
||||
if (editing.length > 0) {
|
||||
editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
|
||||
}
|
||||
$(e.target).addClass("hidden");
|
||||
var cell = $(e.target).siblings('.data-table-cell-value');
|
||||
cell.data("previousContents", cell.text());
|
||||
util.render('cellEditor', cell, {value: cell.text()});
|
||||
},
|
||||
|
||||
onEditorOK: function(e) {
|
||||
var cell = $(e.target);
|
||||
var rowId = cell.parents('tr').attr('data-id');
|
||||
var field = cell.parents('td').attr('data-field');
|
||||
var newValue = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
|
||||
var newData = {};
|
||||
newData[field] = newValue;
|
||||
this.model.set(newData);
|
||||
my.notify("Updating row...", {loader: true});
|
||||
this.model.save().then(function(response) {
|
||||
my.notify("Row updated successfully", {category: 'success'});
|
||||
})
|
||||
.fail(function() {
|
||||
my.notify('Error saving row', {
|
||||
category: 'error',
|
||||
persist: true
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
onEditorCancel: function(e) {
|
||||
var cell = $(e.target).parents('.data-table-cell-value');
|
||||
cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* ========================================================== */
|
||||
// ## Miscellaneous Utilities
|
||||
|
||||
var urlPathRegex = /^([^?]+)(\?.*)?/;
|
||||
|
||||
// Parse the Hash section of a URL into path and query string
|
||||
my.parseHashUrl = function(hashUrl) {
|
||||
var parsed = urlPathRegex.exec(hashUrl);
|
||||
if (parsed == null) {
|
||||
return {};
|
||||
} else {
|
||||
return {
|
||||
path: parsed[1],
|
||||
query: parsed[2] || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parse a URL query string (?xyz=abc...) into a dictionary.
|
||||
function parseQueryString(q) {
|
||||
my.parseQueryString = function(q) {
|
||||
var urlParams = {},
|
||||
e, d = function (s) {
|
||||
return unescape(s.replace(/\+/g, " "));
|
||||
@ -22,6 +522,27 @@ function parseQueryString(q) {
|
||||
return urlParams;
|
||||
}
|
||||
|
||||
// Parse the query string out of the URL hash
|
||||
my.parseHashQueryString = function() {
|
||||
q = my.parseHashUrl(window.location.hash).query;
|
||||
return my.parseQueryString(q);
|
||||
}
|
||||
|
||||
// Compse a Query String
|
||||
my.composeQueryString = function(queryParams) {
|
||||
var queryString = '?';
|
||||
var items = [];
|
||||
$.each(queryParams, function(key, value) {
|
||||
items.push(key + '=' + JSON.stringify(value));
|
||||
});
|
||||
queryString += items.join('&');
|
||||
return queryString;
|
||||
}
|
||||
|
||||
my.setHashQueryString = function(queryParams) {
|
||||
window.location.hash = window.location.hash.split('?')[0] + my.composeQueryString(queryParams);
|
||||
}
|
||||
|
||||
// ## notify
|
||||
//
|
||||
// Create a notification (a div.alert-message in div.alert-messsages) using provide messages and options. Options are:
|
||||
|
||||
507
test/backend.test.js
Normal file
507
test/backend.test.js
Normal file
@ -0,0 +1,507 @@
|
||||
(function ($) {
|
||||
module("Backend");
|
||||
|
||||
var memoryData = {
|
||||
metadata: {
|
||||
title: 'My Test Dataset'
|
||||
, name: '1-my-test-dataset'
|
||||
, id: 'test-dataset'
|
||||
},
|
||||
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}],
|
||||
documents: [
|
||||
{id: 0, x: 1, y: 2, z: 3}
|
||||
, {id: 1, x: 2, y: 4, z: 6}
|
||||
, {id: 2, x: 3, y: 6, z: 9}
|
||||
, {id: 3, x: 4, y: 8, z: 12}
|
||||
, {id: 4, x: 5, y: 10, z: 15}
|
||||
, {id: 5, x: 6, y: 12, z: 18}
|
||||
]
|
||||
};
|
||||
|
||||
function makeBackendDataset() {
|
||||
var backend = new recline.Model.BackendMemory();
|
||||
backend.addDataset(memoryData);
|
||||
var dataset = new recline.Model.Dataset({id: memoryData.metadata.id}, backend);
|
||||
return dataset;
|
||||
}
|
||||
|
||||
test('Memory Backend: basics', function () {
|
||||
var dataset = makeBackendDataset();
|
||||
expect(3);
|
||||
// convenience for tests - get the data that should get changed
|
||||
var data = dataset.backend.datasets[memoryData.metadata.id];
|
||||
dataset.fetch().then(function(datasetAgain) {
|
||||
equal(dataset.get('name'), data.metadata.name);
|
||||
deepEqual(_.pluck(dataset.fields.toJSON(), 'id'), _.pluck(data.fields, 'id'));
|
||||
equal(dataset.docCount, 6);
|
||||
});
|
||||
});
|
||||
|
||||
test('Memory Backend: query', function () {
|
||||
var dataset = makeBackendDataset();
|
||||
// convenience for tests - get the data that should get changed
|
||||
var data = dataset.backend.datasets[memoryData.metadata.id];
|
||||
var dataset = makeBackendDataset();
|
||||
var queryObj = {
|
||||
size: 4
|
||||
, offset: 2
|
||||
};
|
||||
dataset.query(queryObj).then(function(documentList) {
|
||||
deepEqual(data.documents[2], documentList.models[0].toJSON());
|
||||
});
|
||||
});
|
||||
|
||||
test('Memory Backend: query sort', function () {
|
||||
var dataset = makeBackendDataset();
|
||||
// convenience for tests - get the data that should get changed
|
||||
var data = dataset.backend.datasets[memoryData.metadata.id];
|
||||
var queryObj = {
|
||||
sort: [
|
||||
['y', 'desc']
|
||||
]
|
||||
};
|
||||
dataset.query(queryObj).then(function(docs) {
|
||||
var doc0 = dataset.currentDocuments.models[0].toJSON();
|
||||
equal(doc0.x, 6);
|
||||
});
|
||||
});
|
||||
|
||||
test('Memory Backend: update and delete', function () {
|
||||
var dataset = makeBackendDataset();
|
||||
// convenience for tests - get the data that should get changed
|
||||
var data = dataset.backend.datasets[memoryData.metadata.id];
|
||||
dataset.query().then(function(docList) {
|
||||
equal(docList.length, Math.min(100, data.documents.length));
|
||||
var doc1 = docList.models[0];
|
||||
deepEqual(doc1.toJSON(), data.documents[0]);
|
||||
|
||||
// Test UPDATE
|
||||
var newVal = 10;
|
||||
doc1.set({x: newVal});
|
||||
doc1.save().then(function() {
|
||||
equal(data.documents[0].x, newVal);
|
||||
})
|
||||
|
||||
// Test Delete
|
||||
doc1.destroy().then(function() {
|
||||
equal(data.documents.length, 5);
|
||||
equal(data.documents[0].x, memoryData.documents[1].x);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// TODO: move to fixtures
|
||||
var webstoreSchema = {
|
||||
"count": 3,
|
||||
"data": [
|
||||
{
|
||||
"name": "__id__",
|
||||
"type": "integer",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/__id__"
|
||||
},
|
||||
{
|
||||
"name": "date",
|
||||
"type": "text",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/date"
|
||||
},
|
||||
{
|
||||
"name": "geometry",
|
||||
"type": "text",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/geometry"
|
||||
},
|
||||
{
|
||||
"name": "amount",
|
||||
"type": "text",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/amount"
|
||||
}
|
||||
],
|
||||
"fields": [
|
||||
{
|
||||
"name": "type"
|
||||
},
|
||||
{
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"name": "values_url"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
webstoreData = {
|
||||
"count": null,
|
||||
"data": [
|
||||
{
|
||||
"__id__": 1,
|
||||
"amount": "100",
|
||||
"date": "2009-01-01",
|
||||
"geometry": null
|
||||
},
|
||||
{
|
||||
"__id__": 2,
|
||||
"amount": "200",
|
||||
"date": "2010-01-01",
|
||||
"geometry": null
|
||||
},
|
||||
{
|
||||
"__id__": 3,
|
||||
"amount": "300",
|
||||
"date": "2011-01-01",
|
||||
"geometry": null
|
||||
}
|
||||
],
|
||||
"fields": [
|
||||
{
|
||||
"name": "__id__"
|
||||
},
|
||||
{
|
||||
"name": "date"
|
||||
},
|
||||
{
|
||||
"name": "geometry"
|
||||
},
|
||||
{
|
||||
"name": "amount"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
test('Webstore Backend', function() {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
id: 'my-id',
|
||||
webstore_url: 'http://webstore.test.ckan.org/rufuspollock/demo/data'
|
||||
},
|
||||
'webstore'
|
||||
);
|
||||
var stub = sinon.stub($, 'ajax', function(options) {
|
||||
if (options.url.indexOf('schema.json') != -1) {
|
||||
return {
|
||||
done: function(callback) {
|
||||
callback(webstoreSchema);
|
||||
return this;
|
||||
},
|
||||
fail: function() {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
done: function(callback) {
|
||||
callback(webstoreData);
|
||||
},
|
||||
fail: function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dataset.fetch().done(function(dataset) {
|
||||
deepEqual(['__id__', 'date', 'geometry', 'amount'], _.pluck(dataset.fields.toJSON(), 'id'));
|
||||
equal(3, dataset.docCount)
|
||||
dataset.query().done(function(docList) {
|
||||
equal(3, docList.length)
|
||||
equal("2009-01-01", docList.models[0].get('date'));
|
||||
});
|
||||
});
|
||||
$.ajax.restore();
|
||||
});
|
||||
|
||||
|
||||
var dataProxyData = {
|
||||
"data": [
|
||||
[
|
||||
"1",
|
||||
"1950-01",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"2",
|
||||
"1950-02",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"3",
|
||||
"1950-03",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"4",
|
||||
"1950-04",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"5",
|
||||
"1950-05",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"6",
|
||||
"1950-06",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"7",
|
||||
"1950-07",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"8",
|
||||
"1950-08",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"9",
|
||||
"1950-09",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"10",
|
||||
"1950-10",
|
||||
"34.73"
|
||||
]
|
||||
],
|
||||
"fields": [
|
||||
"__id__",
|
||||
"date",
|
||||
"price"
|
||||
],
|
||||
"length": null,
|
||||
"max_results": 10,
|
||||
"url": "http://webstore.thedatahub.org/rufuspollock/gold_prices/data.csv"
|
||||
};
|
||||
|
||||
test('DataProxy Backend', function() {
|
||||
// needed only if not stubbing
|
||||
// stop();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'http://webstore.thedatahub.org/rufuspollock/gold_prices/data.csv'
|
||||
},
|
||||
'dataproxy'
|
||||
);
|
||||
|
||||
var stub = sinon.stub($, 'ajax', function(options) {
|
||||
var partialUrl = 'jsonpdataproxy.appspot.com';
|
||||
if (options.url.indexOf(partialUrl) != -1) {
|
||||
return {
|
||||
done: function(callback) {
|
||||
callback(dataProxyData);
|
||||
return this;
|
||||
},
|
||||
fail: function() {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dataset.fetch().done(function(dataset) {
|
||||
deepEqual(['__id__', 'date', 'price'], _.pluck(dataset.fields.toJSON(), 'id'));
|
||||
equal(null, dataset.docCount)
|
||||
dataset.query().done(function(docList) {
|
||||
equal(10, docList.length)
|
||||
equal("1950-01", docList.models[0].get('date'));
|
||||
// needed only if not stubbing
|
||||
start();
|
||||
});
|
||||
});
|
||||
$.ajax.restore();
|
||||
});
|
||||
|
||||
|
||||
var sample_gdocs_spreadsheet_data = {
|
||||
"feed": {
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"xmlns": "http://www.w3.org/2005/Atom",
|
||||
"xmlns$gsx": "http://schemas.google.com/spreadsheets/2006/extended",
|
||||
"title": {
|
||||
"$t": "Sheet1",
|
||||
"type": "text"
|
||||
},
|
||||
"author": [
|
||||
{
|
||||
"name": {
|
||||
"$t": "okfn.rufus.pollock"
|
||||
},
|
||||
"email": {
|
||||
"$t": "okfn.rufus.pollock@gmail.com"
|
||||
}
|
||||
}
|
||||
],
|
||||
"openSearch$startIndex": {
|
||||
"$t": "1"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/pub?key=0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc",
|
||||
"type": "text/html",
|
||||
"rel": "alternate"
|
||||
},
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "http://schemas.google.com/g/2005#feed"
|
||||
},
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values?alt=json-in-script",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
|
||||
"entry": [
|
||||
{
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"gsx$column-2": {
|
||||
"$t": "1"
|
||||
},
|
||||
"gsx$column-1": {
|
||||
"$t": "A"
|
||||
},
|
||||
"title": {
|
||||
"$t": "A",
|
||||
"type": "text"
|
||||
},
|
||||
"content": {
|
||||
"$t": "column-2: 1",
|
||||
"type": "text"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cokwr",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cokwr"
|
||||
}
|
||||
},
|
||||
{
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"gsx$column-2": {
|
||||
"$t": "2"
|
||||
},
|
||||
"gsx$column-1": {
|
||||
"$t": "b"
|
||||
},
|
||||
"title": {
|
||||
"$t": "b",
|
||||
"type": "text"
|
||||
},
|
||||
"content": {
|
||||
"$t": "column-2: 2",
|
||||
"type": "text"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cpzh4",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cpzh4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"gsx$column-2": {
|
||||
"$t": "3"
|
||||
},
|
||||
"gsx$column-1": {
|
||||
"$t": "c"
|
||||
},
|
||||
"title": {
|
||||
"$t": "c",
|
||||
"type": "text"
|
||||
},
|
||||
"content": {
|
||||
"$t": "column-2: 3",
|
||||
"type": "text"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cre1l",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cre1l"
|
||||
}
|
||||
}
|
||||
],
|
||||
"openSearch$totalResults": {
|
||||
"$t": "3"
|
||||
},
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values"
|
||||
}
|
||||
},
|
||||
"version": "1.0",
|
||||
"encoding": "UTF-8"
|
||||
}
|
||||
|
||||
test("GDoc Backend", function() {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'https://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values?alt=json'
|
||||
},
|
||||
'gdocs'
|
||||
);
|
||||
|
||||
var stub = sinon.stub($, 'getJSON', function(options, cb) {
|
||||
console.log('options are', options, cb);
|
||||
var partialUrl = 'spreadsheets.google.com';
|
||||
if (options.indexOf(partialUrl) != -1) {
|
||||
cb(sample_gdocs_spreadsheet_data)
|
||||
}
|
||||
});
|
||||
|
||||
dataset.fetch().then(function(dataset) {
|
||||
console.log('inside dataset:', dataset, dataset.fields, dataset.get('data'));
|
||||
deepEqual(['column-2', 'column-1'], _.pluck(dataset.fields.toJSON(), 'id'));
|
||||
//equal(null, dataset.docCount)
|
||||
dataset.query().then(function(docList) {
|
||||
equal(3, docList.length);
|
||||
console.log(docList.models[0]);
|
||||
equal("A", docList.models[0].get('column-1'));
|
||||
// needed only if not stubbing
|
||||
start();
|
||||
});
|
||||
});
|
||||
$.getJSON.restore();
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
@ -17,13 +17,13 @@
|
||||
<script src="sinon-qunit/1.0.0/sinon-qunit.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../src/model.js"></script>
|
||||
<script type="text/javascript" src="../src/backend.js"></script>
|
||||
<script type="text/javascript" src="model.test.js"></script>
|
||||
<script type="text/javascript" src="../src/backend.js"></script>
|
||||
<script type="text/javascript" src="backend.test.js"></script>
|
||||
<script type="text/javascript" src="../src/view.js"></script>
|
||||
<script type="text/javascript" src="../src/view-data-explorer.js"></script>
|
||||
<script type="text/javascript" src="../src/view-data-table.js"></script>
|
||||
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
|
||||
<script type="text/javascript" src="view.test.js"></script>
|
||||
<script type="text/javascript" src="util.test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">Qunit Tests</h1>
|
||||
|
||||
@ -1,484 +1,31 @@
|
||||
(function ($) {
|
||||
module("Dataset");
|
||||
module("Model");
|
||||
|
||||
test('Memory Backend', function () {
|
||||
var datasetId = 'test-dataset';
|
||||
var inData = {
|
||||
metadata: {
|
||||
title: 'My Test Dataset'
|
||||
, name: '1-my-test-dataset'
|
||||
, id: datasetId
|
||||
, headers: ['x', 'y', 'z']
|
||||
},
|
||||
documents: [
|
||||
{id: 0, x: 1, y: 2, z: 3}
|
||||
, {id: 1, x: 2, y: 4, z: 6}
|
||||
, {id: 2, x: 3, y: 6, z: 9}
|
||||
, {id: 3, x: 4, y: 8, z: 12}
|
||||
, {id: 4, x: 5, y: 10, z: 15}
|
||||
, {id: 5, x: 6, y: 12, z: 18}
|
||||
]
|
||||
};
|
||||
var backend = new recline.Model.BackendMemory();
|
||||
backend.addDataset(inData);
|
||||
var dataset = new recline.Model.Dataset({id: datasetId}, backend);
|
||||
// ### Start testing
|
||||
expect(10);
|
||||
// convenience for tests
|
||||
var data = backend.datasets[datasetId];
|
||||
dataset.fetch().then(function(datasetAgain) {
|
||||
equal(dataset.get('name'), data.metadata.name);
|
||||
deepEqual(dataset.get('headers'), data.metadata.headers);
|
||||
equal(dataset.docCount, 6);
|
||||
var queryObj = {
|
||||
size: 4
|
||||
, offset: 2
|
||||
};
|
||||
dataset.query(queryObj).then(function(documentList) {
|
||||
deepEqual(data.documents[2], documentList.models[0].toJSON());
|
||||
});
|
||||
var queryObj = {
|
||||
sort: [
|
||||
['y', 'desc']
|
||||
]
|
||||
};
|
||||
dataset.query(queryObj).then(function(docs) {
|
||||
var doc0 = dataset.currentDocuments.models[0].toJSON();
|
||||
equal(doc0.x, 6);
|
||||
});
|
||||
dataset.query().then(function(docList) {
|
||||
equal(docList.length, Math.min(100, data.documents.length));
|
||||
var doc1 = docList.models[0];
|
||||
deepEqual(doc1.toJSON(), data.documents[0]);
|
||||
|
||||
// Test UPDATE
|
||||
var newVal = 10;
|
||||
doc1.set({x: newVal});
|
||||
doc1.save().then(function() {
|
||||
equal(data.documents[0].x, newVal);
|
||||
})
|
||||
|
||||
// Test Delete
|
||||
doc1.destroy().then(function() {
|
||||
equal(data.documents.length, 5);
|
||||
equal(data.documents[0].x, inData.documents[1].x);
|
||||
});
|
||||
});
|
||||
test('Field: basics', function () {
|
||||
var field = new recline.Model.Field({
|
||||
id: 'x'
|
||||
});
|
||||
equal(field.attributes.label, 'x', 'Field label should be set from id');
|
||||
|
||||
var field = new recline.Model.Field({
|
||||
id: 'x',
|
||||
label: 'My label'
|
||||
});
|
||||
equal(field.attributes.label, 'My label', 'Field label should be set from id but not if explicitly provided');
|
||||
|
||||
raises(function() {
|
||||
var field = new recline.Model.Field('xxx');
|
||||
},
|
||||
'should throw an error if not passed in a hash with id'
|
||||
);
|
||||
});
|
||||
|
||||
// TODO: move to fixtures
|
||||
var webstoreSchema = {
|
||||
"count": 3,
|
||||
"data": [
|
||||
{
|
||||
"name": "__id__",
|
||||
"type": "integer",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/__id__"
|
||||
},
|
||||
{
|
||||
"name": "date",
|
||||
"type": "text",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/date"
|
||||
},
|
||||
{
|
||||
"name": "geometry",
|
||||
"type": "text",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/geometry"
|
||||
},
|
||||
{
|
||||
"name": "amount",
|
||||
"type": "text",
|
||||
"values_url": "/rufuspollock/demo/data/distinct/amount"
|
||||
}
|
||||
],
|
||||
"fields": [
|
||||
{
|
||||
"name": "type"
|
||||
},
|
||||
{
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"name": "values_url"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
webstoreData = {
|
||||
"count": null,
|
||||
"data": [
|
||||
{
|
||||
"__id__": 1,
|
||||
"amount": "100",
|
||||
"date": "2009-01-01",
|
||||
"geometry": null
|
||||
},
|
||||
{
|
||||
"__id__": 2,
|
||||
"amount": "200",
|
||||
"date": "2010-01-01",
|
||||
"geometry": null
|
||||
},
|
||||
{
|
||||
"__id__": 3,
|
||||
"amount": "300",
|
||||
"date": "2011-01-01",
|
||||
"geometry": null
|
||||
}
|
||||
],
|
||||
"fields": [
|
||||
{
|
||||
"name": "__id__"
|
||||
},
|
||||
{
|
||||
"name": "date"
|
||||
},
|
||||
{
|
||||
"name": "geometry"
|
||||
},
|
||||
{
|
||||
"name": "amount"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
test('Webstore Backend', function() {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
id: 'my-id',
|
||||
webstore_url: 'http://webstore.test.ckan.org/rufuspollock/demo/data'
|
||||
},
|
||||
'webstore'
|
||||
);
|
||||
var stub = sinon.stub($, 'ajax', function(options) {
|
||||
if (options.url.indexOf('schema.json') != -1) {
|
||||
return {
|
||||
done: function(callback) {
|
||||
callback(webstoreSchema);
|
||||
return this;
|
||||
},
|
||||
fail: function() {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
done: function(callback) {
|
||||
callback(webstoreData);
|
||||
},
|
||||
fail: function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dataset.fetch().done(function(dataset) {
|
||||
deepEqual(['__id__', 'date', 'geometry', 'amount'], dataset.get('headers'));
|
||||
equal(3, dataset.docCount)
|
||||
dataset.query().done(function(docList) {
|
||||
equal(3, docList.length)
|
||||
equal("2009-01-01", docList.models[0].get('date'));
|
||||
});
|
||||
});
|
||||
$.ajax.restore();
|
||||
});
|
||||
|
||||
|
||||
var dataProxyData = {
|
||||
"data": [
|
||||
[
|
||||
"1",
|
||||
"1950-01",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"2",
|
||||
"1950-02",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"3",
|
||||
"1950-03",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"4",
|
||||
"1950-04",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"5",
|
||||
"1950-05",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"6",
|
||||
"1950-06",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"7",
|
||||
"1950-07",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"8",
|
||||
"1950-08",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"9",
|
||||
"1950-09",
|
||||
"34.73"
|
||||
],
|
||||
[
|
||||
"10",
|
||||
"1950-10",
|
||||
"34.73"
|
||||
]
|
||||
],
|
||||
"fields": [
|
||||
"__id__",
|
||||
"date",
|
||||
"price"
|
||||
],
|
||||
"length": null,
|
||||
"max_results": 10,
|
||||
"url": "http://webstore.thedatahub.org/rufuspollock/gold_prices/data.csv"
|
||||
};
|
||||
|
||||
test('DataProxy Backend', function() {
|
||||
// needed only if not stubbing
|
||||
// stop();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'http://webstore.thedatahub.org/rufuspollock/gold_prices/data.csv'
|
||||
},
|
||||
'dataproxy'
|
||||
);
|
||||
|
||||
var stub = sinon.stub($, 'ajax', function(options) {
|
||||
var partialUrl = 'jsonpdataproxy.appspot.com';
|
||||
if (options.url.indexOf(partialUrl) != -1) {
|
||||
return {
|
||||
done: function(callback) {
|
||||
callback(dataProxyData);
|
||||
return this;
|
||||
},
|
||||
fail: function() {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dataset.fetch().done(function(dataset) {
|
||||
deepEqual(['__id__', 'date', 'price'], dataset.get('headers'));
|
||||
equal(null, dataset.docCount)
|
||||
dataset.query().done(function(docList) {
|
||||
equal(10, docList.length)
|
||||
equal("1950-01", docList.models[0].get('date'));
|
||||
// needed only if not stubbing
|
||||
start();
|
||||
});
|
||||
});
|
||||
$.ajax.restore();
|
||||
});
|
||||
|
||||
|
||||
var sample_gdocs_spreadsheet_data = {
|
||||
"feed": {
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"xmlns": "http://www.w3.org/2005/Atom",
|
||||
"xmlns$gsx": "http://schemas.google.com/spreadsheets/2006/extended",
|
||||
"title": {
|
||||
"$t": "Sheet1",
|
||||
"type": "text"
|
||||
},
|
||||
"author": [
|
||||
{
|
||||
"name": {
|
||||
"$t": "okfn.rufus.pollock"
|
||||
},
|
||||
"email": {
|
||||
"$t": "okfn.rufus.pollock@gmail.com"
|
||||
}
|
||||
}
|
||||
],
|
||||
"openSearch$startIndex": {
|
||||
"$t": "1"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/pub?key=0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc",
|
||||
"type": "text/html",
|
||||
"rel": "alternate"
|
||||
},
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "http://schemas.google.com/g/2005#feed"
|
||||
},
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values?alt=json-in-script",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
|
||||
"entry": [
|
||||
{
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"gsx$column-2": {
|
||||
"$t": "1"
|
||||
},
|
||||
"gsx$column-1": {
|
||||
"$t": "A"
|
||||
},
|
||||
"title": {
|
||||
"$t": "A",
|
||||
"type": "text"
|
||||
},
|
||||
"content": {
|
||||
"$t": "column-2: 1",
|
||||
"type": "text"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cokwr",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cokwr"
|
||||
}
|
||||
},
|
||||
{
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"gsx$column-2": {
|
||||
"$t": "2"
|
||||
},
|
||||
"gsx$column-1": {
|
||||
"$t": "b"
|
||||
},
|
||||
"title": {
|
||||
"$t": "b",
|
||||
"type": "text"
|
||||
},
|
||||
"content": {
|
||||
"$t": "column-2: 2",
|
||||
"type": "text"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cpzh4",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cpzh4"
|
||||
}
|
||||
},
|
||||
{
|
||||
"category": [
|
||||
{
|
||||
"term": "http://schemas.google.com/spreadsheets/2006#list",
|
||||
"scheme": "http://schemas.google.com/spreadsheets/2006"
|
||||
}
|
||||
],
|
||||
"updated": {
|
||||
"$t": "2010-07-12T18:32:16.200Z"
|
||||
},
|
||||
"gsx$column-2": {
|
||||
"$t": "3"
|
||||
},
|
||||
"gsx$column-1": {
|
||||
"$t": "c"
|
||||
},
|
||||
"title": {
|
||||
"$t": "c",
|
||||
"type": "text"
|
||||
},
|
||||
"content": {
|
||||
"$t": "column-2: 3",
|
||||
"type": "text"
|
||||
},
|
||||
"link": [
|
||||
{
|
||||
"href": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cre1l",
|
||||
"type": "application/atom+xml",
|
||||
"rel": "self"
|
||||
}
|
||||
],
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values/cre1l"
|
||||
}
|
||||
}
|
||||
],
|
||||
"openSearch$totalResults": {
|
||||
"$t": "3"
|
||||
},
|
||||
"id": {
|
||||
"$t": "http://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values"
|
||||
}
|
||||
},
|
||||
"version": "1.0",
|
||||
"encoding": "UTF-8"
|
||||
}
|
||||
|
||||
test("GDoc Backend", function() {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'https://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values?alt=json'
|
||||
},
|
||||
'gdocs'
|
||||
);
|
||||
|
||||
var stub = sinon.stub($, 'getJSON', function(options, cb) {
|
||||
console.log('options are', options, cb);
|
||||
var partialUrl = 'spreadsheets.google.com';
|
||||
if (options.indexOf(partialUrl) != -1) {
|
||||
cb(sample_gdocs_spreadsheet_data)
|
||||
}
|
||||
});
|
||||
|
||||
dataset.fetch().then(function(dataset) {
|
||||
console.log('inside dataset:', dataset, dataset.get('headers'), dataset.get('data'));
|
||||
deepEqual(['column-2', 'column-1'], dataset.get('headers'));
|
||||
//equal(null, dataset.docCount)
|
||||
dataset.query().then(function(docList) {
|
||||
equal(3, docList.length);
|
||||
console.log(docList.models[0]);
|
||||
equal("A", docList.models[0].get('column-1'));
|
||||
// needed only if not stubbing
|
||||
start();
|
||||
});
|
||||
});
|
||||
$.getJSON.restore();
|
||||
test('Dataset', function () {
|
||||
var meta = {id: 'test', title: 'xyz'};
|
||||
var dataset = new recline.Model.Dataset(meta);
|
||||
dataset.fields = new recline.Model.FieldList([{id: 'xx'}, {id: 'yy'}]);
|
||||
var out = dataset.toTemplateJSON();
|
||||
equal(out.fields.length, 2);
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
|
||||
22
test/util.test.js
Normal file
22
test/util.test.js
Normal file
@ -0,0 +1,22 @@
|
||||
(function ($) {
|
||||
module("Util");
|
||||
|
||||
test('parseHashUrl', function () {
|
||||
var out = recline.View.parseHashUrl('graph?x=y');
|
||||
equal(out.path, 'graph');
|
||||
equal(out.query, '?x=y');
|
||||
var out = recline.View.parseHashUrl('graph');
|
||||
equal(out.path, 'graph');
|
||||
equal(out.query, '');
|
||||
});
|
||||
|
||||
test('composeQueryString', function () {
|
||||
var params = {
|
||||
x: 'y',
|
||||
a: 'b'
|
||||
};
|
||||
var out = recline.View.composeQueryString(params);
|
||||
equal(out, '?x="y"&a="b"');
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
@ -13,13 +13,13 @@ test('new DataTableRow View', function () {
|
||||
var view = new recline.View.DataTableRow({
|
||||
model: doc
|
||||
, el: $el
|
||||
, headers: ['a', 'b']
|
||||
, fields: new recline.Model.FieldList([{id: 'a'}, {id: 'b'}])
|
||||
});
|
||||
view.render();
|
||||
ok($el.attr('data-id'), '1');
|
||||
var tds = $el.find('td');
|
||||
equal(tds.length, 3);
|
||||
equal($(tds[1]).attr('data-header'), 'a');
|
||||
equal($(tds[1]).attr('data-field'), 'a');
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user