knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
Rufus Pollock 2013-05-05 20:11:17 +01:00
commit 9d653439df
66 changed files with 1565 additions and 4790 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,39 @@
# Contributing to Recline
We welcome patches and pull requests. There are a few guidelines.
## General
* Please run the tests :-) (see below)
* Please do **not** build the dist files (e.g. dist/recline.js) when submitting
patches. dist files will get built automatically and if they are part of a
patch or pull request it makes them harder to review and more likely to
conflict.
* If possible have an issue to which the commits can relate. You can reference
an issue in the commits by just including #{issue-number} somewhere in the
commit message). Note if no issue exists suggest creating one.
## For larger changes
* Cleanup your code and affected code parts
* Run the tests from `/test/index.html` in different browsers (at least Chrome and FF)
* Update the documentation and tutorials where necessary
* Update `/_includes/recline-deps.html` if you change required files (e.g. leaflet libraries)
* Try to build the demos in `/demos/` with jekyll and then check out the `/demos/multiview/` which utilizes most aspects of Recline
You will also probably want to take a quick look at outline of the architecture which can be found in the [documentation online](http://okfnlabs.org/recline).
## Running tests
Run the tests by opening `test/index.html` in your browser.
## Demos and Documentation
Note that the demos and documentation utilize the [jekyll templating
system][jekyll] and to use them *locally* you will need to build them using
jekyll. Once installed, all you need to do from the command line is run jekyll:
jekyll
[jekyll]: https://github.com/mojombo/jekyll

47
README.md
View File

@ -1,7 +1,6 @@
A simple but powerful library for building data applications in pure Javascript and HTML.
<h3><a href="http://reclinejs.com/">Recline Website - including Overview, Documentation, Demos etc</a></h3>
<h3><a href="http://okfnlabs.org/recline/">Recline Website - including Overview, Documentation, Demos etc</a></h3>
## Features
@ -11,47 +10,11 @@ A simple but powerful library for building data applications in pure Javascript
* View and edit your data in clean grid interface
* Bulk update/clean your data using an easy scripting UI
* Visualize your data
* And more ... see <http://reclinejs.com/>
* And more ... see <http://okfnlabs.org/recline/>
## Developer Notes
## Contributing
Run the tests by opening `test/index.html` in your browser.
Note that the demos and documentation utilize the [jekyll templating
system][jekyll] and to use them *locally* you will need to build them using
jekyll. Once installed, all you need to do from the command line is run jekyll:
jekyll
[jekyll]: https://github.com/mojombo/jekyll
Notes on the architecture can be found in the [documentation online](http://okfnlabs.org/recline).
### Contributing
We welcome patches and pull requests and have a few guidelines.
General:
* Please do **not** build the dist files (e.g. dist/recline.js) when submitting
patches. dist files will get built automatically and if they are part of a
patch or pull request it makes them harder to review and more likely to
conflict.
* If possible have an issue to which the commits can relate. You can reference
an issue in the commits by just including #{issue-number} somewhere in the
commit message). Note if no issue exists suggest creating one.
For small bugfixes or enhancements:
* Please run the tests
For larger changes:
* Cleanup your code and affected code parts
* Run the tests from `/test/index.html` in different browsers (at least Chrome and FF)
* Update the documentation and tutorials where necessary
* Update `/_includes/recline-deps.html` if you change required files (e.g. leaflet libraries)
* Try to build the demos in `/demos/` with jekyll and then check out the `/demos/multiview/` which utilizes most aspects of Recline
See CONTRIBUTING.md.
### Contributors
@ -66,7 +29,7 @@ For larger changes:
## Changelog
### v0.6 - Aug/Sept 2012 (tbc)
### v0.6 - Sprint 2013 (tbc)
[v0.6 milestone](https://github.com/okfn/recline/issues?milestone=5)

8
_includes/backend-list.html
View File

@ -1,10 +1,10 @@
<ul>
<li><a href="{{page.root}}/docs/src/backend.gdocs.html">gdocs: Google Docs (Spreadsheet)</a></li>
<li><a href="https://github.com/okfn/recline.backend.gdocs">gdocs: Google Docs (Spreadsheet)</a></li>
<li><a href="{{page.root}}/docs/src/backend.csv.html">csv: CSV files</a></li>
<li><a href="{{page.root}}/docs/src/backend.solr.html">solr: SOLR</a> (partial)</li>
<li><a href="https://github.com/okfn/recline.backend.solr">solr: SOLR</a> (partial)</li>
<li><a href="{{page.root}}/docs/src/backend.elasticsearch.html">elasticsearch: ElasticSearch</a></li>
<li><a href="{{page.root}}/docs/src/backend.dataproxy.html">dataproxy: DataProxy (CSV and XLS on the Web)</a></li>
<li><a href="{{page.root}}/docs/src/backend.ckan.html">ckan: CKAN</a> &ndash; support for <a href="http://docs.ckan.org/en/latest/datastore.html">CKAN datastore</a></li>
<li><a href="{{page.root}}/docs/src/backend.couchdb.html">couchdb: CouchDB</a></li>
<li><a href="https://github.com/okfn/recline.backend.ckan">ckan: CKAN</a> &ndash; support for <a href="http://docs.ckan.org/en/latest/datastore.html">CKAN datastore</a></li>
<li><a href="https://github.com/okfn/recline.backend.couchdb">couchdb: CouchDB</a></li>
<li><a href="{{page.root}}/docs/src/backend.memory.html">memory: Memory (local data)</a></li>
</ul>

7
_includes/recline-deps.html
View File

@ -14,9 +14,9 @@
<link rel="stylesheet" href="{{page.root}}css/grid.css">
<link rel="stylesheet" href="{{page.root}}css/slickgrid.css">
<link rel="stylesheet" href="{{page.root}}css/flot.css">
<link rel="stylesheet" href="{{page.root}}css/transform.css">
<link rel="stylesheet" href="{{page.root}}css/map.css">
<link rel="stylesheet" href="{{page.root}}css/multiview.css">
<link rel="stylesheet" href="{{page.root}}css/timeline.css">
<!-- /Recline CSS components -->
<!-- 3rd party JS libraries -->
@ -55,14 +55,10 @@
<script type="text/javascript" src="{{page.root}}src/backend.gdocs.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.elasticsearch.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.csv.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.ckan.js"></script>
<script type="text/javascript" src="{{page.root}}src/backend.solr.js"></script>
<!-- views -->
<script type="text/javascript" src="{{page.root}}src/view.grid.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.slickgrid.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.transform.js"></script>
<script type="text/javascript" src="{{page.root}}src/data.transform.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.flot.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.graph.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.map.js"></script>
@ -70,6 +66,7 @@
<script type="text/javascript" src="{{page.root}}src/widget.pager.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.queryeditor.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.filtereditor.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.valuefilter.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.facetviewer.js"></script>
<script type="text/javascript" src="{{page.root}}src/widget.fields.js"></script>
<script type="text/javascript" src="{{page.root}}src/view.multiview.js"></script>

2
_layouts/default.html
View File

@ -96,7 +96,7 @@
<div class="span2">
<h5>Contacts</h5>
<ul style="list-style-type: none; margin-left: 0;">
<li><a href="http://twitter.com/ReclineJS">@ReclineJS</a></li>
<li><a href="http://twitter.com/okfnlabs">@OKFNLabs</a></li>
<li><a href="http://twitter.com/maxogden">@maxogden</a></li>
<li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
</ul>

37
css/flotr2.css
View File

@ -1,37 +0,0 @@
.recline-graph .graph {
height: 500px;
}
.recline-graph .legend table {
width: auto;
margin-bottom: 0;
}
.recline-graph .legend td {
padding: 5px;
line-height: 13px;
}
.recline-graph .graph .alert {
width: 450px;
margin: auto;
}
.flotr-mouse-value {
background-color: #FEE !important;
color: #000000 !important;
opacity: 0.8 !important;
border: 1px solid #fdd !important;
}
.flotr-legend {
border: none !important;
}
.flotr-legend-bg {
display: none;
}
.flotr-legend-color-box {
padding: 5px;
}

1
css/grid.css
View File

@ -193,4 +193,3 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
.recline-read-only a.row-header-menu {
display: none;
}

18
css/multiview.css
View File

@ -1,6 +1,5 @@
.recline-data-explorer .data-view-container {
display: block;
margin-right: 225px;
}
.recline-data-explorer .data-view-sidebar {
@ -98,6 +97,7 @@
.recline-filter-editor {
padding: 8px;
display: none;
}
.recline-filter-editor .filter-term a {
@ -110,11 +110,27 @@
width: 175px;
}
.recline-filter-editor input {
margin-top: 0.5em;
}
.recline-filter-editor .add-filter {
margin-top: 1em;
margin-bottom: 2em;
}
.recline-filter-editor .update-filter {
margin-top: 1em;
}
/**********************************************************
* Fields Widget
*********************************************************/
.recline-fields-view {
display: none;
}
.recline-fields-view .fields-list {
padding: 0;
}

3
css/timeline.css Normal file
View File

@ -0,0 +1,3 @@
.recline-timeline {
position: relative;
}

39
css/transform.css
View File

@ -1,39 +0,0 @@
.recline-transform .script {
margin-right: 10px;
}
.recline-transform .script textarea {
width: 100%;
height: 100px;
font-family: monospace;
}
.recline-transform h2 {
margin-bottom: 10px;
}
.recline-transform h2 .okButton {
margin-left: 10px;
margin-top: -2px;
}
.recline-transform .preview {
margin-right: 10px;
}
.expression-preview-parsing-status {
color: #999;
}
.expression-preview-parsing-status.error {
color: red;
}
.recline-transform .before-after .after {
font-style: italic;
}
.recline-transform .before-after .after.different {
font-weight: bold;
}

73
demos/couchdb/app.js
View File

@ -1,73 +0,0 @@
jQuery(function($) {
window.dataExplorer = null;
window.explorerDiv = $('.data-explorer-here');
var queryParameters = recline.View.parseQueryString(decodeURIComponent(window.location.search));
var dataset = new recline.Model.Dataset({
db_url: queryParameters['url'] || '/couchdb/yourcouchdb',
view_url: queryParameters['view_url'] || '/couchdb/yourcouchdb/_design/yourdesigndoc/_view/yourview',
backend: 'couchdb',
query_options: {
'key': '_id'
}
});
dataset.fetch().done(function(dataset) {
console.log('records: ' + dataset.records);
});
createExplorer(dataset);
});
// make Explorer creation / initialization in a function so we can call it
// again and again
var createExplorer = function(dataset, state) {
// remove existing data explorer view
var reload = false;
if (window.dataExplorer) {
window.dataExplorer.remove();
reload = true;
}
window.dataExplorer = null;
var $el = $('<div />');
$el.appendTo(window.explorerDiv);
var views = [
{
id: 'grid',
label: 'Grid',
view: new recline.View.SlickGrid({
model: dataset
}),
},
{
id: 'graph',
label: 'Graph',
view: new recline.View.Graph({
model: dataset
}),
},
{
id: 'map',
label: 'Map',
view: new recline.View.Map({
model: dataset
}),
},
{
id: 'transform',
label: 'Transform',
view: new recline.View.Transform({
model: dataset
})
}
];
window.dataExplorer = new recline.View.MultiView({
model: dataset,
el: $el,
state: state,
views: views
});
}

40
demos/couchdb/index.html
View File

@ -1,40 +0,0 @@
---
layout: container
title: CouchDB Multiview - Demos
recline-deps: true
root: ../../
---
<style type="text/css">
.recline-slickgrid {
height: 550px;
}
.recline-timeline .vmm-timeline {
height: 550px;
}
</style>
<div class="instructions">
<h2>Instructions</h2>
<p>To use this demo you will need a CouchDB instance running and accessible over HTTP. You should then pass the following 2 query parameters to this page:</p>
<pre>url: url-to-your-couchdb-instance
view_url: url-to-your-couchdb-view
Example:
http://path-to-this-page/?url=/mycouchdb/&amp;view_url=/mycouchdb/_design/yourdesigndoc/_view/yourview
</pre>
<p>Note that if the CouchDB database is <em>not</em> running on the same domain as this page then the host it is on <em>must</em> support CORS &ndash; the simplest approach here is probably to set up a reverse proxy or proxy so your CouchDB database appears on the local domain at e.g. /mycouchdb/.</p>
</div>
<h2>Demo</h2>
<div class="data-explorer-here"></div>
<div style="clear: both;"></div>
<script type="text/javascript" src="../../src/backend.couchdb.js"></script>
<script type="text/javascript" src="app.js"></script>

15
demos/index.html
View File

@ -92,18 +92,3 @@ root: ../
<hr />
<div class="row" id="couchdb">
<div class="span4">
<div class="well">
<h3><a href="couchdb/">CouchDB Demo</a></h3>
<p>Using CouchDB with Recline Multiview to provide an elegant powerful
browser for a CouchDB database and view.</p>
</div>
</div>
<div class="span8">
<a href="multiview/"><img src="http://farm8.staticflickr.com/7251/7508402742_03c74a9763_c.jpg" style="width: 100%" /></a>
</div>
</div>
<hr />

9
demos/multiview/app.js
View File

@ -27,7 +27,7 @@ jQuery(function($) {
);
dataset = new recline.Model.Dataset(datasetInfo);
} else {
var dataset = new recline.Model.Dataset({
dataset = new recline.Model.Dataset({
records: [
{id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
{id: 1, date: '2011-02-02', x: 2, y: 4, z: 24, country: 'UK', title: 'second', lat:54.97, lon:-1.60},
@ -89,13 +89,6 @@ var createExplorer = function(dataset, state) {
view: new recline.View.Map({
model: dataset
})
},
{
id: 'transform',
label: 'Transform',
view: new recline.View.Transform({
model: dataset
})
}
];

97
dist/recline.css vendored
View File

@ -24,43 +24,7 @@
opacity: 0.8 !important;
border: 1px solid #fdd !important;
}
.recline-graph .graph {
height: 500px;
}
.recline-graph .legend table {
width: auto;
margin-bottom: 0;
}
.recline-graph .legend td {
padding: 5px;
line-height: 13px;
}
.recline-graph .graph .alert {
width: 450px;
margin: auto;
}
.flotr-mouse-value {
background-color: #FEE !important;
color: #000000 !important;
opacity: 0.8 !important;
border: 1px solid #fdd !important;
}
.flotr-legend {
border: none !important;
}
.flotr-legend-bg {
display: none;
}
.flotr-legend-color-box {
padding: 5px;
}/**********************************************************
/**********************************************************
* (Data) Grid
*********************************************************/
@ -255,7 +219,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
.recline-read-only a.row-header-menu {
display: none;
}
.recline-map .map {
height: 500px;
}
@ -286,7 +249,6 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
}
.recline-data-explorer .data-view-container {
display: block;
margin-right: 225px;
}
.recline-data-explorer .data-view-sidebar {
@ -384,6 +346,7 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
.recline-filter-editor {
padding: 8px;
display: none;
}
.recline-filter-editor .filter-term a {
@ -396,11 +359,27 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
width: 175px;
}
.recline-filter-editor input {
margin-top: 0.5em;
}
.recline-filter-editor .add-filter {
margin-top: 1em;
margin-bottom: 2em;
}
.recline-filter-editor .update-filter {
margin-top: 1em;
}
/**********************************************************
* Fields Widget
*********************************************************/
.recline-fields-view {
display: none;
}
.recline-fields-view .fields-list {
padding: 0;
}
@ -635,42 +614,6 @@ classes should alter those!
cursor: pointer;
}
.recline-transform .script {
margin-right: 10px;
.recline-timeline {
position: relative;
}
.recline-transform .script textarea {
width: 100%;
height: 100px;
font-family: monospace;
}
.recline-transform h2 {
margin-bottom: 10px;
}
.recline-transform h2 .okButton {
margin-left: 10px;
margin-top: -2px;
}
.recline-transform .preview {
margin-right: 10px;
}
.expression-preview-parsing-status {
color: #999;
}
.expression-preview-parsing-status.error {
color: red;
}
.recline-transform .before-after .after {
font-style: italic;
}
.recline-transform .before-after .after.different {
font-weight: bold;
}

51
dist/recline.dataset.js vendored
View File

@ -55,8 +55,8 @@ my.Dataset = Backbone.Model.extend({
if (this.backend !== recline.Backend.Memory) {
this.backend.fetch(this.toJSON())
.done(handleResults)
.fail(function(arguments) {
dfd.reject(arguments);
.fail(function(args) {
dfd.reject(args);
});
} else {
// special case where we have been given data directly
@ -79,8 +79,8 @@ my.Dataset = Backbone.Model.extend({
.done(function() {
dfd.resolve(self);
})
.fail(function(arguments) {
dfd.reject(arguments);
.fail(function(args) {
dfd.reject(args);
});
}
@ -159,20 +159,6 @@ my.Dataset = Backbone.Model.extend({
return this._store.save(this._changes, this.toJSON());
},
transform: function(editFunc) {
var self = this;
if (!this._store.transform) {
alert('Transform is not supported with this backend: ' + this.get('backend'));
return;
}
this.trigger('recline:flash', {message: "Updating all visible docs. This could take a while...", persist: true, loader: true});
this._store.transform(editFunc).done(function() {
// reload data as records have changed
self.query();
self.trigger('recline:flash', {message: "Records updated successfully"});
});
},
// ### query
//
// AJAX method with promise API to get records from the backend.
@ -198,9 +184,9 @@ my.Dataset = Backbone.Model.extend({
self.trigger('query:done');
dfd.resolve(self.records);
})
.fail(function(arguments) {
self.trigger('query:fail', arguments);
dfd.reject(arguments);
.fail(function(args) {
self.trigger('query:fail', args);
dfd.reject(args);
});
return dfd.promise();
},
@ -309,9 +295,11 @@ my.Record = Backbone.Model.extend({
//
// For the provided Field get the corresponding rendered computed data value
// for this record.
//
// NB: if field is undefined a default '' value will be returned
getFieldValue: function(field) {
val = this.getFieldValueUnrendered(field);
if (field.renderer) {
if (field && !_.isUndefined(field.renderer)) {
val = field.renderer(val, field, this.toJSON());
}
return val;
@ -321,7 +309,12 @@ my.Record = Backbone.Model.extend({
//
// For the provided Field get the corresponding computed data value
// for this record.
//
// NB: if field is undefined a default '' value will be returned
getFieldValueUnrendered: function(field) {
if (!field) {
return '';
}
var val = this.get(field.id);
if (field.deriver) {
val = field.deriver(val, field, this);
@ -443,7 +436,7 @@ my.Field = Backbone.Model.extend({
if (val && typeof val === 'string') {
val = val.replace(/(https?:\/\/[^ ]+)/g, '<a href="$1">$1</a>');
}
return val
return val;
}
}
}
@ -822,18 +815,6 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {};
});
return facetResults;
};
this.transform = function(editFunc) {
var dfd = new Deferred();
// TODO: should we clone before mapping? Do not see the point atm.
self.records = _.map(self.records, editFunc);
// now deal with deletes (i.e. nulls)
self.records = _.filter(self.records, function(record) {
return record != null;
});
dfd.resolve();
return dfd.promise();
};
};
}(this.recline.Backend.Memory));

1283
dist/recline.js vendored
View File

File diff suppressed because it is too large Load Diff

2
docs/index.html
View File

@ -62,7 +62,7 @@ root: ../
<li><a href="src/view.multiview.html">MultiView View (plus common view code)</a></li>
<li><a href="src/view.slickgrid.html">Grid View</a> (using the excellent <a href="https://github.com/mleibman/SlickGrid">Slickgrid</a>)</li>
<li><a href="src/view.grid.html">Grid View (no dependencies)</a></li>
<li><a href="src/view.graph.html">Graph View (based on Flot)</a></li>
<li><a href="src/view.flot.html">Graph View (based on Flot)</a></li>
<li><a href="src/view.map.html">Map View (based on Leaflet)</a></li>
<li><a href="src/view.timeline.html">Timeline View</a> (using the excellent <a href="http://timeline.verite.co/">Verite Timeline</a>)</li>
</ul>

125
docs/src/backend.ckan.html
View File

@ -1,125 +0,0 @@
<!DOCTYPE html> <html> <head> <title>backend.ckan.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.ckan.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">&#182;</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">Backend</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">Backend</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">Backend</span><span class="p">.</span><span class="nx">Ckan</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">Backend</span><span class="p">.</span><span class="nx">Ckan</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">&#182;</a> </div> <h2>CKAN Backend</h2>
<p>This provides connection to the CKAN DataStore (v2)</p>
<p>General notes</p>
<p>We need 2 things to make most requests:</p>
<ol>
<li>CKAN API endpoint</li>
<li>ID of resource for which request is being made</li>
</ol>
<p>There are 2 ways to specify this information.</p>
<p>EITHER (checked in order): </p>
<ul>
<li>Every dataset must have an id equal to its resource id on the CKAN instance</li>
<li>The dataset has an endpoint attribute pointing to the CKAN API endpoint</li>
</ul>
<p>OR:</p>
<p>Set the url attribute of the dataset to point to the Resource on the CKAN instance. The endpoint and id will then be automatically computed.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;ckan&#39;</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">&#182;</a> </div> <p>Default CKAN API endpoint used for requests (you can change this but it will affect every request!)</p>
<p>DEPRECATION: this will be removed in v0.7. Please set endpoint attribute on dataset instead</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">API_ENDPOINT</span> <span class="o">=</span> <span class="s1">&#39;http://datahub.io/api&#39;</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">&#182;</a> </div> <h3>fetch</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">fetch</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="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">endpoint</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataStore</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">endpoint</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">_parseCkanResourceUrl</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span>
<span class="nx">dataset</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">resource_id</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataStore</span><span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">endpoint</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">jqxhr</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">search</span><span class="p">({</span><span class="nx">resource_id</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">limit</span><span class="o">:</span> <span class="mi">0</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></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>map ckan types to our usual types ...</p> </td> <td class="code"> <div class="highlight"><pre> <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">map</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">result</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="nx">field</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">type</span> <span class="k">in</span> <span class="nx">CKAN_TYPES_MAP</span> <span class="o">?</span> <span class="nx">CKAN_TYPES_MAP</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">type</span><span class="p">]</span> <span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">type</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">field</span><span class="p">;</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">fields</span><span class="o">:</span> <span class="nx">fields</span><span class="p">,</span>
<span class="nx">useMemoryStore</span><span class="o">:</span> <span class="kc">false</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">out</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></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>only put in the module namespace so we can access for tests!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">_normalizeQuery</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="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">actualQuery</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">resource_id</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
<span class="nx">q</span><span class="o">:</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">q</span><span class="p">,</span>
<span class="nx">limit</span><span class="o">:</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">size</span> <span class="o">||</span> <span class="mi">10</span><span class="p">,</span>
<span class="nx">offset</span><span class="o">:</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">from</span> <span class="o">||</span> <span class="mi">0</span>
<span class="p">};</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">sort</span> <span class="o">&amp;&amp;</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">sort</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_tmp</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">queryObj</span><span class="p">.</span><span class="nx">sort</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sortObj</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">sortObj</span><span class="p">.</span><span class="nx">field</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">sortObj</span><span class="p">.</span><span class="nx">order</span> <span class="o">||</span> <span class="s1">&#39;&#39;</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">actualQuery</span><span class="p">.</span><span class="nx">sort</span> <span class="o">=</span> <span class="nx">_tmp</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;,&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">actualQuery</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">my</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="nx">queryObj</span><span class="p">,</span> <span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">endpoint</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataStore</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">endpoint</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">_parseCkanResourceUrl</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span>
<span class="nx">dataset</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">resource_id</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">DataStore</span><span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">endpoint</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">actualQuery</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">_normalizeQuery</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">,</span> <span class="nx">dataset</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">jqxhr</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="nx">actualQuery</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="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">total</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">result</span><span class="p">.</span><span class="nx">total</span><span class="p">,</span>
<span class="nx">hits</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">result</span><span class="p">.</span><span class="nx">records</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">out</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></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <h3>DataStore</h3>
<p>Simple wrapper around the CKAN DataStore API</p>
<p>@param endpoint: CKAN api endpoint (e.g. http://datahub.io/api)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">DataStore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">endpoint</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">endpoint</span><span class="o">:</span> <span class="nx">endpoint</span> <span class="o">||</span> <span class="nx">my</span><span class="p">.</span><span class="nx">API_ENDPOINT</span>
<span class="p">};</span>
<span class="nx">that</span><span class="p">.</span><span class="nx">search</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>
<span class="kd">var</span> <span class="nx">searchUrl</span> <span class="o">=</span> <span class="nx">that</span><span class="p">.</span><span class="nx">endpoint</span> <span class="o">+</span> <span class="s1">&#39;/3/action/datastore_search&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">searchUrl</span><span class="p">,</span>
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">jqxhr</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">that</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">&#182;</a> </div> <p>Parse a normal CKAN resource URL and return API endpoint etc</p>
<p>Normal URL is something like http://demo.ckan.org/dataset/some-dataset/resource/eb23e809-ccbb-4ad1-820a-19586fc4bebd</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">_parseCkanResourceUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">parts</span> <span class="o">=</span> <span class="nx">url</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">parts</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">resource_id</span><span class="o">:</span> <span class="nx">parts</span><span class="p">[</span><span class="nx">len</span><span class="o">-</span><span class="mi">1</span><span class="p">],</span>
<span class="nx">endpoint</span><span class="o">:</span> <span class="nx">parts</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,[</span><span class="nx">len</span><span class="o">-</span><span class="mi">4</span><span class="p">]).</span><span class="nx">join</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;/api&#39;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">CKAN_TYPES_MAP</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">&#39;int4&#39;</span><span class="o">:</span> <span class="s1">&#39;integer&#39;</span><span class="p">,</span>
<span class="s1">&#39;int8&#39;</span><span class="o">:</span> <span class="s1">&#39;integer&#39;</span><span class="p">,</span>
<span class="s1">&#39;float8&#39;</span><span class="o">:</span> <span class="s1">&#39;float&#39;</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">Backend</span><span class="p">.</span><span class="nx">Ckan</span><span class="p">));</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

432
docs/src/backend.couchdb.html
View File

@ -1,432 +0,0 @@
<!DOCTYPE html> <html> <head> <title>backend.couchdb.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.couchdb.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">&#182;</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">Backend</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">Backend</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">Backend</span><span class="p">.</span><span class="nx">CouchDB</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">Backend</span><span class="p">.</span><span class="nx">CouchDB</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>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;couchdb&#39;</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">&#182;</a> </div> <h2>CouchDB Wrapper</h2>
<p>Connecting to [CouchDB] (http://www.couchdb.apache.org/) endpoints.
@param {String} endpoint: url for CouchDB database, e.g. for Couchdb running
on localhost:5984 with database // ckan-std it would be:</p>
<p>TODO Add user/password arguments for couchdb authentication support.</p>
<p>See the example how to use this in: "demos/couchdb/"</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">CouchDBWrapper</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">db_url</span><span class="p">,</span> <span class="nx">view_url</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="nx">self</span><span class="p">.</span><span class="nx">endpoint</span> <span class="o">=</span> <span class="nx">db_url</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">view_url</span> <span class="o">=</span> <span class="p">(</span><span class="nx">view_url</span><span class="p">)</span> <span class="o">?</span> <span class="nx">view_url</span> <span class="o">:</span> <span class="nx">db_url</span><span class="o">+</span><span class="s1">&#39;/&#39;</span><span class="o">+</span><span class="s1">&#39;_all_docs&#39;</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">options</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">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</span>
<span class="p">},</span>
<span class="nx">options</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_makeRequest</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">headers</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">extras</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">headers</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">extras</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">beforeSend</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">req</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="nx">headers</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">req</span><span class="p">.</span><span class="nx">setRequestHeader</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="p">}</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="nx">data</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">extras</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</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-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h3>mapping</h3>
<p>Get mapping for this database.
Assume all docs in the view have the same schema so
limit query to single result.</p>
<p>@return promise compatible deferred object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">mapping</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">schemaUrl</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">view_url</span> <span class="o">+</span> <span class="s1">&#39;?limit=1&amp;include_docs=true&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_makeRequest</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">schemaUrl</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">dataType</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">jqxhr</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">&#182;</a> </div> <h3>get</h3>
<p>Get record corresponding to specified id</p>
<p>@return promise compatible deferred object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">get</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_id</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">base</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">endpoint</span> <span class="o">+</span> <span class="s1">&#39;/&#39;</span> <span class="o">+</span> <span class="nx">_id</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_makeRequest</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">base</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</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">&#182;</a> </div> <h3>upsert</h3>
<p>create / update a record to CouchDB backend</p>
<p>@param {Object} doc an object to insert to the index.
@return deferred supporting promise API</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">upsert</span> <span class="o">=</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="kd">var</span> <span class="nx">data</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">doc</span><span class="p">);</span>
<span class="nx">url</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">endpoint</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">_id</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">url</span> <span class="o">+=</span> <span class="s1">&#39;/&#39;</span> <span class="o">+</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">_id</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">&#182;</a> </div> <p>use a PUT, not a POST to update the document:
http://wiki.apache.org/couchdb/HTTP<em>Document</em>API#POST</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_makeRequest</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">url</span><span class="p">,</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;PUT&#39;</span><span class="p">,</span>
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</span><span class="p">,</span>
<span class="nx">contentType</span><span class="o">:</span> <span class="s1">&#39;application/json&#39;</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">&#182;</a> </div> <h3>delete</h3>
<p>Delete a record from the CouchDB backend.</p>
<p>@param {Object} id id of object to delete
@return deferred supporting promise API</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">remove</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">_id</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">url</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">endpoint</span><span class="p">;</span>
<span class="nx">url</span> <span class="o">+=</span> <span class="s1">&#39;/&#39;</span> <span class="o">+</span> <span class="nx">_id</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_makeRequest</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">url</span><span class="p">,</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;DELETE&#39;</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</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">&#182;</a> </div> <h3>_normalizeQuery</h3>
<p>Convert the query object from Elastic Search format to a
Couchdb View API compatible format.
See: http://wiki.apache.org/couchdb/HTTP<em>view</em>API</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_normalizeQuery</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">out</span> <span class="o">=</span> <span class="nx">queryObj</span> <span class="o">&amp;&amp;</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">toJSON</span> <span class="o">?</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</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">queryObj</span><span class="p">);</span>
<span class="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">sort</span><span class="p">;</span>
<span class="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">query</span><span class="p">;</span>
<span class="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">filters</span><span class="p">;</span>
<span class="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
<span class="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">facets</span><span class="p">;</span>
<span class="nx">out</span><span class="p">[</span><span class="s1">&#39;skip&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">from</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
<span class="nx">out</span><span class="p">[</span><span class="s1">&#39;limit&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">out</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="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">from</span><span class="p">;</span>
<span class="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">size</span><span class="p">;</span>
<span class="nx">out</span><span class="p">[</span><span class="s1">&#39;include_docs&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">out</span><span class="p">;</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">&#182;</a> </div> <h3>query</h3>
<p>@param {Object} recline.Query instance.
@param {Object} additional couchdb view query options.
@return deferred supporting promise API</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</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="nx">query_object</span><span class="p">,</span> <span class="nx">query_options</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">norm_q</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_normalizeQuery</span><span class="p">(</span><span class="nx">query_object</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">view_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">q</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">query_options</span><span class="p">,</span> <span class="nx">norm_q</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_makeRequest</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">url</span><span class="p">,</span>
<span class="nx">data</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">q</span><span class="p">),</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">dataType</span><span class="p">,</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">jqxhr</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">&#182;</a> </div> <h2>CouchDB Backend</h2>
<p>Backbone connector for a CouchDB backend.</p>
<pre><code>var dataset = new recline.Model.Dataset({
db_url: path-to-couchdb-database e.g. '/couchdb/mydb',
view_url: path-to-couchdb-database-view e.g. '/couchdb/mydb/_design/design1/_views/view1',
backend: 'couchdb',
query_options: {
'key': '_id'
}
});
backend.query(query, dataset.toJSON()).done(function () { ... });
</code></pre>
<p>Alternatively:</p>
<pre><code>var dataset = new recline.Model.Dataset({ ... }, 'couchdb');
dataset.fetch();
var results = dataset.query(query_obj);
</code></pre>
<p>Additionally, the Dataset instance may define three methods:</p>
<p>function record<em>update (record, document) { ... }
function record</em>delete (record, document) { ... }
function record_create (record, document) { ... }</p>
<p>Where <code>record</code> is the JSON representation of the Record/Document instance
and <code>document</code> is the JSON document stored in couchdb.
When <em>all</em>docs view is used (default), a record is the same as a document
so these methods need not be defined.
They are most useful when using a custom view that performs a map-reduce
operation on each document to yield a record. Hence, when the record is
created, updated or deleted, an inverse operation must be performed on the original
document.</p>
<p>@param {string} url of couchdb database.
@param {string} (optional) url of couchdb view. default:<code>db_url</code>/<em>all</em>docs
@param {Object} (optional) query options accepted by couchdb views.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">couchOptions</span> <span class="o">=</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">&#182;</a> </div> <h3>fetch</h3>
<p>@param {object} dataset json object with the db<em>url, view</em>url, and query_options args.
@return promise object that resolves to the document mapping.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">fetch</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="p">{</span>
<span class="kd">var</span> <span class="nx">db_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">db_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">view_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">view_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">cdb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">CouchDBWrapper</span><span class="p">(</span><span class="nx">db_url</span><span class="p">,</span> <span class="nx">view_url</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></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>if 'doc' attribute is present, return schema of that
else return schema of 'value' attribute which contains
the map-reduced document.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">cdb</span><span class="p">.</span><span class="nx">mapping</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">result</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="nx">result</span><span class="p">.</span><span class="nx">rows</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">view_url</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="s2">&quot;_all_docs&quot;</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="nx">keys</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">row</span><span class="p">[</span><span class="s1">&#39;doc&#39;</span><span class="p">]);</span>
<span class="nx">keys</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">keys</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">k</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">k</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">!==</span> <span class="s1">&#39;_&#39;</span> <span class="p">});</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">keys</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">row</span><span class="p">[</span><span class="s1">&#39;value&#39;</span><span class="p">]);</span>
<span class="p">}</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">keys</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">k</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="s1">&#39;id&#39;</span> <span class="o">:</span> <span class="nx">k</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">fields</span><span class="o">:</span> <span class="nx">fieldData</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></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <h3>save</h3>
<p>Iterate through all the changes and save them to the server.
N.B. This method is asynchronous and attempts to do multiple
operation concurrently. This can be problematic when more than
one operation is requested on the same document (as in the case
of bulk column transforms).</p>
<p>@param {object} lists of create, update, delete.
@param {object} dataset json object.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">save</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">changes</span><span class="p">,</span> <span class="nx">dataset</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">total</span> <span class="o">=</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">creates</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">updates</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">deletes</span><span class="p">.</span><span class="nx">length</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">&#39;done&#39;</span><span class="o">:</span> <span class="p">[],</span> <span class="s1">&#39;fail&#39;</span><span class="o">:</span> <span class="p">[]</span> <span class="p">};</span>
<span class="kd">var</span> <span class="nx">decr_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">total</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">resolve_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">total</span> <span class="o">==</span> <span class="mi">0</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">results</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">i</span> <span class="k">in</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">creates</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">new_doc</span> <span class="o">=</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">creates</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">succ_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span><span class="nx">results</span><span class="p">.</span><span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="s1">&#39;op&#39;</span><span class="o">:</span> <span class="s1">&#39;create&#39;</span><span class="p">,</span> <span class="s1">&#39;record&#39;</span><span class="o">:</span> <span class="nx">new_doc</span><span class="p">,</span> <span class="s1">&#39;reason&#39;</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">});</span> <span class="p">}</span>
<span class="kd">var</span> <span class="nx">fail_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span><span class="nx">results</span><span class="p">.</span><span class="nx">fail</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="s1">&#39;op&#39;</span><span class="o">:</span> <span class="s1">&#39;create&#39;</span><span class="p">,</span> <span class="s1">&#39;record&#39;</span><span class="o">:</span> <span class="nx">new_doc</span><span class="p">,</span> <span class="s1">&#39;reason&#39;</span><span class="o">:</span> <span class="nx">msg</span><span class="p">});</span> <span class="p">}</span>
<span class="nx">_createDocument</span><span class="p">(</span><span class="nx">new_doc</span><span class="p">,</span> <span class="nx">dataset</span><span class="p">).</span><span class="nx">then</span><span class="p">([</span><span class="nx">decr_cb</span><span class="p">,</span> <span class="nx">succ_cb</span><span class="p">,</span> <span class="nx">resolve_cb</span><span class="p">],</span> <span class="p">[</span><span class="nx">decr_cb</span><span class="p">,</span> <span class="nx">fail_cb</span><span class="p">,</span> <span class="nx">resolve_cb</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">i</span> <span class="k">in</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">updates</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">new_doc</span> <span class="o">=</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">updates</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">succ_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span><span class="nx">results</span><span class="p">.</span><span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="s1">&#39;op&#39;</span><span class="o">:</span> <span class="s1">&#39;update&#39;</span><span class="p">,</span> <span class="s1">&#39;record&#39;</span><span class="o">:</span> <span class="nx">new_doc</span><span class="p">,</span> <span class="s1">&#39;reason&#39;</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">});</span> <span class="p">}</span>
<span class="kd">var</span> <span class="nx">fail_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span><span class="nx">results</span><span class="p">.</span><span class="nx">fail</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="s1">&#39;op&#39;</span><span class="o">:</span> <span class="s1">&#39;update&#39;</span><span class="p">,</span> <span class="s1">&#39;record&#39;</span><span class="o">:</span> <span class="nx">new_doc</span><span class="p">,</span> <span class="s1">&#39;reason&#39;</span><span class="o">:</span> <span class="nx">msg</span><span class="p">});</span> <span class="p">}</span>
<span class="nx">_updateDocument</span><span class="p">(</span><span class="nx">new_doc</span><span class="p">,</span> <span class="nx">dataset</span><span class="p">).</span><span class="nx">then</span><span class="p">([</span><span class="nx">decr_cb</span><span class="p">,</span> <span class="nx">succ_cb</span><span class="p">,</span> <span class="nx">resolve_cb</span><span class="p">],</span> <span class="p">[</span><span class="nx">decr_cb</span><span class="p">,</span> <span class="nx">fail_cb</span><span class="p">,</span> <span class="nx">resolve_cb</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">i</span> <span class="k">in</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">deletes</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">old_doc</span> <span class="o">=</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">deletes</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">succ_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span><span class="nx">results</span><span class="p">.</span><span class="nx">done</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="s1">&#39;op&#39;</span><span class="o">:</span> <span class="s1">&#39;delete&#39;</span><span class="p">,</span> <span class="s1">&#39;record&#39;</span><span class="o">:</span> <span class="nx">old_doc</span><span class="p">,</span> <span class="s1">&#39;reason&#39;</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">});</span> <span class="p">}</span>
<span class="kd">var</span> <span class="nx">fail_cb</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span><span class="nx">results</span><span class="p">.</span><span class="nx">fail</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="s1">&#39;op&#39;</span><span class="o">:</span> <span class="s1">&#39;delete&#39;</span><span class="p">,</span> <span class="s1">&#39;record&#39;</span><span class="o">:</span> <span class="nx">old_doc</span><span class="p">,</span> <span class="s1">&#39;reason&#39;</span><span class="o">:</span> <span class="nx">msg</span><span class="p">});</span> <span class="p">}</span>
<span class="nx">_deleteDocument</span><span class="p">(</span><span class="nx">new_doc</span><span class="p">,</span> <span class="nx">dataset</span><span class="p">).</span><span class="nx">then</span><span class="p">([</span><span class="nx">decr_cb</span><span class="p">,</span> <span class="nx">succ_cb</span><span class="p">,</span> <span class="nx">resolve_cb</span><span class="p">],</span> <span class="p">[</span><span class="nx">decr_cb</span><span class="p">,</span> <span class="nx">fail_cb</span><span class="p">,</span> <span class="nx">resolve_cb</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></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h3>query</h3>
<p>fetch the data from the couchdb view and filter it.
@param {Object} recline.Dataset instance
@param {Object} recline.Query instance.</p> </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="kd">function</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">,</span> <span class="nx">dataset</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">db_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">db_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">view_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">view_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">query_options</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">query_options</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">cdb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">CouchDBWrapper</span><span class="p">(</span><span class="nx">db_url</span><span class="p">,</span> <span class="nx">view_url</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">cdb_q</span> <span class="o">=</span> <span class="nx">cdb</span><span class="p">.</span><span class="nx">_normalizeQuery</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">,</span> <span class="nx">query_options</span><span class="p">);</span>
<span class="nx">cdb</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="nx">query_options</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">records</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">query_result</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">hits</span><span class="o">:</span> <span class="p">[],</span> <span class="nx">total</span><span class="o">:</span> <span class="mi">0</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">records</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">record</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="p">{};</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">record</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s1">&#39;doc&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">doc</span> <span class="o">=</span> <span class="nx">record</span><span class="p">[</span><span class="s1">&#39;doc&#39;</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">&#182;</a> </div> <p>couchdb uses _id to identify documents, Backbone models use id.
we add this fix so backbone.Model works correctly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">[</span><span class="s1">&#39;_id&#39;</span><span class="p">];</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">doc</span> <span class="o">=</span> <span class="nx">record</span><span class="p">[</span><span class="s1">&#39;value&#39;</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">&#182;</a> </div> <p>using dunder to create compound id. need something more robust.
couchdb uses _id to identify documents, Backbone models use id.
we add this fix so backbone.Model works correctly.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">doc</span><span class="p">[</span><span class="s1">&#39;_id&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">record</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">]</span> <span class="o">+</span> <span class="s1">&#39;__&#39;</span> <span class="o">+</span> <span class="nx">record</span><span class="p">[</span><span class="s1">&#39;key&#39;</span><span class="p">];</span>
<span class="p">}</span>
<span class="nx">query_result</span><span class="p">.</span><span class="nx">total</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span><span class="p">.</span><span class="nx">push</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-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>the following block is borrowed verbatim from recline.backend.Memory
search (with filtering, faceting, and sorting) should be factored
out into a separate library.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span> <span class="o">=</span> <span class="nx">_applyFilters</span><span class="p">(</span><span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">);</span>
<span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span> <span class="o">=</span> <span class="nx">_applyFreeTextQuery</span><span class="p">(</span><span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span><span class="p">,</span> <span class="nx">queryObj</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">&#182;</a> </div> <p>not complete sorting!</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">queryObj</span><span class="p">.</span><span class="nx">sort</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sortObj</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fieldName</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">sortObj</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</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="kd">var</span> <span class="nx">_out</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">sortObj</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">].</span><span class="nx">order</span> <span class="o">==</span> <span class="s1">&#39;asc&#39;</span><span class="p">)</span> <span class="o">?</span> <span class="nx">_out</span> <span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="o">*</span><span class="nx">_out</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nx">query_result</span><span class="p">.</span><span class="nx">total</span> <span class="o">=</span> <span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="nx">query_result</span><span class="p">.</span><span class="nx">facets</span> <span class="o">=</span> <span class="nx">_computeFacets</span><span class="p">(</span><span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">);</span>
<span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span> <span class="o">=</span> <span class="nx">query_result</span><span class="p">.</span><span class="nx">hits</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="nx">cdb_q</span><span class="p">.</span><span class="nx">skip</span><span class="p">,</span> <span class="nx">cdb_q</span><span class="p">.</span><span class="nx">skip</span> <span class="o">+</span> <span class="nx">cdb_q</span><span class="p">.</span><span class="nx">limit</span><span class="o">+</span><span class="mi">1</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">query_result</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></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>in place filtering</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">_applyFilters</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</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="nx">queryObj</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">results</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">results</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="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">doc</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">==</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]);</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">results</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">&#182;</a> </div> <p>we OR across fields but AND across terms in query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">_applyFreeTextQuery</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">queryObj</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">terms</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">q</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">);</span>
<span class="nx">results</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rawdoc</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">matches</span> <span class="o">=</span> <span class="kc">true</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">terms</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">term</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">foundmatch</span> <span class="o">=</span> <span class="kc">false</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">keys</span><span class="p">(</span><span class="nx">rawdoc</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="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">rawdoc</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="nx">value</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">value</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span> <span class="p">}</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>TODO regexes?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">foundmatch</span> <span class="o">=</span> <span class="nx">foundmatch</span> <span class="o">||</span> <span class="p">(</span><span class="nx">value</span> <span class="o">===</span> <span class="nx">term</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">&#182;</a> </div> <p>TODO: early out (once we are true should break to spare unnecessary testing)
if (foundmatch) return true;</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">});</span>
<span class="nx">matches</span> <span class="o">=</span> <span class="nx">matches</span> <span class="o">&amp;&amp;</span> <span class="nx">foundmatch</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">&#182;</a> </div> <p>TODO: early out (once false should break to spare unnecessary testing)
if (!matches) return false;</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">});</span>
<span class="k">return</span> <span class="nx">matches</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">results</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">_computeFacets</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">records</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">facetResults</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">facetResults</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="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</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">&#182;</a> </div> <p>TODO: remove dependency on recline.Model</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Facet</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="nx">facetId</span><span class="p">}).</span><span class="nx">toJSON</span><span class="p">();</span>
<span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">].</span><span class="nx">termsall</span> <span class="o">=</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">&#182;</a> </div> <p>faceting</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">records</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="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nx">terms</span><span class="p">.</span><span class="nx">field</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">tmp</span> <span class="o">=</span> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">[</span><span class="nx">val</span><span class="p">]</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">[</span><span class="nx">val</span><span class="p">]</span> <span class="o">?</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">[</span><span class="nx">val</span><span class="p">]</span> <span class="o">+</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">tmp</span><span class="p">.</span><span class="nx">missing</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">missing</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</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="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tmp</span> <span class="o">=</span> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">terms</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">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">count</span><span class="p">,</span> <span class="nx">term</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">term</span><span class="o">:</span> <span class="nx">term</span><span class="p">,</span> <span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="p">};</span>
<span class="p">});</span>
<span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">terms</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></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>want descending order</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="o">-</span><span class="nx">item</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">facetResults</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">_createDocument</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">new_doc</span><span class="p">,</span> <span class="nx">dataset</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">db_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">db_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">view_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">view_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">_id</span> <span class="o">=</span> <span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">cdb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">CouchDBWrapper</span><span class="p">(</span><span class="nx">db_url</span><span class="p">,</span> <span class="nx">view_url</span><span class="p">);</span>
<span class="k">delete</span> <span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">view_url</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="s1">&#39;_all_docs&#39;</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="nx">jqxhr</span> <span class="o">=</span> <span class="nx">cdb</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">_id</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">_id</span> <span class="o">=</span> <span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;_id&#39;</span><span class="p">].</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;__&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">cdb</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">_id</span><span class="p">);</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">old_doc</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">record_create</span><span class="p">)</span>
<span class="nx">new_doc</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">record_create</span><span class="p">(</span><span class="nx">new_doc</span><span class="p">,</span> <span class="nx">old_doc</span><span class="p">);</span>
<span class="nx">new_doc</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">old_doc</span><span class="p">,</span> <span class="nx">new_doc</span><span class="p">);</span>
<span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;_id&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">_id</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">cdb</span><span class="p">.</span><span class="nx">upsert</span><span class="p">(</span><span class="nx">new_doc</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">args</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">args</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">_updateDocument</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">new_doc</span><span class="p">,</span> <span class="nx">dataset</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">db_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">db_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">view_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">view_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">_id</span> <span class="o">=</span> <span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">cdb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">CouchDBWrapper</span><span class="p">(</span><span class="nx">db_url</span><span class="p">,</span> <span class="nx">view_url</span><span class="p">);</span>
<span class="k">delete</span> <span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">view_url</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="s1">&#39;_all_docs&#39;</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="nx">jqxhr</span> <span class="o">=</span> <span class="nx">cdb</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">_id</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">_id</span> <span class="o">=</span> <span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;_id&#39;</span><span class="p">].</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;__&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">cdb</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">_id</span><span class="p">);</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">old_doc</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">record_update</span><span class="p">)</span>
<span class="nx">new_doc</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">record_update</span><span class="p">(</span><span class="nx">new_doc</span><span class="p">,</span> <span class="nx">old_doc</span><span class="p">);</span>
<span class="nx">new_doc</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">old_doc</span><span class="p">,</span> <span class="nx">new_doc</span><span class="p">);</span>
<span class="nx">new_doc</span><span class="p">[</span><span class="s1">&#39;_id&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">_id</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">cdb</span><span class="p">.</span><span class="nx">upsert</span><span class="p">(</span><span class="nx">new_doc</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">args</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">args</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">_deleteDocument</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">del_doc</span><span class="p">,</span> <span class="nx">dataset</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">db_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">db_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">view_url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">view_url</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">_id</span> <span class="o">=</span> <span class="nx">del_doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">cdb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">CouchDBWrapper</span><span class="p">(</span><span class="nx">db_url</span><span class="p">,</span> <span class="nx">view_url</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">view_url</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="s1">&#39;_all_docs&#39;</span><span class="p">)</span> <span class="o">!==</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span>
<span class="k">return</span> <span class="nx">cdb</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">_id</span><span class="p">);</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">_id</span> <span class="o">=</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;_id&#39;</span><span class="p">).</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;__&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">cdb</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">_id</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">old_doc</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">record_delete</span><span class="p">)</span>
<span class="nx">old_doc</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">record_delete</span><span class="p">(</span><span class="nx">del_doc</span><span class="p">,</span> <span class="nx">old_doc</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isNull</span><span class="p">(</span><span class="nx">del_doc</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">cdb</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">_id</span><span class="p">));</span> <span class="c1">// XXX is this the right thing to do?</span>
<span class="k">else</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">&#182;</a> </div> <p>couchdb uses _id to identify documents, Backbone models use id.
we should remove it before sending it to the server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">old_doc</span><span class="p">[</span><span class="s1">&#39;_id&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">_id</span><span class="p">;</span>
<span class="k">delete</span> <span class="nx">old_doc</span><span class="p">[</span><span class="s1">&#39;id&#39;</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">cdb</span><span class="p">.</span><span class="nx">upsert</span><span class="p">(</span><span class="nx">old_doc</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">args</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">args</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="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">Backend</span><span class="p">.</span><span class="nx">CouchDB</span><span class="p">));</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

63
docs/src/backend.csv.html
View File

@ -1,13 +1,14 @@
<!DOCTYPE html> <html> <head> <title>backend.csv.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.csv.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<!DOCTYPE html> <html> <head> <title>backend.csv.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.csv.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">&#182;</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">Backend</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">Backend</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">Backend</span><span class="p">.</span><span class="nx">CSV</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">Backend</span><span class="p">.</span><span class="nx">CSV</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">&#182;</a> </div> <p>Note that provision of jQuery is optional (it is <strong>only</strong> needed if you use fetch on a remote file)</p> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">my</span><span class="p">,</span> <span class="nx">$</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">&#182;</a> </div> <h2>fetch</h2>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">CSV</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">Backend</span><span class="p">.</span><span class="nx">CSV</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">&#182;</a> </div> <p>Note that provision of jQuery is optional (it is <strong>only</strong> needed if you use fetch on a remote file)</p> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;csv&#39;</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">&#182;</a> </div> <p>use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">)</span> <span class="o">?</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span> <span class="o">:</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</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">&#182;</a> </div> <h2>fetch</h2>
<p>fetch supports 3 options depending on the attribute provided on the dataset argument</p>
<ol>
<li><code>dataset.file</code>: <code>file</code> is an HTML5 file object. This is opened and parsed with the CSV parser.</li>
<li><code>dataset.data</code>: <code>data</code> is a string in CSV format. This is passed directly to the CSV parser</li>
<li><code>dataset.url</code>: a url to an online CSV file that is ajax accessible (note this usually requires either local or on a server that is CORS enabled). The file is then loaded using $.ajax and parsed using the CSV parser (NB: this requires jQuery)</li>
<li><code>dataset.url</code>: a url to an online CSV file that is ajax accessible (note this usually requires either local or on a server that is CORS enabled). The file is then loaded using jQuery.ajax and parsed using the CSV parser (NB: this requires jQuery)</li>
</ol>
<p>All options generates similar data and use the memory store outcome, that is they return something like:</p>
@ -19,7 +20,7 @@
useMemoryStore: true
}
</pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">fetch</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="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">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">file</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">encoding</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">encoding</span> <span class="o">||</span> <span class="s1">&#39;UTF-8&#39;</span><span class="p">;</span>
@ -44,7 +45,7 @@
<span class="nx">useMemoryStore</span><span class="o">:</span> <span class="kc">true</span>
<span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</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">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">jQuery</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</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">data</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">rows</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseCSV</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">dataset</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">records</span><span class="o">:</span> <span class="nx">rows</span><span class="p">,</span>
@ -53,7 +54,7 @@
<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></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h2>parseCSV</h2>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h2>parseCSV</h2>
<p>Converts a Comma Separated Values string into an array of arrays.
Each line in the CSV becomes an array.</p>
@ -74,7 +75,7 @@ Each line in the CSV becomes an array.</p>
quotechar, or which contain new-line characters. It defaults to '"'</p>
<p>Heavily based on uselesscode's JS CSV parser (MIT Licensed):
http://www.uselesscode.org/javascript/csv/</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">parseCSV</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="nx">options</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">&#182;</a> </div> <p>Get rid of any trailing \n</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">s</span> <span class="o">=</span> <span class="nx">chomp</span><span class="p">(</span><span class="nx">s</span><span class="p">);</span>
http://www.uselesscode.org/javascript/csv/</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">parseCSV</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="nx">options</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">&#182;</a> </div> <p>Get rid of any trailing \n</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">s</span> <span class="o">=</span> <span class="nx">chomp</span><span class="p">(</span><span class="nx">s</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">trm</span> <span class="o">=</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">trim</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="o">?</span> <span class="kc">false</span> <span class="o">:</span> <span class="kc">true</span><span class="p">;</span>
@ -91,10 +92,10 @@ http://www.uselesscode.org/javascript/csv/</p> </td> <td
<span class="nx">processField</span><span class="p">;</span>
<span class="nx">processField</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fieldQuoted</span> <span class="o">!==</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>If field is empty set to null</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">field</span> <span class="o">===</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="kc">null</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">&#182;</a> </div> <p>If the field was not quoted and we are trimming fields, trim it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">trm</span> <span class="o">===</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fieldQuoted</span> <span class="o">!==</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>If field is empty set to null</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">field</span> <span class="o">===</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="kc">null</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">&#182;</a> </div> <p>If the field was not quoted and we are trimming fields, trim it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">trm</span> <span class="o">===</span> <span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nx">trim</span><span class="p">(</span><span class="nx">field</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">&#182;</a> </div> <p>Convert unquoted numbers to their appropriate types</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">rxIsInt</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</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">&#182;</a> </div> <p>Convert unquoted numbers to their appropriate types</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">rxIsInt</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">field</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">rxIsFloat</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">field</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
@ -104,30 +105,30 @@ http://www.uselesscode.org/javascript/csv/</p> </td> <td
<span class="p">};</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">s</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">cur</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">i</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">&#182;</a> </div> <p>If we are at a EOF or EOR</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">inQuote</span> <span class="o">===</span> <span class="kc">false</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">===</span> <span class="nx">delimiter</span> <span class="o">||</span> <span class="nx">cur</span> <span class="o">===</span> <span class="s2">&quot;\n&quot;</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nx">processField</span><span class="p">(</span><span class="nx">field</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">&#182;</a> </div> <p>Add the current field to the current row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">row</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">field</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">&#182;</a> </div> <p>If this is EOR append row to output and flush row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">===</span> <span class="s2">&quot;\n&quot;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">cur</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">i</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">&#182;</a> </div> <p>If we are at a EOF or EOR</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">inQuote</span> <span class="o">===</span> <span class="kc">false</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">===</span> <span class="nx">delimiter</span> <span class="o">||</span> <span class="nx">cur</span> <span class="o">===</span> <span class="s2">&quot;\n&quot;</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nx">processField</span><span class="p">(</span><span class="nx">field</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">&#182;</a> </div> <p>Add the current field to the current row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">row</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">field</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">&#182;</a> </div> <p>If this is EOR append row to output and flush row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">===</span> <span class="s2">&quot;\n&quot;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">out</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
<span class="nx">row</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">&#182;</a> </div> <p>Flush the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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">&#182;</a> </div> <p>Flush the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="nx">fieldQuoted</span> <span class="o">=</span> <span class="kc">false</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-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>If it's not a quotechar, add it to the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">!==</span> <span class="nx">quotechar</span><span class="p">)</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-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>If it's not a quotechar, add it to the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">!==</span> <span class="nx">quotechar</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">+=</span> <span class="nx">cur</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">inQuote</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">&#182;</a> </div> <p>We are not in a quote, start a quote</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">inQuote</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">&#182;</a> </div> <p>We are not in a quote, start a quote</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">fieldQuoted</span> <span class="o">=</span> <span class="kc">true</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">&#182;</a> </div> <p>Next char is quotechar, this is an escaped quotechar</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="nx">quotechar</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">+=</span> <span class="nx">quotechar</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">&#182;</a> </div> <p>Skip the next char</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">1</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-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>It's not escaping, so end quote</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>Next char is quotechar, this is an escaped quotechar</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="nx">quotechar</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">+=</span> <span class="nx">quotechar</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">&#182;</a> </div> <p>Skip the next char</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">1</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-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>It's not escaping, so end quote</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Add the last field</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="nx">processField</span><span class="p">(</span><span class="nx">field</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">&#182;</a> </div> <p>Add the last field</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="nx">processField</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
<span class="nx">row</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
<span class="nx">out</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">out</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">&#182;</a> </div> <h2>serializeCSV</h2>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h2>serializeCSV</h2>
<p>Convert an Object or a simple array of arrays into a Comma
Separated Values string.</p>
@ -179,9 +180,9 @@ http://www.uselesscode.org/javascript/csv/</p> </td> <td
<span class="nx">processField</span><span class="p">;</span>
<span class="nx">processField</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span> <span class="o">===</span> <span class="kc">null</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">&#182;</a> </div> <p>If field is null set to empty string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">field</span> <span class="o">===</span> <span class="s2">&quot;string&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">rxNeedsQuoting</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>Convert string to delimited string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="nx">quotechar</span> <span class="o">+</span> <span class="nx">field</span> <span class="o">+</span> <span class="nx">quotechar</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">field</span> <span class="o">===</span> <span class="s2">&quot;number&quot;</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">&#182;</a> </div> <p>Convert number to string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>If field is null set to empty string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">field</span> <span class="o">===</span> <span class="s2">&quot;string&quot;</span> <span class="o">&amp;&amp;</span> <span class="nx">rxNeedsQuoting</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">field</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">&#182;</a> </div> <p>Convert string to delimited string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="nx">quotechar</span> <span class="o">+</span> <span class="nx">field</span> <span class="o">+</span> <span class="nx">quotechar</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">field</span> <span class="o">===</span> <span class="s2">&quot;number&quot;</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">&#182;</a> </div> <p>Convert number to string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="mi">10</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">field</span><span class="p">;</span>
@ -191,12 +192,12 @@ http://www.uselesscode.org/javascript/csv/</p> </td> <td
<span class="nx">cur</span> <span class="o">=</span> <span class="nx">a</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o">&lt;</span> <span class="nx">cur</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nx">processField</span><span class="p">(</span><span class="nx">cur</span><span class="p">[</span><span class="nx">j</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">&#182;</a> </div> <p>If this is EOR append row to output and flush row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">j</span> <span class="o">===</span> <span class="p">(</span><span class="nx">cur</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nx">processField</span><span class="p">(</span><span class="nx">cur</span><span class="p">[</span><span class="nx">j</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">&#182;</a> </div> <p>If this is EOR append row to output and flush row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">j</span> <span class="o">===</span> <span class="p">(</span><span class="nx">cur</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">row</span> <span class="o">+=</span> <span class="nx">field</span><span class="p">;</span>
<span class="nx">out</span> <span class="o">+=</span> <span class="nx">row</span> <span class="o">+</span> <span class="s2">&quot;\n&quot;</span><span class="p">;</span>
<span class="nx">row</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Add the current field to the current row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">row</span> <span class="o">+=</span> <span class="nx">field</span> <span class="o">+</span> <span class="nx">delimiter</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">&#182;</a> </div> <p>Flush the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>Add the current field to the current row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">row</span> <span class="o">+=</span> <span class="nx">field</span> <span class="o">+</span> <span class="nx">delimiter</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">&#182;</a> </div> <p>Flush the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
@ -204,10 +205,10 @@ http://www.uselesscode.org/javascript/csv/</p> </td> <td
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">rxIsInt</span> <span class="o">=</span> <span class="sr">/^\d+$/</span><span class="p">,</span>
<span class="nx">rxIsFloat</span> <span class="o">=</span> <span class="sr">/^\d*\.\d+$|^\d+\.\d*$/</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">&#182;</a> </div> <p>If a string has leading or trailing space,
<span class="nx">rxIsFloat</span> <span class="o">=</span> <span class="sr">/^\d*\.\d+$|^\d+\.\d*$/</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">&#182;</a> </div> <p>If a string has leading or trailing space,
contains a comma double quote or a newline
it needs to be quoted in CSV output</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">rxNeedsQuoting</span> <span class="o">=</span> <span class="sr">/^\s|\s$|,|&quot;|\n/</span><span class="p">,</span>
<span class="nx">trim</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</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">&#182;</a> </div> <p>Fx 3.1 has a native trim function, it's about 10x faster, use it if it exists</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">trim</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">trim</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</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">&#182;</a> </div> <p>Fx 3.1 has a native trim function, it's about 10x faster, use it if it exists</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">trim</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</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">s</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
<span class="p">};</span>
@ -219,12 +220,12 @@ it needs to be quoted in CSV output</p> </td> <td class=
<span class="p">}());</span>
<span class="kd">function</span> <span class="nx">chomp</span><span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">!==</span> <span class="s2">&quot;\n&quot;</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">&#182;</a> </div> <p>Does not end with \n, just return string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">s</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-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</a> </div> <p>Remove the \n</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">s</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">s</span><span class="p">.</span><span class="nx">length</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">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span> <span class="o">!==</span> <span class="s2">&quot;\n&quot;</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">&#182;</a> </div> <p>Does not end with \n, just return string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">s</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-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Remove the \n</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">s</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">s</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</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">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">CSV</span><span class="p">,</span> <span class="nx">jQuery</span><span class="p">));</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">Backend</span><span class="p">.</span><span class="nx">CSV</span><span class="p">));</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

34
docs/src/backend.dataproxy.html
View File

@ -1,10 +1,12 @@
<!DOCTYPE html> <html> <head> <title>backend.dataproxy.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.dataproxy.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<!DOCTYPE html> <html> <head> <title>backend.dataproxy.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.dataproxy.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">&#182;</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">Backend</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">Backend</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">Backend</span><span class="p">.</span><span class="nx">DataProxy</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">Backend</span><span class="p">.</span><span class="nx">DataProxy</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>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;dataproxy&#39;</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">&#182;</a> </div> <p>URL for the dataproxy</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">dataproxy_url</span> <span class="o">=</span> <span class="s1">&#39;http://jsonpdataproxy.appspot.com&#39;</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">&#182;</a> </div> <p>Timeout for dataproxy (after this time if no response we error)
Needed because use JSONP so do not receive e.g. 500 errors </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">timeout</span> <span class="o">=</span> <span class="mi">5000</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">&#182;</a> </div> <h2>load</h2>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;dataproxy&#39;</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">&#182;</a> </div> <p>URL for the dataproxy</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">dataproxy_url</span> <span class="o">=</span> <span class="s1">&#39;//jsonpdataproxy.appspot.com&#39;</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">&#182;</a> </div> <p>Timeout for dataproxy (after this time if no response we error)
Needed because use JSONP so do not receive e.g. 500 errors </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">timeout</span> <span class="o">=</span> <span class="mi">5000</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">&#182;</a> </div> <p>use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">)</span> <span class="o">?</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span> <span class="o">:</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</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">&#182;</a> </div> <h2>load</h2>
<p>Load data from a URL via the <a href="http://github.com/okfn/dataproxy">DataProxy</a>.</p>
@ -14,12 +16,12 @@ Needed because use JSONP so do not receive e.g. 500 errors </p> </td
<span class="s1">&#39;max-results&#39;</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">size</span> <span class="o">||</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">rows</span> <span class="o">||</span> <span class="mi">1000</span><span class="p">,</span>
<span class="nx">type</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">format</span> <span class="o">||</span> <span class="s1">&#39;&#39;</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
<span class="nx">url</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">dataproxy_url</span><span class="p">,</span>
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">&#39;jsonp&#39;</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">dfd</span> <span class="o">=</span> <span class="k">new</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="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">error</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">results</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span>
@ -31,33 +33,33 @@ Needed because use JSONP so do not receive e.g. 500 errors </p> </td
<span class="nx">useMemoryStore</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">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="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</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">args</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></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h2>_wrapInTimeout</h2>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h2>_wrapInTimeout</h2>
<p>Convenience method providing a crude way to catch backend errors on JSONP calls.
Many of backends use JSONP and so will not get error messages and this is
a crude way to catch those errors.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">_wrapInTimeout</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ourFunction</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">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">timer</span> <span class="o">=</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">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">({</span>
<span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;Request Error: Backend did not respond after &#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">my</span><span class="p">.</span><span class="nx">timeout</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39; seconds&#39;</span>
<span class="p">});</span>
<span class="p">},</span> <span class="nx">my</span><span class="p">.</span><span class="nx">timeout</span><span class="p">);</span>
<span class="nx">ourFunction</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">arguments</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">ourFunction</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">args</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</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">arguments</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">args</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="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</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="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">args</span><span class="p">);</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="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">Backend</span><span class="p">.</span><span class="nx">DataProxy</span><span class="p">));</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">Backend</span><span class="p">.</span><span class="nx">DataProxy</span><span class="p">));</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

34
docs/src/backend.elasticsearch.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <html> <head> <title>backend.elasticsearch.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.elasticsearch.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<!DOCTYPE html> <html> <head> <title>backend.elasticsearch.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.elasticsearch.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">&#182;</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">Backend</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">Backend</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">Backend</span><span class="p">.</span><span class="nx">ElasticSearch</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">Backend</span><span class="p">.</span><span class="nx">ElasticSearch</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>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;elasticsearch&#39;</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">&#182;</a> </div> <h2>ElasticSearch Wrapper</h2>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;elasticsearch&#39;</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">&#182;</a> </div> <p>use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">)</span> <span class="o">?</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span> <span class="o">:</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</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">&#182;</a> </div> <h2>ElasticSearch Wrapper</h2>
<p>A simple JS wrapper around an <a href="http://www.elasticsearch.org/">ElasticSearch</a> endpoints.</p>
@ -23,7 +23,7 @@ on http://localhost:9200 with index twitter and type tweet it would be:</p>
<span class="k">this</span><span class="p">.</span><span class="nx">options</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">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</span>
<span class="p">},</span>
<span class="nx">options</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">&#182;</a> </div> <h3>mapping</h3>
<span class="nx">options</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">&#182;</a> </div> <h3>mapping</h3>
<p>Get ES mapping for this type/table</p>
@ -34,7 +34,7 @@ on http://localhost:9200 with index twitter and type tweet it would be:</p>
<span class="nx">dataType</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">options</span><span class="p">.</span><span class="nx">dataType</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">jqxhr</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">&#182;</a> </div> <h3>get</h3>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h3>get</h3>
<p>Get record corresponding to specified id</p>
@ -44,7 +44,7 @@ on http://localhost:9200 with index twitter and type tweet it would be:</p>
<span class="nx">url</span><span class="o">:</span> <span class="nx">base</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</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">&#182;</a> </div> <h3>upsert</h3>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h3>upsert</h3>
<p>create / update a record to ElasticSearch backend</p>
@ -61,7 +61,7 @@ on http://localhost:9200 with index twitter and type tweet it would be:</p>
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">,</span>
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">&#39;json&#39;</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">&#182;</a> </div> <h3>delete</h3>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <h3>delete</h3>
<p>Delete a record from the ElasticSearch backend.</p>
@ -104,7 +104,7 @@ on http://localhost:9200 with index twitter and type tweet it would be:</p>
<span class="p">});</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">out</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">&#182;</a> </div> <p>convert from Recline sort structure to ES form
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>convert from Recline sort structure to ES form
http://www.elasticsearch.org/guide/reference/api/search/sort.html</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_normalizeSort</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sort</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">sort</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sortObj</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_tmp</span> <span class="o">=</span> <span class="p">{};</span>
@ -127,7 +127,7 @@ http://www.elasticsearch.org/guide/reference/api/search/sort.html</p>
<span class="nx">out</span><span class="p">.</span><span class="nx">geo_distance</span><span class="p">.</span><span class="nx">unit</span> <span class="o">=</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">unit</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">out</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">&#182;</a> </div> <h3>query</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <h3>query</h3>
<p>@return deferred supporting promise API</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</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="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">esQuery</span> <span class="o">=</span> <span class="p">(</span><span class="nx">queryObj</span> <span class="o">&amp;&amp;</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">)</span> <span class="o">?</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</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">queryObj</span><span class="p">);</span>
@ -146,18 +146,18 @@ http://www.elasticsearch.org/guide/reference/api/search/sort.html</p>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">jqxhr</span><span class="p">;</span>
<span class="p">}</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">&#182;</a> </div> <h2>Recline Connectors</h2>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <h2>Recline Connectors</h2>
<p>Requires URL of ElasticSearch endpoint to be specified on the dataset
via the url attribute.</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">&#182;</a> </div> <p>ES options which are passed through to <code>options</code> on Wrapper (see Wrapper for details)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">esOptions</span> <span class="o">=</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">&#182;</a> </div> <h3>fetch</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">fetch</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="p">{</span>
via the url attribute.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>ES options which are passed through to <code>options</code> on Wrapper (see Wrapper for details)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">esOptions</span> <span class="o">=</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">&#182;</a> </div> <h3>fetch</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">fetch</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="p">{</span>
<span class="kd">var</span> <span class="nx">es</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Wrapper</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span> <span class="nx">my</span><span class="p">.</span><span class="nx">esOptions</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">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="nx">es</span><span class="p">.</span><span class="nx">mapping</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="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">schema</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="s1">&#39;message&#39;</span><span class="o">:</span><span class="s1">&#39;Elastic Search did not return a mapping&#39;</span><span class="p">});</span>
<span class="k">return</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">&#182;</a> </div> <p>only one top level key in ES = the type so we can ignore it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">schema</span><span class="p">)[</span><span class="mi">0</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">&#182;</a> </div> <p>only one top level key in ES = the type so we can ignore it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">schema</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</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">key</span><span class="p">].</span><span class="nx">properties</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">dict</span><span class="p">,</span> <span class="nx">fieldName</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dict</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">fieldName</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">dict</span><span class="p">;</span>
@ -170,10 +170,10 @@ via the url attribute.</p> </td> <td class="code">
<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></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <h3>save</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">save</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">changes</span><span class="p">,</span> <span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h3>save</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">save</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">changes</span><span class="p">,</span> <span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">es</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Wrapper</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span> <span class="nx">my</span><span class="p">.</span><span class="nx">esOptions</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">changes</span><span class="p">.</span><span class="nx">creates</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">updates</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="nx">changes</span><span class="p">.</span><span class="nx">deletes</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">1</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">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="nx">msg</span> <span class="o">=</span> <span class="s1">&#39;Saving more than one item at a time not yet supported&#39;</span><span class="p">;</span>
<span class="nx">alert</span><span class="p">(</span><span class="nx">msg</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">msg</span><span class="p">);</span>
@ -187,8 +187,8 @@ via the url attribute.</p> </td> <td class="code">
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">changes</span><span class="p">.</span><span class="nx">deletes</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">es</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">changes</span><span class="p">.</span><span class="nx">deletes</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="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h3>query</h3> </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="kd">function</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">,</span> <span class="nx">dataset</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="p">};</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <h3>query</h3> </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="kd">function</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">,</span> <span class="nx">dataset</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="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">es</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Wrapper</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span> <span class="nx">my</span><span class="p">.</span><span class="nx">esOptions</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">es</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="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>
@ -213,7 +213,7 @@ via the url attribute.</p> </td> <td class="code">
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">out</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></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <h3>makeRequest</h3>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <h3>makeRequest</h3>
<p>Just $.ajax but in any headers in the 'headers' attribute of this
Backend instance. Example:</p>

37
docs/src/backend.gdocs.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <html> <head> <title>backend.gdocs.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.gdocs.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<!DOCTYPE html> <html> <head> <title>backend.gdocs.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.gdocs.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">&#182;</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">Backend</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">Backend</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">Backend</span><span class="p">.</span><span class="nx">GDocs</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">Backend</span><span class="p">.</span><span class="nx">GDocs</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>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;gdocs&#39;</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">&#182;</a> </div> <h2>Google spreadsheet backend</h2>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;gdocs&#39;</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">&#182;</a> </div> <p>use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">)</span> <span class="o">?</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span> <span class="o">:</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</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">&#182;</a> </div> <h2>Google spreadsheet backend</h2>
<p>Fetch data from a Google Docs spreadsheet.</p>
@ -29,19 +29,19 @@ var dataset = new recline.Model.Dataset({
<li>fields: array of Field objects</li>
<li>records: array of objects for each row</li>
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">fetch</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="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">urls</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getGDocsAPIUrls</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</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">&#182;</a> </div> <p>TODO cover it with tests
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">urls</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getGDocsAPIUrls</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">url</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">&#182;</a> </div> <p>TODO cover it with tests
get the spreadsheet title</p> </td> <td class="code"> <div class="highlight"><pre> <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">titleDfd</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">titleDfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">urls</span><span class="p">.</span><span class="nx">spreadsheet</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">jQuery</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">urls</span><span class="p">.</span><span class="nx">spreadsheet</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">titleDfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">({</span>
<span class="nx">spreadsheetTitle</span><span class="o">:</span> <span class="nx">d</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">title</span><span class="p">.</span><span class="nx">$t</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">titleDfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</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></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>get the actual worksheet data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">urls</span><span class="p">.</span><span class="nx">worksheet</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="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></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>get the actual worksheet data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">urls</span><span class="p">.</span><span class="nx">worksheet</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">result</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseData</span><span class="p">(</span><span class="nx">d</span><span class="p">);</span>
<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">map</span><span class="p">(</span><span class="nx">result</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>
@ -61,7 +61,7 @@ get the spreadsheet title</p> </td> <td class="code">
<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></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <h2>parseData</h2>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h2>parseData</h2>
<p>Parse data from Google Docs API into a reasonable form</p>
@ -79,20 +79,20 @@ colTypes: dictionary (with column names as keys) specifying types (e.g. range, p
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">entries</span> <span class="o">=</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="o">||</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">key</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">colName</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">&#182;</a> </div> <p>percentage values (e.g. 23.3%)</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="kd">var</span> <span class="nx">colName</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">&#182;</a> </div> <p>percentage values (e.g. 23.3%)</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="k">for</span><span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">entries</span><span class="p">[</span><span class="mi">0</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">&#182;</a> </div> <p>it's barely possible it has inherited keys starting with 'gsx$'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="sr">/^gsx/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="k">for</span><span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">entries</span><span class="p">[</span><span class="mi">0</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">&#182;</a> </div> <p>it's barely possible it has inherited keys starting with 'gsx$'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span><span class="p">(</span><span class="sr">/^gsx/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">colName</span> <span class="o">=</span> <span class="nx">key</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">fields</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">colName</span><span class="p">);</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">&#182;</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="nx">results</span><span class="p">.</span><span class="nx">records</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">entries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</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="nx">results</span><span class="p">.</span><span class="nx">records</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">entries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">row</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">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">col</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_keyname</span> <span class="o">=</span> <span class="s1">&#39;gsx$&#39;</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="nx">$t</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">num</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">&#182;</a> </div> <p>TODO cover this part of code with test
</pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>TODO cover this part of code with test
TODO use the regexp only once
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">&#39;percent&#39;</span> <span class="o">&amp;&amp;</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>
<span class="nx">num</span> <span class="o">=</span> <span class="nx">rep</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">value</span><span class="p">)[</span><span class="mi">1</span><span class="p">];</span>
@ -107,20 +107,23 @@ if labelled as % and value contains %, convert</p> </td>
<span class="nx">results</span><span class="p">.</span><span class="nx">worksheetTitle</span> <span class="o">=</span> <span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">title</span><span class="p">.</span><span class="nx">$t</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">results</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">&#182;</a> </div> <p>Convenience function to get GDocs JSON API Url from standard URL</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">getGDocsAPIUrls</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</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">&#182;</a> </div> <p>https://docs.google.com/spreadsheet/ccc?key=XXXX#gid=YYY</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/.*spreadsheet\/ccc?.*key=([^#?&amp;+]+).*gid=([\d]+).*/</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">&#182;</a> </div> <p>Convenience function to get GDocs JSON API Url from standard URL</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">getGDocsAPIUrls</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">url</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">&#182;</a> </div> <p>https://docs.google.com/spreadsheet/ccc?key=XXXX#gid=YYY</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">regex</span> <span class="o">=</span> <span class="sr">/.*spreadsheet\/ccc?.*key=([^#?&amp;+]+)[^#]*(#gid=([\d]+).*)?/</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">matches</span> <span class="o">=</span> <span class="nx">url</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">regex</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">key</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">worksheet</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">urls</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="o">!!</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">key</span> <span class="o">=</span> <span class="nx">matches</span><span class="p">[</span><span class="mi">1</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">&#182;</a> </div> <p>the gid in url is 0-based and feed url is 1-based</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">worksheet</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">matches</span><span class="p">[</span><span class="mi">2</span><span class="p">])</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
<span class="nx">key</span> <span class="o">=</span> <span class="nx">matches</span><span class="p">[</span><span class="mi">1</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">&#182;</a> </div> <p>the gid in url is 0-based and feed url is 1-based</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">worksheet</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">matches</span><span class="p">[</span><span class="mi">3</span><span class="p">])</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="nb">isNaN</span><span class="p">(</span><span class="nx">worksheet</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">worksheet</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">urls</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">worksheet</span> <span class="o">:</span> <span class="s1">&#39;https://spreadsheets.google.com/feeds/list/&#39;</span><span class="o">+</span> <span class="nx">key</span> <span class="o">+</span><span class="s1">&#39;/&#39;</span><span class="o">+</span> <span class="nx">worksheet</span> <span class="o">+</span><span class="s1">&#39;/public/values?alt=json&#39;</span><span class="p">,</span>
<span class="nx">spreadsheet</span><span class="o">:</span> <span class="s1">&#39;https://spreadsheets.google.com/feeds/worksheets/&#39;</span><span class="o">+</span> <span class="nx">key</span> <span class="o">+</span><span class="s1">&#39;/public/basic?alt=json&#39;</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-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>we assume that it's one of the feeds urls</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">key</span> <span class="o">=</span> <span class="nx">url</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">)[</span><span class="mi">5</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">&#182;</a> </div> <p>by default then, take first worksheet</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">worksheet</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">else</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">&#182;</a> </div> <p>we assume that it's one of the feeds urls</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">key</span> <span class="o">=</span> <span class="nx">url</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;/&#39;</span><span class="p">)[</span><span class="mi">5</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">&#182;</a> </div> <p>by default then, take first worksheet</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">worksheet</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="nx">urls</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">worksheet</span> <span class="o">:</span> <span class="s1">&#39;https://spreadsheets.google.com/feeds/list/&#39;</span><span class="o">+</span> <span class="nx">key</span> <span class="o">+</span><span class="s1">&#39;/&#39;</span><span class="o">+</span> <span class="nx">worksheet</span> <span class="o">+</span><span class="s1">&#39;/public/values?alt=json&#39;</span><span class="p">,</span>
<span class="nx">spreadsheet</span><span class="o">:</span> <span class="s1">&#39;https://spreadsheets.google.com/feeds/worksheets/&#39;</span><span class="o">+</span> <span class="nx">key</span> <span class="o">+</span><span class="s1">&#39;/public/basic?alt=json&#39;</span>
@ -129,6 +132,6 @@ if labelled as % and value contains %, convert</p> </td>
<span class="k">return</span> <span class="nx">urls</span><span class="p">;</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">Backend</span><span class="p">.</span><span class="nx">GDocs</span><span class="p">));</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">Backend</span><span class="p">.</span><span class="nx">GDocs</span><span class="p">));</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

72
docs/src/backend.memory.html
View File

@ -1,49 +1,49 @@
<!DOCTYPE html> <html> <head> <title>backend.memory.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.memory.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<!DOCTYPE html> <html> <head> <title>backend.memory.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.memory.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">&#182;</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">Backend</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">Backend</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">Backend</span><span class="p">.</span><span class="nx">Memory</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">Backend</span><span class="p">.</span><span class="nx">Memory</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>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;memory&#39;</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">&#182;</a> </div> <h2>Data Wrapper</h2>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">&#39;memory&#39;</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">&#182;</a> </div> <p>private data - use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">)</span> <span class="o">?</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span> <span class="o">:</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</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">&#182;</a> </div> <h2>Data Wrapper</h2>
<p>Turn a simple array of JS objects into a mini data-store with
functionality like querying, faceting, updating (by ID) and deleting (by
ID).</p>
<p>@param data list of hashes for each record/row in the data ({key:
<p>@param records list of hashes for each record/row in the data ({key:
value, key: value})
@param fields (optional) list of field hashes (each hash defining a field
as per recline.Model.Field). If fields not specified they will be taken
from the data.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Store</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">fields</span><span class="p">)</span> <span class="p">{</span>
from the data.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Store</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">records</span><span class="p">,</span> <span class="nx">fields</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">data</span> <span class="o">=</span> <span class="nx">data</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">records</span> <span class="o">=</span> <span class="nx">records</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">&#182;</a> </div> <p>backwards compatability (in v0.5 records was named data)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fields</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="nx">fields</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">data</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="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">data</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">records</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="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">records</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">key</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">key</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;string&#39;</span><span class="p">};</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">update</span> <span class="o">=</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="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">data</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">internalDoc</span><span class="p">,</span> <span class="nx">idx</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="nx">self</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">internalDoc</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">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">internalDoc</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">idx</span><span class="p">]</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">records</span><span class="p">[</span><span class="nx">idx</span><span class="p">]</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">;</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">remove</span> <span class="o">=</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="kd">var</span> <span class="nx">newdocs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">self</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">internalDoc</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">newdocs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">internalDoc</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">internalDoc</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">data</span> <span class="o">=</span> <span class="nx">newdocs</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">records</span> <span class="o">=</span> <span class="nx">newdocs</span><span class="p">;</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">save</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">changes</span><span class="p">,</span> <span class="nx">dataset</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">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</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">&#182;</a> </div> <p>TODO _.each(changes.creates) { ... }</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">changes</span><span class="p">.</span><span class="nx">updates</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</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="k">new</span> <span class="nx">Deferred</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">&#182;</a> </div> <p>TODO _.each(changes.creates) { ... }</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">changes</span><span class="p">.</span><span class="nx">updates</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">record</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="nx">changes</span><span class="p">.</span><span class="nx">deletes</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
@ -54,13 +54,13 @@ from the data.</p> </td> <td class="code">
<span class="p">},</span>
<span class="k">this</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="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">numRows</span> <span class="o">=</span> <span class="nx">queryObj</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">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">numRows</span> <span class="o">=</span> <span class="nx">queryObj</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">records</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">from</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">;</span>
<span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFilters</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">);</span>
<span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFreeTextQuery</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</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">&#182;</a> </div> <p>TODO: this is not complete sorting!
<span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFreeTextQuery</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</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">&#182;</a> </div> <p>TODO: this is not complete sorting!
What's wrong is we sort on the <em>last</em> entry in the sort list if there are multiple sort criteria</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">queryObj</span><span class="p">.</span><span class="nx">sort</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sortObj</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fieldName</span> <span class="o">=</span> <span class="nx">sortObj</span><span class="p">.</span><span class="nx">field</span><span class="p">;</span>
<span class="nx">results</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">results</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>
@ -79,8 +79,8 @@ What's wrong is we sort on the <em>last</em> entry in the sort list if there are
<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">out</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></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>in place filtering</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFilters</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</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">filters</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">filters</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">&#182;</a> </div> <p>register filters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">filterFunctions</span> <span class="o">=</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">&#182;</a> </div> <p>in place filtering</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFilters</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</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">filters</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">filters</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">&#182;</a> </div> <p>register filters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">filterFunctions</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">term</span> <span class="o">:</span> <span class="nx">term</span><span class="p">,</span>
<span class="nx">range</span> <span class="o">:</span> <span class="nx">range</span><span class="p">,</span>
<span class="nx">geo_distance</span> <span class="o">:</span> <span class="nx">geo_distance</span>
@ -88,6 +88,7 @@ What's wrong is we sort on the <em>last</em> entry in the sort list if there are
<span class="kd">var</span> <span class="nx">dataParsers</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">integer</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">return</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span> <span class="p">},</span>
<span class="s1">&#39;float&#39;</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">return</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span> <span class="p">},</span>
<span class="nx">number</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">return</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span> <span class="p">},</span>
<span class="nx">string</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">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">toString</span><span class="p">()</span> <span class="p">},</span>
<span class="nx">date</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">return</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">e</span><span class="p">).</span><span class="nx">valueOf</span><span class="p">()</span> <span class="p">},</span>
<span class="nx">datetime</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">return</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">e</span><span class="p">).</span><span class="nx">valueOf</span><span class="p">()</span> <span class="p">}</span>
@ -99,11 +100,11 @@ What's wrong is we sort on the <em>last</em> entry in the sort list if there are
<span class="kd">function</span> <span class="nx">getDataParser</span><span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fieldType</span> <span class="o">=</span> <span class="nx">keyedFields</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">field</span><span class="p">].</span><span class="nx">type</span> <span class="o">||</span> <span class="s1">&#39;string&#39;</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">dataParsers</span><span class="p">[</span><span class="nx">fieldType</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">&#182;</a> </div> <p>filter records</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</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">&#182;</a> </div> <p>filter records</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">passes</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">filters</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">filterFunctions</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">type</span><span class="p">](</span><span class="nx">record</span><span class="p">,</span> <span class="nx">filter</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">&#182;</a> </div> <p>return only these records that pass all filters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="nx">passes</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">identity</span><span class="p">);</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">&#182;</a> </div> <p>filters definitions</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">term</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">filter</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">&#182;</a> </div> <p>return only these records that pass all filters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="nx">passes</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">identity</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">&#182;</a> </div> <p>filters definitions</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">term</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">parse</span> <span class="o">=</span> <span class="nx">getDataParser</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">record</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">field</span><span class="p">]);</span>
<span class="kd">var</span> <span class="nx">term</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">);</span>
@ -117,15 +118,15 @@ What's wrong is we sort on the <em>last</em> entry in the sort list if there are
<span class="kd">var</span> <span class="nx">parse</span> <span class="o">=</span> <span class="nx">getDataParser</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">record</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">field</span><span class="p">]);</span>
<span class="kd">var</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">start</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">stop</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">stop</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">&#182;</a> </div> <p>if at least one end of range is set do not allow '' to get through
<span class="kd">var</span> <span class="nx">stop</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">stop</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">&#182;</a> </div> <p>if at least one end of range is set do not allow '' to get through
note that for strings '' &lt;= {any-character} e.g. '' &lt;= 'a'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">((</span><span class="o">!</span><span class="nx">startnull</span> <span class="o">||</span> <span class="o">!</span><span class="nx">stopnull</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">value</span> <span class="o">===</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">((</span><span class="nx">startnull</span> <span class="o">||</span> <span class="nx">value</span> <span class="o">&gt;=</span> <span class="nx">start</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">stopnull</span> <span class="o">||</span> <span class="nx">value</span> <span class="o">&lt;=</span> <span class="nx">stop</span><span class="p">));</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">geo_distance</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">&#182;</a> </div> <p>TODO code here</p> </td> <td class="code"> <div class="highlight"><pre> <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">&#182;</a> </div> <p>we OR across fields but AND across terms in query string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFreeTextQuery</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">geo_distance</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">&#182;</a> </div> <p>TODO code here</p> </td> <td class="code"> <div class="highlight"><pre> <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">&#182;</a> </div> <p>we OR across fields but AND across terms in query string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFreeTextQuery</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">queryObj</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">terms</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">q</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39; &#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">patterns</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">terms</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">term</span><span class="p">)</span> <span class="p">{</span>
@ -139,10 +140,10 @@ note that for strings '' &lt;= {any-character} e.g. '' &lt;= 'a'</p>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">rawdoc</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">];</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">value</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">value</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">value</span> <span class="o">=</span> <span class="nx">value</span><span class="p">.</span><span class="nx">toString</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-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>value can be null (apparently in some cases)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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">&#182;</a> </div> <p>TODO regexes?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">foundmatch</span> <span class="o">=</span> <span class="nx">foundmatch</span> <span class="o">||</span> <span class="p">(</span><span class="nx">pattern</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="nx">toLowerCase</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">&#182;</a> </div> <p>TODO: early out (once we are true should break to spare unnecessary testing)
<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">&#182;</a> </div> <p>value can be null (apparently in some cases)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span> <span class="o">=</span> <span class="s1">&#39;&#39;</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">&#182;</a> </div> <p>TODO regexes?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">foundmatch</span> <span class="o">=</span> <span class="nx">foundmatch</span> <span class="o">||</span> <span class="p">(</span><span class="nx">pattern</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="nx">toLowerCase</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">&#182;</a> </div> <p>TODO: early out (once we are true should break to spare unnecessary testing)
if (foundmatch) return true;</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">});</span>
<span class="nx">matches</span> <span class="o">=</span> <span class="nx">matches</span> <span class="o">&amp;&amp;</span> <span class="nx">foundmatch</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">&#182;</a> </div> <p>TODO: early out (once false should break to spare unnecessary testing)
<span class="nx">matches</span> <span class="o">=</span> <span class="nx">matches</span> <span class="o">&amp;&amp;</span> <span class="nx">foundmatch</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">&#182;</a> </div> <p>TODO: early out (once false should break to spare unnecessary testing)
if (!matches) return false;</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">});</span>
<span class="k">return</span> <span class="nx">matches</span><span class="p">;</span>
<span class="p">});</span>
@ -155,9 +156,9 @@ if (!matches) return false;</p> </td> <td class="code">
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">facetResults</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="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>TODO: remove dependency on recline.Model</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Facet</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="nx">facetId</span><span class="p">}).</span><span class="nx">toJSON</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">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</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">&#182;</a> </div> <p>TODO: remove dependency on recline.Model</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Facet</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="nx">facetId</span><span class="p">}).</span><span class="nx">toJSON</span><span class="p">();</span>
<span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">].</span><span class="nx">termsall</span> <span class="o">=</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">&#182;</a> </div> <p>faceting</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">records</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="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>faceting</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">records</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="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nx">terms</span><span class="p">.</span><span class="nx">field</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">];</span>
@ -174,21 +175,14 @@ if (!matches) return false;</p> </td> <td class="code">
<span class="kd">var</span> <span class="nx">terms</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">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">count</span><span class="p">,</span> <span class="nx">term</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">term</span><span class="o">:</span> <span class="nx">term</span><span class="p">,</span> <span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="p">};</span>
<span class="p">});</span>
<span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">terms</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></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>want descending order</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="o">-</span><span class="nx">item</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
<span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">terms</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></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>want descending order</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="o">-</span><span class="nx">item</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">facetResults</span><span class="p">;</span>
<span class="p">};</span>
<span class="k">this</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="nx">editFunc</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">toUpdate</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">mapDocs</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span> <span class="nx">editFunc</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">&#182;</a> </div> <p>TODO: very inefficient -- could probably just walk the documents and updates in tandem and update</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="nx">updates</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">data</span><span class="p">[</span><span class="nx">idx</span><span class="p">]</span> <span class="o">=</span> <span class="nx">record</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">save</span><span class="p">(</span><span class="nx">toUpdate</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="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">Memory</span><span class="p">));</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">Backend</span><span class="p">.</span><span class="nx">Memory</span><span class="p">));</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

