Merge branch 'master' into gh-pages
This commit is contained in:
Rufus Pollock
commit
7af8541707
@ -12,7 +12,7 @@
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="../css/data-explorer.css">
|
||||
<link rel="stylesheet" href="../css/graph-flot.css">
|
||||
<link rel="stylesheet" href="../css/graph.css">
|
||||
<link rel="stylesheet" href="style/demo.css">
|
||||
|
||||
<script type="text/javascript" src="../vendor/jquery-1.7.1.js"></script>
|
||||
|
||||
@ -11,17 +11,24 @@
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
|
||||
<link rel="stylesheet" href="../css/data-explorer.css">
|
||||
<link rel="stylesheet" href="../css/graph-flot.css">
|
||||
<link rel="stylesheet" href="../css/map.css">
|
||||
<link rel="stylesheet" href="style/demo.css">
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
|
||||
<link rel="stylesheet" href="../vendor/leaflet/leaflet.css">
|
||||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.css">
|
||||
<!--[if lte IE 8]>
|
||||
<link rel="stylesheet" href="../vendor/leaflet/leaflet.ie.css" />
|
||||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||||
<![endif]-->
|
||||
|
||||
<!-- 3rd party libraries -->
|
||||
<!-- Recline CSS components -->
|
||||
<link rel="stylesheet" href="../css/data-explorer.css">
|
||||
<link rel="stylesheet" href="../css/grid.css">
|
||||
<link rel="stylesheet" href="../css/graph.css">
|
||||
<link rel="stylesheet" href="../css/map.css">
|
||||
<!-- /Recline CSS components -->
|
||||
|
||||
<!-- Custom CSS for the Data Explorer Online App -->
|
||||
<link rel="stylesheet" href="style/demo.css">
|
||||
|
||||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
|
||||
|
||||
<!-- 3rd party JS libraries -->
|
||||
<script type="text/javascript" src="../vendor/jquery-1.7.1.js"></script>
|
||||
<script type="text/javascript" src="../vendor/underscore-1.1.6.js"></script>
|
||||
<script type="text/javascript" src="../vendor/backbone-0.5.1.js"></script>
|
||||
@ -29,7 +36,7 @@
|
||||
<script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
|
||||
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||||
<script type="text/javascript" src="../vendor/leaflet/leaflet.js"></script>
|
||||
<script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
|
||||
<!-- recline library -->
|
||||
<!-- in normal use would just the single recline.js library file. However, for testing it
|
||||
@ -45,7 +52,7 @@
|
||||
<script type="text/javascript" src="../src/backend/localcsv.js"></script>
|
||||
<script type="text/javascript" src="../src/view.js"></script>
|
||||
<script type="text/javascript" src="../src/view-grid.js"></script>
|
||||
<script type="text/javascript" src="../src/view-flot-graph.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-transform-dialog.js"></script>
|
||||
|
||||
@ -53,6 +60,7 @@
|
||||
<script type="text/javascript" src="js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="recline-app">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
@ -73,6 +81,12 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href=".js-share-and-embed-dialog" data-toggle="modal">
|
||||
Share and Embed
|
||||
<i class="icon-share icon-white"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -121,6 +135,18 @@
|
||||
<input type="file" name="source" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">Separator</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="separator" value="," class="spam1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">Encoding</label>
|
||||
<div class="controls">
|
||||
<input type="text" name="encoding" value="UTF-8" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Import »</button>
|
||||
</div>
|
||||
@ -128,11 +154,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade in js-share-and-embed-dialog" style="display: none;">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Share and Embed</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Sharable Link to current View</h4>
|
||||
<textarea class="view-link" style="width: 100%; height: 100px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="content">
|
||||
<div class="data-explorer-here"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
215
app/js/app.js
215
app/js/app.js
@ -1,78 +1,120 @@
|
||||
$(function() {
|
||||
var qs = recline.View.parseQueryString(window.location.search);
|
||||
if (qs.url) {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
id: 'my-dataset',
|
||||
url: qs.url,
|
||||
webstore_url: qs.url
|
||||
},
|
||||
qs.backend || 'elasticsearch'
|
||||
);
|
||||
} else {
|
||||
dataset = localDataset();
|
||||
}
|
||||
|
||||
createExplorer(dataset);
|
||||
jQuery(function($) {
|
||||
var app = new ExplorerApp({
|
||||
el: $('.recline-app')
|
||||
})
|
||||
Backbone.history.start();
|
||||
|
||||
// setup the loader menu in top bar
|
||||
setupLoader(createExplorer);
|
||||
});
|
||||
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
// again and again
|
||||
function createExplorer(dataset) {
|
||||
// remove existing data explorer view
|
||||
var reload = false;
|
||||
if (window.dataExplorer) {
|
||||
window.dataExplorer.remove();
|
||||
reload = true;
|
||||
}
|
||||
window.dataExplorer = null;
|
||||
var $el = $('<div />');
|
||||
$el.appendTo($('.data-explorer-here'));
|
||||
var views = standardViews(dataset);
|
||||
window.dataExplorer = new recline.View.DataExplorer({
|
||||
el: $el
|
||||
, model: dataset
|
||||
, views: views
|
||||
});
|
||||
// HACK (a bit). Issue is that Backbone will not trigger the route
|
||||
// if you are already at that location so we have to make sure we genuinely switch
|
||||
if (reload) {
|
||||
window.dataExplorer.router.navigate('graph');
|
||||
window.dataExplorer.router.navigate('', true);
|
||||
}
|
||||
}
|
||||
var ExplorerApp = Backbone.View.extend({
|
||||
events: {
|
||||
'submit form.js-import-url': '_onImportURL',
|
||||
'submit .js-import-dialog-file form': '_onImportFile'
|
||||
},
|
||||
|
||||
// convenience function
|
||||
function standardViews(dataset) {
|
||||
var views = [
|
||||
{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new recline.View.DataGrid({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new recline.View.FlotGraph({
|
||||
model: dataset
|
||||
})
|
||||
},
|
||||
{
|
||||
id: 'map',
|
||||
label: 'Map',
|
||||
view: new recline.View.Map({
|
||||
model: dataset
|
||||
})
|
||||
initialize: function() {
|
||||
this.el = $(this.el);
|
||||
this.explorer = null;
|
||||
this.explorerDiv = $('.data-explorer-here');
|
||||
|
||||
var state = recline.View.parseQueryString(window.location.search);
|
||||
if (state) {
|
||||
_.each(state, function(value, key) {
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
} catch(e) {}
|
||||
state[key] = value;
|
||||
});
|
||||
}
|
||||
var dataset = null;
|
||||
if (state.dataset || state.url) {
|
||||
dataset = recline.Model.Dataset.restore(state);
|
||||
} else {
|
||||
dataset = localDataset();
|
||||
}
|
||||
this.createExplorer(dataset, state);
|
||||
},
|
||||
|
||||
];
|
||||
return views;
|
||||
}
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
// again and again
|
||||
createExplorer: function(dataset, state) {
|
||||
var self = this;
|
||||
// remove existing data explorer view
|
||||
var reload = false;
|
||||
if (this.dataExplorer) {
|
||||
this.dataExplorer.remove();
|
||||
reload = true;
|
||||
}
|
||||
this.dataExplorer = null;
|
||||
var $el = $('<div />');
|
||||
$el.appendTo(this.explorerDiv);
|
||||
this.dataExplorer = new recline.View.DataExplorer({
|
||||
model: dataset,
|
||||
el: $el,
|
||||
state: state
|
||||
});
|
||||
this._setupPermaLink(this.dataExplorer);
|
||||
|
||||
// HACK (a bit). Issue is that Backbone will not trigger the route
|
||||
// if you are already at that location so we have to make sure we genuinely switch
|
||||
if (reload) {
|
||||
this.dataExplorer.router.navigate('graph');
|
||||
this.dataExplorer.router.navigate('', true);
|
||||
}
|
||||
},
|
||||
|
||||
_setupPermaLink: function(explorer) {
|
||||
var $viewLink = this.el.find('.js-share-and-embed-dialog .view-link');
|
||||
function makePermaLink(state) {
|
||||
var qs = recline.View.composeQueryString(state.toJSON());
|
||||
return window.location.origin + window.location.pathname + qs;
|
||||
}
|
||||
explorer.state.bind('change', function() {
|
||||
$viewLink.val(makePermaLink(explorer.state));
|
||||
});
|
||||
$viewLink.val(makePermaLink(explorer.state));
|
||||
},
|
||||
|
||||
// setup the loader menu in top bar
|
||||
setupLoader: function(callback) {
|
||||
// pre-populate webstore load form with an example url
|
||||
var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013';
|
||||
$('form.js-import-url input[name="source"]').val(demoUrl);
|
||||
},
|
||||
|
||||
_onImportURL: function(e) {
|
||||
e.preventDefault();
|
||||
$('.modal.js-import-dialog-url').modal('hide');
|
||||
var $form = $(e.target);
|
||||
var source = $form.find('input[name="source"]').val();
|
||||
var type = $form.find('select[name="backend_type"]').val();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
id: 'my-dataset',
|
||||
url: source,
|
||||
webstore_url: source
|
||||
},
|
||||
type
|
||||
);
|
||||
this.createExplorer(dataset);
|
||||
},
|
||||
|
||||
_onImportFile: function(e) {
|
||||
var self = this;
|
||||
e.preventDefault();
|
||||
var $form = $(e.target);
|
||||
$('.modal.js-import-dialog-file').modal('hide');
|
||||
var $file = $form.find('input[type="file"]')[0];
|
||||
var file = $file.files[0];
|
||||
var options = {
|
||||
separator : $form.find('input[name="separator"]').val(),
|
||||
encoding : $form.find('input[name="encoding"]').val()
|
||||
};
|
||||
recline.Backend.loadFromCSVFile(file, function(dataset) {
|
||||
self.createExplorer(dataset)
|
||||
},
|
||||
options
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// provide a demonstration in memory dataset
|
||||
function localDataset() {
|
||||
@ -83,7 +125,7 @@ function localDataset() {
|
||||
, name: '1-my-test-dataset'
|
||||
, id: datasetId
|
||||
},
|
||||
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'},{id: 'lat'},{id: 'lon'}],
|
||||
fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'},{id: 'lat'},{id: 'lon'}],
|
||||
documents: [
|
||||
{id: 0, x: 1, y: 2, z: 3, country: 'DE', label: 'first', lat:52.56, lon:13.40}
|
||||
, {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second', lat:54.97, lon:-1.60}
|
||||
@ -100,36 +142,3 @@ fields: [{id: 'x'}, {id: 'y'}, {id: 'z'}, {id: 'country'}, {id: 'label'},{id: 'l
|
||||
return dataset;
|
||||
}
|
||||
|
||||
// setup the loader menu in top bar
|
||||
function setupLoader(callback) {
|
||||
// pre-populate webstore load form with an example url
|
||||
var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013';
|
||||
$('form.js-import-url input[name="source"]').val(demoUrl);
|
||||
$('form.js-import-url').submit(function(e) {
|
||||
e.preventDefault();
|
||||
$('.modal.js-import-dialog-url').modal('hide');
|
||||
var $form = $(e.target);
|
||||
var source = $form.find('input[name="source"]').val();
|
||||
var type = $form.find('select[name="backend_type"]').val();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
id: 'my-dataset',
|
||||
url: source,
|
||||
webstore_url: source
|
||||
},
|
||||
type
|
||||
);
|
||||
callback(dataset);
|
||||
});
|
||||
|
||||
$('.js-import-dialog-file form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
var $form = $(e.target);
|
||||
$('.modal.js-import-dialog-file').modal('hide');
|
||||
var $file = $form.find('input[type="file"]')[0];
|
||||
var file = $file.files[0];
|
||||
recline.Backend.loadFromCSVFile(file, function(dataset) {
|
||||
callback(dataset)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -78,320 +78,3 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Data Table
|
||||
*********************************************************/
|
||||
|
||||
.recline-grid .btn-group .dropdown-toggle {
|
||||
padding: 1px 3px;
|
||||
line-height: auto;
|
||||
}
|
||||
|
||||
.recline-grid-container {
|
||||
overflow: auto;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.recline-grid {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.recline-grid td, .recline-grid th {
|
||||
border-left: 1px solid #ccc;
|
||||
padding: 3px 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.recline-grid tr td:first-child, .recline-grid tr th:first-child {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* direct borrowing from twitter buttons */
|
||||
.recline-grid th,
|
||||
.transform-column-view .expression-preview-table-wrapper th
|
||||
{
|
||||
background-color: #e6e6e6;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-transition: 0.1s linear all;
|
||||
-moz-transition: 0.1s linear all;
|
||||
-ms-transition: 0.1s linear all;
|
||||
-o-transition: 0.1s linear all;
|
||||
transition: 0.1s linear all;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Data Table Menus
|
||||
*********************************************************/
|
||||
|
||||
.column-header-menu, a.root-header-menu {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.read-only a.row-header-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.data-table-cell-content {
|
||||
line-height: 1.2;
|
||||
color: #222;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.data-table-cell-content-numeric {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
a.data-table-cell-edit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
text-decoration: none;
|
||||
background-image: url(images/edit-map.png);
|
||||
background-repeat: no-repeat;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a.data-table-cell-edit:hover {
|
||||
background-position: -25px 0px;
|
||||
}
|
||||
|
||||
.recline-grid td:hover .data-table-cell-edit {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
div.data-table-cell-content-numeric > a.data-table-cell-edit {
|
||||
left: 0px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.data-table-value-nonstring {
|
||||
color: #282;
|
||||
}
|
||||
|
||||
.data-table-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.data-table-cell-editor-editor {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 98%;
|
||||
height: 3em;
|
||||
font-family: monospace;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.data-table-cell-copypaste-editor {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 98%;
|
||||
height: 10em;
|
||||
font-family: monospace;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.data-table-cell-editor-action {
|
||||
float: left;
|
||||
vertical-align: bottom;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-table-cell-editor-key {
|
||||
font-size: 0.8em;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Dialogs
|
||||
*********************************************************/
|
||||
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #666;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-frame {
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
background: white;
|
||||
border: 1px solid #3a5774;
|
||||
}
|
||||
|
||||
.dialog-border {
|
||||
border: 4px solid #c1d9ff;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
background: #e0edfe;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
color: #000;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
overflow: auto;
|
||||
font-size: 1.3em;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.dialog-instruction {
|
||||
padding: 0 0 7px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
font-size: 1.3em;
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dialog-busy {
|
||||
width: 400px;
|
||||
border: none;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/**********************************************************
|
||||
* Transform Dialog
|
||||
*********************************************************/
|
||||
|
||||
#expression-preview-tabs .ui-tabs-nav li a {
|
||||
padding: 0.15em 1em;
|
||||
}
|
||||
|
||||
textarea.expression-preview-code {
|
||||
font-family: monospace;
|
||||
height: 5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.expression-preview-parsing-status {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.expression-preview-parsing-status.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#expression-preview-tabs-preview,
|
||||
#expression-preview-tabs-help,
|
||||
#expression-preview-tabs-history,
|
||||
#expression-preview-tabs-starred {
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#expression-preview-tabs-preview > div,
|
||||
#expression-preview-tabs-help > div,
|
||||
#expression-preview-tabs-history > div,
|
||||
#expression-preview-tabs-starred {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#expression-preview-tabs-preview td, #expression-preview-tabs-preview th,
|
||||
#expression-preview-tabs-help td, #expression-preview-tabs-help th,
|
||||
#expression-preview-tabs-history td, #expression-preview-tabs-history th,
|
||||
#expression-preview-tabs-starred td, #expression-preview-tabs-starred th {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.expression-preview-table-wrapper {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.expression-preview-container td {
|
||||
padding: 2px 5px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
td.expression-preview-heading {
|
||||
border-top: none;
|
||||
background: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td.expression-preview-value {
|
||||
max-width: 250px !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.expression-preview-special-value {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.expression-preview-help-container h3 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 7px;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-title {
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-params {
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-returns {
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-desc {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Read-only mode
|
||||
*********************************************************/
|
||||
|
||||
.read-only .no-hidden .recline-grid tr td:first-child,
|
||||
.read-only .no-hidden .recline-grid tr th:first-child
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.read-only .write-op,
|
||||
.read-only a.data-table-cell-edit
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.data-graph-container .graph {
|
||||
.recline-graph .graph {
|
||||
height: 500px;
|
||||
margin-right: 200px;
|
||||
}
|
||||
|
||||
.data-graph-container .legend table {
|
||||
.recline-graph .legend table {
|
||||
width: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.data-graph-container .legend td {
|
||||
.recline-graph .legend td {
|
||||
padding: 5px;
|
||||
line-height: 13px;
|
||||
}
|
||||
@ -17,34 +17,34 @@
|
||||
* Editor
|
||||
*********************************************************/
|
||||
|
||||
.data-graph-container .editor {
|
||||
.recline-graph .editor {
|
||||
float: right;
|
||||
width: 200px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.data-graph-container .editor-info {
|
||||
.recline-graph .editor-info {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.data-graph-container .editor-info {
|
||||
.recline-graph .editor-info {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-graph-container .editor form {
|
||||
.recline-graph .editor form {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.data-graph-container .editor select {
|
||||
.recline-graph .editor select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-graph-container .editor-info {
|
||||
.recline-graph .editor-info {
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.data-graph-container .editor-hide-info p {
|
||||
.recline-graph .editor-hide-info p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
319
css/grid.css
Normal file
319
css/grid.css
Normal file
@ -0,0 +1,319 @@
|
||||
/**********************************************************
|
||||
* (Data) Grid
|
||||
*********************************************************/
|
||||
|
||||
.recline-grid .btn-group .dropdown-toggle {
|
||||
padding: 1px 3px;
|
||||
line-height: auto;
|
||||
}
|
||||
|
||||
.recline-grid-container {
|
||||
overflow: auto;
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.recline-grid {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.recline-grid td, .recline-grid th {
|
||||
border-left: 1px solid #ccc;
|
||||
padding: 3px 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.recline-grid td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.recline-grid tr td:first-child, .recline-grid tr th:first-child {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* direct borrowing from twitter buttons */
|
||||
.recline-grid th,
|
||||
.transform-column-view .expression-preview-table-wrapper th
|
||||
{
|
||||
background-color: #e6e6e6;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
|
||||
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
||||
color: #333;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-webkit-transition: 0.1s linear all;
|
||||
-moz-transition: 0.1s linear all;
|
||||
-ms-transition: 0.1s linear all;
|
||||
-o-transition: 0.1s linear all;
|
||||
transition: 0.1s linear all;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Data Table Menus
|
||||
*********************************************************/
|
||||
|
||||
.column-header-menu, a.root-header-menu {
|
||||
float: right;
|
||||
}
|
||||
|
||||
div.data-table-cell-content {
|
||||
line-height: 1.2;
|
||||
color: #222;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.data-table-cell-content-numeric {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
a.data-table-cell-edit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
text-decoration: none;
|
||||
background-image: url(images/edit-map.png);
|
||||
background-repeat: no-repeat;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
a.data-table-cell-edit:hover {
|
||||
background-position: -25px 0px;
|
||||
}
|
||||
|
||||
.recline-grid td:hover .data-table-cell-edit {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
div.data-table-cell-content-numeric > a.data-table-cell-edit {
|
||||
left: 0px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.data-table-value-nonstring {
|
||||
color: #282;
|
||||
}
|
||||
|
||||
.data-table-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.data-table-cell-editor-editor {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 98%;
|
||||
height: 3em;
|
||||
font-family: monospace;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.data-table-cell-copypaste-editor {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
width: 98%;
|
||||
height: 10em;
|
||||
font-family: monospace;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.data-table-cell-editor-action {
|
||||
float: left;
|
||||
vertical-align: bottom;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-table-cell-editor-key {
|
||||
font-size: 0.8em;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Dialogs
|
||||
*********************************************************/
|
||||
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #666;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-frame {
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
background: white;
|
||||
border: 1px solid #3a5774;
|
||||
}
|
||||
|
||||
.dialog-border {
|
||||
border: 4px solid #c1d9ff;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
background: #e0edfe;
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
color: #000;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
overflow: auto;
|
||||
font-size: 1.3em;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.dialog-instruction {
|
||||
padding: 0 0 7px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
font-size: 1.3em;
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.dialog-busy {
|
||||
width: 400px;
|
||||
border: none;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/**********************************************************
|
||||
* Transform Dialog
|
||||
*********************************************************/
|
||||
|
||||
#expression-preview-tabs .ui-tabs-nav li a {
|
||||
padding: 0.15em 1em;
|
||||
}
|
||||
|
||||
textarea.expression-preview-code {
|
||||
font-family: monospace;
|
||||
height: 5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.expression-preview-parsing-status {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.expression-preview-parsing-status.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#expression-preview-tabs-preview,
|
||||
#expression-preview-tabs-help,
|
||||
#expression-preview-tabs-history,
|
||||
#expression-preview-tabs-starred {
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#expression-preview-tabs-preview > div,
|
||||
#expression-preview-tabs-help > div,
|
||||
#expression-preview-tabs-history > div,
|
||||
#expression-preview-tabs-starred {
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#expression-preview-tabs-preview td, #expression-preview-tabs-preview th,
|
||||
#expression-preview-tabs-help td, #expression-preview-tabs-help th,
|
||||
#expression-preview-tabs-history td, #expression-preview-tabs-history th,
|
||||
#expression-preview-tabs-starred td, #expression-preview-tabs-starred th {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.expression-preview-table-wrapper {
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.expression-preview-container td {
|
||||
padding: 2px 5px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
td.expression-preview-heading {
|
||||
border-top: none;
|
||||
background: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td.expression-preview-value {
|
||||
max-width: 250px !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.expression-preview-special-value {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.expression-preview-help-container h3 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 7px;
|
||||
border-bottom: 1px solid #999;
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-title {
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-params {
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-returns {
|
||||
}
|
||||
|
||||
.expression-preview-doc-item-desc {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
/**********************************************************
|
||||
* Read-only mode
|
||||
*********************************************************/
|
||||
|
||||
.recline-read-only .no-hidden .recline-grid tr td:first-child,
|
||||
.recline-read-only .no-hidden .recline-grid tr th:first-child
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recline-read-only .recline-grid .write-op,
|
||||
.recline-read-only .recline-grid a.data-table-cell-edit
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.recline-read-only a.row-header-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
21
css/map.css
21
css/map.css
@ -1,4 +1,23 @@
|
||||
.data-map-container .map {
|
||||
.recline-map .map {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
/**********************************************************
|
||||
* Editor
|
||||
*********************************************************/
|
||||
|
||||
.recline-map .editor {
|
||||
float: right;
|
||||
width: 200px;
|
||||
padding-left: 0px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.recline-map .editor form {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.recline-map .editor select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,59 +1,109 @@
|
||||
<!DOCTYPE html> <html> <head> <title>base.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="base.html"> base.js </a> <a class="source" href="dataproxy.html"> dataproxy.js </a> <a class="source" href="elasticsearch.html"> elasticsearch.js </a> <a class="source" href="gdocs.html"> gdocs.js </a> <a class="source" href="localcsv.html"> localcsv.js </a> <a class="source" href="memory.html"> memory.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> base.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <h1>Recline Backends</h1>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>base.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>base.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
<h1>Recline Backends</h1>
|
||||
<p>Backends are connectors to backend data sources and stores</p>
|
||||
|
||||
<p>This is just the base module containing a template Base class and convenience methods.</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>
|
||||
<p>This is just the base module containing a template Base class and convenience methods.</p>
|
||||
</div>
|
||||
<div 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="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>Backbone.sync</h2>
|
||||
|
||||
<p>Override Backbone.sync to hand off to sync function in relevant backend</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</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="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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>Backbone.sync</h2>
|
||||
<p>Override Backbone.sync to hand off to sync function in relevant backend</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">sync</span> <span class="o">=</span> <span class="kd">function</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="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></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>recline.Backend.Base</h2>
|
||||
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<h2>recline.Backend.Base</h2>
|
||||
<p>Base class for backends providing a template and convenience functions.
|
||||
You do not have to inherit from this class but even when not it does provide guidance on the functions you must implement.</p>
|
||||
|
||||
<p>Note also that while this (and other Backends) are implemented as Backbone models this is just a convenience.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h3>sync</h3>
|
||||
|
||||
<p>Note also that while this (and other Backends) are implemented as Backbone models this is just a convenience.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<h3>sync</h3>
|
||||
<p>An implementation of Backbone.sync that will be used to override
|
||||
Backbone.sync on operations for Datasets and Documents which are using this backend.</p>
|
||||
|
||||
<p>For read-only implementations you will need only to implement read method
|
||||
for Dataset models (and even this can be a null operation). The read method
|
||||
should return relevant metadata for the Dataset. We do not require read support
|
||||
for Documents because they are loaded in bulk by the query method.</p>
|
||||
|
||||
<p>For backends supporting write operations you must implement update and delete support for Document objects.</p>
|
||||
|
||||
<p>All code paths should return an object conforming to the jquery promise API.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">sync</span><span class="o">:</span> <span class="kd">function</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>
|
||||
</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h3>query</h3>
|
||||
|
||||
<p>All code paths should return an object conforming to the jquery promise API.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">sync</span><span class="o">:</span> <span class="kd">function</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></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<h3>query</h3>
|
||||
<p>Query the backend for documents returning them in bulk. This method will
|
||||
be used by the Dataset.query method to search the backend for documents,
|
||||
retrieving the results in bulk.</p>
|
||||
|
||||
<p>@param {recline.model.Dataset} model: Dataset model.</p>
|
||||
|
||||
<p>@param {Object} queryObj: object describing a query (usually produced by
|
||||
using recline.Model.Query and calling toJSON on it).</p>
|
||||
|
||||
<p>The structure of data in the Query object or
|
||||
Hash should follow that defined in <a
|
||||
href="http://github.com/okfn/recline/issues/34">issue 34</a>.
|
||||
(Of course, if you are writing your own backend, and hence
|
||||
have control over the interpretation of the query object, you
|
||||
can use whatever structure you like).</p>
|
||||
|
||||
<p>@returns {Promise} promise API object. The promise resolve method will
|
||||
be called on query completion with a QueryResult object.</p>
|
||||
|
||||
<p>A QueryResult has the following structure (modelled closely on
|
||||
ElasticSearch - see <a
|
||||
href="https://github.com/okfn/recline/issues/57">this issue for more
|
||||
details</a>):</p>
|
||||
|
||||
<pre>
|
||||
{
|
||||
total: // (required) total number of results (can be null)
|
||||
@ -68,8 +118,23 @@ details</a>):</p>
|
||||
// facet results (as per <http://www.elasticsearch.org/guide/reference/api/search/facets/>)
|
||||
}
|
||||
}
|
||||
</pre> </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">model</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>convenience method to convert simple set of documents / rows to a QueryResult</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_docsToQueryResult</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rows</span><span class="p">)</span> <span class="p">{</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div 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">model</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<p>convenience method to convert simple set of documents / rows to a QueryResult</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">_docsToQueryResult</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rows</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">hits</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">rows</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">row</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">_source</span><span class="o">:</span> <span class="nx">row</span> <span class="p">};</span>
|
||||
<span class="p">});</span>
|
||||
@ -77,11 +142,22 @@ details</a>):</p>
|
||||
<span class="nx">total</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">hits</span><span class="o">:</span> <span class="nx">hits</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h2>_wrapInTimeout</h2>
|
||||
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</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="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>
|
||||
a crude way to catch those errors.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <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">timeout</span> <span class="o">=</span> <span class="mi">5000</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>
|
||||
@ -104,4 +180,9 @@ a crude way to catch those errors.</p> </td> <td class="
|
||||
|
||||
<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>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,32 +1,72 @@
|
||||
<!DOCTYPE html> <html> <head> <title>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 … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="base.html"> base.js </a> <a class="source" href="dataproxy.html"> dataproxy.js </a> <a class="source" href="elasticsearch.html"> elasticsearch.js </a> <a class="source" href="gdocs.html"> gdocs.js </a> <a class="source" href="localcsv.html"> localcsv.js </a> <a class="source" href="memory.html"> memory.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> 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">¶</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>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>dataproxy.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>dataproxy.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div 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="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>DataProxy Backend</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>DataProxy Backend</h2>
|
||||
<p>For connecting to <a href="http://github.com/okfn/dataproxy">DataProxy-s</a>.</p>
|
||||
|
||||
<p>When initializing the DataProxy backend you can set the following attributes:</p>
|
||||
|
||||
<ul>
|
||||
<li>dataproxy: {url-to-proxy} (optional). Defaults to http://jsonpdataproxy.appspot.com</li>
|
||||
</ul>
|
||||
|
||||
<p>Datasets using using this backend should set the following attributes:</p>
|
||||
|
||||
<ul>
|
||||
<li>url: (required) url-of-data-to-proxy</li>
|
||||
<li>format: (optional) csv | xls (defaults to csv if not specified)</li>
|
||||
</ul>
|
||||
|
||||
<p>Note that this is a <strong>read-only</strong> backend.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">DataProxy</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<p>Note that this is a <strong>read-only</strong> backend.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">DataProxy</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">dataproxy_url</span><span class="o">:</span> <span class="s1">'http://jsonpdataproxy.appspot.com'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">sync</span><span class="o">:</span> <span class="kd">function</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="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="nx">method</span> <span class="o">===</span> <span class="s2">"read"</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">==</span> <span class="s1">'Dataset'</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Do nothing as we will get fields in query step (and no metadata to
|
||||
retrieve)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">==</span> <span class="s1">'Dataset'</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>Do nothing as we will get fields in query step (and no metadata to
|
||||
retrieve)</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
|
||||
<span class="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>
|
||||
@ -38,14 +78,14 @@ retrieve)</p> </td> <td class="code"> <div
|
||||
<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">base</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">'dataproxy_url'</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="nx">url</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'url'</span><span class="p">)</span>
|
||||
<span class="p">,</span> <span class="s1">'max-results'</span><span class="o">:</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">size</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">get</span><span class="p">(</span><span class="s1">'format'</span><span class="p">)</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'url'</span><span class="p">),</span>
|
||||
<span class="s1">'max-results'</span><span class="o">:</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">size</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">get</span><span class="p">(</span><span class="s1">'format'</span><span class="p">)</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">base</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">'jsonp'</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="nx">base</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">'jsonp'</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_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>
|
||||
@ -76,4 +116,9 @@ retrieve)</p> </td> <td class="code"> <div
|
||||
|
||||
<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>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,13 +1,41 @@
|
||||
<!DOCTYPE html> <html> <head> <title>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 … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="base.html"> base.js </a> <a class="source" href="dataproxy.html"> dataproxy.js </a> <a class="source" href="elasticsearch.html"> elasticsearch.js </a> <a class="source" href="gdocs.html"> gdocs.js </a> <a class="source" href="localcsv.html"> localcsv.js </a> <a class="source" href="memory.html"> memory.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> 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">¶</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>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>elasticsearch.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>elasticsearch.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div 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="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>ElasticSearch Backend</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>ElasticSearch Backend</h2>
|
||||
<p>Connecting to <a href="http://www.elasticsearch.org/">ElasticSearch</a>.</p>
|
||||
|
||||
<p>To use this backend ensure your Dataset has one of the following
|
||||
attributes (first one found is used):</p>
|
||||
|
||||
<pre>
|
||||
elasticsearch_url
|
||||
webstore_url
|
||||
@ -16,8 +44,10 @@ url
|
||||
|
||||
<p>This should point to the ES type url. E.G. for ES running on
|
||||
localhost:9200 with index twitter and type tweet it would be</p>
|
||||
|
||||
<pre>http://localhost:9200/twitter/tweet</pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">ElasticSearch</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<pre>http://localhost:9200/twitter/tweet</pre>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">ElasticSearch</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">_getESUrl</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">out</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'elasticsearch_url'</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="k">return</span> <span class="nx">out</span><span class="p">;</span>
|
||||
@ -37,7 +67,19 @@ localhost:9200 with index twitter and type tweet it would be</p>
|
||||
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">'jsonp'</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_wrapInTimeout</span><span class="p">(</span><span class="nx">jqxhr</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">schema</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</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="k">this</span><span class="p">.</span><span class="nx">_wrapInTimeout</span><span class="p">(</span><span class="nx">jqxhr</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">schema</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>only one top level key in ES = the type so we can ignore it</p>
|
||||
</div>
|
||||
<div 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>
|
||||
@ -55,35 +97,43 @@ localhost:9200 with index twitter and type tweet it would be</p>
|
||||
<span class="p">}</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="k">if</span> <span class="p">(</span><span class="nx">queryObj</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">out</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="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">_</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="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">q</span> <span class="o">!=</span> <span class="kc">undefined</span> <span class="o">&&</span> <span class="nx">out</span><span class="p">.</span><span class="nx">q</span><span class="p">.</span><span class="nx">trim</span><span class="p">()</span> <span class="o">===</span> <span class="s1">''</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="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">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">q</span> <span class="o">!==</span> <span class="kc">undefined</span> <span class="o">&&</span> <span class="nx">out</span><span class="p">.</span><span class="nx">q</span><span class="p">.</span><span class="nx">trim</span><span class="p">()</span> <span class="o">===</span> <span class="s1">''</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">delete</span> <span class="nx">out</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">out</span><span class="p">.</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">query</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">match_all</span><span class="o">:</span> <span class="p">{}</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">out</span><span class="p">.</span><span class="nx">query</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">query_string</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="nx">out</span><span class="p">.</span><span class="nx">q</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">delete</span> <span class="nx">out</span><span class="p">.</span><span class="nx">q</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>now do filters (note the <em>plural</em>)</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">filters</span> <span class="o">&&</span> <span class="nx">out</span><span class="p">.</span><span class="nx">filters</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<p>now do filters (note the <em>plural</em>)</p>
|
||||
</div>
|
||||
<div 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">filters</span> <span class="o">&&</span> <span class="nx">out</span><span class="p">.</span><span class="nx">filters</span><span class="p">.</span><span class="nx">length</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">out</span><span class="p">.</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">filter</span> <span class="o">=</span> <span class="p">{}</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">filter</span> <span class="o">=</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">out</span><span class="p">.</span><span class="nx">filter</span><span class="p">.</span><span class="nx">and</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">filter</span><span class="p">.</span><span class="nx">and</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">filter</span><span class="p">.</span><span class="nx">and</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">filter</span><span class="p">.</span><span class="nx">and</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">filters</span><span class="p">);</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">filters</span> <span class="o">!=</span> <span class="kc">undefined</span><span class="p">)</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">filters</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">)</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="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">out</span><span class="p">;</span>
|
||||
@ -97,12 +147,24 @@ 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">'jsonp'</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-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>TODO: fail case</p> </td> <td class="code"> <div class="highlight"><pre> <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">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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>TODO: fail case</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">jqxhr</span><span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</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">hits</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">hit</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="s1">'id'</span> <span class="k">in</span> <span class="nx">hit</span><span class="p">.</span><span class="nx">_source</span> <span class="o">&&</span> <span class="nx">hit</span><span class="p">.</span><span class="nx">_id</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'id'</span> <span class="k">in</span> <span class="nx">hit</span><span class="p">.</span><span class="nx">_source</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">hit</span><span class="p">.</span><span class="nx">_id</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">hit</span><span class="p">.</span><span class="nx">_source</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">hit</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="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">facets</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">hits</span><span class="p">.</span><span class="nx">facets</span> <span class="o">=</span> <span class="nx">results</span><span class="p">.</span><span class="nx">facets</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
@ -115,4 +177,9 @@ localhost:9200 with index twitter and type tweet it would be</p>
|
||||
|
||||
<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>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,30 +1,73 @@
|
||||
<!DOCTYPE html> <html> <head> <title>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 … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="base.html"> base.js </a> <a class="source" href="dataproxy.html"> dataproxy.js </a> <a class="source" href="elasticsearch.html"> elasticsearch.js </a> <a class="source" href="gdocs.html"> gdocs.js </a> <a class="source" href="localcsv.html"> localcsv.js </a> <a class="source" href="memory.html"> memory.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> 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">¶</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>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>gdocs.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>gdocs.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div 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="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>Google spreadsheet backend</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>Google spreadsheet backend</h2>
|
||||
<p>Connect to Google Docs spreadsheet.</p>
|
||||
|
||||
<p>Dataset must have a url attribute pointing to the Gdocs
|
||||
spreadsheet's JSON feed e.g.</p>
|
||||
|
||||
<pre>
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'https://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values?alt=json'
|
||||
},
|
||||
'gdocs'
|
||||
);
|
||||
</pre> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">GDoc</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">GDoc</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">getUrl</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">url</span> <span class="o">=</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'url'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">url</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'feeds/list'</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="k">return</span> <span class="nx">url</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-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>https://docs.google.com/spreadsheet/ccc?key=XXXX#gid=0</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=([^#?&+]+).*/</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>https://docs.google.com/spreadsheet/ccc?key=XXXX#gid=0</p>
|
||||
</div>
|
||||
<div 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=([^#?&+]+).*/</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="k">if</span> <span class="p">(</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</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>
|
||||
<span class="kd">var</span> <span class="nx">worksheet</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="s1">'https://spreadsheets.google.com/feeds/list/'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'/'</span> <span class="o">+</span> <span class="nx">worksheet</span> <span class="o">+</span> <span class="s1">'/public/values?alt=json'</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="s1">'https://spreadsheets.google.com/feeds/list/'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'/'</span> <span class="o">+</span> <span class="nx">worksheet</span> <span class="o">+</span> <span class="s1">'/public/values?alt=json'</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">out</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Failed to extract gdocs key from '</span> <span class="o">+</span> <span class="nx">url</span><span class="p">);</span>
|
||||
@ -44,58 +87,164 @@ var dataset = new recline.Model.Dataset({
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">reset</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">result</span><span class="p">.</span><span class="nx">field</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">};</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">);</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>cache data onto dataset (we have loaded whole gdoc it seems!)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">model</span><span class="p">.</span><span class="nx">_dataCache</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
||||
<span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<p>cache data onto dataset (we have loaded whole gdoc it seems!)</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">model</span><span class="p">.</span><span class="nx">_dataCache</span> <span class="o">=</span> <span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span> <span class="p">}</span>
|
||||
<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="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">dataset</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span> <span class="s1">'id'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>zip the fields with the data rows to produce js objs
|
||||
TODO: factor this out as a common method with other backends</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">objs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">_dataCache</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span> <span class="s1">'id'</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>zip the fields with the data rows to produce js objs
|
||||
TODO: factor this out as a common method with other backends</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">objs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">_dataCache</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">d</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">zip</span><span class="p">(</span><span class="nx">fields</span><span class="p">,</span> <span class="nx">d</span><span class="p">),</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">x</span><span class="p">[</span><span class="mi">0</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">x</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span> <span class="p">})</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">zip</span><span class="p">(</span><span class="nx">fields</span><span class="p">,</span> <span class="nx">d</span><span class="p">),</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">obj</span><span class="p">[</span><span class="nx">x</span><span class="p">[</span><span class="mi">0</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">x</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">obj</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="k">this</span><span class="p">.</span><span class="nx">_docsToQueryResult</span><span class="p">(</span><span class="nx">objs</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">gdocsToJavascript</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="cm">/*</span>
|
||||
<span class="cm"> :options: (optional) optional argument dictionary:</span>
|
||||
<span class="cm"> columnsToUse: list of columns to use (specified by field names)</span>
|
||||
<span class="cm"> colTypes: dictionary (with column names as keys) specifying types (e.g. range, percent for use in conversion).</span>
|
||||
<span class="cm"> :return: tabular data object (hash with keys: field and data).</span>
|
||||
|
||||
<span class="cm"> Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">gdocsToJavascript</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<p>:options: (optional) optional argument dictionary:
|
||||
columnsToUse: list of columns to use (specified by field names)
|
||||
colTypes: dictionary (with column names as keys) specifying types (e.g. range, percent for use in conversion).
|
||||
:return: tabular data object (hash with keys: field and data).</p>
|
||||
<p>Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">arguments</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">options</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">[</span><span class="mi">1</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="s1">'field'</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="s1">'data'</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>default is no special info on type of columns</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">colTypes</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</a>
|
||||
</div>
|
||||
<p>default is no special info on type of columns</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">colTypes</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">colTypes</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">colTypes</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">colTypes</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>either extract column headings from spreadsheet directly, or used supplied ones</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>columns set to subset supplied</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>set columns to use to be all available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-7'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-7'>#</a>
|
||||
</div>
|
||||
<p>either extract column headings from spreadsheet directly, or used supplied ones</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-8'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-8'>#</a>
|
||||
</div>
|
||||
<p>columns set to subset supplied</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">columnsToUse</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-9'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-9'>#</a>
|
||||
</div>
|
||||
<p>set columns to use to be all available</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">k</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'gsx'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">k</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">4</span><span class="p">)</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">col</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">k</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">col</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>converts non numberical values that should be numerical (22.3%[string] -> 0.223[float])</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">rep</span> <span class="o">=</span> <span class="sr">/^([\d\.\-]+)\%$/</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-10'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-10'>#</a>
|
||||
</div>
|
||||
<p>converts non numberical values that should be numerical (22.3%[string] -> 0.223[float])</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">rep</span> <span class="o">=</span> <span class="sr">/^([\d\.\-]+)\%$/</span><span class="p">;</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">gdocsSpreadsheet</span><span class="p">.</span><span class="nx">feed</span><span class="p">.</span><span class="nx">entry</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">row</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">k</span> <span class="k">in</span> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">col</span> <span class="o">=</span> <span class="nx">results</span><span class="p">.</span><span class="nx">field</span><span class="p">[</span><span class="nx">k</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">_keyname</span> <span class="o">=</span> <span class="s1">'gsx$'</span> <span class="o">+</span> <span class="nx">col</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">entry</span><span class="p">[</span><span class="nx">_keyname</span><span class="p">][</span><span class="s1">'$t'</span><span class="p">];</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>if labelled as % and value contains %, convert</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">colTypes</span><span class="p">[</span><span class="nx">col</span><span class="p">]</span> <span class="o">==</span> <span class="s1">'percent'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">entry</span><span class="p">[</span><span class="nx">_keyname</span><span class="p">][</span><span class="s1">'$t'</span><span class="p">];</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-11'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-11'>#</a>
|
||||
</div>
|
||||
<p>if labelled as % and value contains %, convert</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">colTypes</span><span class="p">[</span><span class="nx">col</span><span class="p">]</span> <span class="o">==</span> <span class="s1">'percent'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">rep</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">value2</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="kd">var</span> <span class="nx">value3</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">value2</span><span class="p">);</span>
|
||||
@ -113,4 +262,9 @@ TODO: factor this out as a common method with other backends</p> </t
|
||||
|
||||
<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>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,4 +1,26 @@
|
||||
<!DOCTYPE html> <html> <head> <title>localcsv.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="base.html"> base.js </a> <a class="source" href="dataproxy.html"> dataproxy.js </a> <a class="source" href="elasticsearch.html"> elasticsearch.js </a> <a class="source" href="gdocs.html"> gdocs.js </a> <a class="source" href="localcsv.html"> localcsv.js </a> <a class="source" href="memory.html"> memory.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> localcsv.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>localcsv.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>localcsv.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div 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="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>
|
||||
@ -7,13 +29,25 @@
|
||||
<span class="nx">id</span><span class="o">:</span> <span class="nx">file</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span>
|
||||
<span class="nx">file</span><span class="o">:</span> <span class="nx">file</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></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>TODO</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">reader</span><span class="p">.</span><span class="nx">onload</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">reader</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FileReader</span><span class="p">();</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<p>TODO</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">reader</span><span class="p">.</span><span class="nx">onload</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">dataset</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">csvToDataset</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">result</span><span class="p">);</span>
|
||||
<span class="nx">callback</span><span class="p">(</span><span class="nx">dataset</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">reader</span><span class="p">.</span><span class="nx">onerror</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">alert</span><span class="p">(</span><span class="s1">'Failed to load file. Code: '</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">error</span><span class="p">.</span><span class="nx">code</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">reader</span><span class="p">.</span><span class="nx">readAsText</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
@ -31,19 +65,39 @@
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dataset</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">createDataset</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="k">return</span> <span class="nx">dataset</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Converts a Comma Separated Values string into an array of arrays.
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>Converts a Comma Separated Values string into an array of arrays.
|
||||
Each line in the CSV becomes an array.</p>
|
||||
|
||||
<p>Empty fields are converted to nulls and non-quoted numbers are converted to integers or floats.</p>
|
||||
|
||||
<p>@return The CSV parsed as an array
|
||||
@type Array</p>
|
||||
|
||||
<p>@param {String} s The string to convert
|
||||
@param {Boolean} [trm=false] If set to True leading and trailing whitespace is stripped off of each non-quoted field as it is imported</p>
|
||||
|
||||
<p>Heavily based on uselesscode's JS CSV parser (MIT Licensed):
|
||||
thttp://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">trm</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>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>
|
||||
thttp://www.uselesscode.org/javascript/csv/</p>
|
||||
</div>
|
||||
<div 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">trm</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<p>Get rid of any trailing \n</p>
|
||||
</div>
|
||||
<div 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">cur</span> <span class="o">=</span> <span class="s1">''</span><span class="p">,</span> <span class="c1">// The character we are currently processing.</span>
|
||||
<span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
|
||||
@ -55,10 +109,46 @@ thttp://www.uselesscode.org/javascript/csv/</p> </td> <t
|
||||
<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-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</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">''</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-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>If field is empty set to null</p>
|
||||
</div>
|
||||
<div 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">''</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<p>If the field was not quoted and we are trimming fields, trim it</p>
|
||||
</div>
|
||||
<div 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-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</a>
|
||||
</div>
|
||||
<p>Convert unquoted numbers to their appropriate types</p>
|
||||
</div>
|
||||
<div 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>
|
||||
@ -68,25 +158,145 @@ thttp://www.uselesscode.org/javascript/csv/</p> </td> <t
|
||||
<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"><</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-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</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">&&</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">===</span> <span class="s1">','</span> <span class="o">||</span> <span class="nx">cur</span> <span class="o">===</span> <span class="s2">"\n"</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-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</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-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</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">"\n"</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-7'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-7'>#</a>
|
||||
</div>
|
||||
<p>If we are at a EOF or EOR</p>
|
||||
</div>
|
||||
<div 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">&&</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">===</span> <span class="s1">','</span> <span class="o">||</span> <span class="nx">cur</span> <span class="o">===</span> <span class="s2">"\n"</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-8'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-8'>#</a>
|
||||
</div>
|
||||
<p>Add the current field to the current row</p>
|
||||
</div>
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-9'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-9'>#</a>
|
||||
</div>
|
||||
<p>If this is EOR append row to output and flush row</p>
|
||||
</div>
|
||||
<div 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">"\n"</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-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</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">''</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-10'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-10'>#</a>
|
||||
</div>
|
||||
<p>Flush the field buffer</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">''</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-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>If it's not a ", 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="s1">'"'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-11'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-11'>#</a>
|
||||
</div>
|
||||
<p>If it's not a ", add it to the field buffer</p>
|
||||
</div>
|
||||
<div 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="s1">'"'</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-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-12'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-12'>#</a>
|
||||
</div>
|
||||
<p>We are not in a quote, start a quote</p>
|
||||
</div>
|
||||
<div 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-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Next char is ", this is an escaped "</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="s1">'"'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">field</span> <span class="o">+=</span> <span class="s1">'"'</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>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-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-13'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-13'>#</a>
|
||||
</div>
|
||||
<p>Next char is ", this is an escaped "</p>
|
||||
</div>
|
||||
<div 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="s1">'"'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">field</span> <span class="o">+=</span> <span class="s1">'"'</span><span class="p">;</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-14'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-14'>#</a>
|
||||
</div>
|
||||
<p>Skip the next char</p>
|
||||
</div>
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-15'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-15'>#</a>
|
||||
</div>
|
||||
<p>It's not escaping, so end quote</p>
|
||||
</div>
|
||||
<div 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-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-16'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-16'>#</a>
|
||||
</div>
|
||||
<p>Add the last field</p>
|
||||
</div>
|
||||
<div 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>
|
||||
|
||||
@ -94,10 +304,34 @@ thttp://www.uselesscode.org/javascript/csv/</p> </td> <t
|
||||
<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-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-17'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-17'>#</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$|,|"|\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-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</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>
|
||||
it needs to be quoted in CSV output</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">rxNeedsQuoting</span> <span class="o">=</span> <span class="sr">/^\s|\s$|,|"|\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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-18'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-18'>#</a>
|
||||
</div>
|
||||
<p>Fx 3.1 has a native trim function, it's about 10x faster, use it if it exists</p>
|
||||
</div>
|
||||
<div 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>
|
||||
@ -109,12 +343,41 @@ 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">"\n"</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>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-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</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">"\n"</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-19'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-19'>#</a>
|
||||
</div>
|
||||
<p>Does not end with \n, just return string</p>
|
||||
</div>
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-20'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-20'>#</a>
|
||||
</div>
|
||||
<p>Remove the \n</p>
|
||||
</div>
|
||||
<div 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="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>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,19 +1,51 @@
|
||||
<!DOCTYPE html> <html> <head> <title>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 … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="base.html"> base.js </a> <a class="source" href="dataproxy.html"> dataproxy.js </a> <a class="source" href="elasticsearch.html"> elasticsearch.js </a> <a class="source" href="gdocs.html"> gdocs.js </a> <a class="source" href="localcsv.html"> localcsv.js </a> <a class="source" href="memory.html"> memory.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> 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">¶</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>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>memory.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>memory.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div 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="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>createDataset</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>createDataset</h2>
|
||||
<p>Convenience function to create a simple 'in-memory' dataset in one step.</p>
|
||||
|
||||
<p>@param data: list of hashes for each document/row in the data ({key:
|
||||
value, key: value})
|
||||
@param fields: (optional) list of field hashes (each hash defining a hash
|
||||
as per recline.Model.Field). If fields not specified they will be taken
|
||||
from the data.
|
||||
@param metadata: (optional) dataset metadata - see recline.Model.Dataset.
|
||||
If not defined (or id not provided) id will be autogenerated.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">createDataset</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="nx">metadata</span><span class="p">)</span> <span class="p">{</span>
|
||||
If not defined (or id not provided) id will be autogenerated.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">createDataset</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="nx">metadata</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">metadata</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">metadata</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">metadata</span> <span class="o">=</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">metadata</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">metadata</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nb">String</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">100000000</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span>
|
||||
@ -36,17 +68,22 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<span class="kd">var</span> <span class="nx">dataset</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">Dataset</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">id</span><span class="p">},</span> <span class="s1">'memory'</span><span class="p">);</span>
|
||||
<span class="nx">dataset</span><span class="p">.</span><span class="nx">fetch</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">dataset</span><span class="p">;</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>Memory Backend - uses in-memory data</h2>
|
||||
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<h2>Memory Backend - uses in-memory data</h2>
|
||||
<p>To use it you should provide in your constructor data:</p>
|
||||
|
||||
<ul>
|
||||
<li>metadata (including fields array)</li>
|
||||
<li>documents: list of hashes, each hash being one doc. A doc <em>must</em> have an id attribute which is unique.</li>
|
||||
</ul>
|
||||
|
||||
<p>Example:</p>
|
||||
|
||||
<p><pre>
|
||||
// Backend setup
|
||||
var backend = recline.Backend.Memory();
|
||||
@ -65,7 +102,10 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
var dataset = Dataset({id: 'my-id'}, 'memory');
|
||||
dataset.fetch();
|
||||
etc ...
|
||||
</pre></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Memory</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
</pre></p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Memory</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Base</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="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">datasets</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="p">},</span>
|
||||
@ -74,8 +114,8 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<span class="p">},</span>
|
||||
<span class="nx">sync</span><span class="o">:</span> <span class="kd">function</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="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="k">if</span> <span class="p">(</span><span class="nx">method</span> <span class="o">===</span> <span class="s2">"read"</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="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">==</span> <span class="s1">'Dataset'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">rawDataset</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">datasets</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">];</span>
|
||||
<span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">rawDataset</span><span class="p">.</span><span class="nx">metadata</span><span class="p">);</span>
|
||||
@ -85,7 +125,6 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<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="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">method</span> <span class="o">===</span> <span class="s1">'update'</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="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">==</span> <span class="s1">'Document'</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">datasets</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">id</span><span class="p">].</span><span class="nx">documents</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">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">model</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -96,7 +135,6 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<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="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">method</span> <span class="o">===</span> <span class="s1">'delete'</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="k">if</span> <span class="p">(</span><span class="nx">model</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">==</span> <span class="s1">'Document'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">rawDataset</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">datasets</span><span class="p">[</span><span class="nx">model</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">id</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">rawDataset</span><span class="p">.</span><span class="nx">documents</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>
|
||||
@ -121,7 +159,19 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<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></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</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="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<p>not complete sorting!</p>
|
||||
</div>
|
||||
<div 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">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>
|
||||
<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>
|
||||
@ -145,7 +195,19 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<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="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-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</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">documents</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>faceting</p>
|
||||
</div>
|
||||
<div 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">documents</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>
|
||||
@ -162,7 +224,19 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<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-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<p>want descending order</p>
|
||||
</div>
|
||||
<div 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>
|
||||
@ -173,4 +247,9 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
|
||||
<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>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
190
docs/backend/pycco.css
Normal file
190
docs/backend/pycco.css
Normal file
@ -0,0 +1,190 @@
|
||||
/*--------------------- Layout and Typography ----------------------------*/
|
||||
body {
|
||||
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #252519;
|
||||
margin: 0; padding: 0;
|
||||
background: #f5f5ff;
|
||||
}
|
||||
a {
|
||||
color: #261a3b;
|
||||
}
|
||||
a:visited {
|
||||
color: #261a3b;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 40px 0 15px 0;
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
}
|
||||
#container {
|
||||
background: white;
|
||||
}
|
||||
#container, div.section {
|
||||
position: relative;
|
||||
}
|
||||
#background {
|
||||
position: absolute;
|
||||
top: 0; left: 580px; right: 0; bottom: 0;
|
||||
background: #f5f5ff;
|
||||
border-left: 1px solid #e5e5ee;
|
||||
z-index: 0;
|
||||
}
|
||||
#jump_to, #jump_page {
|
||||
background: white;
|
||||
-webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
|
||||
-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
|
||||
font: 10px Arial;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
#jump_to, #jump_wrapper {
|
||||
position: fixed;
|
||||
right: 0; top: 0;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#jump_wrapper {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
#jump_to:hover #jump_wrapper {
|
||||
display: block;
|
||||
}
|
||||
#jump_page {
|
||||
padding: 5px 0 3px;
|
||||
margin: 0 0 25px 25px;
|
||||
}
|
||||
#jump_page .source {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#jump_page .source:hover {
|
||||
background: #f5f5ff;
|
||||
}
|
||||
#jump_page .source:first-child {
|
||||
}
|
||||
div.docs {
|
||||
float: left;
|
||||
max-width: 500px;
|
||||
min-width: 500px;
|
||||
min-height: 5px;
|
||||
padding: 10px 25px 1px 50px;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
.docs pre {
|
||||
margin: 15px 0 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.docs p tt, .docs p code {
|
||||
background: #f8f8ff;
|
||||
border: 1px solid #dedede;
|
||||
font-size: 12px;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
.octowrap {
|
||||
position: relative;
|
||||
}
|
||||
.octothorpe {
|
||||
font: 12px Arial;
|
||||
text-decoration: none;
|
||||
color: #454545;
|
||||
position: absolute;
|
||||
top: 3px; left: -20px;
|
||||
padding: 1px 2px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
div.docs:hover .octothorpe {
|
||||
opacity: 1;
|
||||
}
|
||||
div.code {
|
||||
margin-left: 580px;
|
||||
padding: 14px 15px 16px 50px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.code pre, .docs p code {
|
||||
font-size: 12px;
|
||||
}
|
||||
pre, tt, code {
|
||||
line-height: 18px;
|
||||
font-family: Monaco, Consolas, "Lucida Console", monospace;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
div.clearall {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------- Syntax Highlighting -----------------------------*/
|
||||
td.linenos { background-color: #f0f0f0; padding-right: 10px; }
|
||||
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
|
||||
body .hll { background-color: #ffffcc }
|
||||
body .c { color: #408080; font-style: italic } /* Comment */
|
||||
body .err { border: 1px solid #FF0000 } /* Error */
|
||||
body .k { color: #954121 } /* Keyword */
|
||||
body .o { color: #666666 } /* Operator */
|
||||
body .cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
||||
body .cp { color: #BC7A00 } /* Comment.Preproc */
|
||||
body .c1 { color: #408080; font-style: italic } /* Comment.Single */
|
||||
body .cs { color: #408080; font-style: italic } /* Comment.Special */
|
||||
body .gd { color: #A00000 } /* Generic.Deleted */
|
||||
body .ge { font-style: italic } /* Generic.Emph */
|
||||
body .gr { color: #FF0000 } /* Generic.Error */
|
||||
body .gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||
body .gi { color: #00A000 } /* Generic.Inserted */
|
||||
body .go { color: #808080 } /* Generic.Output */
|
||||
body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
||||
body .gs { font-weight: bold } /* Generic.Strong */
|
||||
body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||
body .gt { color: #0040D0 } /* Generic.Traceback */
|
||||
body .kc { color: #954121 } /* Keyword.Constant */
|
||||
body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */
|
||||
body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */
|
||||
body .kp { color: #954121 } /* Keyword.Pseudo */
|
||||
body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */
|
||||
body .kt { color: #B00040 } /* Keyword.Type */
|
||||
body .m { color: #666666 } /* Literal.Number */
|
||||
body .s { color: #219161 } /* Literal.String */
|
||||
body .na { color: #7D9029 } /* Name.Attribute */
|
||||
body .nb { color: #954121 } /* Name.Builtin */
|
||||
body .nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
||||
body .no { color: #880000 } /* Name.Constant */
|
||||
body .nd { color: #AA22FF } /* Name.Decorator */
|
||||
body .ni { color: #999999; font-weight: bold } /* Name.Entity */
|
||||
body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
||||
body .nf { color: #0000FF } /* Name.Function */
|
||||
body .nl { color: #A0A000 } /* Name.Label */
|
||||
body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
||||
body .nt { color: #954121; font-weight: bold } /* Name.Tag */
|
||||
body .nv { color: #19469D } /* Name.Variable */
|
||||
body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
||||
body .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
body .mf { color: #666666 } /* Literal.Number.Float */
|
||||
body .mh { color: #666666 } /* Literal.Number.Hex */
|
||||
body .mi { color: #666666 } /* Literal.Number.Integer */
|
||||
body .mo { color: #666666 } /* Literal.Number.Oct */
|
||||
body .sb { color: #219161 } /* Literal.String.Backtick */
|
||||
body .sc { color: #219161 } /* Literal.String.Char */
|
||||
body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */
|
||||
body .s2 { color: #219161 } /* Literal.String.Double */
|
||||
body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
||||
body .sh { color: #219161 } /* Literal.String.Heredoc */
|
||||
body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
||||
body .sx { color: #954121 } /* Literal.String.Other */
|
||||
body .sr { color: #BB6688 } /* Literal.String.Regex */
|
||||
body .s1 { color: #219161 } /* Literal.String.Single */
|
||||
body .ss { color: #19469D } /* Literal.String.Symbol */
|
||||
body .bp { color: #954121 } /* Name.Builtin.Pseudo */
|
||||
body .vc { color: #19469D } /* Name.Variable.Class */
|
||||
body .vg { color: #19469D } /* Name.Variable.Global */
|
||||
body .vi { color: #19469D } /* Name.Variable.Instance */
|
||||
body .il { color: #666666 } /* Literal.Number.Integer.Long */
|
||||
455
docs/model.html
455
docs/model.html
@ -1,31 +1,69 @@
|
||||
<!DOCTYPE html> <html> <head> <title>model.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> model.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <h1>Recline Backbone Models</h1> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>model.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>model.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
<h1>Recline Backbone Models</h1>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2><a id="dataset">A Dataset model</a></h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2><a id="dataset">A Dataset model</a></h2>
|
||||
<p>A model has the following (non-Backbone) attributes:</p>
|
||||
|
||||
<p>@property {FieldList} fields: (aka columns) is a <code>FieldList</code> listing all the
|
||||
fields on this Dataset (this can be set explicitly, or, will be set by
|
||||
Dataset.fetch() or Dataset.query()</p>
|
||||
|
||||
<p>@property {DocumentList} currentDocuments: a <code>DocumentList</code> containing the
|
||||
Documents we have currently loaded for viewing (updated by calling query
|
||||
method)</p>
|
||||
|
||||
<p>@property {number} docCount: total number of documents in this dataset</p>
|
||||
|
||||
<p>@property {Backend} backend: the Backend (instance) for this Dataset</p>
|
||||
|
||||
<p>@property {Query} queryState: <code>Query</code> object which stores current
|
||||
queryState. queryState may be edited by other components (e.g. a query
|
||||
editor view) changes will trigger a Dataset query.</p>
|
||||
|
||||
<p>@property {FacetList} facets: FacetList object containing all current
|
||||
Facets.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Dataset'</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h3>initialize</h3>
|
||||
|
||||
<p>Sets up instance properties (see above)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">backend</span><span class="p">)</span> <span class="p">{</span>
|
||||
Facets.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Dataset</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Dataset'</span><span class="p">,</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<h3>initialize</h3>
|
||||
<p>Sets up instance properties (see above)</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">,</span> <span class="nx">backend</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'query'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">backend</span> <span class="o">=</span> <span class="nx">backend</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">backend</span> <span class="o">&&</span> <span class="nx">backend</span><span class="p">.</span><span class="nx">constructor</span> <span class="o">==</span> <span class="nb">String</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -38,15 +76,24 @@ Facets.</p> </td> <td class="code"> <div c
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Query</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">query</span><span class="p">);</span>
|
||||
<span class="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">'facet:add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">query</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <h3>query</h3>
|
||||
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<h3>query</h3>
|
||||
<p>AJAX method with promise API to get documents from the backend.</p>
|
||||
|
||||
<p>It will query based on current query state (given by this.queryState)
|
||||
updated by queryObj (if provided).</p>
|
||||
|
||||
<p>Resulting DocumentList are used to reset this.currentDocuments and are
|
||||
also returned.</p> </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>
|
||||
also returned.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">query</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'query:start'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">actualQuery</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_prepareQuery</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">);</span>
|
||||
@ -91,16 +138,38 @@ also returned.</p> </td> <td class="code">
|
||||
<span class="nx">data</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h2><a id="document">A Document (aka Row)</a></h2>
|
||||
|
||||
<p>A single entry or row in the dataset</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<h2><a id="document">A Document (aka Row)</a></h2>
|
||||
<p>A single entry or row in the dataset</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Document</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'Document'</span><span class="p">,</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'getFieldValue'</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h3>getFieldValue</h3>
|
||||
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<h3>getFieldValue</h3>
|
||||
<p>For the provided Field get the corresponding rendered computed data value
|
||||
for this document.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getFieldValue</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
for this document.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">getFieldValue</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">val</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">deriver</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="nx">field</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
@ -110,80 +179,150 @@ for this document.</p> </td> <td class="code">
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <h2>A Backbone collection of Documents</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</a>
|
||||
</div>
|
||||
<h2>A Backbone collection of Documents</h2>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DocumentList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">__type__</span><span class="o">:</span> <span class="s1">'DocumentList'</span><span class="p">,</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Document</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2><a id="field">A Field (aka Column) on a Dataset</a></h2>
|
||||
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-7'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-7'>#</a>
|
||||
</div>
|
||||
<h2><a id="field">A Field (aka Column) on a Dataset</a></h2>
|
||||
<p>Following (Backbone) attributes as standard:</p>
|
||||
|
||||
<ul>
|
||||
<li>id: a unique identifer for this field- usually this should match the key in the documents hash</li>
|
||||
<li>label: (optional: defaults to id) the visible label used for this field</li>
|
||||
<li>type: (optional: defaults to string) the type of the data in this field. Should be a string as per type names defined by ElasticSearch - see Types list on <a href="http://www.elasticsearch.org/guide/reference/mapping/">http://www.elasticsearch.org/guide/reference/mapping/</a></li>
|
||||
<li>format: (optional) used to indicate how the data should be formatted. For example:
|
||||
<ul><li>type=date, format=yyyy-mm-dd</li>
|
||||
<li>format: (optional) used to indicate how the data should be formatted. For example:</li>
|
||||
<li>type=date, format=yyyy-mm-dd</li>
|
||||
<li>type=float, format=percentage</li>
|
||||
<li>type=float, format='###,###.##'</li></ul></li>
|
||||
<li>type=float, format='###,###.##'</li>
|
||||
<li>is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).</li>
|
||||
</ul>
|
||||
|
||||
<p>Following additional instance properties:</p>
|
||||
|
||||
<p>@property {Function} renderer: a function to render the data for this field.
|
||||
Signature: function(value, field, doc) where value is the value of this
|
||||
cell, field is corresponding field object and document is the document
|
||||
object. Note that implementing functions can ignore arguments (e.g.
|
||||
function(value) would be a valid formatter function).</p>
|
||||
|
||||
<p>@property {Function} deriver: a function to derive/compute the value of data
|
||||
in this field as a function of this field's value (if any) and the current
|
||||
document, its signature and behaviour is the same as for renderer. Use of
|
||||
this function allows you to define an entirely new value for data in this
|
||||
field. This provides support for a) 'derived/computed' fields: i.e. fields
|
||||
whose data are functions of the data in other fields b) transforming the
|
||||
value of this field prior to rendering.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <h3>defaults - define default values</h3> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
value of this field prior to rendering.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Field</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-8'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-8'>#</a>
|
||||
</div>
|
||||
<h3>defaults - define default values</h3>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">,</span>
|
||||
<span class="nx">format</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">is_derived</span><span class="o">:</span> <span class="kc">false</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <h3>initialize</h3>
|
||||
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-9'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-9'>#</a>
|
||||
</div>
|
||||
<h3>initialize</h3>
|
||||
<p>@param {Object} data: standard Backbone model attributes</p>
|
||||
|
||||
<p>@param {Object} options: renderer and/or deriver functions.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>if a hash not passed in the first argument throw error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">'0'</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<p>@param {Object} options: renderer and/or deriver functions.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-10'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-10'>#</a>
|
||||
</div>
|
||||
<p>if a hash not passed in the first argument throw error</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="s1">'0'</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'Looks like you did not pass a proper hash with id to Field constructor'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">label</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">label</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">label</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">renderer</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">deriver</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">deriver</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">renderer</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">renderer</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">defaultRenderers</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">'type'</span><span class="p">)];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">defaultRenderers</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">object</span><span class="o">:</span> <span class="kd">function</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="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s1">'float'</span><span class="o">:</span> <span class="kd">function</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="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">format</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'format'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s1">'percentage'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">val</span> <span class="o">+</span> <span class="s1">'%'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">FieldList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Field</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h2><a id="query">Query</a></h2>
|
||||
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-11'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-11'>#</a>
|
||||
</div>
|
||||
<h2><a id="query">Query</a></h2>
|
||||
<p>Query instances encapsulate a query to the backend (see <a
|
||||
href="backend/base.html">query method on backend</a>). Useful both
|
||||
for creating queries and for storing and manipulating query state -
|
||||
e.g. from a query editor).</p>
|
||||
|
||||
<p><strong>Query Structure and format</strong></p>
|
||||
|
||||
<p>Query structure should follow that of <a href="http://www.elasticsearch.org/guide/reference/api/search/">ElasticSearch query
|
||||
language</a>.</p>
|
||||
|
||||
<p><strong>NB: It is up to specific backends how to implement and support this query
|
||||
structure. Different backends might choose to implement things differently
|
||||
or not support certain features. Please check your backend for details.</strong></p>
|
||||
|
||||
<p>Query object has the following key attributes:</p>
|
||||
|
||||
<ul>
|
||||
<li>size (=limit): number of results to return</li>
|
||||
<li>from (=offset): offset into result set - http://www.elasticsearch.org/guide/reference/api/search/from-size.html</li>
|
||||
@ -191,25 +330,26 @@ or not support certain features. Please check your backend for details.</strong>
|
||||
<li>query: Query in ES Query DSL <a href="http://www.elasticsearch.org/guide/reference/api/search/query.html">http://www.elasticsearch.org/guide/reference/api/search/query.html</a></li>
|
||||
<li>filter: See filters and <a href="http://www.elasticsearch.org/guide/reference/query-dsl/filtered-query.html">Filtered Query</a></li>
|
||||
<li>fields: set of fields to return - http://www.elasticsearch.org/guide/reference/api/search/fields.html</li>
|
||||
<li>facets: TODO - see http://www.elasticsearch.org/guide/reference/api/search/facets/</li>
|
||||
<li>facets: specification of facets - see http://www.elasticsearch.org/guide/reference/api/search/facets/</li>
|
||||
</ul>
|
||||
|
||||
<p>Additions:</p>
|
||||
|
||||
<ul>
|
||||
<li><p>q: either straight text or a hash will map directly onto a <a href="http://www.elasticsearch.org/guide/reference/query-dsl/query-string-query.html">query_string
|
||||
query</a>
|
||||
in backend</p>
|
||||
|
||||
<ul><li>Of course this can be re-interpreted by different backends. E.g. some
|
||||
may just pass this straight through e.g. for an SQL backend this could be
|
||||
the full SQL query</li></ul></li>
|
||||
<li><p>filters: dict of ElasticSearch filters. These will be and-ed together for
|
||||
execution.</p></li>
|
||||
<li>
|
||||
<p>q: either straight text or a hash will map directly onto a <a href="http://www.elasticsearch.org/guide/reference/query-dsl/query-string-query.html">query_string
|
||||
query</a>
|
||||
in backend</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Of course this can be re-interpreted by different backends. E.g. some
|
||||
may just pass this straight through e.g. for an SQL backend this could be
|
||||
the full SQL query</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>filters: dict of ElasticSearch filters. These will be and-ed together for
|
||||
execution.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Examples</strong></p>
|
||||
|
||||
<pre>
|
||||
{
|
||||
q: 'quick brown fox',
|
||||
@ -217,40 +357,122 @@ execution.</p></li>
|
||||
{ term: { 'owner': 'jones' } }
|
||||
]
|
||||
}
|
||||
</pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Query</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Query</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span>
|
||||
<span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="mi">0</span>
|
||||
<span class="p">,</span> <span class="nx">facets</span><span class="o">:</span> <span class="p">{}</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p><a href="http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html</a>
|
||||
, filter: {}</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">,</span> <span class="nx">filters</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <h4>addTermFilter</h4>
|
||||
|
||||
<span class="nx">size</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
|
||||
<span class="nx">from</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
|
||||
<span class="nx">facets</span><span class="o">:</span> <span class="p">{},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-12'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-12'>#</a>
|
||||
</div>
|
||||
<p><a href="http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html</a>
|
||||
, filter: {}</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">filters</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-13'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-13'>#</a>
|
||||
</div>
|
||||
<h4>addTermFilter</h4>
|
||||
<p>Set (update or add) a terms filter to filters</p>
|
||||
|
||||
<p>See <a href="http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addTermFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<p>See <a href="http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html">http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html</a></p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">addTermFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">filter</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">term</span><span class="o">:</span> <span class="p">{}</span> <span class="p">};</span>
|
||||
<span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
|
||||
<span class="nx">filters</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>change does not seem to be triggered automatically</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-14'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-14'>#</a>
|
||||
</div>
|
||||
<p>change does not seem to be triggered automatically</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>adding a new blank filter and do not want to trigger a new query</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change:filters:new-blank'</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-15'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-15'>#</a>
|
||||
</div>
|
||||
<p>adding a new blank filter and do not want to trigger a new query</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change:filters:new-blank'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <h3>removeFilter</h3>
|
||||
|
||||
<p>Remove a filter from filters at index filterIndex</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filterIndex</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-16'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-16'>#</a>
|
||||
</div>
|
||||
<h3>removeFilter</h3>
|
||||
<p>Remove a filter from filters at index filterIndex</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">removeFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filterIndex</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">);</span>
|
||||
<span class="nx">filters</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">filterIndex</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <h3>addFacet</h3>
|
||||
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-17'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-17'>#</a>
|
||||
</div>
|
||||
<h3>addFacet</h3>
|
||||
<p>Add a Facet to this query</p>
|
||||
|
||||
<p>See <a href="http://www.elasticsearch.org/guide/reference/api/search/facets/">http://www.elasticsearch.org/guide/reference/api/search/facets/</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addFacet</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'facets'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>Assume id and fieldId should be the same (TODO: this need not be true if we want to add two different type of facets on same field)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">facets</span><span class="p">),</span> <span class="nx">fieldId</span><span class="p">))</span> <span class="p">{</span>
|
||||
<p>See <a href="http://www.elasticsearch.org/guide/reference/api/search/facets/">http://www.elasticsearch.org/guide/reference/api/search/facets/</a></p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">addFacet</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'facets'</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-18'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-18'>#</a>
|
||||
</div>
|
||||
<p>Assume id and fieldId should be the same (TODO: this need not be true if we want to add two different type of facets on same field)</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">facets</span><span class="p">),</span> <span class="nx">fieldId</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">return</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">facets</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
|
||||
@ -258,20 +480,36 @@ execution.</p></li>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">facets</span><span class="o">:</span> <span class="nx">facets</span><span class="p">},</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'facet:add'</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">addHistogramFacet</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'facets'</span><span class="p">);</span>
|
||||
<span class="nx">facets</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">date_histogram</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">field</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span>
|
||||
<span class="nx">interval</span><span class="o">:</span> <span class="s1">'day'</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">facets</span><span class="o">:</span> <span class="nx">facets</span><span class="p">},</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'facet:add'</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <h2><a id="facet">A Facet (Result)</a></h2>
|
||||
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-19'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-19'>#</a>
|
||||
</div>
|
||||
<h2><a id="facet">A Facet (Result)</a></h2>
|
||||
<p>Object to store Facet information, that is summary information (e.g. values
|
||||
and counts) about a field obtained by some faceting method on the
|
||||
backend.</p>
|
||||
|
||||
<p>Structure of a facet follows that of Facet results in ElasticSearch, see:
|
||||
<a href="http://www.elasticsearch.org/guide/reference/api/search/facets/">http://www.elasticsearch.org/guide/reference/api/search/facets/</a></p>
|
||||
|
||||
<p>Specifically the object structure of a facet looks like (there is one
|
||||
addition compared to ElasticSearch: the "id" field which corresponds to the
|
||||
key used to specify this facet in the facet query):</p>
|
||||
|
||||
<pre>
|
||||
{
|
||||
"id": "id-of-facet",
|
||||
@ -296,7 +534,10 @@ key used to specify this facet in the facet query):</p>
|
||||
}
|
||||
]
|
||||
}
|
||||
</pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Facet</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Facet</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">defaults</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">_type</span><span class="o">:</span> <span class="s1">'terms'</span><span class="p">,</span>
|
||||
@ -304,14 +545,42 @@ key used to specify this facet in the facet query):</p>
|
||||
<span class="nx">other</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
|
||||
<span class="nx">missing</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
|
||||
<span class="nx">terms</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <h2>A Collection/List of Facets</h2> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-20'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-20'>#</a>
|
||||
</div>
|
||||
<h2>A Collection/List of Facets</h2>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">Facet</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <h2>Backend registry</h2>
|
||||
|
||||
<p>Backends will register themselves by id into this registry</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-21'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-21'>#</a>
|
||||
</div>
|
||||
<h2>Backend registry</h2>
|
||||
<p>Backends will register themselves by id into this registry</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">backends</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">}(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">));</span>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
190
docs/pycco.css
Normal file
190
docs/pycco.css
Normal file
@ -0,0 +1,190 @@
|
||||
/*--------------------- Layout and Typography ----------------------------*/
|
||||
body {
|
||||
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #252519;
|
||||
margin: 0; padding: 0;
|
||||
background: #f5f5ff;
|
||||
}
|
||||
a {
|
||||
color: #261a3b;
|
||||
}
|
||||
a:visited {
|
||||
color: #261a3b;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 40px 0 15px 0;
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
}
|
||||
#container {
|
||||
background: white;
|
||||
}
|
||||
#container, div.section {
|
||||
position: relative;
|
||||
}
|
||||
#background {
|
||||
position: absolute;
|
||||
top: 0; left: 580px; right: 0; bottom: 0;
|
||||
background: #f5f5ff;
|
||||
border-left: 1px solid #e5e5ee;
|
||||
z-index: 0;
|
||||
}
|
||||
#jump_to, #jump_page {
|
||||
background: white;
|
||||
-webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
|
||||
-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
|
||||
font: 10px Arial;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
#jump_to, #jump_wrapper {
|
||||
position: fixed;
|
||||
right: 0; top: 0;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#jump_wrapper {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
#jump_to:hover #jump_wrapper {
|
||||
display: block;
|
||||
}
|
||||
#jump_page {
|
||||
padding: 5px 0 3px;
|
||||
margin: 0 0 25px 25px;
|
||||
}
|
||||
#jump_page .source {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#jump_page .source:hover {
|
||||
background: #f5f5ff;
|
||||
}
|
||||
#jump_page .source:first-child {
|
||||
}
|
||||
div.docs {
|
||||
float: left;
|
||||
max-width: 500px;
|
||||
min-width: 500px;
|
||||
min-height: 5px;
|
||||
padding: 10px 25px 1px 50px;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
.docs pre {
|
||||
margin: 15px 0 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.docs p tt, .docs p code {
|
||||
background: #f8f8ff;
|
||||
border: 1px solid #dedede;
|
||||
font-size: 12px;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
.octowrap {
|
||||
position: relative;
|
||||
}
|
||||
.octothorpe {
|
||||
font: 12px Arial;
|
||||
text-decoration: none;
|
||||
color: #454545;
|
||||
position: absolute;
|
||||
top: 3px; left: -20px;
|
||||
padding: 1px 2px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
div.docs:hover .octothorpe {
|
||||
opacity: 1;
|
||||
}
|
||||
div.code {
|
||||
margin-left: 580px;
|
||||
padding: 14px 15px 16px 50px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.code pre, .docs p code {
|
||||
font-size: 12px;
|
||||
}
|
||||
pre, tt, code {
|
||||
line-height: 18px;
|
||||
font-family: Monaco, Consolas, "Lucida Console", monospace;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
div.clearall {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------- Syntax Highlighting -----------------------------*/
|
||||
td.linenos { background-color: #f0f0f0; padding-right: 10px; }
|
||||
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
|
||||
body .hll { background-color: #ffffcc }
|
||||
body .c { color: #408080; font-style: italic } /* Comment */
|
||||
body .err { border: 1px solid #FF0000 } /* Error */
|
||||
body .k { color: #954121 } /* Keyword */
|
||||
body .o { color: #666666 } /* Operator */
|
||||
body .cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
||||
body .cp { color: #BC7A00 } /* Comment.Preproc */
|
||||
body .c1 { color: #408080; font-style: italic } /* Comment.Single */
|
||||
body .cs { color: #408080; font-style: italic } /* Comment.Special */
|
||||
body .gd { color: #A00000 } /* Generic.Deleted */
|
||||
body .ge { font-style: italic } /* Generic.Emph */
|
||||
body .gr { color: #FF0000 } /* Generic.Error */
|
||||
body .gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||
body .gi { color: #00A000 } /* Generic.Inserted */
|
||||
body .go { color: #808080 } /* Generic.Output */
|
||||
body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
||||
body .gs { font-weight: bold } /* Generic.Strong */
|
||||
body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||
body .gt { color: #0040D0 } /* Generic.Traceback */
|
||||
body .kc { color: #954121 } /* Keyword.Constant */
|
||||
body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */
|
||||
body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */
|
||||
body .kp { color: #954121 } /* Keyword.Pseudo */
|
||||
body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */
|
||||
body .kt { color: #B00040 } /* Keyword.Type */
|
||||
body .m { color: #666666 } /* Literal.Number */
|
||||
body .s { color: #219161 } /* Literal.String */
|
||||
body .na { color: #7D9029 } /* Name.Attribute */
|
||||
body .nb { color: #954121 } /* Name.Builtin */
|
||||
body .nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
||||
body .no { color: #880000 } /* Name.Constant */
|
||||
body .nd { color: #AA22FF } /* Name.Decorator */
|
||||
body .ni { color: #999999; font-weight: bold } /* Name.Entity */
|
||||
body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
||||
body .nf { color: #0000FF } /* Name.Function */
|
||||
body .nl { color: #A0A000 } /* Name.Label */
|
||||
body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
||||
body .nt { color: #954121; font-weight: bold } /* Name.Tag */
|
||||
body .nv { color: #19469D } /* Name.Variable */
|
||||
body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
||||
body .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
body .mf { color: #666666 } /* Literal.Number.Float */
|
||||
body .mh { color: #666666 } /* Literal.Number.Hex */
|
||||
body .mi { color: #666666 } /* Literal.Number.Integer */
|
||||
body .mo { color: #666666 } /* Literal.Number.Oct */
|
||||
body .sb { color: #219161 } /* Literal.String.Backtick */
|
||||
body .sc { color: #219161 } /* Literal.String.Char */
|
||||
body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */
|
||||
body .s2 { color: #219161 } /* Literal.String.Double */
|
||||
body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
||||
body .sh { color: #219161 } /* Literal.String.Heredoc */
|
||||
body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
||||
body .sx { color: #954121 } /* Literal.String.Other */
|
||||
body .sr { color: #BB6688 } /* Literal.String.Regex */
|
||||
body .s1 { color: #219161 } /* Literal.String.Single */
|
||||
body .ss { color: #19469D } /* Literal.String.Symbol */
|
||||
body .bp { color: #954121 } /* Name.Builtin.Pseudo */
|
||||
body .vc { color: #19469D } /* Name.Variable.Class */
|
||||
body .vg { color: #19469D } /* Name.Variable.Global */
|
||||
body .vi { color: #19469D } /* Name.Variable.Instance */
|
||||
body .il { color: #666666 } /* Literal.Number.Integer.Long */
|
||||
@ -1,25 +1,55 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view-flot-graph.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-flot-graph.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>view-flot-graph.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>view-flot-graph.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
<p>jshint multistr:true</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>Graph view for a Dataset using Flot graphing library.</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>Graph view for a Dataset using Flot graphing library.</h2>
|
||||
<p>Initialization arguments:</p>
|
||||
|
||||
<ul>
|
||||
<li>model: recline.Model.Dataset</li>
|
||||
<li><p>config: (optional) graph configuration hash of form:</p>
|
||||
|
||||
<li>
|
||||
<p>config: (optional) graph configuration hash of form:</p>
|
||||
<p>{
|
||||
group: {column name for x-axis},
|
||||
series: [{column name for series A}, {column name series B}, ... ],
|
||||
graphType: 'line'
|
||||
}</p></li>
|
||||
}</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>NB: should <em>not</em> provide an el argument to the view but must let the view
|
||||
generate the element itself (you can then append view.el to the DOM.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FlotGraph</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
generate the element itself (you can then append view.el to the DOM.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FlotGraph</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"data-graph-container"</span><span class="p">,</span>
|
||||
@ -79,16 +109,28 @@ generate the element itself (you can then append view.el to the DOM.</p>
|
||||
<span class="s1">'</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'change form select'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .editor-add'</span><span class="o">:</span> <span class="s1">'addSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-remove-series'</span><span class="o">:</span> <span class="s1">'removeSeries'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-toggle-help'</span><span class="o">:</span> <span class="s1">'toggleHelp'</span>
|
||||
<span class="s1">'change form select'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span><span class="p">,</span>
|
||||
<span class="s1">'click .editor-add'</span><span class="o">:</span> <span class="s1">'addSeries'</span><span class="p">,</span>
|
||||
<span class="s1">'click .action-remove-series'</span><span class="o">:</span> <span class="s1">'removeSeries'</span><span class="p">,</span>
|
||||
<span class="s1">'click .action-toggle-help'</span><span class="o">:</span> <span class="s1">'toggleHelp'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'redraw'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>we need the model.fields to render properly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'redraw'</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>we need the model.fields to render properly</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">);</span>
|
||||
@ -110,8 +152,32 @@ generate the element itself (you can then append view.el to the DOM.</p>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">htmls</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>now set a load of stuff up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$graph</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.panel.graph'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>for use later when adding additional series
|
||||
could be simpler just to have a common template!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series'</span><span class="p">).</span><span class="nx">clone</span><span class="p">();</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<p>now set a load of stuff up</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$graph</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.panel.graph'</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>for use later when adding additional series
|
||||
could be simpler just to have a common template!</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series'</span><span class="p">).</span><span class="nx">clone</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
@ -122,27 +188,71 @@ could be simpler just to have a common template!</p> </td>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">makeArray</span><span class="p">(</span><span class="nx">series</span><span class="p">)</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">series</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">makeArray</span><span class="p">(</span><span class="nx">series</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-group select'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</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">'.editor-type select'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>update navigation</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="nx">qs</span><span class="p">[</span><span class="s1">'graph'</span><span class="p">]</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</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">'.editor-type select'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<p>update navigation</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="nx">qs</span><span class="p">.</span><span class="nx">graph</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">);</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span><span class="p">(</span><span class="nx">qs</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>There appear to be issues generating a Flot graph if either:</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <ul>
|
||||
<li><p>The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with</p>
|
||||
|
||||
<p>Uncaught Invalid dimensions for plot, width = 0, height = 0</p></li>
|
||||
<li>There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value' </li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">areWeVisible</span> <span class="o">=</span> <span class="o">!</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">expr</span><span class="p">.</span><span class="nx">filters</span><span class="p">.</span><span class="nx">hidden</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
|
||||
<span class="k">if</span> <span class="p">((</span><span class="o">!</span><span class="nx">areWeVisible</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">return</span>
|
||||
<span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</a>
|
||||
</div>
|
||||
<p>There appear to be issues generating a Flot graph if either:</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-7'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-7'>#</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li>The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with</li>
|
||||
</ul>
|
||||
<p>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>
|
||||
</div>
|
||||
<div 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">currentDocuments</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">return</span><span class="p">;</span>
|
||||
<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">chartConfig</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">$</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="k">this</span><span class="p">.</span><span class="nx">setupTooltips</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>create this.plot and cache it
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupTooltips</span><span class="p">();</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-8'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-8'>#</a>
|
||||
</div>
|
||||
<p>create this.plot and cache it
|
||||
if (!this.plot) {
|
||||
this.plot = $.plot(this.$graph, series, options);
|
||||
} else {
|
||||
@ -151,39 +261,90 @@ could be simpler just to have a common template!</p> </td>
|
||||
this.plot.resize();
|
||||
this.plot.setupGrid();
|
||||
this.plot.draw();
|
||||
}</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>needs to be function as can depend on state</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></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>special tickformatter to show labels rather than numbers</p> </td> <td class="code"> <div class="highlight"><pre> <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">val</span><span class="p">)</span> <span class="p">{</span>
|
||||
}</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-9'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-9'>#</a>
|
||||
</div>
|
||||
<p>needs to be function as can depend on state</p>
|
||||
</div>
|
||||
<div 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></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-10'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-10'>#</a>
|
||||
</div>
|
||||
<p>special tickformatter to show labels rather than numbers</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <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">val</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">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">val</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">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">val</span><span class="p">].</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>if the value was in fact a number we want that not the </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">out</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'number'</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">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">val</span><span class="p">].</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-11'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-11'>#</a>
|
||||
</div>
|
||||
<p>if the value was in fact a number we want that not the </p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">out</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'number'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">out</span><span class="p">;</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-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>TODO: we should really use tickFormatter and 1 interval ticks if (and
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-12'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-12'>#</a>
|
||||
</div>
|
||||
<p>TODO: we should really use tickFormatter and 1 interval ticks if (and
|
||||
only if) x-axis values are non-numeric
|
||||
However, that is non-trivial to work out from a dataset (datasets may
|
||||
have no field type info). Thus at present we only do this for bars.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span>
|
||||
have no field type info). Thus at present we only do this for bars.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">options</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">series</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">show</span><span class="o">:</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">points</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">series</span><span class="o">:</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="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="p">,</span> <span class="s1">'lines-and-points'</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s1">'lines-and-points'</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">series</span><span class="o">:</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">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="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="p">,</span> <span class="nx">bars</span><span class="o">:</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">series</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">show</span><span class="o">:</span> <span class="kc">false</span><span class="p">},</span>
|
||||
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
|
||||
@ -203,7 +364,7 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
<span class="nx">max</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">0.5</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">return</span> <span class="nx">options</span><span class="p">[</span><span class="nx">typeId</span><span class="p">];</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
@ -230,7 +391,19 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s2">"#flot-tooltip"</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="kd">var</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></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>convert back from 'index' value on x-axis (e.g. in cases where non-number values)</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">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">x</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="kd">var</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></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-13'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-13'>#</a>
|
||||
</div>
|
||||
<p>convert back from 'index' value on x-axis (e.g. in cases where non-number values)</p>
|
||||
</div>
|
||||
<div 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">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="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">currentDocuments</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="nx">self</span><span class="p">.</span><span class="nx">chartConfig</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</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">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
|
||||
@ -264,7 +437,19 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">x</span> <span class="o">===</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</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">chartConfig</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">==</span> <span class="s1">'bars'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-14'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-14'>#</a>
|
||||
</div>
|
||||
<p>horizontal bar chart</p>
|
||||
</div>
|
||||
<div 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">chartConfig</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">==</span> <span class="s1">'bars'</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>
|
||||
@ -274,12 +459,22 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">series</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Public: Adds a new empty series select box to the editor.</p>
|
||||
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-15'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-15'>#</a>
|
||||
</div>
|
||||
<p>Public: Adds a new empty series select box to the editor.</p>
|
||||
<p>All but the first select box will have a remove button that allows them
|
||||
to be removed.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<p>Returns itself.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">addSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span><span class="p">.</span><span class="nx">clone</span><span class="p">(),</span>
|
||||
<span class="nx">label</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'label'</span><span class="p">),</span>
|
||||
@ -290,9 +485,20 @@ to be removed.</p>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">' [<a href="#remove" class="action-remove-series">Remove</a>]'</span><span class="p">);</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">64</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</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="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-16'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-16'>#</a>
|
||||
</div>
|
||||
<p>Public: Removes a series list item from the editor.</p>
|
||||
<p>Also updates the labels of the remaining series elements.</p>
|
||||
</div>
|
||||
<div 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>
|
||||
@ -308,13 +514,29 @@ to be removed.</p>
|
||||
|
||||
<span class="nx">toggleHelp</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-info'</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'editor-hide-info'</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Private: Resets the series property to reference the select elements.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_updateSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-17'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-17'>#</a>
|
||||
</div>
|
||||
<p>Private: Resets the series property to reference the select elements.</p>
|
||||
<p>Returns itself.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">_updateSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series select'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,13 +1,43 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view-grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view-grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>view-grid.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>view-grid.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
<p>jshint multistr:true</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>DataGrid</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>DataGrid</h2>
|
||||
<p>Provides a tabular view on a Dataset.</p>
|
||||
|
||||
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGrid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGrid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"recline-grid-container"</span><span class="p">,</span>
|
||||
|
||||
@ -23,11 +53,20 @@
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .column-header-menu'</span><span class="o">:</span> <span class="s1">'onColumnHeaderClick'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .row-header-menu'</span><span class="o">:</span> <span class="s1">'onRowHeaderClick'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .root-header-menu'</span><span class="o">:</span> <span class="s1">'onRootHeaderClick'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .data-table-menu li a'</span><span class="o">:</span> <span class="s1">'onMenuClick'</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
|
||||
<span class="s1">'click .column-header-menu'</span><span class="o">:</span> <span class="s1">'onColumnHeaderClick'</span><span class="p">,</span>
|
||||
<span class="s1">'click .row-header-menu'</span><span class="o">:</span> <span class="s1">'onRowHeaderClick'</span><span class="p">,</span>
|
||||
<span class="s1">'click .root-header-menu'</span><span class="o">:</span> <span class="s1">'onRootHeaderClick'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-menu li a'</span><span class="o">:</span> <span class="s1">'onMenuClick'</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
|
||||
showDialog: function(template, data) {
|
||||
if (!data) data = {};
|
||||
util.show('dialog');
|
||||
@ -36,8 +75,24 @@ showDialog: function(template, data) {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>======================================================
|
||||
Column and row menus</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onColumnHeaderClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
},</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<h6>################################################ <span id="column-and-row-menus" href="column-and-row-menus"></h6>
|
||||
<p>Column and row menus
|
||||
</span></p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">onColumnHeaderClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'.column-header'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
@ -58,31 +113,45 @@ Column and row menus</p> </td> <td class="code">
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">actions</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">bulkEdit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformColumnDialog</span><span class="p">(</span><span class="s1">'bulkEdit'</span><span class="p">,</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">})</span> <span class="p">},</span>
|
||||
<span class="nx">bulkEdit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformColumnDialog</span><span class="p">(</span><span class="s1">'bulkEdit'</span><span class="p">,</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">});</span> <span class="p">},</span>
|
||||
<span class="nx">facet</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFacet</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">facet_histogram</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addHistogramFacet</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">filter</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">'transform'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">sortAsc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'asc'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">sortDesc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'desc'</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">hideColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hideColumn</span><span class="p">()</span> <span class="p">},</span>
|
||||
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showColumn</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">},</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">'transform'</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">sortAsc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'asc'</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">sortDesc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'desc'</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">hideColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hideColumn</span><span class="p">();</span> <span class="p">},</span>
|
||||
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showColumn</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">deleteRow</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>important this is == as the currentRow will be string (as comes
|
||||
from DOM) while id may be int</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentRow</span>
|
||||
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>important this is == as the currentRow will be string (as comes
|
||||
from DOM) while id may be int</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">currentRow</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">destroy</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">doc</span><span class="p">);</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Row deleted successfully"</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Errorz! "</span> <span class="o">+</span> <span class="nx">err</span><span class="p">)</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Errorz! "</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">actions</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">'data-action'</span><span class="p">)]();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
@ -98,7 +167,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">observeExit</span><span class="p">(</span><span class="nx">$el</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">hide</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog'</span><span class="p">).</span><span class="nx">draggable</span><span class="p">({</span> <span class="nx">handle</span><span class="o">:</span> <span class="s1">'.dialog-header'</span><span class="p">,</span> <span class="nx">cursor</span><span class="o">:</span> <span class="s1">'move'</span> <span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
@ -112,7 +181,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">observeExit</span><span class="p">(</span><span class="nx">$el</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">hide</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog'</span><span class="p">).</span><span class="nx">draggable</span><span class="p">({</span> <span class="nx">handle</span><span class="o">:</span> <span class="s1">'.dialog-header'</span><span class="p">,</span> <span class="nx">cursor</span><span class="o">:</span> <span class="s1">'move'</span> <span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
@ -130,9 +199,21 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">without</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'column'</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>======================================================</p>
|
||||
|
||||
<h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<h6>################################################ <span id="####-templating" href="####-templating"></h6>
|
||||
<h4>Templating</h4>
|
||||
<p></span></p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <table class="recline-grid table-striped table-condensed" cellspacing="0"> \</span>
|
||||
<span class="s1"> <thead> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
@ -151,7 +232,8 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="s1"> <div class="btn-group column-header-menu"> \</span>
|
||||
<span class="s1"> <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \</span>
|
||||
<span class="s1"> <ul class="dropdown-menu data-table-menu pull-right"> \</span>
|
||||
<span class="s1"> <li><a data-action="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \</span>
|
||||
<span class="s1"> <li><a data-action="facet" href="JavaScript:void(0);">Term Facet</a></li> \</span>
|
||||
<span class="s1"> <li><a data-action="facet_histogram" href="JavaScript:void(0);">Date Histogram Facet</a></li> \</span>
|
||||
<span class="s1"> <li><a data-action="filter" href="JavaScript:void(0);">Text Filter</a></li> \</span>
|
||||
<span class="s1"> <li class="divider"></li> \</span>
|
||||
<span class="s1"> <li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \</span>
|
||||
@ -172,8 +254,20 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">modelData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span> <span class="p">)</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span> <span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">modelData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span> <span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</a>
|
||||
</div>
|
||||
<p>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">modelData</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -193,24 +287,32 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="p">});</span>
|
||||
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">0</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2>DataGridRow View for rendering an individual document.</h2>
|
||||
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-7'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-7'>#</a>
|
||||
</div>
|
||||
<h2>DataGridRow View for rendering an individual document.</h2>
|
||||
<p>Since we want this to update in place it is up to creator to provider the element to attach to.</p>
|
||||
|
||||
<p>In addition you <em>must</em> pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.</p>
|
||||
|
||||
<p>Example:</p>
|
||||
|
||||
<pre>
|
||||
var row = new DataGridRow({
|
||||
model: dataset-document,
|
||||
el: dom-element,
|
||||
fields: mydatasets.fields // a FieldList object
|
||||
});
|
||||
</pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGridRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
</pre>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataGridRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initData</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">initData</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
|
||||
@ -249,9 +351,9 @@ var row = new DataGridRow({
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">})</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -259,8 +361,21 @@ var row = new DataGridRow({
|
||||
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>===================
|
||||
Cell Editor methods</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-8'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-8'>#</a>
|
||||
</div>
|
||||
<h6>############# <span id="cell-editor-methods" href="cell-editor-methods"></h6>
|
||||
<p>Cell Editor methods
|
||||
</span></p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">editing</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-table-cell-editor-editor'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">editing</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-edit'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
@ -299,4 +414,9 @@ Cell Editor methods</p> </td> <td class="code">
|
||||
|
||||
<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>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
604
docs/view-map.html
Normal file
604
docs/view-map.html
Normal file
@ -0,0 +1,604 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>view-map.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>view-map.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
<p>jshint multistr:true</p>
|
||||
</div>
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>Map view for a Dataset using Leaflet mapping library.</h2>
|
||||
<p>This view allows to plot gereferenced documents 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>
|
||||
<p>Initialization arguments:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p>options: initial options. They must contain a model:</p>
|
||||
<p>{
|
||||
model: {recline.Model.Dataset}
|
||||
}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>config: (optional) map configuration hash (not yet used)</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Map</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s1">'div'</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'data-map-container'</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="editor"> \</span>
|
||||
<span class="s1"> <form class="form-stacked"> \</span>
|
||||
<span class="s1"> <div class="clearfix"> \</span>
|
||||
<span class="s1"> <div class="editor-field-type"> \</span>
|
||||
<span class="s1"> <label class="radio"> \</span>
|
||||
<span class="s1"> <input type="radio" id="editor-field-type-latlon" name="editor-field-type" value="latlon" checked="checked"/> \</span>
|
||||
<span class="s1"> Latitude / Longitude fields</label> \</span>
|
||||
<span class="s1"> <label class="radio"> \</span>
|
||||
<span class="s1"> <input type="radio" id="editor-field-type-geom" name="editor-field-type" value="geom" /> \</span>
|
||||
<span class="s1"> GeoJSON field</label> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-field-type-latlon"> \</span>
|
||||
<span class="s1"> <label>Latitude field</label> \</span>
|
||||
<span class="s1"> <div class="input editor-lat-field"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> <option value=""></option> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <label>Longitude field</label> \</span>
|
||||
<span class="s1"> <div class="input editor-lon-field"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> <option value=""></option> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-field-type-geom" style="display:none"> \</span>
|
||||
<span class="s1"> <label>Geometry field (GeoJSON)</label> \</span>
|
||||
<span class="s1"> <div class="input editor-geom-field"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> <option value=""></option> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons"> \</span>
|
||||
<span class="s1"> <button class="btn editor-update-map">Update</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <input type="hidden" class="editor-id" value="map-1" /> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"><div class="panel map"> \</span>
|
||||
<span class="s1"></div> \</span>
|
||||
<span class="s1">'</span><span class="p">,</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>These are the default field names that will be used if found.
|
||||
If not found, the user will need to define the fields via the editor.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">latitudeFieldNames</span><span class="o">:</span> <span class="p">[</span><span class="s1">'lat'</span><span class="p">,</span><span class="s1">'latitude'</span><span class="p">],</span>
|
||||
<span class="nx">longitudeFieldNames</span><span class="o">:</span> <span class="p">[</span><span class="s1">'lon'</span><span class="p">,</span><span class="s1">'longitude'</span><span class="p">],</span>
|
||||
<span class="nx">geometryFieldNames</span><span class="o">:</span> <span class="p">[</span><span class="s1">'geom'</span><span class="p">,</span><span class="s1">'the_geom'</span><span class="p">,</span><span class="s1">'geometry'</span><span class="p">,</span><span class="s1">'spatial'</span><span class="p">,</span><span class="s1">'location'</span><span class="p">],</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<p>Define here events for UI elements</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .editor-update-map'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span><span class="p">,</span>
|
||||
<span class="s1">'change .editor-field-type'</span><span class="o">:</span> <span class="s1">'onFieldTypeChange'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">,</span> <span class="nx">config</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>Listen to changes in the fields</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</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">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="kd">function</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="nx">self</span><span class="p">.</span><span class="nx">render</span><span class="p">()</span>
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<p>Listen to changes in the documents</p>
|
||||
</div>
|
||||
<div 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">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</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="s1">'add'</span><span class="p">,</span><span class="nx">doc</span><span class="p">)});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</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="s1">'remove'</span><span class="p">,</span><span class="nx">doc</span><span class="p">)});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="kd">function</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="s1">'reset'</span><span class="p">)});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</a>
|
||||
</div>
|
||||
<p>If the div was hidden, Leaflet needs to recalculate some sizes
|
||||
to display properly</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'view:show'</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span>
|
||||
<span class="nx">self</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="p">});</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">mapReady</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">render</span><span class="p">();</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-7'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-7'>#</a>
|
||||
</div>
|
||||
<p>Public: Adds the necessary elements to the page.</p>
|
||||
<p>Also sets up the editor fields and the map if necessary.</p>
|
||||
</div>
|
||||
<div 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>
|
||||
|
||||
<span class="nx">htmls</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span>
|
||||
<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">'.panel.map'</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="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">length</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">_geomFieldName</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">'editor-geom-field'</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_geomFieldName</span><span class="p">);</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#editor-field-type-geom'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">,</span><span class="s1">'checked'</span><span class="p">).</span><span class="nx">change</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">_selectOption</span><span class="p">(</span><span class="s1">'editor-lon-field'</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_lonFieldName</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">'editor-lat-field'</span><span class="p">,</span><span class="k">this</span><span class="p">.</span><span class="nx">_latFieldName</span><span class="p">);</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'#editor-field-type-latlon'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">,</span><span class="s1">'checked'</span><span class="p">).</span><span class="nx">change</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">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'query:done'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="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="nx">self</span><span class="p">.</span><span class="nx">redraw</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-8'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-8'>#</a>
|
||||
</div>
|
||||
<p>Public: Redraws the features on the map according to the action provided</p>
|
||||
<p>Actions can be:</p>
|
||||
<ul>
|
||||
<li>reset: Clear all features</li>
|
||||
<li>add: Add one or n features (documents)</li>
|
||||
<li>remove: Remove one or n features (documents)</li>
|
||||
<li>refresh: Clear existing features and add all current documents</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div 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">'refresh'</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="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">mapReady</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">'reset'</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>
|
||||
<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">'add'</span> <span class="o">&&</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">'remove'</span> <span class="o">&&</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> <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">'refresh'</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>
|
||||
<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">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-9'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-9'>#</a>
|
||||
</div>
|
||||
<p>UI Event handlers</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-10'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-10'>#</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>
|
||||
</div>
|
||||
<div 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>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'#editor-field-type-geom'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'checked'</span><span class="p">)){</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_geomFieldName</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-geom-field > select > option:selected'</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">_latFieldName</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_lonFieldName</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>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_geomFieldName</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">_latFieldName</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-lat-field > select > option:selected'</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">_lonFieldName</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-lon-field > select > option:selected'</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">geomReady</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_geomFieldName</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_latFieldName</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_lonFieldName</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="kc">false</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-11'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-11'>#</a>
|
||||
</div>
|
||||
<p>Public: Shows the relevant select lists depending on the location field
|
||||
type selected.</p>
|
||||
</div>
|
||||
<div 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">'geom'</span><span class="p">){</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-field-type-geom'</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-field-type-latlon'</span><span class="p">).</span><span class="nx">hide</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="s1">'.editor-field-type-geom'</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-field-type-latlon'</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-12'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-12'>#</a>
|
||||
</div>
|
||||
<p>Private: Add one or n features to the map</p>
|
||||
<p>For each document passed, a GeoJSON geometry will be extracted and added
|
||||
to the features layer. If an exception is thrown, the process will be
|
||||
stopped and an error notification shown.</p>
|
||||
<p>Each feature will have a popup associated with all the document fields.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">_add</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="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="p">(</span><span class="nx">doc</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">))</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">[</span><span class="nx">doc</span><span class="p">];</span>
|
||||
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">){</span>
|
||||
<span class="kd">var</span> <span class="nx">feature</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">_getGeometryFromDocument</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="nx">feature</span> <span class="k">instanceof</span> <span class="nb">Object</span><span class="p">){</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-13'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-13'>#</a>
|
||||
</div>
|
||||
<p>Build popup contents
|
||||
TODO: mustache?</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">html</span> <span class="o">=</span> <span class="s1">''</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">){</span>
|
||||
<span class="nx">html</span> <span class="o">+=</span> <span class="s1">'<div><strong>'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'</strong>: '</span><span class="o">+</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">+</span> <span class="s1">'</div>'</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">html</span><span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-14'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-14'>#</a>
|
||||
</div>
|
||||
<p>Add a reference to the model id, which will allow us to
|
||||
link this Leaflet layer to a Recline doc</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><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>
|
||||
|
||||
<span class="k">try</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">addGeoJSON</span><span class="p">(</span><span class="nx">feature</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">except</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">'Wrong geometry value'</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">except</span><span class="p">.</span><span class="nx">message</span><span class="p">)</span> <span class="nx">msg</span> <span class="o">+=</span> <span class="s1">' ('</span> <span class="o">+</span> <span class="nx">except</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">')'</span><span class="p">;</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">msg</span><span class="p">,{</span><span class="nx">category</span><span class="o">:</span><span class="s1">'error'</span><span class="p">});</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">breakLoop</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">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Wrong geometry value'</span><span class="p">,{</span><span class="nx">category</span><span class="o">:</span><span class="s1">'error'</span><span class="p">});</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">breakLoop</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-15'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-15'>#</a>
|
||||
</div>
|
||||
<p>Private: Remove one or n features to the map</p>
|
||||
</div>
|
||||
<div 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">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="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">doc</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">))</span> <span class="nx">doc</span> <span class="o">=</span> <span class="p">[</span><span class="nx">doc</span><span class="p">];</span>
|
||||
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">){</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">self</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">_layers</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">features</span><span class="p">.</span><span class="nx">_layers</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><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>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">removeLayer</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">_layers</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-16'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-16'>#</a>
|
||||
</div>
|
||||
<p>Private: Return a GeoJSON geomtry extracted from the document fields</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">_getGeometryFromDocument</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">geomReady</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">_geomFieldName</span><span class="p">){</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-17'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-17'>#</a>
|
||||
</div>
|
||||
<p>We assume that the contents of the field are a valid GeoJSON object</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">_geomFieldName</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">_lonFieldName</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_latFieldName</span><span class="p">){</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-18'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-18'>#</a>
|
||||
</div>
|
||||
<p>We'll create a GeoJSON like point object from the two lat/lon fields</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="s1">'Point'</span><span class="p">,</span>
|
||||
<span class="nx">coordinates</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">_lonFieldName</span><span class="p">],</span>
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">_latFieldName</span><span class="p">]</span>
|
||||
<span class="p">]</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="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-19'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-19'>#</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>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">_setupGeometryField</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
||||
<span class="kd">var</span> <span class="nx">geomField</span><span class="p">,</span> <span class="nx">latField</span><span class="p">,</span> <span class="nx">lonField</span><span class="p">;</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_geomFieldName</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="k">this</span><span class="p">.</span><span class="nx">_latFieldName</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>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_lonFieldName</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">longitudeFieldNames</span><span class="p">);</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">geomReady</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_geomFieldName</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_latFieldName</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">_lonFieldName</span><span class="p">));</span>
|
||||
<span class="p">},</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-20'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-20'>#</a>
|
||||
</div>
|
||||
<p>Private: Check if a field in the current model exists in the provided
|
||||
list of names.</p>
|
||||
</div>
|
||||
<div 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">'id'</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"><</span> <span class="nx">fieldNames</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="k">for</span> <span class="p">(</span><span class="kd">var</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"><</span> <span class="nx">modelFieldNames</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="p">){</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">modelFieldNames</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">==</span> <span class="nx">fieldNames</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">toLowerCase</span><span class="p">())</span>
|
||||
<span class="k">return</span> <span class="nx">modelFieldNames</span><span class="p">[</span><span class="nx">j</span><span class="p">];</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></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-21'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-21'>#</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>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">_setupMap</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</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">get</span><span class="p">(</span><span class="mi">0</span><span class="p">));</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">mapUrl</span> <span class="o">=</span> <span class="s2">"http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png"</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">osmAttribution</span> <span class="o">=</span> <span class="s1">'Map data &copy; 2011 OpenStreetMap contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">'</span><span class="p">;</span>
|
||||
<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">'1234'</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">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="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'featureparse'</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="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">properties</span> <span class="o">&&</span> <span class="nx">e</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">e</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">e</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="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">properties</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">cid</span><span class="p">){</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">layer</span><span class="p">.</span><span class="nx">cid</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">cid</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">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="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="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">LatLng</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-22'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-22'>#</a>
|
||||
</div>
|
||||
<p>Private: Helper function to select an option from a select list</p>
|
||||
</div>
|
||||
<div 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">'.'</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">' > select > option'</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>
|
||||
<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">'selected'</span><span class="p">,</span><span class="s1">'selected'</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="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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
364
docs/view.html
364
docs/view.html
@ -1,11 +1,39 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="model.html"> model.js </a> <a class="source" href="view-flot-graph.html"> view-flot-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
||||
<title>view.js</title>
|
||||
<link rel="stylesheet" href="pycco.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
<div id="background"></div>
|
||||
<div class='section'>
|
||||
<div class='docs'><h1>view.js</h1></div>
|
||||
</div>
|
||||
<div class='clearall'>
|
||||
<div class='section' id='section-0'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-0'>#</a>
|
||||
</div>
|
||||
<p>jshint multistr:true</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>DataExplorer</h2>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-1'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-1'>#</a>
|
||||
</div>
|
||||
<h2>DataExplorer</h2>
|
||||
<p>The primary view for the entire application. Usage:</p>
|
||||
|
||||
<pre>
|
||||
var myExplorer = new model.recline.DataExplorer({
|
||||
model: {{recline.Model.Dataset instance}}
|
||||
@ -13,18 +41,14 @@ var myExplorer = new model.recline.DataExplorer({
|
||||
views: {{page views}}
|
||||
config: {{config options -- see below}}
|
||||
});
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
<h3>Parameters</h3>
|
||||
|
||||
<p><strong>model</strong>: (required) Dataset instance.</p>
|
||||
|
||||
<p><strong>el</strong>: (required) DOM element.</p>
|
||||
|
||||
<p><strong>views</strong>: (optional) the views (Grid, Graph etc) for DataExplorer to
|
||||
show. This is an array of view hashes. If not provided
|
||||
just initialize a DataGrid with id 'grid'. Example:</p>
|
||||
|
||||
<pre>
|
||||
var views = [
|
||||
{
|
||||
@ -45,14 +69,15 @@ var views = [
|
||||
</pre>
|
||||
|
||||
<p><strong>config</strong>: Config options like:</p>
|
||||
|
||||
<ul>
|
||||
<li>readOnly: true/false (default: false) value indicating whether to
|
||||
operate in read-only mode (hiding all editing options).</li>
|
||||
operate in read-only mode (hiding all editing options).</li>
|
||||
</ul>
|
||||
|
||||
<p>NB: the element already being in the DOM is important for rendering of
|
||||
FlotGraph subview.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataExplorer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
FlotGraph subview.</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">DataExplorer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="recline-data-explorer"> \</span>
|
||||
<span class="s1"> <div class="alert-messages"></div> \</span>
|
||||
@ -95,7 +120,19 @@ FlotGraph subview.</p> </td> <td class="code">
|
||||
<span class="nx">options</span><span class="p">.</span><span class="nx">config</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">readOnly</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setReadOnly</span><span class="p">();</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Hash of 'page' views (i.e. those for whole page) keyed by page name</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">views</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-2'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-2'>#</a>
|
||||
</div>
|
||||
<p>Hash of 'page' views (i.e. those for whole page) keyed by page name</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">views</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">views</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span> <span class="o">=</span> <span class="p">[{</span>
|
||||
@ -105,7 +142,19 @@ FlotGraph subview.</p> </td> <td class="code">
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">}];</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>this must be called after pageViews are created</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">}</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-3'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-3'>#</a>
|
||||
</div>
|
||||
<p>this must be called after pageViews are created</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupRouting</span><span class="p">();</span>
|
||||
@ -116,8 +165,20 @@ FlotGraph subview.</p> </td> <td class="code">
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'query:done'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span><span class="p">();</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.doc-count'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">||</span> <span class="s1">'Unknown'</span><span class="p">);</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Data loaded'</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>update navigation</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="nx">qs</span><span class="p">[</span><span class="s1">'reclineQuery'</span><span class="p">]</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Data loaded'</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</span><span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-4'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-4'>#</a>
|
||||
</div>
|
||||
<p>update navigation</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="nx">qs</span><span class="p">.</span><span class="nx">reclineQuery</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span><span class="p">(</span><span class="nx">qs</span><span class="p">);</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">navigate</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
@ -137,8 +198,20 @@ FlotGraph subview.</p> </td> <td class="code">
|
||||
<span class="nx">msg</span> <span class="o">=</span> <span class="s1">'There was an error querying the backend'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">msg</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>retrieve basic data like fields etc
|
||||
note this.model and dataset returned are the same</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fetch</span><span class="p">()</span>
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-5'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-5'>#</a>
|
||||
</div>
|
||||
<p>retrieve basic data like fields etc
|
||||
note this.model and dataset returned are the same</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fetch</span><span class="p">()</span>
|
||||
<span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryState</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">().</span><span class="nx">reclineQuery</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">queryState</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -163,7 +236,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">template</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">$dataViewContainer</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-view-container'</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">,</span> <span class="nx">pageName</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">$dataViewContainer</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span>
|
||||
<span class="nx">$dataViewContainer</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">queryEditor</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span>
|
||||
@ -182,7 +255,19 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">setupRouting</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Default route</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="sr">/^(\?.*)?$/</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryString</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-6'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-6'>#</a>
|
||||
</div>
|
||||
<p>Default route</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="sr">/^(\?.*)?$/</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryString</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">,</span> <span class="nx">queryString</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">idx</span><span class="p">,</span> <span class="nx">view</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -197,11 +282,25 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.navigation li a'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">'disabled'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.navigation li a[href=#'</span> <span class="o">+</span> <span class="nx">pageName</span> <span class="o">+</span> <span class="s1">']'</span><span class="p">);</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'disabled'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</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">'disabled'</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-7'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-7'>#</a>
|
||||
</div>
|
||||
<p>show the specific page</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">pageName</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'view:show'</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'view:hide'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
@ -237,8 +336,8 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'submit form'</span><span class="o">:</span> <span class="s1">'onFormSubmit'</span>
|
||||
<span class="p">,</span> <span class="s1">'click .action-pagination-update'</span><span class="o">:</span> <span class="s1">'onPaginationUpdate'</span>
|
||||
<span class="s1">'submit form'</span><span class="o">:</span> <span class="s1">'onFormSubmit'</span><span class="p">,</span>
|
||||
<span class="s1">'click .action-pagination-update'</span><span class="o">:</span> <span class="s1">'onPaginationUpdate'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@ -257,10 +356,11 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">onPaginationUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">newFrom</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">'prev'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">newFrom</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'from'</span><span class="p">)</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'size'</span><span class="p">));</span>
|
||||
<span class="nx">newFrom</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'from'</span><span class="p">)</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'size'</span><span class="p">));</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">newFrom</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'from'</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'size'</span><span class="p">);</span>
|
||||
<span class="nx">newFrom</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'from'</span><span class="p">)</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'size'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
@ -317,7 +417,19 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="p">{},</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>we will use idx in list as there id ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="p">{},</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-8'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-8'>#</a>
|
||||
</div>
|
||||
<p>we will use idx in list as there id ...</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">filter</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">idx</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">filter</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
@ -331,10 +443,22 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">fieldId</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span>
|
||||
<span class="nx">label</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-9'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-9'>#</a>
|
||||
</div>
|
||||
<p>are there actually any facets to show?</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
@ -382,6 +506,9 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="s1"> {{#terms}} \</span>
|
||||
<span class="s1"> <li><a class="facet-choice js-facet-filter" data-value="{{term}}">{{term}} ({{count}})</a></li> \</span>
|
||||
<span class="s1"> {{/terms}} \</span>
|
||||
<span class="s1"> {{#entries}} \</span>
|
||||
<span class="s1"> <li><a class="facet-choice js-facet-filter" data-value="{{time}}">{{term}} ({{count}})</a></li> \</span>
|
||||
<span class="s1"> {{/entries}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> {{/facets}} \</span>
|
||||
@ -404,8 +531,29 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">facets</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">facets</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">facet</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">facet</span><span class="p">.</span><span class="nx">_type</span> <span class="o">===</span> <span class="s1">'date_histogram'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">facet</span><span class="p">.</span><span class="nx">entries</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">facet</span><span class="p">.</span><span class="nx">entries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">entry</span><span class="p">.</span><span class="nx">term</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">time</span><span class="p">).</span><span class="nx">toDateString</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">entry</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">facet</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-10'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-10'>#</a>
|
||||
</div>
|
||||
<h1>are there actually any facets to show?</h1>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
@ -421,19 +569,53 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-value'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">fieldId</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Parse the Hash section of a URL into path and query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">});</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-11'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-11'>#</a>
|
||||
</div>
|
||||
<h2>Miscellaneous Utilities</h2>
|
||||
</div>
|
||||
<div 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-12'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-12'>#</a>
|
||||
</div>
|
||||
<p>Parse the Hash section of a URL into path and query string</p>
|
||||
</div>
|
||||
<div 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">if</span> <span class="p">(</span><span class="nx">parsed</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{};</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">path</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">||</span> <span class="s1">''</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-13'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-13'>#</a>
|
||||
</div>
|
||||
<p>Parse a URL query string (?xyz=abc...) into a dictionary.</p>
|
||||
</div>
|
||||
<div 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>
|
||||
@ -446,13 +628,49 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">q</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">.</span><span class="nx">length</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">'?'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">q</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
|
||||
<span class="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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-14'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-14'>#</a>
|
||||
</div>
|
||||
<p>TODO: have values be array as query string allow repetition of keys</p>
|
||||
</div>
|
||||
<div 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-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-15'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-15'>#</a>
|
||||
</div>
|
||||
<p>Parse the query string out of the URL hash</p>
|
||||
</div>
|
||||
<div 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-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-16'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-16'>#</a>
|
||||
</div>
|
||||
<p>Compse a Query String</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="s1">'?'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
@ -460,35 +678,57 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">queryString</span> <span class="o">+=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'&'</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="nx">queryString</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryPart</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span>
|
||||
<span class="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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-17'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-17'>#</a>
|
||||
</div>
|
||||
<p>slice(1) to remove # at start</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">queryPart</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <h2>notify</h2>
|
||||
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-18'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-18'>#</a>
|
||||
</div>
|
||||
<h2>notify</h2>
|
||||
<p>Create a notification (a div.alert in div.alert-messsages) using provide messages and options. Options are:</p>
|
||||
|
||||
<ul>
|
||||
<li>category: warning (default), success, error</li>
|
||||
<li>persist: if true alert is persistent, o/w hidden after 3s (default = false)</li>
|
||||
<li>loader: if true show loading spinner</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">notify</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">)</span> <span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">notify</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">)</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">msg</span><span class="o">:</span> <span class="nx">message</span><span class="p">,</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="s1">'warning'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">options</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">_template</span> <span class="o">=</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \</span>
|
||||
<span class="s1"> <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">Ã</a> \</span>
|
||||
<span class="s1"> {{msg}} \</span>
|
||||
<span class="s1"> {{#loader}} \</span>
|
||||
<span class="s1"> <span class="notification-loader">&nbsp;</span> \</span>
|
||||
@ -503,13 +743,29 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <h2>clearNotifications</h2>
|
||||
|
||||
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">};</span></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
<div class='section' id='section-19'>
|
||||
<div class='docs'>
|
||||
<div class='octowrap'>
|
||||
<a class='octothorpe' href='#section-19'>#</a>
|
||||
</div>
|
||||
<h2>clearNotifications</h2>
|
||||
<p>Clear all existing notifications</p>
|
||||
</div>
|
||||
<div class='code'>
|
||||
<div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.recline-data-explorer .alert-messages .alert'</span><span class="p">);</span>
|
||||
<span class="nx">$notifications</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="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>
|
||||
</pre></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='clearall'></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
22
index.html
22
index.html
@ -182,13 +182,9 @@ Backbone.history.start();
|
||||
|
||||
<h4>Creating a Dataset Explicitly with a Backend</h4>
|
||||
<pre>
|
||||
// Backend can be an instance or string id for a backend in the
|
||||
// recline.Model.backends registry
|
||||
var backend = 'elasticsearch'
|
||||
// alternatively you can create explicitly
|
||||
// var backend = new recline.Backend.ElasticSearch();
|
||||
// or even from your own backend ...
|
||||
// var backend = new myModule.Backend();
|
||||
// Connect to ElasticSearch index/type as our data source
|
||||
// There are many other backends you can use (and you can write your own)
|
||||
var backend = new recline.Backend.ElasticSearch();
|
||||
|
||||
// Dataset is a Backbone model so the first hash become model attributes
|
||||
var dataset = recline.Model.Dataset({
|
||||
@ -251,10 +247,10 @@ also easily write your own). Each view holds a pointer to a Dataset:</p>
|
||||
<ul>
|
||||
<li>DataExplorer: the parent view which manages the overall app and sets up
|
||||
sub views.</li>
|
||||
<li>DataGrid: the data grid view.</li>
|
||||
<li>FlotGraph: a simple graphing view using <a
|
||||
<li>Grid: the data grid view.</li>
|
||||
<li>Graph: a simple graphing view using <a
|
||||
href="http://code.google.com/p/flot/">Flot</a>.</li>
|
||||
<li>Map: a map view using Leaflet.</li>
|
||||
<li>Map: a map view using <a href="http://leaflet.cloudmade.com/">Leaflet</a>.</li>
|
||||
</ul>
|
||||
|
||||
<p>There are additional views which do not display a whole dataset but which
|
||||
@ -270,8 +266,9 @@ are useful:</p>
|
||||
<ul>
|
||||
<li><a href="docs/model.html">Models</a></li>
|
||||
<li><a href="docs/view.html">DataExplorer View (plus common view code)</a></li>
|
||||
<li><a href="docs/view-grid.html">DataGrid View</a></li>
|
||||
<li><a href="docs/view-flot-graph.html">Graph View (based on Flot)</a></li>
|
||||
<li><a href="docs/view-grid.html">(Data) Grid View</a></li>
|
||||
<li><a href="docs/view-graph.html">Graph View (based on Flot)</a></li>
|
||||
<li><a href="docs/view-map.html">Map View (based on Leaflet)</a></li>
|
||||
</ul>
|
||||
|
||||
<h4>Backends</h4>
|
||||
@ -320,6 +317,7 @@ However, it has been rewritten from the ground up using Backbone.</p>
|
||||
<li>Underscore >= 1.0</li>
|
||||
<li>JQuery Mustache</li>
|
||||
<li><a href="http://code.google.com/p/flot/">JQuery Flot >= 0.7</a>: (Optional) for graphing</li>
|
||||
<li><a href="http://leaflet.cloudmade.com/">Leaflet >= 0.3.1</a>: (Optional) for mapping</li>
|
||||
<li><a href="http://twitter.github.com/bootstrap/">Bootstrap</a> >= v2.0: (Optional) for CSS/JS</li>
|
||||
</ul>
|
||||
|
||||
|
||||
6
make
6
make
@ -11,7 +11,9 @@ def cat():
|
||||
def docs():
|
||||
# build docs
|
||||
print("** Building docs")
|
||||
cmd = 'docco src/model.js src/view.js src/view-grid.js src/view-flot-graph.js'
|
||||
|
||||
docco_executable = os.environ.get('DOCCO_EXECUTABLE','docco')
|
||||
cmd = '%s src/model.js src/view.js src/view-grid.js src/view-graph.js src/view-map.js' % (docco_executable)
|
||||
os.system(cmd)
|
||||
if os.path.exists('/tmp/recline-docs'):
|
||||
shutil.rmtree('/tmp/recline-docs')
|
||||
@ -19,7 +21,7 @@ def docs():
|
||||
os.system('mkdir -p docs/backend')
|
||||
files = '%s/src/backend/*.js' % os.getcwd()
|
||||
dest = '%s/docs/backend' % os.getcwd()
|
||||
os.system('cd /tmp/recline-docs && docco %s && mv docs/* %s' % (files, dest))
|
||||
os.system('cd /tmp/recline-docs && %s %s && mv docs/* %s' % (docco_executable,files, dest))
|
||||
print("** Docs built ok")
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
||||
596
recline.js
596
recline.js
File diff suppressed because it is too large
Load Diff
@ -17,10 +17,20 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
// ## recline.Backend.Base
|
||||
//
|
||||
// Base class for backends providing a template and convenience functions.
|
||||
// You do not have to inherit from this class but even when not it does provide guidance on the functions you must implement.
|
||||
// You do not have to inherit from this class but even when not it does
|
||||
// provide guidance on the functions you must implement.
|
||||
//
|
||||
// Note also that while this (and other Backends) are implemented as Backbone models this is just a convenience.
|
||||
my.Base = Backbone.Model.extend({
|
||||
// ### __type__
|
||||
//
|
||||
// 'type' of this backend. This should be either the class path for this
|
||||
// object as a string (e.g. recline.Backend.Memory) or for Backends within
|
||||
// recline.Backend module it may be their class name.
|
||||
//
|
||||
// This value is used as an identifier for this backend when initializing
|
||||
// backends (see recline.Model.Dataset.initialize).
|
||||
__type__: 'base',
|
||||
|
||||
// ### sync
|
||||
//
|
||||
|
||||
@ -17,6 +17,7 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
//
|
||||
// Note that this is a **read-only** backend.
|
||||
my.DataProxy = my.Base.extend({
|
||||
__type__: 'dataproxy',
|
||||
defaults: {
|
||||
dataproxy_url: 'http://jsonpdataproxy.appspot.com'
|
||||
},
|
||||
@ -71,7 +72,5 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
return dfd.promise();
|
||||
}
|
||||
});
|
||||
recline.Model.backends['dataproxy'] = new my.DataProxy();
|
||||
|
||||
|
||||
}(jQuery, this.recline.Backend));
|
||||
|
||||
@ -20,6 +20,7 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
//
|
||||
// <pre>http://localhost:9200/twitter/tweet</pre>
|
||||
my.ElasticSearch = my.Base.extend({
|
||||
__type__: 'elasticsearch',
|
||||
_getESUrl: function(dataset) {
|
||||
var out = dataset.get('elasticsearch_url');
|
||||
if (out) return out;
|
||||
@ -115,7 +116,6 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
return dfd.promise();
|
||||
}
|
||||
});
|
||||
recline.Model.backends['elasticsearch'] = new my.ElasticSearch();
|
||||
|
||||
}(jQuery, this.recline.Backend));
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
// );
|
||||
// </pre>
|
||||
my.GDoc = my.Base.extend({
|
||||
__type__: 'gdoc',
|
||||
getUrl: function(dataset) {
|
||||
var url = dataset.get('url');
|
||||
if (url.indexOf('feeds/list') != -1) {
|
||||
@ -134,7 +135,6 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
return results;
|
||||
}
|
||||
});
|
||||
recline.Model.backends['gdocs'] = new my.GDoc();
|
||||
|
||||
}(jQuery, this.recline.Backend));
|
||||
|
||||
|
||||
@ -2,7 +2,9 @@ this.recline = this.recline || {};
|
||||
this.recline.Backend = this.recline.Backend || {};
|
||||
|
||||
(function($, my) {
|
||||
my.loadFromCSVFile = function(file, callback) {
|
||||
my.loadFromCSVFile = function(file, callback, options) {
|
||||
var encoding = options.encoding || 'UTF-8';
|
||||
|
||||
var metadata = {
|
||||
id: file.name,
|
||||
file: file
|
||||
@ -10,17 +12,17 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
var reader = new FileReader();
|
||||
// TODO
|
||||
reader.onload = function(e) {
|
||||
var dataset = my.csvToDataset(e.target.result);
|
||||
var dataset = my.csvToDataset(e.target.result, options);
|
||||
callback(dataset);
|
||||
};
|
||||
reader.onerror = function (e) {
|
||||
alert('Failed to load file. Code: ' + e.target.error.code);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
reader.readAsText(file, encoding);
|
||||
};
|
||||
|
||||
my.csvToDataset = function(csvString) {
|
||||
var out = my.parseCSV(csvString);
|
||||
my.csvToDataset = function(csvString, options) {
|
||||
var out = my.parseCSV(csvString, options);
|
||||
fields = _.map(out[0], function(cell) {
|
||||
return { id: cell, label: cell };
|
||||
});
|
||||
@ -35,128 +37,133 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
return dataset;
|
||||
};
|
||||
|
||||
// Converts a Comma Separated Values string into an array of arrays.
|
||||
// Each line in the CSV becomes an array.
|
||||
// Converts a Comma Separated Values string into an array of arrays.
|
||||
// Each line in the CSV becomes an array.
|
||||
//
|
||||
// Empty fields are converted to nulls and non-quoted numbers are converted to integers or floats.
|
||||
//
|
||||
// @return The CSV parsed as an array
|
||||
// @type Array
|
||||
//
|
||||
// @param {String} s The string to convert
|
||||
// @param {Boolean} [trm=false] If set to True leading and trailing whitespace is stripped off of each non-quoted field as it is imported
|
||||
// Empty fields are converted to nulls and non-quoted numbers are converted to integers or floats.
|
||||
//
|
||||
// @return The CSV parsed as an array
|
||||
// @type Array
|
||||
//
|
||||
// @param {String} s The string to convert
|
||||
// @param {Object} options Options for loading CSV including
|
||||
// @param {Boolean} [trim=false] If set to True leading and trailing whitespace is stripped off of each non-quoted field as it is imported
|
||||
// @param {String} [separator=','] Separator for CSV file
|
||||
// Heavily based on uselesscode's JS CSV parser (MIT Licensed):
|
||||
// thttp://www.uselesscode.org/javascript/csv/
|
||||
my.parseCSV= function(s, trm) {
|
||||
// Get rid of any trailing \n
|
||||
s = chomp(s);
|
||||
my.parseCSV= function(s, options) {
|
||||
// Get rid of any trailing \n
|
||||
s = chomp(s);
|
||||
|
||||
var cur = '', // The character we are currently processing.
|
||||
inQuote = false,
|
||||
fieldQuoted = false,
|
||||
field = '', // Buffer for building up the current field
|
||||
row = [],
|
||||
out = [],
|
||||
i,
|
||||
processField;
|
||||
var options = options || {};
|
||||
var trm = options.trim;
|
||||
var separator = options.separator || ',';
|
||||
|
||||
var cur = '', // The character we are currently processing.
|
||||
inQuote = false,
|
||||
fieldQuoted = false,
|
||||
field = '', // Buffer for building up the current field
|
||||
row = [],
|
||||
out = [],
|
||||
i,
|
||||
processField;
|
||||
|
||||
processField = function (field) {
|
||||
if (fieldQuoted !== true) {
|
||||
// If field is empty set to null
|
||||
if (field === '') {
|
||||
field = null;
|
||||
// If the field was not quoted and we are trimming fields, trim it
|
||||
} else if (trm === true) {
|
||||
field = trim(field);
|
||||
}
|
||||
processField = function (field) {
|
||||
if (fieldQuoted !== true) {
|
||||
// If field is empty set to null
|
||||
if (field === '') {
|
||||
field = null;
|
||||
// If the field was not quoted and we are trimming fields, trim it
|
||||
} else if (trm === true) {
|
||||
field = trim(field);
|
||||
}
|
||||
|
||||
// Convert unquoted numbers to their appropriate types
|
||||
if (rxIsInt.test(field)) {
|
||||
field = parseInt(field, 10);
|
||||
} else if (rxIsFloat.test(field)) {
|
||||
field = parseFloat(field, 10);
|
||||
}
|
||||
}
|
||||
return field;
|
||||
};
|
||||
// Convert unquoted numbers to their appropriate types
|
||||
if (rxIsInt.test(field)) {
|
||||
field = parseInt(field, 10);
|
||||
} else if (rxIsFloat.test(field)) {
|
||||
field = parseFloat(field, 10);
|
||||
}
|
||||
}
|
||||
return field;
|
||||
};
|
||||
|
||||
for (i = 0; i < s.length; i += 1) {
|
||||
cur = s.charAt(i);
|
||||
for (i = 0; i < s.length; i += 1) {
|
||||
cur = s.charAt(i);
|
||||
|
||||
// If we are at a EOF or EOR
|
||||
if (inQuote === false && (cur === ',' || cur === "\n")) {
|
||||
field = processField(field);
|
||||
// Add the current field to the current row
|
||||
row.push(field);
|
||||
// If this is EOR append row to output and flush row
|
||||
if (cur === "\n") {
|
||||
out.push(row);
|
||||
row = [];
|
||||
}
|
||||
// Flush the field buffer
|
||||
field = '';
|
||||
fieldQuoted = false;
|
||||
} else {
|
||||
// If it's not a ", add it to the field buffer
|
||||
if (cur !== '"') {
|
||||
field += cur;
|
||||
} else {
|
||||
if (!inQuote) {
|
||||
// We are not in a quote, start a quote
|
||||
inQuote = true;
|
||||
fieldQuoted = true;
|
||||
} else {
|
||||
// Next char is ", this is an escaped "
|
||||
if (s.charAt(i + 1) === '"') {
|
||||
field += '"';
|
||||
// Skip the next char
|
||||
i += 1;
|
||||
} else {
|
||||
// It's not escaping, so end quote
|
||||
inQuote = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// If we are at a EOF or EOR
|
||||
if (inQuote === false && (cur === separator || cur === "\n")) {
|
||||
field = processField(field);
|
||||
// Add the current field to the current row
|
||||
row.push(field);
|
||||
// If this is EOR append row to output and flush row
|
||||
if (cur === "\n") {
|
||||
out.push(row);
|
||||
row = [];
|
||||
}
|
||||
// Flush the field buffer
|
||||
field = '';
|
||||
fieldQuoted = false;
|
||||
} else {
|
||||
// If it's not a ", add it to the field buffer
|
||||
if (cur !== '"') {
|
||||
field += cur;
|
||||
} else {
|
||||
if (!inQuote) {
|
||||
// We are not in a quote, start a quote
|
||||
inQuote = true;
|
||||
fieldQuoted = true;
|
||||
} else {
|
||||
// Next char is ", this is an escaped "
|
||||
if (s.charAt(i + 1) === '"') {
|
||||
field += '"';
|
||||
// Skip the next char
|
||||
i += 1;
|
||||
} else {
|
||||
// It's not escaping, so end quote
|
||||
inQuote = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add the last field
|
||||
field = processField(field);
|
||||
row.push(field);
|
||||
out.push(row);
|
||||
// Add the last field
|
||||
field = processField(field);
|
||||
row.push(field);
|
||||
out.push(row);
|
||||
|
||||
return out;
|
||||
};
|
||||
return out;
|
||||
};
|
||||
|
||||
var rxIsInt = /^\d+$/,
|
||||
rxIsFloat = /^\d*\.\d+$|^\d+\.\d*$/,
|
||||
// If a string has leading or trailing space,
|
||||
// contains a comma double quote or a newline
|
||||
// it needs to be quoted in CSV output
|
||||
rxNeedsQuoting = /^\s|\s$|,|"|\n/,
|
||||
trim = (function () {
|
||||
// Fx 3.1 has a native trim function, it's about 10x faster, use it if it exists
|
||||
if (String.prototype.trim) {
|
||||
return function (s) {
|
||||
return s.trim();
|
||||
};
|
||||
} else {
|
||||
return function (s) {
|
||||
return s.replace(/^\s*/, '').replace(/\s*$/, '');
|
||||
};
|
||||
}
|
||||
}());
|
||||
var rxIsInt = /^\d+$/,
|
||||
rxIsFloat = /^\d*\.\d+$|^\d+\.\d*$/,
|
||||
// If a string has leading or trailing space,
|
||||
// contains a comma double quote or a newline
|
||||
// it needs to be quoted in CSV output
|
||||
rxNeedsQuoting = /^\s|\s$|,|"|\n/,
|
||||
trim = (function () {
|
||||
// Fx 3.1 has a native trim function, it's about 10x faster, use it if it exists
|
||||
if (String.prototype.trim) {
|
||||
return function (s) {
|
||||
return s.trim();
|
||||
};
|
||||
} else {
|
||||
return function (s) {
|
||||
return s.replace(/^\s*/, '').replace(/\s*$/, '');
|
||||
};
|
||||
}
|
||||
}());
|
||||
|
||||
function chomp(s) {
|
||||
if (s.charAt(s.length - 1) !== "\n") {
|
||||
// Does not end with \n, just return string
|
||||
return s;
|
||||
} else {
|
||||
// Remove the \n
|
||||
return s.substring(0, s.length - 1);
|
||||
}
|
||||
}
|
||||
function chomp(s) {
|
||||
if (s.charAt(s.length - 1) !== "\n") {
|
||||
// Does not end with \n, just return string
|
||||
return s;
|
||||
} else {
|
||||
// Remove the \n
|
||||
return s.substring(0, s.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}(jQuery, this.recline.Backend));
|
||||
|
||||
@ -20,7 +20,7 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
if (!metadata.id) {
|
||||
metadata.id = String(Math.floor(Math.random() * 100000000) + 1);
|
||||
}
|
||||
var backend = recline.Model.backends['memory'];
|
||||
var backend = new recline.Backend.Memory();
|
||||
var datasetInfo = {
|
||||
documents: data,
|
||||
metadata: metadata
|
||||
@ -35,7 +35,7 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
}
|
||||
}
|
||||
backend.addDataset(datasetInfo);
|
||||
var dataset = new recline.Model.Dataset({id: metadata.id}, 'memory');
|
||||
var dataset = new recline.Model.Dataset({id: metadata.id}, backend);
|
||||
dataset.fetch();
|
||||
return dataset;
|
||||
};
|
||||
@ -70,6 +70,7 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
// etc ...
|
||||
// </pre>
|
||||
my.Memory = my.Base.extend({
|
||||
__type__: 'memory',
|
||||
initialize: function() {
|
||||
this.datasets = {};
|
||||
},
|
||||
@ -117,13 +118,9 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
var out = {};
|
||||
var numRows = queryObj.size;
|
||||
var start = queryObj.from;
|
||||
results = this.datasets[model.id].documents;
|
||||
_.each(queryObj.filters, function(filter) {
|
||||
results = _.filter(results, function(doc) {
|
||||
var fieldId = _.keys(filter.term)[0];
|
||||
return (doc[fieldId] == filter.term[fieldId]);
|
||||
});
|
||||
});
|
||||
var results = this.datasets[model.id].documents;
|
||||
results = this._applyFilters(results, queryObj);
|
||||
results = this._applyFreeTextQuery(model, results, queryObj);
|
||||
// not complete sorting!
|
||||
_.each(queryObj.sort, function(sortObj) {
|
||||
var fieldName = _.keys(sortObj)[0];
|
||||
@ -141,6 +138,42 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
return dfd.promise();
|
||||
},
|
||||
|
||||
// in place filtering
|
||||
_applyFilters: function(results, queryObj) {
|
||||
_.each(queryObj.filters, function(filter) {
|
||||
results = _.filter(results, function(doc) {
|
||||
var fieldId = _.keys(filter.term)[0];
|
||||
return (doc[fieldId] == filter.term[fieldId]);
|
||||
});
|
||||
});
|
||||
return results;
|
||||
},
|
||||
|
||||
// we OR across fields but AND across terms in query string
|
||||
_applyFreeTextQuery: function(dataset, 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;
|
||||
dataset.fields.each(function(field) {
|
||||
var value = rawdoc[field.id].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(documents, queryObj) {
|
||||
var facetResults = {};
|
||||
if (!queryObj.facets) {
|
||||
@ -177,6 +210,5 @@ this.recline.Backend = this.recline.Backend || {};
|
||||
return facetResults;
|
||||
}
|
||||
});
|
||||
recline.Model.backends['memory'] = new my.Memory();
|
||||
|
||||
}(jQuery, this.recline.Backend));
|
||||
|
||||
87
src/model.js
87
src/model.js
@ -18,7 +18,7 @@ this.recline.Model = this.recline.Model || {};
|
||||
//
|
||||
// @property {number} docCount: total number of documents in this dataset
|
||||
//
|
||||
// @property {Backend} backend: the Backend (instance) for this Dataset
|
||||
// @property {Backend} backend: the Backend (instance) for this Dataset.
|
||||
//
|
||||
// @property {Query} queryState: `Query` object which stores current
|
||||
// queryState. queryState may be edited by other components (e.g. a query
|
||||
@ -28,14 +28,24 @@ this.recline.Model = this.recline.Model || {};
|
||||
// Facets.
|
||||
my.Dataset = Backbone.Model.extend({
|
||||
__type__: 'Dataset',
|
||||
|
||||
// ### initialize
|
||||
//
|
||||
// Sets up instance properties (see above)
|
||||
//
|
||||
// @param {Object} model: standard set of model attributes passed to Backbone models
|
||||
//
|
||||
// @param {Object or String} backend: Backend instance (see
|
||||
// `recline.Backend.Base`) or a string specifying that instance. The
|
||||
// string specifying may be a full class path e.g.
|
||||
// 'recline.Backend.ElasticSearch' or a simple name e.g.
|
||||
// 'elasticsearch' or 'ElasticSearch' (in this case must be a Backend in
|
||||
// recline.Backend module)
|
||||
initialize: function(model, backend) {
|
||||
_.bindAll(this, 'query');
|
||||
this.backend = backend;
|
||||
if (backend && backend.constructor == String) {
|
||||
this.backend = my.backends[backend];
|
||||
if (typeof(backend) === 'string') {
|
||||
this.backend = this._backendFromString(backend);
|
||||
}
|
||||
this.fields = new my.FieldList();
|
||||
this.currentDocuments = new my.DocumentList();
|
||||
@ -99,9 +109,73 @@ my.Dataset = Backbone.Model.extend({
|
||||
data.docCount = this.docCount;
|
||||
data.fields = this.fields.toJSON();
|
||||
return data;
|
||||
},
|
||||
|
||||
// ### _backendFromString(backendString)
|
||||
//
|
||||
// See backend argument to initialize for details
|
||||
_backendFromString: function(backendString) {
|
||||
var parts = backendString.split('.');
|
||||
// walk through the specified path xxx.yyy.zzz to get the final object which should be backend class
|
||||
var current = window;
|
||||
for(ii=0;ii<parts.length;ii++) {
|
||||
if (!current) {
|
||||
break;
|
||||
}
|
||||
current = current[parts[ii]];
|
||||
}
|
||||
if (current) {
|
||||
return new current();
|
||||
}
|
||||
|
||||
// alternatively we just had a simple string
|
||||
var backend = null;
|
||||
if (recline && recline.Backend) {
|
||||
_.each(_.keys(recline.Backend), function(name) {
|
||||
if (name.toLowerCase() === backendString.toLowerCase()) {
|
||||
backend = new recline.Backend[name]();
|
||||
}
|
||||
});
|
||||
}
|
||||
return backend;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// ### Dataset.restore
|
||||
//
|
||||
// Restore a Dataset instance from a serialized state. Serialized state for a
|
||||
// Dataset is an Object like:
|
||||
//
|
||||
// <pre>
|
||||
// {
|
||||
// backend: {backend type - i.e. value of dataset.backend.__type__}
|
||||
// dataset: {dataset info needed for loading -- result of dataset.toJSON() would be sufficient but can be simpler }
|
||||
// // convenience - if url provided and dataste not this be used as dataset url
|
||||
// url: {dataset url}
|
||||
// ...
|
||||
// }
|
||||
my.Dataset.restore = function(state) {
|
||||
// hack-y - restoring a memory dataset does not mean much ...
|
||||
var dataset = null;
|
||||
if (state.url && !state.dataset) {
|
||||
state.dataset = {url: state.url};
|
||||
}
|
||||
if (state.backend === 'memory') {
|
||||
dataset = recline.Backend.createDataset(
|
||||
[{stub: 'this is a stub dataset because we do not restore memory datasets'}],
|
||||
[],
|
||||
state.dataset // metadata
|
||||
);
|
||||
} else {
|
||||
dataset = new recline.Model.Dataset(
|
||||
state.dataset,
|
||||
state.backend
|
||||
);
|
||||
}
|
||||
return dataset;
|
||||
};
|
||||
|
||||
// ## <a id="document">A Document (aka Row)</a>
|
||||
//
|
||||
// A single entry or row in the dataset
|
||||
@ -381,6 +455,13 @@ my.FacetList = Backbone.Collection.extend({
|
||||
model: my.Facet
|
||||
});
|
||||
|
||||
// ## Object State
|
||||
//
|
||||
// Convenience Backbone model for storing (configuration) state of objects like Views.
|
||||
my.ObjectState = Backbone.Model.extend({
|
||||
});
|
||||
|
||||
|
||||
// ## Backend registry
|
||||
//
|
||||
// Backends will register themselves by id into this registry
|
||||
|
||||
@ -7,10 +7,10 @@ this.recline.View = this.recline.View || {};
|
||||
|
||||
// ## Graph view for a Dataset using Flot graphing library.
|
||||
//
|
||||
// Initialization arguments:
|
||||
// Initialization arguments (in a hash in first parameter):
|
||||
//
|
||||
// * model: recline.Model.Dataset
|
||||
// * config: (optional) graph configuration hash of form:
|
||||
// * state: (optional) configuration hash of form:
|
||||
//
|
||||
// {
|
||||
// group: {column name for x-axis},
|
||||
@ -20,10 +20,10 @@ this.recline.View = this.recline.View || {};
|
||||
//
|
||||
// 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.FlotGraph = Backbone.View.extend({
|
||||
my.Graph = Backbone.View.extend({
|
||||
|
||||
tagName: "div",
|
||||
className: "data-graph-container",
|
||||
className: "recline-graph",
|
||||
|
||||
template: ' \
|
||||
<div class="editor"> \
|
||||
@ -86,7 +86,7 @@ my.FlotGraph = Backbone.View.extend({
|
||||
'click .action-toggle-help': 'toggleHelp'
|
||||
},
|
||||
|
||||
initialize: function(options, config) {
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
_.bindAll(this, 'render', 'redraw');
|
||||
@ -96,18 +96,14 @@ my.FlotGraph = Backbone.View.extend({
|
||||
this.model.fields.bind('add', this.render);
|
||||
this.model.currentDocuments.bind('add', this.redraw);
|
||||
this.model.currentDocuments.bind('reset', this.redraw);
|
||||
var configFromHash = my.parseHashQueryString().graph;
|
||||
if (configFromHash) {
|
||||
configFromHash = JSON.parse(configFromHash);
|
||||
}
|
||||
this.chartConfig = _.extend({
|
||||
var stateData = _.extend({
|
||||
group: null,
|
||||
series: [],
|
||||
graphType: 'lines-and-points'
|
||||
},
|
||||
configFromHash,
|
||||
config
|
||||
);
|
||||
options.state
|
||||
);
|
||||
this.state = new recline.Model.ObjectState(stateData);
|
||||
this.render();
|
||||
},
|
||||
|
||||
@ -129,13 +125,12 @@ my.FlotGraph = Backbone.View.extend({
|
||||
var series = this.$series.map(function () {
|
||||
return $(this).val();
|
||||
});
|
||||
this.chartConfig.series = $.makeArray(series);
|
||||
this.chartConfig.group = this.el.find('.editor-group select').val();
|
||||
this.chartConfig.graphType = this.el.find('.editor-type select').val();
|
||||
// update navigation
|
||||
var qs = my.parseHashQueryString();
|
||||
qs.graph = JSON.stringify(this.chartConfig);
|
||||
my.setHashQueryString(qs);
|
||||
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);
|
||||
this.redraw();
|
||||
},
|
||||
|
||||
@ -151,7 +146,7 @@ my.FlotGraph = Backbone.View.extend({
|
||||
return;
|
||||
}
|
||||
var series = this.createSeries();
|
||||
var options = this.getGraphOptions(this.chartConfig.graphType);
|
||||
var options = this.getGraphOptions(this.state.attributes.graphType);
|
||||
this.plot = $.plot(this.$graph, series, options);
|
||||
this.setupTooltips();
|
||||
// create this.plot and cache it
|
||||
@ -172,7 +167,7 @@ my.FlotGraph = Backbone.View.extend({
|
||||
// special tickformatter to show labels rather than numbers
|
||||
var tickFormatter = function (val) {
|
||||
if (self.model.currentDocuments.models[val]) {
|
||||
var out = self.model.currentDocuments.models[val].get(self.chartConfig.group);
|
||||
var out = self.model.currentDocuments.models[val].get(self.state.attributes.group);
|
||||
// if the value was in fact a number we want that not the
|
||||
if (typeof(out) == 'number') {
|
||||
return val;
|
||||
@ -255,14 +250,14 @@ my.FlotGraph = Backbone.View.extend({
|
||||
var y = item.datapoint[1];
|
||||
// convert back from 'index' value on x-axis (e.g. in cases where non-number values)
|
||||
if (self.model.currentDocuments.models[x]) {
|
||||
x = self.model.currentDocuments.models[x].get(self.chartConfig.group);
|
||||
x = self.model.currentDocuments.models[x].get(self.state.attributes.group);
|
||||
} else {
|
||||
x = x.toFixed(2);
|
||||
}
|
||||
y = y.toFixed(2);
|
||||
|
||||
var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
|
||||
group: self.chartConfig.group,
|
||||
group: self.state.attributes.group,
|
||||
x: x,
|
||||
series: item.series.label,
|
||||
y: y
|
||||
@ -280,25 +275,23 @@ my.FlotGraph = Backbone.View.extend({
|
||||
createSeries: function () {
|
||||
var self = this;
|
||||
var series = [];
|
||||
if (this.chartConfig) {
|
||||
$.each(this.chartConfig.series, function (seriesIndex, field) {
|
||||
var points = [];
|
||||
$.each(self.model.currentDocuments.models, function (index, doc) {
|
||||
var x = doc.get(self.chartConfig.group);
|
||||
var y = doc.get(field);
|
||||
if (typeof x === 'string') {
|
||||
x = index;
|
||||
}
|
||||
// horizontal bar chart
|
||||
if (self.chartConfig.graphType == 'bars') {
|
||||
points.push([y, x]);
|
||||
} else {
|
||||
points.push([x, y]);
|
||||
}
|
||||
});
|
||||
series.push({data: points, label: field});
|
||||
_.each(this.state.attributes.series, function(field) {
|
||||
var points = [];
|
||||
_.each(self.model.currentDocuments.models, function(doc, index) {
|
||||
var x = doc.get(self.state.attributes.group);
|
||||
var y = doc.get(field);
|
||||
if (typeof x === 'string') {
|
||||
x = index;
|
||||
}
|
||||
// horizontal bar chart
|
||||
if (self.state.attributes.graphType == 'bars') {
|
||||
points.push([y, x]);
|
||||
} else {
|
||||
points.push([x, y]);
|
||||
}
|
||||
});
|
||||
}
|
||||
series.push({data: points, label: field});
|
||||
});
|
||||
return series;
|
||||
},
|
||||
|
||||
@ -4,12 +4,12 @@ this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
(function($, my) {
|
||||
// ## DataGrid
|
||||
// ## (Data) Grid Dataset View
|
||||
//
|
||||
// Provides a tabular view on a Dataset.
|
||||
//
|
||||
// Initialize it with a `recline.Model.Dataset`.
|
||||
my.DataGrid = Backbone.View.extend({
|
||||
my.Grid = Backbone.View.extend({
|
||||
tagName: "div",
|
||||
className: "recline-grid-container",
|
||||
|
||||
@ -20,12 +20,16 @@ my.DataGrid = Backbone.View.extend({
|
||||
this.model.currentDocuments.bind('add', this.render);
|
||||
this.model.currentDocuments.bind('reset', this.render);
|
||||
this.model.currentDocuments.bind('remove', this.render);
|
||||
this.state = {};
|
||||
this.hiddenFields = [];
|
||||
this.tempState = {};
|
||||
var state = _.extend({
|
||||
hiddenFields: []
|
||||
}, modelEtc.state
|
||||
);
|
||||
this.state = new recline.Model.ObjectState(state);
|
||||
},
|
||||
|
||||
events: {
|
||||
'click .column-header-menu': 'onColumnHeaderClick',
|
||||
'click .column-header-menu .data-table-menu li a': 'onColumnHeaderClick',
|
||||
'click .row-header-menu': 'onRowHeaderClick',
|
||||
'click .root-header-menu': 'onRootHeaderClick',
|
||||
'click .data-table-menu li a': 'onMenuClick'
|
||||
@ -47,11 +51,11 @@ my.DataGrid = Backbone.View.extend({
|
||||
// Column and row menus
|
||||
|
||||
onColumnHeaderClick: function(e) {
|
||||
this.state.currentColumn = $(e.target).closest('.column-header').attr('data-field');
|
||||
this.tempState.currentColumn = $(e.target).closest('.column-header').attr('data-field');
|
||||
},
|
||||
|
||||
onRowHeaderClick: function(e) {
|
||||
this.state.currentRow = $(e.target).parents('tr:first').attr('data-id');
|
||||
this.tempState.currentRow = $(e.target).parents('tr:first').attr('data-id');
|
||||
},
|
||||
|
||||
onRootHeaderClick: function(e) {
|
||||
@ -59,7 +63,7 @@ my.DataGrid = Backbone.View.extend({
|
||||
{{#columns}} \
|
||||
<li><a data-action="showColumn" data-column="{{.}}" href="JavaScript:void(0);">Show column: {{.}}</a></li> \
|
||||
{{/columns}}';
|
||||
var tmp = $.mustache(tmpl, {'columns': this.hiddenFields});
|
||||
var tmp = $.mustache(tmpl, {'columns': this.state.get('hiddenFields')});
|
||||
this.el.find('.root-header-menu .dropdown-menu').html(tmp);
|
||||
},
|
||||
|
||||
@ -67,15 +71,15 @@ my.DataGrid = Backbone.View.extend({
|
||||
var self = this;
|
||||
e.preventDefault();
|
||||
var actions = {
|
||||
bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.state.currentColumn}); },
|
||||
bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.tempState.currentColumn}); },
|
||||
facet: function() {
|
||||
self.model.queryState.addFacet(self.state.currentColumn);
|
||||
self.model.queryState.addFacet(self.tempState.currentColumn);
|
||||
},
|
||||
facet_histogram: function() {
|
||||
self.model.queryState.addHistogramFacet(self.state.currentColumn);
|
||||
self.model.queryState.addHistogramFacet(self.tempState.currentColumn);
|
||||
},
|
||||
filter: function() {
|
||||
self.model.queryState.addTermFilter(self.state.currentColumn, '');
|
||||
self.model.queryState.addTermFilter(self.tempState.currentColumn, '');
|
||||
},
|
||||
transform: function() { self.showTransformDialog('transform'); },
|
||||
sortAsc: function() { self.setColumnSort('asc'); },
|
||||
@ -86,7 +90,7 @@ my.DataGrid = Backbone.View.extend({
|
||||
var doc = _.find(self.model.currentDocuments.models, function(doc) {
|
||||
// important this is == as the currentRow will be string (as comes
|
||||
// from DOM) while id may be int
|
||||
return doc.id == self.state.currentRow;
|
||||
return doc.id == self.tempState.currentRow;
|
||||
});
|
||||
doc.destroy().then(function() {
|
||||
self.model.currentDocuments.remove(doc);
|
||||
@ -105,7 +109,7 @@ my.DataGrid = Backbone.View.extend({
|
||||
var view = new my.ColumnTransform({
|
||||
model: this.model
|
||||
});
|
||||
view.state = this.state;
|
||||
view.state = this.tempState;
|
||||
view.render();
|
||||
$el.empty();
|
||||
$el.append(view.el);
|
||||
@ -131,17 +135,20 @@ my.DataGrid = Backbone.View.extend({
|
||||
|
||||
setColumnSort: function(order) {
|
||||
var sort = [{}];
|
||||
sort[0][this.state.currentColumn] = {order: order};
|
||||
sort[0][this.tempState.currentColumn] = {order: order};
|
||||
this.model.query({sort: sort});
|
||||
},
|
||||
|
||||
hideColumn: function() {
|
||||
this.hiddenFields.push(this.state.currentColumn);
|
||||
var hiddenFields = this.state.get('hiddenFields');
|
||||
hiddenFields.push(this.tempState.currentColumn);
|
||||
this.state.set({hiddenFields: hiddenFields});
|
||||
this.render();
|
||||
},
|
||||
|
||||
showColumn: function(e) {
|
||||
this.hiddenFields = _.without(this.hiddenFields, $(e.target).data('column'));
|
||||
var hiddenFields = _.without(this.state.get('hiddenFields'), $(e.target).data('column'));
|
||||
this.state.set({hiddenFields: hiddenFields});
|
||||
this.render();
|
||||
},
|
||||
|
||||
@ -197,41 +204,41 @@ my.DataGrid = Backbone.View.extend({
|
||||
render: function() {
|
||||
var self = this;
|
||||
this.fields = this.model.fields.filter(function(field) {
|
||||
return _.indexOf(self.hiddenFields, field.id) == -1;
|
||||
return _.indexOf(self.state.get('hiddenFields'), field.id) == -1;
|
||||
});
|
||||
var htmls = $.mustache(this.template, this.toTemplateJSON());
|
||||
this.el.html(htmls);
|
||||
this.model.currentDocuments.forEach(function(doc) {
|
||||
var tr = $('<tr />');
|
||||
self.el.find('tbody').append(tr);
|
||||
var newView = new my.DataGridRow({
|
||||
var newView = new my.GridRow({
|
||||
model: doc,
|
||||
el: tr,
|
||||
fields: self.fields
|
||||
});
|
||||
newView.render();
|
||||
});
|
||||
this.el.toggleClass('no-hidden', (self.hiddenFields.length === 0));
|
||||
this.el.toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
// ## DataGridRow View for rendering an individual document.
|
||||
// ## GridRow View for rendering an individual document.
|
||||
//
|
||||
// Since we want this to update in place it is up to creator to provider the element to attach to.
|
||||
//
|
||||
// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the DataGrid.
|
||||
// In addition you *must* pass in a FieldList in the constructor options. This should be list of fields for the Grid.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// <pre>
|
||||
// var row = new DataGridRow({
|
||||
// var row = new GridRow({
|
||||
// model: dataset-document,
|
||||
// el: dom-element,
|
||||
// fields: mydatasets.fields // a FieldList object
|
||||
// });
|
||||
// </pre>
|
||||
my.DataGridRow = Backbone.View.extend({
|
||||
my.GridRow = Backbone.View.extend({
|
||||
initialize: function(initData) {
|
||||
_.bindAll(this, 'render');
|
||||
this._fields = initData.fields;
|
||||
|
||||
376
src/view-map.js
376
src/view-map.js
@ -5,52 +5,157 @@ this.recline.View = this.recline.View || {};
|
||||
|
||||
(function($, my) {
|
||||
|
||||
// ## Map view for a Dataset using Leaflet mapping library.
|
||||
//
|
||||
// This view allows to plot gereferenced documents on a map. The location
|
||||
// information can be provided either via a field with
|
||||
// [GeoJSON](http://geojson.org) objects or two fields with latitude and
|
||||
// longitude coordinates.
|
||||
//
|
||||
// Initialization arguments are as standard for Dataset Views. State object may
|
||||
// have the following (optional) configuration options:
|
||||
//
|
||||
// <pre>
|
||||
// {
|
||||
// // geomField if specified will be used in preference to lat/lon
|
||||
// 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}
|
||||
// }
|
||||
// </pre>
|
||||
my.Map = Backbone.View.extend({
|
||||
|
||||
tagName: 'div',
|
||||
className: 'data-map-container',
|
||||
|
||||
latitudeFieldNames: ['lat','latitude'],
|
||||
longitudeFieldNames: ['lon','longitude'],
|
||||
geometryFieldNames: ['geom','the_geom','geometry','spatial'],
|
||||
|
||||
//TODO: In case we want to change the default markers
|
||||
/*
|
||||
markerOptions: {
|
||||
radius: 5,
|
||||
color: 'grey',
|
||||
fillColor: 'orange',
|
||||
weight: 2,
|
||||
opacity: 1,
|
||||
fillOpacity: 1
|
||||
},
|
||||
*/
|
||||
className: 'recline-map',
|
||||
|
||||
template: ' \
|
||||
<div class="editor"> \
|
||||
<form class="form-stacked"> \
|
||||
<div class="clearfix"> \
|
||||
<div class="editor-field-type"> \
|
||||
<label class="radio"> \
|
||||
<input type="radio" id="editor-field-type-latlon" name="editor-field-type" value="latlon" checked="checked"/> \
|
||||
Latitude / Longitude fields</label> \
|
||||
<label class="radio"> \
|
||||
<input type="radio" id="editor-field-type-geom" name="editor-field-type" value="geom" /> \
|
||||
GeoJSON field</label> \
|
||||
</div> \
|
||||
<div class="editor-field-type-latlon"> \
|
||||
<label>Latitude field</label> \
|
||||
<div class="input editor-lat-field"> \
|
||||
<select> \
|
||||
<option value=""></option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
</div> \
|
||||
<label>Longitude field</label> \
|
||||
<div class="input editor-lon-field"> \
|
||||
<select> \
|
||||
<option value=""></option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="editor-field-type-geom" style="display:none"> \
|
||||
<label>Geometry field (GeoJSON)</label> \
|
||||
<div class="input editor-geom-field"> \
|
||||
<select> \
|
||||
<option value=""></option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
</div> \
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="editor-buttons"> \
|
||||
<button class="btn editor-update-map">Update</button> \
|
||||
</div> \
|
||||
<input type="hidden" class="editor-id" value="map-1" /> \
|
||||
</div> \
|
||||
</form> \
|
||||
</div> \
|
||||
<div class="panel map"> \
|
||||
</div> \
|
||||
',
|
||||
|
||||
initialize: function(options, config) {
|
||||
var self = this;
|
||||
// These are the default field names that will be used if found.
|
||||
// If not found, the user will need to define the fields via the editor.
|
||||
latitudeFieldNames: ['lat','latitude'],
|
||||
longitudeFieldNames: ['lon','longitude'],
|
||||
geometryFieldNames: ['geom','the_geom','geometry','spatial','location'],
|
||||
|
||||
this.el = $(this.el);
|
||||
this.render();
|
||||
this.model.bind('change', function() {
|
||||
self._setupGeometryField();
|
||||
});
|
||||
|
||||
this.mapReady = false;
|
||||
// Define here events for UI elements
|
||||
events: {
|
||||
'click .editor-update-map': 'onEditorSubmit',
|
||||
'change .editor-field-type': 'onFieldTypeChange'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
|
||||
// Listen to changes in the fields
|
||||
this.model.fields.bind('change', function() {
|
||||
self._setupGeometryField();
|
||||
});
|
||||
this.model.fields.bind('add', this.render);
|
||||
this.model.fields.bind('reset', function(){
|
||||
self._setupGeometryField()
|
||||
self.render()
|
||||
});
|
||||
|
||||
// Listen to changes in the documents
|
||||
this.model.currentDocuments.bind('add', function(doc){self.redraw('add',doc)});
|
||||
this.model.currentDocuments.bind('remove', function(doc){self.redraw('remove',doc)});
|
||||
this.model.currentDocuments.bind('reset', function(){self.redraw('reset')});
|
||||
|
||||
// If the div was hidden, Leaflet needs to recalculate some sizes
|
||||
// to display properly
|
||||
this.bind('view:show',function(){
|
||||
self.map.invalidateSize();
|
||||
});
|
||||
|
||||
var stateData = _.extend({
|
||||
geomField: null,
|
||||
lonField: null,
|
||||
latField: null
|
||||
},
|
||||
options.state
|
||||
);
|
||||
this.state = new recline.Model.ObjectState(stateData);
|
||||
|
||||
this.mapReady = false;
|
||||
this.render();
|
||||
},
|
||||
|
||||
// Public: Adds the necessary elements to the page.
|
||||
//
|
||||
// Also sets up the editor fields and the map if necessary.
|
||||
render: function() {
|
||||
|
||||
var self = this;
|
||||
|
||||
htmls = $.mustache(this.template, this.model.toTemplateJSON());
|
||||
|
||||
$(this.el).html(htmls);
|
||||
this.$map = this.el.find('.panel.map');
|
||||
|
||||
if (this.geomReady && this.model.fields.length){
|
||||
if (this.state.get('geomField')){
|
||||
this._selectOption('editor-geom-field',this.state.get('geomField'));
|
||||
$('#editor-field-type-geom').attr('checked','checked').change();
|
||||
} else{
|
||||
this._selectOption('editor-lon-field',this.state.get('lonField'));
|
||||
this._selectOption('editor-lat-field',this.state.get('latField'));
|
||||
$('#editor-field-type-latlon').attr('checked','checked').change();
|
||||
}
|
||||
}
|
||||
|
||||
this.model.bind('query:done', function() {
|
||||
if (!self.geomReady){
|
||||
self._setupGeometryField();
|
||||
@ -65,47 +170,156 @@ my.Map = Backbone.View.extend({
|
||||
return this;
|
||||
},
|
||||
|
||||
redraw: function(){
|
||||
|
||||
// Public: Redraws the features on the map according to the action provided
|
||||
//
|
||||
// Actions can be:
|
||||
//
|
||||
// * reset: Clear all features
|
||||
// * add: Add one or n features (documents)
|
||||
// * remove: Remove one or n features (documents)
|
||||
// * refresh: Clear existing features and add all current documents
|
||||
//
|
||||
redraw: function(action,doc){
|
||||
var self = this;
|
||||
action = action || 'refresh';
|
||||
|
||||
if (this.geomReady){
|
||||
if (this.model.currentDocuments.length > 0){
|
||||
if (this.geomReady && this.mapReady){
|
||||
if (action == 'reset'){
|
||||
this.features.clearLayers();
|
||||
var bounds = new L.LatLngBounds();
|
||||
|
||||
this.model.currentDocuments.forEach(function(doc){
|
||||
var feature = self._getGeometryFromDocument(doc);
|
||||
if (feature){
|
||||
// Build popup contents
|
||||
// TODO: mustache?
|
||||
var html = '';
|
||||
for (key in doc.attributes) {
|
||||
html += '<div><strong>' + key + '</strong>: '+ doc.attributes[key] + '</div>';
|
||||
}
|
||||
feature.properties = {popupContent: html};
|
||||
|
||||
self.features.addGeoJSON(feature);
|
||||
|
||||
// TODO: bounds and center map
|
||||
}
|
||||
});
|
||||
} else if (action == 'add' && doc){
|
||||
this._add(doc);
|
||||
} else if (action == 'remove' && doc){
|
||||
this._remove(doc);
|
||||
} else if (action == 'refresh'){
|
||||
this.features.clearLayers();
|
||||
this._add(this.model.currentDocuments.models);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//
|
||||
// UI Event handlers
|
||||
//
|
||||
|
||||
// Public: Update map with user options
|
||||
//
|
||||
// Right now the only configurable option is what field(s) contains the
|
||||
// location information.
|
||||
//
|
||||
onEditorSubmit: function(e){
|
||||
e.preventDefault();
|
||||
if ($('#editor-field-type-geom').attr('checked')){
|
||||
this.state.set({
|
||||
geomField: $('.editor-geom-field > select > option:selected').val(),
|
||||
lonField: null,
|
||||
latField: null
|
||||
});
|
||||
} else {
|
||||
this.state.set({
|
||||
geomField: null,
|
||||
lonField: $('.editor-lon-field > select > option:selected').val(),
|
||||
latField: $('.editor-lat-field > select > option:selected').val()
|
||||
});
|
||||
}
|
||||
this.geomReady = (this.state.get('geomField') || (this.state.get('latField') && this.state.get('lonField')));
|
||||
this.redraw();
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
// Public: Shows the relevant select lists depending on the location field
|
||||
// type selected.
|
||||
//
|
||||
onFieldTypeChange: function(e){
|
||||
if (e.target.value == 'geom'){
|
||||
$('.editor-field-type-geom').show();
|
||||
$('.editor-field-type-latlon').hide();
|
||||
} else {
|
||||
$('.editor-field-type-geom').hide();
|
||||
$('.editor-field-type-latlon').show();
|
||||
}
|
||||
},
|
||||
|
||||
// Private: Add one or n features to the map
|
||||
//
|
||||
// For each document passed, a GeoJSON geometry will be extracted and added
|
||||
// to the features layer. If an exception is thrown, the process will be
|
||||
// stopped and an error notification shown.
|
||||
//
|
||||
// Each feature will have a popup associated with all the document fields.
|
||||
//
|
||||
_add: function(docs){
|
||||
|
||||
var self = this;
|
||||
|
||||
if (!(docs instanceof Array)) docs = [docs];
|
||||
|
||||
_.every(docs,function(doc){
|
||||
var feature = self._getGeometryFromDocument(doc);
|
||||
if (typeof feature === 'undefined'){
|
||||
// Empty field
|
||||
return true;
|
||||
} else if (feature instanceof Object){
|
||||
// Build popup contents
|
||||
// TODO: mustache?
|
||||
html = ''
|
||||
for (key in doc.attributes){
|
||||
html += '<div><strong>' + key + '</strong>: '+ doc.attributes[key] + '</div>'
|
||||
}
|
||||
feature.properties = {popupContent: html};
|
||||
|
||||
// Add a reference to the model id, which will allow us to
|
||||
// link this Leaflet layer to a Recline doc
|
||||
feature.properties.cid = doc.cid;
|
||||
|
||||
try {
|
||||
self.features.addGeoJSON(feature);
|
||||
} catch (except) {
|
||||
var msg = 'Wrong geometry value';
|
||||
if (except.message) msg += ' (' + except.message + ')';
|
||||
my.notify(msg,{category:'error'});
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
my.notify('Wrong geometry value',{category:'error'});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
},
|
||||
|
||||
// Private: Remove one or n features to the map
|
||||
//
|
||||
_remove: function(docs){
|
||||
|
||||
var self = this;
|
||||
|
||||
if (!(docs instanceof Array)) docs = [docs];
|
||||
|
||||
_.each(docs,function(doc){
|
||||
for (key in self.features._layers){
|
||||
if (self.features._layers[key].cid == doc.cid){
|
||||
self.features.removeLayer(self.features._layers[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// Private: Return a GeoJSON geomtry extracted from the document fields
|
||||
//
|
||||
_getGeometryFromDocument: function(doc){
|
||||
if (this.geomReady){
|
||||
if (this._geomFieldName){
|
||||
if (this.state.get('geomField')){
|
||||
// We assume that the contents of the field are a valid GeoJSON object
|
||||
return doc.attributes[this._geomFieldName];
|
||||
} else if (this._lonFieldName && this._latFieldName){
|
||||
return doc.attributes[this.state.get('geomField')];
|
||||
} else if (this.state.get('lonField') && this.state.get('latField')){
|
||||
// We'll create a GeoJSON like point object from the two lat/lon fields
|
||||
return {
|
||||
type: 'Point',
|
||||
coordinates: [
|
||||
doc.attributes[this._lonFieldName],
|
||||
doc.attributes[this._latFieldName]
|
||||
doc.attributes[this.state.get('lonField')],
|
||||
doc.attributes[this.state.get('latField')]
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -113,51 +327,79 @@ my.Map = Backbone.View.extend({
|
||||
}
|
||||
},
|
||||
|
||||
// Private: Check if there is a field with GeoJSON geometries or alternatively,
|
||||
// two fields with lat/lon values.
|
||||
//
|
||||
// If not found, the user can define them via the UI form.
|
||||
_setupGeometryField: function(){
|
||||
var geomField, latField, lonField;
|
||||
|
||||
// Check if there is a field with GeoJSON geometries or alternatively,
|
||||
// two fields with lat/lon values
|
||||
this._geomFieldName = this._checkField(this.geometryFieldNames);
|
||||
this._latFieldName = this._checkField(this.latitudeFieldNames);
|
||||
this._lonFieldName = this._checkField(this.longitudeFieldNames);
|
||||
|
||||
// TODO: Allow users to choose the fields
|
||||
|
||||
this.geomReady = (this._geomFieldName || (this._latFieldName && this._lonFieldName));
|
||||
this.state.set({
|
||||
geomField: this._checkField(this.geometryFieldNames),
|
||||
latField: this._checkField(this.latitudeFieldNames),
|
||||
lonField: this._checkField(this.longitudeFieldNames)
|
||||
});
|
||||
this.geomReady = (this.state.get('geomField') || (this.state.get('latField') && this.state.get('lonField')));
|
||||
},
|
||||
|
||||
// Private: Check if a field in the current model exists in the provided
|
||||
// list of names.
|
||||
//
|
||||
//
|
||||
_checkField: function(fieldNames){
|
||||
var field;
|
||||
var modelFieldNames = this.model.fields.pluck('id');
|
||||
for (var i = 0; i < fieldNames.length; i++){
|
||||
field = this.model.fields.get(fieldNames[i]);
|
||||
if (field) return field.id;
|
||||
for (var j = 0; j < modelFieldNames.length; j++){
|
||||
if (modelFieldNames[j].toLowerCase() == fieldNames[i].toLowerCase())
|
||||
return modelFieldNames[j];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
// Private: Sets up the Leaflet map control and the features layer.
|
||||
//
|
||||
// The map uses a base layer from [MapQuest](http://www.mapquest.com) based
|
||||
// on [OpenStreetMap](http://openstreetmap.org).
|
||||
//
|
||||
_setupMap: function(){
|
||||
|
||||
this.map = new L.Map(this.$map.get(0));
|
||||
|
||||
// MapQuest OpenStreetMap base map
|
||||
var mapUrl = "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png";
|
||||
var osmAttribution = 'Map data © 2011 OpenStreetMap contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">';
|
||||
var bg = new L.TileLayer(mapUrl, {maxZoom: 18, attribution: osmAttribution ,subdomains: '1234'});
|
||||
this.map.addLayer(bg);
|
||||
|
||||
// Layer to hold the features
|
||||
this.features = new L.GeoJSON();
|
||||
this.features.on('featureparse', function (e) {
|
||||
if (e.properties && e.properties.popupContent){
|
||||
e.layer.bindPopup(e.properties.popupContent);
|
||||
}
|
||||
if (e.properties && e.properties.cid){
|
||||
e.layer.cid = e.properties.cid;
|
||||
}
|
||||
|
||||
});
|
||||
this.map.addLayer(this.features);
|
||||
|
||||
this.map.setView(new L.LatLng(0, 0), 2);
|
||||
|
||||
this.mapReady = true;
|
||||
},
|
||||
|
||||
// Private: Helper function to select an option from a select list
|
||||
//
|
||||
_selectOption: function(id,value){
|
||||
var options = $('.' + id + ' > select > option');
|
||||
if (options){
|
||||
options.each(function(opt){
|
||||
if (this.value == value) {
|
||||
$(this).attr('selected','selected');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
271
src/view.js
271
src/view.js
@ -1,4 +1,83 @@
|
||||
/*jshint multistr:true */
|
||||
|
||||
// # Recline Views
|
||||
//
|
||||
// Recline Views are Backbone Views and in keeping with normal Backbone views
|
||||
// are Widgets / Components displaying something in the DOM. Like all Backbone
|
||||
// views they have a pointer to a model or a collection and is bound to an
|
||||
// element.
|
||||
//
|
||||
// Views provided by core Recline are crudely divided into two types:
|
||||
//
|
||||
// * Dataset Views: a View intended for displaying a recline.Model.Dataset
|
||||
// in some fashion. Examples are the Grid, Graph and Map views.
|
||||
// * Widget Views: a widget used for displaying some specific (and
|
||||
// smaller) aspect of a dataset or the application. Examples are
|
||||
// QueryEditor and FilterEditor which both provide a way for editing (a
|
||||
// part of) a `recline.Model.Query` associated to a Dataset.
|
||||
//
|
||||
// ## Dataset View
|
||||
//
|
||||
// These views are just Backbone views with a few additional conventions:
|
||||
//
|
||||
// 1. The model passed to the View should always be a recline.Model.Dataset instance
|
||||
// 2. Views should generate their own root element rather than having it passed
|
||||
// in.
|
||||
// 3. Views should apply a css class named 'recline-{view-name-lower-cased} to
|
||||
// the root element (and for all CSS for this view to be qualified using this
|
||||
// CSS class)
|
||||
// 4. Read-only mode: CSS for this view should respect/utilize
|
||||
// recline-read-only class to trigger read-only behaviour (this class will
|
||||
// usually be set on some parent element of the view's root element.
|
||||
// 5. State: state (configuration) information for the view should be stored on
|
||||
// an attribute named state that is an instance of a Backbone Model (or, more
|
||||
// speficially, be an instance of `recline.Model.ObjectState`). In addition,
|
||||
// a state attribute may be specified in the Hash passed to a View on
|
||||
// iniitialization and this information should be used to set the initial
|
||||
// state of the view.
|
||||
//
|
||||
// Example of state would be the set of fields being plotted in a graph
|
||||
// view.
|
||||
//
|
||||
// More information about State can be found below.
|
||||
//
|
||||
// To summarize some of this, the initialize function for a Dataset View should
|
||||
// look like:
|
||||
//
|
||||
// <pre>
|
||||
// initialize: {
|
||||
// model: {a recline.Model.Dataset instance}
|
||||
// // el: {do not specify - instead view should create}
|
||||
// state: {(optional) Object / Hash specifying initial state}
|
||||
// ...
|
||||
// }
|
||||
// </pre>
|
||||
//
|
||||
// Note: Dataset Views in core Recline have a common layout on disk as
|
||||
// follows, where ViewName is the named of View class:
|
||||
//
|
||||
// <pre>
|
||||
// src/view-{lower-case-ViewName}.js
|
||||
// css/{lower-case-ViewName}.css
|
||||
// test/view-{lower-case-ViewName}.js
|
||||
// </pre>
|
||||
//
|
||||
// ### State
|
||||
//
|
||||
// State information exists in order to support state serialization into the
|
||||
// url or elsewhere and reloading of application from a stored state.
|
||||
//
|
||||
// State is available not only for individual views (as described above) but
|
||||
// for the dataset (e.g. the current query). For an example of pulling together
|
||||
// state from across multiple components see `recline.View.DataExplorer`.
|
||||
//
|
||||
// ### Writing your own Views
|
||||
//
|
||||
// See the existing Views.
|
||||
//
|
||||
// ----
|
||||
|
||||
// Standard JS module setup
|
||||
this.recline = this.recline || {};
|
||||
this.recline.View = this.recline.View || {};
|
||||
|
||||
@ -11,47 +90,62 @@ this.recline.View = this.recline.View || {};
|
||||
// var myExplorer = new model.recline.DataExplorer({
|
||||
// model: {{recline.Model.Dataset instance}}
|
||||
// el: {{an existing dom element}}
|
||||
// views: {{page views}}
|
||||
// config: {{config options -- see below}}
|
||||
// views: {{dataset views}}
|
||||
// state: {{state configuration -- see below}}
|
||||
// });
|
||||
// </pre>
|
||||
//
|
||||
// ### Parameters
|
||||
//
|
||||
// **model**: (required) Dataset instance.
|
||||
// **model**: (required) recline.model.Dataset instance.
|
||||
//
|
||||
// **el**: (required) DOM element.
|
||||
// **el**: (required) DOM element to bind to. NB: the element already
|
||||
// being in the DOM is important for rendering of some subviews (e.g.
|
||||
// Graph).
|
||||
//
|
||||
// **views**: (optional) the views (Grid, Graph etc) for DataExplorer to
|
||||
// show. This is an array of view hashes. If not provided
|
||||
// just initialize a DataGrid with id 'grid'. Example:
|
||||
// **views**: (optional) the dataset views (Grid, Graph etc) for
|
||||
// DataExplorer to show. This is an array of view hashes. If not provided
|
||||
// initialize with (recline.View.)Grid, Graph, and Map views (with obvious id
|
||||
// and labels!).
|
||||
//
|
||||
// <pre>
|
||||
// var views = [
|
||||
// {
|
||||
// id: 'grid', // used for routing
|
||||
// label: 'Grid', // used for view switcher
|
||||
// view: new recline.View.DataGrid({
|
||||
// view: new recline.View.Grid({
|
||||
// model: dataset
|
||||
// })
|
||||
// },
|
||||
// {
|
||||
// id: 'graph',
|
||||
// label: 'Graph',
|
||||
// view: new recline.View.FlotGraph({
|
||||
// view: new recline.View.Graph({
|
||||
// model: dataset
|
||||
// })
|
||||
// }
|
||||
// ];
|
||||
// </pre>
|
||||
//
|
||||
// **config**: Config options like:
|
||||
// **state**: standard state config for this view. This state is slightly
|
||||
// special as it includes config of many of the subviews.
|
||||
//
|
||||
// * readOnly: true/false (default: false) value indicating whether to
|
||||
// operate in read-only mode (hiding all editing options).
|
||||
// <pre>
|
||||
// state = {
|
||||
// query: {dataset query state - see dataset.queryState object}
|
||||
// view-{id1}: {view-state for this view}
|
||||
// view-{id2}: {view-state for }
|
||||
// ...
|
||||
// // Explorer
|
||||
// currentView: id of current view (defaults to first view if not specified)
|
||||
// readOnly: (default: false) run in read-only mode
|
||||
// }
|
||||
// </pre>
|
||||
//
|
||||
// NB: the element already being in the DOM is important for rendering of
|
||||
// FlotGraph subview.
|
||||
// Note that at present we do *not* serialize information about the actual set
|
||||
// of views in use -- e.g. those specified by the views argument -- but instead
|
||||
// expect either that the default views are fine or that the client to have
|
||||
// initialized the DataExplorer with the relevant views themselves.
|
||||
my.DataExplorer = Backbone.View.extend({
|
||||
template: ' \
|
||||
<div class="recline-data-explorer"> \
|
||||
@ -60,7 +154,7 @@ my.DataExplorer = Backbone.View.extend({
|
||||
<div class="header"> \
|
||||
<ul class="navigation"> \
|
||||
{{#views}} \
|
||||
<li><a href="#{{id}}" class="btn">{{label}}</a> \
|
||||
<li><a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
|
||||
{{/views}} \
|
||||
</ul> \
|
||||
<div class="recline-results-info"> \
|
||||
@ -83,33 +177,51 @@ my.DataExplorer = Backbone.View.extend({
|
||||
</div> \
|
||||
',
|
||||
events: {
|
||||
'click .menu-right a': 'onMenuClick'
|
||||
'click .menu-right a': '_onMenuClick',
|
||||
'click .navigation a': '_onSwitchView'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
this.el = $(this.el);
|
||||
this.config = _.extend({
|
||||
readOnly: false
|
||||
},
|
||||
options.config);
|
||||
if (this.config.readOnly) {
|
||||
this.setReadOnly();
|
||||
}
|
||||
// Hash of 'page' views (i.e. those for whole page) keyed by page name
|
||||
this._setupState(options.state);
|
||||
if (options.views) {
|
||||
this.pageViews = options.views;
|
||||
} else {
|
||||
this.pageViews = [{
|
||||
id: 'grid',
|
||||
label: 'Grid',
|
||||
view: new my.DataGrid({
|
||||
model: this.model
|
||||
})
|
||||
view: new my.Grid({
|
||||
model: this.model,
|
||||
state: this.state.get('view-grid')
|
||||
}),
|
||||
}, {
|
||||
id: 'graph',
|
||||
label: 'Graph',
|
||||
view: new my.Graph({
|
||||
model: this.model,
|
||||
state: this.state.get('view-graph')
|
||||
}),
|
||||
}, {
|
||||
id: 'map',
|
||||
label: 'Map',
|
||||
view: new my.Map({
|
||||
model: this.model,
|
||||
state: this.state.get('view-map')
|
||||
}),
|
||||
}];
|
||||
}
|
||||
// this must be called after pageViews are created
|
||||
// these must be called after pageViews are created
|
||||
this.render();
|
||||
this._bindStateChanges();
|
||||
// now do updates based on state (need to come after render)
|
||||
if (this.state.get('readOnly')) {
|
||||
this.setReadOnly();
|
||||
}
|
||||
if (this.state.get('currentView')) {
|
||||
this.updateNav(this.state.get('currentView'));
|
||||
}
|
||||
|
||||
this.router = new Backbone.Router();
|
||||
this.setupRouting();
|
||||
@ -125,7 +237,7 @@ my.DataExplorer = Backbone.View.extend({
|
||||
var qs = my.parseHashQueryString();
|
||||
qs.reclineQuery = JSON.stringify(self.model.queryState.toJSON());
|
||||
var out = my.getNewHashForQueryString(qs);
|
||||
self.router.navigate(out);
|
||||
// self.router.navigate(out);
|
||||
});
|
||||
this.model.bind('query:fail', function(error) {
|
||||
my.clearNotifications();
|
||||
@ -149,11 +261,7 @@ my.DataExplorer = Backbone.View.extend({
|
||||
// note this.model and dataset returned are the same
|
||||
this.model.fetch()
|
||||
.done(function(dataset) {
|
||||
var queryState = my.parseHashQueryString().reclineQuery;
|
||||
if (queryState) {
|
||||
queryState = JSON.parse(queryState);
|
||||
}
|
||||
self.model.query(queryState);
|
||||
self.model.query(self.state.get('query'));
|
||||
})
|
||||
.fail(function(error) {
|
||||
my.notify(error.message, {category: 'error', persist: true});
|
||||
@ -161,12 +269,11 @@ my.DataExplorer = Backbone.View.extend({
|
||||
},
|
||||
|
||||
setReadOnly: function() {
|
||||
this.el.addClass('read-only');
|
||||
this.el.addClass('recline-read-only');
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var tmplData = this.model.toTemplateJSON();
|
||||
tmplData.displayCount = this.config.displayCount;
|
||||
tmplData.views = this.pageViews;
|
||||
var template = $.mustache(this.template, tmplData);
|
||||
$(this.el).html(template);
|
||||
@ -193,33 +300,37 @@ my.DataExplorer = Backbone.View.extend({
|
||||
setupRouting: function() {
|
||||
var self = this;
|
||||
// Default route
|
||||
this.router.route(/^(\?.*)?$/, this.pageViews[0].id, function(queryString) {
|
||||
self.updateNav(self.pageViews[0].id, queryString);
|
||||
});
|
||||
$.each(this.pageViews, function(idx, view) {
|
||||
self.router.route(/^([^?]+)(\?.*)?/, 'view', function(viewId, queryString) {
|
||||
self.updateNav(viewId, queryString);
|
||||
});
|
||||
// this.router.route(/^(\?.*)?$/, this.pageViews[0].id, function(queryString) {
|
||||
// self.updateNav(self.pageViews[0].id, queryString);
|
||||
// });
|
||||
// $.each(this.pageViews, function(idx, view) {
|
||||
// self.router.route(/^([^?]+)(\?.*)?/, 'view', function(viewId, queryString) {
|
||||
// self.updateNav(viewId, queryString);
|
||||
// });
|
||||
// });
|
||||
this.router.route(/.*/, 'view', function() {
|
||||
});
|
||||
},
|
||||
|
||||
updateNav: function(pageName, queryString) {
|
||||
updateNav: function(pageName) {
|
||||
this.el.find('.navigation li').removeClass('active');
|
||||
this.el.find('.navigation li a').removeClass('disabled');
|
||||
var $el = this.el.find('.navigation li a[href=#' + pageName + ']');
|
||||
var $el = this.el.find('.navigation li a[data-view="' + pageName + '"]');
|
||||
$el.parent().addClass('active');
|
||||
$el.addClass('disabled');
|
||||
// show the specific page
|
||||
_.each(this.pageViews, function(view, idx) {
|
||||
if (view.id === pageName) {
|
||||
view.view.el.show();
|
||||
view.view.trigger('view:show');
|
||||
} else {
|
||||
view.view.el.hide();
|
||||
view.view.trigger('view:hide');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
onMenuClick: function(e) {
|
||||
_onMenuClick: function(e) {
|
||||
e.preventDefault();
|
||||
var action = $(e.target).attr('data-action');
|
||||
if (action === 'filters') {
|
||||
@ -227,9 +338,76 @@ my.DataExplorer = Backbone.View.extend({
|
||||
} else if (action === 'facets') {
|
||||
this.$facetViewer.show();
|
||||
}
|
||||
},
|
||||
|
||||
_onSwitchView: function(e) {
|
||||
e.preventDefault();
|
||||
var viewName = $(e.target).attr('data-view');
|
||||
this.updateNav(viewName);
|
||||
this.state.set({currentView: viewName});
|
||||
},
|
||||
|
||||
// create a state object for this view and do the job of
|
||||
//
|
||||
// a) initializing it from both data passed in and other sources (e.g. hash url)
|
||||
//
|
||||
// b) ensure the state object is updated in responese to changes in subviews, query etc.
|
||||
_setupState: function(initialState) {
|
||||
var self = this;
|
||||
// get data from the query string / hash url plus some defaults
|
||||
var qs = my.parseHashQueryString();
|
||||
var query = qs.reclineQuery;
|
||||
query = query ? JSON.parse(query) : self.model.queryState.toJSON();
|
||||
// backwards compatability (now named view-graph but was named graph)
|
||||
var graphState = qs['view-graph'] || qs.graph;
|
||||
graphState = graphState ? JSON.parse(graphState) : {};
|
||||
|
||||
// now get default data + hash url plus initial state and initial our state object with it
|
||||
var stateData = _.extend({
|
||||
query: query,
|
||||
'view-graph': graphState,
|
||||
backend: this.model.backend.__type__,
|
||||
dataset: this.model.toJSON(),
|
||||
currentView: null,
|
||||
readOnly: false
|
||||
},
|
||||
initialState);
|
||||
this.state = new recline.Model.ObjectState(stateData);
|
||||
},
|
||||
|
||||
_bindStateChanges: function() {
|
||||
var self = this;
|
||||
// finally ensure we update our state object when state of sub-object changes so that state is always up to date
|
||||
this.model.queryState.bind('change', function() {
|
||||
self.state.set({query: self.model.queryState.toJSON()});
|
||||
});
|
||||
_.each(this.pageViews, function(pageView) {
|
||||
if (pageView.view.state && pageView.view.state.bind) {
|
||||
var update = {};
|
||||
update['view-' + pageView.id] = pageView.view.state.toJSON();
|
||||
self.state.set(update);
|
||||
pageView.view.state.bind('change', function() {
|
||||
var update = {};
|
||||
update['view-' + pageView.id] = pageView.view.state.toJSON();
|
||||
self.state.set(update);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ### DataExplorer.restore
|
||||
//
|
||||
// Restore a DataExplorer instance from a serialized state including the associated dataset
|
||||
my.DataExplorer.restore = function(state) {
|
||||
var dataset = recline.Model.Dataset.restore(state);
|
||||
var explorer = new my.DataExplorer({
|
||||
model: dataset,
|
||||
state: state
|
||||
});
|
||||
return explorer;
|
||||
}
|
||||
|
||||
my.QueryEditor = Backbone.View.extend({
|
||||
className: 'recline-query-editor',
|
||||
template: ' \
|
||||
@ -505,6 +683,9 @@ my.composeQueryString = function(queryParams) {
|
||||
var queryString = '?';
|
||||
var items = [];
|
||||
$.each(queryParams, function(key, value) {
|
||||
if (typeof(value) === 'object') {
|
||||
value = JSON.stringify(value);
|
||||
}
|
||||
items.push(key + '=' + value);
|
||||
});
|
||||
queryString += items.join('&');
|
||||
|
||||
@ -108,10 +108,11 @@ var sample_data = {
|
||||
};
|
||||
|
||||
test("ElasticSearch", function() {
|
||||
var backend = new recline.Backend.ElasticSearch();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'https://localhost:9200/my-es-db/my-es-type'
|
||||
},
|
||||
'elasticsearch'
|
||||
backend
|
||||
);
|
||||
|
||||
var stub = sinon.stub($, 'ajax', function(options) {
|
||||
|
||||
@ -17,7 +17,7 @@ test("parseCSV", function() {
|
||||
var csv = '"Jones, Jay", 10\n' +
|
||||
'"Xyz ""ABC"" O\'Brien", 11:35\n' +
|
||||
'"Other, AN", 12:35\n';
|
||||
var array = recline.Backend.parseCSV(csv, true);
|
||||
var array = recline.Backend.parseCSV(csv, {trim : true});
|
||||
deepEqual(exp, array);
|
||||
|
||||
var csv = 'Name, Value\n' +
|
||||
@ -29,4 +29,19 @@ test("parseCSV", function() {
|
||||
equal(dataset.currentDocuments.length, 3);
|
||||
});
|
||||
|
||||
test("parseCSVsemicolon", function() {
|
||||
var csv = '"Jones; Jay";10\n' +
|
||||
'"Xyz ""ABC"" O\'Brien";11:35\n' +
|
||||
'"Other; AN";12:35\n';
|
||||
|
||||
var array = recline.Backend.parseCSV(csv, {separator : ';'});
|
||||
var exp = [
|
||||
['Jones; Jay', 10],
|
||||
['Xyz "ABC" O\'Brien', '11:35' ],
|
||||
['Other; AN', '12:35' ]
|
||||
];
|
||||
deepEqual(exp, array);
|
||||
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
|
||||
@ -79,6 +79,20 @@ test('Memory Backend: query sort', function () {
|
||||
});
|
||||
});
|
||||
|
||||
test('Memory Backend: query string', function () {
|
||||
var dataset = makeBackendDataset();
|
||||
dataset.fetch();
|
||||
dataset.query({q: 'UK'}).then(function() {
|
||||
equal(dataset.currentDocuments.length, 3);
|
||||
deepEqual(dataset.currentDocuments.pluck('country'), ['UK', 'UK', 'UK']);
|
||||
});
|
||||
|
||||
dataset.query({q: 'UK 6'}).then(function() {
|
||||
equal(dataset.currentDocuments.length, 1);
|
||||
deepEqual(dataset.currentDocuments.models[0].id, 1);
|
||||
});
|
||||
});
|
||||
|
||||
test('Memory Backend: filters', function () {
|
||||
var dataset = makeBackendDataset();
|
||||
dataset.queryState.addTermFilter('country', 'UK');
|
||||
@ -89,7 +103,6 @@ test('Memory Backend: filters', function () {
|
||||
});
|
||||
|
||||
test('Memory Backend: facet', function () {
|
||||
console.log('here');
|
||||
var dataset = makeBackendDataset();
|
||||
dataset.queryState.addFacet('country');
|
||||
dataset.query().then(function() {
|
||||
@ -203,10 +216,11 @@ var dataProxyData = {
|
||||
test('DataProxy Backend', function() {
|
||||
// needed only if not stubbing
|
||||
// stop();
|
||||
var backend = new recline.Backend.DataProxy();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'http://webstore.thedatahub.org/rufuspollock/gold_prices/data.csv'
|
||||
},
|
||||
'dataproxy'
|
||||
backend
|
||||
);
|
||||
|
||||
var stub = sinon.stub($, 'ajax', function(options) {
|
||||
@ -405,10 +419,11 @@ var sample_gdocs_spreadsheet_data = {
|
||||
}
|
||||
|
||||
test("GDoc Backend", function() {
|
||||
var backend = new recline.Backend.GDoc();
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'https://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values?alt=json'
|
||||
},
|
||||
'gdocs'
|
||||
backend
|
||||
);
|
||||
|
||||
var stub = sinon.stub($, 'getJSON', function(options, cb) {
|
||||
@ -436,7 +451,7 @@ test("GDoc Backend.getUrl", function() {
|
||||
var dataset = new recline.Model.Dataset({
|
||||
url: 'https://docs.google.com/spreadsheet/ccc?key=' + key + '#gid=0'
|
||||
});
|
||||
var backend = recline.Model.backends['gdocs'];
|
||||
var backend = new recline.Backend.GDoc();
|
||||
var out = backend.getUrl(dataset);
|
||||
var exp = 'https://spreadsheets.google.com/feeds/list/' + key + '/1/public/values?alt=json'
|
||||
equal(exp, out);
|
||||
|
||||
34
test/base.js
Normal file
34
test/base.js
Normal file
@ -0,0 +1,34 @@
|
||||
var Fixture = {
|
||||
getDataset: function() {
|
||||
var fields = [
|
||||
{id: 'x'},
|
||||
{id: 'y'},
|
||||
{id: 'z'},
|
||||
{id: 'country'},
|
||||
{id: 'label'},
|
||||
{id: 'lat'},
|
||||
{id: 'lon'}
|
||||
];
|
||||
var documents = [
|
||||
{id: 0, x: 1, y: 2, z: 3, country: 'DE', label: 'first', lat:52.56, lon:13.40},
|
||||
{id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second', lat:54.97, lon:-1.60},
|
||||
{id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third', lat:40.00, lon:-75.5},
|
||||
{id: 3, x: 4, y: 8, z: 12, country: 'UK', label: 'fourth', lat:57.27, lon:-6.20},
|
||||
{id: 4, x: 5, y: 10, z: 15, country: 'UK', label: 'fifth', lat:51.58, lon:0},
|
||||
{id: 5, x: 6, y: 12, z: 18, country: 'DE', label: 'sixth', lat:51.04, lon:7.9}
|
||||
];
|
||||
var dataset = recline.Backend.createDataset(documents, fields);
|
||||
return dataset;
|
||||
}
|
||||
};
|
||||
|
||||
function assertPresent(selector, el) {
|
||||
var found = el ? $(el).find(selector) : $(selector);
|
||||
ok(found.length > 0);
|
||||
}
|
||||
|
||||
function assertNotPresent(selector, el) {
|
||||
var found = el ? $(el).find(selector) : $(selector);
|
||||
equal(found.length, 0);
|
||||
}
|
||||
|
||||
@ -4,32 +4,43 @@
|
||||
<head>
|
||||
<title>Qunit Tests</title>
|
||||
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen" />
|
||||
<!-- need this stylesheet because flot will complain if canvas does not have a height -->
|
||||
<link rel="stylesheet" href="../css/graph.css" type="text/css" media="screen" />
|
||||
|
||||
<script type="text/javascript" src="../vendor/jquery-1.7.1.js"></script>
|
||||
<script type="text/javascript" src="../vendor/underscore-1.1.6.js"></script>
|
||||
<script type="text/javascript" src="../vendor/backbone-0.5.1.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery-ui-1.8.14.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.flot-0.7.js"></script>
|
||||
<script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
|
||||
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
|
||||
|
||||
<script type="text/javascript" src="qunit/qunit.js"></script>
|
||||
<script src="sinon/1.1.1/sinon.js"></script>
|
||||
<script src="sinon-qunit/1.0.0/sinon-qunit.js"></script>
|
||||
|
||||
<script type="text/javascript" src="base.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../src/model.js"></script>
|
||||
<script type="text/javascript" src="model.test.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/base.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/memory.js"></script>
|
||||
<script type="text/javascript" src="../src/backend/dataproxy.js"></script>
|
||||
<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/localcsv.js"></script>
|
||||
<script type="text/javascript" src="model.test.js"></script>
|
||||
<script type="text/javascript" src="backend.test.js"></script>
|
||||
<script type="text/javascript" src="backend.elasticsearch.test.js"></script>
|
||||
<script type="text/javascript" src="backend.localcsv.test.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../src/view.js"></script>
|
||||
<script type="text/javascript" src="../src/view-grid.js"></script>
|
||||
<script type="text/javascript" src="../src/view-transform-dialog.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="view-grid.test.js"></script>
|
||||
<script type="text/javascript" src="view-graph.test.js"></script>
|
||||
<script type="text/javascript" src="view.test.js"></script>
|
||||
<script type="text/javascript" src="util.test.js"></script>
|
||||
</head>
|
||||
@ -42,6 +53,8 @@
|
||||
<div class="fixtures">
|
||||
<table class="test-datatable">
|
||||
</table>
|
||||
|
||||
<div class="data-explorer-here"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -103,6 +103,16 @@ test('Dataset _prepareQuery', function () {
|
||||
deepEqual(out, exp);
|
||||
});
|
||||
|
||||
test('Dataset _backendFromString', function () {
|
||||
var dataset = new recline.Model.Dataset();
|
||||
|
||||
var out = dataset._backendFromString('recline.Backend.Memory');
|
||||
equal(out.__type__, 'memory');
|
||||
|
||||
var out = dataset._backendFromString('dataproxy');
|
||||
equal(out.__type__, 'dataproxy');
|
||||
});
|
||||
|
||||
|
||||
// =================================
|
||||
// Query
|
||||
|
||||
13
test/view-graph.test.js
Normal file
13
test/view-graph.test.js
Normal file
@ -0,0 +1,13 @@
|
||||
module("View - Graph");
|
||||
|
||||
test('basics', function () {
|
||||
var dataset = Fixture.getDataset();
|
||||
var view = new recline.View.Graph({
|
||||
model: dataset
|
||||
});
|
||||
$('.fixtures').append(view.el);
|
||||
equal(view.state.get('graphType'), 'lines-and-points');
|
||||
// view will auto render ...
|
||||
assertPresent('.editor', view.el);
|
||||
view.remove();
|
||||
});
|
||||
59
test/view-grid.test.js
Normal file
59
test/view-grid.test.js
Normal file
@ -0,0 +1,59 @@
|
||||
(function ($) {
|
||||
|
||||
module("View - Grid");
|
||||
|
||||
test('menu - hideColumn', function () {
|
||||
var dataset = Fixture.getDataset();
|
||||
var view = new recline.View.Grid({
|
||||
model: dataset
|
||||
});
|
||||
$('.fixtures .test-datatable').append(view.el);
|
||||
view.render();
|
||||
|
||||
assertPresent('.column-header[data-field="x"]');
|
||||
var hideColumn = view.el.find('.column-header[data-field="x"] a[data-action="hideColumn"]');
|
||||
hideColumn.trigger('click');
|
||||
assertNotPresent('.column-header[data-field="x"]', view.el);
|
||||
|
||||
// also test a bit of state
|
||||
deepEqual(view.state.toJSON(), {hiddenFields: ['x']});
|
||||
view.remove();
|
||||
});
|
||||
|
||||
test('state', function () {
|
||||
var dataset = Fixture.getDataset();
|
||||
var view = new recline.View.Grid({
|
||||
model: dataset,
|
||||
state: {
|
||||
hiddenFields: ['z']
|
||||
}
|
||||
});
|
||||
$('.fixtures .test-datatable').append(view.el);
|
||||
view.render();
|
||||
assertPresent('.column-header[data-field="x"]');
|
||||
assertNotPresent('.column-header[data-field="z"]');
|
||||
view.remove();
|
||||
});
|
||||
|
||||
test('new GridRow View', function () {
|
||||
var $el = $('<tr />');
|
||||
$('.fixtures .test-datatable').append($el);
|
||||
var doc = new recline.Model.Document({
|
||||
'id': 1,
|
||||
'b': '2',
|
||||
'a': '1'
|
||||
});
|
||||
var view = new recline.View.GridRow({
|
||||
model: doc
|
||||
, el: $el
|
||||
, fields: new recline.Model.FieldList([{id: 'a'}, {id: 'b'}])
|
||||
});
|
||||
view.render();
|
||||
ok($el.attr('data-id'), '1');
|
||||
var tds = $el.find('td');
|
||||
equal(tds.length, 3);
|
||||
equal($(tds[1]).attr('data-field'), 'a');
|
||||
view.remove();
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
@ -1,25 +1,76 @@
|
||||
(function ($) {
|
||||
|
||||
module("View");
|
||||
module("View - Explorer");
|
||||
|
||||
test('new DataGridRow View', function () {
|
||||
var $el = $('<tr />');
|
||||
$('.fixtures .test-datatable').append($el);
|
||||
var doc = new recline.Model.Document({
|
||||
'id': 1,
|
||||
'b': '2',
|
||||
'a': '1'
|
||||
});
|
||||
var view = new recline.View.DataGridRow({
|
||||
model: doc
|
||||
, el: $el
|
||||
, fields: new recline.Model.FieldList([{id: 'a'}, {id: 'b'}])
|
||||
test('basic explorer functionality', function () {
|
||||
var $el = $('<div class="test-view-explorer-basic" />');
|
||||
$('.fixtures .data-explorer-here').append($el);
|
||||
var dataset = Fixture.getDataset();
|
||||
var explorer = new recline.View.DataExplorer({
|
||||
model: dataset,
|
||||
el: $el
|
||||
});
|
||||
view.render();
|
||||
ok($el.attr('data-id'), '1');
|
||||
var tds = $el.find('td');
|
||||
equal(tds.length, 3);
|
||||
equal($(tds[1]).attr('data-field'), 'a');
|
||||
var $explorer = $el.find('.recline-data-explorer');
|
||||
equal($explorer.length, 1);
|
||||
$el.remove();
|
||||
});
|
||||
|
||||
test('get State', function () {
|
||||
var $el = $('<div class="test-view-explorer-getstate" />');
|
||||
$('.fixtures .data-explorer-here').append($el);
|
||||
var dataset = Fixture.getDataset();
|
||||
var explorer = new recline.View.DataExplorer({
|
||||
model: dataset,
|
||||
el: $el
|
||||
});
|
||||
var state = explorer.state;
|
||||
ok(state.get('query'));
|
||||
equal(state.get('readOnly'), false);
|
||||
equal(state.get('currentView'), null);
|
||||
equal(state.get('query').size, 100);
|
||||
deepEqual(state.get('view-grid').hiddenFields, []);
|
||||
deepEqual(state.get('view-graph').group, null);
|
||||
equal(state.get('backend'), 'memory');
|
||||
ok(state.get('dataset').id !== null);
|
||||
$el.remove();
|
||||
});
|
||||
|
||||
test('initialize state', function () {
|
||||
var $el = $('<div class="test-view-explorer-init-state" />');
|
||||
$('.fixtures .data-explorer-here').append($el);
|
||||
var dataset = Fixture.getDataset();
|
||||
var explorer = new recline.View.DataExplorer({
|
||||
model: dataset,
|
||||
el: $el,
|
||||
state: {
|
||||
readOnly: true,
|
||||
currentView: 'graph',
|
||||
'view-grid': {
|
||||
hiddenFields: ['x']
|
||||
}
|
||||
}
|
||||
});
|
||||
ok(explorer.state.get('readOnly'));
|
||||
ok(explorer.state.get('currentView'), 'graph');
|
||||
// check the correct view is visible
|
||||
var css = explorer.el.find('.navigation a[data-view="graph"]').attr('class').split(' ');
|
||||
ok(_.contains(css, 'disabled'), css);
|
||||
|
||||
var css = explorer.el.find('.navigation a[data-view="grid"]').attr('class').split(' ');
|
||||
ok(!(_.contains(css, 'disabled')), css);
|
||||
$el.remove();
|
||||
});
|
||||
|
||||
test('restore (from serialized state)', function() {
|
||||
var dataset = Fixture.getDataset();
|
||||
var explorer = new recline.View.DataExplorer({
|
||||
model: dataset,
|
||||
});
|
||||
var state = explorer.state.toJSON();
|
||||
var explorerNew = recline.View.DataExplorer.restore(state);
|
||||
var out = explorerNew.state.toJSON();
|
||||
equal(out.backend, state.backend);
|
||||
});
|
||||
|
||||
})(this.jQuery);
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 963 B After Width: | Height: | Size: 963 B |
|
Before Width: | Height: | Size: 959 B After Width: | Height: | Size: 959 B |
Loading…
x
Reference in New Issue
Block a user