this . recline = this . recline || {};
+ backend.csv.js
backend.csv.js this . recline = this . recline || {};
this . recline . Backend = this . recline . Backend || {};
this . recline . Backend . CSV = this . recline . Backend . CSV || {};
-( function ( my ) { load
+( function ( my ) { fetch
-Load data from a CSV file referenced in an HTMl5 file object returning the
-dataset in the callback
+3 options
-@param options as for parseCSV below
my . load = function ( file , callback , options ) {
- var encoding = options . encoding || 'UTF-8' ;
-
- var metadata = {
- id : file . name ,
- file : file
- };
- var reader = new FileReader (); TODO
reader . onload = function ( e ) {
- 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 , encoding );
- };
+
+CSV local fileobject -> HTML5 file object + CSV parser
+Already have CSV string (in data) attribute -> CSV parser
+online CSV file that is ajax-able -> ajax + csv parser
+
- my . csvToDataset = function ( csvString , options ) {
- var out = my . parseCSV ( csvString , options );
- fields = _ . map ( out [ 0 ], function ( cell ) {
- return { id : cell , label : cell };
- });
- var data = _ . map ( out . slice ( 1 ), function ( row ) {
- var _doc = {};
- _ . each ( out [ 0 ], function ( fieldId , idx ) {
- _doc [ fieldId ] = row [ idx ];
+All options generates similar data and give a memory store outcome
my . fetch = function ( dataset ) {
+ var dfd = $ . Deferred ();
+ if ( dataset . file ) {
+ var reader = new FileReader ();
+ var encoding = dataset . encoding || 'UTF-8' ;
+ reader . onload = function ( e ) {
+ var rows = my . parseCSV ( e . target . result , dataset );
+ dfd . resolve ({
+ records : rows ,
+ metadata : {
+ filename : dataset . file . name
+ },
+ useMemoryStore : true
+ });
+ };
+ reader . onerror = function ( e ) {
+ alert ( 'Failed to load file. Code: ' + e . target . error . code );
+ };
+ reader . readAsText ( dataset . file , encoding );
+ } else if ( dataset . data ) {
+ var rows = my . parseCSV ( dataset . data , dataset );
+ dfd . resolve ({
+ records : rows ,
+ useMemoryStore : true
});
- return _doc ;
- });
- var dataset = recline . Backend . Memory . createDataset ( data , fields );
- return dataset ;
- }; Converts a Comma Separated Values string into an array of arrays.
+ } else if ( dataset . url ) {
+ $ . get ( dataset . url ). done ( function ( data ) {
+ var rows = my . parseCSV ( dataset . data , dataset );
+ dfd . resolve ({
+ records : rows ,
+ useMemoryStore : true
+ });
+ });
+ }
+ return dfd . promise ();
+ };
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.
@@ -51,14 +60,13 @@ Each line in the CSV becomes an array.
@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 , options ) { Get rid of any trailing \n
s = chomp ( s );
+http://www.uselesscode.org/javascript/csv/ my . parseCSV = function ( s , options ) { Get rid of any trailing \n
s = chomp ( s );
var options = options || {};
- var trm = options . trim ;
+ var trm = ( options . trim === false ) ? false : true ;
var separator = options . separator || ',' ;
var delimiter = options . delimiter || '"' ;
-
var cur = '' , // The character we are currently processing.
inQuote = false ,
fieldQuoted = false ,
@@ -69,10 +77,10 @@ thttp://www.uselesscode.org/javascript/csv/ 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 ) {
+ 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 )) {
+ } Convert unquoted numbers to their appropriate types
if ( rxIsInt . test ( field )) {
field = parseInt ( field , 10 );
} else if ( rxIsFloat . test ( field )) {
field = parseFloat ( field , 10 );
@@ -82,25 +90,25 @@ thttp://www.uselesscode.org/javascript/csv/ };
for ( i = 0 ; i < s . length ; i += 1 ) {
- cur = s . charAt ( i ); 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
If this is EOR append row to output and flush row
if ( cur === "\n" ) {
+ cur = s . charAt ( i ); 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
If this is EOR append row to output and flush row
if ( cur === "\n" ) {
out . push ( row );
row = [];
- } Flush the field buffer
Flush the field buffer
field = '' ;
fieldQuoted = false ;
- } else { If it's not a delimiter, add it to the field buffer
if ( cur !== delimiter ) {
+ } else { If it's not a delimiter, add it to the field buffer
if ( cur !== delimiter ) {
field += cur ;
} else {
- if ( ! inQuote ) { We are not in a quote, start a quote
inQuote = true ;
+ if ( ! inQuote ) { We are not in a quote, start a quote
inQuote = true ;
fieldQuoted = true ;
- } else { Next char is delimiter, this is an escaped delimiter
if ( s . charAt ( i + 1 ) === delimiter ) {
- field += delimiter ; Skip the next char
It's not escaping, so end quote
inQuote = false ;
+ } else { Next char is delimiter, this is an escaped delimiter
if ( s . charAt ( i + 1 ) === delimiter ) {
+ field += delimiter ; Skip the next char
It's not escaping, so end quote
inQuote = false ;
}
}
}
}
- } Add the last field
field = processField ( field );
+ } Add the last field
field = processField ( field );
row . push ( field );
out . push ( row );
@@ -108,10 +116,10 @@ thttp://www.uselesscode.org/javascript/csv/ };
var rxIsInt = /^\d+$/ ,
- rxIsFloat = /^\d*\.\d+$|^\d+\.\d*$/ , If a string has leading or trailing space,
+ 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 ) {
+ 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 ();
};
@@ -123,8 +131,8 @@ it needs to be quoted in CSV output }());
function chomp ( s ) {
- if ( s . charAt ( s . length - 1 ) !== "\n" ) { Does not end with \n, just return string
Remove the \n
return s . substring ( 0 , s . length - 1 );
+ if ( s . charAt ( s . length - 1 ) !== "\n" ) { Does not end with \n, just return string
Remove the \n
return s . substring ( 0 , s . length - 1 );
}
}
diff --git a/docs/src/backend.dataproxy.html b/docs/src/backend.dataproxy.html
new file mode 100644
index 00000000..97d3d9bf
--- /dev/null
+++ b/docs/src/backend.dataproxy.html
@@ -0,0 +1,63 @@
+ backend.dataproxy.js
backend.dataproxy.js this . recline = this . recline || {};
+this . recline . Backend = this . recline . Backend || {};
+this . recline . Backend . DataProxy = this . recline . Backend . DataProxy || {};
+
+( function ( $ , my ) {
+ my . __type__ = 'dataproxy' ; URL for the dataproxy
my . dataproxy_url = 'http://jsonpdataproxy.appspot.com' ; load
+
+Load data from a URL via the DataProxy .
+
+Returns array of field names and array of arrays for records
my . fetch = function ( dataset ) {
+ var data = {
+ url : dataset . url ,
+ 'max-results' : dataset . size || dataset . rows || 1000 ,
+ type : dataset . format || ''
+ };
+ var jqxhr = $ . ajax ({
+ url : my . dataproxy_url ,
+ data : data ,
+ dataType : 'jsonp'
+ });
+ var dfd = $ . Deferred ();
+ _wrapInTimeout ( jqxhr ). done ( function ( results ) {
+ if ( results . error ) {
+ dfd . reject ( results . error );
+ }
+
+ dfd . resolve ({
+ records : results . data ,
+ fields : results . fields ,
+ useMemoryStore : true
+ });
+ })
+ . fail ( function ( arguments ) {
+ dfd . reject ( arguments );
+ });
+ return dfd . promise ();
+ }; _wrapInTimeout
+
+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.
var _wrapInTimeout = function ( ourFunction ) {
+ var dfd = $ . Deferred ();
+ var timeout = 5000 ;
+ var timer = setTimeout ( function () {
+ dfd . reject ({
+ message : 'Request Error: Backend did not respond after ' + ( timeout / 1000 ) + ' seconds'
+ });
+ }, timeout );
+ ourFunction . done ( function ( arguments ) {
+ clearTimeout ( timer );
+ dfd . resolve ( arguments );
+ })
+ . fail ( function ( arguments ) {
+ clearTimeout ( timer );
+ dfd . reject ( arguments );
+ })
+ ;
+ return dfd . promise ();
+ }
+
+}( jQuery , this . recline . Backend . DataProxy ));
+
+
\ No newline at end of file
diff --git a/docs/src/backend.elasticsearch.html b/docs/src/backend.elasticsearch.html
new file mode 100644
index 00000000..df2073d0
--- /dev/null
+++ b/docs/src/backend.elasticsearch.html
@@ -0,0 +1,225 @@
+ backend.elasticsearch.js
backend.elasticsearch.js this . recline = this . recline || {};
+this . recline . Backend = this . recline . Backend || {};
+this . recline . Backend . ElasticSearch = this . recline . Backend . ElasticSearch || {};
+
+( function ( $ , my ) {
+ my . __type__ = 'elasticsearch' ; ElasticSearch Wrapper
+
+A simple JS wrapper around an ElasticSearch endpoints.
+
+@param {String} endpoint: url for ElasticSearch type/table, e.g. for ES running
+on http://localhost:9200 with index twitter and type tweet it would be:
+
+http://localhost:9200/twitter/tweet
+
+@param {Object} options: set of options such as:
+
+
+headers - {dict of headers to add to each request}
+dataType: dataType for AJAx requests e.g. set to jsonp to make jsonp requests (default is json requests)
+ my . Wrapper = function ( endpoint , options ) {
+ var self = this ;
+ this . endpoint = endpoint ;
+ this . options = _ . extend ({
+ dataType : 'json'
+ },
+ options ); mapping
+
+Get ES mapping for this type/table
+
+@return promise compatible deferred object.
this . mapping = function () {
+ var schemaUrl = self . endpoint + '/_mapping' ;
+ var jqxhr = makeRequest ({
+ url : schemaUrl ,
+ dataType : this . options . dataType
+ });
+ return jqxhr ;
+ }; get
+
+Get record corresponding to specified id
+
+@return promise compatible deferred object.
this . get = function ( id ) {
+ var base = this . endpoint + '/' + id ;
+ return makeRequest ({
+ url : base ,
+ dataType : 'json'
+ });
+ }; upsert
+
+create / update a record to ElasticSearch backend
+
+@param {Object} doc an object to insert to the index.
+@return deferred supporting promise API
this . upsert = function ( doc ) {
+ var data = JSON . stringify ( doc );
+ url = this . endpoint ;
+ if ( doc . id ) {
+ url += '/' + doc . id ;
+ }
+ return makeRequest ({
+ url : url ,
+ type : 'POST' ,
+ data : data ,
+ dataType : 'json'
+ });
+ }; delete
+
+Delete a record from the ElasticSearch backend.
+
+@param {Object} id id of object to delete
+@return deferred supporting promise API
this . delete = function ( id ) {
+ url = this . endpoint ;
+ url += '/' + id ;
+ return makeRequest ({
+ url : url ,
+ type : 'DELETE' ,
+ dataType : 'json'
+ });
+ };
+
+ this . _normalizeQuery = function ( queryObj ) {
+ var self = this ;
+ var queryInfo = ( queryObj && queryObj . toJSON ) ? queryObj . toJSON () : _ . extend ({}, queryObj );
+ var out = {
+ constant_score : {
+ query : {}
+ }
+ };
+ if ( ! queryInfo . q ) {
+ out . constant_score . query = {
+ match_all : {}
+ };
+ } else {
+ out . constant_score . query = {
+ query_string : {
+ query : queryInfo . q
+ }
+ };
+ }
+ if ( queryInfo . filters && queryInfo . filters . length ) {
+ out . constant_score . filter = {
+ and : []
+ };
+ _ . each ( queryInfo . filters , function ( filter ) {
+ out . constant_score . filter . and . push ( self . _convertFilter ( filter ));
+ });
+ }
+ return out ;
+ },
+
+ this . _convertFilter = function ( filter ) {
+ var out = {};
+ out [ filter . type ] = {}
+ if ( filter . type === 'term' ) {
+ out . term [ filter . field ] = filter . term . toLowerCase ();
+ } else if ( filter . type === 'geo_distance' ) {
+ out . geo_distance [ filter . field ] = filter . point ;
+ out . geo_distance . distance = filter . distance ;
+ out . geo_distance . unit = filter . unit ;
+ }
+ return out ;
+ }, query
+
+@return deferred supporting promise API
this . query = function ( queryObj ) {
+ var esQuery = ( queryObj && queryObj . toJSON ) ? queryObj . toJSON () : _ . extend ({}, queryObj );
+ var queryNormalized = this . _normalizeQuery ( queryObj );
+ delete esQuery . q ;
+ delete esQuery . filters ;
+ esQuery . query = queryNormalized ;
+ var data = { source : JSON . stringify ( esQuery )};
+ var url = this . endpoint + '/_search' ;
+ var jqxhr = makeRequest ({
+ url : url ,
+ data : data ,
+ dataType : this . options . dataType
+ });
+ return jqxhr ;
+ }
+ }; Recline Connectors
+
+Requires URL of ElasticSearch endpoint to be specified on the dataset
+via the url attribute.
ES options which are passed through to options on Wrapper (see Wrapper for details)
fetch my . fetch = function ( dataset ) {
+ var es = new my . Wrapper ( dataset . url , my . esOptions );
+ var dfd = $ . Deferred ();
+ es . mapping (). done ( function ( schema ) { only one top level key in ES = the type so we can ignore it
var key = _ . keys ( schema )[ 0 ];
+ var fieldData = _ . map ( schema [ key ]. properties , function ( dict , fieldName ) {
+ dict . id = fieldName ;
+ return dict ;
+ });
+ dfd . resolve ({
+ fields : fieldData
+ });
+ })
+ . fail ( function ( arguments ) {
+ dfd . reject ( arguments );
+ });
+ return dfd . promise ();
+ }; save my . save = function ( changes , dataset ) {
+ var es = new my . Wrapper ( dataset . url , my . esOptions );
+ if ( changes . creates . length + changes . updates . length + changes . deletes . length > 1 ) {
+ var dfd = $ . Deferred ();
+ msg = 'Saving more than one item at a time not yet supported' ;
+ alert ( msg );
+ dfd . reject ( msg );
+ return dfd . promise ();
+ }
+ if ( changes . creates . length > 0 ) {
+ return es . upsert ( changes . creates [ 0 ]);
+ }
+ else if ( changes . updates . length > 0 ) {
+ return es . upsert ( changes . updates [ 0 ]);
+ } else if ( changes . deletes . length > 0 ) {
+ return es . delete ( changes . deletes [ 0 ]. id );
+ }
+ }; query my . query = function ( queryObj , dataset ) {
+ var dfd = $ . Deferred ();
+ var es = new my . Wrapper ( dataset . url , my . esOptions );
+ var jqxhr = es . query ( queryObj );
+ jqxhr . done ( function ( results ) {
+ var out = {
+ total : results . hits . total ,
+ };
+ out . hits = _ . map ( results . hits . hits , function ( hit ) {
+ if ( ! ( 'id' in hit . _source ) && hit . _id ) {
+ hit . _source . id = hit . _id ;
+ }
+ return hit . _source ;
+ });
+ if ( results . facets ) {
+ out . facets = results . facets ;
+ }
+ dfd . resolve ( out );
+ }). fail ( function ( errorObj ) {
+ var out = {
+ title : 'Failed: ' + errorObj . status + ' code' ,
+ message : errorObj . responseText
+ };
+ dfd . reject ( out );
+ });
+ return dfd . promise ();
+ }; makeRequest
+
+Just $.ajax but in any headers in the 'headers' attribute of this
+Backend instance. Example:
+
+
+var jqxhr = this._makeRequest({
+ url: the-url
+});
+ var makeRequest = function ( data , headers ) {
+ var extras = {};
+ if ( headers ) {
+ extras = {
+ beforeSend : function ( req ) {
+ _ . each ( headers , function ( value , key ) {
+ req . setRequestHeader ( key , value );
+ });
+ }
+ };
+ }
+ var data = _ . extend ( extras , data );
+ return $ . ajax ( data );
+};
+
+}( jQuery , this . recline . Backend . ElasticSearch ));
+
+
\ No newline at end of file
diff --git a/docs/src/backend.gdocs.html b/docs/src/backend.gdocs.html
new file mode 100644
index 00000000..c9ce9ed4
--- /dev/null
+++ b/docs/src/backend.gdocs.html
@@ -0,0 +1,108 @@
+ backend.gdocs.js
backend.gdocs.js this . recline = this . recline || {};
+this . recline . Backend = this . recline . Backend || {};
+this . recline . Backend . GDocs = this . recline . Backend . GDocs || {};
+
+( function ( $ , my ) {
+ my . __type__ = 'gdocs' ; Google spreadsheet backend
+
+Fetch data from a Google Docs spreadsheet.
+
+Dataset must have a url attribute pointing to the Gdocs or its JSON feed e.g.
+
+
+var dataset = new recline.Model.Dataset({
+ url: 'https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdGlQVDJnbjZRSU1tUUJWOUZXRG53VkE#gid=0'
+ },
+ 'gdocs'
+);
+
+var dataset = new recline.Model.Dataset({
+ url: 'https://spreadsheets.google.com/feeds/list/0Aon3JiuouxLUdDQwZE1JdV94cUd6NWtuZ0IyWTBjLWc/od6/public/values?alt=json'
+ },
+ 'gdocs'
+);
+
+
+@return object with two attributes
+
+
+fields: array of Field objects
+records: array of objects for each row
+ my . fetch = function ( dataset ) {
+ var dfd = $ . Deferred ();
+ var url = my . getSpreadsheetAPIUrl ( dataset . url );
+ $ . getJSON ( url , function ( d ) {
+ result = my . parseData ( d );
+ var fields = _ . map ( result . fields , function ( fieldId ) {
+ return { id : fieldId };
+ });
+ dfd . resolve ({
+ records : result . records ,
+ fields : fields ,
+ useMemoryStore : true
+ });
+ });
+ return dfd . promise ();
+ }; parseData
+
+Parse data from Google Docs API into a reasonable form
+
+: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).
+
+Issues: seems google docs return columns in rows in random order and not even sure whether consistent across rows.
my . parseData = function ( gdocsSpreadsheet ) {
+ var options = {};
+ if ( arguments . length > 1 ) {
+ options = arguments [ 1 ];
+ }
+ var results = {
+ fields : [],
+ records : []
+ }; default is no special info on type of columns
var colTypes = {};
+ if ( options . colTypes ) {
+ colTypes = options . colTypes ;
+ }
+ 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 . fields . push ( col );
+ }
+ }
+ } converts non numberical values that should be numerical (22.3%[string] -> 0.223[float])
var rep = /^([\d\.\-]+)\%$/ ;
+ results . records = _ . map ( gdocsSpreadsheet . feed . entry , function ( entry ) {
+ var row = {};
+ _ . each ( results . fields , function ( col ) {
+ 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 [ col ] = value ;
+ });
+ return row ;
+ });
+ return results ;
+ }; Convenience function to get GDocs JSON API Url from standard URL
my . getSpreadsheetAPIUrl = function ( url ) {
+ if ( url . indexOf ( 'feeds/list' ) != - 1 ) {
+ return url ;
+ } else { https://docs.google.com/spreadsheet/ccc?key=XXXX#gid=0
var regex = /.*spreadsheet\/ccc?.*key=([^#?&+]+).*/ ;
+ var matches = url . match ( regex );
+ if ( matches ) {
+ var key = matches [ 1 ];
+ var worksheet = 1 ;
+ var out = 'https://spreadsheets.google.com/feeds/list/' + key + '/' + worksheet + '/public/values?alt=json' ;
+ return out ;
+ } else {
+ alert ( 'Failed to extract gdocs key from ' + url );
+ }
+ }
+ };
+}( jQuery , this . recline . Backend . GDocs ));
+
+
\ No newline at end of file
diff --git a/docs/backend/memory.html b/docs/src/backend.memory.html
similarity index 59%
rename from docs/backend/memory.html
rename to docs/src/backend.memory.html
index a1a95921..f2790485 100644
--- a/docs/backend/memory.html
+++ b/docs/src/backend.memory.html
@@ -1,30 +1,19 @@
- memory.js
memory.js this . recline = this . recline || {};
+ backend.memory.js
backend.memory.js this . recline = this . recline || {};
this . recline . Backend = this . recline . Backend || {};
this . recline . Backend . Memory = this . recline . Backend . Memory || {};
-( function ( $ , my ) { createDataset
-
-Convenience function to create a simple 'in-memory' dataset in one step.
-
-@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.
my . createDataset = function ( data , fields , metadata ) {
- var wrapper = new my . DataWrapper ( data , fields );
- var backend = new my . Backbone ();
- var dataset = new recline . Model . Dataset ( metadata , backend );
- dataset . _dataCache = wrapper ;
- dataset . fetch ();
- dataset . query ();
- return dataset ;
- }; Data Wrapper
+( function ( $ , my ) {
+ my . __type__ = 'memory' ; Data Wrapper
Turn a simple array of JS objects into a mini data-store with
functionality like querying, faceting, updating (by ID) and deleting (by
-ID).
my . DataWrapper = function ( data , fields ) {
+ID).
+
+@param data list of hashes for each record/row in the data ({key:
+value, key: value})
+@param fields (optional) list of field hashes (each hash defining a field
+as per recline.Model.Field). If fields not specified they will be taken
+from the data.
my . Store = function ( data , fields ) {
var self = this ;
this . data = data ;
if ( fields ) {
@@ -52,7 +41,20 @@ ID). this. data = newdocs ;
};
+ this . save = function ( changes , dataset ) {
+ var self = this ;
+ var dfd = $ . Deferred ();
TODO _.each(changes.creates) { ... }
_ . each ( changes . updates , function ( record ) {
+ self . update ( record );
+ });
+ _ . each ( changes . deletes , function ( record ) {
+ self . delete ( record );
+ });
+ dfd . resolve ();
+ return dfd . promise ();
+ },
+
this . query = function ( queryObj ) {
+ var dfd = $ . Deferred ();
var numRows = queryObj . size || this . data . length ;
var start = queryObj . from || 0 ;
var results = this . data ;
@@ -61,26 +63,29 @@ ID). var fieldName = _ . keys ( sortObj )[ 0 ];
results = _ . sortBy ( results , function ( doc ) {
var _out = doc [ fieldName ];
- return ( sortObj [ fieldName ]. order == 'asc' ) ? _out : - 1 * _out ;
+ return _out ;
});
+ if ( sortObj [ fieldName ]. order == 'desc' ) {
+ results . reverse ();
+ }
});
- var total = results . length ;
var facets = this . computeFacets ( results , queryObj );
- results = results . slice ( start , start + numRows );
- return {
- total : total ,
- documents : results ,
+ var out = {
+ total : results . length ,
+ hits : results . slice ( start , start + numRows ),
facets : facets
};
+ dfd . resolve ( out );
+ return dfd . promise ();
};
in place filtering
this . _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 ]);
- });
+ _ . each ( queryObj . filters , function ( filter ) { if a term filter ...
if ( filter . type === 'term' ) {
+ results = _ . filter ( results , function ( doc ) {
+ return ( doc [ filter . field ] == filter . term );
+ });
+ }
});
return results ;
- }; we OR across fields but AND across terms in query string
this . _applyFreeTextQuery = function ( results , queryObj ) {
+ }; we OR across fields but AND across terms in query string
this . _applyFreeTextQuery = function ( results , queryObj ) {
if ( queryObj . q ) {
var terms = queryObj . q . split ( ' ' );
results = _ . filter ( results , function ( rawdoc ) {
@@ -89,9 +94,9 @@ ID). var foundmatch = false ;
_ . each ( self . fields , function ( field ) {
var value = rawdoc [ field . id ];
- if ( value !== null ) { value = value . toString (); }
TODO regexes?
foundmatch = foundmatch || ( value === term ); TODO: early out (once we are true should break to spare unnecessary testing)
+ if ( value !== null ) { value = value . toString (); }
TODO regexes?
foundmatch = foundmatch || ( value . toLowerCase () === term . toLowerCase ()); 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)
+ matches = matches && foundmatch ;
TODO: early out (once false should break to spare unnecessary testing)
if (!matches) return false;
});
return matches ;
});
@@ -99,14 +104,14 @@ if (!matches) return false;
return results ;
};
- this . computeFacets = function ( documents , queryObj ) {
+ this . computeFacets = function ( records , queryObj ) {
var facetResults = {};
if ( ! queryObj . facets ) {
return facetResults ;
}
- _ . each ( queryObj . facets , function ( query , facetId ) { TODO: remove dependency on recline.Model
facetResults [ facetId ] = new recline . Model . Facet ({ id : facetId }). toJSON ();
+ _ . each ( queryObj . facets , function ( query , facetId ) { TODO: remove dependency on recline.Model
facetResults [ facetId ] = new recline . Model . Facet ({ id : facetId }). toJSON ();
facetResults [ facetId ]. termsall = {};
- }); faceting
_ . each ( documents , function ( doc ) {
+ }); faceting
_ . each ( records , function ( doc ) {
_ . each ( queryObj . facets , function ( query , facetId ) {
var fieldId = query . terms . field ;
var val = doc [ fieldId ];
@@ -123,58 +128,13 @@ if (!matches) return false;
var terms = _ . map ( tmp . termsall , function ( count , term ) {
return { term : term , count : count };
});
- tmp . terms = _ . sortBy ( terms , function ( item ) { want descending order
return - item . count ;
+ tmp . terms = _ . sortBy ( terms , function ( item ) { want descending order
return - item . count ;
});
tmp . terms = tmp . terms . slice ( 0 , 10 );
});
return facetResults ;
};
};
- Backbone
-
-Backbone connector for memory store attached to a Dataset object
my . Backbone = function () {
- this . __type__ = 'memory' ;
- this . sync = function ( method , model , options ) {
- var self = this ;
- var dfd = $ . Deferred ();
- if ( method === "read" ) {
- if ( model . __type__ == 'Dataset' ) {
- model . fields . reset ( model . _dataCache . fields );
- dfd . resolve ( model );
- }
- return dfd . promise ();
- } else if ( method === 'update' ) {
- if ( model . __type__ == 'Document' ) {
- model . dataset . _dataCache . update ( model . toJSON ());
- dfd . resolve ( model );
- }
- return dfd . promise ();
- } else if ( method === 'delete' ) {
- if ( model . __type__ == 'Document' ) {
- model . dataset . _dataCache . delete ( model . toJSON ());
- dfd . resolve ( model );
- }
- return dfd . promise ();
- } else {
- alert ( 'Not supported: sync on Memory backend with method ' + method + ' and model ' + model );
- }
- };
-
- this . query = function ( model , queryObj ) {
- var dfd = $ . Deferred ();
- var results = model . _dataCache . query ( queryObj );
- var hits = _ . map ( results . documents , function ( row ) {
- return { _source : row };
- });
- var out = {
- total : results . total ,
- hits : hits ,
- facets : results . facets
- };
- dfd . resolve ( out );
- return dfd . promise ();
- };
- };
}( jQuery , this . recline . Backend . Memory ));
diff --git a/docs/src/model.html b/docs/src/model.html
index 2fd24970..b7ae3e0c 100644
--- a/docs/src/model.html
+++ b/docs/src/model.html
@@ -1,97 +1,170 @@
- model.js
model.js Recline Backbone Models this . recline = this . recline || {};
+ model.js
model.js Recline Backbone Models this . recline = this . recline || {};
this . recline . Model = this . recline . Model || {};
-( function ( $ , my ) {
-
-A model has the following (non-Backbone) attributes:
-
-@property {FieldList} fields: (aka columns) is a FieldList listing all the
-fields on this Dataset (this can be set explicitly, or, will be set by
-Dataset.fetch() or Dataset.query()
-
-@property {DocumentList} currentDocuments: a DocumentList containing the
-Documents we have currently loaded for viewing (updated by calling query
-method)
-
-@property {number} docCount: total number of documents in 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
-editor view) changes will trigger a Dataset query.
-
-@property {FacetList} facets: FacetList object containing all current
-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 ) {
+( function ( $ , my ) { my . Dataset = Backbone . Model . extend ({
+ __type__ : 'Dataset' , initialize initialize : function () {
_ . bindAll ( this , 'query' );
- this . backend = backend ;
- if ( typeof ( backend ) === 'string' ) {
- this . backend = this . _backendFromString ( backend );
+ this . backend = null ;
+ if ( this . get ( 'backend' )) {
+ this . backend = this . _backendFromString ( this . get ( 'backend' ));
+ } else { // try to guess backend ...
+ if ( this . get ( 'records' )) {
+ this . backend = recline . Backend . Memory ;
+ }
}
this . fields = new my . FieldList ();
- this . currentDocuments = new my . DocumentList ();
+ this . currentRecords = new my . RecordList ();
+ this . _changes = {
+ deletes : [],
+ updates : [],
+ creates : []
+ };
this . facets = new my . FacetList ();
this . docCount = null ;
this . queryState = new my . Query ();
this . queryState . bind ( 'change' , this . query );
- this . queryState . bind ( 'facet:add' , this . query );
- }, query
+ this . queryState . bind ( 'facet:add' , this . query ); store is what we query and save against
+store will either be the backend or be a memory store if Backend fetch
+tells us to use memory store
this . _store = this . backend ;
+ if ( this . backend == recline . Backend . Memory ) {
+ this . fetch ();
+ }
+ }, fetch
-AJAX method with promise API to get documents from the backend.
+Retrieve dataset and (some) records from the backend.
fetch : function () {
+ var self = this ;
+ var dfd = $ . Deferred ();
+
+ if ( this . backend !== recline . Backend . Memory ) {
+ this . backend . fetch ( this . toJSON ())
+ . done ( handleResults )
+ . fail ( function ( arguments ) {
+ dfd . reject ( arguments );
+ });
+ } else { special case where we have been given data directly
handleResults ({
+ records : this . get ( 'records' ),
+ fields : this . get ( 'fields' ),
+ useMemoryStore : true
+ });
+ }
+
+ function handleResults ( results ) {
+ var out = self . _normalizeRecordsAndFields ( results . records , results . fields );
+ if ( results . useMemoryStore ) {
+ self . _store = new recline . Backend . Memory . Store ( out . records , out . fields );
+ }
+
+ self . set ( results . metadata );
+ self . fields . reset ( out . fields );
+ self . query ()
+ . done ( function () {
+ dfd . resolve ( self );
+ })
+ . fail ( function ( arguments ) {
+ dfd . reject ( arguments );
+ });
+ }
+
+ return dfd . promise ();
+ }, _normalizeRecordsAndFields
+
+Get a proper set of fields and records from incoming set of fields and records either of which may be null or arrays or objects
+
+e.g. fields = ['a', 'b', 'c'] and records = [ [1,2,3] ] =>
+fields = [ {id: a}, {id: b}, {id: c}], records = [ {a: 1}, {b: 2}, {c: 3}]
_normalizeRecordsAndFields : function ( records , fields ) { if no fields get them from records
if ( ! fields && records && records . length > 0 ) { records is array then fields is first row of records ...
if ( records [ 0 ] instanceof Array ) {
+ fields = records [ 0 ];
+ records = records . slice ( 1 );
+ } else {
+ fields = _ . map ( _ . keys ( records [ 0 ]), function ( key ) {
+ return { id : key };
+ });
+ }
+ } fields is an array of strings (i.e. list of field headings/ids)
if ( fields && fields . length > 0 && typeof fields [ 0 ] === 'string' ) { Rename duplicate fieldIds as each field name needs to be
+unique.
var seen = {};
+ fields = _ . map ( fields , function ( field , index ) { cannot use trim as not supported by IE7
var fieldId = field . replace ( /^\s+|\s+$/g , '' );
+ if ( fieldId === '' ) {
+ fieldId = '_noname_' ;
+ field = fieldId ;
+ }
+ while ( fieldId in seen ) {
+ seen [ field ] += 1 ;
+ fieldId = field + seen [ field ];
+ }
+ if ( ! ( field in seen )) {
+ seen [ field ] = 0 ;
+ } TODO: decide whether to keep original name as label ...
+return { id: fieldId, label: field || fieldId }
return { id : fieldId };
+ });
+ } records is provided as arrays so need to zip together with fields
+NB: this requires you to have fields to match arrays
if ( records && records . length > 0 && records [ 0 ] instanceof Array ) {
+ records = _ . map ( records , function ( doc ) {
+ var tmp = {};
+ _ . each ( fields , function ( field , idx ) {
+ tmp [ field . id ] = doc [ idx ];
+ });
+ return tmp ;
+ });
+ }
+ return {
+ fields : fields ,
+ records : records
+ };
+ },
+
+ save : function () {
+ var self = this ; TODO: need to reset the changes ...
return this . _store . save ( this . _changes , this . toJSON ());
+ }, query
+
+AJAX method with promise API to get records from the backend.
It will query based on current query state (given by this.queryState)
updated by queryObj (if provided).
-Resulting DocumentList are used to reset this.currentDocuments and are
+
Resulting RecordList are used to reset this.currentRecords and are
also returned.
query : function ( queryObj ) {
var self = this ;
- this . trigger ( 'query:start' );
- var actualQuery = self . _prepareQuery ( queryObj );
var dfd = $ . Deferred ();
- this . backend . query ( this , actualQuery ). done ( function ( queryResult ) {
- self . docCount = queryResult . total ;
- var docs = _ . map ( queryResult . hits , function ( hit ) {
- var _doc = new my . Document ( hit . _source );
- _doc . backend = self . backend ;
- _doc . dataset = self ;
- return _doc ;
+ this . trigger ( 'query:start' );
+
+ if ( queryObj ) {
+ this . queryState . set ( queryObj );
+ }
+ var actualQuery = this . queryState . toJSON ();
+
+ this . _store . query ( actualQuery , this . toJSON ())
+ . done ( function ( queryResult ) {
+ self . _handleQueryResult ( queryResult );
+ self . trigger ( 'query:done' );
+ dfd . resolve ( self . currentRecords );
+ })
+ . fail ( function ( arguments ) {
+ self . trigger ( 'query:fail' , arguments );
+ dfd . reject ( arguments );
});
- self . currentDocuments . reset ( docs );
- if ( queryResult . facets ) {
- var facets = _ . map ( queryResult . facets , function ( facetResult , facetId ) {
- facetResult . id = facetId ;
- return new my . Facet ( facetResult );
- });
- self . facets . reset ( facets );
- }
- self . trigger ( 'query:done' );
- dfd . resolve ( self . currentDocuments );
- })
- . fail ( function ( arguments ) {
- self . trigger ( 'query:fail' , arguments );
- dfd . reject ( arguments );
- });
return dfd . promise ();
},
- _prepareQuery : function ( newQueryObj ) {
- if ( newQueryObj ) {
- this . queryState . set ( newQueryObj );
+ _handleQueryResult : function ( queryResult ) {
+ var self = this ;
+ self . docCount = queryResult . total ;
+ var docs = _ . map ( queryResult . hits , function ( hit ) {
+ var _doc = new my . Record ( hit );
+ _doc . bind ( 'change' , function ( doc ) {
+ self . _changes . updates . push ( doc . toJSON ());
+ });
+ _doc . bind ( 'destroy' , function ( doc ) {
+ self . _changes . deletes . push ( doc . toJSON ());
+ });
+ return _doc ;
+ });
+ self . currentRecords . reset ( docs );
+ if ( queryResult . facets ) {
+ var facets = _ . map ( queryResult . facets , function ( facetResult , facetId ) {
+ facetResult . id = facetId ;
+ return new my . Facet ( facetResult );
+ });
+ self . facets . reset ( facets );
}
- var out = this . queryState . toJSON ();
- return out ;
},
toTemplateJSON : function () {
@@ -99,10 +172,30 @@ also returned.
data . docCount = this . docCount ;
data . fields = this . fields . toJSON ();
return data ;
- }, _backendFromString(backendString)
+ }, Get a summary for each field in the form of a Facet.
+
+@return null as this is async function. Provides deferred/promise interface.
getFieldsSummary : function () {
+ var self = this ;
+ var query = new my . Query ();
+ query . set ({ size : 0 });
+ this . fields . each ( function ( field ) {
+ query . addFacet ( field . id );
+ });
+ var dfd = $ . Deferred ();
+ this . _store . query ( query . toJSON (), this . toJSON ()). done ( function ( queryResult ) {
+ if ( queryResult . facets ) {
+ _ . each ( queryResult . facets , function ( facetResult , facetId ) {
+ facetResult . id = facetId ;
+ var facet = new my . Facet ( facetResult ); TODO: probably want replace rather than reset (i.e. just replace the facet with this id)
self . fields . get ( facetId ). facets . reset ( facet );
+ });
+ }
+ dfd . resolve ( queryResult );
+ });
+ return dfd . promise ();
+ }, _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 ;
+ 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 ;
@@ -110,18 +203,18 @@ also returned.
current = current [ parts [ ii ]];
}
if ( current ) {
- return new current ();
- } alternatively we just had a simple string
var backend = null ;
+ return 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 ]. Backbone ();
+ backend = recline . Backend [ name ];
}
});
}
return backend ;
}
-}); Dataset.restore
+}); Dataset.restore
Restore a Dataset instance from a serialized state. Serialized state for a
Dataset is an Object like:
@@ -134,94 +227,71 @@ Dataset is an Object like:
url: {dataset url}
...
} my . Dataset . restore = function ( state ) {
- var dataset = null ; hack-y - restoring a memory dataset does not mean much ...
if ( state . backend === 'memory' ) {
- dataset = recline . Backend . Memory . createDataset (
- [{ stub : 'this is a stub dataset because we do not restore memory datasets' }],
- [],
- state . dataset // metadata
- );
+ var dataset = null ; hack-y - restoring a memory dataset does not mean much ...
if ( state . backend === 'memory' ) {
+ var datasetInfo = {
+ records : [{ stub : 'this is a stub dataset because we do not restore memory datasets' }]
+ };
} else {
var datasetInfo = {
- url : state . url
+ url : state . url ,
+ backend : state . backend
};
- dataset = new recline . Model . Dataset (
- datasetInfo ,
- state . backend
- );
}
+ dataset = new recline . Model . Dataset ( datasetInfo );
return dataset ;
-};
+};
-A single entry or row in the dataset
my . Document = Backbone . Model . extend ({
- __type__ : 'Document' ,
+A single entry or row in the dataset
my . Record = Backbone . Model . extend ({
+ __type__ : 'Record' ,
initialize : function () {
_ . bindAll ( this , 'getFieldValue' );
- }, getFieldValue
+ }, getFieldValue
For the provided Field get the corresponding rendered computed data value
-for this document.
getFieldValue : function ( field ) {
+for this record. getFieldValue : function ( field ) {
+ val = this . getFieldValueUnrendered ( field );
+ if ( field . renderer ) {
+ val = field . renderer ( val , field , this . toJSON ());
+ }
+ return val ;
+ }, getFieldValueUnrendered
+
+For the provided Field get the corresponding computed data value
+for this record.
getFieldValueUnrendered : function ( field ) {
var val = this . get ( field . id );
if ( field . deriver ) {
val = field . deriver ( val , field , this );
}
- if ( field . renderer ) {
- val = field . renderer ( val , field , this );
- }
return val ;
- }
-}); A Backbone collection of Documents my . DocumentList = Backbone . Collection . extend ({
- __type__ : 'DocumentList' ,
- model : my . Document
-});
+ },
-Following (Backbone) attributes as standard:
-
-
-id: a unique identifer for this field- usually this should match the key in the documents hash
-label: (optional: defaults to id) the visible label used for this field
-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 http://www.elasticsearch.org/guide/reference/mapping/
-format: (optional) used to indicate how the data should be formatted. For example:
-type=date, format=yyyy-mm-dd
-type=float, format=percentage
-type=string, format=markdown (render as markdown if Showdown available)
-is_derived: (default: false) attribute indicating this field has no backend data but is just derived from other fields (see below).
-
-
-Following additional instance properties:
-
-@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).
-
-@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.
-
-Default renderers
-
-
-string
-no format provided: pass through but convert http:// to hyperlinks
-format = plain: do no processing on the source text
-format = markdown: process as markdown (if Showdown library available)
-float
-format = percentage: format as a percentage
- my . Field = Backbone . Model . extend ({ defaults - define default values defaults : {
+ summary : function ( fields ) {
+ var html = '' ;
+ for ( key in this . attributes ) {
+ if ( key != 'id' ) {
+ html += '<div><strong>' + key + '</strong>: ' + this . attributes [ key ] + '</div>' ;
+ }
+ }
+ return html ;
+ }, Override Backbone save, fetch and destroy so they do nothing
+Instead, Dataset object that created this Record should take care of
+handling these changes (discovery will occur via event notifications)
+WARNING: these will not persist unless you call save on Dataset
fetch : function () {},
+ save : function () {},
+ destroy : function () { this . trigger ( 'destroy' , this ); }
+}); A Backbone collection of Records my . RecordList = Backbone . Collection . extend ({
+ __type__ : 'RecordList' ,
+ model : my . Record
+}); my . Field = Backbone . Model . extend ({ defaults - define default values defaults : {
label : null ,
type : 'string' ,
format : null ,
is_derived : false
- }, initialize
+ }, initialize
@param {Object} data: standard Backbone model attributes
-@param {Object} options: renderer and/or deriver functions.
initialize : function ( data , options ) { if a hash not passed in the first argument throw error
if ( '0' in data ) {
+@param {Object} options: renderer and/or deriver functions.
initialize : function ( data , options ) { if a hash not passed in the first argument throw error
if ( '0' in data ) {
throw new Error ( 'Looks like you did not pass a proper hash with id to Field constructor' );
}
if ( this . attributes . label === null ) {
@@ -234,6 +304,7 @@ value of this field prior to rendering.
if ( ! this . renderer ) {
this . renderer = this . defaultRenderers [ this . get ( 'type' )];
}
+ this . facets = new my . FacetList ();
},
defaultRenderers : {
object : function ( val , field , doc ) {
@@ -258,7 +329,7 @@ value of this field prior to rendering.
}
} else if ( format == 'plain' ) {
return val ;
- } else { as this is the default and default type is string may get things
+ } else {
as this is the default and default type is string may get things
here that are not actually strings
if ( val && typeof val === 'string' ) {
val = val . replace ( /(https?:\/\/[^ ]+)/g , '<a href="$1">$1</a>' );
}
@@ -270,91 +341,55 @@ here that are not actually strings my. FieldList = Backbone . Collection . extend ({
model : my . Field
-});
-
-Query instances encapsulate a query to the backend (see query method on backend ). Useful both
-for creating queries and for storing and manipulating query state -
-e.g. from a query editor).
-
-Query Structure and format
-
-Query structure should follow that of ElasticSearch query
-language .
-
-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.
-
-Query object has the following key attributes:
-
-
-
-Additions:
-
-
-
-Examples
-
-
-{
- q: 'quick brown fox',
- filters: [
- { term: { 'owner': 'jones' } }
- ]
-}
- my . Query = Backbone . Model . extend ({
+}); my . Query = Backbone . Model . extend ({
defaults : function () {
return {
size : 100 ,
from : 0 ,
- facets : {}, http://www.elasticsearch.org/guide/reference/query-dsl/and-filter.html
-, filter: {}
filters : []
+ q : '' ,
+ facets : {},
+ filters : []
};
- }, addTermFilter
-
-Set (update or add) a terms filter to filters
-
-See http://www.elasticsearch.org/guide/reference/query-dsl/terms-filter.html
addTermFilter : function ( fieldId , value ) {
- var filters = this . get ( 'filters' );
- var filter = { term : {} };
- filter . term [ fieldId ] = value ;
- filters . push ( filter );
- this . set ({ filters : filters }); change does not seem to be triggered automatically
if ( value ) {
- this . trigger ( 'change' );
- } else { adding a new blank filter and do not want to trigger a new query
this . trigger ( 'change:filters:new-blank' );
+ },
+ _filterTemplates : {
+ term : {
+ type : 'term' ,
+ field : '' ,
+ term : ''
+ },
+ geo_distance : {
+ distance : 10 ,
+ unit : 'km' ,
+ point : {
+ lon : 0 ,
+ lat : 0
+ }
}
- }, removeFilter
+ }, addFilter
+
+Add a new filter (appended to the list of filters)
+
+@param filter an object specifying the filter - see _filterTemplates for examples. If only type is provided will generate a filter by cloning _filterTemplates
addFilter : function ( filter ) { crude deep copy
var ourfilter = JSON . parse ( JSON . stringify ( filter )); not full specified so use template and over-write
if ( _ . keys ( filter ). length <= 2 ) {
+ ourfilter = _ . extend ( this . _filterTemplates [ filter . type ], ourfilter );
+ }
+ var filters = this . get ( 'filters' );
+ filters . push ( ourfilter );
+ this . trigger ( 'change:filters:new-blank' );
+ },
+ updateFilter : function ( index , value ) {
+ }, removeFilter
Remove a filter from filters at index filterIndex
removeFilter : function ( filterIndex ) {
var filters = this . get ( 'filters' );
filters . splice ( filterIndex , 1 );
this . set ({ filters : filters });
this . trigger ( 'change' );
- }, addFacet
+ }, addFacet
Add a Facet to this query
See http://www.elasticsearch.org/guide/reference/api/search/facets/
addFacet : function ( fieldId ) {
- var facets = this . get ( 'facets' ); 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)
if ( _ . contains ( _ . keys ( facets ), fieldId )) {
+ var facets = this . get ( 'facets' ); 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)
if ( _ . contains ( _ . keys ( facets ), fieldId )) {
return ;
}
facets [ fieldId ] = {
@@ -374,44 +409,7 @@ execution.
this . set ({ facets : facets }, { silent : true });
this . trigger ( 'facet:add' , this );
}
-});
-
-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.
-
-Structure of a facet follows that of Facet results in ElasticSearch, see:
-http://www.elasticsearch.org/guide/reference/api/search/facets/
-
-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):
-
-
-{
- "id": "id-of-facet",
- // type of this facet (terms, range, histogram etc)
- "_type" : "terms",
- // total number of tokens in the facet
- "total": 5,
- // @property {number} number of documents which have no value for the field
- "missing" : 0,
- // number of facet values not included in the returned facets
- "other": 0,
- // term object ({term: , count: ...})
- "terms" : [ {
- "term" : "foo",
- "count" : 2
- }, {
- "term" : "bar",
- "count" : 2
- }, {
- "term" : "baz",
- "count" : 1
- }
- ]
-}
- my . Facet = Backbone . Model . extend ({
+}); my . Facet = Backbone . Model . extend ({
defaults : function () {
return {
_type : 'terms' ,
@@ -421,12 +419,12 @@ key used to specify this facet in the facet query):
terms : []
};
}
-}); A Collection/List of Facets my . FacetList = Backbone . Collection . extend ({
+}); A Collection/List of Facets my . FacetList = Backbone . Collection . extend ({
model : my . Facet
-}); Object State
+}); Object State
Convenience Backbone model for storing (configuration) state of objects like Views.
my . ObjectState = Backbone . Model . extend ({
-}); Backbone.sync
+}); Backbone.sync
Override Backbone.sync to hand off to sync function in relevant backend
Backbone . sync = function ( method , model , options ) {
return model . backend . sync ( method , model , options );
diff --git a/docs/src/view.graph.html b/docs/src/view.graph.html
index 2f457a7f..29d11900 100644
--- a/docs/src/view.graph.html
+++ b/docs/src/view.graph.html
@@ -1,4 +1,4 @@
- view-graph.js
view-graph.js /*jshint multistr:true */
+ view.graph.js
view.graph.js /*jshint multistr:true */
this . recline = this . recline || {};
this . recline . View = this . recline . View || {};
@@ -20,44 +20,10 @@
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 . Graph = Backbone . View . extend ({
-
tagName : "div" ,
className : "recline-graph" ,
template : ' \
- <div class="editor"> \
- <form class="form-stacked"> \
- <div class="clearfix"> \
- <label>Graph Type</label> \
- <div class="input editor-type"> \
- <select> \
- <option value="lines-and-points">Lines and Points</option> \
- <option value="lines">Lines</option> \
- <option value="points">Points</option> \
- <option value="bars">Bars</option> \
- </select> \
- </div> \
- <label>Group Column (x-axis)</label> \
- <div class="input editor-group"> \
- <select> \
- <option value="">Please choose ...</option> \
- {{#fields}} \
- <option value="{{id}}">{{label}}</option> \
- {{/fields}} \
- </select> \
- </div> \
- <div class="editor-series-group"> \
- </div> \
- </div> \
- <div class="editor-buttons"> \
- <button class="btn editor-add">Add Series</button> \
- </div> \
- <div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \
- <button class="editor-save">Save</button> \
- <input type="hidden" class="editor-id" value="chart-1" /> \
- </div> \
- </form> \
- </div> \
<div class="panel graph"> \
<div class="js-temp-notice alert alert-block"> \
<h3 class="alert-heading">Hey there!</h3> \
@@ -67,26 +33,6 @@ generate the element itself (you can then append view.el to the DOM.
</div> \
</div> \
' ,
- templateSeriesEditor : ' \
- <div class="editor-series js-series-{{seriesIndex}}"> \
- <label>Series <span>{{seriesName}} (y-axis)</span> \
- [<a href="#remove" class="action-remove-series">Remove</a>] \
- </label> \
- <div class="input"> \
- <select> \
- {{#fields}} \
- <option value="{{id}}">{{label}}</option> \
- {{/fields}} \
- </select> \
- </div> \
- </div> \
- ' ,
-
- events : {
- 'change form select' : 'onEditorSubmit' ,
- 'click .editor-add' : '_onAddSeries' ,
- 'click .action-remove-series' : 'removeSeries'
- },
initialize : function ( options ) {
var self = this ;
@@ -96,8 +42,8 @@ generate the element itself (you can then append view.el to the DOM.
this . model . bind ( 'change' , this . render );
this . model . fields . bind ( 'reset' , this . render );
this . model . fields . bind ( 'add' , this . render );
- this . model . currentDocuments . bind ( 'add' , this . redraw );
- this . model . currentDocuments . bind ( 'reset' , this . redraw ); because we cannot redraw when hidden we may need when becoming visible
this . bind ( 'view:show' , function () {
+ this . model . currentRecords . bind ( 'add' , this . redraw );
+ this . model . currentRecords . bind ( 'reset' , this . redraw ); because we cannot redraw when hidden we may need when becoming visible
this . bind ( 'view:show' , function () {
if ( this . needToRedraw ) {
self . redraw ();
}
@@ -109,6 +55,15 @@ generate the element itself (you can then append view.el to the DOM.
options . state
);
this . state = new recline . Model . ObjectState ( stateData );
+ this . editor = new my . GraphControls ({
+ model : this . model ,
+ state : this . state . toJSON ()
+ });
+ this . editor . state . bind ( 'change' , function () {
+ self . state . set ( self . editor . state . toJSON ());
+ self . redraw ();
+ });
+ this . elSidebar = this . editor . el ;
this . render ();
},
@@ -117,77 +72,39 @@ generate the element itself (you can then append view.el to the DOM.
var tmplData = this . model . toTemplateJSON ();
var htmls = Mustache . render ( this . template , tmplData );
$ ( this . el ). html ( htmls );
- this . $graph = this . el . find ( '.panel.graph' ); set up editor from state
if ( this . state . get ( 'graphType' )) {
- this . _selectOption ( '.editor-type' , this . state . get ( 'graphType' ));
- }
- if ( this . state . get ( 'group' )) {
- this . _selectOption ( '.editor-group' , this . state . get ( 'group' ));
- } ensure at least one series box shows up
var tmpSeries = [ "" ];
- if ( this . state . get ( 'series' ). length > 0 ) {
- tmpSeries = this . state . get ( 'series' );
- }
- _ . each ( tmpSeries , function ( series , idx ) {
- self . addSeries ( idx );
- self . _selectOption ( '.editor-series.js-series-' + idx , series );
- });
+ this . $graph = this . el . find ( '.panel.graph' );
return this ;
- }, Private: Helper function to select an option from a select list
_selectOption : function ( id , value ){
- var options = this . el . find ( id + ' select > option' );
- if ( options ) {
- options . each ( function ( opt ){
- if ( this . value == value ) {
- $ ( this ). attr ( 'selected' , 'selected' );
- return false ;
- }
- });
- }
},
- onEditorSubmit : function ( e ) {
- var select = this . el . find ( '.editor-group select' );
- var $editor = this ;
- var $series = this . el . find ( '.editor-series select' );
- var series = $series . map ( function () {
- return $ ( this ). val ();
- });
- var updatedState = {
- series : $ . makeArray ( series ),
- group : this . el . find ( '.editor-group select' ). val (),
- graphType : this . el . find ( '.editor-type select' ). val ()
- };
- this . state . set ( updatedState );
- this . redraw ();
- },
-
- redraw : function () { There appear to be issues generating a Flot graph if either:
There appear to be issues generating a Flot graph if either:
The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with
Uncaught Invalid dimensions for plot, width = 0, height = 0
There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value'
var areWeVisible = ! jQuery . expr . filters . hidden ( this . el [ 0 ]);
- if (( ! areWeVisible || this . model . currentDocuments . length === 0 )) {
+ if (( ! areWeVisible || this . model . currentRecords . length === 0 )) {
this . needToRedraw = true ;
return ;
- } check we have something to plot
if ( this . state . get ( 'group' ) && this . state . get ( 'series' )) {
+ } check we have something to plot
if ( this . state . get ( 'group' ) && this . state . get ( 'series' )) { faff around with width because flot draws axes outside of the element width which means graph can get push down as it hits element next to it
this . $graph . width ( this . el . width () - 20 );
var series = this . createSeries ();
var options = this . getGraphOptions ( this . state . attributes . graphType );
this . plot = $ . plot ( this . $graph , series , options );
this . setupTooltips ();
}
- }, getGraphOptions
+ }, getGraphOptions
Get options for Flot Graph
needs to be function as can depend on state
@param typeId graphType id (lines, lines-and-points etc)
getGraphOptions : function ( typeId ) {
- var self = this ; special tickformatter to show labels rather than numbers
+ var self = this ;
special tickformatter to show labels rather than numbers
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.
var tickFormatter = function ( val ) {
- if ( self . model . currentDocuments . models [ val ]) {
- 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' ) {
+ if ( self . model . currentRecords . models [ val ]) {
+ var out = self . model . currentRecords . 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 ;
} else {
return out ;
@@ -196,7 +113,7 @@ have no field type info). Thus at present we only do this for bars.
return val ;
};
- var xaxis = {}; check for time series on x-axis
if ( this . model . fields . get ( this . state . get ( 'group' )). get ( 'type' ) === 'date' ) {
+ var xaxis = {}; check for time series on x-axis
if ( this . model . fields . get ( this . state . get ( 'group' )). get ( 'type' ) === 'date' ) {
xaxis . mode = 'time' ;
xaxis . timeformat = '%y-%b' ;
}
@@ -239,7 +156,7 @@ have no field type info). Thus at present we only do this for bars.
tickLength : 1 ,
tickFormatter : tickFormatter ,
min : - 0.5 ,
- max : self . model . currentDocuments . length - 0.5
+ max : self . model . currentRecords . length - 0.5
}
}
};
@@ -269,16 +186,16 @@ have no field type info). Thus at present we only do this for bars.
$ ( "#flot-tooltip" ). remove ();
var x = item . datapoint [ 0 ];
- var y = item . datapoint [ 1 ]; it's horizontal so we have to flip
if ( self . state . attributes . graphType === 'bars' ) {
+ var y = item . datapoint [ 1 ]; it's horizontal so we have to flip
if ( self . state . attributes . graphType === 'bars' ) {
var _tmp = x ;
x = y ;
y = _tmp ;
- } 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 . state . attributes . group );
+ } convert back from 'index' value on x-axis (e.g. in cases where non-number values)
if ( self . model . currentRecords . models [ x ]) {
+ x = self . model . currentRecords . models [ x ]. get ( self . state . attributes . group );
} else {
x = x . toFixed ( 2 );
}
- y = y . toFixed ( 2 ); is it time series
var xfield = self . model . fields . get ( self . state . attributes . group );
+ y = y . toFixed ( 2 ); is it time series
var xfield = self . model . fields . get ( self . state . attributes . group );
var isDateTime = xfield . get ( 'type' ) === 'date' ;
if ( isDateTime ) {
x = new Date ( parseInt ( x )). toLocaleDateString ();
@@ -305,17 +222,20 @@ have no field type info). Thus at present we only do this for bars.
var series = [];
_ . each ( this . state . attributes . series , function ( field ) {
var points = [];
- _ . each ( self . model . currentDocuments . models , function ( doc , index ) {
+ _ . each ( self . model . currentRecords . models , function ( doc , index ) {
var xfield = self . model . fields . get ( self . state . attributes . group );
- var x = doc . getFieldValue ( xfield ); time series
var isDateTime = xfield . get ( 'type' ) === 'date' ;
+ var x = doc . getFieldValue ( xfield ); time series
var isDateTime = xfield . get ( 'type' ) === 'date' ;
if ( isDateTime ) {
- x = new Date ( x );
+ x = moment ( x ). toDate ();
}
var yfield = self . model . fields . get ( field );
var y = doc . getFieldValue ( yfield );
if ( typeof x === 'string' ) {
- x = index ;
- } horizontal bar chart
if ( self . state . attributes . graphType == 'bars' ) {
+ x = parseFloat ( x );
+ if ( isNaN ( x )) {
+ x = index ;
+ }
+ } horizontal bar chart
if ( self . state . attributes . graphType == 'bars' ) {
points . push ([ y , x ]);
} else {
points . push ([ x , y ]);
@@ -324,7 +244,120 @@ have no field type info). Thus at present we only do this for bars.
series . push ({ data : points , label : field });
});
return series ;
- }, Public: Adds a new empty series select box to the editor.
+ }
+});
+
+my . GraphControls = Backbone . View . extend ({
+ className : "editor" ,
+ template : ' \
+ <div class="editor"> \
+ <form class="form-stacked"> \
+ <div class="clearfix"> \
+ <label>Graph Type</label> \
+ <div class="input editor-type"> \
+ <select> \
+ <option value="lines-and-points">Lines and Points</option> \
+ <option value="lines">Lines</option> \
+ <option value="points">Points</option> \
+ <option value="bars">Bars</option> \
+ </select> \
+ </div> \
+ <label>Group Column (x-axis)</label> \
+ <div class="input editor-group"> \
+ <select> \
+ <option value="">Please choose ...</option> \
+ {{#fields}} \
+ <option value="{{id}}">{{label}}</option> \
+ {{/fields}} \
+ </select> \
+ </div> \
+ <div class="editor-series-group"> \
+ </div> \
+ </div> \
+ <div class="editor-buttons"> \
+ <button class="btn editor-add">Add Series</button> \
+ </div> \
+ <div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \
+ <button class="editor-save">Save</button> \
+ <input type="hidden" class="editor-id" value="chart-1" /> \
+ </div> \
+ </form> \
+ </div> \
+' ,
+ templateSeriesEditor : ' \
+ <div class="editor-series js-series-{{seriesIndex}}"> \
+ <label>Series <span>{{seriesName}} (y-axis)</span> \
+ [<a href="#remove" class="action-remove-series">Remove</a>] \
+ </label> \
+ <div class="input"> \
+ <select> \
+ {{#fields}} \
+ <option value="{{id}}">{{label}}</option> \
+ {{/fields}} \
+ </select> \
+ </div> \
+ </div> \
+ ' ,
+ events : {
+ 'change form select' : 'onEditorSubmit' ,
+ 'click .editor-add' : '_onAddSeries' ,
+ 'click .action-remove-series' : 'removeSeries'
+ },
+
+ initialize : function ( options ) {
+ var self = this ;
+ this . el = $ ( this . el );
+ _ . bindAll ( this , 'render' );
+ this . model . fields . bind ( 'reset' , this . render );
+ this . model . fields . bind ( 'add' , this . render );
+ this . state = new recline . Model . ObjectState ( options . state );
+ this . render ();
+ },
+
+ render : function () {
+ var self = this ;
+ var tmplData = this . model . toTemplateJSON ();
+ var htmls = Mustache . render ( this . template , tmplData );
+ this . el . html ( htmls ); set up editor from state
if ( this . state . get ( 'graphType' )) {
+ this . _selectOption ( '.editor-type' , this . state . get ( 'graphType' ));
+ }
+ if ( this . state . get ( 'group' )) {
+ this . _selectOption ( '.editor-group' , this . state . get ( 'group' ));
+ } ensure at least one series box shows up
var tmpSeries = [ "" ];
+ if ( this . state . get ( 'series' ). length > 0 ) {
+ tmpSeries = this . state . get ( 'series' );
+ }
+ _ . each ( tmpSeries , function ( series , idx ) {
+ self . addSeries ( idx );
+ self . _selectOption ( '.editor-series.js-series-' + idx , series );
+ });
+ return this ;
+ }, Private: Helper function to select an option from a select list
_selectOption : function ( id , value ){
+ var options = this . el . find ( id + ' select > option' );
+ if ( options ) {
+ options . each ( function ( opt ){
+ if ( this . value == value ) {
+ $ ( this ). attr ( 'selected' , 'selected' );
+ return false ;
+ }
+ });
+ }
+ },
+
+ onEditorSubmit : function ( e ) {
+ var select = this . el . find ( '.editor-group select' );
+ var $editor = this ;
+ var $series = this . el . find ( '.editor-series select' );
+ var series = $series . map ( function () {
+ return $ ( this ). val ();
+ });
+ var updatedState = {
+ series : $ . makeArray ( series ),
+ group : this . el . find ( '.editor-group select' ). val (),
+ graphType : this . el . find ( '.editor-type select' ). val ()
+ };
+ this . state . set ( updatedState );
+ }, Public: Adds a new empty series select box to the editor.
@param [int] idx index of this series in the list of series
@@ -342,7 +375,7 @@ have no field type info). Thus at present we only do this for bars.
_onAddSeries : function ( e ) {
e . preventDefault ();
this . addSeries ( this . state . get ( 'series' ). length );
- }, Public: Removes a series list item from the editor.
+ }, Public: Removes a series list item from the editor.
Also updates the labels of the remaining series elements.
removeSeries : function ( e ) {
e . preventDefault ();
diff --git a/docs/src/view.grid.html b/docs/src/view.grid.html
index af6d95e9..1720f5ae 100644
--- a/docs/src/view.grid.html
+++ b/docs/src/view.grid.html
@@ -1,4 +1,4 @@
- view-grid.js
view-grid.js /*jshint multistr:true */
+ view.grid.js
view.grid.js /*jshint multistr:true */
this . recline = this . recline || {};
this . recline . View = this . recline . View || {};
@@ -15,9 +15,9 @@
var self = this ;
this . el = $ ( this . el );
_ . bindAll ( this , 'render' , 'onHorizontalScroll' );
- this . model . currentDocuments . bind ( 'add' , this . render );
- this . model . currentDocuments . bind ( 'reset' , this . render );
- this . model . currentDocuments . bind ( 'remove' , this . render );
+ this . model . currentRecords . bind ( 'add' , this . render );
+ this . model . currentRecords . bind ( 'reset' , this . render );
+ this . model . currentRecords . bind ( 'remove' , this . render );
this . tempState = {};
var state = _ . extend ({
hiddenFields : []
@@ -69,11 +69,11 @@ Column and row menus
showColumn : function () { self . showColumn ( e ); },
deleteRow : function () {
var self = this ;
- var doc = _ . find ( self . model . currentDocuments . models , function ( doc ) { important this is == as the currentRow will be string (as comes
+ var doc = _ . find ( self . model . currentRecords . 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 . tempState . currentRow ;
});
doc . destroy (). then ( function () {
- self . model . currentDocuments . remove ( doc );
+ self . model . currentRecords . remove ( doc );
self . trigger ( 'recline:flash' , { message : "Row deleted successfully" });
}). fail ( function ( err ) {
self . trigger ( 'recline:flash' , { message : "Errorz! " + err });
@@ -187,7 +187,7 @@ from DOM) while id may be int });
var htmls = Mustache . render ( this . template , this . toTemplateJSON ());
this . el . html ( htmls );
- this . model . currentDocuments . forEach ( function ( doc ) {
+ this . model . currentRecords . forEach ( function ( doc ) {
var tr = $ ( '<tr />' );
self . el . find ( 'tbody' ). append ( tr );
var newView = new my . GridRow ({
@@ -213,7 +213,7 @@ from DOM) while id may be int $c. remove ();
return dim ;
}
-}); GridRow View for rendering an individual document.
+}); GridRow View for rendering an individual record.
Since we want this to update in place it is up to creator to provider the element to attach to.
@@ -223,7 +223,7 @@ from DOM) while id may be int
var row = new GridRow({
- model: dataset-document,
+ model: dataset-record,
el: dom-element,
fields: mydatasets.fields // a FieldList object
});
diff --git a/docs/src/view.map.html b/docs/src/view.map.html
index bca8e38b..7c5cf607 100644
--- a/docs/src/view.map.html
+++ b/docs/src/view.map.html
@@ -1,11 +1,11 @@
- view-map.js
view-map.js /*jshint multistr:true */
+ view.map.js
view.map.js /*jshint multistr:true */
this . recline = this . recline || {};
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
+
This view allows to plot gereferenced records on a map. The location
information can be provided either via a field with
GeoJSON objects or two fields with latitude and
longitude coordinates.
@@ -21,12 +21,300 @@ have the following (optional) configuration options:
latField: {id of field containing latitude in the dataset}
}
my . Map = Backbone . View . extend ({
-
tagName : 'div' ,
className : 'recline-map' ,
template : ' \
- <div class="editor"> \
+ <div class="panel map"></div> \
+' , These are the default (case-insensitive) names of field that are used if found.
+If not found, the user will need to define the fields via the editor.
latitudeFieldNames : [ 'lat' , 'latitude' ],
+ longitudeFieldNames : [ 'lon' , 'longitude' ],
+ geometryFieldNames : [ 'geojson' , 'geom' , 'the_geom' , 'geometry' , 'spatial' , 'location' ],
+
+ initialize : function ( options ) {
+ var self = this ;
+ this . el = $ ( this . el ); Listen to changes in the fields
this . model . fields . bind ( 'change' , function () {
+ self . _setupGeometryField ()
+ self . render ()
+ }); Listen to changes in the records
this . model . currentRecords . bind ( 'add' , function ( doc ){ self . redraw ( 'add' , doc )});
+ this . model . currentRecords . bind ( 'change' , function ( doc ){
+ self . redraw ( 'remove' , doc );
+ self . redraw ( 'add' , doc );
+ });
+ this . model . currentRecords . bind ( 'remove' , function ( doc ){ self . redraw ( 'remove' , doc )});
+ this . model . currentRecords . bind ( 'reset' , function (){ self . redraw ( 'reset' )});
+
+ this . bind ( 'view:show' , function (){ If the div was hidden, Leaflet needs to recalculate some sizes
+to display properly
if ( self . map ){
+ self . map . invalidateSize ();
+ if ( self . _zoomPending && self . state . get ( 'autoZoom' )) {
+ self . _zoomToFeatures ();
+ self . _zoomPending = false ;
+ }
+ }
+ self . visible = true ;
+ });
+ this . bind ( 'view:hide' , function (){
+ self . visible = false ;
+ });
+
+ var stateData = _ . extend ({
+ geomField : null ,
+ lonField : null ,
+ latField : null ,
+ autoZoom : true
+ },
+ options . state
+ );
+ this . state = new recline . Model . ObjectState ( stateData );
+ this . menu = new my . MapMenu ({
+ model : this . model ,
+ state : this . state . toJSON ()
+ });
+ this . menu . state . bind ( 'change' , function () {
+ self . state . set ( self . menu . state . toJSON ());
+ self . redraw ();
+ });
+ this . elSidebar = this . menu . el ;
+
+ this . mapReady = false ;
+ this . render ();
+ this . redraw ();
+ }, 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 . render ( this . template , this . model . toTemplateJSON ());
+ $ ( this . el ). html ( htmls );
+ this . $map = this . el . find ( '.panel.map' );
+ return this ;
+ }, 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 (records)
+remove: Remove one or n features (records)
+refresh: Clear existing features and add all current records
+ redraw : function ( action , doc ){
+ var self = this ;
+ action = action || 'refresh' ; try to set things up if not already
if ( ! self . _geomReady ()){
+ self . _setupGeometryField ();
+ }
+ if ( ! self . mapReady ){
+ self . _setupMap ();
+ }
+
+ if ( this . _geomReady () && this . mapReady ){
+ if ( action == 'reset' || action == 'refresh' ){
+ this . features . clearLayers ();
+ this . _add ( this . model . currentRecords . models );
+ } else if ( action == 'add' && doc ){
+ this . _add ( doc );
+ } else if ( action == 'remove' && doc ){
+ this . _remove ( doc );
+ }
+ if ( this . state . get ( 'autoZoom' )){
+ if ( this . visible ){
+ this . _zoomToFeatures ();
+ } else {
+ this . _zoomPending = true ;
+ }
+ }
+ }
+ },
+
+ _geomReady : function () {
+ return Boolean ( this . state . get ( 'geomField' ) || ( this . state . get ( 'latField' ) && this . state . get ( 'lonField' )));
+ }, Private: Add one or n features to the map
+
+For each record passed, a GeoJSON geometry will be extracted and added
+to the features layer. If an exception is thrown, the process will be
+stopped and an error notification shown.
+
+Each feature will have a popup associated with all the record fields.
_add : function ( docs ){
+ var self = this ;
+
+ if ( ! ( docs instanceof Array )) docs = [ docs ];
+
+ var count = 0 ;
+ var wrongSoFar = 0 ;
+ _ . every ( docs , function ( doc ){
+ count += 1 ;
+ var feature = self . _getGeometryFromRecord ( doc );
+ if ( typeof feature === 'undefined' || feature === null ){ Empty field
return true ;
+ } else if ( feature instanceof Object ){ Build popup contents
+TODO: mustache?
html = ''
+ for ( key in doc . attributes ){
+ if ( ! ( self . state . get ( 'geomField' ) && key == self . state . get ( 'geomField' ))){
+ 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 ) {
+ wrongSoFar += 1 ;
+ var msg = 'Wrong geometry value' ;
+ if ( except . message ) msg += ' (' + except . message + ')' ;
+ if ( wrongSoFar <= 10 ) {
+ self . trigger ( 'recline:flash' , { message : msg , category : 'error' });
+ }
+ }
+ } else {
+ wrongSoFar += 1
+ if ( wrongSoFar <= 10 ) {
+ self . trigger ( 'recline:flash' , { message : 'Wrong geometry value' , category : 'error' });
+ }
+ }
+ 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 record fields
_getGeometryFromRecord : function ( doc ){
+ if ( this . state . get ( 'geomField' )){
+ var value = doc . get ( this . state . get ( 'geomField' ));
+ if ( typeof ( value ) === 'string' ){ We may have a GeoJSON string representation
try {
+ value = $ . parseJSON ( value );
+ } catch ( e ) {}
+ }
+
+ if ( typeof ( value ) === 'string' ) {
+ value = value . replace ( '(' , '' ). replace ( ')' , '' );
+ var parts = value . split ( ',' );
+ var lat = parseFloat ( parts [ 0 ]);
+ var lon = parseFloat ( parts [ 1 ]);
+ if ( ! isNaN ( lon ) && ! isNaN ( parseFloat ( lat ))) {
+ return {
+ "type" : "Point" ,
+ "coordinates" : [ lon , lat ]
+ };
+ } else {
+ return null ;
+ }
+ } else if ( value && value . slice ) { [ lon, lat ]
return {
+ "type" : "Point" ,
+ "coordinates" : [ value [ 0 ], value [ 1 ]]
+ };
+ } else if ( value && value . lat ) { of form { lat: ..., lon: ...}
return {
+ "type" : "Point" ,
+ "coordinates" : [ value . lon || value . lng , value . lat ]
+ };
+ } We o/w assume that contents of the field are a valid GeoJSON object
return value ;
+ } else if ( this . state . get ( 'lonField' ) && this . state . get ( 'latField' )){ We'll create a GeoJSON like point object from the two lat/lon fields
var lon = doc . get ( this . state . get ( 'lonField' ));
+ var lat = doc . get ( this . state . get ( 'latField' ));
+ if ( ! isNaN ( parseFloat ( lon )) && ! isNaN ( parseFloat ( lat ))) {
+ return {
+ type : 'Point' ,
+ coordinates : [ lon , lat ]
+ };
+ }
+ }
+ return null ;
+ }, 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 (){ should not overwrite if we have already set this (e.g. explicitly via state)
if ( ! this . _geomReady ()) {
+ this . state . set ({
+ geomField : this . _checkField ( this . geometryFieldNames ),
+ latField : this . _checkField ( this . latitudeFieldNames ),
+ lonField : this . _checkField ( this . longitudeFieldNames )
+ });
+ this . menu . state . set ( this . state . toJSON ());
+ }
+ }, 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 ++ ){
+ for ( var j = 0 ; j < modelFieldNames . length ; j ++ ){
+ if ( modelFieldNames [ j ]. toLowerCase () == fieldNames [ i ]. toLowerCase ())
+ return modelFieldNames [ j ];
+ }
+ }
+ return null ;
+ }, Private: Zoom to map to current features extent if any, or to the full
+extent if none.
_zoomToFeatures : function (){
+ var bounds = this . features . getBounds ();
+ if ( bounds ){
+ this . map . fitBounds ( bounds );
+ } else {
+ this . map . setView ( new L . LatLng ( 0 , 0 ), 2 );
+ }
+ }, Private: Sets up the Leaflet map control and the features layer.
+
+The map uses a base layer from MapQuest based
+on OpenStreetMap .
_setupMap : function (){
+ this . map = new L . Map ( this . $map . get ( 0 ));
+
+ 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 );
+
+ 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 will be available in the next Leaflet stable release.
+In the meantime we add it manually to our layer.
this . features . getBounds = function (){
+ var bounds = new L . LatLngBounds ();
+ this . _iterateLayers ( function ( layer ) {
+ if ( layer instanceof L . Marker ){
+ bounds . extend ( layer . getLatLng ());
+ } else {
+ if ( layer . getBounds ){
+ bounds . extend ( layer . getBounds (). getNorthEast ());
+ bounds . extend ( layer . getBounds (). getSouthWest ());
+ }
+ }
+ }, this );
+ return ( typeof bounds . getNorthEast () !== 'undefined' ) ? bounds : null ;
+ }
+
+ 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 ;
+ }
+ });
+ }
+ }
+});
+
+my . MapMenu = Backbone . View . extend ({
+ className : 'editor' ,
+
+ template : ' \
<form class="form-stacked"> \
<div class="clearfix"> \
<div class="editor-field-type"> \
@@ -80,309 +368,82 @@ have the following (optional) configuration options:
<input type="hidden" class="editor-id" value="map-1" /> \
</div> \
</form> \
- </div> \
-<div class="panel map"> \
-</div> \
-' , These are the default (case-insensitive) names of field that are 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' ], Define here events for UI elements
Define here events for UI elements
events : {
'click .editor-update-map' : 'onEditorSubmit' ,
'change .editor-field-type' : 'onFieldTypeChange' ,
- 'change #editor-auto-zoom' : 'onAutoZoomChange'
+ 'click #editor-auto-zoom' : 'onAutoZoomChange'
},
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 ( 'change' , function ( doc ){
- self . redraw ( 'remove' , 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' )});
-
- this . bind ( 'view:show' , function (){ If the div was hidden, Leaflet needs to recalculate some sizes
-to display properly
if ( self . map ){
- self . map . invalidateSize ();
- if ( self . _zoomPending && self . autoZoom ) {
- self . _zoomToFeatures ();
- self . _zoomPending = false ;
- }
- }
- self . visible = true ;
- });
- this . bind ( 'view:hide' , function (){
- self . visible = false ;
- });
-
- var stateData = _ . extend ({
- geomField : null ,
- lonField : null ,
- latField : null
- },
- options . state
- );
- this . state = new recline . Model . ObjectState ( stateData );
-
- this . autoZoom = true ;
- this . mapReady = false ;
+ this . el = $ ( this . el );
+ _ . bindAll ( this , 'render' );
+ this . model . fields . bind ( 'change' , this . render );
+ this . state = new recline . Model . ObjectState ( options . state );
+ this . state . bind ( 'change' , this . render );
this . render ();
- }, Public: Adds the necessary elements to the page.
+ }, 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 . render ( 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 . _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 ();
+ this . el . find ( '#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 . el . find ( '#editor-field-type-latlon' ). attr ( 'checked' , 'checked' ). change ();
}
}
+ if ( this . state . get ( 'autoZoom' )) {
+ this . el . find ( '#editor-auto-zoom' ). attr ( 'checked' , 'checked' );
+ }
+ else {
+ this . el . find ( '#editor-auto-zoom' ). removeAttr ( 'checked' );
+ }
return this ;
- }, 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' ; try to set things up if not already
if ( ! self . geomReady ){
- self . _setupGeometryField ();
- }
- if ( ! self . mapReady ){
- self . _setupMap ();
- }
-
- if ( this . geomReady && this . mapReady ){
- if ( action == 'reset' || action == 'refresh' ){
- this . features . clearLayers ();
- this . _add ( this . model . currentDocuments . models );
- } else if ( action == 'add' && doc ){
- this . _add ( doc );
- } else if ( action == 'remove' && doc ){
- this . _remove ( doc );
- }
- if ( this . autoZoom ){
- if ( this . visible ){
- this . _zoomToFeatures ();
- } else {
- this . _zoomPending = true ;
- }
- }
- }
- }, UI Event handlers
Public: Update map with user options
+ _geomReady : function () {
+ return Boolean ( this . state . get ( 'geomField' ) || ( this . state . get ( 'latField' ) && this . state . get ( 'lonField' )));
+ }, 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' )){
+ if ( this . el . find ( '#editor-field-type-geom' ). attr ( 'checked' )){
this . state . set ({
- geomField : $ ( '.editor-geom-field > select > option:selected' ). val (),
+ geomField : this . el . find ( '.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 ()
+ lonField : this . el . find ( '.editor-lon-field > select > option:selected' ). val (),
+ latField : this . el . find ( '.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
+ },
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 ();
+ this . el . find ( '.editor-field-type-geom' ). show ();
+ this . el . find ( '.editor-field-type-latlon' ). hide ();
} else {
- $ ( '.editor-field-type-geom' ). hide ();
- $ ( '.editor-field-type-latlon' ). show ();
+ this . el . find ( '.editor-field-type-geom' ). hide ();
+ this . el . find ( '.editor-field-type-latlon' ). show ();
}
},
onAutoZoomChange : function ( e ){
- this . autoZoom = ! this . autoZoom ;
- }, 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 ];
-
- var count = 0 ;
- var wrongSoFar = 0 ;
- _ . every ( docs , function ( doc ){
- count += 1 ;
- var feature = self . _getGeometryFromDocument ( doc );
- if ( typeof feature === 'undefined' || feature === null ){ Empty field
return true ;
- } else if ( feature instanceof Object ){ Build popup contents
-TODO: mustache?
html = ''
- for ( key in doc . attributes ){
- if ( ! ( self . state . get ( 'geomField' ) && key == self . state . get ( 'geomField' ))){
- 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 ) {
- wrongSoFar += 1 ;
- var msg = 'Wrong geometry value' ;
- if ( except . message ) msg += ' (' + except . message + ')' ;
- if ( wrongSoFar <= 10 ) {
- self . trigger ( 'recline:flash' , { message : msg , category : 'error' });
- }
- }
- } else {
- wrongSoFar += 1
- if ( wrongSoFar <= 10 ) {
- self . trigger ( 'recline:flash' , { message : 'Wrong geometry value' , category : 'error' });
- }
- }
- 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 . state . get ( 'geomField' )){
- var value = doc . get ( this . state . get ( 'geomField' ));
- if ( typeof ( value ) === 'string' ){ We may have a GeoJSON string representation
try {
- return $ . parseJSON ( value );
- } catch ( e ) {
- }
- } else { We assume that the contents of the field are a valid GeoJSON object
return value ;
- }
- } else if ( this . state . get ( 'lonField' ) && this . state . get ( 'latField' )){ We'll create a GeoJSON like point object from the two lat/lon fields
var lon = doc . get ( this . state . get ( 'lonField' ));
- var lat = doc . get ( this . state . get ( 'latField' ));
- if ( ! isNaN ( parseFloat ( lon )) && ! isNaN ( parseFloat ( lat ))) {
- return {
- type : 'Point' ,
- coordinates : [ lon , lat ]
- };
- }
- }
- return null ;
- }
- }, 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 ;
- this . geomReady = ( this . state . get ( 'geomField' ) || ( this . state . get ( 'latField' ) && this . state . get ( 'lonField' ))); should not overwrite if we have already set this (e.g. explicitly via state)
if ( ! this . geomReady ) {
- 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 ++ ){
- for ( var j = 0 ; j < modelFieldNames . length ; j ++ ){
- if ( modelFieldNames [ j ]. toLowerCase () == fieldNames [ i ]. toLowerCase ())
- return modelFieldNames [ j ];
- }
- }
- return null ;
- }, Private: Zoom to map to current features extent if any, or to the full
-extent if none.
_zoomToFeatures : function (){
- var bounds = this . features . getBounds ();
- if ( bounds ){
- this . map . fitBounds ( bounds );
- } else {
- this . map . setView ( new L . LatLng ( 0 , 0 ), 2 );
- }
- }, Private: Sets up the Leaflet map control and the features layer.
-
-The map uses a base layer from MapQuest based
-on OpenStreetMap .
_setupMap : function (){
-
- this . map = new L . Map ( this . $map . get ( 0 ));
-
- 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 );
-
- 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 will be available in the next Leaflet stable release.
-In the meantime we add it manually to our layer.
this . features . getBounds = function (){
- var bounds = new L . LatLngBounds ();
- this . _iterateLayers ( function ( layer ) {
- if ( layer instanceof L . Marker ){
- bounds . extend ( layer . getLatLng ());
- } else {
- if ( layer . getBounds ){
- bounds . extend ( layer . getBounds (). getNorthEast ());
- bounds . extend ( layer . getBounds (). getSouthWest ());
- }
- }
- }, this );
- return ( typeof bounds . getNorthEast () !== 'undefined' ) ? bounds : null ;
- }
-
- 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' );
+ this . state . set ({ autoZoom : ! this . state . get ( 'autoZoom' )});
+ }, Private: Helper function to select an option from a select list
_selectOption : function ( id , value ){
+ var options = this . el . find ( '.' + id + ' > select > option' );
if ( options ){
options . each ( function ( opt ){
if ( this . value == value ) {
@@ -392,8 +453,7 @@ In the meantime we add it manually to our layer.
});
}
}
-
- });
+});
})( jQuery , recline . View );
diff --git a/docs/src/view.multiview.html b/docs/src/view.multiview.html
index 317e2ada..e9fdc237 100644
--- a/docs/src/view.multiview.html
+++ b/docs/src/view.multiview.html
@@ -1,109 +1,12 @@
- view.js
view.js /*jshint multistr:true */ Recline Views
-
-Recline Views are instances of Backbone Views and they act as 'WUI' (web
-user interface) component displaying some model object in the DOM. Like all
-Backbone views they have a pointer to a model (or a collection) and have an
-associated DOM-style element (usually this element will be bound into the
-page at some point).
-
-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:
-
-
-The model passed to the View should always be a recline.Model.Dataset instance
-Views should generate their own root element rather than having it passed
-in.
-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)
-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.
-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:
-
-
- initialize: {
- model: {a recline.Model.Dataset instance}
- // el: {do not specify - instead view should create}
- state: {(optional) Object / Hash specifying initial state}
- ...
- }
-
-
-Note: Dataset Views in core Recline have a common layout on disk as
-follows, where ViewName is the named of View class:
-
-
-src/view-{lower-case-ViewName}.js
-css/{lower-case-ViewName}.css
-test/view-{lower-case-ViewName}.js
-
-
-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.
-
-Flash Messages / Notifications
-
-To send 'flash messages' or notifications the convention is that views
-should fire an event named recline:flash with a payload that is a
-flash object with the following attributes (all optional):
-
-
-message: message to show.
-category: warning (default), success, error
-persist: if true alert is persistent, o/w hidden after 3s (default=false)
-loader: if true show a loading message
-
-
-Objects or views wishing to bind to flash messages may then subscribe to
-these events and take some action such as displaying them to the user. For
-an example of such behaviour see the DataExplorer view.
-
-Writing your own Views
-
-See the existing Views.
-
- Standard JS module setup
this . recline = this . recline || {};
+ view.multiview.js
view.multiview.js /*jshint multistr:true */ Standard JS module setup
this . recline = this . recline || {};
this . recline . View = this . recline . View || {};
-( function ( $ , my ) { DataExplorer
+( function ( $ , my ) { MultiView
-The primary view for the entire application. Usage:
+Manage multiple views together along with query editor etc. Usage:
-var myExplorer = new model.recline.DataExplorer({
+var myExplorer = new model.recline.MultiView({
model: {{recline.Model.Dataset instance}}
el: {{an existing dom element}}
views: {{dataset views}}
@@ -120,7 +23,7 @@ being in the DOM is important for rendering of some subviews (e.g.
Graph).
views : (optional) the dataset views (Grid, Graph etc) for
-DataExplorer to show. This is an array of view hashes. If not provided
+MultiView 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!).
@@ -161,27 +64,32 @@ state = {
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 ({
+initialized the MultiView with the relevant views themselves. my . MultiView = Backbone . View . extend ({
template : ' \
<div class="recline-data-explorer"> \
<div class="alert-messages"></div> \
\
<div class="header"> \
- <ul class="navigation"> \
+ <div class="navigation"> \
+ <div class="btn-group" data-toggle="buttons-radio"> \
{{#views}} \
- <li><a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
+ <a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
{{/views}} \
- </ul> \
+ </div> \
+ </div> \
<div class="recline-results-info"> \
Results found <span class="doc-count">{{docCount}}</span> \
</div> \
<div class="menu-right"> \
- <a href="#" class="btn" data-action="filters">Filters</a> \
- <a href="#" class="btn" data-action="facets">Facets</a> \
+ <div class="btn-group" data-toggle="buttons-checkbox"> \
+ <a href="#" class="btn active" data-action="filters">Filters</a> \
+ <a href="#" class="btn active" data-action="fields">Fields</a> \
+ </div> \
</div> \
<div class="query-editor-here" style="display:inline;"></div> \
<div class="clearfix"></div> \
</div> \
+ <div class="data-view-sidebar"></div> \
<div class="data-view-container"></div> \
</div> \
' ,
@@ -193,7 +101,7 @@ initialized the DataExplorer with the relevant views themselves.
initialize : function ( options ) {
var self = this ;
this . el = $ ( this . el );
- this . _setupState ( options . state ); Hash of 'page' views (i.e. those for whole page) keyed by page name
if ( options . views ) {
+ this . _setupState ( options . state ); Hash of 'page' views (i.e. those for whole page) keyed by page name
if ( options . views ) {
this . pageViews = options . views ;
} else {
this . pageViews = [{
@@ -225,9 +133,9 @@ initialized the DataExplorer with the relevant views themselves.
state : this . state . get ( 'view-timeline' )
}),
}];
- } these must be called after pageViews are created
these must be called after pageViews are created
this . render ();
this . _bindStateChanges ();
- this . _bindFlashNotifications (); now do updates based on state (need to come after render)
if ( this . state . get ( 'readOnly' )) {
+ this . _bindFlashNotifications (); now do updates based on state (need to come after render)
if ( this . state . get ( 'readOnly' )) {
this . setReadOnly ();
}
if ( this . state . get ( 'currentView' )) {
@@ -259,11 +167,10 @@ initialized the DataExplorer with the relevant views themselves.
msg = 'There was an error querying the backend' ;
}
self . notify ({ message : msg , category : 'error' , persist : true });
- }); retrieve basic data like fields etc
-note this.model and dataset returned are the same
this . model . fetch ()
- . done ( function ( dataset ) {
- self . model . query ( self . state . get ( 'query' ));
- })
+ }); retrieve basic data like fields etc
+note this.model and dataset returned are the same
+TODO: set query state ...?
this . model . queryState . set ( self . state . get ( 'query' ), { silent : true });
+ this . model . fetch ()
. fail ( function ( error ) {
self . notify ({ message : error . message , category : 'error' , persist : true });
});
@@ -277,38 +184,52 @@ note this.model and dataset returned are the same
var tmplData = this . model . toTemplateJSON ();
tmplData . views = this . pageViews ;
var template = Mustache . render ( this . template , tmplData );
- $ ( this . el ). html ( template );
- var $dataViewContainer = this . el . find ( '.data-view-container' );
- _ . each ( this . pageViews , function ( view , pageName ) {
+ $ ( this . el ). html ( template ); now create and append other views
var $dataViewContainer = this . el . find ( '.data-view-container' );
+ var $dataSidebar = this . el . find ( '.data-view-sidebar' ); the main views
_ . each ( this . pageViews , function ( view , pageName ) {
$dataViewContainer . append ( view . view . el );
+ if ( view . view . elSidebar ) {
+ $dataSidebar . append ( view . view . elSidebar );
+ }
});
- var queryEditor = new my . QueryEditor ({
+
+ var pager = new recline . View . Pager ({
+ model : this . model . queryState
+ });
+ this . el . find ( '.recline-results-info' ). after ( pager . el );
+
+ var queryEditor = new recline . View . QueryEditor ({
model : this . model . queryState
});
this . el . find ( '.query-editor-here' ). append ( queryEditor . el );
- var filterEditor = new my . FilterEditor ({
- model : this . model . queryState
- });
- this . $filterEditor = filterEditor . el ;
- this . el . find ( '.header' ). append ( filterEditor . el );
- var facetViewer = new my . FacetViewer ({
+
+ var filterEditor = new recline . View . FilterEditor ({
model : this . model
});
- this . $facetViewer = facetViewer . el ;
- this . el . find ( '.header' ). append ( facetViewer . el );
+ this . $filterEditor = filterEditor . el ;
+ $dataSidebar . append ( filterEditor . el );
+
+ var fieldsView = new recline . View . Fields ({
+ model : this . model
+ });
+ this . $fieldsView = fieldsView . el ;
+ $dataSidebar . append ( fieldsView . el );
},
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[data-view="' + pageName + '"]' );
- $el . parent (). addClass ( 'active' );
- $el . addClass ( 'disabled' ); show the specific page
_ . each ( this . pageViews , function ( view , idx ) {
+ this . el . find ( '.navigation a' ). removeClass ( 'active' );
+ var $el = this . el . find ( '.navigation a[data-view="' + pageName + '"]' );
+ $el . addClass ( 'active' ); show the specific page
_ . each ( this . pageViews , function ( view , idx ) {
if ( view . id === pageName ) {
view . view . el . show ();
+ if ( view . view . elSidebar ) {
+ view . view . elSidebar . show ();
+ }
view . view . trigger ( 'view:show' );
} else {
view . view . el . hide ();
+ if ( view . view . elSidebar ) {
+ view . view . elSidebar . hide ();
+ }
view . view . trigger ( 'view:hide' );
}
});
@@ -318,9 +239,9 @@ note this.model and dataset returned are the same
e . preventDefault ();
var action = $ ( e . target ). attr ( 'data-action' );
if ( action === 'filters' ) {
- this . $filterEditor . show ();
- } else if ( action === 'facets' ) {
- this . $facetViewer . show ();
+ this . $filterEditor . toggle ();
+ } else if ( action === 'fields' ) {
+ this . $fieldsView . toggle ();
}
},
@@ -329,15 +250,15 @@ note this.model and dataset returned are the same
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
+ }, 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 = recline . Util . parseHashQueryString ();
+ 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 ? 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__ ,
@@ -350,7 +271,7 @@ note this.model and dataset returned are the same
},
_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 () {
+ 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 ) {
@@ -360,7 +281,7 @@ note this.model and dataset returned are the same
self . state . set ( update );
pageView . view . state . bind ( 'change' , function () {
var update = {};
- update [ 'view-' + pageView . id ] = pageView . view . state . toJSON (); had problems where change not being triggered for e.g. grid view so let's do it explicitly
self . state . set ( update , { silent : true });
+ update [ 'view-' + pageView . id ] = pageView . view . state . toJSON (); had problems where change not being triggered for e.g. grid view so let's do it explicitly
self . state . set ( update , { silent : true });
self . state . trigger ( 'change' );
});
}
@@ -374,7 +295,7 @@ note this.model and dataset returned are the same
self . notify ( flash );
});
});
- }, notify
+ }, notify
Create a notification (a div.alert in div.alert-messsages) using provided
flash object. Flash attributes (all are optional):
@@ -413,7 +334,7 @@ flash object. Flash attributes (all are optional):
});
}, 1000 );
}
- }, clearNotifications
+ }, clearNotifications
Clear all existing notifications
clearNotifications : function () {
var $notifications = $ ( '.recline-data-explorer .alert-messages .alert' );
@@ -421,236 +342,68 @@ flash object. Flash attributes (all are optional):
$ ( this ). remove ();
});
}
-}); DataExplorer.restore
+}); MultiView.restore
-Restore a DataExplorer instance from a serialized state including the associated dataset
my . DataExplorer . restore = function ( state ) {
+Restore a MultiView instance from a serialized state including the associated dataset
my . MultiView . restore = function ( state ) {
var dataset = recline . Model . Dataset . restore ( state );
- var explorer = new my . DataExplorer ({
+ var explorer = new my . MultiView ({
model : dataset ,
state : state
});
return explorer ;
-}
-
-my . QueryEditor = Backbone . View . extend ({
- className : 'recline-query-editor' ,
- template : ' \
- <form action="" method="GET" class="form-inline"> \
- <div class="input-prepend text-query"> \
- <span class="add-on"><i class="icon-search"></i></span> \
- <input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
- </div> \
- <div class="pagination"> \
- <ul> \
- <li class="prev action-pagination-update"><a href="">«</a></li> \
- <li class="active"><a><input name="from" type="text" value="{{from}}" /> – <input name="to" type="text" value="{{to}}" /> </a></li> \
- <li class="next action-pagination-update"><a href="">»</a></li> \
- </ul> \
- </div> \
- <button type="submit" class="btn">Go »</button> \
- </form> \
- ' ,
-
- events : {
- 'submit form' : 'onFormSubmit' ,
- 'click .action-pagination-update' : 'onPaginationUpdate'
- },
-
- initialize : function () {
- _ . bindAll ( this , 'render' );
- this . el = $ ( this . el );
- this . model . bind ( 'change' , this . render );
- this . render ();
- },
- onFormSubmit : function ( e ) {
- e . preventDefault ();
- var query = this . el . find ( '.text-query input' ). val ();
- var newFrom = parseInt ( this . el . find ( 'input[name="from"]' ). val ());
- var newSize = parseInt ( this . el . find ( 'input[name="to"]' ). val ()) - newFrom ;
- this . model . set ({ size : newSize , from : newFrom , q : query });
- },
- onPaginationUpdate : function ( e ) {
- e . preventDefault ();
- var $el = $ ( e . target );
- var newFrom = 0 ;
- if ( $el . parent (). hasClass ( 'prev' )) {
- newFrom = this . model . get ( 'from' ) - Math . max ( 0 , this . model . get ( 'size' ));
- } else {
- newFrom = this . model . get ( 'from' ) + this . model . get ( 'size' );
- }
- this . model . set ({ from : newFrom });
- },
- render : function () {
- var tmplData = this . model . toJSON ();
- tmplData . to = this . model . get ( 'from' ) + this . model . get ( 'size' );
- var templated = Mustache . render ( this . template , tmplData );
- this . el . html ( templated );
- }
-});
-
-my . FilterEditor = Backbone . View . extend ({
- className : 'recline-filter-editor well' ,
- template : ' \
- <a class="close js-hide" href="#">×</a> \
- <div class="row filters"> \
- <div class="span1"> \
- <h3>Filters</h3> \
- </div> \
- <div class="span11"> \
- <form class="form-horizontal"> \
- <div class="row"> \
- <div class="span6"> \
- {{#termFilters}} \
- <div class="control-group filter-term filter" data-filter-id={{id}}> \
- <label class="control-label" for="">{{label}}</label> \
- <div class="controls"> \
- <div class="input-append"> \
- <input type="text" value="{{value}}" name="{{fieldId}}" class="span4" data-filter-field="{{fieldId}}" data-filter-id="{{id}}" data-filter-type="term" /> \
- <a class="btn js-remove-filter"><i class="icon-remove"></i></a> \
- </div> \
- </div> \
- </div> \
- {{/termFilters}} \
- </div> \
- <div class="span4"> \
- <p>To add a filter use the column menu in the grid view.</p> \
- <button type="submit" class="btn">Update</button> \
- </div> \
- </form> \
- </div> \
- </div> \
- ' ,
- events : {
- 'click .js-hide' : 'onHide' ,
- 'click .js-remove-filter' : 'onRemoveFilter' ,
- 'submit form' : 'onTermFiltersUpdate'
- },
- initialize : function () {
- this . el = $ ( this . el );
- _ . bindAll ( this , 'render' );
- this . model . bind ( 'change' , this . render );
- this . model . bind ( 'change:filters:new-blank' , this . render );
- this . render ();
- },
- render : function () {
- var tmplData = $ . extend ( true , {}, this . model . toJSON ()); we will use idx in list as there id ...
tmplData . filters = _ . map ( tmplData . filters , function ( filter , idx ) {
- filter . id = idx ;
- return filter ;
- });
- tmplData . termFilters = _ . filter ( tmplData . filters , function ( filter ) {
- return filter . term !== undefined ;
- });
- tmplData . termFilters = _ . map ( tmplData . termFilters , function ( filter ) {
- var fieldId = _ . keys ( filter . term )[ 0 ];
- return {
- id : filter . id ,
- fieldId : fieldId ,
- label : fieldId ,
- value : filter . term [ fieldId ]
- };
- });
- var out = Mustache . render ( this . template , tmplData );
- this . el . html ( out ); are there actually any facets to show?
if ( this . model . get ( 'filters' ). length > 0 ) {
- this . el . show ();
- } else {
- this . el . hide ();
- }
- },
- onHide : function ( e ) {
- e . preventDefault ();
- this . el . hide ();
- },
- onRemoveFilter : function ( e ) {
- e . preventDefault ();
- var $target = $ ( e . target );
- var filterId = $target . closest ( '.filter' ). attr ( 'data-filter-id' );
- this . model . removeFilter ( filterId );
- },
- onTermFiltersUpdate : function ( e ) {
- var self = this ;
- e . preventDefault ();
- var filters = self . model . get ( 'filters' );
- var $form = $ ( e . target );
- _ . each ( $form . find ( 'input' ), function ( input ) {
- var $input = $ ( input );
- var filterIndex = parseInt ( $input . attr ( 'data-filter-id' ));
- var value = $input . val ();
- var fieldId = $input . attr ( 'data-filter-field' );
- filters [ filterIndex ]. term [ fieldId ] = value ;
- });
- self . model . set ({ filters : filters });
- self . model . trigger ( 'change' );
- }
-});
-
-my . FacetViewer = Backbone . View . extend ({
- className : 'recline-facet-viewer well' ,
- template : ' \
- <a class="close js-hide" href="#">×</a> \
- <div class="facets row"> \
- <div class="span1"> \
- <h3>Facets</h3> \
- </div> \
- {{#facets}} \
- <div class="facet-summary span2 dropdown" data-facet="{{id}}"> \
- <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \
- <ul class="facet-items dropdown-menu"> \
- {{#terms}} \
- <li><a class="facet-choice js-facet-filter" data-value="{{term}}">{{term}} ({{count}})</a></li> \
- {{/terms}} \
- {{#entries}} \
- <li><a class="facet-choice js-facet-filter" data-value="{{time}}">{{term}} ({{count}})</a></li> \
- {{/entries}} \
- </ul> \
- </div> \
- {{/facets}} \
- </div> \
- ' ,
-
- events : {
- 'click .js-hide' : 'onHide' ,
- 'click .js-facet-filter' : 'onFacetFilter'
- },
- initialize : function ( model ) {
- _ . bindAll ( this , 'render' );
- this . el = $ ( this . el );
- this . model . facets . bind ( 'all' , this . render );
- this . model . fields . bind ( 'all' , this . render );
- this . render ();
- },
- render : function () {
- var tmplData = {
- facets : this . model . facets . toJSON (),
- fields : this . model . fields . toJSON ()
+} Miscellaneous Utilities var urlPathRegex = /^([^?]+)(\?.*)?/ ; Parse the Hash section of a URL into path and query string
my . parseHashUrl = function ( hashUrl ) {
+ var parsed = urlPathRegex . exec ( hashUrl );
+ if ( parsed === null ) {
+ return {};
+ } else {
+ return {
+ path : parsed [ 1 ],
+ query : parsed [ 2 ] || ''
};
- tmplData . facets = _ . map ( tmplData . facets , function ( facet ) {
- if ( facet . _type === 'date_histogram' ) {
- facet . entries = _ . map ( facet . entries , function ( entry ) {
- entry . term = new Date ( entry . time ). toDateString ();
- return entry ;
- });
- }
- return facet ;
- });
- var templated = Mustache . render ( this . template , tmplData );
- this . el . html ( templated ); are there actually any facets to show?
if ( this . model . facets . length > 0 ) {
- this . el . show ();
- } else {
- this . el . hide ();
- }
- },
- onHide : function ( e ) {
- e . preventDefault ();
- this . el . hide ();
- },
- onFacetFilter : function ( e ) {
- var $target = $ ( e . target );
- var fieldId = $target . closest ( '.facet-summary' ). attr ( 'data-facet' );
- var value = $target . attr ( 'data-value' );
- this . model . queryState . addTermFilter ( fieldId , value );
}
-});
+}; Parse a URL query string (?xyz=abc...) into a dictionary.
my . parseQueryString = function ( q ) {
+ if ( ! q ) {
+ return {};
+ }
+ 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 ;
+}; Parse the query string out of the URL hash
my . parseHashQueryString = function () {
+ q = my . parseHashUrl ( window . location . hash ). query ;
+ return my . parseQueryString ( q );
+}; Compse a Query String
my . composeQueryString = function ( queryParams ) {
+ var queryString = '?' ;
+ var items = [];
+ $ . each ( queryParams , function ( key , value ) {
+ if ( typeof ( value ) === 'object' ) {
+ value = JSON . stringify ( value );
+ }
+ items . push ( key + '=' + encodeURIComponent ( value ));
+ });
+ queryString += items . join ( '&' );
+ return queryString ;
+};
+
+my . getNewHashForQueryString = function ( queryParams ) {
+ var queryPart = my . composeQueryString ( queryParams );
+ if ( window . location . hash ) { slice(1) to remove # at start
return window . location . hash . split ( '?' )[ 0 ]. slice ( 1 ) + queryPart ;
+ } else {
+ return queryPart ;
+ }
+};
+
+my . setHashQueryString = function ( queryParams ) {
+ window . location . hash = my . getNewHashForQueryString ( queryParams );
+};
})( jQuery , recline . View );
diff --git a/make b/make
index bbd3430a..c2b75c17 100755
--- a/make
+++ b/make
@@ -20,7 +20,7 @@ def docs():
shutil.rmtree('/tmp/recline-docs')
os.makedirs('/tmp/recline-docs')
files = '%s/src/*.js' % os.getcwd()
- dest = '%s/docs/source' % os.getcwd()
+ dest = '%s/docs/src' % os.getcwd()
os.system('cd /tmp/recline-docs && %s %s && mv docs/* %s' % (docco_executable,files, dest))
print("** Docs built ok")