-
+
diff --git a/demo/js/app.js b/demo/js/app.js
index 1bf6b6f6..470f7b34 100755
--- a/demo/js/app.js
+++ b/demo/js/app.js
@@ -1,12 +1,12 @@
$(function() {
// do not like all these window globals ...
// window.$container = $('.container .right-panel');
- window.$container = $('.container');
+ window.$container = $('.data-explorer-here');
var dataset = demoDataset();
window.dataExplorer = new recline.View.DataExplorer({
- model: dataset
+ el: window.$container
+ , model: dataset
});
- window.$container.append(window.dataExplorer.el);
setupLoadFromWebstore(function(dataset) {
window.dataExplorer.remove();
window.dataExplorer = null;
@@ -15,6 +15,10 @@ $(function() {
});
window.$container.append(window.dataExplorer.el);
});
+ $('a.set-read-only').click(function() {
+ window.dataExplorer.setReadOnly();
+ alert('Read-only mode set');
+ });
})
function demoDataset() {
diff --git a/demo/original.html b/demo/original.html
new file mode 100755
index 00000000..71cc17e9
--- /dev/null
+++ b/demo/original.html
@@ -0,0 +1,241 @@
+
+
+
+
+
- Recline DataExplorer
- / Demo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/style/data-table.css b/demo/style/data-table.css
index 39cbcde1..c455ce8b 100755
--- a/demo/style/data-table.css
+++ b/demo/style/data-table.css
@@ -173,7 +173,7 @@ a img {
top: -4px;
}
-#notification-container {
+.notification-container {
width: 400px;
left: 520px;
display: none;
@@ -183,7 +183,7 @@ a img {
text-align: center;
}
-#notification {
+.notification {
display: inline-block;
margin: 0 auto;
padding: 5px 8px 4px;
diff --git a/demo/style/style.css b/demo/style/style.css
index 40c295f4..5b725b9d 100755
--- a/demo/style/style.css
+++ b/demo/style/style.css
@@ -43,7 +43,7 @@ a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif)
.chosen {border: 1px solid green}
.info { padding: 0px 0px 10px 0px}
.large-loader { position: relative; }
-.menu-overlay {
+.data-table-menu-overlay {
position: fixed;
top: 0;
left: 0;
@@ -51,7 +51,7 @@ a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif)
height: 100%;
}
-ul.menu {
+ul.data-table-menu {
display: none;
outline-style: none;
background: white;
@@ -68,18 +68,18 @@ ul.menu {
border-right: 1px solid #666;
border-bottom: 1px solid #666;
margin: 0; padding: 0; }
- ul.menu * {
+ ul.data-table-menu * {
margin: 0;
padding: 0; }
- ul.menu a {
+ ul.data-table-menu a {
line-height: 14px;
color: black;
display: block;
padding: 5px 7px;
text-decoration: none; }
- ul.menu li {
+ ul.data-table-menu li {
height: 24px; }
- ul.menu li:hover {
+ ul.data-table-menu li:hover {
background-color: #DBE8F8 }
@@ -213,7 +213,7 @@ span.tooltip-status {
/* rgrp added mods */
-.data-explorer .nav {
+.data-explorer .header {
border-top: 15px solid #BCF;
border-left: 5px solid #BCF;
display: block;
@@ -227,6 +227,27 @@ span.tooltip-status {
padding-top: 3px;
}
+.header .navigation,
+.header .navigation li,
+.header .pagination,
+.header .pagination form
+{
+ display: inline;
+}
+
+.header .pagination {
+ float: right;
+}
+
+.header .pagination input {
+ width: 40px;
+}
+
+.doc-count {
+ font-weight: bold;
+ font-size: 120%;
+}
+
.data-view-container {
display: block;
border-top: 1px solid #BCF;
@@ -239,13 +260,3 @@ span.tooltip-status {
right: 0px;
background: white;
}
-
-.nav-pagination {
- display: inline;
- float: right;
- list-style-type: none;
-}
-
-.nav-pagination input {
- width: 40px;
-}
diff --git a/src/costco.js b/src/costco.js
index edce7590..2256b3c3 100755
--- a/src/costco.js
+++ b/src/costco.js
@@ -25,8 +25,7 @@ var costco = function() {
preview.push({before: JSON.stringify(before), after: JSON.stringify(after)});
}
}
- // TODO: 2012-01-05 Move this out of this function and up into (view) functions that call this
- util.render('editPreview', 'expression-preview-container', {rows: preview});
+ return preview;
}
function mapDocs(docs, editFunc) {
diff --git a/src/model.js b/src/model.js
index ba143881..e102063b 100644
--- a/src/model.js
+++ b/src/model.js
@@ -6,26 +6,32 @@ recline.Model = function($) {
var my = {};
// A Dataset model.
+//
+// Other than standard list of Backbone attributes 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() {
this.currentDocuments = new my.DocumentList();
+ this.docCount = null;
},
- getLength: function() {
- return this.rowCount;
- },
-
- // Get rows (documents) from the backend returning a recline.DocumentList
+ // AJAX method with promise API to get rows (documents) from the backend.
//
- // TODO: ? rename to getDocuments?
+ // 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
- getRows: function(numRows, start) {
+ getDocuments: function(numRows, start) {
var self = this;
var dfd = $.Deferred();
- this.backend.getRows(this.id, numRows, start).then(function(rows) {
+ this.backend.getDocuments(this.id, numRows, start).then(function(rows) {
var docs = _.map(rows, function(row) {
return new my.Document(row);
});
@@ -33,6 +39,12 @@ my.Dataset = Backbone.Model.extend({
dfd.resolve(self.currentDocuments);
});
return dfd.promise();
+ },
+
+ toTemplateJSON: function() {
+ var data = this.toJSON();
+ data.docCount = this.docCount;
+ return data;
}
});
@@ -55,14 +67,16 @@ my.setBackend = function(backend) {
// Backend which just caches in memory
//
-// Does not need to be a backbone model but provides some conveience
+// Does not need to be a backbone model but provides some conveniences
my.BackendMemory = Backbone.Model.extend({
// Initialize a Backend with a local in-memory dataset.
//
// NB: We can handle one and only one dataset at a time.
//
// :param dataset: the data for a dataset on which operations will be
- // performed. In the form of a hash with metadata and data attributes.
+ // performed. Its form should be a hash with metadata and data
+ // attributes.
+ //
// - metadata: hash of key/value attributes of any kind (but usually with title attribute)
// - data: hash with 2 keys:
// - headers: list of header names/labels
@@ -70,13 +84,13 @@ my.BackendMemory = Backbone.Model.extend({
//
// Example of data:
//
- // {
- // headers: ['x', 'y', 'z']
- // , rows: [
- // {id: 0, x: 1, y: 2, z: 3}
- // , {id: 1, x: 2, y: 4, z: 6}
- // ]
- // };
+ // {
+ // headers: ['x', 'y', 'z']
+ // , rows: [
+ // {id: 0, x: 1, y: 2, z: 3}
+ // , {id: 1, x: 2, y: 4, z: 6}
+ // ]
+ // };
initialize: function(dataset) {
// deep copy
this._datasetAsData = $.extend(true, {}, dataset);
@@ -103,7 +117,7 @@ my.BackendMemory = Backbone.Model.extend({
dataset.set({
headers: rawDataset.data.headers
});
- dataset.rowCount = rawDataset.data.rows.length;
+ dataset.docCount = rawDataset.data.rows.length;
dfd.resolve(dataset);
}
return dfd.promise();
@@ -131,7 +145,7 @@ my.BackendMemory = Backbone.Model.extend({
alert('Not supported: sync on BackendMemory with method ' + method + ' and model ' + model);
}
},
- getRows: function(datasetId, numRows, start) {
+ getDocuments: function(datasetId, numRows, start) {
if (start === undefined) {
start = 0;
}
@@ -184,14 +198,14 @@ my.BackendWebstore = Backbone.Model.extend({
dataset.set({
headers: headers
});
- dataset.rowCount = schema.count;
+ dataset.docCount = schema.count;
dfd.resolve(dataset, jqxhr);
});
return dfd.promise();
}
}
},
- getRows: function(datasetId, numRows, start) {
+ getDocuments: function(datasetId, numRows, start) {
if (start === undefined) {
start = 0;
}
diff --git a/src/util.js b/src/util.js
index 009284c4..97e5c82d 100755
--- a/src/util.js
+++ b/src/util.js
@@ -1,4 +1,51 @@
var util = function() {
+ var templates = {
+ transformActions: '
+
+
+
+
+ Recline DataExplorer
+ / Demo
+
+
+
+
+
+ \
+ \
+ \
+
\
+
\
+ '
+ };
$.fn.serializeObject = function() {
var o = {};
@@ -74,7 +121,7 @@ var util = function() {
}
function position( thing, elem, offset ) {
- var position = $(elem.target).offset();
+ var position = $(elem.target).position();
if (offset) {
if (offset.top) position.top += offset.top;
if (offset.left) position.left += offset.left;
@@ -89,7 +136,7 @@ var util = function() {
function render( template, target, options ) {
if ( !options ) options = {data: {}};
if ( !options.data ) options = {data: options};
- var html = $.mustache( $( "." + template + "Template:first" ).html(), options.data );
+ var html = $.mustache( templates[template], options.data );
if (target instanceof jQuery) {
var targetDom = target;
} else {
@@ -103,16 +150,31 @@ var util = function() {
// TODO: remove (commented out as part of Backbon-i-fication
// if (template in app.after) app.after[template]();
}
-
- function notify( message, options ) {
- if (!options) var options = {};
- $('#notification-container').show();
- $('#notification-message').text(message);
- if (!options.loader) $('.notification-loader').hide();
- if (options.loader) $('.notification-loader').show();
- if (!options.persist) setTimeout(function() { $('#notification-container').hide() }, 3000);
- }
+ function notify(message, options) {
+ if (!options) var options = {};
+ var tmplData = _.extend({
+ msg: message,
+ category: 'warning'
+ },
+ options);
+ var _template = ' \
+ | \ + before \ + | \ +\ + after \ + | \ +
|---|---|
| \ + {{before}} \ + | \ +\ + {{after}} \ + | \ +
× \
+
';
+ var _templated = $.mustache(_template, tmplData);
+ _templated = $(_templated).appendTo($('.data-explorer .alert-messages'));
+ if (!options.persist) {
+ setTimeout(function() {
+ $(_templated).remove();
+ }, 3000);
+ }
+ }
+
function formatMetadata(data) {
out = '{{msg}} \
+ {{#loader}} \
+ 
\
+ {{/loader}} \
+
- ';
$.each(data, function(key, val) {
diff --git a/src/view.js b/src/view.js
index e416d697..025e6f3d 100644
--- a/src/view.js
+++ b/src/view.js
@@ -5,86 +5,164 @@ 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({
- tagName: 'div',
- className: 'data-explorer',
template: ' \
-