66
docs/src/data.transform.html
View File

@ -1,66 +0,0 @@
<!DOCTYPE html> <html> <head> <title>data.transform.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> data.transform.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">&#182;</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">Data</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">Data</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">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">&#182;</a> </div> <p>adapted from https://github.com/harthur/costco. heather rules</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Transform</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">evalFunction</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">funcString</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nb">eval</span><span class="p">(</span><span class="s2">&quot;var editFunc = &quot;</span> <span class="o">+</span> <span class="nx">funcString</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span><span class="nx">errorMessage</span><span class="o">:</span> <span class="nx">e</span><span class="o">+</span><span class="s2">&quot;&quot;</span><span class="p">};</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">editFunc</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">previewTransform</span> <span class="o">=</span> <span class="kd">function</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">currentColumn</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">preview</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">updated</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">mapDocs</span><span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="p">{},</span> <span class="nx">docs</span><span class="p">),</span> <span class="nx">editFunc</span><span class="p">);</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">updated</span><span class="p">.</span><span class="nx">docs</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">before</span> <span class="o">=</span> <span class="nx">docs</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span>
<span class="p">,</span> <span class="nx">after</span> <span class="o">=</span> <span class="nx">updated</span><span class="p">.</span><span class="nx">docs</span><span class="p">[</span><span class="nx">i</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">after</span><span class="p">)</span> <span class="nx">after</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">currentColumn</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">preview</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">before</span><span class="o">:</span> <span class="nx">before</span><span class="p">[</span><span class="nx">currentColumn</span><span class="p">],</span> <span class="nx">after</span><span class="o">:</span> <span class="nx">after</span><span class="p">[</span><span class="nx">currentColumn</span><span class="p">]});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">preview</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">before</span><span class="o">:</span> <span class="nx">before</span><span class="p">,</span> <span class="nx">after</span><span class="o">:</span> <span class="nx">after</span><span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">preview</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">Transform</span><span class="p">.</span><span class="nx">mapDocs</span> <span class="o">=</span> <span class="kd">function</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="p">{</span>
<span class="kd">var</span> <span class="nx">edited</span> <span class="o">=</span> <span class="p">[]</span>
<span class="p">,</span> <span class="nx">deleted</span> <span class="o">=</span> <span class="p">[]</span>
<span class="p">,</span> <span class="nx">failed</span> <span class="o">=</span> <span class="p">[]</span>
<span class="p">;</span>
<span class="kd">var</span> <span class="nx">updatedDocs</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">docs</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">try</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">updated</span> <span class="o">=</span> <span class="nx">editFunc</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">clone</span><span class="p">(</span><span class="nx">doc</span><span class="p">));</span>
<span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">failed</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">doc</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span><span class="p">(</span><span class="nx">updated</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">updated</span> <span class="o">=</span> <span class="p">{</span><span class="nx">_deleted</span><span class="o">:</span> <span class="kc">true</span><span class="p">};</span>
<span class="nx">edited</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">updated</span><span class="p">);</span>
<span class="nx">deleted</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">doc</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">updated</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">updated</span><span class="p">,</span> <span class="nx">doc</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">edited</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">updated</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">updated</span><span class="p">;</span>
<span class="p">});</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">updates</span><span class="o">:</span> <span class="nx">edited</span><span class="p">,</span>
<span class="nx">docs</span><span class="o">:</span> <span class="nx">updatedDocs</span><span class="p">,</span>
<span class="nx">deletes</span><span class="o">:</span> <span class="nx">deleted</span><span class="p">,</span>
<span class="nx">failed</span><span class="o">:</span> <span class="nx">failed</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">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">))</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

