diff --git a/index.html b/index.html
index 7306183c..b5de26df 100644
--- a/index.html
+++ b/index.html
@@ -84,9 +84,15 @@
Demo
+ Downloads & Dependencies (Right-click, and use 'Save As')
+ Development Version (v0.2)
+
+ Using It
+ Check out the the Demo and view source. The
+ javascript you want for actual integration is in: app.js.
+
Docs
- Want to see how to embed this in your own application. Check out the the
- Demo and view source.
- Models
- Backends
diff --git a/recline.js b/recline.js
new file mode 100644
index 00000000..8a4ee686
--- /dev/null
+++ b/recline.js
@@ -0,0 +1,1926 @@
+// # Recline Backends
+//
+// Backends are connectors to backend data sources and stores
+//
+// Backends are implemented as Backbone models but this is just a
+// convenience (they do not save or load themselves from any remote
+// source)
+this.recline = this.recline || {};
+this.recline.Model = this.recline.Model || {};
+
+(function($, my) {
+ my.backends = {};
+
+ Backbone.sync = function(method, model, options) {
+ return my.backends[model.backendConfig.type].sync(method, model, options);
+ }
+
+ // ## BackendMemory - uses in-memory data
+ //
+ // To use you should:
+ //
+ // A. provide metadata as model data to the Dataset
+ //
+ // B. Set backendConfig on your dataset with attributes:
+ //
+ // - type: 'memory'
+ // - data: hash with 2 keys:
+ //
+ // * headers: list of header names/labels
+ // * rows: list of hashes, each hash being one row. A row *must* have an id attribute which is unique.
+ //
+ // Example of data:
+ //
+ //
+ // {
+ // headers: ['x', 'y', 'z']
+ // , rows: [
+ // {id: 0, x: 1, y: 2, z: 3}
+ // , {id: 1, x: 2, y: 4, z: 6}
+ // ]
+ // };
+ //
+ my.BackendMemory = Backbone.Model.extend({
+ sync: function(method, model, options) {
+ var self = this;
+ if (method === "read") {
+ var dfd = $.Deferred();
+ if (model.__type__ == 'Dataset') {
+ var dataset = model;
+ dataset.set({
+ headers: dataset.backendConfig.data.headers
+ });
+ dataset.docCount = dataset.backendConfig.data.rows.length;
+ dfd.resolve(dataset);
+ }
+ return dfd.promise();
+ } else if (method === 'update') {
+ var dfd = $.Deferred();
+ if (model.__type__ == 'Document') {
+ _.each(model.backendConfig.data.rows, function(row, idx) {
+ if(row.id === model.id) {
+ model.backendConfig.data.rows[idx] = model.toJSON();
+ }
+ });
+ dfd.resolve(model);
+ }
+ return dfd.promise();
+ } else if (method === 'delete') {
+ var dfd = $.Deferred();
+ if (model.__type__ == 'Document') {
+ model.backendConfig.data.rows = _.reject(model.backendConfig.data.rows, function(row) {
+ return (row.id === model.id);
+ });
+ dfd.resolve(model);
+ }
+ return dfd.promise();
+ } else {
+ alert('Not supported: sync on BackendMemory with method ' + method + ' and model ' + model);
+ }
+ },
+ getDocuments: function(model, numRows, start) {
+ if (start === undefined) {
+ start = 0;
+ }
+ if (numRows === undefined) {
+ numRows = 10;
+ }
+ var dfd = $.Deferred();
+ rows = model.backendConfig.data.rows;
+ var results = rows.slice(start, start+numRows);
+ dfd.resolve(results);
+ return dfd.promise();
+ }
+ });
+ my.backends['memory'] = new my.BackendMemory();
+
+ // ## BackendWebstore
+ //
+ // Connecting to [Webstores](http://github.com/okfn/webstore)
+ //
+ // To use this backend set backendConfig on your Dataset as:
+ //
+ //
+ // {
+ // 'type': 'webstore',
+ // 'url': url to relevant Webstore table
+ // }
+ //
+ my.BackendWebstore = Backbone.Model.extend({
+ sync: function(method, model, options) {
+ if (method === "read") {
+ if (model.__type__ == 'Dataset') {
+ var dataset = model;
+ var base = dataset.backendConfig.url;
+ var schemaUrl = base + '/schema.json';
+ var jqxhr = $.ajax({
+ url: schemaUrl,
+ dataType: 'jsonp',
+ jsonp: '_callback'
+ });
+ var dfd = $.Deferred();
+ jqxhr.then(function(schema) {
+ headers = _.map(schema.data, function(item) {
+ return item.name;
+ });
+ dataset.set({
+ headers: headers
+ });
+ dataset.docCount = schema.count;
+ dfd.resolve(dataset, jqxhr);
+ });
+ return dfd.promise();
+ }
+ }
+ },
+ getDocuments: function(model, numRows, start) {
+ if (start === undefined) {
+ start = 0;
+ }
+ if (numRows === undefined) {
+ numRows = 10;
+ }
+ var base = model.backendConfig.url;
+ var jqxhr = $.ajax({
+ url: base + '.json?_limit=' + numRows,
+ dataType: 'jsonp',
+ jsonp: '_callback',
+ cache: true
+ });
+ var dfd = $.Deferred();
+ jqxhr.then(function(results) {
+ dfd.resolve(results.data);
+ });
+ return dfd.promise();
+ }
+ });
+ my.backends['webstore'] = new my.BackendWebstore();
+
+ // ## BackendDataProxy
+ //
+ // For connecting to [DataProxy-s](http://github.com/okfn/dataproxy).
+ //
+ // Set a Dataset to use this backend:
+ //
+ // dataset.backendConfig = {
+ // // required
+ // url: {url-of-data-to-proxy},
+ // format: csv | xls,
+ // }
+ //
+ // When initializing the DataProxy backend you can set the following attributes:
+ //
+ // * dataproxy: {url-to-proxy} (optional). Defaults to http://jsonpdataproxy.appspot.com
+ //
+ // Note that this is a **read-only** backend.
+ my.BackendDataProxy = Backbone.Model.extend({
+ defaults: {
+ dataproxy: 'http://jsonpdataproxy.appspot.com'
+ },
+ sync: function(method, model, options) {
+ if (method === "read") {
+ if (model.__type__ == 'Dataset') {
+ var dataset = model;
+ var base = my.backends['dataproxy'].get('dataproxy');
+ // TODO: should we cache for extra efficiency
+ var data = {
+ url: dataset.backendConfig.url
+ , 'max-results': 1
+ , type: dataset.backendConfig.format
+ };
+ var jqxhr = $.ajax({
+ url: base
+ , data: data
+ , dataType: 'jsonp'
+ });
+ var dfd = $.Deferred();
+ jqxhr.then(function(results) {
+ dataset.set({
+ headers: results.fields
+ });
+ dfd.resolve(dataset, jqxhr);
+ });
+ return dfd.promise();
+ }
+ } else {
+ alert('This backend only supports read operations');
+ }
+ },
+ getDocuments: function(dataset, numRows, start) {
+ if (start === undefined) {
+ start = 0;
+ }
+ if (numRows === undefined) {
+ numRows = 10;
+ }
+ var base = my.backends['dataproxy'].get('dataproxy');
+ var data = {
+ url: dataset.backendConfig.url
+ , 'max-results': numRows
+ , type: dataset.backendConfig.format
+ };
+ var jqxhr = $.ajax({
+ url: base
+ , data: data
+ , dataType: 'jsonp'
+ });
+ var dfd = $.Deferred();
+ jqxhr.then(function(results) {
+ var _out = _.map(results.data, function(row) {
+ var tmp = {};
+ _.each(results.fields, function(key, idx) {
+ tmp[key] = row[idx];
+ });
+ return tmp;
+ });
+ dfd.resolve(_out);
+ });
+ return dfd.promise();
+ }
+ });
+ my.backends['dataproxy'] = new my.BackendDataProxy();
+
+
+ // ## Google spreadsheet backend
+ //
+ // Connect to Google Docs spreadsheet. For write operations
+ my.BackendGDoc = Backbone.Model.extend({
+ sync: function(method, model, options) {
+ if (method === "read") {
+ var dfd = $.Deferred();
+ var dataset = model;
+
+ $.getJSON(model.backendConfig.url, function(d) {
+ result = my.backends['gdocs'].gdocsToJavascript(d);
+ model.set({'headers': result.header});
+ // cache data onto dataset (we have loaded whole gdoc it seems!)
+ model._dataCache = result.data;
+ dfd.resolve(model);
+ })
+ return dfd.promise(); }
+ },
+
+ getDocuments: function(dataset, start, numRows) {
+ var dfd = $.Deferred();
+ var fields = dataset.get('headers');
+
+ // zip the field headers with the data rows to produce js objs
+ // TODO: factor this out as a common method with other backends
+ var objs = _.map(dataset._dataCache, function (d) {
+ var obj = {};
+ _.each(_.zip(fields, d), function (x) { obj[x[0]] = x[1]; })
+ return obj;
+ });
+ dfd.resolve(objs);
+ return dfd;
+ },
+ gdocsToJavascript: function(gdocsSpreadsheet) {
+ /*
+ :options: (optional) optional argument dictionary:
+ columnsToUse: list of columns to use (specified by header names)
+ colTypes: dictionary (with column names as keys) specifying types (e.g. range, percent for use in conversion).
+ :return: tabular data object (hash with keys: header and data).
+
+ Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.
+ */
+ var options = {};
+ if (arguments.length > 1) {
+ options = arguments[1];
+ }
+ var results = {
+ 'header': [],
+ 'data': []
+ };
+ // default is no special info on type of columns
+ var colTypes = {};
+ if (options.colTypes) {
+ colTypes = options.colTypes;
+ }
+ // either extract column headings from spreadsheet directly, or used supplied ones
+ if (options.columnsToUse) {
+ // columns set to subset supplied
+ results.header = options.columnsToUse;
+ } else {
+ // set columns to use to be all available
+ if (gdocsSpreadsheet.feed.entry.length > 0) {
+ for (var k in gdocsSpreadsheet.feed.entry[0]) {
+ if (k.substr(0, 3) == 'gsx') {
+ var col = k.substr(4)
+ results.header.push(col);
+ }
+ }
+ }
+ }
+
+ // converts non numberical values that should be numerical (22.3%[string] -> 0.223[float])
+ var rep = /^([\d\.\-]+)\%$/;
+ $.each(gdocsSpreadsheet.feed.entry, function (i, entry) {
+ var row = [];
+ for (var k in results.header) {
+ var col = results.header[k];
+ var _keyname = 'gsx$' + col;
+ var value = entry[_keyname]['$t'];
+ // if labelled as % and value contains %, convert
+ if (colTypes[col] == 'percent') {
+ if (rep.test(value)) {
+ var value2 = rep.exec(value);
+ var value3 = parseFloat(value2);
+ value = value3 / 100;
+ }
+ }
+ row.push(value);
+ }
+ results.data.push(row);
+ });
+ return results;
+ }
+ });
+ my.backends['gdocs'] = new my.BackendGDoc();
+
+}(jQuery, this.recline.Model));
+// importScripts('lib/underscore.js');
+
+onmessage = function(message) {
+
+ function parseCSV(rawCSV) {
+ var patterns = new RegExp((
+ // Delimiters.
+ "(\\,|\\r?\\n|\\r|^)" +
+ // Quoted fields.
+ "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
+ // Standard fields.
+ "([^\"\\,\\r\\n]*))"
+ ), "gi");
+
+ var rows = [[]], matches = null;
+
+ while (matches = patterns.exec(rawCSV)) {
+ var delimiter = matches[1];
+
+ if (delimiter.length && (delimiter !== ",")) rows.push([]);
+
+ if (matches[2]) {
+ var value = matches[2].replace(new RegExp("\"\"", "g"), "\"");
+ } else {
+ var value = matches[3];
+ }
+ rows[rows.length - 1].push(value);
+ }
+
+ if(_.isEqual(rows[rows.length -1], [""])) rows.pop();
+
+ var docs = [];
+ var headers = _.first(rows);
+ _.each(_.rest(rows), function(row, rowIDX) {
+ var doc = {};
+ _.each(row, function(cell, idx) {
+ doc[headers[idx]] = cell;
+ })
+ docs.push(doc);
+ })
+
+ return docs;
+ }
+
+ var docs = parseCSV(message.data.data);
+
+ var req = new XMLHttpRequest();
+
+ req.onprogress = req.upload.onprogress = function(e) {
+ if(e.lengthComputable) postMessage({ percent: (e.loaded / e.total) * 100 });
+ };
+
+ req.onreadystatechange = function() { if (req.readyState == 4) postMessage({done: true, response: req.responseText}) };
+ req.open('POST', message.data.url);
+ req.setRequestHeader('Content-Type', 'application/json');
+ req.send(JSON.stringify({docs: docs}));
+};
+// adapted from https://github.com/harthur/costco. heather rules
+
+var costco = function() {
+
+ function evalFunction(funcString) {
+ try {
+ eval("var editFunc = " + funcString);
+ } catch(e) {
+ return {errorMessage: e+""};
+ }
+ return editFunc;
+ }
+
+ function previewTransform(docs, editFunc, currentColumn) {
+ var preview = [];
+ var updated = mapDocs($.extend(true, {}, docs), editFunc);
+ for (var i = 0; i < updated.docs.length; i++) {
+ var before = docs[i]
+ , after = updated.docs[i]
+ ;
+ if (!after) after = {};
+ if (currentColumn) {
+ preview.push({before: JSON.stringify(before[currentColumn]), after: JSON.stringify(after[currentColumn])});
+ } else {
+ preview.push({before: JSON.stringify(before), after: JSON.stringify(after)});
+ }
+ }
+ return preview;
+ }
+
+ function mapDocs(docs, editFunc) {
+ var edited = []
+ , deleted = []
+ , failed = []
+ ;
+
+ var updatedDocs = _.map(docs, function(doc) {
+ try {
+ var updated = editFunc(_.clone(doc));
+ } catch(e) {
+ failed.push(doc);
+ return;
+ }
+ if(updated === null) {
+ updated = {_deleted: true};
+ edited.push(updated);
+ deleted.push(doc);
+ }
+ else if(updated && !_.isEqual(updated, doc)) {
+ edited.push(updated);
+ }
+ return updated;
+ });
+
+ return {
+ edited: edited,
+ docs: updatedDocs,
+ deleted: deleted,
+ failed: failed
+ };
+ }
+
+ function updateDocs(editFunc) {
+ var dfd = $.Deferred();
+ util.notify("Download entire database into Recline. This could take a while...", {persist: true, loader: true});
+ couch.request({url: app.baseURL + "api/json"}).then(function(docs) {
+ util.notify("Updating " + docs.docs.length + " documents. This could take a while...", {persist: true, loader: true});
+ var toUpdate = costco.mapDocs(docs.docs, editFunc).edited;
+ costco.uploadDocs(toUpdate).then(
+ function(updatedDocs) {
+ util.notify(updatedDocs.length + " documents updated successfully");
+ recline.initializeTable(app.offset);
+ dfd.resolve(updatedDocs);
+ },
+ function(err) {
+ util.notify("Errorz! " + err);
+ dfd.reject(err);
+ }
+ );
+ });
+ return dfd.promise();
+ }
+
+ function updateDoc(doc) {
+ return couch.request({type: "PUT", url: app.baseURL + "api/" + doc._id, data: JSON.stringify(doc)})
+ }
+
+ function uploadDocs(docs) {
+ var dfd = $.Deferred();
+ if(!docs.length) dfd.resolve("Failed: No docs specified");
+ couch.request({url: app.baseURL + "api/_bulk_docs", type: "POST", data: JSON.stringify({docs: docs})})
+ .then(
+ function(resp) {ensureCommit().then(function() {
+ var error = couch.responseError(resp);
+ if (error) {
+ dfd.reject(error);
+ } else {
+ dfd.resolve(resp);
+ }
+ })},
+ function(err) { dfd.reject(err.responseText) }
+ );
+ return dfd.promise();
+ }
+
+ function ensureCommit() {
+ return couch.request({url: app.baseURL + "api/_ensure_full_commit", type:'POST', data: "''"});
+ }
+
+ function deleteColumn(name) {
+ var deleteFunc = function(doc) {
+ delete doc[name];
+ return doc;
+ }
+ return updateDocs(deleteFunc);
+ }
+
+ function uploadCSV() {
+ var file = $('#file')[0].files[0];
+ if (file) {
+ var reader = new FileReader();
+ reader.readAsText(file);
+ reader.onload = function(event) {
+ var payload = {
+ url: window.location.href + "/api/_bulk_docs", // todo more robust url composition
+ data: event.target.result
+ };
+ var worker = new Worker('script/costco-csv-worker.js');
+ worker.onmessage = function(event) {
+ var message = event.data;
+ if (message.done) {
+ var error = couch.responseError(JSON.parse(message.response))
+ console.log('e',error)
+ if (error) {
+ app.emitter.emit(error, 'error');
+ } else {
+ util.notify("Data uploaded successfully!");
+ recline.initializeTable(app.offset);
+ }
+ util.hide('dialog');
+ } else if (message.percent) {
+ if (message.percent === 100) {
+ util.notify("Waiting for CouchDB...", {persist: true, loader: true})
+ } else {
+ util.notify("Uploading... " + message.percent + "%");
+ }
+ } else {
+ util.notify(JSON.stringify(message));
+ }
+ };
+ worker.postMessage(payload);
+ };
+ } else {
+ util.notify('File not selected. Please try again');
+ }
+ };
+
+ return {
+ evalFunction: evalFunction,
+ previewTransform: previewTransform,
+ mapDocs: mapDocs,
+ updateDocs: updateDocs,
+ updateDoc: updateDoc,
+ uploadDocs: uploadDocs,
+ deleteColumn: deleteColumn,
+ ensureCommit: ensureCommit,
+ uploadCSV: uploadCSV
+ };
+}();
+// # Recline Backbone Models
+this.recline = this.recline || {};
+this.recline.Model = this.recline.Model || {};
+
+(function($, my) {
+ // ## A Dataset model
+ //
+ // Other than standard list of Backbone methods it has two important attributes:
+ //
+ // * currentDocuments: a DocumentList containing the Documents we have currently loaded for viewing (you update currentDocuments by calling getRows)
+ // * docCount: total number of documents in this dataset (obtained on a fetch for this Dataset)
+ my.Dataset = Backbone.Model.extend({
+ __type__: 'Dataset',
+ initialize: function(options) {
+ this.currentDocuments = new my.DocumentList();
+ this.docCount = null;
+ this.backend = null;
+ },
+
+ // ### getDocuments
+ //
+ // AJAX method with promise API to get rows (documents) from the backend.
+ //
+ // Resulting DocumentList are used to reset this.currentDocuments and are
+ // also returned.
+ //
+ // :param numRows: passed onto backend getDocuments.
+ // :param start: passed onto backend getDocuments.
+ //
+ // this does not fit very well with Backbone setup. Backbone really expects you to know the ids of objects your are fetching (which you do in classic RESTful ajax-y world). But this paradigm does not fill well with data set up we have here.
+ // This also illustrates the limitations of separating the Dataset and the Backend
+ getDocuments: function(numRows, start) {
+ var self = this;
+ var backend = my.backends[this.backendConfig.type];
+ var dfd = $.Deferred();
+ backend.getDocuments(this, numRows, start).then(function(rows) {
+ var docs = _.map(rows, function(row) {
+ var _doc = new my.Document(row);
+ _doc.backendConfig = self.backendConfig;
+ _doc.backend = backend;
+ return _doc;
+ });
+ self.currentDocuments.reset(docs);
+ dfd.resolve(self.currentDocuments);
+ });
+ return dfd.promise();
+ },
+
+ toTemplateJSON: function() {
+ var data = this.toJSON();
+ data.docCount = this.docCount;
+ return data;
+ }
+ });
+
+ // ## A Document (aka Row)
+ //
+ // A single entry or row in the dataset
+ my.Document = Backbone.Model.extend({
+ __type__: 'Document'
+ });
+
+ // ## A Backbone collection of Documents
+ my.DocumentList = Backbone.Collection.extend({
+ __type__: 'DocumentList',
+ model: my.Document
+ });
+}(jQuery, this.recline.Model));
+
+var util = function() {
+ var templates = {
+ transformActions: ''
+ , columnActions: ' \
+ \
+ \
+ '
+ , rowActions: ''
+ , cellEditor: ' \
+ \
+ '
+ , editPreview: ' \
+ \
+
\
+ \
+ \
+ | \
+ before \
+ | \
+ \
+ after \
+ | \
+
\
+ \
+ \
+ {{#rows}} \
+ \
+ | \
+ {{before}} \
+ | \
+ \
+ {{after}} \
+ | \
+
\
+ {{/rows}} \
+ \
+
\
+
× \
+
{{msg}} \
+ {{#loader}} \
+ 
\
+ {{/loader}} \
+
\
+
';
+ var _templated = $.mustache(_template, tmplData);
+ _templated = $(_templated).appendTo($('.data-explorer .alert-messages'));
+ if (!options.persist) {
+ setTimeout(function() {
+ $(_templated).remove();
+ }, 3000);
+ }
+ }
+
+ function formatMetadata(data) {
+ out = '';
+ $.each(data, function(key, val) {
+ if (typeof(val) == 'string' && key[0] != '_') {
+ out = out + '- ' + key + '
- ' + val;
+ } else if (typeof(val) == 'object' && key != "geometry" && val != null) {
+ if (key == 'properties') {
+ $.each(val, function(attr, value){
+ out = out + '
- ' + attr + '
- ' + value;
+ })
+ } else {
+ out = out + '
- ' + key + '
- ' + val.join(', ');
+ }
+ }
+ });
+ out = out + '
';
+ return out;
+ }
+
+ function getBaseURL(url) {
+ var baseURL = "";
+ if ( inURL(url, '_design') ) {
+ if (inURL(url, '_rewrite')) {
+ var path = url.split("#")[0];
+ if (path[path.length - 1] === "/") {
+ baseURL = "";
+ } else {
+ baseURL = '_rewrite/';
+ }
+ } else {
+ baseURL = '_rewrite/';
+ }
+ }
+ return baseURL;
+ }
+
+ var persist = {
+ restore: function() {
+ $('.persist').each(function(i, el) {
+ var inputId = $(el).attr('id');
+ if(localStorage.getItem(inputId)) $('#' + inputId).val(localStorage.getItem(inputId));
+ })
+ },
+ save: function(id) {
+ localStorage.setItem(id, $('#' + id).val());
+ },
+ clear: function() {
+ $('.persist').each(function(i, el) {
+ localStorage.removeItem($(el).attr('id'));
+ })
+ }
+ }
+
+ // simple debounce adapted from underscore.js
+ function delay(func, wait) {
+ return function() {
+ var context = this, args = arguments;
+ var throttler = function() {
+ delete app.timeout;
+ func.apply(context, args);
+ };
+ if (!app.timeout) app.timeout = setTimeout(throttler, wait);
+ };
+ };
+
+ function resetForm(form) {
+ $(':input', form)
+ .not(':button, :submit, :reset, :hidden')
+ .val('')
+ .removeAttr('checked')
+ .removeAttr('selected');
+ }
+
+ function largestWidth(selector, min) {
+ var min_width = min || 0;
+ $(selector).each(function(i, n){
+ var this_width = $(n).width();
+ if (this_width > min_width) {
+ min_width = this_width;
+ }
+ });
+ return min_width;
+ }
+
+ function getType(obj) {
+ if (obj === null) {
+ return 'null';
+ }
+ if (typeof obj === 'object') {
+ if (obj.constructor.toString().indexOf("Array") !== -1) {
+ return 'array';
+ } else {
+ return 'object';
+ }
+ } else {
+ return typeof obj;
+ }
+ }
+
+ function lookupPath(path) {
+ var docs = app.apiDocs;
+ try {
+ _.each(path, function(node) {
+ docs = docs[node];
+ })
+ } catch(e) {
+ util.notify("Error selecting documents" + e);
+ docs = [];
+ }
+ return docs;
+ }
+
+ function nodePath(docField) {
+ if (docField.children('.object-key').length > 0) return docField.children('.object-key').text();
+ if (docField.children('.array-key').length > 0) return docField.children('.array-key').text();
+ if (docField.children('.doc-key').length > 0) return docField.children('.doc-key').text();
+ return "";
+ }
+
+ function selectedTreePath() {
+ var nodes = []
+ , parent = $('.chosen');
+ while (parent.length > 0) {
+ nodes.push(nodePath(parent));
+ parent = parent.parents('.doc-field:first');
+ }
+ return _.compact(nodes).reverse();
+ }
+
+ // TODO refactor handlers so that they dont stack up as the tree gets bigger
+ function handleTreeClick(e) {
+ var clicked = $(e.target);
+ if(clicked.hasClass('expand')) return;
+ if (clicked.children('.array').length > 0) {
+ var field = clicked;
+ } else if (clicked.siblings('.array').length > 0) {
+ var field = clicked.parents('.doc-field:first');
+ } else {
+ var field = clicked.parents('.array').parents('.doc-field:first');
+ }
+ $('.chosen').removeClass('chosen');
+ field.addClass('chosen');
+ return false;
+ }
+
+ var createTreeNode = {
+ "string": function (obj, key) {
+ var val = $('');
+ if (obj[key].length > 45) {
+ val.append($('')
+ .text(obj[key].slice(0, 45)))
+ .append(
+ $('...')
+ .click(function () {
+ val.html('')
+ .append($('')
+ .text(obj[key].length ? obj[key] : " ")
+ )
+ })
+ )
+ }
+ else {
+ var val = $('');
+ val.append(
+ $('')
+ .text(obj[key].length ? obj[key] : " ")
+ )
+ }
+ return val;
+ }
+ , "number": function (obj, key) {
+ var val = $('')
+ val.append($('' + obj[key] + ''))
+ return val;
+ }
+ , "null": function (obj, key) {
+ var val = $('')
+ val.append($('' + obj[key] + ''))
+ return val;
+ }
+ , "boolean": function (obj, key) {
+ var val = $('')
+ val.append($('' + obj[key] + ''))
+ return val;
+ }
+ , "array": function (obj, key, indent) {
+ if (!indent) indent = 1;
+ var val = $('')
+ $('[...]')
+ .click(function (e) {
+ var n = $(this).parent();
+ var cls = 'sub-'+key+'-'+indent
+ n.html('')
+ n.append('[')
+ for (i in obj[key]) {
+ var field = $('').click(handleTreeClick);
+ n.append(
+ field
+ .append(''+i+'
')
+ .append(createTreeNode[getType(obj[key][i])](obj[key], i, indent + 1))
+ )
+ }
+ n.append(']')
+ $('div.'+cls).width(largestWidth('div.'+cls))
+ })
+ .appendTo($('').appendTo(val))
+ return val;
+ }
+ , "object": function (obj, key, indent) {
+ if (!indent) indent = 1;
+ var val = $('')
+ $('{...}')
+ .click(function (e) {
+ var n = $(this).parent();
+ n.html('')
+ n.append('{')
+ for (i in obj[key]) {
+ var field = $('').click(handleTreeClick);
+ var p = $('');
+ var di = $(''+i+'
')
+ field.append(p)
+ .append(di)
+ .append(createTreeNode[getType(obj[key][i])](obj[key], i, indent + 1))
+ n.append(field)
+ }
+
+ n.append('}')
+ di.width(largestWidth('div.object-key'))
+ })
+ .appendTo($('').appendTo(val))
+ return val;
+ }
+ }
+
+ function renderTree(doc) {
+ var d = $('div#document-editor');
+ for (i in doc) {
+ var field = $('').click(handleTreeClick);
+ $('').appendTo(field);
+ field.append(''+i+'
')
+ field.append(createTreeNode[getType(doc[i])](doc, i));
+ d.append(field);
+ }
+
+ $('div.doc-key-base').width(largestWidth('div.doc-key-base'))
+ }
+
+
+ return {
+ inURL: inURL,
+ registerEmitter: registerEmitter,
+ listenFor: listenFor,
+ show: show,
+ hide: hide,
+ position: position,
+ render: render,
+ notify: notify,
+ observeExit: observeExit,
+ formatMetadata:formatMetadata,
+ getBaseURL:getBaseURL,
+ resetForm: resetForm,
+ delay: delay,
+ persist: persist,
+ lookupPath: lookupPath,
+ selectedTreePath: selectedTreePath,
+ renderTree: renderTree
+ };
+}();
+this.recline = this.recline || {};
+
+// Views module following classic module pattern
+recline.View = function($) {
+
+var my = {};
+
+// Parse a URL query string (?xyz=abc...) into a dictionary.
+function parseQueryString(q) {
+ var urlParams = {},
+ e, d = function (s) {
+ return unescape(s.replace(/\+/g, " "));
+ },
+ r = /([^&=]+)=?([^&]*)/g;
+
+ if (q && q.length && q[0] === '?') {
+ q = q.slice(1);
+ }
+ while (e = r.exec(q)) {
+ // TODO: have values be array as query string allow repetition of keys
+ urlParams[d(e[1])] = d(e[2]);
+ }
+ return urlParams;
+}
+
+// The primary view for the entire application.
+//
+// It should be initialized with a recline.Model.Dataset object and an existing
+// dom element to attach to (the existing DOM element is important for
+// rendering of FlotGraph subview).
+//
+// To pass in configuration options use the config key in initialization hash
+// e.g.
+//
+// var explorer = new DataExplorer({
+// config: {...}
+// })
+//
+// Config options:
+//
+// * displayCount: how many documents to display initially (default: 10)
+// * readOnly: true/false (default: false) value indicating whether to
+// operate in read-only mode (hiding all editing options).
+//
+// All other views as contained in this one.
+my.DataExplorer = Backbone.View.extend({
+ template: ' \
+ \
+
\
+ \
+ \
+
\
+
\
+
\
+
\
+ \
+ \
+ {{#notEmpty}} | {{/notEmpty}} \
+ {{#headers}} \
+ \
+ \
+ \
+ | \
+ {{/headers}} \
+
\
+ \
+ \
+
\
+ ',
+
+ toTemplateJSON: function() {
+ var modelData = this.model.toJSON()
+ modelData.notEmpty = ( modelData.headers.length > 0 )
+ return modelData;
+ },
+ render: function() {
+ var self = this;
+ var htmls = $.mustache(this.template, this.toTemplateJSON());
+ this.el.html(htmls);
+ this.model.currentDocuments.forEach(function(doc) {
+ var tr = $('|
');
+ self.el.find('tbody').append(tr);
+ var newView = new my.DataTableRow({
+ model: doc,
+ el: tr,
+ headers: self.model.get('headers')
+ });
+ newView.render();
+ });
+ return this;
+ }
+});
+
+// DataTableRow View for rendering an individual document.
+//
+// Since we want this to update in place it is up to creator to provider the element to attach to.
+// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
+my.DataTableRow = Backbone.View.extend({
+ initialize: function(options) {
+ _.bindAll(this, 'render');
+ this._headers = options.headers;
+ this.el = $(this.el);
+ this.model.bind('change', this.render);
+ },
+ template: ' \
+ | \
+ {{#cells}} \
+ \
+ \
+ | \
+ {{/cells}} \
+ ',
+ events: {
+ 'click .data-table-cell-edit': 'onEditClick',
+ // cell editor
+ 'click .data-table-cell-editor .okButton': 'onEditorOK',
+ 'click .data-table-cell-editor .cancelButton': 'onEditorCancel'
+ },
+
+ toTemplateJSON: function() {
+ var doc = this.model;
+ var cellData = _.map(this._headers, function(header) {
+ return {header: header, value: doc.get(header)}
+ })
+ return { id: this.id, cells: cellData }
+ },
+
+ render: function() {
+ this.el.attr('data-id', this.model.id);
+ var html = $.mustache(this.template, this.toTemplateJSON());
+ $(this.el).html(html);
+ return this;
+ },
+
+ // ======================================================
+ // Cell Editor
+
+ onEditClick: function(e) {
+ var editing = this.el.find('.data-table-cell-editor-editor');
+ if (editing.length > 0) {
+ editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
+ }
+ $(e.target).addClass("hidden");
+ var cell = $(e.target).siblings('.data-table-cell-value');
+ cell.data("previousContents", cell.text());
+ util.render('cellEditor', cell, {value: cell.text()});
+ },
+
+ onEditorOK: function(e) {
+ var cell = $(e.target);
+ var rowId = cell.parents('tr').attr('data-id');
+ var header = cell.parents('td').attr('data-header');
+ var newValue = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
+ var newData = {};
+ newData[header] = newValue;
+ this.model.set(newData);
+ util.notify("Updating row...", {loader: true});
+ this.model.save().then(function(response) {
+ util.notify("Row updated successfully", {category: 'success'});
+ })
+ .fail(function() {
+ util.notify('Error saving row', {
+ category: 'error',
+ persist: true
+ });
+ });
+ },
+
+ onEditorCancel: function(e) {
+ var cell = $(e.target).parents('.data-table-cell-value');
+ cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
+ }
+});
+
+
+// View (Dialog) for doing data transformations (on columns of data).
+my.ColumnTransform = Backbone.View.extend({
+ className: 'transform-column-view',
+ template: ' \
+ \
+ \
+
\
+
\
+ \
+ \
+ \
+ \
+ \
+ \
+ \
+ | \
+ Expression \
+ | \
+ \
+ \
+ | \
+ \
+ \
+ \
+ | \
+ \
+ No syntax error. \
+ | \
+ \
+ \
+ | \
+ \
+ | \
+ \
+ \
+ \
+ | \
+
\
+ \
+
\
+
\
+
\
+
\
+
Traverse and transform objects by visiting every node on a recursive walk using js-traverse.
\
+
\
+ \
+ \
+ \
+ \
+ \
+ \
+ \
+ | \
+ Expression \
+ | \
+ \
+ \
+ | \
+ \
+ \
+ \
+ | \
+ \
+ No syntax error. \
+ | \
+ \
+ \
+ | \
+ \
+ | \
+ \
+ \
+ \
+ | \
+
\
+ \
+
\
+
\
+
\
+
\
+
Help »
\
+
To create a chart select a column (group) to use as the x-axis \
+ then another column (Series A) to plot against it.
\
+
You can add add \
+ additional series by clicking the "Add series" button
\
+
\
+
\
+