diff --git a/demo/index.html b/demo/index.html
index 48a0d5e0..c941752a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -28,8 +28,6 @@
-
-
diff --git a/src/view-data-explorer.js b/src/view-data-explorer.js
deleted file mode 100644
index 7e3c2258..00000000
--- a/src/view-data-explorer.js
+++ /dev/null
@@ -1,171 +0,0 @@
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
-
-// Views module following classic module pattern
-(function($, my) {
-
-// The primary view for the entire application.
-//
-// It should be initialized with a recline.Model.Dataset object and an existing
-// dom element to attach to (the existing DOM element is important for
-// rendering of FlotGraph subview).
-//
-// To pass in configuration options use the config key in initialization hash
-// e.g.
-//
-// var explorer = new DataExplorer({
-// config: {...}
-// })
-//
-// Config options:
-//
-// * displayCount: how many documents to display initially (default: 10)
-// * readOnly: true/false (default: false) value indicating whether to
-// operate in read-only mode (hiding all editing options).
-//
-// All other views as contained in this one.
-my.DataExplorer = Backbone.View.extend({
- template: ' \
- \
-
\
- \
- \
-
\
-
\
-
\
-
\
- \
- \
- {{#notEmpty}} \
- | \
- \
- \
- \
- \
- | \
- {{/notEmpty}} \
- {{#headers}} \
- \
- \
- \
- | \
- {{/headers}} \
-
\
- \
- \
-
\
- ',
-
- toTemplateJSON: function() {
- var modelData = this.model.toJSON()
- modelData.notEmpty = ( this.headers.length > 0 )
- modelData.headers = this.headers;
- return modelData;
- },
- render: function() {
- var self = this;
- this.headers = _.filter(this.model.get('headers'), function(header) {
- return _.indexOf(self.hiddenHeaders, header) == -1;
- });
- var htmls = $.mustache(this.template, this.toTemplateJSON());
- this.el.html(htmls);
- this.model.currentDocuments.forEach(function(doc) {
- var tr = $('|
');
- self.el.find('tbody').append(tr);
- var newView = new my.DataTableRow({
- model: doc,
- el: tr,
- headers: self.headers,
- });
- newView.render();
- });
- this.el.toggleClass('no-hidden', (self.hiddenHeaders.length == 0));
- return this;
- }
-});
-
-// DataTableRow View for rendering an individual document.
-//
-// Since we want this to update in place it is up to creator to provider the element to attach to.
-// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
-my.DataTableRow = Backbone.View.extend({
- initialize: function(options) {
- _.bindAll(this, 'render');
- this._headers = options.headers;
- this.el = $(this.el);
- this.model.bind('change', this.render);
- },
-
- template: ' \
- | \
- {{#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);
- my.notify("Updating row...", {loader: true});
- this.model.save().then(function(response) {
- my.notify("Row updated successfully", {category: 'success'});
- })
- .fail(function() {
- my.notify('Error saving row', {
- category: 'error',
- persist: true
- });
- });
- },
-
- onEditorCancel: function(e) {
- var cell = $(e.target).parents('.data-table-cell-value');
- cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
- }
-});
-
-})(jQuery, recline.View);
-
-
diff --git a/src/view.js b/src/view.js
index 5e79a62a..166e2a05 100644
--- a/src/view.js
+++ b/src/view.js
@@ -3,6 +3,464 @@ this.recline.View = this.recline.View || {};
// Views module following classic module pattern
(function($, my) {
+// ## DataExplorer
+//
+// 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 = ( this.headers.length > 0 )
+ modelData.headers = this.headers;
+ return modelData;
+ },
+ render: function() {
+ var self = this;
+ this.headers = _.filter(this.model.get('headers'), function(header) {
+ return _.indexOf(self.hiddenHeaders, header) == -1;
+ });
+ var htmls = $.mustache(this.template, this.toTemplateJSON());
+ this.el.html(htmls);
+ this.model.currentDocuments.forEach(function(doc) {
+ var tr = $('|
');
+ self.el.find('tbody').append(tr);
+ var newView = new my.DataTableRow({
+ model: doc,
+ el: tr,
+ headers: self.headers,
+ });
+ newView.render();
+ });
+ this.el.toggleClass('no-hidden', (self.hiddenHeaders.length == 0));
+ return this;
+ }
+});
+
+// ## DataTableRow View for rendering an individual document.
+//
+// Since we want this to update in place it is up to creator to provider the element to attach to.
+// In addition you must pass in a headers in the constructor options. This should be list of headers for the DataTable.
+my.DataTableRow = Backbone.View.extend({
+ initialize: function(options) {
+ _.bindAll(this, 'render');
+ this._headers = options.headers;
+ this.el = $(this.el);
+ this.model.bind('change', this.render);
+ },
+
+ template: ' \
+ | \
+ {{#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);
+ my.notify("Updating row...", {loader: true});
+ this.model.save().then(function(response) {
+ my.notify("Row updated successfully", {category: 'success'});
+ })
+ .fail(function() {
+ my.notify('Error saving row', {
+ category: 'error',
+ persist: true
+ });
+ });
+ },
+
+ onEditorCancel: function(e) {
+ var cell = $(e.target).parents('.data-table-cell-value');
+ cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
+ }
+});
+
+
+/* ========================================================== */
+// ## Miscellaneous Utilities
// Parse a URL query string (?xyz=abc...) into a dictionary.
function parseQueryString(q) {
diff --git a/test/index.html b/test/index.html
index 219e2b3d..400d740d 100644
--- a/test/index.html
+++ b/test/index.html
@@ -20,8 +20,6 @@
-
-