2
docs/src/ecma-fixes.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>ecma-fixes.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> ecma-fixes.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">&#182;</a> </div> <p>This file adds in full array method support in browsers that don't support it
<!DOCTYPE html> <html> <head> <title>ecma-fixes.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> ecma-fixes.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">&#182;</a> </div> <p>This file adds in full array method support in browsers that don't support it
see: http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Add ECMA262-5 Array methods if not supported natively</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">&#39;indexOf&#39;</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">indexOf</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">find</span><span class="p">,</span> <span class="nx">i</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o">===</span><span class="kc">undefined</span><span class="p">)</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

82
docs/src/model.html
View File

@ -1,10 +1,10 @@
<!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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </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">&#182;</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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </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">&#182;</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">&#182;</a> </div> <h2><a id="dataset">Dataset</a></h2> </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="p">(</span><span class="kd">function</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">&#182;</a> </div> <p>use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">jQuery</span><span class="p">)</span> <span class="o">?</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span> <span class="o">:</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</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">&#182;</a> </div> <h2><a id="dataset">Dataset</a></h2> </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">constructor</span><span class="o">:</span> <span class="kd">function</span> <span class="nx">Dataset</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">constructor</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">arguments</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">&#182;</a> </div> <h3>initialize</h3> </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="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">&#182;</a> </div> <h3>initialize</h3> </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="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">&#39;query&#39;</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="kc">null</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">get</span><span class="p">(</span><span class="s1">&#39;backend&#39;</span><span class="p">))</span> <span class="p">{</span>
@ -25,25 +25,25 @@
<span class="k">this</span><span class="p">.</span><span class="nx">recordCount</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">&#39;change&#39;</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="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">&#39;facet:add&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">query</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">&#182;</a> </div> <p>store is what we query and save against
<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">&#39;facet:add&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">query</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">&#182;</a> </div> <p>store is what we query and save against
store will either be the backend or be a memory store if Backend fetch
tells us to use memory store</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_store</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">backend</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">backend</span> <span class="o">==</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">Memory</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">fetch</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">&#182;</a> </div> <h3>fetch</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <h3>fetch</h3>
<p>Retrieve dataset and (some) records from the backend.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">fetch</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">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">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</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">backend</span> <span class="o">!==</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">Memory</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="p">.</span><span class="nx">fetch</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">())</span>
<span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="nx">handleResults</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="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</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">args</span><span class="p">);</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-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>special case where we have been given data directly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">handleResults</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-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>special case where we have been given data directly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">handleResults</span><span class="p">({</span>
<span class="nx">records</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;records&#39;</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">get</span><span class="p">(</span><span class="s1">&#39;fields&#39;</span><span class="p">),</span>
<span class="nx">useMemoryStore</span><span class="o">:</span> <span class="kc">true</span>
@ -62,18 +62,18 @@ tells us to use memory store</p> </td> <td class="code">
<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">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="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="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</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">args</span><span class="p">);</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></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <h3>_normalizeRecordsAndFields</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <h3>_normalizeRecordsAndFields</h3>
<p>Get a proper set of fields and records from incoming set of fields and records either of which may be null or arrays or objects</p>
<p>e.g. fields = ['a', 'b', 'c'] and records = [ [1,2,3] ] =>
fields = [ {id: a}, {id: b}, {id: c}], records = [ {a: 1}, {b: 2}, {c: 3}]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_normalizeRecordsAndFields</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">records</span><span class="p">,</span> <span class="nx">fields</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">&#182;</a> </div> <p>if no fields get them from records</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">fields</span> <span class="o">&amp;&amp;</span> <span class="nx">records</span> <span class="o">&amp;&amp;</span> <span class="nx">records</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</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">&#182;</a> </div> <p>records is array then fields is first row of records ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">records</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">)</span> <span class="p">{</span>
fields = [ {id: a}, {id: b}, {id: c}], records = [ {a: 1}, {b: 2}, {c: 3}]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_normalizeRecordsAndFields</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">records</span><span class="p">,</span> <span class="nx">fields</span><span class="p">)</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">&#182;</a> </div> <p>if no fields get them from records</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">fields</span> <span class="o">&amp;&amp;</span> <span class="nx">records</span> <span class="o">&amp;&amp;</span> <span class="nx">records</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</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">&#182;</a> </div> <p>records is array then fields is first row of records ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">records</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">fields</span> <span class="o">=</span> <span class="nx">records</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">records</span> <span class="o">=</span> <span class="nx">records</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">else</span> <span class="p">{</span>
@ -81,9 +81,14 @@ fields = [ {id: a}, {id: b}, {id: c}], records = [ {a: 1}, {b: 2}, {c: 3}]</p>
<span class="k">return</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="nx">key</span><span class="p">};</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">&#182;</a> </div> <p>fields is an array of strings (i.e. list of field headings/ids)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">fields</span> <span class="o">&amp;&amp;</span> <span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">fields</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</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">&#182;</a> </div> <p>Rename duplicate fieldIds as each field name needs to be
<span class="p">}</span> </pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>fields is an array of strings (i.e. list of field headings/ids)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">fields</span> <span class="o">&amp;&amp;</span> <span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">fields</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="kc">null</span> <span class="o">||</span> <span class="k">typeof</span><span class="p">(</span><span class="nx">fields</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span> <span class="o">!=</span> <span class="s1">&#39;object&#39;</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">&#182;</a> </div> <p>Rename duplicate fieldIds as each field name needs to be
unique.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">seen</span> <span class="o">=</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="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="nx">index</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">&#182;</a> </div> <p>cannot use trim as not supported by IE7</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^\s+|\s+$/g</span><span class="p">,</span> <span class="s1">&#39;&#39;</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="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="nx">index</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span> <span class="o">=</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</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">toString</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">&#182;</a> </div> <p>cannot use trim as not supported by IE7</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^\s+|\s+$/g</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fieldId</span> <span class="o">===</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">fieldId</span> <span class="o">=</span> <span class="s1">&#39;_noname_&#39;</span><span class="p">;</span>
<span class="nx">field</span> <span class="o">=</span> <span class="nx">fieldId</span><span class="p">;</span>
@ -94,10 +99,10 @@ unique.</p> </td> <td class="code"> <div c
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">field</span> <span class="k">in</span> <span class="nx">seen</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">seen</span><span class="p">[</span><span class="nx">field</span><span class="p">]</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-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>TODO: decide whether to keep original name as label ...
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>TODO: decide whether to keep original name as label ...
return { id: fieldId, label: field || fieldId }</p> </td> <td class="code"> <div class="highlight"><pre> <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-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>records is provided as arrays so need to zip together with fields
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>records is provided as arrays so need to zip together with fields
NB: this requires you to have fields to match arrays</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">records</span> <span class="o">&amp;&amp;</span> <span class="nx">records</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="o">&amp;&amp;</span> <span class="nx">records</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">records</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">records</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="kd">var</span> <span class="nx">tmp</span> <span class="o">=</span> <span class="p">{};</span>
@ -114,19 +119,7 @@ NB: this requires you to have fields to match arrays</p> </td>
<span class="p">},</span>
<span class="nx">save</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>TODO: need to reset the changes ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_store</span><span class="p">.</span><span class="nx">save</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_changes</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</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="nx">editFunc</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">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">_store</span><span class="p">.</span><span class="nx">transform</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;Transform is not supported with this backend: &#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;backend&#39;</span><span class="p">));</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;recline:flash&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">&quot;Updating all visible docs. This could take a while...&quot;</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="k">this</span><span class="p">.</span><span class="nx">_store</span><span class="p">.</span><span class="nx">transform</span><span class="p">(</span><span class="nx">editFunc</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></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>reload data as records have changed</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">query</span><span class="p">();</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;recline:flash&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">&quot;Records updated successfully&quot;</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-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>TODO: need to reset the changes ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_store</span><span class="p">.</span><span class="nx">save</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_changes</span><span class="p">,</span> <span class="k">this</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-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <h3>query</h3>
<p>AJAX method with promise API to get records from the backend.</p>
@ -137,7 +130,7 @@ updated by queryObj (if provided).</p>
<p>Resulting RecordList are used to reset this.records and are
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="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">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;query:start&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
@ -151,9 +144,9 @@ also returned.</p> </td> <td class="code">
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;query:done&#39;</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">records</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">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;query:fail&#39;</span><span class="p">,</span> <span class="nx">arguments</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="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;query:fail&#39;</span><span class="p">,</span> <span class="nx">args</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">args</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>
@ -198,7 +191,7 @@ also returned.</p> </td> <td class="code">
<span class="k">this</span><span class="p">.</span><span class="nx">fields</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">field</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">query</span><span class="p">.</span><span class="nx">addFacet</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="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">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_store</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="nx">query</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span> <span class="k">this</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">queryResult</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">queryResult</span><span class="p">.</span><span class="nx">facets</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="nx">queryResult</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">facetResult</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span>
@ -241,16 +234,23 @@ Dataset e.g. in query method</p>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <h3>getFieldValue</h3>
<p>For the provided Field get the corresponding rendered computed data value
for this record.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getFieldValue</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
for this record.</p>
<p>NB: if field is undefined a default '' value will be returned</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getFieldValue</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getFieldValueUnrendered</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="nx">field</span><span class="p">.</span><span class="nx">renderer</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">renderer</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">renderer</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <h3>getFieldValueUnrendered</h3>
<p>For the provided Field get the corresponding computed data value
for this record.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getFieldValueUnrendered</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
for this record.</p>
<p>NB: if field is undefined a default '' value will be returned</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getFieldValueUnrendered</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s1">&#39;&#39;</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
@ -350,7 +350,7 @@ WARNING: these will not persist <em>unless</em> you call save on Dataset</p>
here that are not actually strings</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">val</span> <span class="o">&amp;&amp;</span> <span class="k">typeof</span> <span class="nx">val</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">val</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(https?:\/\/[^ ]+)/g</span><span class="p">,</span> <span class="s1">&#39;&lt;a href=&quot;$1&quot;&gt;$1&lt;/a&gt;&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">val</span>
<span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
@ -398,7 +398,7 @@ here that are not actually strings</p> </td> <td class="
<p>Add a new filter specified by the filter hash and append to the list of filters</p>
<p>@param filter an object specifying the filter - see _filterTemplates for examples. If only type is provided will generate a filter by cloning _filterTemplates</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</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">&#182;</a> </div> <p>crude deep copy</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">ourfilter</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">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">filter</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">&#182;</a> </div> <p>not fully specified so use template and over-write</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">filter</span><span class="p">).</span><span class="nx">length</span> <span class="o">&lt;=</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">ourfilter</span> <span class="o">=</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">_filterTemplates</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">type</span><span class="p">],</span> <span class="nx">ourfilter</span><span class="p">);</span>
<span class="nx">ourfilter</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">defaults</span><span class="p">(</span><span class="nx">ourfilter</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_filterTemplates</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">type</span><span class="p">]);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;filters&#39;</span><span class="p">);</span>
<span class="nx">filters</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">ourfilter</span><span class="p">);</span>
@ -464,6 +464,6 @@ here that are not actually strings</p> </td> <td class="
<span class="k">return</span> <span class="nx">model</span><span class="p">.</span><span class="nx">backend</span><span class="p">.</span><span class="nx">sync</span><span class="p">(</span><span class="nx">method</span><span class="p">,</span> <span class="nx">model</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</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>
<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>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

452
docs/src/view.flot.html Normal file
View File

@ -0,0 +1,452 @@
<!DOCTYPE html> <html> <head> <title>view.flot.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.flot.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>Graph view for a Dataset using Flot graphing library.</h2>
<p>Initialization arguments (in a hash in first parameter):</p>
<ul>
<li>model: recline.Model.Dataset</li>
<li><p>state: (optional) configuration hash of form:</p>
<p>{
group: {column name for x-axis},
series: [{column name for series A}, {column name series B}, ... ],
graphType: 'line',
graphOptions: {custom [flot options]}
}</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">Flot</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">&#39; \</span>
<span class="s1"> &lt;div class=&quot;recline-flot&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;panel graph&quot; style=&quot;display: block;&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;js-temp-notice alert alert-block&quot;&gt; \</span>
<span class="s1"> &lt;h3 class=&quot;alert-heading&quot;&gt;Hey there!&lt;/h3&gt; \</span>
<span class="s1"> &lt;p&gt;There\&#39;s no graph here yet because we don\&#39;t know what fields you\&#39;d like to see plotted.&lt;/p&gt; \</span>
<span class="s1"> &lt;p&gt;Please tell us by &lt;strong&gt;using the menu on the right&lt;/strong&gt; and a graph will automatically appear.&lt;/p&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1">&#39;</span><span class="p">,</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;#edc240&quot;</span><span class="p">,</span> <span class="s2">&quot;#afd8f8&quot;</span><span class="p">,</span> <span class="s2">&quot;#cb4b4b&quot;</span><span class="p">,</span> <span class="s2">&quot;#4da74d&quot;</span><span class="p">,</span> <span class="s2">&quot;#9440ed&quot;</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">&#39;render&#39;</span><span class="p">,</span> <span class="s1">&#39;redraw&#39;</span><span class="p">,</span> <span class="s1">&#39;_toolTip&#39;</span><span class="p">,</span> <span class="s1">&#39;_xaxisLabel&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</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">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</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">&#39;reset&#39;</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">&#39;add&#39;</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">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;add&#39;</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">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;reset&#39;</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">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">group</span><span class="o">:</span> <span class="kc">null</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">&#182;</a> </div> <p>so that at least one series chooser box shows up</p> </td> <td class="code"> <div class="highlight"><pre> <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">&#39;lines-and-points&#39;</span>
<span class="p">},</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">state</span>
<span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">stateData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">previousTooltipPoint</span> <span class="o">=</span> <span class="p">{</span><span class="nx">x</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">y</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">editor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">FlotControls</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">,</span>
<span class="nx">state</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">editor</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">editor</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">elSidebar</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">editor</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">self</span> <span class="o">=</span> <span class="k">this</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="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</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">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">htmls</span><span class="p">);</span>
<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">&#39;.panel.graph&#39;</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="nx">on</span><span class="p">(</span><span class="s2">&quot;plothover&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">_toolTip</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">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-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>There are issues generating a Flot graph if either:
* The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with
Uncaught Invalid dimensions for plot, width = 0, height = 0
* There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value'</p> </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="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">records</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">return</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">&#182;</a> </div> <p>check we have something to plot</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;group&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</span><span class="p">))</span> <span class="p">{</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">createSeries</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getGraphOptions</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">attributes</span><span class="p">.</span><span class="nx">graphType</span><span class="p">,</span> <span class="nx">series</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">data</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">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="nx">series</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">show</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-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>because we cannot redraw when hidden we may need to when becoming visible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</span><span class="p">)</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="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>infoboxes on mouse hover on points/bars etc</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_toolTip</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">,</span> <span class="nx">pos</span><span class="p">,</span> <span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">previousTooltipPoint</span><span class="p">.</span><span class="nx">x</span> <span class="o">!==</span> <span class="nx">item</span><span class="p">.</span><span class="nx">dataIndex</span> <span class="o">||</span>
<span class="k">this</span><span class="p">.</span><span class="nx">previousTooltipPoint</span><span class="p">.</span><span class="nx">y</span> <span class="o">!==</span> <span class="nx">item</span><span class="p">.</span><span class="nx">seriesIndex</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">previousTooltipPoint</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">dataIndex</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">previousTooltipPoint</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">seriesIndex</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#recline-flot-tooltip&quot;</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">datapoint</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">y</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">datapoint</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">===</span> <span class="s1">&#39;bars&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">x</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">datapoint</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">),</span>
<span class="nx">y</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">datapoint</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="s1">&#39;&lt;%= group %&gt; = &lt;%= x %&gt;, &lt;%= series %&gt; = &lt;%= y %&gt;&#39;</span><span class="p">,</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">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">,</span>
<span class="nx">x</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_xaxisLabel</span><span class="p">(</span><span class="nx">x</span><span class="p">),</span>
<span class="nx">series</span><span class="o">:</span> <span class="nx">item</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">label</span><span class="p">,</span>
<span class="nx">y</span><span class="o">:</span> <span class="nx">y</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">&#182;</a> </div> <p>use a different tooltip location offset for bar charts</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">xLocation</span><span class="p">,</span> <span class="nx">yLocation</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">===</span> <span class="s1">&#39;bars&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">xLocation</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">+</span> <span class="mi">15</span><span class="p">;</span>
<span class="nx">yLocation</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">pageY</span> <span class="o">-</span> <span class="mi">10</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">===</span> <span class="s1">&#39;columns&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">xLocation</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">+</span> <span class="mi">15</span><span class="p">;</span>
<span class="nx">yLocation</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">pageY</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">xLocation</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">pageX</span> <span class="o">+</span> <span class="mi">10</span><span class="p">;</span>
<span class="nx">yLocation</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">pageY</span> <span class="o">-</span> <span class="mi">20</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;div id=&quot;recline-flot-tooltip&quot;&gt;&#39;</span> <span class="o">+</span> <span class="nx">content</span> <span class="o">+</span> <span class="s1">&#39;&lt;/div&gt;&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span>
<span class="nx">top</span><span class="o">:</span> <span class="nx">yLocation</span><span class="p">,</span>
<span class="nx">left</span><span class="o">:</span> <span class="nx">xLocation</span>
<span class="p">}).</span><span class="nx">appendTo</span><span class="p">(</span><span class="s2">&quot;body&quot;</span><span class="p">).</span><span class="nx">fadeIn</span><span class="p">(</span><span class="mi">200</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#recline-flot-tooltip&quot;</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">previousTooltipPoint</span><span class="p">.</span><span class="nx">x</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">previousTooltipPoint</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">_xaxisLabel</span><span class="o">:</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="kd">var</span> <span class="nx">xfield</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">get</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">attributes</span><span class="p">.</span><span class="nx">group</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">&#182;</a> </div> <p>time series</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">xtype</span> <span class="o">=</span> <span class="nx">xfield</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">isDateTime</span> <span class="o">=</span> <span class="p">(</span><span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date-time&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;time&#39;</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">xvaluesAreIndex</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">x</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="mi">10</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">&#182;</a> </div> <p>HACK: deal with bar graph style cases where x-axis items were strings
In this case x at this point is the index of the item in the list of
records not its actual x-axis value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">x</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">records</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">x</span><span class="p">].</span><span class="nx">get</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">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isDateTime</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">x</span><span class="p">).</span><span class="nx">toLocaleDateString</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">&#182;</a> </div> <p>} else if (isDateTime) {
x = new Date(parseInt(x, 10)).toLocaleDateString();
}</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">x</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">&#182;</a> </div> <h3>getGraphOptions</h3>
<p>Get options for Flot Graph</p>
<p>needs to be function as can depend on state</p>
<p>@param typeId graphType id (lines, lines-and-points etc)
@param numPoints the number of points that will be plotted</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getGraphOptions</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">typeId</span><span class="p">,</span> <span class="nx">numPoints</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">tickFormatter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">x</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">&#182;</a> </div> <p>convert x to a string and make sure that it is not too long or the
tick labels will overlap
TODO: find a more accurate way of calculating the size of tick labels</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">label</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_xaxisLabel</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="o">||</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">label</span> <span class="o">!==</span> <span class="s1">&#39;string&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">label</span> <span class="o">=</span> <span class="nx">label</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</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">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">!==</span> <span class="s1">&#39;bars&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">label</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">10</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">label</span> <span class="o">=</span> <span class="nx">label</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;...&quot;</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">label</span><span class="p">;</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">xaxis</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">xaxis</span><span class="p">.</span><span class="nx">tickFormatter</span> <span class="o">=</span> <span class="nx">tickFormatter</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">&#182;</a> </div> <p>for labels case we only want ticks at the label intervals
HACK: however we also get this case with Date fields. In that case we
could have a lot of values and so we limit to max 15 (we assume)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">xvaluesAreIndex</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">numTicks</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</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">records</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="mi">15</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">increment</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">records</span><span class="p">.</span><span class="nx">length</span> <span class="o">/</span> <span class="nx">numTicks</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">ticks</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">&lt;</span><span class="nx">numTicks</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">ticks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">i</span><span class="o">*</span><span class="nx">increment</span><span class="p">,</span> <span class="mi">10</span><span class="p">));</span>
<span class="p">}</span>
<span class="nx">xaxis</span><span class="p">.</span><span class="nx">ticks</span> <span class="o">=</span> <span class="nx">ticks</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">yaxis</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">yaxis</span><span class="p">.</span><span class="nx">autoscale</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">yaxis</span><span class="p">.</span><span class="nx">autoscaleMargin</span> <span class="o">=</span> <span class="mf">0.02</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">legend</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">legend</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s1">&#39;ne&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">grid</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">grid</span><span class="p">.</span><span class="nx">hoverable</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">grid</span><span class="p">.</span><span class="nx">clickable</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">grid</span><span class="p">.</span><span class="nx">borderColor</span> <span class="o">=</span> <span class="s2">&quot;#aaaaaa&quot;</span><span class="p">;</span>
<span class="nx">grid</span><span class="p">.</span><span class="nx">borderWidth</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">optionsPerGraphType</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">grid</span><span class="o">:</span> <span class="nx">grid</span>
<span class="p">},</span>
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">hitRadius</span><span class="o">:</span> <span class="mi">5</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">grid</span><span class="o">:</span> <span class="nx">grid</span>
<span class="p">},</span>
<span class="s1">&#39;lines-and-points&#39;</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">hitRadius</span><span class="o">:</span> <span class="mi">5</span> <span class="p">},</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">grid</span><span class="o">:</span> <span class="nx">grid</span>
<span class="p">},</span>
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">false</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">grid</span><span class="o">:</span> <span class="nx">grid</span><span class="p">,</span>
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">horizontal</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">shadowSize</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">align</span><span class="o">:</span> <span class="s1">&#39;center&#39;</span><span class="p">,</span>
<span class="nx">barWidth</span><span class="o">:</span> <span class="mf">0.8</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">columns</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">false</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">grid</span><span class="o">:</span> <span class="nx">grid</span><span class="p">,</span>
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">horizontal</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">shadowSize</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">align</span><span class="o">:</span> <span class="s1">&#39;center&#39;</span><span class="p">,</span>
<span class="nx">barWidth</span><span class="o">:</span> <span class="mf">0.8</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;graphOptions&#39;</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">extend</span><span class="p">(</span><span class="nx">optionsPerGraphType</span><span class="p">[</span><span class="nx">typeId</span><span class="p">],</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;graphOptions&#39;</span><span class="p">));</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">optionsPerGraphType</span><span class="p">[</span><span class="nx">typeId</span><span class="p">];</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="nx">self</span><span class="p">.</span><span class="nx">xvaluesAreIndex</span> <span class="o">=</span> <span class="kc">false</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="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">state</span><span class="p">.</span><span class="nx">attributes</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">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="kd">var</span> <span class="nx">fieldLabel</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">fields</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">get</span><span class="p">(</span><span class="s1">&#39;label&#39;</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">records</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="nx">index</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">xfield</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">fields</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">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</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">getFieldValue</span><span class="p">(</span><span class="nx">xfield</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">&#182;</a> </div> <p>time series</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">xtype</span> <span class="o">=</span> <span class="nx">xfield</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">isDateTime</span> <span class="o">=</span> <span class="p">(</span><span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date-time&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;time&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isDateTime</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">xvaluesAreIndex</span> <span class="o">=</span> <span class="kc">true</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="k">else</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">&#39;string&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">x</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">x</span><span class="p">))</span> <span class="p">{</span> <span class="c1">// assume this is a string label</span>
<span class="nx">x</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">xvaluesAreIndex</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">yfield</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">fields</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="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">yfield</span><span class="p">);</span>
<span class="k">if</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">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">==</span> <span class="s1">&#39;bars&#39;</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">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">]);</span>
<span class="p">}</span> <span class="k">else</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="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">fieldLabel</span><span class="p">,</span>
<span class="nx">hoverable</span><span class="o">:</span> <span class="kc">true</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>
<span class="p">});</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">FlotControls</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="s2">&quot;editor&quot;</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;editor&quot;&gt; \</span>
<span class="s1"> &lt;form class=&quot;form-stacked&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;clearfix&quot;&gt; \</span>
<span class="s1"> &lt;label&gt;Graph Type&lt;/label&gt; \</span>
<span class="s1"> &lt;div class=&quot;input editor-type&quot;&gt; \</span>
<span class="s1"> &lt;select&gt; \</span>
<span class="s1"> &lt;option value=&quot;lines-and-points&quot;&gt;Lines and Points&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;lines&quot;&gt;Lines&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;points&quot;&gt;Points&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;bars&quot;&gt;Bars&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;columns&quot;&gt;Columns&lt;/option&gt; \</span>
<span class="s1"> &lt;/select&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;label&gt;Group Column (Axis 1)&lt;/label&gt; \</span>
<span class="s1"> &lt;div class=&quot;input editor-group&quot;&gt; \</span>
<span class="s1"> &lt;select&gt; \</span>
<span class="s1"> &lt;option value=&quot;&quot;&gt;Please choose ...&lt;/option&gt; \</span>
<span class="s1"> {{#fields}} \</span>
<span class="s1"> &lt;option value=&quot;{{id}}&quot;&gt;{{label}}&lt;/option&gt; \</span>
<span class="s1"> {{/fields}} \</span>
<span class="s1"> &lt;/select&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;editor-series-group&quot;&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;editor-buttons&quot;&gt; \</span>
<span class="s1"> &lt;button class=&quot;btn editor-add&quot;&gt;Add Series&lt;/button&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;editor-buttons editor-submit&quot; comment=&quot;hidden temporarily&quot; style=&quot;display: none;&quot;&gt; \</span>
<span class="s1"> &lt;button class=&quot;editor-save&quot;&gt;Save&lt;/button&gt; \</span>
<span class="s1"> &lt;input type=&quot;hidden&quot; class=&quot;editor-id&quot; value=&quot;chart-1&quot; /&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/form&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1">&#39;</span><span class="p">,</span>
<span class="nx">templateSeriesEditor</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;editor-series js-series-{{seriesIndex}}&quot;&gt; \</span>
<span class="s1"> &lt;label&gt;Series &lt;span&gt;{{seriesName}} (Axis 2)&lt;/span&gt; \</span>
<span class="s1"> [&lt;a href=&quot;#remove&quot; class=&quot;action-remove-series&quot;&gt;Remove&lt;/a&gt;] \</span>
<span class="s1"> &lt;/label&gt; \</span>
<span class="s1"> &lt;div class=&quot;input&quot;&gt; \</span>
<span class="s1"> &lt;select&gt; \</span>
<span class="s1"> {{#fields}} \</span>
<span class="s1"> &lt;option value=&quot;{{id}}&quot;&gt;{{label}}&lt;/option&gt; \</span>
<span class="s1"> {{/fields}} \</span>
<span class="s1"> &lt;/select&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;change form select&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditorSubmit&#39;</span><span class="p">,</span>
<span class="s1">&#39;click .editor-add&#39;</span><span class="o">:</span> <span class="s1">&#39;_onAddSeries&#39;</span><span class="p">,</span>
<span class="s1">&#39;click .action-remove-series&#39;</span><span class="o">:</span> <span class="s1">&#39;removeSeries&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="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">&#39;render&#39;</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">&#39;reset&#39;</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">&#39;add&#39;</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="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</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">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</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">&#182;</a> </div> <p>set up editor from state</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;graphType&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">&#39;.editor-type&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;graphType&#39;</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;group&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">&#39;.editor-group&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;group&#39;</span><span class="p">));</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>ensure at least one series box shows up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tmpSeries</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;&quot;</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</span><span class="p">).</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">tmpSeries</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</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="nx">tmpSeries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">addSeries</span><span class="p">(</span><span class="nx">idx</span><span class="p">);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">&#39;.editor-series.js-series-&#39;</span> <span class="o">+</span> <span class="nx">idx</span><span class="p">,</span> <span class="nx">series</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="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">options</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="nx">id</span> <span class="o">+</span> <span class="s1">&#39; select &gt; option&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">options</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">opt</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">value</span> <span class="o">==</span> <span class="nx">value</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">attr</span><span class="p">(</span><span class="s1">&#39;selected&#39;</span><span class="p">,</span><span class="s1">&#39;selected&#39;</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</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">&#39;.editor-group select&#39;</span><span class="p">);</span>
<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="kd">var</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">&#39;.editor-series select&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</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="kd">var</span> <span class="nx">updatedState</span> <span class="o">=</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="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">&#39;.editor-group select&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(),</span>
<span class="nx">graphType</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">&#39;.editor-type select&#39;</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">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">updatedState</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">&#182;</a> </div> <p>Public: Adds a new empty series select box to the editor.</p>
<p>@param [int] idx index of this series in the list of series</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">idx</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="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">seriesIndex</span><span class="o">:</span> <span class="nx">idx</span><span class="p">,</span>
<span class="nx">seriesName</span><span class="o">:</span> <span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">idx</span> <span class="o">+</span> <span class="mi">64</span> <span class="o">+</span> <span class="mi">1</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">toTemplateJSON</span><span class="p">());</span>
<span class="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</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">templateSeriesEditor</span><span class="p">,</span> <span class="nx">data</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">&#39;.editor-series-group&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">htmls</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">_onAddSeries</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">addSeries</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</span><span class="p">).</span><span class="nx">length</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">&#182;</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">onEditorSubmit</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>

403
docs/src/view.graph.html
View File

@ -1,403 +1,6 @@
<!DOCTYPE html> <html> <head> <title>view.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<!DOCTYPE html> <html> <head> <title>view.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.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">&#182;</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">&#182;</a> </div> <h2>Graph view for a Dataset using Flot graphing library.</h2>
<p>Initialization arguments (in a hash in first parameter):</p>
<ul>
<li>model: recline.Model.Dataset</li>
<li><p>state: (optional) 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">Graph</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">&#39; \</span>
<span class="s1"> &lt;div class=&quot;recline-graph&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;panel graph&quot; style=&quot;display: block;&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;js-temp-notice alert alert-block&quot;&gt; \</span>
<span class="s1"> &lt;h3 class=&quot;alert-heading&quot;&gt;Hey there!&lt;/h3&gt; \</span>
<span class="s1"> &lt;p&gt;There\&#39;s no graph here yet because we don\&#39;t know what fields you\&#39;d like to see plotted.&lt;/p&gt; \</span>
<span class="s1"> &lt;p&gt;Please tell us by &lt;strong&gt;using the menu on the right&lt;/strong&gt; and a graph will automatically appear.&lt;/p&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1">&#39;</span><span class="p">,</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;#edc240&quot;</span><span class="p">,</span> <span class="s2">&quot;#afd8f8&quot;</span><span class="p">,</span> <span class="s2">&quot;#cb4b4b&quot;</span><span class="p">,</span> <span class="s2">&quot;#4da74d&quot;</span><span class="p">,</span> <span class="s2">&quot;#9440ed&quot;</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">&#39;render&#39;</span><span class="p">,</span> <span class="s1">&#39;redraw&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</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">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</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">&#39;reset&#39;</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">&#39;add&#39;</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">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;add&#39;</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">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;reset&#39;</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">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">group</span><span class="o">:</span> <span class="kc">null</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">&#182;</a> </div> <p>so that at least one series chooser box shows up</p> </td> <td class="code"> <div class="highlight"><pre> <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">&#39;lines-and-points&#39;</span>
<span class="p">},</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">state</span>
<span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">stateData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">editor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">GraphControls</span><span class="p">({</span>
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">,</span>
<span class="nx">state</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">editor</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">editor</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">elSidebar</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">editor</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">self</span> <span class="o">=</span> <span class="k">this</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="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</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">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">htmls</span><span class="p">);</span>
<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">&#39;.panel.graph&#39;</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">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-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</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-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</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="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">records</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">return</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">&#182;</a> </div> <p>check we have something to plot</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;group&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</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">&#182;</a> </div> <p>faff around with width because flot draws axes <em>outside</em> of the element width which means graph can get push down as it hits element next to it</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="p">.</span><span class="nx">width</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">width</span><span class="p">()</span> <span class="o">-</span> <span class="mi">20</span><span class="p">);</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">createSeries</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getGraphOptions</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">attributes</span><span class="p">.</span><span class="nx">graphType</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">Flotr</span><span class="p">.</span><span class="nx">draw</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="nx">get</span><span class="p">(</span><span class="mi">0</span><span class="p">),</span> <span class="nx">series</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">show</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-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>because we cannot redraw when hidden we may need to when becoming visible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</span><span class="p">)</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="p">},</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <h3>getGraphOptions</h3>
<p>Get options for Flot Graph</p>
<p>needs to be function as can depend on state</p>
<p>@param typeId graphType id (lines, lines-and-points etc)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getGraphOptions</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">typeId</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">tickFormatter</span> <span class="o">=</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="k">return</span> <span class="nx">getFormattedX</span><span class="p">(</span><span class="nx">x</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">&#182;</a> </div> <p>infoboxes on mouse hover on points/bars etc</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">trackFormatter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">obj</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">obj</span><span class="p">.</span><span class="nx">x</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">y</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">&#182;</a> </div> <p>it's horizontal so we have to flip</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</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">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">===</span> <span class="s1">&#39;bars&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">_tmp</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
<span class="nx">x</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
<span class="nx">y</span> <span class="o">=</span> <span class="nx">_tmp</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">x</span> <span class="o">=</span> <span class="nx">getFormattedX</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="s1">&#39;&lt;%= group %&gt; = &lt;%= x %&gt;, &lt;%= series %&gt; = &lt;%= y %&gt;&#39;</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">group</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">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">,</span>
<span class="nx">x</span><span class="o">:</span> <span class="nx">x</span><span class="p">,</span>
<span class="nx">series</span><span class="o">:</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">series</span><span class="p">.</span><span class="nx">label</span><span class="p">,</span>
<span class="nx">y</span><span class="o">:</span> <span class="nx">y</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">content</span><span class="p">;</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">getFormattedX</span> <span class="o">=</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="kd">var</span> <span class="nx">xfield</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">fields</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">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</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">&#182;</a> </div> <p>time series</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">xtype</span> <span class="o">=</span> <span class="nx">xfield</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">isDateTime</span> <span class="o">=</span> <span class="p">(</span><span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date-time&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;time&#39;</span><span class="p">);</span>
<span class="k">if</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">records</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">x</span><span class="p">)])</span> <span class="p">{</span>
<span class="nx">x</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">records</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">x</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">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isDateTime</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">x</span><span class="p">).</span><span class="nx">toLocaleDateString</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">isDateTime</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">x</span><span class="p">)).</span><span class="nx">toLocaleDateString</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">x</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">xaxis</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">xaxis</span><span class="p">.</span><span class="nx">tickFormatter</span> <span class="o">=</span> <span class="nx">tickFormatter</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">yaxis</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">yaxis</span><span class="p">.</span><span class="nx">autoscale</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">yaxis</span><span class="p">.</span><span class="nx">autoscaleMargin</span> <span class="o">=</span> <span class="mf">0.02</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">mouse</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">mouse</span><span class="p">.</span><span class="nx">track</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">mouse</span><span class="p">.</span><span class="nx">relative</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">mouse</span><span class="p">.</span><span class="nx">trackFormatter</span> <span class="o">=</span> <span class="nx">trackFormatter</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">legend</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">legend</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s1">&#39;ne&#39;</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">&#182;</a> </div> <p>mouse.lineColor is set in createSeries</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">optionsPerGraphType</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">mouse</span><span class="o">:</span> <span class="nx">mouse</span>
<span class="p">},</span>
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">hitRadius</span><span class="o">:</span> <span class="mi">5</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">mouse</span><span class="o">:</span> <span class="nx">mouse</span><span class="p">,</span>
<span class="nx">grid</span><span class="o">:</span> <span class="p">{</span> <span class="nx">hoverable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">clickable</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
<span class="p">},</span>
<span class="s1">&#39;lines-and-points&#39;</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">hitRadius</span><span class="o">:</span> <span class="mi">5</span> <span class="p">},</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">mouse</span><span class="o">:</span> <span class="nx">mouse</span><span class="p">,</span>
<span class="nx">grid</span><span class="o">:</span> <span class="p">{</span> <span class="nx">hoverable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">clickable</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
<span class="p">},</span>
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">false</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">mouse</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">track</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">relative</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">trackFormatter</span><span class="o">:</span> <span class="nx">trackFormatter</span><span class="p">,</span>
<span class="nx">fillColor</span><span class="o">:</span> <span class="s1">&#39;#FFFFFF&#39;</span><span class="p">,</span>
<span class="nx">fillOpacity</span><span class="o">:</span> <span class="mf">0.3</span><span class="p">,</span>
<span class="nx">position</span><span class="o">:</span> <span class="s1">&#39;e&#39;</span>
<span class="p">},</span>
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">horizontal</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">shadowSize</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">barWidth</span><span class="o">:</span> <span class="mf">0.8</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">columns</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">legend</span><span class="o">:</span> <span class="nx">legend</span><span class="p">,</span>
<span class="nx">colors</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">graphColors</span><span class="p">,</span>
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">false</span> <span class="p">},</span>
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
<span class="nx">yaxis</span><span class="o">:</span> <span class="nx">yaxis</span><span class="p">,</span>
<span class="nx">mouse</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">track</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">relative</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">trackFormatter</span><span class="o">:</span> <span class="nx">trackFormatter</span><span class="p">,</span>
<span class="nx">fillColor</span><span class="o">:</span> <span class="s1">&#39;#FFFFFF&#39;</span><span class="p">,</span>
<span class="nx">fillOpacity</span><span class="o">:</span> <span class="mf">0.3</span><span class="p">,</span>
<span class="nx">position</span><span class="o">:</span> <span class="s1">&#39;n&#39;</span>
<span class="p">},</span>
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">show</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">horizontal</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">shadowSize</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">barWidth</span><span class="o">:</span> <span class="mf">0.8</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">grid</span><span class="o">:</span> <span class="p">{</span> <span class="nx">hoverable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">clickable</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">optionsPerGraphType</span><span class="p">[</span><span class="nx">typeId</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="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">state</span><span class="p">.</span><span class="nx">attributes</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">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">records</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="nx">index</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">xfield</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">fields</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">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</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">getFieldValue</span><span class="p">(</span><span class="nx">xfield</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">&#182;</a> </div> <p>time series</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">xtype</span> <span class="o">=</span> <span class="nx">xfield</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">isDateTime</span> <span class="o">=</span> <span class="p">(</span><span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;date-time&#39;</span> <span class="o">||</span> <span class="nx">xtype</span> <span class="o">===</span> <span class="s1">&#39;time&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isDateTime</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">&#182;</a> </div> <p>datetime</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</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">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">!=</span> <span class="s1">&#39;bars&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">!=</span> <span class="s1">&#39;columns&#39;</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">&#182;</a> </div> <p>not bar or column</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">x</span><span class="p">).</span><span class="nx">getTime</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-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>bar or column</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">x</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">x</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</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">&#182;</a> </div> <p>string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">x</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">isNaN</span><span class="p">(</span><span class="nx">x</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="p">}</span>
<span class="kd">var</span> <span class="nx">yfield</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">fields</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="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">yfield</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">&#182;</a> </div> <p>horizontal bar chart</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</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">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">==</span> <span class="s1">&#39;bars&#39;</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">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">]);</span>
<span class="p">}</span> <span class="k">else</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="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="nx">mouse</span><span class="o">:</span><span class="p">{</span><span class="nx">lineColor</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">graphColors</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="p">});</span>
<span class="k">return</span> <span class="nx">series</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">my</span><span class="p">.</span><span class="nx">GraphControls</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="s2">&quot;editor&quot;</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;editor&quot;&gt; \</span>
<span class="s1"> &lt;form class=&quot;form-stacked&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;clearfix&quot;&gt; \</span>
<span class="s1"> &lt;label&gt;Graph Type&lt;/label&gt; \</span>
<span class="s1"> &lt;div class=&quot;input editor-type&quot;&gt; \</span>
<span class="s1"> &lt;select&gt; \</span>
<span class="s1"> &lt;option value=&quot;lines-and-points&quot;&gt;Lines and Points&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;lines&quot;&gt;Lines&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;points&quot;&gt;Points&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;bars&quot;&gt;Bars&lt;/option&gt; \</span>
<span class="s1"> &lt;option value=&quot;columns&quot;&gt;Columns&lt;/option&gt; \</span>
<span class="s1"> &lt;/select&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;label&gt;Group Column (x-axis)&lt;/label&gt; \</span>
<span class="s1"> &lt;div class=&quot;input editor-group&quot;&gt; \</span>
<span class="s1"> &lt;select&gt; \</span>
<span class="s1"> &lt;option value=&quot;&quot;&gt;Please choose ...&lt;/option&gt; \</span>
<span class="s1"> {{#fields}} \</span>
<span class="s1"> &lt;option value=&quot;{{id}}&quot;&gt;{{label}}&lt;/option&gt; \</span>
<span class="s1"> {{/fields}} \</span>
<span class="s1"> &lt;/select&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;editor-series-group&quot;&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;editor-buttons&quot;&gt; \</span>
<span class="s1"> &lt;button class=&quot;btn editor-add&quot;&gt;Add Series&lt;/button&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;editor-buttons editor-submit&quot; comment=&quot;hidden temporarily&quot; style=&quot;display: none;&quot;&gt; \</span>
<span class="s1"> &lt;button class=&quot;editor-save&quot;&gt;Save&lt;/button&gt; \</span>
<span class="s1"> &lt;input type=&quot;hidden&quot; class=&quot;editor-id&quot; value=&quot;chart-1&quot; /&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/form&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1">&#39;</span><span class="p">,</span>
<span class="nx">templateSeriesEditor</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;editor-series js-series-{{seriesIndex}}&quot;&gt; \</span>
<span class="s1"> &lt;label&gt;Series &lt;span&gt;{{seriesName}} (y-axis)&lt;/span&gt; \</span>
<span class="s1"> [&lt;a href=&quot;#remove&quot; class=&quot;action-remove-series&quot;&gt;Remove&lt;/a&gt;] \</span>
<span class="s1"> &lt;/label&gt; \</span>
<span class="s1"> &lt;div class=&quot;input&quot;&gt; \</span>
<span class="s1"> &lt;select&gt; \</span>
<span class="s1"> {{#fields}} \</span>
<span class="s1"> &lt;option value=&quot;{{id}}&quot;&gt;{{label}}&lt;/option&gt; \</span>
<span class="s1"> {{/fields}} \</span>
<span class="s1"> &lt;/select&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;change form select&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditorSubmit&#39;</span><span class="p">,</span>
<span class="s1">&#39;click .editor-add&#39;</span><span class="o">:</span> <span class="s1">&#39;_onAddSeries&#39;</span><span class="p">,</span>
<span class="s1">&#39;click .action-remove-series&#39;</span><span class="o">:</span> <span class="s1">&#39;removeSeries&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="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">&#39;render&#39;</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">&#39;reset&#39;</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">&#39;add&#39;</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="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</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">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</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">&#182;</a> </div> <p>set up editor from state</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;graphType&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">&#39;.editor-type&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;graphType&#39;</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;group&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">&#39;.editor-group&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;group&#39;</span><span class="p">));</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>ensure at least one series box shows up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tmpSeries</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;&quot;</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</span><span class="p">).</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">tmpSeries</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</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="nx">tmpSeries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">addSeries</span><span class="p">(</span><span class="nx">idx</span><span class="p">);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">&#39;.editor-series.js-series-&#39;</span> <span class="o">+</span> <span class="nx">idx</span><span class="p">,</span> <span class="nx">series</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="p">},</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">options</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="nx">id</span> <span class="o">+</span> <span class="s1">&#39; select &gt; option&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">options</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">opt</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">value</span> <span class="o">==</span> <span class="nx">value</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">attr</span><span class="p">(</span><span class="s1">&#39;selected&#39;</span><span class="p">,</span><span class="s1">&#39;selected&#39;</span><span class="p">);</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</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">&#39;.editor-group select&#39;</span><span class="p">);</span>
<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="kd">var</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">&#39;.editor-series select&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</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="kd">var</span> <span class="nx">updatedState</span> <span class="o">=</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="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">&#39;.editor-group select&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">(),</span>
<span class="nx">graphType</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">&#39;.editor-type select&#39;</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">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">updatedState</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">&#182;</a> </div> <p>Public: Adds a new empty series select box to the editor.</p>
<p>@param [int] idx index of this series in the list of series</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">idx</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="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">seriesIndex</span><span class="o">:</span> <span class="nx">idx</span><span class="p">,</span>
<span class="nx">seriesName</span><span class="o">:</span> <span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">idx</span> <span class="o">+</span> <span class="mi">64</span> <span class="o">+</span> <span class="mi">1</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">toTemplateJSON</span><span class="p">());</span>
<span class="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</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">templateSeriesEditor</span><span class="p">,</span> <span class="nx">data</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">&#39;.editor-series-group&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">htmls</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">_onAddSeries</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">addSeries</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;series&#39;</span><span class="p">).</span><span class="nx">length</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">&#182;</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">onEditorSubmit</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>
<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="p">.</span><span class="nx">Graph</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="p">.</span><span class="nx">Flot</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="p">.</span><span class="nx">GraphControls</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="p">.</span><span class="nx">FlotControls</span><span class="p">;</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

6
docs/src/view.grid.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>view.grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>view.grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
@ -85,8 +85,8 @@ Column and row menus</p> </td> <td class="code">
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">_scrollbarSize</span><span class="p">();</span> <span class="c1">// skip measurement if already have dimensions</span>
<span class="kd">var</span> <span class="nx">numFields</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">length</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">&#182;</a> </div> <p>compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">fullWidth</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">width</span><span class="p">()</span> <span class="o">-</span> <span class="mi">20</span> <span class="o">-</span> <span class="mi">10</span> <span class="o">*</span> <span class="nx">numFields</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">50</span><span class="p">,</span> <span class="nx">fullWidth</span> <span class="o">/</span> <span class="nx">numFields</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">&#182;</a> </div> <p>if columns extend outside viewport then remainder is 0 </p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">remainder</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">fullWidth</span> <span class="o">-</span> <span class="nx">numFields</span> <span class="o">*</span> <span class="nx">width</span><span class="p">,</span><span class="mi">0</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">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="nx">idx</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">&#182;</a> </div> <p>add the remainder to the first field width so we make up full col</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">idx</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">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">50</span><span class="p">,</span> <span class="nx">fullWidth</span> <span class="o">/</span> <span class="nx">numFields</span><span class="p">),</span> <span class="mi">10</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">&#182;</a> </div> <p>if columns extend outside viewport then remainder is 0 </p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">remainder</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">fullWidth</span> <span class="o">-</span> <span class="nx">numFields</span> <span class="o">*</span> <span class="nx">width</span><span class="p">,</span><span class="mi">0</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">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="nx">idx</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">&#182;</a> </div> <p>add the remainder to the first field width so we make up full col</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">idx</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">width</span><span class="o">:</span> <span class="nx">width</span><span class="o">+</span><span class="nx">remainder</span><span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">field</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">width</span><span class="o">:</span> <span class="nx">width</span><span class="p">});</span>

124
docs/src/view.map.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>view.map.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.map.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>view.map.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.map.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
@ -6,9 +6,16 @@
<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">&#182;</a> </div> <h2>Map view for a Dataset using Leaflet mapping library.</h2>
<p>This view allows to plot gereferenced records on a map. The location
information can be provided either via a field with
<a href="http://geojson.org">GeoJSON</a> objects or two fields with latitude and
longitude coordinates.</p>
information can be provided in 2 ways:</p>
<ol>
<li>Via a single field. This field must be either a geo_point or
<a href="http://geojson.org">GeoJSON</a> object</li>
<li>Via two fields with latitude and longitude coordinates.</li>
</ol>
<p>Which fields in the data these correspond to can be configured via the state
(and are guessed if no info is provided).</p>
<p>Initialization arguments are as standard for Dataset Views. State object may
have the following (optional) configuration options:</p>
@ -19,6 +26,9 @@ have the following (optional) configuration options:</p>
geomField: {id of field containing geometry in the dataset}
lonField: {id of field containing longitude in the dataset}
latField: {id of field containing latitude in the dataset}
autoZoom: true,
// use cluster support
cluster: false
}
</pre>
@ -103,7 +113,32 @@ view.infobox = function(record) {
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">html</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">&#182;</a> </div> <h2>END: Customization section</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <h3>Public: Adds the necessary elements to the page.</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Options to use for the <a href="http://leaflet.cloudmade.com/reference.html#geojson">Leaflet GeoJSON layer</a>
See also <a href="http://leaflet.cloudmade.com/examples/geojson.html">http://leaflet.cloudmade.com/examples/geojson.html</a></p>
<p>e.g.</p>
<pre><code>pointToLayer: function(feature, latLng)
onEachFeature: function(feature, layer)
</code></pre>
<p>See defaults for examples</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">geoJsonLayerOptions</span><span class="o">:</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">&#182;</a> </div> <p>pointToLayer function to use when creating points</p>
<p>Default behaviour shown here is to create a marker using the
popupContent set on the feature properties (created via infobox function
during feature generation)</p>
<p>NB: inside pointToLayer <code>this</code> will be set to point to this map view
instance (which allows e.g. this.markers to work in this default case)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">pointToLayer</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">feature</span><span class="p">,</span> <span class="nx">latlng</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">marker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">Marker</span><span class="p">(</span><span class="nx">latlng</span><span class="p">);</span>
<span class="nx">marker</span><span class="p">.</span><span class="nx">bindPopup</span><span class="p">(</span><span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">popupContent</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">&#182;</a> </div> <p>this is for cluster case</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">markers</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">marker</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">marker</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">&#182;</a> </div> <p>onEachFeature default which adds popup in</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onEachFeature</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">feature</span><span class="p">,</span> <span class="nx">layer</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span> <span class="o">&amp;&amp;</span> <span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">popupContent</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">layer</span><span class="p">.</span><span class="nx">bindPopup</span><span class="p">(</span><span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">popupContent</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <h2>END: Customization section</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <h3>Public: Adds the necessary elements to the page.</h3>
<p>Also sets up the editor fields and the map if necessary.</p> </td> <td class="code"> <div class="highlight"><pre> <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>
@ -113,7 +148,7 @@ view.infobox = function(record) {
<span class="k">this</span><span class="p">.</span><span class="nx">$map</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">&#39;.panel.map&#39;</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">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">&#182;</a> </div> <h3>Public: Redraws the features on the map according to the action provided</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <h3>Public: Redraws the features on the map according to the action provided</h3>
<p>Actions can be:</p>
@ -124,33 +159,39 @@ view.infobox = function(record) {
<li>refresh: Clear existing features and add all current records</li>
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">action</span><span class="p">,</span> <span class="nx">doc</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">action</span> <span class="o">=</span> <span class="nx">action</span> <span class="o">||</span> <span class="s1">&#39;refresh&#39;</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">&#182;</a> </div> <p>try to set things up if not already</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">_geomReady</span><span class="p">()){</span>
<span class="nx">action</span> <span class="o">=</span> <span class="nx">action</span> <span class="o">||</span> <span class="s1">&#39;refresh&#39;</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">&#182;</a> </div> <p>try to set things up if not already</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">self</span><span class="p">.</span><span class="nx">_geomReady</span><span class="p">()){</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_setupGeometryField</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">self</span><span class="p">.</span><span class="nx">mapReady</span><span class="p">){</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">_setupMap</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_geomReady</span><span class="p">()</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">mapReady</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">&#182;</a> </div> <p>removing ad re-adding the layer enables faster bulk loading</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">removeLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">features</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">_geomReady</span><span class="p">()</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">mapReady</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">&#182;</a> </div> <p>removing ad re-adding the layer enables faster bulk loading</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">removeLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">removeLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">markers</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">countBefore</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">features</span><span class="p">.</span><span class="nx">eachLayer</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">countBefore</span><span class="o">++</span><span class="p">;});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">==</span> <span class="s1">&#39;refresh&#39;</span> <span class="o">||</span> <span class="nx">action</span> <span class="o">==</span> <span class="s1">&#39;reset&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">clearLayers</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">&#182;</a> </div> <p>recreate cluster group because of issues with clearLayer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">removeLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">markers</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">clearLayers</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">&#182;</a> </div> <p>recreate cluster group because of issues with clearLayer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">removeLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">markers</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">markers</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">MarkerClusterGroup</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_clusterOptions</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_add</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">records</span><span class="p">.</span><span class="nx">models</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">==</span> <span class="s1">&#39;add&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">doc</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_add</span><span class="p">(</span><span class="nx">doc</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">==</span> <span class="s1">&#39;remove&#39;</span> <span class="o">&amp;&amp;</span> <span class="nx">doc</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="nx">doc</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">&#182;</a> </div> <p>enable clustering if there is a large number of markers</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">countAfter</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-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <p>enable clustering if there is a large number of markers</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">countAfter</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">features</span><span class="p">.</span><span class="nx">eachLayer</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="nx">countAfter</span><span class="o">++</span><span class="p">;});</span>
<span class="kd">var</span> <span class="nx">sizeIncreased</span> <span class="o">=</span> <span class="nx">countAfter</span> <span class="o">-</span> <span class="nx">countBefore</span> <span class="o">&gt;</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;cluster&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">countAfter</span> <span class="o">&gt;</span> <span class="mi">64</span> <span class="o">&amp;&amp;</span> <span class="nx">sizeIncreased</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">set</span><span class="p">({</span><span class="nx">cluster</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>this must come before zooming!
if not: errors when using e.g. circle markers like
"Cannot call method 'project' of undefined"</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;cluster&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">markers</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">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;autoZoom&#39;</span><span class="p">)){</span>
@ -160,15 +201,10 @@ view.infobox = function(record) {
<span class="k">this</span><span class="p">.</span><span class="nx">_zoomPending</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;cluster&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">markers</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">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">show</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-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>If the div was hidden, Leaflet needs to recalculate some sizes
<span class="nx">show</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-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <p>If the div was hidden, Leaflet needs to recalculate some sizes
to display properly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">invalidateSize</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">_zoomPending</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;autoZoom&#39;</span><span class="p">))</span> <span class="p">{</span>
@ -185,7 +221,7 @@ to display properly</p> </td> <td class="code">
<span class="nx">_geomReady</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="nb">Boolean</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;geomField&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;latField&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;lonField&#39;</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">&#182;</a> </div> <p>Private: Add one or n features to the map</p>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>Private: Add one or n features to the map</p>
<p>For each record passed, a GeoJSON geometry will be extracted and added
to the features layer. If an exception is thrown, the process will be
@ -201,10 +237,10 @@ stopped and an error notification shown.</p>
<span class="nx">_</span><span class="p">.</span><span class="nx">every</span><span class="p">(</span><span class="nx">docs</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="nx">count</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">feature</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_getGeometryFromRecord</span><span class="p">(</span><span class="nx">doc</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">feature</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">||</span> <span class="nx">feature</span> <span class="o">===</span> <span class="kc">null</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">&#182;</a> </div> <p>Empty field</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">feature</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span> <span class="o">||</span> <span class="nx">feature</span> <span class="o">===</span> <span class="kc">null</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">&#182;</a> </div> <p>Empty field</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">feature</span> <span class="k">instanceof</span> <span class="nb">Object</span><span class="p">){</span>
<span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">popupContent</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">infobox</span><span class="p">(</span><span class="nx">doc</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">&#182;</a> </div> <p>Add a reference to the model id, which will allow us to
<span class="nx">popupContent</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">infobox</span><span class="p">(</span><span class="nx">doc</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">&#182;</a> </div> <p>Add a reference to the model id, which will allow us to
link this Leaflet layer to a Recline doc</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">cid</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">cid</span>
<span class="p">};</span>
@ -226,7 +262,7 @@ link this Leaflet layer to a Recline doc</p> </td> <td c
<span class="p">}</span>
<span class="k">return</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-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>Private: Remove one or n features from the map</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_remove</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">docs</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">&#182;</a> </div> <p>Private: Remove one or n features from the map</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_remove</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">docs</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>
@ -240,10 +276,10 @@ link this Leaflet layer to a Recline doc</p> </td> <td c
<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">&#182;</a> </div> <p>Private: Return a GeoJSON geomtry extracted from the record fields</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_getGeometryFromRecord</span><span class="o">:</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-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Private: Return a GeoJSON geomtry extracted from the record fields</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_getGeometryFromRecord</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;geomField&#39;</span><span class="p">)){</span>
<span class="kd">var</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;geomField&#39;</span><span class="p">));</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</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">&#182;</a> </div> <p>We <em>may</em> have a GeoJSON string representation</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">try</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">===</span> <span class="s1">&#39;string&#39;</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">&#182;</a> </div> <p>We <em>may</em> have a GeoJSON string representation</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">try</span> <span class="p">{</span>
<span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">parseJSON</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{}</span>
<span class="p">}</span>
@ -261,16 +297,16 @@ link this Leaflet layer to a Recline doc</p> </td> <td c
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">&amp;&amp;</span> <span class="nx">value</span><span class="p">.</span><span class="nx">slice</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">&#182;</a> </div> <p>[ lon, lat ]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="p">{</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">&amp;&amp;</span> <span class="nx">_</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">value</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">&#182;</a> </div> <p>[ lon, lat ]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="p">{</span>
<span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;Point&quot;</span><span class="p">,</span>
<span class="s2">&quot;coordinates&quot;</span><span class="o">:</span> <span class="p">[</span><span class="nx">value</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">value</span><span class="p">[</span><span class="mi">1</span><span class="p">]]</span>
<span class="p">};</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">&amp;&amp;</span> <span class="nx">value</span><span class="p">.</span><span class="nx">lat</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">&#182;</a> </div> <p>of form { lat: ..., lon: ...}</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="p">{</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">&amp;&amp;</span> <span class="nx">value</span><span class="p">.</span><span class="nx">lat</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>of form { lat: ..., lon: ...}</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="p">{</span>
<span class="s2">&quot;type&quot;</span><span class="o">:</span> <span class="s2">&quot;Point&quot;</span><span class="p">,</span>
<span class="s2">&quot;coordinates&quot;</span><span class="o">:</span> <span class="p">[</span><span class="nx">value</span><span class="p">.</span><span class="nx">lon</span> <span class="o">||</span> <span class="nx">value</span><span class="p">.</span><span class="nx">lng</span><span class="p">,</span> <span class="nx">value</span><span class="p">.</span><span class="nx">lat</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">&#182;</a> </div> <p>We o/w assume that contents of the field are a valid GeoJSON object</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;lonField&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;latField&#39;</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">&#182;</a> </div> <p>We'll create a GeoJSON like point object from the two lat/lon fields</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">lon</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;lonField&#39;</span><span class="p">));</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">&#182;</a> </div> <p>We o/w assume that contents of the field are a valid GeoJSON object</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;lonField&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;latField&#39;</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">&#182;</a> </div> <p>We'll create a GeoJSON like point object from the two lat/lon fields</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">lon</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;lonField&#39;</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">lat</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;latField&#39;</span><span class="p">));</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">lon</span><span class="p">))</span> <span class="o">&amp;&amp;</span> <span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">lat</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
@ -280,10 +316,10 @@ link this Leaflet layer to a Recline doc</p> </td> <td c
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</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">&#182;</a> </div> <p>Private: Check if there is a field with GeoJSON geometries or alternatively,
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Private: Check if there is a field with GeoJSON geometries or alternatively,
two fields with lat/lon values.</p>
<p>If not found, the user can define them via the UI form.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupGeometryField</span><span class="o">:</span> <span class="kd">function</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">&#182;</a> </div> <p>should not overwrite if we have already set this (e.g. explicitly via state)</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">_geomReady</span><span class="p">())</span> <span class="p">{</span>
<p>If not found, the user can define them via the UI form.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupGeometryField</span><span class="o">:</span> <span class="kd">function</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">&#182;</a> </div> <p>should not overwrite if we have already set this (e.g. explicitly via state)</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">_geomReady</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">set</span><span class="p">({</span>
<span class="nx">geomField</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_checkField</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">geometryFieldNames</span><span class="p">),</span>
<span class="nx">latField</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_checkField</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">latitudeFieldNames</span><span class="p">),</span>
@ -291,7 +327,7 @@ two fields with lat/lon values.</p>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">menu</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>Private: Check if a field in the current model exists in the provided
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <p>Private: Check if a field in the current model exists in the provided
list of names.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_checkField</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldNames</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">field</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">modelFieldNames</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">pluck</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">);</span>
@ -302,7 +338,7 @@ list of names.</p> </td> <td class="code">
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</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">&#182;</a> </div> <p>Private: Zoom to map to current features extent if any, or to the full
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">&#182;</a> </div> <p>Private: Zoom to map to current features extent if any, or to the full
extent if none.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_zoomToFeatures</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">getBounds</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span> <span class="o">&amp;&amp;</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">getNorthEast</span><span class="p">()</span> <span class="o">&amp;&amp;</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">getSouthWest</span><span class="p">()){</span>
@ -310,7 +346,7 @@ extent if none.</p> </td> <td class="code">
<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">map</span><span class="p">.</span><span class="nx">setView</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">],</span> <span class="mi">2</span><span class="p">);</span>
<span class="p">}</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">&#182;</a> </div> <p>Private: Sets up the Leaflet map control and the features layer.</p>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <p>Private: Sets up the Leaflet map control and the features layer.</p>
<p>The map uses a base layer from <a href="http://www.mapquest.com">MapQuest</a> based
on <a href="http://openstreetmap.org">OpenStreetMap</a>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupMap</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
@ -322,21 +358,15 @@ on <a href="http://openstreetmap.org">OpenStreetMap</a>.</p> </td>
<span class="kd">var</span> <span class="nx">bg</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">TileLayer</span><span class="p">(</span><span class="nx">mapUrl</span><span class="p">,</span> <span class="p">{</span><span class="nx">maxZoom</span><span class="o">:</span> <span class="mi">18</span><span class="p">,</span> <span class="nx">attribution</span><span class="o">:</span> <span class="nx">osmAttribution</span> <span class="p">,</span><span class="nx">subdomains</span><span class="o">:</span> <span class="s1">&#39;1234&#39;</span><span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">bg</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">markers</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">MarkerClusterGroup</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_clusterOptions</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">features</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">GeoJSON</span><span class="p">(</span><span class="kc">null</span><span class="p">,{</span>
<span class="nx">pointToLayer</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">feature</span><span class="p">,</span> <span class="nx">latlng</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">marker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">marker</span><span class="p">(</span><span class="nx">latlng</span><span class="p">);</span>
<span class="nx">marker</span><span class="p">.</span><span class="nx">bindPopup</span><span class="p">(</span><span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">popupContent</span><span class="p">);</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">markers</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="nx">marker</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">marker</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">markers</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">MarkerClusterGroup</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_clusterOptions</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">&#182;</a> </div> <p>rebind this (as needed in e.g. default case above)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">geoJsonLayerOptions</span><span class="p">.</span><span class="nx">pointToLayer</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span>
<span class="k">this</span><span class="p">.</span><span class="nx">geoJsonLayerOptions</span><span class="p">.</span><span class="nx">pointToLayer</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">features</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">GeoJSON</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">geoJsonLayerOptions</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">setView</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">],</span> <span class="mi">2</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">mapReady</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">&#182;</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</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">&#182;</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.&#39;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39; &gt; select &gt; option&#39;</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">options</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">opt</span><span class="p">){</span>
@ -409,7 +439,7 @@ on <a href="http://openstreetmap.org">OpenStreetMap</a>.</p> </td>
<span class="s1"> &lt;input type=&quot;hidden&quot; class=&quot;editor-id&quot; value=&quot;map-1&quot; /&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/form&gt; \</span>
<span class="s1"> &#39;</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">&#182;</a> </div> <p>Define here events for UI elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1"> &#39;</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">&#182;</a> </div> <p>Define here events for UI elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .editor-update-map&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditorSubmit&#39;</span><span class="p">,</span>
<span class="s1">&#39;change .editor-field-type&#39;</span><span class="o">:</span> <span class="s1">&#39;onFieldTypeChange&#39;</span><span class="p">,</span>
<span class="s1">&#39;click #editor-auto-zoom&#39;</span><span class="o">:</span> <span class="s1">&#39;onAutoZoomChange&#39;</span><span class="p">,</span>
@ -424,7 +454,7 @@ on <a href="http://openstreetmap.org">OpenStreetMap</a>.</p> </td>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">state</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">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">&#182;</a> </div> <h3>Public: Adds the necessary elements to the page.</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">&#182;</a> </div> <h3>Public: Adds the necessary elements to the page.</h3>
<p>Also sets up the editor fields and the map if necessary.</p> </td> <td class="code"> <div class="highlight"><pre> <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>
@ -456,7 +486,7 @@ on <a href="http://openstreetmap.org">OpenStreetMap</a>.</p> </td>
<span class="nx">_geomReady</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="nb">Boolean</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;geomField&#39;</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;latField&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;lonField&#39;</span><span class="p">)));</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">&#182;</a> </div> <h2>UI Event handlers</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">&#182;</a> </div> <p>Public: Update map with user options</p>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">&#182;</a> </div> <h2>UI Event handlers</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">&#182;</a> </div> <p>Public: Update map with user options</p>
<p>Right now the only configurable option is what field(s) contains the
location information.</p> </td> <td class="code"> <div class="highlight"><pre> <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>
@ -475,7 +505,7 @@ location information.</p> </td> <td class="code">
<span class="p">});</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</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">&#182;</a> </div> <p>Public: Shows the relevant select lists depending on the location field
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">&#182;</a> </div> <p>Public: Shows the relevant select lists depending on the location field
type selected.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onFieldTypeChange</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="k">if</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="o">==</span> <span class="s1">&#39;geom&#39;</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">&#39;.editor-field-type-geom&#39;</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
@ -492,7 +522,7 @@ type selected.</p> </td> <td class="code">
<span class="nx">onClusteringChange</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">cluster</span><span class="o">:</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;cluster&#39;</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">&#182;</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</span><span class="p">){</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">&#182;</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">options</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">&#39;.&#39;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39; &gt; select &gt; option&#39;</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">options</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">opt</span><span class="p">){</span>

74
docs/src/view.multiview.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>view.multiview.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.multiview.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Standard JS module setup</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<!DOCTYPE html> <html> <head> <title>view.multiview.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.multiview.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Standard JS module setup</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>MultiView</h2>
@ -107,7 +107,7 @@ initialized the MultiView with the relevant views themselves.</p> </
<span class="s1"> &lt;div class=&quot;menu-right&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;btn-group&quot; data-toggle=&quot;buttons-checkbox&quot;&gt; \</span>
<span class="s1"> {{#sidebarViews}} \</span>
<span class="s1"> &lt;a href=&quot;#&quot; data-action=&quot;{{id}}&quot; class=&quot;btn active&quot;&gt;{{label}}&lt;/a&gt; \</span>
<span class="s1"> &lt;a href=&quot;#&quot; data-action=&quot;{{id}}&quot; class=&quot;btn&quot;&gt;{{label}}&lt;/a&gt; \</span>
<span class="s1"> {{/sidebarViews}} \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
@ -156,12 +156,6 @@ initialized the MultiView with the relevant views themselves.</p> </
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">,</span>
<span class="nx">state</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;view-timeline&#39;</span><span class="p">)</span>
<span class="p">})</span>
<span class="p">},</span> <span class="p">{</span>
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;transform&#39;</span><span class="p">,</span>
<span class="nx">label</span><span class="o">:</span> <span class="s1">&#39;Transform&#39;</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">Transform</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-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>Hashes of sidebar elements</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">sidebarViews</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">sidebarViews</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">sidebarViews</span><span class="p">;</span>
@ -189,6 +183,7 @@ initialized the MultiView with the relevant views themselves.</p> </
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_showHideSidebar</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">&#39;query:start&#39;</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">notify</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">persist</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
@ -255,20 +250,28 @@ TODO: set query state ...?</p> </td> <td class="code">
<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">&#39;.query-editor-here&#39;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">queryEditor</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>hide the sidebar if empty</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_showHideSidebar</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">$dataSidebar</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">&#39;.data-view-sidebar&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">visibleChildren</span> <span class="o">=</span> <span class="nx">$dataSidebar</span><span class="p">.</span><span class="nx">children</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="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">css</span><span class="p">(</span><span class="s2">&quot;display&quot;</span><span class="p">)</span> <span class="o">!=</span> <span class="s2">&quot;none&quot;</span><span class="p">;</span>
<span class="p">}).</span><span class="nx">length</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">visibleChildren</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$dataSidebar</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">$dataSidebar</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">updateNav</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pageName</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.navigation a&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">&#39;active&#39;</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">&#39;.navigation a[data-view=&quot;&#39;</span> <span class="o">+</span> <span class="nx">pageName</span> <span class="o">+</span> <span class="s1">&#39;&quot;]&#39;</span><span class="p">);</span>
<span class="nx">$el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;active&#39;</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">&#182;</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="nx">$el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;active&#39;</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">&#182;</a> </div> <p>add/remove sidebars and hide inactive views</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="k">if</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">elSidebar</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">elSidebar</span><span class="p">.</span><span class="nx">show</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">view</span><span class="p">.</span><span class="nx">show</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">show</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">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="k">if</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">elSidebar</span><span class="p">)</span> <span class="p">{</span>
@ -279,12 +282,22 @@ TODO: set query state ...?</p> </td> <td class="code">
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_showHideSidebar</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">&#182;</a> </div> <p>call view.view.show after sidebar visibility has been determined so
that views can correctly calculate their maximum width</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="k">if</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">show</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">show</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">_onMenuClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">action</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-action&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">[</span><span class="s1">&#39;$&#39;</span><span class="o">+</span><span class="nx">action</span><span class="p">].</span><span class="nx">toggle</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_showHideSidebar</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">_onSwitchView</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
@ -292,15 +305,15 @@ TODO: set query state ...?</p> </td> <td class="code">
<span class="kd">var</span> <span class="nx">viewName</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-view&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="nx">viewName</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">currentView</span><span class="o">:</span> <span class="nx">viewName</span><span class="p">});</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>create a state object for this view and do the job of</p>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>create a state object for this view and do the job of</p>
<p>a) initializing it from both data passed in and other sources (e.g. hash url)</p>
<p>b) ensure the state object is updated in responese to changes in subviews, query etc.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupState</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initialState</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>get data from the query string / hash url plus some defaults</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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">&#182;</a> </div> <p>get data from the query string / hash url plus some defaults</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">reclineQuery</span><span class="p">;</span>
<span class="nx">query</span> <span class="o">=</span> <span class="nx">query</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>backwards compatability (now named view-graph but was named graph)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">graphState</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">[</span><span class="s1">&#39;view-graph&#39;</span><span class="p">]</span> <span class="o">||</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">graph</span><span class="p">;</span>
<span class="nx">graphState</span> <span class="o">=</span> <span class="nx">graphState</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">graphState</span><span class="p">)</span> <span class="o">:</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">&#182;</a> </div> <p>now get default data + hash url plus initial state and initial our state object with it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">query</span> <span class="o">=</span> <span class="nx">query</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>backwards compatability (now named view-graph but was named graph)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">graphState</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">[</span><span class="s1">&#39;view-graph&#39;</span><span class="p">]</span> <span class="o">||</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">graph</span><span class="p">;</span>
<span class="nx">graphState</span> <span class="o">=</span> <span class="nx">graphState</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">graphState</span><span class="p">)</span> <span class="o">:</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>now get default data + hash url plus initial state and initial our state object with it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">query</span><span class="o">:</span> <span class="nx">query</span><span class="p">,</span>
<span class="s1">&#39;view-graph&#39;</span><span class="o">:</span> <span class="nx">graphState</span><span class="p">,</span>
<span class="nx">backend</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">backend</span><span class="p">.</span><span class="nx">__type__</span><span class="p">,</span>
@ -314,7 +327,7 @@ TODO: set query state ...?</p> </td> <td class="code">
<span class="p">},</span>
<span class="nx">_bindStateChanges</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">&#182;</a> </div> <p>finally ensure we update our state object when state of sub-object changes so that state is always up to date</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</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">self</span> <span class="o">=</span> <span class="k">this</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">&#182;</a> </div> <p>finally ensure we update our state object when state of sub-object changes so that state is always up to date</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">query</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()});</span>
<span class="p">});</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pageView</span><span class="p">)</span> <span class="p">{</span>
@ -324,7 +337,7 @@ TODO: set query state ...?</p> </td> <td class="code">
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">);</span>
<span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">update</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">update</span><span class="p">[</span><span class="s1">&#39;view-&#39;</span> <span class="o">+</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">&#182;</a> </div> <p>had problems where change not being triggered for e.g. grid view so let's do it explicitly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">,</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
<span class="nx">update</span><span class="p">[</span><span class="s1">&#39;view-&#39;</span> <span class="o">+</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <p>had problems where change not being triggered for e.g. grid view so let's do it explicitly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">,</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</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">trigger</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
@ -338,7 +351,7 @@ TODO: set query state ...?</p> </td> <td class="code">
<span class="nx">self</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">flash</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">&#182;</a> </div> <h3>notify</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h3>notify</h3>
<p>Create a notification (a div.alert in div.alert-messsages) using provided
flash object. Flash attributes (all are optional):</p>
@ -378,7 +391,7 @@ flash object. Flash attributes (all are optional):</p>
<span class="p">});</span>
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">&#182;</a> </div> <h3>clearNotifications</h3>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <h3>clearNotifications</h3>
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre> <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">&#39;.recline-data-explorer .alert-messages .alert&#39;</span><span class="p">);</span>
@ -386,17 +399,18 @@ flash object. Flash attributes (all are optional):</p>
<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="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">&#182;</a> </div> <h3>MultiView.restore</h3>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h3>MultiView.restore</h3>
<p>Restore a MultiView instance from a serialized state including the associated dataset</p>
<p>This inverts the state serialization process in Multiview</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">MultiView</span><span class="p">.</span><span class="nx">restore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">&#182;</a> </div> <p>hack-y - restoring a memory dataset does not mean much ... (but useful for testing!)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">state</span><span class="p">.</span><span class="nx">backend</span> <span class="o">===</span> <span class="s1">&#39;memory&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">datasetInfo</span> <span class="o">=</span> <span class="p">{</span>
<p>This inverts the state serialization process in Multiview</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">MultiView</span><span class="p">.</span><span class="nx">restore</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</a> </div> <p>hack-y - restoring a memory dataset does not mean much ... (but useful for testing!)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">datasetInfo</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">state</span><span class="p">.</span><span class="nx">backend</span> <span class="o">===</span> <span class="s1">&#39;memory&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">datasetInfo</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">backend</span><span class="o">:</span> <span class="s1">&#39;memory&#39;</span><span class="p">,</span>
<span class="nx">records</span><span class="o">:</span> <span class="p">[{</span><span class="nx">stub</span><span class="o">:</span> <span class="s1">&#39;this is a stub dataset because we do not restore memory datasets&#39;</span><span class="p">}]</span>
<span class="p">};</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">datasetInfo</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">datasetInfo</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">url</span><span class="o">:</span> <span class="nx">state</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
<span class="nx">backend</span><span class="o">:</span> <span class="nx">state</span><span class="p">.</span><span class="nx">backend</span>
<span class="p">},</span>
@ -409,7 +423,7 @@ flash object. Flash attributes (all are optional):</p>
<span class="nx">state</span><span class="o">:</span> <span class="nx">state</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">explorer</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">&#182;</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">&#182;</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="p">};</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</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-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</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>
@ -419,7 +433,7 @@ flash object. Flash attributes (all are optional):</p>
<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">&#39;&#39;</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">&#182;</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{};</span>
<span class="p">}</span>
@ -432,13 +446,13 @@ flash object. Flash attributes (all are optional):</p>
<span class="k">if</span> <span class="p">(</span><span class="nx">q</span> <span class="o">&amp;&amp;</span> <span class="nx">q</span><span class="p">.</span><span class="nx">length</span> <span class="o">&amp;&amp;</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">&#39;?&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">q</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">&#182;</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">urlParams</span><span class="p">;</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">&#182;</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">q</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">).</span><span class="nx">query</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">&#182;</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">&#182;</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">&#39;?&#39;</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>
@ -453,7 +467,7 @@ flash object. Flash attributes (all are optional):</p>
<span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">queryPart</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">&#182;</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;?&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">&#182;</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;?&#39;</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">queryPart</span><span class="p">;</span>
<span class="p">}</span>

130
docs/src/view.slickgrid.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>view.slickgrid.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.slickgrid.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>view.slickgrid.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.slickgrid.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
@ -11,7 +11,24 @@
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p>
<p>NB: you need an explicit height on the element for slickgrid to work</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">SlickGrid</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>Additional options to drive SlickGrid grid can be given through state.
The following keys allow for customization:
* gridOptions: to add options at grid level
* columnsEditor: to add editor for editable columns</p>
<p>For example:
var grid = new recline.View.SlickGrid({
model: dataset,
el: $el,
state: {
gridOptions: {editable: true},
columnsEditor: [
{column: 'date', editor: Slick.Editors.Date },
{column: 'title', editor: Slick.Editors.Text}
]
}
});
// NB: you need an explicit height on the element for slickgrid to work</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">SlickGrid</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">modelEtc</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
@ -20,14 +37,18 @@
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;add&#39;</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">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;reset&#39;</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">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;remove&#39;</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">records</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">onRecordChanged</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">state</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">hiddenColumns</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">columnsOrder</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">columnsSort</span><span class="o">:</span> <span class="p">{},</span>
<span class="nx">columnsWidth</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">columnsEditor</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{},</span>
<span class="nx">fitColumns</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">},</span> <span class="nx">modelEtc</span><span class="p">.</span><span class="nx">state</span>
<span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span>
<span class="p">},</span>
@ -35,16 +56,24 @@
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="p">},</span>
<span class="nx">onRecordChanged</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</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">&#182;</a> </div> <p>Ignore if the grid is not yet drawn</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">grid</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</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">&#182;</a> </div> <p>Let's find the row corresponding to the index</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">row_index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getData</span><span class="p">().</span><span class="nx">getModelRow</span><span class="p">(</span> <span class="nx">record</span> <span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">invalidateRow</span><span class="p">(</span><span class="nx">row_index</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getData</span><span class="p">().</span><span class="nx">updateItem</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">row_index</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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">options</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">enableCellNavigation</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">enableColumnReorder</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">explicitInitialization</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">syncColumnCellResize</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">forceFitColumns</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;fitColumns&#39;</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">&#182;</a> </div> <p>We need all columns, even the hidden ones, to show on the column picker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">columns</span> <span class="o">=</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">&#182;</a> </div> <p>custom formatter as default one escapes html
<span class="p">},</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;gridOptions&#39;</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">&#182;</a> </div> <p>We need all columns, even the hidden ones, to show on the column picker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">columns</span> <span class="o">=</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">&#182;</a> </div> <p>custom formatter as default one escapes html
plus this way we distinguish between rendering/formatting and computed value (so e.g. sort still works ...)
row = row index, cell = cell index, value = value, columnDef = column definition, dataContext = full row values</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">formatter</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">,</span> <span class="nx">cell</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">columnDef</span><span class="p">,</span> <span class="nx">dataContext</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">field</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">fields</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">columnDef</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
@ -53,55 +82,81 @@ row = row index, cell = cell index, value = value, columnDef = column definition
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="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">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">column</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">id</span><span class="o">:</span><span class="nx">field</span><span class="p">[</span><span class="s1">&#39;id&#39;</span><span class="p">],</span>
<span class="nx">name</span><span class="o">:</span><span class="nx">field</span><span class="p">[</span><span class="s1">&#39;label&#39;</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="s1">&#39;id&#39;</span><span class="p">],</span>
<span class="nx">id</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">name</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">label</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">sortable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">minWidth</span><span class="o">:</span> <span class="mi">80</span><span class="p">,</span>
<span class="nx">formatter</span><span class="o">:</span> <span class="nx">formatter</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">widthInfo</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsWidth&#39;</span><span class="p">),</span><span class="kd">function</span><span class="p">(</span><span class="nx">c</span><span class="p">){</span><span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">column</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="kd">var</span> <span class="nx">widthInfo</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsWidth&#39;</span><span class="p">),</span><span class="kd">function</span><span class="p">(</span><span class="nx">c</span><span class="p">){</span><span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">column</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="k">if</span> <span class="p">(</span><span class="nx">widthInfo</span><span class="p">){</span>
<span class="nx">column</span><span class="p">[</span><span class="s1">&#39;width&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">widthInfo</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
<span class="nx">column</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">widthInfo</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">editInfo</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsEditor&#39;</span><span class="p">),</span><span class="kd">function</span><span class="p">(</span><span class="nx">c</span><span class="p">){</span><span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">column</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="k">if</span> <span class="p">(</span><span class="nx">editInfo</span><span class="p">){</span>
<span class="nx">column</span><span class="p">.</span><span class="nx">editor</span> <span class="o">=</span> <span class="nx">editInfo</span><span class="p">.</span><span class="nx">editor</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">columns</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">column</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">&#182;</a> </div> <p>Restrict the visible columns</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">visibleColumns</span> <span class="o">=</span> <span class="nx">columns</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">column</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hiddenColumns&#39;</span><span class="p">),</span> <span class="nx">column</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></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Order them if there is ordering info on the state</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">).</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Restrict the visible columns</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">visibleColumns</span> <span class="o">=</span> <span class="nx">columns</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">column</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;hiddenColumns&#39;</span><span class="p">),</span> <span class="nx">column</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></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Order them if there is ordering info on the state</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">).</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">visibleColumns</span> <span class="o">=</span> <span class="nx">visibleColumns</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">),</span><span class="nx">a</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">&gt;</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">),</span><span class="nx">b</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">columns</span> <span class="o">=</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">sort</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span><span class="nx">b</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">),</span><span class="nx">a</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">&gt;</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">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;columnsOrder&#39;</span><span class="p">),</span><span class="nx">b</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Move hidden columns to the end, so they appear at the bottom of the
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Move hidden columns to the end, so they appear at the bottom of the
column picker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tempHiddenColumns</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">i</span> <span class="o">=</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">visibleColumns</span><span class="p">,</span><span class="s1">&#39;id&#39;</span><span class="p">),</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</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="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">visibleColumns</span><span class="p">,</span><span class="s1">&#39;id&#39;</span><span class="p">),</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</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="nx">tempHiddenColumns</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">columns</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span><span class="mi">1</span><span class="p">)[</span><span class="mi">0</span><span class="p">]);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">columns</span> <span class="o">=</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">tempHiddenColumns</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</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">records</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">doc</span><span class="p">){</span>
<span class="nx">columns</span> <span class="o">=</span> <span class="nx">columns</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">tempHiddenColumns</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">&#182;</a> </div> <p>Transform a model object into a row</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">toRow</span><span class="p">(</span><span class="nx">m</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="nx">self</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">each</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="nx">row</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="nx">doc</span><span class="p">.</span><span class="nx">getFieldValueUnrendered</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
<span class="nx">row</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="nx">m</span><span class="p">.</span><span class="nx">getFieldValueUnrendered</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">data</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">row</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">RowSet</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">models</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">rows</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">this</span><span class="p">.</span><span class="nx">push</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">row</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">models</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
<span class="nx">rows</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">row</span><span class="p">);</span>
<span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">getLength</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="nx">rows</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="p">};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">getItem</span> <span class="o">=</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">return</span> <span class="nx">rows</span><span class="p">[</span><span class="nx">index</span><span class="p">];};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">getItemMetadata</span> <span class="o">=</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">return</span> <span class="p">{};};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">getModel</span> <span class="o">=</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">return</span> <span class="nx">models</span><span class="p">[</span><span class="nx">index</span><span class="p">];};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">getModelRow</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">m</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">models</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">m</span><span class="p">);};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">updateItem</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">m</span><span class="p">,</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">rows</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">toRow</span><span class="p">(</span><span class="nx">m</span><span class="p">);</span>
<span class="nx">models</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">m</span><span class="p">;</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">new</span> <span class="nx">RowSet</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">records</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">doc</span><span class="p">){</span>
<span class="nx">data</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">toRow</span><span class="p">(</span><span class="nx">doc</span><span class="p">));</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Grid</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">data</span><span class="p">,</span> <span class="nx">visibleColumns</span><span class="p">,</span> <span class="nx">options</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">&#182;</a> </div> <p>Column sorting</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">sortInfo</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;sort&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Grid</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">data</span><span class="p">,</span> <span class="nx">visibleColumns</span><span class="p">,</span> <span class="nx">options</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">&#182;</a> </div> <p>Column sorting</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">sortInfo</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;sort&#39;</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">sortInfo</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">column</span> <span class="o">=</span> <span class="nx">sortInfo</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">field</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sortAsc</span> <span class="o">=</span> <span class="o">!</span><span class="p">(</span><span class="nx">sortInfo</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">order</span> <span class="o">==</span> <span class="s1">&#39;desc&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">sortAsc</span> <span class="o">=</span> <span class="nx">sortInfo</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">order</span> <span class="o">!==</span> <span class="s1">&#39;desc&#39;</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">setSortColumn</span><span class="p">(</span><span class="nx">column</span><span class="p">,</span> <span class="nx">sortAsc</span><span class="p">);</span>
<span class="p">}</span>
@ -130,19 +185,27 @@ column picker</p> </td> <td class="code">
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">columnsWidth</span><span class="o">:</span><span class="nx">columnsWidth</span><span class="p">});</span>
<span class="p">});</span>
<span class="k">this</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">onCellChange</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">args</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">&#182;</a> </div> <p>We need to change the model associated value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">grid</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">grid</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">model</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">getModel</span><span class="p">(</span><span class="nx">args</span><span class="p">.</span><span class="nx">row</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">grid</span><span class="p">.</span><span class="nx">getColumns</span><span class="p">()[</span><span class="nx">args</span><span class="p">.</span><span class="nx">cell</span><span class="p">].</span><span class="nx">id</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">v</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">v</span><span class="p">[</span><span class="nx">field</span><span class="p">]</span> <span class="o">=</span> <span class="nx">args</span><span class="p">.</span><span class="nx">item</span><span class="p">[</span><span class="nx">field</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">v</span><span class="p">);</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">columnpicker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Slick</span><span class="p">.</span><span class="nx">Controls</span><span class="p">.</span><span class="nx">ColumnPicker</span><span class="p">(</span><span class="nx">columns</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">grid</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">options</span><span class="p">,{</span><span class="nx">state</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">}));</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">visible</span><span class="p">){</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">grid</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">rendered</span> <span class="o">=</span> <span class="kc">true</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-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Defer rendering until the view is visible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">rendered</span> <span class="o">=</span> <span class="kc">false</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-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Defer rendering until the view is visible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">rendered</span> <span class="o">=</span> <span class="kc">false</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="p">},</span>
<span class="nx">show</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-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>If the div is hidden, SlickGrid will calculate wrongly some
<span class="nx">show</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-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">&#182;</a> </div> <p>If the div is hidden, SlickGrid will calculate wrongly some
sizes so we must render it explicitly when the view is visible</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">rendered</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">grid</span><span class="p">){</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
@ -181,7 +244,7 @@ sizes so we must render it explicitly when the view is visible</p> <
<span class="nx">$menu</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;ul class=&quot;dropdown-menu slick-contextmenu&quot; style=&quot;display:none;position:absolute;z-index:20;&quot; /&gt;&#39;</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
<span class="nx">$menu</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;mouseleave&#39;</span><span class="p">,</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">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">fadeSpeed</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">fadeOut</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">fadeSpeed</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">$menu</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="nx">updateColumn</span><span class="p">);</span>
@ -198,7 +261,7 @@ sizes so we must render it explicitly when the view is visible</p> <
<span class="nx">$input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;&lt;input type=&quot;checkbox&quot; /&gt;&#39;</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">&#39;column-id&#39;</span><span class="p">,</span> <span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;id&#39;</span><span class="p">,</span><span class="s1">&#39;slick-column-vis-&#39;</span><span class="o">+</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">);</span>
<span class="nx">columnCheckboxes</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">$input</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getColumnIndex</span><span class="p">(</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">)</span> <span class="o">!=</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">grid</span><span class="p">.</span><span class="nx">getColumnIndex</span><span class="p">(</span><span class="nx">columns</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span><span class="p">)</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span> <span class="s1">&#39;checked&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">$input</span><span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$li</span><span class="p">);</span>
@ -225,10 +288,12 @@ sizes so we must render it explicitly when the view is visible</p> <
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">updateColumn</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</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">&#39;option&#39;</span><span class="p">)</span> <span class="o">==</span> <span class="s1">&#39;autoresize&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">checkbox</span><span class="p">;</span>
<span class="k">if</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">&#39;option&#39;</span><span class="p">)</span> <span class="o">===</span> <span class="s1">&#39;autoresize&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">checked</span><span class="p">;</span>
<span class="k">if</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">is</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">)){</span>
<span class="kd">var</span> <span class="nx">checkbox</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">).</span><span class="nx">first</span><span class="p">();</span>
<span class="nx">checkbox</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">).</span><span class="nx">first</span><span class="p">();</span>
<span class="nx">checked</span> <span class="o">=</span> <span class="o">!</span><span class="nx">checkbox</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s1">&#39;:checked&#39;</span><span class="p">);</span>
<span class="nx">checkbox</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="nx">checked</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
@ -248,7 +313,7 @@ sizes so we must render it explicitly when the view is visible</p> <
<span class="k">if</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">is</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</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">hasClass</span><span class="p">(</span><span class="s1">&#39;divider&#39;</span><span class="p">))</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">is</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">))</span> <span class="p">{</span>
<span class="k">if</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">is</span><span class="p">(</span><span class="s1">&#39;li&#39;</span><span class="p">)){</span>
<span class="kd">var</span> <span class="nx">checkbox</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">).</span><span class="nx">first</span><span class="p">();</span>
<span class="nx">checkbox</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input&#39;</span><span class="p">).</span><span class="nx">first</span><span class="p">();</span>
<span class="nx">checkbox</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span><span class="o">!</span><span class="nx">checkbox</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s1">&#39;:checked&#39;</span><span class="p">));</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">visibleColumns</span> <span class="o">=</span> <span class="p">[];</span>
@ -261,7 +326,6 @@ sizes so we must render it explicitly when the view is visible</p> <
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">visibleColumns</span><span class="p">.</span><span class="nx">length</span><span class="p">)</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">attr</span><span class="p">(</span><span class="s1">&#39;checked&#39;</span><span class="p">,</span> <span class="s1">&#39;checked&#39;</span><span class="p">);</span>
<span class="k">return</span><span class="p">;</span>
@ -272,7 +336,7 @@ sizes so we must render it explicitly when the view is visible</p> <
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">init</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">&#182;</a> </div> <p>Slick.Controls.ColumnPicker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="nb">window</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Slick</span><span class="o">:</span><span class="p">{</span> <span class="nx">Controls</span><span class="o">:</span><span class="p">{</span> <span class="nx">ColumnPicker</span><span class="o">:</span><span class="nx">SlickColumnPicker</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">&#182;</a> </div> <p>Slick.Controls.ColumnPicker</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="nb">window</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Slick</span><span class="o">:</span><span class="p">{</span> <span class="nx">Controls</span><span class="o">:</span><span class="p">{</span> <span class="nx">ColumnPicker</span><span class="o">:</span><span class="nx">SlickColumnPicker</span> <span class="p">}}});</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>

24
docs/src/view.timeline.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>view.timeline.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.timeline.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>view.timeline.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.timeline.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
@ -30,7 +30,8 @@ If not found, the user will need to define these fields on initialization</p>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">startField</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="nx">endField</span><span class="o">:</span> <span class="kc">null</span>
<span class="nx">endField</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="nx">timelineJSOptions</span><span class="o">:</span> <span class="p">{}</span>
<span class="p">},</span>
<span class="nx">options</span><span class="p">.</span><span class="nx">state</span>
<span class="p">);</span>
@ -53,13 +54,9 @@ internally to look up element</p> </td> <td class="code"
<span class="p">},</span>
<span class="nx">_initTimeline</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">$timeline</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="k">this</span><span class="p">.</span><span class="nx">elementId</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">&#182;</a> </div> <p>set width explicitly o/w timeline goes wider that screen for some reason</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">width</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">&#39;.recline-timeline&#39;</span><span class="p">).</span><span class="nx">width</span><span class="p">());</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">width</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$timeline</span><span class="p">.</span><span class="nx">width</span><span class="p">(</span><span class="nx">width</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">$timeline</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="k">this</span><span class="p">.</span><span class="nx">elementId</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">_timelineJSON</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">elementId</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">timeline</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">elementId</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;timelineJSOptions&quot;</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">_timelineIsInitialized</span> <span class="o">=</span> <span class="kc">true</span>
<span class="p">},</span>
@ -68,11 +65,11 @@ internally to look up element</p> </td> <td class="code"
<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">_timelineJSON</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">reload</span><span class="p">(</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-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Convert record to JSON for timeline</p>
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Convert record to JSON for timeline</p>
<p>Designed to be overridden in client apps</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">convertRecord</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">fields</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">_convertRecord</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">fields</span><span class="p">);</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">&#182;</a> </div> <p>Internal method to generate a Timeline formatted entry</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_convertRecord</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">fields</span><span class="p">)</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">&#182;</a> </div> <p>Internal method to generate a Timeline formatted entry</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_convertRecord</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">fields</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">start</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_parseDate</span><span class="p">(</span><span class="nx">record</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;startField&#39;</span><span class="p">)));</span>
<span class="kd">var</span> <span class="nx">end</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_parseDate</span><span class="p">(</span><span class="nx">record</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;endField&#39;</span><span class="p">)));</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">start</span><span class="p">)</span> <span class="p">{</span>
@ -103,7 +100,7 @@ internally to look up element</p> </td> <td class="code"
<span class="k">if</span> <span class="p">(</span><span class="nx">newEntry</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">out</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">date</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">newEntry</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">&#182;</a> </div> <p>if no entries create a placeholder entry to prevent Timeline crashing with error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">date</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="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>if no entries create a placeholder entry to prevent Timeline crashing with error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">date</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="kd">var</span> <span class="nx">tlEntry</span> <span class="o">=</span> <span class="p">{</span>
<span class="s2">&quot;startDate&quot;</span><span class="o">:</span> <span class="s1">&#39;2000,1,1&#39;</span><span class="p">,</span>
<span class="s2">&quot;headline&quot;</span><span class="o">:</span> <span class="s1">&#39;No data to show!&#39;</span>
@ -123,10 +120,7 @@ internally to look up element</p> </td> <td class="code"
<span class="nx">out</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">trim</span><span class="p">()</span> <span class="o">?</span> <span class="nx">moment</span><span class="p">(</span><span class="nx">out</span><span class="p">)</span> <span class="o">:</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">toDate</span><span class="p">()</span> <span class="o">==</span> <span class="s1">&#39;Invalid Date&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">null</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-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>fix for moment weirdness around date parsing and time zones
moment('1914-08-01').toDate() => 1914-08-01 00:00 +01:00
which in iso format (with 0 time offset) is 31 July 1914 23:00
meanwhile native new Date('1914-08-01') => 1914-08-01 01:00 +01:00</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">out</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">subtract</span><span class="p">(</span><span class="s1">&#39;minutes&#39;</span><span class="p">,</span> <span class="nx">out</span><span class="p">.</span><span class="nx">zone</span><span class="p">());</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">out</span><span class="p">.</span><span class="nx">toDate</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span>

124
docs/src/view.transform.html
View File

@ -1,124 +0,0 @@
<!DOCTYPE html> <html> <head> <title>view.transform.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.transform.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Views module following classic module pattern</p> </td> <td class="code"> <div class="highlight"><pre><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-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>ColumnTransform</h2>
<p>View (Dialog) for doing data transformations</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Transform</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">&#39; \</span>
<span class="s1"> &lt;div class=&quot;recline-transform&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;script&quot;&gt; \</span>
<span class="s1"> &lt;h2&gt; \</span>
<span class="s1"> Transform Script \</span>
<span class="s1"> &lt;button class=&quot;okButton btn btn-primary&quot;&gt;Run on all records&lt;/button&gt; \</span>
<span class="s1"> &lt;/h2&gt; \</span>
<span class="s1"> &lt;textarea class=&quot;expression-preview-code&quot;&gt;&lt;/textarea&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;expression-preview-parsing-status&quot;&gt; \</span>
<span class="s1"> No syntax error. \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div class=&quot;preview&quot;&gt; \</span>
<span class="s1"> &lt;h3&gt;Preview&lt;/h3&gt; \</span>
<span class="s1"> &lt;div class=&quot;expression-preview-container&quot;&gt;&lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .okButton&#39;</span><span class="o">:</span> <span class="s1">&#39;onSubmit&#39;</span><span class="p">,</span>
<span class="s1">&#39;keydown .expression-preview-code&#39;</span><span class="o">:</span> <span class="s1">&#39;onEditorKeydown&#39;</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="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">Mustache</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">template</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">&#182;</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">&#39;.expression-preview-code&#39;</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">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</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="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">models</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">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="s1">&#39;unknown&#39;</span><span class="p">;</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">&quot;function(doc) {\n doc[&#39;&quot;</span><span class="o">+</span> <span class="nx">col</span> <span class="o">+</span><span class="s2">&quot;&#39;] = doc[&#39;&quot;</span><span class="o">+</span> <span class="nx">col</span> <span class="o">+</span><span class="s2">&quot;&#39;];\n return doc;\n}&quot;</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">&#39;.expression-preview-code&#39;</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">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">.</span><span class="nx">Transform</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="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;recline:flash&#39;</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">&quot;Error with function! &quot;</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="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">transform</span><span class="p">(</span><span class="nx">editFunc</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">editPreviewTemplate</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;table class=&quot;table table-condensed table-bordered before-after&quot;&gt; \</span>
<span class="s1"> &lt;thead&gt; \</span>
<span class="s1"> &lt;tr&gt; \</span>
<span class="s1"> &lt;th&gt;Field&lt;/th&gt; \</span>
<span class="s1"> &lt;th&gt;Before&lt;/th&gt; \</span>
<span class="s1"> &lt;th&gt;After&lt;/th&gt; \</span>
<span class="s1"> &lt;/tr&gt; \</span>
<span class="s1"> &lt;/thead&gt; \</span>
<span class="s1"> &lt;tbody&gt; \</span>
<span class="s1"> {{#row}} \</span>
<span class="s1"> &lt;tr&gt; \</span>
<span class="s1"> &lt;td&gt; \</span>
<span class="s1"> {{field}} \</span>
<span class="s1"> &lt;/td&gt; \</span>
<span class="s1"> &lt;td class=&quot;before {{#different}}different{{/different}}&quot;&gt; \</span>
<span class="s1"> {{before}} \</span>
<span class="s1"> &lt;/td&gt; \</span>
<span class="s1"> &lt;td class=&quot;after {{#different}}different{{/different}}&quot;&gt; \</span>
<span class="s1"> {{after}} \</span>
<span class="s1"> &lt;/td&gt; \</span>
<span class="s1"> &lt;/tr&gt; \</span>
<span class="s1"> {{/row}} \</span>
<span class="s1"> &lt;/tbody&gt; \</span>
<span class="s1"> &lt;/table&gt; \</span>
<span class="s1"> &#39;</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-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</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">&#39;.expression-preview-parsing-status&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">editFunc</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">.</span><span class="nx">Transform</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">&#39;No syntax error.&#39;</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">records</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">recline</span><span class="p">.</span><span class="nx">Data</span><span class="p">.</span><span class="nx">Transform</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="kd">var</span> <span class="nx">$el</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">&#39;.expression-preview-container&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">fields</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">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">rows</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">previewData</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">4</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="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</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="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">before</span><span class="o">:</span> <span class="nx">row</span><span class="p">.</span><span class="nx">before</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">],</span>
<span class="nx">after</span><span class="o">:</span> <span class="nx">row</span><span class="p">.</span><span class="nx">after</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">],</span>
<span class="nx">different</span><span class="o">:</span> <span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">row</span><span class="p">.</span><span class="nx">before</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">],</span> <span class="nx">row</span><span class="p">.</span><span class="nx">after</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="p">});</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="s1">&#39;&#39;</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">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">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">editPreviewTemplate</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">row</span><span class="o">:</span> <span class="nx">row</span>
<span class="p">});</span>
<span class="nx">$el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">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>
<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>

2
docs/src/widget.facetviewer.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>widget.facetviewer.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.facetviewer.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>widget.facetviewer.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.facetviewer.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>

23
docs/src/widget.fields.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>widget.fields.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.fields.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Field Info</p>
<!DOCTYPE html> <html> <head> <title>widget.fields.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.fields.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Field Info</p>
<p>For each field</p>
@ -28,7 +28,7 @@ If number: max, min average ...</p> </td> <td class="cod
<span class="s1"> &lt;/small&gt; \</span>
<span class="s1"> &lt;/h4&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &lt;div id=&quot;collapse{{id}}&quot; class=&quot;accordion-body collapse in&quot;&gt; \</span>
<span class="s1"> &lt;div id=&quot;collapse{{id}}&quot; class=&quot;accordion-body collapse&quot;&gt; \</span>
<span class="s1"> &lt;div class=&quot;accordion-inner&quot;&gt; \</span>
<span class="s1"> {{#facets}} \</span>
<span class="s1"> &lt;div class=&quot;facet-summary&quot; data-facet=&quot;{{id}}&quot;&gt; \</span>
@ -47,9 +47,6 @@ If number: max, min average ...</p> </td> <td class="cod
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .js-show-hide&#39;</span><span class="o">:</span> <span class="s1">&#39;onShowHide&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
<span class="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>
@ -62,6 +59,7 @@ being more liberal (e.g. binding to all) can lead to being called a lot (e.g. fo
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>fields can get reset or changed in which case we need to recalculate</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">getFieldsSummary</span><span class="p">();</span>
<span class="nx">self</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">find</span><span class="p">(</span><span class="s1">&#39;.collapse&#39;</span><span class="p">).</span><span class="nx">collapse</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>
@ -76,21 +74,6 @@ being more liberal (e.g. binding to all) can lead to being called a lot (e.g. fo
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</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">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
<span class="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">&#39;.collapse&#39;</span><span class="p">).</span><span class="nx">collapse</span><span class="p">(</span><span class="s1">&#39;hide&#39;</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">onShowHide</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">$target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>weird collapse class seems to have been removed (can watch this happen
if you watch dom) but could not work why. Absence of collapse then meant
we could not toggle.
This seems to fix the problem.</p> </td> <td class="code"> <div class="highlight"><pre> <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">&#39;.accordion-body&#39;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">&#39;collapse&#39;</span><span class="p">);;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$target</span><span class="p">.</span><span class="nx">text</span><span class="p">()</span> <span class="o">===</span> <span class="s1">&#39;+&#39;</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">&#39;.collapse&#39;</span><span class="p">).</span><span class="nx">collapse</span><span class="p">(</span><span class="s1">&#39;show&#39;</span><span class="p">);</span>
<span class="nx">$target</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;-&#39;</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;.collapse&#39;</span><span class="p">).</span><span class="nx">collapse</span><span class="p">(</span><span class="s1">&#39;hide&#39;</span><span class="p">);</span>
<span class="nx">$target</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="s1">&#39;+&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>

8
docs/src/widget.filtereditor.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>widget.filtereditor.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.filtereditor.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>widget.filtereditor.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.filtereditor.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
@ -120,7 +120,7 @@
<span class="nx">$target</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">filterType</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;select.filterType&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;select.fields&#39;</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">queryState</span><span class="p">.</span><span class="nx">addFilter</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="nx">filterType</span><span class="p">,</span> <span class="nx">field</span><span class="o">:</span> <span class="nx">field</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">&#182;</a> </div> <p>trigger render explicitly as queryState change will not be triggered (as blank value for filter)</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">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFilter</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="nx">filterType</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="p">},</span>
<span class="nx">onRemoveFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
@ -137,7 +137,7 @@
<span class="kd">var</span> <span class="nx">$input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">input</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">filterType</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-filter-type&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-filter-field&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">filterIndex</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-filter-id&#39;</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">filterIndex</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-filter-id&#39;</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;name&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
@ -158,7 +158,7 @@
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="mi">0</span><span class="p">});</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">});</span>

5
docs/src/widget.pager.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>widget.pager.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.pager.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>widget.pager.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.pager.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
@ -32,6 +32,8 @@
<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">newFrom</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input[name=&quot;from&quot;]&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
<span class="kd">var</span> <span class="nx">newSize</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">&#39;input[name=&quot;to&quot;]&#39;</span><span class="p">).</span><span class="nx">val</span><span class="p">())</span> <span class="o">-</span> <span class="nx">newFrom</span><span class="p">;</span>
<span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">newFrom</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="nx">newSize</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">newSize</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">size</span><span class="o">:</span> <span class="nx">newSize</span><span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span>
<span class="p">},</span>
<span class="nx">onPaginationUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
@ -43,6 +45,7 @@
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">newFrom</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;from&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;size&#39;</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">newFrom</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>

2
docs/src/widget.queryeditor.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <html> <head> <title>widget.queryeditor.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.ckan.html"> backend.ckan.js </a> <a class="source" href="backend.couchdb.html"> backend.couchdb.js </a> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="data.transform.html"> data.transform.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="view.transform.html"> view.transform.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.queryeditor.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html> <html> <head> <title>widget.queryeditor.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 &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.elasticsearch.html"> backend.elasticsearch.js </a> <a class="source" href="backend.gdocs.html"> backend.gdocs.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.queryeditor.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">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>

15
docs/tutorial-views.markdown
View File

@ -120,13 +120,16 @@ grid.render();
Let's create a graph view to display a line graph for this dataset.
First, add the additional dependencies for this view. These are the Flot
library and the Recline Graph view:
library and the Recline Flot Graph view:
{% highlight html %}
<link rel="stylesheet" href="css/graph.css">
<link rel="stylesheet" href="css/flot.css">
<!-- javascript -->
<script type="text/javascript" src="vendor/flotr2/flotr2.js"></script>
<!--[if lte IE 8]>
<script language="javascript" type="text/javascript" src="vendor/flot/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript" src="vendor/flot/jquery.flot.js"></script>
<script type="text/javascript" src="src/view.graph.js"></script>
{% endhighlight %}
@ -251,9 +254,10 @@ First, add the additional dependencies for the timeline view. The timeline is bu
<script type="text/javascript" src="vendor/timeline/20120520/js/timeline.js"></script>
{% endhighlight %}
Now, create a new div for the map:
Now, create a new div for the map (must have an explicit height for the timeline to render):
{% highlight html %}
<style type="text/css">#mytimeline .recline-timeline { height: 400px; }</style>
<div id="mytimeline"></div>
{% endhighlight %}
@ -264,7 +268,8 @@ previously:
{% include tutorial-views-timeline.js %}
{% endhighlight %}
<div id="mytimeline">&nbsp;</div>
<style type="text/css">#mytimeline .recline-timeline { height: 400px; }</style>
<div id="mytimeline"></div>
<div style="clear: both;"></div>
<script type="text/javascript">

142
src/backend.ckan.js
View File

@ -1,142 +0,0 @@
this.recline = this.recline || {};
this.recline.Backend = this.recline.Backend || {};
this.recline.Backend.Ckan = this.recline.Backend.Ckan || {};
(function(my) {
// ## CKAN Backend
//
// This provides connection to the CKAN DataStore (v2)
//
// General notes
//
// We need 2 things to make most requests:
//
// 1. CKAN API endpoint
// 2. ID of resource for which request is being made
//
// There are 2 ways to specify this information.
//
// EITHER (checked in order):
//
// * Every dataset must have an id equal to its resource id on the CKAN instance
// * The dataset has an endpoint attribute pointing to the CKAN API endpoint
//
// OR:
//
// Set the url attribute of the dataset to point to the Resource on the CKAN instance. The endpoint and id will then be automatically computed.
my.__type__ = 'ckan';
// private - use either jQuery or Underscore Deferred depending on what is available
var Deferred = _.isUndefined(this.jQuery) ? _.Deferred : jQuery.Deferred;
// Default CKAN API endpoint used for requests (you can change this but it will affect every request!)
//
// DEPRECATION: this will be removed in v0.7. Please set endpoint attribute on dataset instead
my.API_ENDPOINT = 'http://datahub.io/api';
// ### fetch
my.fetch = function(dataset) {
if (dataset.endpoint) {
var wrapper = my.DataStore(dataset.endpoint);
} else {
var out = my._parseCkanResourceUrl(dataset.url);
dataset.id = out.resource_id;
var wrapper = my.DataStore(out.endpoint);
}
var dfd = new Deferred();
var jqxhr = wrapper.search({resource_id: dataset.id, limit: 0});
jqxhr.done(function(results) {
// map ckan types to our usual types ...
var fields = _.map(results.result.fields, function(field) {
field.type = field.type in CKAN_TYPES_MAP ? CKAN_TYPES_MAP[field.type] : field.type;
return field;
});
var out = {
fields: fields,
useMemoryStore: false
};
dfd.resolve(out);
});
return dfd.promise();
};
// only put in the module namespace so we can access for tests!
my._normalizeQuery = function(queryObj, dataset) {
var actualQuery = {
resource_id: dataset.id,
q: queryObj.q,
limit: queryObj.size || 10,
offset: queryObj.from || 0
};
if (queryObj.sort && queryObj.sort.length > 0) {
var _tmp = _.map(queryObj.sort, function(sortObj) {
return sortObj.field + ' ' + (sortObj.order || '');
});
actualQuery.sort = _tmp.join(',');
}
return actualQuery;
}
my.query = function(queryObj, dataset) {
if (dataset.endpoint) {
var wrapper = my.DataStore(dataset.endpoint);
} else {
var out = my._parseCkanResourceUrl(dataset.url);
dataset.id = out.resource_id;
var wrapper = my.DataStore(out.endpoint);
}
var actualQuery = my._normalizeQuery(queryObj, dataset);
var dfd = new Deferred();
var jqxhr = wrapper.search(actualQuery);
jqxhr.done(function(results) {
var out = {
total: results.result.total,
hits: results.result.records,
};
dfd.resolve(out);
});
return dfd.promise();
};
// ### DataStore
//
// Simple wrapper around the CKAN DataStore API
//
// @param endpoint: CKAN api endpoint (e.g. http://datahub.io/api)
my.DataStore = function(endpoint) {
var that = {
endpoint: endpoint || my.API_ENDPOINT
};
that.search = function(data) {
var searchUrl = that.endpoint + '/3/action/datastore_search';
var jqxhr = jQuery.ajax({
url: searchUrl,
data: data,
dataType: 'json'
});
return jqxhr;
}
return that;
};
// Parse a normal CKAN resource URL and return API endpoint etc
//
// Normal URL is something like http://demo.ckan.org/dataset/some-dataset/resource/eb23e809-ccbb-4ad1-820a-19586fc4bebd
my._parseCkanResourceUrl = function(url) {
parts = url.split('/');
var len = parts.length;
return {
resource_id: parts[len-1],
endpoint: parts.slice(0,[len-4]).join('/') + '/api'
}
};
var CKAN_TYPES_MAP = {
'int4': 'integer',
'int8': 'integer',
'float8': 'float'
};
}(this.recline.Backend.Ckan));

563
src/backend.couchdb.js
View File

@ -1,563 +0,0 @@
this.recline = this.recline || {};
this.recline.Backend = this.recline.Backend || {};
this.recline.Backend.CouchDB = this.recline.Backend.CouchDB || {};
(function($, my) {
my.__type__ = 'couchdb';
// use either jQuery or Underscore Deferred depending on what is available
var Deferred = _.isUndefined(this.jQuery) ? _.Deferred : jQuery.Deferred;
// ## CouchDB Wrapper
//
// Connecting to [CouchDB] (http://www.couchdb.apache.org/) endpoints.
// @param {String} endpoint: url for CouchDB database, e.g. for Couchdb running
// on localhost:5984 with database // ckan-std it would be:
//
//
// TODO Add user/password arguments for couchdb authentication support.
//
// See the example how to use this in: "demos/couchdb/"
my.CouchDBWrapper = function(db_url, view_url, options) {
var self = this;
self.endpoint = db_url;
self.view_url = (view_url) ? view_url : db_url+'/'+'_all_docs';
self.options = _.extend({
dataType: 'json'
},
options);
this._makeRequest = function(data, headers) {
var extras = {};
if (headers) {
extras = {
beforeSend: function(req) {
_.each(headers, function(value, key) {
req.setRequestHeader(key, value);
});
}
};
}
data = _.extend(extras, data);
return $.ajax(data);
};
// ### mapping
//
// Get mapping for this database.
// Assume all docs in the view have the same schema so
// limit query to single result.
//
// @return promise compatible deferred object.
this.mapping = function() {
var schemaUrl = self.view_url + '?limit=1&include_docs=true';
var jqxhr = self._makeRequest({
url: schemaUrl,
dataType: self.options.dataType
});
return jqxhr;
};
// ### get
//
// Get record corresponding to specified id
//
// @return promise compatible deferred object.
this.get = function(_id) {
var base = self.endpoint + '/' + _id;
return self._makeRequest({
url: base,
dataType: 'json'
});
};
// ### upsert
//
// create / update a record to CouchDB backend
//
// @param {Object} doc an object to insert to the index.
// @return deferred supporting promise API
this.upsert = function(doc) {
var data = JSON.stringify(doc);
url = self.endpoint;
if (doc._id) {
url += '/' + doc._id;
}
// use a PUT, not a POST to update the document:
// http://wiki.apache.org/couchdb/HTTP_Document_API#POST
return self._makeRequest({
url: url,
type: 'PUT',
data: data,
dataType: 'json',
contentType: 'application/json'
});
};
// ### delete
//
// Delete a record from the CouchDB backend.
//
// @param {Object} id id of object to delete
// @return deferred supporting promise API
this.remove = function(_id) {
url = self.endpoint;
url += '/' + _id;
return self._makeRequest({
url: url,
type: 'DELETE',
dataType: 'json'
});
};
// ### _normalizeQuery
//
// Convert the query object from Elastic Search format to a
// Couchdb View API compatible format.
// See: http://wiki.apache.org/couchdb/HTTP_view_API
//
this._normalizeQuery = function(queryObj) {
var out = queryObj && queryObj.toJSON ? queryObj.toJSON() : _.extend({}, queryObj);
delete out.sort;
delete out.query;
delete out.filters;
delete out.fields;
delete out.facets;
out['skip'] = out.from || 0;
out['limit'] = out.size || 100;
delete out.from;
delete out.size;
out['include_docs'] = true;
return out;
};
// ### query
//
// @param {Object} recline.Query instance.
// @param {Object} additional couchdb view query options.
// @return deferred supporting promise API
this.query = function(query_object, query_options) {
var norm_q = self._normalizeQuery(query_object);
var url = self.view_url;
var q = _.extend(query_options, norm_q);
var jqxhr = self._makeRequest({
url: url,
data: JSON.stringify(q),
dataType: self.options.dataType,
});
return jqxhr;
}
};
// ## CouchDB Backend
//
// Backbone connector for a CouchDB backend.
//
// var dataset = new recline.Model.Dataset({
// db_url: path-to-couchdb-database e.g. '/couchdb/mydb',
// view_url: path-to-couchdb-database-view e.g. '/couchdb/mydb/_design/design1/_views/view1',
// backend: 'couchdb',
// query_options: {
// 'key': '_id'
// }
// });
//
// backend.query(query, dataset.toJSON()).done(function () { ... });
//
// Alternatively:
//
// var dataset = new recline.Model.Dataset({ ... }, 'couchdb');
// dataset.fetch();
// var results = dataset.query(query_obj);
//
// Additionally, the Dataset instance may define three methods:
//
// function record_update (record, document) { ... }
// function record_delete (record, document) { ... }
// function record_create (record, document) { ... }
//
// Where `record` is the JSON representation of the Record/Document instance
// and `document` is the JSON document stored in couchdb.
// When _all_docs view is used (default), a record is the same as a document
// so these methods need not be defined.
// They are most useful when using a custom view that performs a map-reduce
// operation on each document to yield a record. Hence, when the record is
// created, updated or deleted, an inverse operation must be performed on the original
// document.
//
// @param {string} url of couchdb database.
// @param {string} (optional) url of couchdb view. default:`db_url`/_all_docs
// @param {Object} (optional) query options accepted by couchdb views.
//
my.couchOptions = {};
// ### fetch
// @param {object} dataset json object with the db_url, view_url, and query_options args.
// @return promise object that resolves to the document mapping.
my.fetch = function (dataset) {
var db_url = dataset.db_url;
var view_url = dataset.view_url;
var cdb = new my.CouchDBWrapper(db_url, view_url);
var dfd = new Deferred();
// if 'doc' attribute is present, return schema of that
// else return schema of 'value' attribute which contains
// the map-reduced document.
cdb.mapping().done(function(result) {
var row = result.rows[0];
var keys = [];
if (view_url.search("_all_docs") !== -1) {
keys = _.keys(row['doc']);
keys = _.filter(keys, function (k) { return k.charAt(0) !== '_' });
}
else {
keys = _.keys(row['value']);
}
var fieldData = _.map(keys, function(k) {
return { 'id' : k };
});
dfd.resolve({
fields: fieldData
});
})
.fail(function(arguments) {
dfd.reject(arguments);
});
return dfd.promise();
};
// ### save
//
// Iterate through all the changes and save them to the server.
// N.B. This method is asynchronous and attempts to do multiple
// operation concurrently. This can be problematic when more than
// one operation is requested on the same document (as in the case
// of bulk column transforms).
//
// @param {object} lists of create, update, delete.
// @param {object} dataset json object.
//
//
my.save = function (changes, dataset) {
var dfd = new Deferred();
var total = changes.creates.length + changes.updates.length + changes.deletes.length;
var results = {'done': [], 'fail': [] };
var decr_cb = function () { total -= 1; }
var resolve_cb = function () { if (total == 0) dfd.resolve(results); }
for (var i in changes.creates) {
var new_doc = changes.creates[i];
var succ_cb = function (msg) {results.done.push({'op': 'create', 'record': new_doc, 'reason': ''}); }
var fail_cb = function (msg) {results.fail.push({'op': 'create', 'record': new_doc, 'reason': msg}); }
_createDocument(new_doc, dataset).then([decr_cb, succ_cb, resolve_cb], [decr_cb, fail_cb, resolve_cb]);
}
for (var i in changes.updates) {
var new_doc = changes.updates[i];
var succ_cb = function (msg) {results.done.push({'op': 'update', 'record': new_doc, 'reason': ''}); }
var fail_cb = function (msg) {results.fail.push({'op': 'update', 'record': new_doc, 'reason': msg}); }
_updateDocument(new_doc, dataset).then([decr_cb, succ_cb, resolve_cb], [decr_cb, fail_cb, resolve_cb]);
}
for (var i in changes.deletes) {
var old_doc = changes.deletes[i];
var succ_cb = function (msg) {results.done.push({'op': 'delete', 'record': old_doc, 'reason': ''}); }
var fail_cb = function (msg) {results.fail.push({'op': 'delete', 'record': old_doc, 'reason': msg}); }
_deleteDocument(new_doc, dataset).then([decr_cb, succ_cb, resolve_cb], [decr_cb, fail_cb, resolve_cb]);
}
return dfd.promise();
};
// ### query
//
// fetch the data from the couchdb view and filter it.
// @param {Object} recline.Dataset instance
// @param {Object} recline.Query instance.
my.query = function(queryObj, dataset) {
var dfd = new Deferred();
var db_url = dataset.db_url;
var view_url = dataset.view_url;
var query_options = dataset.query_options;
var cdb = new my.CouchDBWrapper(db_url, view_url);
var cdb_q = cdb._normalizeQuery(queryObj, query_options);
cdb.query(queryObj, query_options).done(function(records){
var query_result = { hits: [], total: 0 };
_.each(records.rows, function(record) {
var doc = {};
if (record.hasOwnProperty('doc')) {
doc = record['doc'];
// couchdb uses _id to identify documents, Backbone models use id.
// we add this fix so backbone.Model works correctly.
doc['id'] = doc['_id'];
}
else {
doc = record['value'];
// using dunder to create compound id. need something more robust.
// couchdb uses _id to identify documents, Backbone models use id.
// we add this fix so backbone.Model works correctly.
doc['_id'] = doc['id'] = record['id'] + '__' + record['key'];
}
query_result.total += 1;
query_result.hits.push(doc);
});
// the following block is borrowed verbatim from recline.backend.Memory
// search (with filtering, faceting, and sorting) should be factored
// out into a separate library.
query_result.hits = _applyFilters(query_result.hits, queryObj);
query_result.hits = _applyFreeTextQuery(query_result.hits, queryObj);
// not complete sorting!
_.each(queryObj.sort, function(sortObj) {
var fieldName = sortObj.field;
query_result.hits = _.sortBy(query_result.hits, function(doc) {
var _out = doc[fieldName];
return _out;
});
if (sortObj.order == 'desc') {
query_result.hits.reverse();
}
});
query_result.total = query_result.hits.length;
query_result.facets = _computeFacets(query_result.hits, queryObj);
query_result.hits = query_result.hits.slice(cdb_q.skip, cdb_q.skip + cdb_q.limit+1);
dfd.resolve(query_result);
});
return dfd.promise();
};
// in place filtering
_applyFilters = function(results, queryObj) {
var filters = queryObj.filters;
// register filters
var filterFunctions = {
term : term,
range : range,
geo_distance : geo_distance
};
var dataParsers = {
integer: function (e) { return parseFloat(e, 10); },
'float': function (e) { return parseFloat(e, 10); },
string : function (e) { return e.toString() },
date : function (e) { return new Date(e).valueOf() },
datetime : function (e) { return new Date(e).valueOf() }
};
function getDataParser(filter) {
//sample = results[0][filter.field]);
var fieldType = 'string';
return dataParsers[fieldType];
}
// filter records
return _.filter(results, function (record) {
var passes = _.map(filters, function (filter) {
return filterFunctions[filter.type](record, filter);
});
// return only these records that pass all filters
return _.all(passes, _.identity);
});
// filters definitions
function term(record, filter) {
var parse = getDataParser(filter);
var value = parse(record[filter.field]);
var term = parse(filter.term);
return (value === term);
}
function range(record, filter) {
var startnull = (filter.start == null || filter.start === '');
var stopnull = (filter.stop == null || filter.stop === '');
var parse = getDataParser(filter);
var value = parse(record[filter.field]);
var start = parse(filter.start);
var stop = parse(filter.stop);
// if at least one end of range is set do not allow '' to get through
// note that for strings '' <= {any-character} e.g. '' <= 'a'
if ((!startnull || !stopnull) && value === '') {
return false;
}
return ((startnull || value >= start) && (stopnull || value <= stop));
}
function geo_distance() {
// TODO code here
}
};
// we OR across fields but AND across terms in query string
_applyFreeTextQuery = function(results, queryObj) {
if (queryObj.q) {
var terms = queryObj.q.split(' ');
results = _.filter(results, function(rawdoc) {
var matches = true;
_.each(terms, function(term) {
var foundmatch = false;
_.each(_.keys(rawdoc), function(field) {
var value = rawdoc[field];
if (value !== null) { value = value.toString(); }
// TODO regexes?
foundmatch = foundmatch || (value === term);
// TODO: early out (once we are true should break to spare unnecessary testing)
// if (foundmatch) return true;
});
matches = matches && foundmatch;
// TODO: early out (once false should break to spare unnecessary testing)
// if (!matches) return false;
});
return matches;
});
}
return results;
};
_computeFacets = function(records, queryObj) {
var facetResults = {};
if (!queryObj.facets) {
return facetResults;
}
_.each(queryObj.facets, function(query, facetId) {
// TODO: remove dependency on recline.Model
facetResults[facetId] = new recline.Model.Facet({id: facetId}).toJSON();
facetResults[facetId].termsall = {};
});
// faceting
_.each(records, function(doc) {
_.each(queryObj.facets, function(query, facetId) {
var fieldId = query.terms.field;
var val = doc[fieldId];
var tmp = facetResults[facetId];
if (val) {
tmp.termsall[val] = tmp.termsall[val] ? tmp.termsall[val] + 1 : 1;
} else {
tmp.missing = tmp.missing + 1;
}
});
});
_.each(queryObj.facets, function(query, facetId) {
var tmp = facetResults[facetId];
var terms = _.map(tmp.termsall, function(count, term) {
return { term: term, count: count };
});
tmp.terms = _.sortBy(terms, function(item) {
// want descending order
return -item.count;
});
tmp.terms = tmp.terms.slice(0, 10);
});
return facetResults;
};
//Define random Id for new records without _id
function randomId(length, chars) {
var mask = '';
if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (chars.indexOf('#') > -1) mask += '0123456789';
if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\';
var result = '';
for (var i = length; i > 0; --i) result += mask[Math.round(Math.random() * (mask.length - 1))];
return result;
}
_createDocument = function (new_doc, dataset) {
var dfd = new Deferred();
var db_url = dataset.db_url;
var view_url = dataset.view_url;
var _id = new_doc['id'];
var cdb = new my.CouchDBWrapper(db_url, view_url);
delete new_doc['id'];
if (dataset.record_create)
new_doc = dataset.record_create(new_doc);
if (_id !== 1 && _id !== undefined) {
new_doc['_id'] = _id;
}
else {
new_doc['_id'] = randomId(32, '#a');
}
dfd.resolve(cdb.upsert(new_doc));
return dfd.promise();
};
_updateDocument = function (new_doc, dataset) {
var dfd = new Deferred();
var db_url = dataset.db_url;
var view_url = dataset.view_url;
var _id = new_doc['id'];
var cdb = new my.CouchDBWrapper(db_url, view_url);
delete new_doc['id'];
if (view_url.search('_all_docs') !== -1) {
jqxhr = cdb.get(_id);
}
else {
_id = new_doc['_id'].split('__')[0];
jqxhr = cdb.get(_id);
}
jqxhr.done(function(old_doc){
if (dataset.record_update)
new_doc = dataset.record_update(new_doc, old_doc);
new_doc = _.extend(old_doc, new_doc);
new_doc['_id'] = _id;
dfd.resolve(cdb.upsert(new_doc));
}).fail(function(args){
dfd.reject(args);
});
return dfd.promise();
};
_deleteDocument = function (del_doc, dataset) {
var dfd = new Deferred();
var db_url = dataset.db_url;
var view_url = dataset.view_url;
var _id = del_doc['id'];
var cdb = new my.CouchDBWrapper(db_url, view_url);
if (view_url.search('_all_docs') !== -1)
return cdb.remove(_id);
else {
_id = model.get('_id').split('__')[0];
var jqxhr = cdb.get(_id);
jqxhr.done(function(old_doc){
if (dataset.record_delete)
old_doc = dataset.record_delete(del_doc, old_doc);
if (_.isNull(del_doc))
dfd.resolve(cdb.remove(_id)); // XXX is this the right thing to do?
else {
// couchdb uses _id to identify documents, Backbone models use id.
// we should remove it before sending it to the server.
old_doc['_id'] = _id;
delete old_doc['id'];
dfd.resolve(cdb.upsert(old_doc));
}
}).fail(function(args){
dfd.reject(args);
});
return dfd.promise();
}
};
}(jQuery, this.recline.Backend.CouchDB));

16
src/backend.dataproxy.js
View File

@ -5,7 +5,7 @@ this.recline.Backend.DataProxy = this.recline.Backend.DataProxy || {};
(function(my) {
my.__type__ = 'dataproxy';
// URL for the dataproxy
my.dataproxy_url = 'http://jsonpdataproxy.appspot.com';
my.dataproxy_url = '//jsonpdataproxy.appspot.com';
// Timeout for dataproxy (after this time if no response we error)
// Needed because use JSONP so do not receive e.g. 500 errors
my.timeout = 5000;
@ -42,8 +42,8 @@ this.recline.Backend.DataProxy = this.recline.Backend.DataProxy || {};
useMemoryStore: true
});
})
.fail(function(arguments) {
dfd.reject(arguments);
.fail(function(args) {
dfd.reject(args);
});
return dfd.promise();
};
@ -60,16 +60,16 @@ this.recline.Backend.DataProxy = this.recline.Backend.DataProxy || {};
message: 'Request Error: Backend did not respond after ' + (my.timeout / 1000) + ' seconds'
});
}, my.timeout);
ourFunction.done(function(arguments) {
ourFunction.done(function(args) {
clearTimeout(timer);
dfd.resolve(arguments);
dfd.resolve(args);
})
.fail(function(arguments) {
.fail(function(args) {
clearTimeout(timer);
dfd.reject(arguments);
dfd.reject(args);
})
;
return dfd.promise();
}
};
}(this.recline.Backend.DataProxy));

12
src/backend.memory.js
View File

@ -230,18 +230,6 @@ this.recline.Backend.Memory = this.recline.Backend.Memory || {};
});
return facetResults;
};
this.transform = function(editFunc) {
var dfd = new Deferred();
// TODO: should we clone before mapping? Do not see the point atm.
self.records = _.map(self.records, editFunc);
// now deal with deletes (i.e. nulls)
self.records = _.filter(self.records, function(record) {
return record != null;
});
dfd.resolve();
return dfd.promise();
};
};
}(this.recline.Backend.Memory));

67
src/data.transform.js
View File

@ -1,67 +0,0 @@
this.recline = this.recline || {};
this.recline.Data = this.recline.Data || {};
(function(my) {
// adapted from https://github.com/harthur/costco. heather rules
my.Transform = {};
my.Transform.evalFunction = function(funcString) {
try {
eval("var editFunc = " + funcString);
} catch(e) {
return {errorMessage: e+""};
}
return editFunc;
};
my.Transform.previewTransform = function(docs, editFunc, currentColumn) {
var preview = [];
var updated = my.Transform.mapDocs($.extend(true, {}, docs), editFunc);
for (var i = 0; i < updated.docs.length; i++) {
var before = docs[i]
, after = updated.docs[i]
;
if (!after) after = {};
if (currentColumn) {
preview.push({before: before[currentColumn], after: after[currentColumn]});
} else {
preview.push({before: before, after: after});
}
}
return preview;
};
my.Transform.mapDocs = function(docs, editFunc) {
var edited = []
, deleted = []
, failed = []
;
var updatedDocs = _.map(docs, function(doc) {
try {
var updated = editFunc(_.clone(doc));
} catch(e) {
failed.push(doc);
return;
}
if(updated === null) {
updated = {_deleted: true};
edited.push(updated);
deleted.push(doc);
}
else if(updated && !_.isEqual(updated, doc)) {
edited.push(updated);
}
return updated;
});
return {
updates: edited,
docs: updatedDocs,
deletes: deleted,
failed: failed
};
};
}(this.recline.Data))

39
src/model.js
View File

@ -55,8 +55,8 @@ my.Dataset = Backbone.Model.extend({
if (this.backend !== recline.Backend.Memory) {
this.backend.fetch(this.toJSON())
.done(handleResults)
.fail(function(arguments) {
dfd.reject(arguments);
.fail(function(args) {
dfd.reject(args);
});
} else {
// special case where we have been given data directly
@ -79,8 +79,8 @@ my.Dataset = Backbone.Model.extend({
.done(function() {
dfd.resolve(self);
})
.fail(function(arguments) {
dfd.reject(arguments);
.fail(function(args) {
dfd.reject(args);
});
}
@ -159,20 +159,6 @@ my.Dataset = Backbone.Model.extend({
return this._store.save(this._changes, this.toJSON());
},
transform: function(editFunc) {
var self = this;
if (!this._store.transform) {
alert('Transform is not supported with this backend: ' + this.get('backend'));
return;
}
this.trigger('recline:flash', {message: "Updating all visible docs. This could take a while...", persist: true, loader: true});
this._store.transform(editFunc).done(function() {
// reload data as records have changed
self.query();
self.trigger('recline:flash', {message: "Records updated successfully"});
});
},
// ### query
//
// AJAX method with promise API to get records from the backend.
@ -198,9 +184,9 @@ my.Dataset = Backbone.Model.extend({
self.trigger('query:done');
dfd.resolve(self.records);
})
.fail(function(arguments) {
self.trigger('query:fail', arguments);
dfd.reject(arguments);
.fail(function(args) {
self.trigger('query:fail', args);
dfd.reject(args);
});
return dfd.promise();
},
@ -309,9 +295,11 @@ my.Record = Backbone.Model.extend({
//
// For the provided Field get the corresponding rendered computed data value
// for this record.
//
// NB: if field is undefined a default '' value will be returned
getFieldValue: function(field) {
val = this.getFieldValueUnrendered(field);
if (field.renderer) {
if (field && !_.isUndefined(field.renderer)) {
val = field.renderer(val, field, this.toJSON());
}
return val;
@ -321,7 +309,12 @@ my.Record = Backbone.Model.extend({
//
// For the provided Field get the corresponding computed data value
// for this record.
//
// NB: if field is undefined a default '' value will be returned
getFieldValueUnrendered: function(field) {
if (!field) {
return '';
}
var val = this.get(field.id);
if (field.deriver) {
val = field.deriver(val, field, this);
@ -443,7 +436,7 @@ my.Field = Backbone.Model.extend({
if (val && typeof val === 'string') {
val = val.replace(/(https?:\/\/[^ ]+)/g, '<a href="$1">$1</a>');
}
return val
return val;
}
}
}

77
src/view.flot.js
View File

@ -115,6 +115,11 @@ my.Flot = Backbone.View.extend({
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
if (this.state.attributes.graphType === 'bars') {
x = item.datapoint[1].toFixed(2),
y = item.datapoint[0].toFixed(2);
}
var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
group: this.state.attributes.group,
x: this._xaxisLabel(x),
@ -125,6 +130,9 @@ my.Flot = Backbone.View.extend({
// use a different tooltip location offset for bar charts
var xLocation, yLocation;
if (this.state.attributes.graphType === 'bars') {
xLocation = item.pageX + 15;
yLocation = item.pageY - 10;
} else if (this.state.attributes.graphType === 'columns') {
xLocation = item.pageX + 15;
yLocation = item.pageY;
} else {
@ -151,14 +159,19 @@ my.Flot = Backbone.View.extend({
var xtype = xfield.get('type');
var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time');
if (this.model.records.models[parseInt(x, 10)]) {
x = this.model.records.models[parseInt(x, 10)].get(this.state.attributes.group);
if (isDateTime) {
x = new Date(x).toLocaleDateString();
}
} else if (isDateTime) {
x = new Date(parseInt(x, 10)).toLocaleDateString();
if (this.xvaluesAreIndex) {
x = parseInt(x, 10);
// HACK: deal with bar graph style cases where x-axis items were strings
// In this case x at this point is the index of the item in the list of
// records not its actual x-axis value
x = this.model.records.models[x].get(this.state.attributes.group);
}
if (isDateTime) {
x = new Date(x).toLocaleDateString();
}
// } else if (isDateTime) {
// x = new Date(parseInt(x, 10)).toLocaleDateString();
// }
return x;
},
@ -178,13 +191,13 @@ my.Flot = Backbone.View.extend({
// convert x to a string and make sure that it is not too long or the
// tick labels will overlap
// TODO: find a more accurate way of calculating the size of tick labels
var label = self._xaxisLabel(x);
var label = self._xaxisLabel(x) || "";
if (typeof label !== 'string') {
label = label.toString();
}
if (label.length > 8) {
label = label.slice(0, 5) + "...";
if (self.state.attributes.graphType !== 'bars' && label.length > 10) {
label = label.slice(0, 10) + "...";
}
return label;
@ -193,27 +206,16 @@ my.Flot = Backbone.View.extend({
var xaxis = {};
xaxis.tickFormatter = tickFormatter;
// calculate the x-axis ticks
//
// the number of ticks should be a multiple of the number of points so that
// each tick lines up with a point
if (numPoints) {
var ticks = [],
maxTicks = 10,
x = 1,
i = 0;
while (x <= maxTicks) {
if ((numPoints / x) <= maxTicks) {
break;
}
x = x + 1;
// for labels case we only want ticks at the label intervals
// HACK: however we also get this case with Date fields. In that case we
// could have a lot of values and so we limit to max 15 (we assume)
if (this.xvaluesAreIndex) {
var numTicks = Math.min(this.model.records.length, 15);
var increment = this.model.records.length / numTicks;
var ticks = [];
for (i=0; i<numTicks; i++) {
ticks.push(parseInt(i*increment, 10));
}
for (i = 0; i < numPoints; i = i + x) {
ticks.push(i);
}
xaxis.ticks = ticks;
}
@ -298,9 +300,11 @@ my.Flot = Backbone.View.extend({
createSeries: function() {
var self = this;
self.xvaluesAreIndex = false;
var series = [];
_.each(this.state.attributes.series, function(field) {
var points = [];
var fieldLabel = self.model.fields.get(field).get('label');
_.each(self.model.records.models, function(doc, index) {
var xfield = self.model.fields.get(self.state.attributes.group);
var x = doc.getFieldValue(xfield);
@ -310,16 +314,13 @@ my.Flot = Backbone.View.extend({
var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time');
if (isDateTime) {
if (self.state.attributes.graphType != 'bars' &&
self.state.attributes.graphType != 'columns') {
x = new Date(x).getTime();
} else {
x = index;
}
self.xvaluesAreIndex = true;
x = index;
} else if (typeof x === 'string') {
x = parseFloat(x);
if (isNaN(x)) {
if (isNaN(x)) { // assume this is a string label
x = index;
self.xvaluesAreIndex = true;
}
}
@ -334,7 +335,7 @@ my.Flot = Backbone.View.extend({
});
series.push({
data: points,
label: field,
label: fieldLabel,
hoverable: true
});
});

462
src/view.flotr2.js
View File

@ -1,462 +0,0 @@
/*jshint multistr:true */
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
// ## Graph view for a Dataset using Flotr2 graphing library.
//
// Initialization arguments (in a hash in first parameter):
//
// * model: recline.Model.Dataset
// * state: (optional) configuration hash of form:
//
// {
// group: {column name for x-axis},
// series: [{column name for series A}, {column name series B}, ... ],
// graphType: 'line',
// graphOptions: {custom [Flotr2 options](http://www.humblesoftware.com/flotr2/documentation#configuration)}
// }
//
// NB: should *not* 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.
my.Flotr2 = Backbone.View.extend({
template: ' \
<div class="recline-graph"> \
<div class="panel graph" style="display: block;"> \
<div class="js-temp-notice alert alert-block"> \
<h3 class="alert-heading">Hey there!</h3> \
<p>There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.</p> \
<p>Please tell us by <strong>using the menu on the right</strong> and a graph will automatically appear.</p> \
</div> \
</div> \
</div> \
',
initialize: function(options) {
var self = this;
this.graphColors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"];
this.el = $(this.el);
_.bindAll(this, 'render', 'redraw');
this.needToRedraw = false;
this.model.bind('change', this.render);
this.model.fields.bind('reset', this.render);
this.model.fields.bind('add', this.render);
this.model.records.bind('add', this.redraw);
this.model.records.bind('reset', this.redraw);
var stateData = _.extend({
group: null,
// so that at least one series chooser box shows up
series: [],
graphType: 'lines-and-points'
},
options.state
);
this.state = new recline.Model.ObjectState(stateData);
this.editor = new my.Flotr2Controls({
model: this.model,
state: this.state.toJSON()
});
this.editor.state.bind('change', function() {
self.state.set(self.editor.state.toJSON());
self.redraw();
});
this.elSidebar = this.editor.el;
},
render: function() {
var self = this;
var tmplData = this.model.toTemplateJSON();
var htmls = Mustache.render(this.template, tmplData);
$(this.el).html(htmls);
this.$graph = this.el.find('.panel.graph');
return this;
},
redraw: function() {
// There appear to be issues generating a Flotr2 graph if either:
// * The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flotr2 will complain with
//
// Uncaught Invalid dimensions for plot, width = 0, height = 0
// * There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value'
var areWeVisible = !jQuery.expr.filters.hidden(this.el[0]);
if ((!areWeVisible || this.model.records.length === 0)) {
this.needToRedraw = true;
return;
}
// check we have something to plot
if (this.state.get('group') && this.state.get('series')) {
// faff around with width because flot draws axes *outside* of the element width which means graph can get push down as it hits element next to it
this.$graph.width(this.el.width() - 20);
var series = this.createSeries();
var options = this.getGraphOptions(this.state.attributes.graphType);
this.plot = Flotr.draw(this.$graph.get(0), series, options);
}
},
show: function() {
// because we cannot redraw when hidden we may need to when becoming visible
if (this.needToRedraw) {
this.redraw();
}
},
// ### getGraphOptions
//
// Get options for Flotr2 Graph
//
// needs to be function as can depend on state
//
// @param typeId graphType id (lines, lines-and-points etc)
getGraphOptions: function(typeId) {
var self = this;
var tickFormatter = function (x) {
return getFormattedX(x);
};
// infoboxes on mouse hover on points/bars etc
var trackFormatter = function (obj) {
var x = obj.x;
var y = obj.y;
// it's horizontal so we have to flip
if (self.state.attributes.graphType === 'bars') {
var _tmp = x;
x = y;
y = _tmp;
}
x = getFormattedX(x);
var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
group: self.state.attributes.group,
x: x,
series: obj.series.label,
y: y
});
return content;
};
var getFormattedX = function (x) {
var xfield = self.model.fields.get(self.state.attributes.group);
// time series
var xtype = xfield.get('type');
var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time');
if (self.model.records.models[parseInt(x)]) {
x = self.model.records.models[parseInt(x)].get(self.state.attributes.group);
if (isDateTime) {
x = new Date(x).toLocaleDateString();
}
} else if (isDateTime) {
x = new Date(parseInt(x)).toLocaleDateString();
}
return x;
}
var xaxis = {};
xaxis.tickFormatter = tickFormatter;
var yaxis = {};
yaxis.autoscale = true;
yaxis.autoscaleMargin = 0.02;
var mouse = {};
mouse.track = true;
mouse.relative = true;
mouse.trackFormatter = trackFormatter;
var legend = {};
legend.position = 'ne';
// mouse.lineColor is set in createSeries
var optionsPerGraphType = {
lines: {
legend: legend,
colors: this.graphColors,
lines: { show: true },
xaxis: xaxis,
yaxis: yaxis,
mouse: mouse
},
points: {
legend: legend,
colors: this.graphColors,
points: { show: true, hitRadius: 5 },
xaxis: xaxis,
yaxis: yaxis,
mouse: mouse,
grid: { hoverable: true, clickable: true }
},
'lines-and-points': {
legend: legend,
colors: this.graphColors,
points: { show: true, hitRadius: 5 },
lines: { show: true },
xaxis: xaxis,
yaxis: yaxis,
mouse: mouse,
grid: { hoverable: true, clickable: true }
},
bars: {
legend: legend,
colors: this.graphColors,
lines: { show: false },
xaxis: yaxis,
yaxis: xaxis,
mouse: {
track: true,
relative: true,
trackFormatter: trackFormatter,
fillColor: '#FFFFFF',
fillOpacity: 0.3,
position: 'e'
},
bars: {
show: true,
horizontal: true,
shadowSize: 0,
barWidth: 0.8
}
},
columns: {
legend: legend,
colors: this.graphColors,
lines: { show: false },
xaxis: xaxis,
yaxis: yaxis,
mouse: {
track: true,
relative: true,
trackFormatter: trackFormatter,
fillColor: '#FFFFFF',
fillOpacity: 0.3,
position: 'n'
},
bars: {
show: true,
horizontal: false,
shadowSize: 0,
barWidth: 0.8
}
},
grid: { hoverable: true, clickable: true }
};
if (self.state.get('graphOptions')){
return _.extend(optionsPerGraphType[typeId],
self.state.get('graphOptions')
)
}else{
return optionsPerGraphType[typeId];
}
},
createSeries: function() {
var self = this;
var series = [];
_.each(this.state.attributes.series, function(field) {
var points = [];
_.each(self.model.records.models, function(doc, index) {
var xfield = self.model.fields.get(self.state.attributes.group);
var x = doc.getFieldValue(xfield);
// time series
var xtype = xfield.get('type');
var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time');
if (isDateTime) {
// datetime
if (self.state.attributes.graphType != 'bars' && self.state.attributes.graphType != 'columns') {
// not bar or column
x = new Date(x).getTime();
} else {
// bar or column
x = index;
}
} else if (typeof x === 'string') {
// string
x = parseFloat(x);
if (isNaN(x)) {
x = index;
}
}
var yfield = self.model.fields.get(field);
var y = doc.getFieldValue(yfield);
// horizontal bar chart
if (self.state.attributes.graphType == 'bars') {
points.push([y, x]);
} else {
points.push([x, y]);
}
});
series.push({data: points, label: field, mouse:{lineColor: self.graphColors[series.length]}});
});
return series;
}
});
my.Flotr2Controls = Backbone.View.extend({
className: "editor",
template: ' \
<div class="editor"> \
<form class="form-stacked"> \
<div class="clearfix"> \
<label>Graph Type</label> \
<div class="input editor-type"> \
<select> \
<option value="lines-and-points">Lines and Points</option> \
<option value="lines">Lines</option> \
<option value="points">Points</option> \
<option value="bars">Bars</option> \
<option value="columns">Columns</option> \
</select> \
</div> \
<label>Group Column (Axis 1)</label> \
<div class="input editor-group"> \
<select> \
<option value="">Please choose ...</option> \
{{#fields}} \
<option value="{{id}}">{{label}}</option> \
{{/fields}} \
</select> \
</div> \
<div class="editor-series-group"> \
</div> \
</div> \
<div class="editor-buttons"> \
<button class="btn editor-add">Add Series</button> \
</div> \
<div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \
<button class="editor-save">Save</button> \
<input type="hidden" class="editor-id" value="chart-1" /> \
</div> \
</form> \
</div> \
',
templateSeriesEditor: ' \
<div class="editor-series js-series-{{seriesIndex}}"> \
<label>Series <span>{{seriesName}} (Axis 2)</span> \
[<a href="#remove" class="action-remove-series">Remove</a>] \
</label> \
<div class="input"> \
<select> \
{{#fields}} \
<option value="{{id}}">{{label}}</option> \
{{/fields}} \
</select> \
</div> \
</div> \
',
events: {
'change form select': 'onEditorSubmit',
'click .editor-add': '_onAddSeries',
'click .action-remove-series': 'removeSeries'
},
initialize: function(options) {
var self = this;
this.el = $(this.el);
_.bindAll(this, 'render');
this.model.fields.bind('reset', this.render);
this.model.fields.bind('add', this.render);
this.state = new recline.Model.ObjectState(options.state);
this.render();
},
render: function() {
var self = this;
var tmplData = this.model.toTemplateJSON();
var htmls = Mustache.render(this.template, tmplData);
this.el.html(htmls);
// set up editor from state
if (this.state.get('graphType')) {
this._selectOption('.editor-type', this.state.get('graphType'));
}
if (this.state.get('group')) {
this._selectOption('.editor-group', this.state.get('group'));
}
// ensure at least one series box shows up
var tmpSeries = [""];
if (this.state.get('series').length > 0) {
tmpSeries = this.state.get('series');
}
_.each(tmpSeries, function(series, idx) {
self.addSeries(idx);
self._selectOption('.editor-series.js-series-' + idx, series);
});
return this;
},
// Private: Helper function to select an option from a select list
//
_selectOption: function(id,value){
var options = this.el.find(id + ' select > option');
if (options) {
options.each(function(opt){
if (this.value == value) {
$(this).attr('selected','selected');
return false;
}
});
}
},
onEditorSubmit: function(e) {
var select = this.el.find('.editor-group select');
var $editor = this;
var $series = this.el.find('.editor-series select');
var series = $series.map(function () {
return $(this).val();
});
var updatedState = {
series: $.makeArray(series),
group: this.el.find('.editor-group select').val(),
graphType: this.el.find('.editor-type select').val()
};
this.state.set(updatedState);
},
// Public: Adds a new empty series select box to the editor.
//
// @param [int] idx index of this series in the list of series
//
// Returns itself.
addSeries: function (idx) {
var data = _.extend({
seriesIndex: idx,
seriesName: String.fromCharCode(idx + 64 + 1)
}, this.model.toTemplateJSON());
var htmls = Mustache.render(this.templateSeriesEditor, data);
this.el.find('.editor-series-group').append(htmls);
return this;
},
_onAddSeries: function(e) {
e.preventDefault();
this.addSeries(this.state.get('series').length);
},
// Public: Removes a series list item from the editor.
//
// Also updates the labels of the remaining series elements.
removeSeries: function (e) {
e.preventDefault();
var $el = $(e.target);
$el.parent().parent().remove();
this.onEditorSubmit();
}
});
})(jQuery, recline.View);

1
src/view.graph.js
View File

@ -2,4 +2,3 @@ this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
this.recline.View.Graph = this.recline.View.Flot;
this.recline.View.GraphControls = this.recline.View.FlotControls;

4
src/view.grid.js
View File

@ -103,12 +103,12 @@ my.Grid = Backbone.View.extend({
var numFields = this.fields.length;
// compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)
var fullWidth = self.el.width() - 20 - 10 * numFields - this.scrollbarDimensions.width;
var width = parseInt(Math.max(50, fullWidth / numFields));
var width = parseInt(Math.max(50, fullWidth / numFields), 10);
// if columns extend outside viewport then remainder is 0
var remainder = Math.max(fullWidth - numFields * width,0);
_.each(this.fields, function(field, idx) {
// add the remainder to the first field width so we make up full col
if (idx == 0) {
if (idx === 0) {
field.set({width: width+remainder});
} else {
field.set({width: width});

49
src/view.multiview.js
View File

@ -112,7 +112,7 @@ my.MultiView = Backbone.View.extend({
<div class="menu-right"> \
<div class="btn-group" data-toggle="buttons-checkbox"> \
{{#sidebarViews}} \
<a href="#" data-action="{{id}}" class="btn active">{{label}}</a> \
<a href="#" data-action="{{id}}" class="btn">{{label}}</a> \
{{/sidebarViews}} \
</div> \
</div> \
@ -164,12 +164,6 @@ my.MultiView = Backbone.View.extend({
model: this.model,
state: this.state.get('view-timeline')
})
}, {
id: 'transform',
label: 'Transform',
view: new my.Transform({
model: this.model
})
}];
}
// Hashes of sidebar elements
@ -203,6 +197,7 @@ my.MultiView = Backbone.View.extend({
} else {
this.updateNav(this.pageViews[0].id);
}
this._showHideSidebar();
this.model.bind('query:start', function() {
self.notify({loader: true, persist: true});
@ -280,20 +275,32 @@ my.MultiView = Backbone.View.extend({
},
// hide the sidebar if empty
_showHideSidebar: function() {
var $dataSidebar = this.el.find('.data-view-sidebar');
var visibleChildren = $dataSidebar.children().filter(function() {
return $(this).css("display") != "none";
}).length;
if (visibleChildren > 0) {
$dataSidebar.show();
} else {
$dataSidebar.hide();
}
},
updateNav: function(pageName) {
this.el.find('.navigation a').removeClass('active');
var $el = this.el.find('.navigation a[data-view="' + pageName + '"]');
$el.addClass('active');
// show the specific page
// add/remove sidebars and hide inactive views
_.each(this.pageViews, function(view, idx) {
if (view.id === pageName) {
view.view.el.show();
if (view.view.elSidebar) {
view.view.elSidebar.show();
}
if (view.view.show) {
view.view.show();
}
} else {
view.view.el.hide();
if (view.view.elSidebar) {
@ -304,12 +311,25 @@ my.MultiView = Backbone.View.extend({
}
}
});
this._showHideSidebar();
// call view.view.show after sidebar visibility has been determined so
// that views can correctly calculate their maximum width
_.each(this.pageViews, function(view, idx) {
if (view.id === pageName) {
if (view.view.show) {
view.view.show();
}
}
});
},
_onMenuClick: function(e) {
e.preventDefault();
var action = $(e.target).attr('data-action');
this['$'+action].toggle();
this._showHideSidebar();
},
_onSwitchView: function(e) {
@ -438,13 +458,14 @@ my.MultiView = Backbone.View.extend({
// This inverts the state serialization process in Multiview
my.MultiView.restore = function(state) {
// hack-y - restoring a memory dataset does not mean much ... (but useful for testing!)
var datasetInfo;
if (state.backend === 'memory') {
var datasetInfo = {
datasetInfo = {
backend: 'memory',
records: [{stub: 'this is a stub dataset because we do not restore memory datasets'}]
};
} else {
var datasetInfo = _.extend({
datasetInfo = _.extend({
url: state.url,
backend: state.backend
},
@ -457,7 +478,7 @@ my.MultiView.restore = function(state) {
state: state
});
return explorer;
}
};
// ## Miscellaneous Utilities
var urlPathRegex = /^([^?]+)(\?.*)?/;

62
src/view.slickgrid.js
View File

@ -39,7 +39,7 @@ my.SlickGrid = Backbone.View.extend({
this.model.records.bind('add', this.render);
this.model.records.bind('reset', this.render);
this.model.records.bind('remove', this.render);
this.model.records.bind('change', this.onRecordChanged, this)
this.model.records.bind('change', this.onRecordChanged, this);
var state = _.extend({
hiddenColumns: [],
@ -52,7 +52,6 @@ my.SlickGrid = Backbone.View.extend({
}, modelEtc.state
);
// this.grid_options = modelEtc.options;
this.state = new recline.Model.ObjectState(state);
},
@ -95,32 +94,32 @@ my.SlickGrid = Backbone.View.extend({
} else {
return value;
}
}
};
_.each(this.model.fields.toJSON(),function(field){
var column = {
id:field['id'],
name:field['label'],
field:field['id'],
id: field.id,
name: field.label,
field: field.id,
sortable: true,
minWidth: 80,
formatter: formatter
};
var widthInfo = _.find(self.state.get('columnsWidth'),function(c){return c.column == field.id});
var widthInfo = _.find(self.state.get('columnsWidth'),function(c){return c.column === field.id;});
if (widthInfo){
column['width'] = widthInfo.width;
column.width = widthInfo.width;
}
var editInfo = _.find(self.state.get('columnsEditor'),function(c){return c.column == field.id});
var editInfo = _.find(self.state.get('columnsEditor'),function(c){return c.column === field.id;});
if (editInfo){
column['editor'] = editInfo.editor;
column.editor = editInfo.editor;
}
columns.push(column);
});
// Restrict the visible columns
var visibleColumns = columns.filter(function(column) {
return _.indexOf(self.state.get('hiddenColumns'), column.id) == -1;
return _.indexOf(self.state.get('hiddenColumns'), column.id) === -1;
});
// Order them if there is ordering info on the state
@ -137,7 +136,7 @@ my.SlickGrid = Backbone.View.extend({
// column picker
var tempHiddenColumns = [];
for (var i = columns.length -1; i >= 0; i--){
if (_.indexOf(_.pluck(visibleColumns,'id'),columns[i].id) == -1){
if (_.indexOf(_.pluck(visibleColumns,'id'),columns[i].id) === -1){
tempHiddenColumns.push(columns.splice(i,1)[0]);
}
}
@ -159,18 +158,18 @@ my.SlickGrid = Backbone.View.extend({
this.push = function(model, row) {
models.push(model);
rows.push(row);
}
this.getLength = function() { return rows.length; }
this.getItem = function(index) { return rows[index];}
this.getItemMetadata= function(index) { return {};}
this.getModel= function(index) { return models[index]; }
this.getModelRow = function(m) { return models.indexOf(m);}
this.updateItem = function(m,i) {
rows[i] = toRow(m);
models[i] = m
};
};
this.getLength = function() {return rows.length; };
this.getItem = function(index) {return rows[index];};
this.getItemMetadata = function(index) {return {};};
this.getModel = function(index) {return models[index];};
this.getModelRow = function(m) {return models.indexOf(m);};
this.updateItem = function(m,i) {
rows[i] = toRow(m);
models[i] = m;
};
}
var data = new RowSet();
@ -184,7 +183,7 @@ my.SlickGrid = Backbone.View.extend({
var sortInfo = this.model.queryState.get('sort');
if (sortInfo){
var column = sortInfo[0].field;
var sortAsc = !(sortInfo[0].order == 'desc');
var sortAsc = sortInfo[0].order !== 'desc';
this.grid.setSortColumn(column, sortAsc);
}
@ -218,7 +217,7 @@ my.SlickGrid = Backbone.View.extend({
//
var grid = args.grid;
var model = data.getModel(args.row);
var field = grid.getColumns()[args.cell]['id'];
var field = grid.getColumns()[args.cell].id;
var v = {};
v[field] = args.item[field];
model.set(v);
@ -279,7 +278,7 @@ my.SlickGrid = Backbone.View.extend({
$menu = $('<ul class="dropdown-menu slick-contextmenu" style="display:none;position:absolute;z-index:20;" />').appendTo(document.body);
$menu.bind('mouseleave', function (e) {
$(this).fadeOut(options.fadeSpeed)
$(this).fadeOut(options.fadeSpeed);
});
$menu.bind('click', updateColumn);
@ -296,7 +295,7 @@ my.SlickGrid = Backbone.View.extend({
$input = $('<input type="checkbox" />').data('column-id', columns[i].id).attr('id','slick-column-vis-'+columns[i].id);
columnCheckboxes.push($input);
if (grid.getColumnIndex(columns[i].id) != null) {
if (grid.getColumnIndex(columns[i].id) !== null) {
$input.attr('checked', 'checked');
}
$input.appendTo($li);
@ -323,10 +322,12 @@ my.SlickGrid = Backbone.View.extend({
}
function updateColumn(e) {
if ($(e.target).data('option') == 'autoresize') {
var checkbox;
if ($(e.target).data('option') === 'autoresize') {
var checked;
if ($(e.target).is('li')){
var checkbox = $(e.target).find('input').first();
checkbox = $(e.target).find('input').first();
checked = !checkbox.is(':checked');
checkbox.attr('checked',checked);
} else {
@ -346,7 +347,7 @@ my.SlickGrid = Backbone.View.extend({
if (($(e.target).is('li') && !$(e.target).hasClass('divider')) ||
$(e.target).is('input')) {
if ($(e.target).is('li')){
var checkbox = $(e.target).find('input').first();
checkbox = $(e.target).find('input').first();
checkbox.attr('checked',!checkbox.is(':checked'));
}
var visibleColumns = [];
@ -359,7 +360,6 @@ my.SlickGrid = Backbone.View.extend({
}
});
if (!visibleColumns.length) {
$(e.target).attr('checked', 'checked');
return;

11
src/view.timeline.js
View File

@ -38,7 +38,8 @@ my.Timeline = Backbone.View.extend({
});
var stateData = _.extend({
startField: null,
endField: null
endField: null,
timelineJSOptions: {}
},
options.state
);
@ -66,14 +67,8 @@ my.Timeline = Backbone.View.extend({
_initTimeline: function() {
var $timeline = this.el.find(this.elementId);
// set width explicitly o/w timeline goes wider that screen for some reason
var width = Math.max(this.el.width(), this.el.find('.recline-timeline').width());
if (width) {
$timeline.width(width);
}
var config = {};
var data = this._timelineJSON();
this.timeline.init(data, this.elementId, config);
this.timeline.init(data, this.elementId, this.state.get("timelineJSOptions"));
this._timelineIsInitialized = true
},

132
src/view.transform.js
View File

@ -1,132 +0,0 @@
/*jshint multistr:true */
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
// Views module following classic module pattern
(function($, my) {
// ## ColumnTransform
//
// View (Dialog) for doing data transformations
my.Transform = Backbone.View.extend({
template: ' \
<div class="recline-transform"> \
<div class="script"> \
<h2> \
Transform Script \
<button class="okButton btn btn-primary">Run on all records</button> \
</h2> \
<textarea class="expression-preview-code"></textarea> \
</div> \
<div class="expression-preview-parsing-status"> \
No syntax error. \
</div> \
<div class="preview"> \
<h3>Preview</h3> \
<div class="expression-preview-container"></div> \
</div> \
</div> \
',
events: {
'click .okButton': 'onSubmit',
'keydown .expression-preview-code': 'onEditorKeydown'
},
initialize: function(options) {
this.el = $(this.el);
},
render: function() {
var htmls = Mustache.render(this.template);
this.el.html(htmls);
// Put in the basic (identity) transform script
// TODO: put this into the template?
var editor = this.el.find('.expression-preview-code');
if (this.model.fields.length > 0) {
var col = this.model.fields.models[0].id;
} else {
var col = 'unknown';
}
editor.val("function(doc) {\n doc['"+ col +"'] = doc['"+ col +"'];\n return doc;\n}");
editor.keydown();
},
onSubmit: function(e) {
var self = this;
var funcText = this.el.find('.expression-preview-code').val();
var editFunc = recline.Data.Transform.evalFunction(funcText);
if (editFunc.errorMessage) {
this.trigger('recline:flash', {message: "Error with function! " + editFunc.errorMessage});
return;
}
this.model.transform(editFunc);
},
editPreviewTemplate: ' \
<table class="table table-condensed table-bordered before-after"> \
<thead> \
<tr> \
<th>Field</th> \
<th>Before</th> \
<th>After</th> \
</tr> \
</thead> \
<tbody> \
{{#row}} \
<tr> \
<td> \
{{field}} \
</td> \
<td class="before {{#different}}different{{/different}}"> \
{{before}} \
</td> \
<td class="after {{#different}}different{{/different}}"> \
{{after}} \
</td> \
</tr> \
{{/row}} \
</tbody> \
</table> \
',
onEditorKeydown: function(e) {
var self = this;
// if you don't setTimeout it won't grab the latest character if you call e.target.value
window.setTimeout( function() {
var errors = self.el.find('.expression-preview-parsing-status');
var editFunc = recline.Data.Transform.evalFunction(e.target.value);
if (!editFunc.errorMessage) {
errors.text('No syntax error.');
var docs = self.model.records.map(function(doc) {
return doc.toJSON();
});
var previewData = recline.Data.Transform.previewTransform(docs, editFunc);
var $el = self.el.find('.expression-preview-container');
var fields = self.model.fields.toJSON();
var rows = _.map(previewData.slice(0,4), function(row) {
return _.map(fields, function(field) {
return {
field: field.id,
before: row.before[field.id],
after: row.after[field.id],
different: !_.isEqual(row.before[field.id], row.after[field.id])
}
});
});
$el.html('');
_.each(rows, function(row) {
var templated = Mustache.render(self.editPreviewTemplate, {
row: row
});
$el.append(templated);
});
} else {
errors.text(editFunc.errorMessage);
}
}, 1, true);
}
});
})(jQuery, recline.View);

24
src/widget.fields.js
View File

@ -38,7 +38,7 @@ my.Fields = Backbone.View.extend({
</small> \
</h4> \
</div> \
<div id="collapse{{id}}" class="accordion-body collapse in"> \
<div id="collapse{{id}}" class="accordion-body collapse"> \
<div class="accordion-inner"> \
{{#facets}} \
<div class="facet-summary" data-facet="{{id}}"> \
@ -57,9 +57,6 @@ my.Fields = Backbone.View.extend({
</div> \
',
events: {
'click .js-show-hide': 'onShowHide'
},
initialize: function(model) {
var self = this;
this.el = $(this.el);
@ -77,6 +74,7 @@ my.Fields = Backbone.View.extend({
self.model.getFieldsSummary();
self.render();
});
this.el.find('.collapse').collapse();
this.render();
},
render: function() {
@ -91,25 +89,7 @@ my.Fields = Backbone.View.extend({
});
var templated = Mustache.render(this.template, tmplData);
this.el.html(templated);
this.el.find('.collapse').collapse('hide');
},
onShowHide: function(e) {
e.preventDefault();
var $target = $(e.target);
// weird collapse class seems to have been removed (can watch this happen
// if you watch dom) but could not work why. Absence of collapse then meant
// we could not toggle.
// This seems to fix the problem.
this.el.find('.accordion-body').addClass('collapse');;
if ($target.text() === '+') {
this.el.find('.collapse').collapse('show');
$target.text('-');
} else {
this.el.find('.collapse').collapse('hide');
$target.text('+');
}
}
});
})(jQuery, recline.View);

2
src/widget.filtereditor.js
View File

@ -123,8 +123,6 @@ my.FilterEditor = Backbone.View.extend({
var filterType = $target.find('select.filterType').val();
var field = $target.find('select.fields').val();
this.model.queryState.addFilter({type: filterType, field: field});
// trigger render explicitly as queryState change will not be triggered (as blank value for filter)
this.render();
},
onRemoveFilter: function(e) {
e.preventDefault();

115
src/widget.valuefilter.js Normal file
View File

@ -0,0 +1,115 @@
/*jshint multistr:true */
this.recline = this.recline || {};
this.recline.View = this.recline.View || {};
(function($, my) {
my.ValueFilter = Backbone.View.extend({
className: 'recline-filter-editor well',
template: ' \
<div class="filters"> \
<h3>Filters</h3> \
<button class="btn js-add-filter add-filter">Add filter</button> \
<form class="form-stacked js-add" style="display: none;"> \
<fieldset> \
<label>Field</label> \
<select class="fields"> \
{{#fields}} \
<option value="{{id}}">{{label}}</option> \
{{/fields}} \
</select> \
<button type="submit" class="btn">Add</button> \
</fieldset> \
</form> \
<form class="form-stacked js-edit"> \
{{#filters}} \
{{{filterRender}}} \
{{/filters}} \
{{#filters.length}} \
<button type="submit" class="btn update-filter">Update</button> \
{{/filters.length}} \
</form> \
</div> \
',
filterTemplates: {
term: ' \
<div class="filter-{{type}} filter"> \
<fieldset> \
{{field}} \
<a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
<input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
</fieldset> \
</div> \
'
},
events: {
'click .js-remove-filter': 'onRemoveFilter',
'click .js-add-filter': 'onAddFilterShow',
'submit form.js-edit': 'onTermFiltersUpdate',
'submit form.js-add': 'onAddFilter'
},
initialize: function() {
this.el = $(this.el);
_.bindAll(this, 'render');
this.model.fields.bind('all', this.render);
this.model.queryState.bind('change', this.render);
this.model.queryState.bind('change:filters:new-blank', this.render);
this.render();
},
render: function() {
var self = this;
var tmplData = $.extend(true, {}, this.model.queryState.toJSON());
// we will use idx in list as the id ...
tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
filter.id = idx;
return filter;
});
tmplData.fields = this.model.fields.toJSON();
tmplData.filterRender = function() {
return Mustache.render(self.filterTemplates.term, this);
};
var out = Mustache.render(this.template, tmplData);
this.el.html(out);
},
updateFilter: function(input) {
var self = this;
var filters = self.model.queryState.get('filters');
var $input = $(input);
var filterIndex = parseInt($input.attr('data-filter-id'), 10);
var value = $input.val();
filters[filterIndex].term = value;
},
onAddFilterShow: function(e) {
e.preventDefault();
var $target = $(e.target);
$target.hide();
this.el.find('form.js-add').show();
},
onAddFilter: function(e) {
e.preventDefault();
var $target = $(e.target);
$target.hide();
var field = $target.find('select.fields').val();
this.model.queryState.addFilter({type: 'term', field: field});
},
onRemoveFilter: function(e) {
e.preventDefault();
var $target = $(e.target);
var filterId = $target.attr('data-filter-id');
this.model.queryState.removeFilter(filterId);
},
onTermFiltersUpdate: function(e) {
var self = this;
e.preventDefault();
var filters = self.model.queryState.get('filters');
var $form = $(e.target);
_.each($form.find('input'), function(input) {
self.updateFilter(input);
});
self.model.queryState.set({filters: filters, from: 0});
self.model.queryState.trigger('change');
}
});
})(jQuery, recline.View);

202
test/backend.ckan.test.js
View File

@ -1,202 +0,0 @@
(function ($) {
module("Backend CKAN");
test('_parseCkanResourceUrl', function() {
var resid = 'eb23e809-ccbb-4ad1-820a-19586fc4bebd';
var url = 'http://demo.ckan.org/dataset/some-dataset/resource/' + resid;
var out = recline.Backend.Ckan._parseCkanResourceUrl(url);
var exp = {
resource_id: resid,
endpoint: 'http://demo.ckan.org/api'
}
deepEqual(out, exp);
});
test('_normalizeQuery', function() {
var dataset = new recline.Model.Dataset({
url: 'does-not-matter',
id: 'xyz',
backend: 'ckan'
});
var queryObj = {
q: 'abc',
sort: [
{ field: 'location', order: 'desc' },
{ field: 'last' }
]
};
var out = recline.Backend.Ckan._normalizeQuery(queryObj, dataset);
var exp = {
resource_id: dataset.id,
q: 'abc',
sort: 'location desc,last ',
limit: 10,
offset: 0
};
deepEqual(out, exp);
});
test("fetch", function() {
var dataset = new recline.Model.Dataset({
url: 'http://localhost:5000/dataset/test-data-viewer/resource/4f1299ab-a100-4e5f-ba81-e6d234a2f3bd',
backend: 'ckan'
});
var stub = sinon.stub($, 'ajax', function(options) {
if (options.url.indexOf('datastore_search') != -1) {
return {
done: function(callback) {
callback(sample_data);
return this;
},
fail: function() {
}
};
}
});
dataset.fetch().done(function(dataset) {
deepEqual(
_.pluck(dataset.fields.toJSON(), 'id'),
_.pluck(sample_data.result.fields, 'id')
);
// check we've mapped types correctly
equal(dataset.fields.get('x').get('type'), 'integer');
equal(dataset.fields.get('country').get('type'), 'string');
// fetch does a query so we can check for records
equal(dataset.recordCount, 6);
equal(dataset.records.length, 6);
equal(dataset.records.at(0).get('id'), 0);
equal(dataset.records.at(0).get('country'), 'DE');
});
$.ajax.restore();
});
var sample_data = {
"help": "",
"result": {
"fields": [
{
"id": "_id",
"type": "int4"
},
{
"id": "id",
"type": "int4"
},
{
"id": "date",
"type": "date"
},
{
"id": "x",
"type": "int4"
},
{
"id": "y",
"type": "int4"
},
{
"id": "z",
"type": "int4"
},
{
"id": "country",
"type": "text"
},
{
"id": "title",
"type": "text"
},
{
"id": "lat",
"type": "float8"
},
{
"id": "lon",
"type": "float8"
}
],
"records": [
{
"_id": 1,
"country": "DE",
"date": "2011-01-01",
"id": 0,
"lat": 52.56,
"lon": 13.4,
"title": "first",
"x": 1,
"y": 2,
"z": 3
},
{
"_id": 2,
"country": "UK",
"date": "2011-02-02",
"id": 1,
"lat": 54.97,
"lon": -1.6,
"title": "second",
"x": 2,
"y": 4,
"z": 24
},
{
"_id": 3,
"country": "US",
"date": "2011-03-03",
"id": 2,
"lat": 40.0,
"lon": -75.5,
"title": "third",
"x": 3,
"y": 6,
"z": 9
},
{
"_id": 4,
"country": "UK",
"date": "2011-04-04",
"id": 3,
"lat": 57.27,
"lon": -6.2,
"title": "fourth",
"x": 4,
"y": 8,
"z": 6
},
{
"_id": 5,
"country": "UK",
"date": "2011-05-04",
"id": 4,
"lat": 51.58,
"lon": 0.0,
"title": "fifth",
"x": 5,
"y": 10,
"z": 15
},
{
"_id": 6,
"country": "DE",
"date": "2011-06-02",
"id": 5,
"lat": 51.04,
"lon": 7.9,
"title": "sixth",
"x": 6,
"y": 12,
"z": 18
}
],
"resource_id": "4f1299ab-a100-4e5f-ba81-e6d234a2f3bd",
"total": 6
},
"success": true
};
})(this.jQuery);

25
test/backend.memory.test.js
View File

@ -187,31 +187,6 @@ test('update and delete', function () {
equal(data.records[0].x, memoryData[1].x);
});
test('transform', function () {
var data = [
{a: 1, b: " bla"},
{a: 2, b: "foo "},
{a: 3, b: "bar"}
];
var store = new recline.Backend.Memory.Store(data);
store.transform(function(d) {
d.a = d.a * 10;
return d;
})
equal(store.records[0].a, 10);
equal(store.records[1].a, 20);
});
test('transform deletes', function () {
var data = [{a: 1, b: " bla"},{a: 2, b: "foo "},{a: 3, b: "bar"}];
var store = new recline.Backend.Memory.Store(data);
store.transform(function(d) {
if (d.a == '1') return null;
else return d;
})
equal(store.records.length, 2);
});
})(this.jQuery);
// ======================================

61
test/data.transform.test.js
View File

@ -1,61 +0,0 @@
module("Data.Transform");
test('previewTransform', function () {
var docs = [
{
'date': '2012/2013 - 1'
}
];
var func = function(doc) {
return doc;
};
var exp = [
{
"after": {
"date": "2012/2013 - 1"
},
"before": {
"date": "2012/2013 - 1"
}
}
];
var out = recline.Data.Transform.previewTransform(docs, func);
deepEqual(out, exp);
var func = function(doc) {
var d = doc['date'];
doc['date'] = d.split('/')[0];
return doc;
};
var exp = [
{
"after": {
"date": "2012"
},
"before": {
"date": "2012/2013 - 1"
}
}
];
var out = recline.Data.Transform.previewTransform(docs, func);
deepEqual(out, exp);
var func = function(doc) {
var d = doc['date'];
doc['date'] = d.split('/')[0] + '-' + d.split(' - ')[1];
return doc;
};
var exp = [
{
"after": {
"date": "2012-1"
},
"before": {
"date": "2012/2013 - 1"
}
}
];
var out = recline.Data.Transform.previewTransform(docs, func);
deepEqual(out, exp);
});

10
test/index.html
View File

@ -37,7 +37,6 @@
<script type="text/javascript" src="../src/backend.gdocs.js"></script>
<script type="text/javascript" src="../src/backend.elasticsearch.js"></script>
<script type="text/javascript" src="../src/backend.csv.js"></script>
<script type="text/javascript" src="../src/backend.ckan.js"></script>
<script type="text/javascript" src="model.test.js"></script>
<script type="text/javascript" src="backend.memory.test.js"></script>
@ -45,14 +44,11 @@
<script type="text/javascript" src="backend.gdocs.test.js"></script>
<script type="text/javascript" src="backend.elasticsearch.test.js"></script>
<script type="text/javascript" src="backend.csv.test.js"></script>
<script type="text/javascript" src="backend.ckan.test.js"></script>
<!-- views and view tests -->
<script type="text/javascript" src="../src/view.grid.js"></script>
<script type="text/javascript" src="../src/view.slickgrid.js"></script>
<script type="text/javascript" src="../src/view.transform.js"></script>
<script type="text/javascript" src="../src/view.flot.js"></script>
<script type="text/javascript" src="../src/view.flotr2.js"></script>
<script type="text/javascript" src="../src/view.graph.js"></script>
<script type="text/javascript" src="../src/view.map.js"></script>
<script type="text/javascript" src="../src/view.timeline.js"></script>
@ -64,17 +60,13 @@
<script type="text/javascript" src="view.grid.test.js"></script>
<script type="text/javascript" src="view.slickgrid.test.js"></script>
<script type="text/javascript" src="view.flotr2.test.js"></script>
<script type="text/javascript" src="view.flot.test.js"></script>
<script type="text/javascript" src="view.map.test.js"></script>
<script type="text/javascript" src="view.timeline.test.js"></script>
<script type="text/javascript" src="view.multiview.test.js"></script>
<script type="text/javascript" src="util.test.js"></script>
<script type="text/javascript" src="widget.filtereditor.test.js"></script>
<!-- data tests -->
<script type="text/javascript" src="../src/data.transform.js"></script>
<script type="text/javascript" src="data.transform.test.js"></script>
<script type="text/javascript" src="widget.valuefilter.test.js"></script>
</head>
<body>
<h1 id="qunit-header">Qunit Tests</h1>

16
test/model.test.js
View File

@ -60,6 +60,20 @@ test('Field: type mapping', function () {
});
});
test('Field: getFieldValue', function () {
var doc = new recline.Model.Record({
x: 12.3
});
var field = new recline.Model.Field({id: 'x'});
var out = doc.getFieldValue(field);
var exp = 12.3;
equal(out, exp);
// bad value
var out = doc.getFieldValue();
equal(out, '');
});
test('Field: default renderers', function () {
var doc = new recline.Model.Record({
x: 12.3,
@ -113,8 +127,10 @@ test('Field: custom deriver and renderer', function () {
var field = new recline.Model.Field({id: 'computed', is_derived: true}, {
deriver: deriver
});
var out1 = doc.getFieldValueUnrendered(field);
var out = doc.getFieldValue(field);
var exp = 246;
equal(out1, exp);
equal(out, exp);
var field = new recline.Model.Field({id: 'x'}, {

86
test/view.flotr2.test.js
View File

@ -1,86 +0,0 @@
module("View - Flotr2");
test('basics', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.Flotr2({
model: dataset
});
$('.fixtures').append(view.el);
equal(view.state.get('graphType'), 'lines-and-points');
// view will auto render ...
assertPresent('.editor', view.elSidebar);
view.remove();
});
test('initialize', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.Flotr2({
model: dataset,
state: {
'graphType': 'lines',
'group': 'x',
'series': ['y', 'z']
}
});
$('.fixtures').append(view.el);
equal(view.state.get('graphType'), 'lines');
deepEqual(view.state.get('series'), ['y', 'z']);
// check we have updated editor with state info
equal(view.elSidebar.find('.editor-type select').val(), 'lines');
equal(view.elSidebar.find('.editor-group select').val(), 'x');
var out = _.map(view.elSidebar.find('.editor-series select'), function($el) {
return $($el).val();
});
deepEqual(out, ['y', 'z']);
view.remove();
});
test('dates in graph view', function () {
expect(0);
var dataset = Fixture.getDataset();
var view = new recline.View.Flotr2({
model: dataset,
state: {
'graphType': 'lines',
'group': 'date',
'series': ['y', 'z']
}
});
$('.fixtures').append(view.el);
view.remove();
});
test('Flotr2Controls basics', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.Flotr2Controls({
model: dataset,
state: {
graphType: 'bars',
series: []
}
});
$('.fixtures').append(view.el);
equal(view.state.get('graphType'), 'bars');
// view will auto render ...
assertPresent('.editor', view.el);
view.remove();
});
test('Overriding graph options', function () {
var dataset = Fixture.getDataset();
var randomWidth = Math.random();
var view = new recline.View.Flotr2({
model: dataset,
state: {
'graphType': 'bars',
'group': 'date',
'series': ['y', 'z'],
'graphOptions': { bars: {barWidth: randomWidth}}
}
});
equal(view.getGraphOptions('bars').bars.barWidth, randomWidth)
view.remove();
});

67
test/widget.valuefilter.test.js Normal file
View File

@ -0,0 +1,67 @@
module("Widget - Value Filter");
test('basics', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.FilterEditor({
model: dataset
});
$('.fixtures').append(view.el);
assertPresent('.js-add-filter', view.elSidebar);
var $addForm = view.el.find('form.js-add');
ok(!$addForm.is(":visible"));
view.el.find('.js-add-filter').click();
ok(!view.el.find('.js-add-filter').is(":visible"));
ok($addForm.is(":visible"));
// submit the form
$addForm.find('select.fields').val('country');
$addForm.submit();
// now check we have new filter
ok(!$addForm.is(":visible"));
$editForm = view.el.find('form.js-edit');
equal($editForm.find('.filter-term').length, 1);
equal(dataset.queryState.attributes.filters[0].field, 'country');
// now set filter value and apply
$editForm.find('input').val('UK');
$editForm.submit();
equal(dataset.queryState.attributes.filters[0].term, 'UK');
equal(dataset.records.length, 3);
// now remove filter
$editForm = view.el.find('form.js-edit');
$editForm.find('.js-remove-filter').last().click();
$editForm = view.el.find('form.js-edit');
equal($editForm.find('.filter').length, 0);
equal(dataset.records.length, 6);
view.remove();
});
test('add 2 filters', function () {
var dataset = Fixture.getDataset();
var view = new recline.View.FilterEditor({
model: dataset
});
$('.fixtures').append(view.el);
// add 2 term filters
var $addForm = view.el.find('form.js-add');
view.el.find('.js-add-filter').click();
$addForm.find('select.fields').val('country');
$addForm.submit();
$addForm = view.el.find('form.js-add');
view.el.find('.js-add-filter').click();
$addForm.find('select.fields').val('id');
$addForm.submit();
var fields = [];
view.el.find('form.js-edit .filter-term input').each(function(idx, item) {
fields.push($(item).attr('data-filter-field'));
});
deepEqual(fields, ['country', 'id']);
view.remove();
});