diff --git a/_includes/recline-deps.html b/_includes/recline-deps.html index 5f4313fc..2b8cd735 100644 --- a/_includes/recline-deps.html +++ b/_includes/recline-deps.html @@ -25,7 +25,7 @@ - + diff --git a/_layouts/default.html b/_layouts/default.html index ccd3403c..9ed6a0fd 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -9,114 +9,123 @@ - + {% if page.recline-deps %} {% include recline-deps.html %} {% endif %} - + -
-
+ -
- -{{content}} - -
-
-
-
-

Use the Library »

-

Recline.js is freely redistributable under the terms of the MIT license.

-
-
-

Supported by funding from the Shuttleworth Foundation

- -
-
- -
-
-
Contacts
- -
+ + Recline.js – relax with your data
+
+ + +
-
- + {{content}} + +
+
+
+
+

Use the Library »

+

Recline.js is freely redistributable under the terms of the MIT license.

+
+
+

Supported by funding from the Shuttleworth Foundation

+ +
+
+ +
+
+

Contacts

+ + +
+
+ +
+
+ + diff --git a/css-site/style.css b/css-site/style.css index e08cb53e..f0a9e030 100644 --- a/css-site/style.css +++ b/css-site/style.css @@ -28,6 +28,7 @@ body, p { h1, h2, h3, h4, h5, h6 { font-family:'PT Sans',Helvetica, Arial, sans-serif; + font-weight: bold; } h2 { @@ -53,54 +54,78 @@ a:hover { Layout --------------------------------------------------- */ -.navbar .logo-icon img { - margin-top: 6px; - margin-right: 8px; +.navbar-header{ + +} + +.navbar-header .logo-icon { height: 34px; } -.navbar .brand { - font-family:'PT Sans', Helvetica, Arial, sans-serif; - font-style:italic; - font-size:18px; - font-weight:400; - letter-spacing:-1px; - line-height: 32px; +.navbar-brand { + font-family:'PT Sans', Helvetica, Arial, sans-serif; + font-style:italic; + font-size:18px; + font-weight:400; + letter-spacing:-1px; text-shadow: none !important; - color: #ffffff; + color: #FFF !important; + margin-top: -6px; } -.navbar .nav > li > a { +.navbar-nav > li > a { padding: 15px 10px; font-size: 13px; text-shadow: none !important; - color: #999999; + color: #999 !important; } -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - color: #ffffff; +.navbar-nav > li > a:focus, +.navbar-nav > li > a:hover { + color: #FFF !important; } .navbar .divider-vertical { height: 50px; + margin: 0 9px; + border-right: 1px solid #ffffff; } -.navbar-inner { - height:50px; - background: #303030; /* Old browsers */ - background: -moz-linear-gradient(top, #303030 0%, #2d2d2d 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* IE10+ */ - background: linear-gradient(top, #303030 0%,#2d2d2d 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */ - -webkit-box-shadow:none; +.navbar-inverse .divider-vertical { + border-right-color: #222222; +} + +@media (max-width: 767px) { + .navbar-collapse .nav > .divider-vertical { + display: none; + } +} + +.navbar { + height:50px; + background: #303030; /* Old browsers */ + background: -moz-linear-gradient(top, #303030 0%, #2d2d2d 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* IE10+ */ + background: linear-gradient(top, #303030 0%,#2d2d2d 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */ + -webkit-box-shadow:none; -moz-box-shadow: none; box-shadow: none; } +.icon-white{ + color: #FFF; + margin-right: 1px; +} + +a.btn, +button.btn { + white-space: normal !important; +} + body { padding-top: 60px; } @@ -165,12 +190,12 @@ section { Footer --------------------------------------------------- */ -.footer { +.recline-footer { background-color:#040404; color:#CCC; margin-top: 30px; } -.footer:before { +.recline-footer:before { content: " "; height:14px; display:block; @@ -179,18 +204,18 @@ section { background-position: center -100px; margin-top:-34px; } -.footer:after { +.recline-footer:after { display:none; } -.footer .row { +.recline-footer .row { margin-top:15px; margin-bottom:15px; } -.footer a { +.recline-footer a { color:#CCC; } -.footer a.btn { - color:#333333; +.recline-footer a.btn { + color: #333333; } .tutorials .well { diff --git a/css/multiview.css b/css/multiview.css index 02c4b704..4b359842 100644 --- a/css/multiview.css +++ b/css/multiview.css @@ -27,22 +27,42 @@ float: right; margin-left: 5px; padding-left: 5px; - border-left: solid 2px #ddd; } -.header .recline-results-info { - line-height: 28px; +.recline-results-info { + line-height: 35px; margin-left: 20px; float: left; } +.recline-data-explorer .data-view-sidebar > div { + margin-top: 5px; + margin-bottom: 10px; +} + +.recline-data-explorer .radio, +.recline-data-explorer .checkbox { + padding-left: 20px; +} + +.recline-data-explorer .editor-update-map { + margin: 30px 0px 20px 0px; +} + +.recline-data-explorer label { + font-weight: normal; +} + /********************************************************** * Query Editor *********************************************************/ -.header .recline-query-editor { +.recline-query-editor { float: right; - height: 30px; + height: 35px; + padding-right: 5px; + margin-right: 5px; + border-right: solid 2px #ddd; } .header .input-prepend { @@ -63,40 +83,95 @@ vertical-align: top; } -.header .recline-query-editor form button { +.recline-query-editor form button { vertical-align: top; } -.header .recline-query-editor label { - display:none; +/* label for screen reader */ +.recline-query-editor .form-inline label { + position: absolute; + top:0; + left:-9999px } /********************************************************** * Pager *********************************************************/ -.header .recline-pager { +.recline-pager { float: left; margin: auto; display: block; margin-left: 20px; } -.header .recline-pager .pagination label { +.recline-pager .pagination li { + display: inline-block; +} + +.recline-pager .pagination label { display:none; } -.header .recline-pager .pagination input { - width: 30px; - height: 18px; +.recline-pager .pagination input { + width: 40px; + height: 25px; padding: 2px 4px; margin: 0; - margin-top: -4px; + margin-top: -2px; + + border: 1px solid #cccccc; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + transition: border linear 0.2s, box-shadow linear 0.2s; + border-radius: 4px; + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -webkit-border-radius: 4px; + + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-border-radius: 4px; + + -o-transition: border linear 0.2s, box-shadow linear 0.2s; } -.header .recline-pager .pagination a { - line-height: 26px; - padding: 0 6px; +.recline-pager .pagination a { + float: none; + margin-left: -5px; + color: #555; +} + +.recline-pager .pagination .page-range { + height: 34px; + padding: 5px 8px; + margin-left: -5px; + border: 1px solid #ddd; +} + +.recline-pager .pagination .page-range a { + padding: 0px 12px; + border: none; +} + +.recline-pager .pagination .page-range a:hover { + background-color: #ffffff; +} + +.recline-pager .pagination > li:first-child > a { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 0px; + border-top-right-radius: 0px; + height: 34px; +} + +.recline-pager .pagination > li:last-child > a { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; + height: 34px; } /********************************************************** @@ -108,6 +183,31 @@ display: none; } +.recline-filter-editor .filters { + margin: 20px 0px; +} + +.recline-filter-editor h3 { + margin-top: 4px; +} + +.recline-filter-editor .filter { + margin-top: 20px; +} + +.recline-filter-editor .filter .form-group { + margin-bottom: 0px; +} + +.recline-filter-editor .filter input, +.recline-filter-editor .filter label { + margin: 0px; +} + +.recline-filter-editor .js-edit button { + margin: 25px 0px 0px 0px; +} + .recline-filter-editor .filter-term a { font-size: 18px; } @@ -120,6 +220,20 @@ .recline-filter-editor input { margin-top: 0.5em; + margin-bottom: 10px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: 1px solid #cccccc; +} + +.recline-filter-editor label { + font-weight: normal; + display: block; +} + +.recline-filter-editor legend { + margin-bottom: 5px; } .recline-filter-editor .add-filter { @@ -143,22 +257,30 @@ padding: 0; } -.recline-fields-view .fields-list .accordion-heading, -.recline-fields-view .fields-list h3 -{ - margin: 3px 0 3px 5px; +.recline-fields-view .panel { + background-color: #f5f5f5; + border: 1px solid #e5e5e5; } -.recline-fields-view .fields-list .accordion-heading a, -.recline-fields-view .fields-list .accordion-heading h4 { +.recline-fields-view .panel-group h3 { + padding-left: 10px; +} + +.recline-fields-view .fields-list .panel-heading { + padding: 2px 5px; + margin: 1px 0px 1px 5px; +} + +.recline-fields-view .panel a, +.recline-fields-view .panel h4 { display: inline; } -.recline-fields-view .fields-list .accordion-heading a { +.recline-fields-view .panel a { padding: 0; } -.recline-fields-view .fields-list .accordion-heading h4 { +.recline-fields-view .panel h4 { word-wrap: break-word } diff --git a/css/slickgrid.css b/css/slickgrid.css index 5d1835a3..f70a38f1 100644 --- a/css/slickgrid.css +++ b/css/slickgrid.css @@ -29,6 +29,10 @@ classes should alter those! .recline-slickgrid .slick-header-column:hover, .slick-header-column-active { } +.recline-slickgrid .slick-header-column.ui-state-default { + height: 26px; +} + .recline-slickgrid .slick-headerrow { background: #fafafa; } @@ -167,16 +171,16 @@ classes should alter those! .recline-slickgrid .recline-row-delete { font-size: 12px; - padding: 2px; - width: 22px; - height: 14px; + padding: 3px; + width: 29px; + height: 18px; line-height: 13px; } .recline-cell-reorder { font-size: 12px; - padding: 2px; - width: 22px; + padding: 1px; + width: 31px; height: 14px; line-height: 13px; cursor: move; diff --git a/demos/images/calendar.gif b/demos/images/calendar.gif new file mode 100755 index 00000000..90fd2e17 Binary files /dev/null and b/demos/images/calendar.gif differ diff --git a/demos/index.html b/demos/index.html index 16ffa9f2..6c82024e 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,7 +11,7 @@ root: ../
-
+

Multiview Demo

See the integrated multiview in action on a @@ -20,7 +20,7 @@ root: ../ and field summaries.

-
+
@@ -28,7 +28,7 @@ root: ../
-
+

Data Explorer

The Data Explorer is a full @@ -37,7 +37,7 @@ root: ../ was originally developed to build.

-
+
@@ -45,7 +45,7 @@ root: ../
-
+

Timeliner

Create timelines quickly and easily using the source code)

-
+
@@ -61,7 +61,7 @@ root: ../
-
+

Crime Maps

See Recline's geo filter and map view capabilities put to good use @@ -69,7 +69,7 @@ root: ../ Data Explorer pre-configured to show thefts near 9th and Mission.

-
+
@@ -77,7 +77,7 @@ root: ../
-
+

Search Demo

See how easy it is to build a responsive AJAX-based search interface @@ -85,7 +85,7 @@ root: ../ to easily customize the display of results.

-
+
diff --git a/demos/search/index.html b/demos/search/index.html index 28d3bb6a..b9cadf5f 100644 --- a/demos/search/index.html +++ b/demos/search/index.html @@ -17,7 +17,7 @@ root: ../../ } .controls .query-here { - width: 500px; + width: 510px; margin: auto; } @@ -28,30 +28,10 @@ root: ../../ } .pager-here { - width: 200px; + width: 230px; margin: auto; } -.recline-pager { - float: left; - margin: auto; - display: block; - margin-left: 20px; -} - -.recline-pager .pagination input { - width: 30px; - height: 18px; - padding: 2px 4px; - margin: 0; - margin-top: -4px; -} - -.recline-pager .pagination a { - line-height: 26px; - padding: 0 6px; -} - .body { clear: both; } @@ -71,13 +51,18 @@ root: ../../ ul.facet-items { list-style-type: none; - margin-left: 0; + margin-left: 0px; + padding: 0px; } .record ul { list-style-type: none; margin-left: 0; } + +.recline-query-editor { + border-right: none; +}
diff --git a/dist/recline.css b/dist/recline.css index ed38db58..5d7f6e86 100644 --- a/dist/recline.css +++ b/dist/recline.css @@ -276,22 +276,42 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit { float: right; margin-left: 5px; padding-left: 5px; - border-left: solid 2px #ddd; } -.header .recline-results-info { - line-height: 28px; +.recline-results-info { + line-height: 35px; margin-left: 20px; float: left; } +.recline-data-explorer .data-view-sidebar > div { + margin-top: 5px; + margin-bottom: 10px; +} + +.recline-data-explorer .radio, +.recline-data-explorer .checkbox { + padding-left: 20px; +} + +.recline-data-explorer .editor-update-map { + margin: 30px 0px 20px 0px; +} + +.recline-data-explorer label { + font-weight: normal; +} + /********************************************************** * Query Editor *********************************************************/ -.header .recline-query-editor { +.recline-query-editor { float: right; - height: 30px; + height: 35px; + padding-right: 5px; + margin-right: 5px; + border-right: solid 2px #ddd; } .header .input-prepend { @@ -312,40 +332,95 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit { vertical-align: top; } -.header .recline-query-editor form button { +.recline-query-editor form button { vertical-align: top; } -.header .recline-query-editor label { - display:none; +/* label for screen reader */ +.recline-query-editor .form-inline label { + position: absolute; + top:0; + left:-9999px } /********************************************************** * Pager *********************************************************/ -.header .recline-pager { +.recline-pager { float: left; margin: auto; display: block; margin-left: 20px; } -.header .recline-pager .pagination label { +.recline-pager .pagination li { + display: inline-block; +} + +.recline-pager .pagination label { display:none; } -.header .recline-pager .pagination input { - width: 30px; - height: 18px; +.recline-pager .pagination input { + width: 40px; + height: 25px; padding: 2px 4px; margin: 0; - margin-top: -4px; + margin-top: -2px; + + border: 1px solid #cccccc; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + transition: border linear 0.2s, box-shadow linear 0.2s; + border-radius: 4px; + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -webkit-border-radius: 4px; + + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-border-radius: 4px; + + -o-transition: border linear 0.2s, box-shadow linear 0.2s; } -.header .recline-pager .pagination a { - line-height: 26px; - padding: 0 6px; +.recline-pager .pagination a { + float: none; + margin-left: -5px; + color: #555; +} + +.recline-pager .pagination .page-range { + height: 34px; + padding: 5px 8px; + margin-left: -5px; + border: 1px solid #ddd; +} + +.recline-pager .pagination .page-range a { + padding: 0px 12px; + border: none; +} + +.recline-pager .pagination .page-range a:hover { + background-color: #ffffff; +} + +.recline-pager .pagination > li:first-child > a { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 0px; + border-top-right-radius: 0px; + height: 34px; +} + +.recline-pager .pagination > li:last-child > a { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; + border-bottom-left-radius: 0px; + border-top-left-radius: 0px; + height: 34px; } /********************************************************** @@ -357,6 +432,31 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit { display: none; } +.recline-filter-editor .filters { + margin: 20px 0px; +} + +.recline-filter-editor h3 { + margin-top: 4px; +} + +.recline-filter-editor .filter { + margin-top: 20px; +} + +.recline-filter-editor .filter .form-group { + margin-bottom: 0px; +} + +.recline-filter-editor .filter input, +.recline-filter-editor .filter label { + margin: 0px; +} + +.recline-filter-editor .js-edit button { + margin: 25px 0px 0px 0px; +} + .recline-filter-editor .filter-term a { font-size: 18px; } @@ -369,6 +469,20 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit { .recline-filter-editor input { margin-top: 0.5em; + margin-bottom: 10px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border: 1px solid #cccccc; +} + +.recline-filter-editor label { + font-weight: normal; + display: block; +} + +.recline-filter-editor legend { + margin-bottom: 5px; } .recline-filter-editor .add-filter { @@ -392,22 +506,30 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit { padding: 0; } -.recline-fields-view .fields-list .accordion-heading, -.recline-fields-view .fields-list h3 -{ - margin: 3px 0 3px 5px; +.recline-fields-view .panel { + background-color: #f5f5f5; + border: 1px solid #e5e5e5; } -.recline-fields-view .fields-list .accordion-heading a, -.recline-fields-view .fields-list .accordion-heading h4 { +.recline-fields-view .panel-group h3 { + padding-left: 10px; +} + +.recline-fields-view .fields-list .panel-heading { + padding: 2px 5px; + margin: 1px 0px 1px 5px; +} + +.recline-fields-view .panel a, +.recline-fields-view .panel h4 { display: inline; } -.recline-fields-view .fields-list .accordion-heading a { +.recline-fields-view .panel a { padding: 0; } -.recline-fields-view .fields-list .accordion-heading h4 { +.recline-fields-view .panel h4 { word-wrap: break-word } @@ -486,6 +608,10 @@ classes should alter those! .recline-slickgrid .slick-header-column:hover, .slick-header-column-active { } +.recline-slickgrid .slick-header-column.ui-state-default { + height: 26px; +} + .recline-slickgrid .slick-headerrow { background: #fafafa; } @@ -624,16 +750,16 @@ classes should alter those! .recline-slickgrid .recline-row-delete { font-size: 12px; - padding: 2px; - width: 22px; - height: 14px; + padding: 3px; + width: 29px; + height: 18px; line-height: 13px; } .recline-cell-reorder { font-size: 12px; - padding: 2px; - width: 22px; + padding: 1px; + width: 31px; height: 14px; line-height: 13px; cursor: move; diff --git a/dist/recline.dataset.min.js b/dist/recline.dataset.min.js new file mode 100644 index 00000000..8ca94447 --- /dev/null +++ b/dist/recline.dataset.min.js @@ -0,0 +1 @@ +this.recline=this.recline||{};this.recline.Model=this.recline.Model||{};(function(my){"use strict";var Deferred=typeof jQuery!=="undefined"&&jQuery.Deferred||_.Deferred;my.Dataset=Backbone.Model.extend({constructor:function Dataset(){Backbone.Model.prototype.constructor.apply(this,arguments)},initialize:function(){var self=this;_.bindAll(this,"query");this.backend=null;if(this.get("backend")){this.backend=this._backendFromString(this.get("backend"))}else{if(this.get("records")){this.backend=recline.Backend.Memory}}this.fields=new my.FieldList;this.records=new my.RecordList;this._changes={deletes:[],updates:[],creates:[]};this.facets=new my.FacetList;this.recordCount=null;this.queryState=new my.Query;this.queryState.bind("change facet:add",function(){self.query()});this._store=this.backend;this._handleResult=this.backend!=null&&_.has(this.backend,"handleQueryResult")?this.backend.handleQueryResult:this._handleQueryResult;if(this.backend==recline.Backend.Memory){this.fetch()}},sync:function(method,model,options){return this.backend.sync(method,model,options)},fetch:function(){var self=this;var dfd=new Deferred;if(this.backend!==recline.Backend.Memory){this.backend.fetch(this.toJSON()).done(handleResults).fail(function(args){dfd.reject(args)})}else{handleResults({records:this.get("records"),fields:this.get("fields"),useMemoryStore:true})}function handleResults(results){var fields=self.get("fields")||results.fields;var out=self._normalizeRecordsAndFields(results.records,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(args){dfd.reject(args)})}return dfd.promise()},_normalizeRecordsAndFields:function(records,fields){if(!fields&&records&&records.length>0){if(records[0]instanceof Array){fields=records[0];records=records.slice(1)}else{fields=_.map(_.keys(records[0]),function(key){return{id:key}})}}if(fields&&fields.length>0&&(fields[0]===null||typeof fields[0]!="object")){var seen={};fields=_.map(fields,function(field,index){if(field===null){field=""}else{field=field.toString()}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}return{id:fieldId}})}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;return this._store.save(this._changes,this.toJSON())},query:function(queryObj){var self=this;var dfd=new Deferred;this.trigger("query:start");if(queryObj){var attributes=queryObj;if(queryObj instanceof my.Query){attributes=queryObj.toJSON()}this.queryState.set(attributes,{silent:true})}var actualQuery=this.queryState.toJSON();this._store.query(actualQuery,this.toJSON()).done(function(queryResult){self._handleResult(queryResult);self.trigger("query:done");dfd.resolve(self.records)}).fail(function(args){self.trigger("query:fail",args);dfd.reject(args)});return dfd.promise()},_handleQueryResult:function(queryResult){var self=this;self.recordCount=queryResult.total;var docs=_.map(queryResult.hits,function(hit){var _doc=new my.Record(hit);_doc.fields=self.fields;_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.records.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)}},toTemplateJSON:function(){var data=this.toJSON();data.recordCount=this.recordCount;data.fields=this.fields.toJSON();return data},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=new 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);self.fields.get(facetId).facets.reset(facet)})}dfd.resolve(queryResult)});return dfd.promise()},recordSummary:function(record){return record.summary()},_backendFromString:function(backendString){var backend=null;if(recline&&recline.Backend){_.each(_.keys(recline.Backend),function(name){if(name.toLowerCase()===backendString.toLowerCase()){backend=recline.Backend[name]}})}return backend}});my.Record=Backbone.Model.extend({constructor:function Record(){Backbone.Model.prototype.constructor.apply(this,arguments)},initialize:function(){_.bindAll(this,"getFieldValue")},getFieldValue:function(field){var val=this.getFieldValueUnrendered(field);if(field&&!_.isUndefined(field.renderer)){val=field.renderer(val,field,this.toJSON())}return val},getFieldValueUnrendered:function(field){if(!field){return""}var val=this.get(field.id);if(field.deriver){val=field.deriver(val,field,this)}return val},summary:function(record){var self=this;var html='
';this.fields.each(function(field){if(field.id!="id"){html+='
'+field.get("label")+": "+self.getFieldValue(field)+"
"}});html+="
";return html},fetch:function(){},save:function(){},destroy:function(){this.trigger("destroy",this)}});my.RecordList=Backbone.Collection.extend({constructor:function RecordList(){Backbone.Collection.prototype.constructor.apply(this,arguments)},model:my.Record});my.Field=Backbone.Model.extend({constructor:function Field(){Backbone.Model.prototype.constructor.apply(this,arguments)},defaults:{label:null,type:"string",format:null,is_derived:false},initialize:function(data,options){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){this.set({label:this.id})}if(this.attributes.type.toLowerCase()in this._typeMap){this.attributes.type=this._typeMap[this.attributes.type.toLowerCase()]}if(options){this.renderer=options.renderer;this.deriver=options.deriver}if(!this.renderer){this.renderer=this.defaultRenderers[this.get("type")]}this.facets=new my.FacetList},_typeMap:{text:"string","double":"number","float":"number",numeric:"number","int":"integer",datetime:"date-time",bool:"boolean",timestamp:"date-time",json:"object"},defaultRenderers:{object:function(val,field,doc){return JSON.stringify(val)},geo_point:function(val,field,doc){return JSON.stringify(val)},number:function(val,field,doc){var format=field.get("format");if(format==="percentage"){return val+"%"}return val},string:function(val,field,doc){var format=field.get("format");if(format==="markdown"){if(typeof Showdown!=="undefined"){var showdown=new Showdown.converter;out=showdown.makeHtml(val);return out}else{return val}}else if(format=="plain"){return val}else{if(val&&typeof val==="string"){val=val.replace(/(https?:\/\/[^ ]+)/g,'$1')}return val}}}});my.FieldList=Backbone.Collection.extend({constructor:function FieldList(){Backbone.Collection.prototype.constructor.apply(this,arguments)},model:my.Field});my.Query=Backbone.Model.extend({constructor:function Query(){Backbone.Model.prototype.constructor.apply(this,arguments)},defaults:function(){return{size:100,from:0,q:"",facets:{},filters:[]}},_filterTemplates:{term:{type:"term",field:"",term:""},range:{type:"range",from:"",to:""},geo_distance:{type:"geo_distance",distance:10,unit:"km",point:{lon:0,lat:0}}},addFilter:function(filter){var ourfilter=JSON.parse(JSON.stringify(filter));if(_.keys(filter).length<=3){ourfilter=_.defaults(ourfilter,this._filterTemplates[filter.type])}var filters=this.get("filters");filters.push(ourfilter);this.trigger("change:filters:new-blank")},replaceFilter:function(filter){var filters=this.get("filters");var idx=-1;_.each(this.get("filters"),function(f,key,list){if(filter.field==f.field){idx=key}});if(idx>=0){filters.splice(idx,1);this.set({filters:filters})}this.addFilter(filter)},updateFilter:function(index,value){},removeFilter:function(filterIndex){var filters=this.get("filters");filters.splice(filterIndex,1);this.set({filters:filters});this.trigger("change")},addFacet:function(fieldId,size,silent){var facets=this.get("facets");if(_.contains(_.keys(facets),fieldId)){return}facets[fieldId]={terms:{field:fieldId}};if(!_.isUndefined(size)){facets[fieldId].terms.size=size}this.set({facets:facets},{silent:true});if(!silent){this.trigger("facet:add",this)}},addHistogramFacet:function(fieldId){var facets=this.get("facets");facets[fieldId]={date_histogram:{field:fieldId,interval:"day"}};this.set({facets:facets},{silent:true});this.trigger("facet:add",this)},removeFacet:function(fieldId){var facets=this.get("facets");if(!_.contains(_.keys(facets),fieldId)){return}delete facets[fieldId];this.set({facets:facets},{silent:true});this.trigger("facet:remove",this)},clearFacets:function(){var facets=this.get("facets");_.each(_.keys(facets),function(fieldId){delete facets[fieldId]});this.trigger("facet:remove",this)},refreshFacets:function(){this.trigger("facet:add",this)}});my.Facet=Backbone.Model.extend({constructor:function Facet(){Backbone.Model.prototype.constructor.apply(this,arguments)},defaults:function(){return{_type:"terms",total:0,other:0,missing:0,terms:[]}}});my.FacetList=Backbone.Collection.extend({constructor:function FacetList(){Backbone.Collection.prototype.constructor.apply(this,arguments)},model:my.Facet});my.ObjectState=Backbone.Model.extend({})})(this.recline.Model);this.recline=this.recline||{};this.recline.Backend=this.recline.Backend||{};this.recline.Backend.Memory=this.recline.Backend.Memory||{};(function(my){"use strict";my.__type__="memory";var Deferred=typeof jQuery!=="undefined"&&jQuery.Deferred||_.Deferred;my.Store=function(records,fields){var self=this;this.records=records;this.data=this.records;if(fields){this.fields=fields}else{if(records){this.fields=_.map(records[0],function(value,key){return{id:key,type:"string"}})}}this.update=function(doc){_.each(self.records,function(internalDoc,idx){if(doc.id===internalDoc.id){self.records[idx]=doc}})};this.remove=function(doc){var newdocs=_.reject(self.records,function(internalDoc){return doc.id===internalDoc.id});this.records=newdocs};this.save=function(changes,dataset){var self=this;var dfd=new Deferred;_.each(changes.updates,function(record){self.update(record)});_.each(changes.deletes,function(record){self.remove(record)});dfd.resolve();return dfd.promise()},this.query=function(queryObj){var dfd=new Deferred;var numRows=queryObj.size||this.records.length;var start=queryObj.from||0;var results=this.records;results=this._applyFilters(results,queryObj);results=this._applyFreeTextQuery(results,queryObj);_.each(queryObj.sort,function(sortObj){var fieldName=sortObj.field;results=_.sortBy(results,function(doc){var _out=doc[fieldName];return _out});if(sortObj.order=="desc"){results.reverse()}});var facets=this.computeFacets(results,queryObj);var out={total:results.length,hits:results.slice(start,start+numRows),facets:facets};dfd.resolve(out);return dfd.promise()};this._applyFilters=function(results,queryObj){var filters=queryObj.filters;var filterFunctions={term:term,terms:terms,range:range,geo_distance:geo_distance};var dataParsers={integer:function(e){return parseFloat(e,10)},"float":function(e){return parseFloat(e,10)},number:function(e){return parseFloat(e,10)},string:function(e){return e.toString()},date:function(e){return moment(e).valueOf()},datetime:function(e){return new Date(e).valueOf()}};var keyedFields={};_.each(self.fields,function(field){keyedFields[field.id]=field});function getDataParser(filter){var fieldType=keyedFields[filter.field].type||"string";return dataParsers[fieldType]}return _.filter(results,function(record){var passes=_.map(filters,function(filter){return filterFunctions[filter.type](record,filter)});return _.all(passes,_.identity)});function term(record,filter){var parse=getDataParser(filter);var value=parse(record[filter.field]);var term=parse(filter.term);return value===term}function terms(record,filter){var parse=getDataParser(filter);var value=parse(record[filter.field]);var terms=parse(filter.terms).split(",");return _.indexOf(terms,value)>=0}function range(record,filter){var fromnull=_.isUndefined(filter.from)||filter.from===null||filter.from==="";var tonull=_.isUndefined(filter.to)||filter.to===null||filter.to==="";var parse=getDataParser(filter);var value=parse(record[filter.field]);var from=parse(fromnull?"":filter.from);var to=parse(tonull?"":filter.to);if((!fromnull||!tonull)&&value===""){return false}return(fromnull||value>=from)&&(tonull||value<=to)}function geo_distance(){}};this._applyFreeTextQuery=function(results,queryObj){if(queryObj.q){var terms=queryObj.q.split(" ");var patterns=_.map(terms,function(term){return new RegExp(term.toLowerCase())});results=_.filter(results,function(rawdoc){var matches=true;_.each(patterns,function(pattern){var foundmatch=false;_.each(self.fields,function(field){var value=rawdoc[field.id];if(value!==null&&value!==undefined){value=value.toString()}else{value=""}foundmatch=foundmatch||pattern.test(value.toLowerCase())});matches=matches&&foundmatch});return matches})}return results};this.computeFacets=function(records,queryObj){var facetResults={};if(!queryObj.facets){return facetResults}_.each(queryObj.facets,function(query,facetId){facetResults[facetId]=new recline.Model.Facet({id:facetId}).toJSON();facetResults[facetId].termsall={}});_.each(records,function(doc){_.each(queryObj.facets,function(query,facetId){var fieldId=query.terms.field;var val=doc[fieldId];var tmp=facetResults[facetId];if(val){tmp.termsall[val]=tmp.termsall[val]?tmp.termsall[val]+1:1}else{tmp.missing=tmp.missing+1}})});_.each(queryObj.facets,function(query,facetId){var tmp=facetResults[facetId];var terms=_.map(tmp.termsall,function(count,term){return{term:term,count:count}});tmp.terms=_.sortBy(terms,function(item){return-item.count});tmp.terms=tmp.terms.slice(0,10)});return facetResults}}})(this.recline.Backend.Memory); \ No newline at end of file diff --git a/dist/recline.js b/dist/recline.js index 76334781..0b8d2207 100644 --- a/dist/recline.js +++ b/dist/recline.js @@ -1064,7 +1064,7 @@ my.Flot = Backbone.View.extend({ template: ' \
\
\ -
\ +
\

Hey there!

\

There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.

\

Please tell us by using the menu on the right and a graph will automatically appear.

\ @@ -1405,30 +1405,34 @@ my.FlotControls = Backbone.View.extend({
\
\
\ - \ -
\ - \ +
\ + \ +
\ + \ +
\
\ - \ -
\ - \ +
\ + \ +
\ + \ +
\
\
\
\
\
\ - \ + \
\
+ + + + +
  • +
    + +
    + +
    +

    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() {
+  var 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/docs/src/view.slickgrid.html b/docs/src/view.slickgrid.html index 110e8ea5..80bb6006 100644 --- a/docs/src/view.slickgrid.html +++ b/docs/src/view.slickgrid.html @@ -1,48 +1,160 @@ - view.slickgrid.js

    view.slickgrid.js 

    /*jshint multistr:true */
+
 
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
-
-(function($, my) {
-  "use strict";

    Add new grid Control to display a new row add menu bouton -It display a simple side-bar menu ,for user to add new -row to grid 

      my.GridControl= Backbone.View.extend({
-    className: "recline-row-add",

    Template for row edit menu , change it if you don't love

    		 
        template: '<h1><a href="#" class="recline-row-add btn">Add row</a></h1>',
+
+
+  view.slickgrid.js
+  
+  
+  
+
+
+  
    
+    
    
     
-    initialize: function(options){
-      var self = this;
-      _.bindAll(this, 'render');
-      this.state = new recline.Model.ObjectState();
-      this.render();
-    },
+      
+    
+    
      
+        
+          
    • 
+              
      
+                  
      view.slickgrid.js
      
+              
      
+          
      • 
+        
+        
+        
+        
    • 
+            
      
+              
+              
      
+                
+              
      
+              
+            
      
+            
+            
      /*jshint multistr:true */
 
-    render: function() {
-      var self = this;
-      this.$el.html(this.template)
-    },
-
-    events : {
-      "click .recline-row-add" : "addNewRow"
-    },
-
-    addNewRow : function(e){
-      e.preventDefault()
-      this.state.trigger("change")
-   }
- }
- );

    SlickGrid Dataset View

    +this.recline = this.recline || {}; +this.recline.View = this.recline.View || {}; +(function($, my) { + "use strict"; + + + + +
  • +
    + +
    + +
    +

    SlickGrid Dataset View

    Provides a tabular view on a Dataset, based on SlickGrid.

    - -

    https://github.com/mleibman/SlickGrid

    - +

    https://github.com/mleibman/SlickGrid

    Initialize it with a recline.Model.Dataset.

    -

    Additional options to drive SlickGrid grid can be given through state. -The following keys allow for customization: -* gridOptions: to add options at grid level -* columnsEditor: to add editor for editable columns

    - +The following keys allow for customization:

    +
      +
    • gridOptions: to add options at grid level
      • +
    • columnsEditor: to add editor for editable columns
      • +

    For example: var grid = new recline.View.SlickGrid({ model: dataset, @@ -50,377 +162,953 @@ The following keys allow for customization: state: { gridOptions: { editable: true, - enableAddRows: true - ... + enableAddRow: true + // Enable support for row delete + enabledDelRow: true, + // Enable support for row Reorder + enableReOrderRow:true, + … }, columnsEditor: [ - {column: 'date', editor: Slick.Editors.Date }, - {column: 'title', editor: Slick.Editors.Text} + {column: ‘date’, editor: Slick.Editors.Date }, + {column: ‘title’, editor: Slick.Editors.Text} ] } }); -// NB: you need an explicit height on the element for slickgrid to work

    		•  
    my.SlickGrid = Backbone.View.extend({
-  initialize: function(modelEtc) {
-    var self = this;
-    this.$el.addClass('recline-slickgrid');
-

    Template for row delete menu , change it if you don't love 

        this.templates = {
-   "deleterow" : '<a href="#" class="recline-row-delete btn">X</a>'
-     }
-    _.bindAll(this, 'render', 'onRecordChanged');
-    this.listenTo(this.model.records, 'add remove reset', this.render);
-    this.listenTo(this.model.records, 'change', this.onRecordChanged);
-    var state = _.extend({
-        hiddenColumns: [],
-        columnsOrder: [],
-        columnsSort: {},
-        columnsWidth: [],
-        columnsEditor: [],
-        options: {},
-        fitColumns: false
-      }, modelEtc.state
+// NB: you need an explicit height on the element for slickgrid to work
    
 
-    );
-    this.state = new recline.Model.ObjectState(state);
-    this._slickHandler = new Slick.EventHandler();

    add menu for new row , check if enableAddRow is set to true or not set

    		 
        if(this.state.get("gridOptions") 
-  && this.state.get("gridOptions").enabledAddRow != undefined 
-      && this.state.get("gridOptions").enabledAddRow == true ){
-      this.editor    =  new  my.GridControl()
-      this.elSidebar =  this.editor.$el
-  this.listenTo(this.editor.state, 'change', function(){   
-    this.model.records.add(new recline.Model.Record())
-      });
-    }
-  },
-  onRecordChanged: function(record) {

    Ignore if the grid is not yet drawn

    		 
        if (!this.grid) {
-      return;
-    }

    Let's find the row corresponding to the index

    		 
        var row_index = this.grid.getData().getModelRow( record );
-    this.grid.invalidateRow(row_index);
-    this.grid.getData().updateItem(record, row_index);
-    this.grid.render();
-  },
-   render: function() {
-    var self = this;
-    var options = _.extend({
-      enableCellNavigation: true,
-      enableColumnReorder: true,
-      explicitInitialization: true,
-      syncColumnCellResize: true,
-      forceFitColumns: this.state.get('fitColumns')
-    }, self.state.get('gridOptions'));

    We need all columns, even the hidden ones, to show on the column picker

    		 
        var columns = [];

    custom formatter as default one escapes html -plus this way we distinguish between rendering/formatting and computed value (so e.g. sort still works ...) -row = row index, cell = cell index, value = value, columnDef = column definition, dataContext = full row values

    		 
        var formatter = function(row, cell, value, columnDef, dataContext) {
-      if(columnDef.id == "del"){
-        return self.templates.deleterow 
-  }
-  var field = self.model.fields.get(columnDef.id);
-      if (field.renderer) {
-        return  field.renderer(value, field, dataContext);
-      }else {
-        return  value 
-      }
-    };

    we need to be sure that user is entering a valid input , for exemple if -field is date type and field.format ='YY-MM-DD', we should be sure that -user enter a correct value 

        var validator = function(field){
-  return function(value){
-     if(field.type == "date" && isNaN(Date.parse(value))){
-        return {
-              valid: false,
-              msg: "A date is required, check field field-date-format"};
-     }else {
-          return {valid: true, msg :null } 
-    }
-  }
-    };

    Add row delete support , check if enableDelRow is set to true or not set

    		 
        if(this.state.get("gridOptions") 
-  && this.state.get("gridOptions").enabledDelRow != undefined 
-      && this.state.get("gridOptions").enabledDelRow == true ){
-    columns.push({
-        id: 'del',
-        name: 'del',
-        field: 'del',
-        sortable: true,
-        width: 80,
-        formatter: formatter,
-        validator:validator
-    })}
-    _.each(this.model.fields.toJSON(),function(field){
-      var column = {
-        id: field.id,
-        name: field.label,
-        field: field.id,
-        sortable: true,
-        minWidth: 80,
-        formatter: formatter,
-        validator:validator(field)
-      };
-      var widthInfo = _.find(self.state.get('columnsWidth'),function(c){return c.column === field.id;});
-      if (widthInfo){
-        column.width = widthInfo.width;
-      }
-      var editInfo = _.find(self.state.get('columnsEditor'),function(c){return c.column === field.id;});
-      if (editInfo){
-        column.editor = editInfo.editor;
-      } else {

    guess editor type

    		 
            var typeToEditorMap = {
-          'string': Slick.Editors.LongText,
-          'integer': Slick.Editors.IntegerEditor,
-          'number': Slick.Editors.Text,

    TODO: need a way to ensure we format date in the right way -Plus what if dates are in distant past or future ... (?) -'date': Slick.Editors.DateEditor,

    		 
              'date': Slick.Editors.Text,
-          'boolean': Slick.Editors.YesNoSelectEditor

    TODO: (?) percent ...

    		 
            };
-        if (field.type in typeToEditorMap) {
-          column.editor = typeToEditorMap[field.type]
-        } else {
-          column.editor = Slick.Editors.LongText;
-        }
-      }
-      columns.push(column);
-    });

    Restrict the visible columns

    		 
        var visibleColumns = _.filter(columns, function(column) {
-      return _.indexOf(self.state.get('hiddenColumns'), column.id) === -1;
-    });

    Order them if there is ordering info on the state

    		 
        if (this.state.get('columnsOrder') && this.state.get('columnsOrder').length > 0) {
-      visibleColumns = visibleColumns.sort(function(a,b){
-        return _.indexOf(self.state.get('columnsOrder'),a.id) > _.indexOf(self.state.get('columnsOrder'),b.id) ? 1 : -1;
-      });
-      columns = columns.sort(function(a,b){
-        return _.indexOf(self.state.get('columnsOrder'),a.id) > _.indexOf(self.state.get('columnsOrder'),b.id) ? 1 : -1;
-      });
-    }

    Move hidden columns to the end, so they appear at the bottom of the -column picker

    		 
        var tempHiddenColumns = [];
-    for (var i = columns.length -1; i >= 0; i--){
-      if (_.indexOf(_.pluck(visibleColumns,'id'),columns[i].id) === -1){
-        tempHiddenColumns.push(columns.splice(i,1)[0]);
-      }
-    }
-    columns = columns.concat(tempHiddenColumns);

    Transform a model object into a row

    		 
        function toRow(m) {
-      var row = {};
-      self.model.fields.each(function(field){
-    var render = "";

    when adding row from slickgrid the field value is undefined

    		 
        if(!_.isUndefined(m.getFieldValueUnrendered(field))){
-       render =m.getFieldValueUnrendered(field)
-    }
-          row[field.id] = render
-      });
-      return row;
-    }
+
    + + 
    my.SlickGrid = Backbone.View.extend({
+  initialize: function(modelEtc) {
+    var self = this;
+    this.$el.addClass('recline-slickgrid');
    + + + + +
  • +
    + +
    + +
    +

    Template for row delete menu , change it if you don’t love

    - function RowSet() { - var models = []; - var rows = []; +
    + + 
        this.templates = {
+      "deleterow" : '<button href="#" class="recline-row-delete btn btn-default" title="Delete row">X</button>'
+    };
 
-      this.push = function(model, row) {
-        models.push(model);
-        rows.push(row);
-      };
+    _.bindAll(this, 'render', 'onRecordChanged');
+    this.listenTo(this.model.records, 'add remove reset', this.render);
+    this.listenTo(this.model.records, 'change', this.onRecordChanged);
+    var state = _.extend({
+        hiddenColumns: [],
+        columnsOrder: [],
+        columnsSort: {},
+        columnsWidth: [],
+        columnsEditor: [],
+        options: {},
+        fitColumns: false
+      }, modelEtc.state
 
-      this.getLength = function() {return rows.length; };
-      this.getItem = function(index) {return rows[index];};
-      this.getItemMetadata = function(index) {return {};};
-      this.getModel = function(index) {return models[index];};
-      this.getModelRow = function(m) {return _.indexOf(models, m);};
-      this.updateItem = function(m,i) {
-        rows[i] = toRow(m);
-        models[i] = m;
-      };
-     
-    }
+    );
+    this.state = new recline.Model.ObjectState(state);
+    this._slickHandler = new Slick.EventHandler();
    + +
    • + + +
  • +
    + +
    + +
    +

    add menu for new row , check if enableAddRow is set to true or not set

    - var data = new RowSet(); +
    + + 
        if(this.state.get("gridOptions") 
+  && this.state.get("gridOptions").enabledAddRow != undefined 
+      && this.state.get("gridOptions").enabledAddRow == true ){
+      this.editor    =  new  my.GridControl()
+      this.elSidebar =  this.editor.$el
+  this.listenTo(this.editor.state, 'change', function(){   
+    this.model.records.add(new recline.Model.Record())
+      });
+    }
+  },
 
-    this.model.records.each(function(doc){
-      data.push(doc, toRow(doc));
-    });
+  onRecordChanged: function(record) {
    + +
    • + + +
  • +
    + +
    + +
    +

    Ignore if the grid is not yet drawn

    - this.grid = new Slick.Grid(this.el, data, visibleColumns, options);
    		•

    Column sorting

    		 
        var sortInfo = this.model.queryState.get('sort');
-    if (sortInfo){
-      var column = sortInfo[0].field;
-      var sortAsc = sortInfo[0].order !== 'desc';
-      this.grid.setSortColumn(column, sortAsc);
-    }
+
    + + 
        if (!this.grid) {
+      return;
+    }
    + + + + +
  • +
    + +
    + +
    +

    Let’s find the row corresponding to the index

    - this._slickHandler.subscribe(this.grid.onSort, function(e, args){ - var order = (args.sortAsc) ? 'asc':'desc'; - var sort = [{ - field: args.sortCol.field, - order: order - }]; - self.model.query({sort: sort}); - }); +
    + + 
        var row_index = this.grid.getData().getModelRow( record );
+    this.grid.invalidateRow(row_index);
+    this.grid.getData().updateItem(record, row_index);
+    this.grid.render();
+  },
 
-    this._slickHandler.subscribe(this.grid.onColumnsReordered, function(e, args){
-      self.state.set({columnsOrder: _.pluck(self.grid.getColumns(),'id')});
-    });
+  render: function() {
+    var self = this;
+    var options = _.extend({
+      enableCellNavigation: true,
+      enableColumnReorder: true,
+      explicitInitialization: true,
+      syncColumnCellResize: true,
+      forceFitColumns: this.state.get('fitColumns')
+    }, self.state.get('gridOptions'));
    + +
    • + + +
  • +
    + +
    + +
    +

    We need all columns, even the hidden ones, to show on the column picker

    - this.grid.onColumnsResized.subscribe(function(e, args){ - var columns = args.grid.getColumns(); - var defaultColumnWidth = args.grid.getOptions().defaultColumnWidth; - var columnsWidth = []; - _.each(columns,function(column){ - if (column.width != defaultColumnWidth){ - columnsWidth.push({column:column.id,width:column.width}); - } - }); - self.state.set({columnsWidth:columnsWidth}); - }); +
    + + 
        var columns = [];
    + +
    • + + +
  • +
    + +
    + +
    +

    custom formatter as default one escapes html +plus this way we distinguish between rendering/formatting and computed value (so e.g. sort still works …) +row = row index, cell = cell index, value = value, columnDef = column definition, dataContext = full row values

    + +
    + + 
        var formatter = function(row, cell, value, columnDef, dataContext) {
+      if(columnDef.id == "del"){
+        return self.templates.deleterow 
+      }
+      var field = self.model.fields.get(columnDef.id);
+      if (field.renderer) {
+        return  field.renderer(value, field, dataContext);
+      } else {
+        return  value 
+      }
+    };
    + +
    • + + +
  • +
    + +
    + +
    +

    we need to be sure that user is entering a valid input , for exemple if +field is date type and field.format =’YY-MM-DD’, we should be sure that +user enter a correct value

    + +
    + + 
        var validator = function(field) {
+      return function(value){
+        if (field.type == "date" && isNaN(Date.parse(value))){
+          return {
+            valid: false,
+            msg: "A date is required, check field field-date-format"
+          };
+        } else {
+          return {valid: true, msg :null } 
+        }
+      }
+    };
    + +
    • + + +
  • +
    + +
    + +
    +

    Add column for row reorder support

    + +
    + + 
        if (this.state.get("gridOptions") && this.state.get("gridOptions").enableReOrderRow == true) {
+      columns.push({
+        id: "#",
+        name: "",
+        width: 22,
+        behavior: "selectAndMove",
+        selectable: false,
+        resizable: false,
+        cssClass: "recline-cell-reorder"
+      })
+    }
    + +
    • + + +
  • +
    + +
    + +
    +

    Add column for row delete support

    + +
    + + 
        if (this.state.get("gridOptions") && this.state.get("gridOptions").enabledDelRow == true) {
+      columns.push({
+        id: 'del',
+        name: '',
+        field: 'del',
+        sortable: true,
+        width: 38,
+        formatter: formatter,
+        validator:validator
+      })
+    }
+
+    function sanitizeFieldName(name) {
+      var sanitized = $(name).text();
+      return (name !== sanitized && sanitized !== '') ? sanitized : name;
+    }
+
+    _.each(this.model.fields.toJSON(),function(field){
+      var column = {
+        id: field.id,
+        name: sanitizeFieldName(field.label),
+        field: field.id,
+        sortable: true,
+        minWidth: 80,
+        formatter: formatter,
+        validator:validator(field)
+      };
+      var widthInfo = _.find(self.state.get('columnsWidth'),function(c){return c.column === field.id;});
+      if (widthInfo){
+        column.width = widthInfo.width;
+      }
+      var editInfo = _.find(self.state.get('columnsEditor'),function(c){return c.column === field.id;});
+      if (editInfo){
+        column.editor = editInfo.editor;
+      } else {
    + +
    • + + +
  • +
    + +
    + +
    +

    guess editor type

    + +
    + + 
            var typeToEditorMap = {
+          'string': Slick.Editors.LongText,
+          'integer': Slick.Editors.IntegerEditor,
+          'number': Slick.Editors.Text,
    + +
    • + + +
  • +
    + +
    + +
    +

    TODO: need a way to ensure we format date in the right way +Plus what if dates are in distant past or future … (?) +‘date’: Slick.Editors.DateEditor,

    + +
    + + 
              'date': Slick.Editors.Text,
+          'boolean': Slick.Editors.YesNoSelectEditor
    + +
    • + + +
  • +
    + +
    + +
    +

    TODO: (?) percent …

    + +
    + + 
            };
+        if (field.type in typeToEditorMap) {
+          column.editor = typeToEditorMap[field.type]
+        } else {
+          column.editor = Slick.Editors.LongText;
+        }
+      }
+      columns.push(column);
+    });
    + +
    • + + +
  • +
    + +
    + +
    +

    Restrict the visible columns

    + +
    + + 
        var visibleColumns = _.filter(columns, function(column) {
+      return _.indexOf(self.state.get('hiddenColumns'), column.id) === -1;
+    });
    + +
    • + + +
  • +
    + +
    + +
    +

    Order them if there is ordering info on the state

    + +
    + + 
        if (this.state.get('columnsOrder') && this.state.get('columnsOrder').length > 0) {
+      visibleColumns = visibleColumns.sort(function(a,b){
+        return _.indexOf(self.state.get('columnsOrder'),a.id) > _.indexOf(self.state.get('columnsOrder'),b.id) ? 1 : -1;
+      });
+      columns = columns.sort(function(a,b){
+        return _.indexOf(self.state.get('columnsOrder'),a.id) > _.indexOf(self.state.get('columnsOrder'),b.id) ? 1 : -1;
+      });
+    }
    + +
    • + + +
  • +
    + +
    + +
    +

    Move hidden columns to the end, so they appear at the bottom of the +column picker

    + +
    + + 
        var tempHiddenColumns = [];
+    for (var i = columns.length -1; i >= 0; i--){
+      if (_.indexOf(_.pluck(visibleColumns,'id'),columns[i].id) === -1){
+        tempHiddenColumns.push(columns.splice(i,1)[0]);
+      }
+    }
+    columns = columns.concat(tempHiddenColumns);
    + +
    • + + +
  • +
    + +
    + +
    +

    Transform a model object into a row

    + +
    + + 
        function toRow(m) {
+      var row = {};
+      self.model.fields.each(function(field) {
+        var render = "";
    + +
    • + + +
  • +
    + +
    + +
    +

    when adding row from slickgrid the field value is undefined

    + +
    + + 
            if(!_.isUndefined(m.getFieldValueUnrendered(field))){
+           render =m.getFieldValueUnrendered(field)
+        }
+        row[field.id] = render
+      });
+      return row;
+    }
+
+    function RowSet() {
+      var models = [];
+      var rows = [];
+
+      this.push = function(model, row) {
+        models.push(model);
+        rows.push(row);
+      };
+
+      this.getLength = function() {return rows.length; };
+      this.getItem = function(index) {return rows[index];};
+      this.getItemMetadata = function(index) {return {};};
+      this.getModel = function(index) {return models[index];};
+      this.getModelRow = function(m) {return _.indexOf(models, m);};
+      this.updateItem = function(m,i) {
+        rows[i] = toRow(m);
+        models[i] = m;
+      };
+    }
+
+    var data = new RowSet();
+
+    this.model.records.each(function(doc){
+      data.push(doc, toRow(doc));
+    });
+
+    this.grid = new Slick.Grid(this.el, data, visibleColumns, options);
    + +
    • + + +
  • +
    + +
    + +
    +

    Column sorting

    + +
    + + 
        var sortInfo = this.model.queryState.get('sort');
+    if (sortInfo){
+      var column = sortInfo[0].field;
+      var sortAsc = sortInfo[0].order !== 'desc';
+      this.grid.setSortColumn(column, sortAsc);
+    }
+
+    if (this.state.get("gridOptions") && this.state.get("gridOptions").enableReOrderRow) {
+      this._setupRowReordering();
+    }
     
-    this._slickHandler.subscribe(this.grid.onCellChange, function (e, args) {
    		•

    We need to change the model associated value

    		 
          var grid = args.grid;
-      var model = data.getModel(args.row);
-      var field = grid.getColumns()[args.cell].id;
-      var v = {};
-      v[field] = args.item[field];
-      model.set(v);
-    });  
-    this._slickHandler.subscribe(this.grid.onClick,function(e, args){
-      if (args.cell == 0 && self.state.get("gridOptions").enabledDelRow == true){

    We need to delete the associated model

    		 
        var model = data.getModel(args.row);
-        model.destroy()
-   }
-     }) ;
+    this._slickHandler.subscribe(this.grid.onSort, function(e, args){
+      var order = (args.sortAsc) ? 'asc':'desc';
+      var sort = [{
+        field: args.sortCol.field,
+        order: order
+      }];
+      self.model.query({sort: sort});
+    });
     
-     var columnpicker = new Slick.Controls.ColumnPicker(columns, this.grid,
-                                                       _.extend(options,{state:this.state}));
+    this._slickHandler.subscribe(this.grid.onColumnsReordered, function(e, args){
+      self.state.set({columnsOrder: _.pluck(self.grid.getColumns(),'id')});
+    });
+    
+    this.grid.onColumnsResized.subscribe(function(e, args){
+        var columns = args.grid.getColumns();
+        var defaultColumnWidth = args.grid.getOptions().defaultColumnWidth;
+        var columnsWidth = [];
+        _.each(columns,function(column){
+          if (column.width != defaultColumnWidth){
+            columnsWidth.push({column:column.id,width:column.width});
+          }
+        });
+        self.state.set({columnsWidth:columnsWidth});
+    });
+    
+    this._slickHandler.subscribe(this.grid.onCellChange, function (e, args) {
    + + + + +
  • +
    + +
    + +
    +

    We need to change the model associated value

    - if (self.visible){ - self.grid.init(); - self.rendered = true; - } else {
    		•

    Defer rendering until the view is visible

    		 
          self.rendered = false;
-    }
+
    + + 
          var grid = args.grid;
+      var model = data.getModel(args.row);
+      var field = grid.getColumns()[args.cell].id;
+      var v = {};
+      v[field] = args.item[field];
+      model.set(v);
+    });  
+    this._slickHandler.subscribe(this.grid.onClick,function(e, args){
    + + + + +
  • +
    + +
    + +
    +

    try catch , because this fail in qunit , but no +error on browser.

    - return this; - }, +
    + + 
          try{e.preventDefault()}catch(e){}
    + +
    • + + +
  • +
    + +
    + +
    +

    The cell of grid that handle row delete is The first cell (0) if +The grid ReOrder is not present ie enableReOrderRow == false +else it is The the second cell (1) , because The 0 is now cell +that handle row Reoder.

    - remove: function () { - this._slickHandler.unsubscribeAll(); - Backbone.View.prototype.remove.apply(this, arguments); - }, +
    + + 
          var cell =0
+      if(self.state.get("gridOptions") 
+  && self.state.get("gridOptions").enableReOrderRow != undefined 
+        && self.state.get("gridOptions").enableReOrderRow == true ){
+        cell =1
+      }
+      if (args.cell == cell && self.state.get("gridOptions").enabledDelRow == true){
    + +
    • + + +
  • +
    + +
    + +
    +

    We need to delete the associated model

    - show: function() {
    		•

    If the div is hidden, SlickGrid will calculate wrongly some -sizes so we must render it explicitly when the view is visible

    		 
        if (!this.rendered){
-      if (!this.grid){
-        this.render();
-      }
-      this.grid.init();
-      this.rendered = true;
-    }
-    this.visible = true;
-  },
+
    + + 
              var model = data.getModel(args.row);
+          model.destroy()
+        }
+    }) ;
+    var columnpicker = new Slick.Controls.ColumnPicker(columns, this.grid,
+                                                       _.extend(options,{state:this.state}));
+    if (self.visible){
+      self.grid.init();
+      self.rendered = true;
+    } else {
    + + + + +
  • +
    + +
    + +
    +

    Defer rendering until the view is visible

    - hide: function() { - this.visible = false; - } -}); +
    + + 
          self.rendered = false;
+    }
+    return this;
+  },
    + +
    • + + +
  • +
    + +
    + +
    +

    Row reordering support based on +https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example9-row-reordering.html

    -})(jQuery, recline.View); +
    + + 
      _setupRowReordering: function() {
+    var self = this;
+    self.grid.setSelectionModel(new Slick.RowSelectionModel());
 
-/*
-* Context menu for the column picker, adapted from
-* http://mleibman.github.com/SlickGrid/examples/example-grouping
-*
-*/
-(function ($) {
-  function SlickColumnPicker(columns, grid, options) {
-    var $menu;
-    var columnCheckboxes;
+    var moveRowsPlugin = new Slick.RowMoveManager({
+      cancelEditOnDrag: true
+    });
 
-    var defaults = {
-      fadeSpeed:250
-    };
+    moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) {
+      for (var i = 0; i < data.rows.length; i++) {
    + +
    • + + +
  • +
    + +
    + +
    +

    no point in moving before or after itself

    - function init() { - grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu); - options = $.extend({}, defaults, options); +
    + + 
            if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) {
+          e.stopPropagation();
+          return false;
+        }
+      }
+      return true;
+    });
+    
+    moveRowsPlugin.onMoveRows.subscribe(function (e, args) {
+      var extractedRows = [], left, right;
+      var rows = args.rows;
+      var insertBefore = args.insertBefore;
 
-      $menu = $('<ul class="dropdown-menu slick-contextmenu" style="display:none;position:absolute;z-index:20;" />').appendTo(document.body);
+      var data = self.model.records.toJSON()      
+      left = data.slice(0, insertBefore);
+      right= data.slice(insertBefore, data.length);
+      
+      rows.sort(function(a,b) { return a-b; });
 
-      $menu.bind('mouseleave', function (e) {
-        $(this).fadeOut(options.fadeSpeed);
-      });
-      $menu.bind('click', updateColumn);
+      for (var i = 0; i < rows.length; i++) {
+          extractedRows.push(data[rows[i]]);
+      }
 
-    }
+      rows.reverse();
 
-    function handleHeaderContextMenu(e, args) {
-      e.preventDefault();
-      $menu.empty();
-      columnCheckboxes = [];
+      for (var i = 0; i < rows.length; i++) {
+        var row = rows[i];
+        if (row < insertBefore) {
+          left.splice(row, 1);
+        } else {
+          right.splice(row - insertBefore, 1);
+        }
+      }
 
-      var $li, $input;
-      for (var i = 0; i < columns.length; i++) {
-        $li = $('<li />').appendTo($menu);
-        $input = $('<input type="checkbox" />').data('column-id', columns[i].id).attr('id','slick-column-vis-'+columns[i].id);
-        columnCheckboxes.push($input);
+      data = left.concat(extractedRows.concat(right));
+      var selectedRows = [];
+      for (var i = 0; i < rows.length; i++)
+        selectedRows.push(left.length + i);      
 
-        if (grid.getColumnIndex(columns[i].id) !== null) {
-          $input.attr('checked', 'checked');
-        }
-        $input.appendTo($li);
-        $('<label />')
-            .text(columns[i].name)
-            .attr('for','slick-column-vis-'+columns[i].id)
-            .appendTo($li);
-      }
-      $('<li/>').addClass('divider').appendTo($menu);
-      $li = $('<li />').data('option', 'autoresize').appendTo($menu);
-      $input = $('<input type="checkbox" />').data('option', 'autoresize').attr('id','slick-option-autoresize');
-      $input.appendTo($li);
-      $('<label />')
-          .text('Force fit columns')
-          .attr('for','slick-option-autoresize')
-          .appendTo($li);
-      if (grid.getOptions().forceFitColumns) {
-        $input.attr('checked', 'checked');
-      }
+      self.model.records.reset(data)
+      
+    });
    + +
    • + + +
  • +
    + +
    + +
    +

    register The plugin to handle row Reorder

    - $menu.css('top', e.pageY - 10) - .css('left', e.pageX - 10) - .fadeIn(options.fadeSpeed); - } +
    + + 
        if(this.state.get("gridOptions") && this.state.get("gridOptions").enableReOrderRow) {
+      self.grid.registerPlugin(moveRowsPlugin);
+    }
+  },
 
-    function updateColumn(e) {
-      var checkbox;
+  remove: function () {
+    this._slickHandler.unsubscribeAll();
+    Backbone.View.prototype.remove.apply(this, arguments);
+  },
 
-      if ($(e.target).data('option') === 'autoresize') {
-        var checked;
-        if ($(e.target).is('li')){
-            checkbox = $(e.target).find('input').first();
-            checked = !checkbox.is(':checked');
-            checkbox.attr('checked',checked);
-        } else {
-          checked = e.target.checked;
-        }
+  show: function() {
    + +
    • + + +
  • +
    + +
    + +
    +

    If the div is hidden, SlickGrid will calculate wrongly some +sizes so we must render it explicitly when the view is visible

    - if (checked) { - grid.setOptions({forceFitColumns:true}); - grid.autosizeColumns(); - } else { - grid.setOptions({forceFitColumns:false}); - } - options.state.set({fitColumns:checked}); - return; - } +
    + + 
        if (!this.rendered){
+      if (!this.grid){
+        this.render();
+      }
+      this.grid.init();
+      this.rendered = true;
+    }
+    this.visible = true;
+  },
 
-      if (($(e.target).is('li') && !$(e.target).hasClass('divider')) ||
-            $(e.target).is('input')) {
-        if ($(e.target).is('li')){
-            checkbox = $(e.target).find('input').first();
-            checkbox.attr('checked',!checkbox.is(':checked'));
-        }
-        var visibleColumns = [];
-        var hiddenColumnsIds = [];
-        $.each(columnCheckboxes, function (i, e) {
-          if ($(this).is(':checked')) {
-            visibleColumns.push(columns[i]);
-          } else {
-            hiddenColumnsIds.push(columns[i].id);
-          }
-        });
+  hide: function() {
+    this.visible = false;
+  }
+});
    + +
    • + + +
  • +
    + +
    + +
    +

    Add new grid Control to display a new row add menu bouton +It display a simple side-bar menu ,for user to add new +row to grid

    - if (!visibleColumns.length) { - $(e.target).attr('checked', 'checked'); - return; - } +
    + + 
    my.GridControl= Backbone.View.extend({
+  className: "recline-row-add",
    + +
    • + + +
  • +
    + +
    + +
    +

    Template for row edit menu , change it if you don’t love

    - grid.setColumns(visibleColumns); - options.state.set({hiddenColumns:hiddenColumnsIds}); - } - } - init(); - }
    		•

    Slick.Controls.ColumnPicker

    		 
      $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
-})(jQuery);
+
    + + 
      template: '<h1><button href="#" class="recline-row-add btn btn-default">Add row</button></h1>',
+  
+  initialize: function(options){
+    var self = this;
+    _.bindAll(this, 'render');
+    this.state = new recline.Model.ObjectState();
+    this.render();
+  },
 
-
    \ No newline at end of file + render: function() { + var self = this; + this.$el.html(this.template) + }, + + events : { + "click .recline-row-add" : "addNewRow" + }, + + addNewRow : function(e){ + e.preventDefault() + this.state.trigger("change") + } +}); + +})(jQuery, recline.View); + +/* +* Context menu for the column picker, adapted from +* http://mleibman.github.com/SlickGrid/examples/example-grouping +* +*/ +(function ($) { + function SlickColumnPicker(columns, grid, options) { + var $menu; + var columnCheckboxes; + + var defaults = { + fadeSpeed:250 + }; + + function init() { + grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu); + options = $.extend({}, defaults, options); + + $menu = $('<ul class="dropdown-menu slick-contextmenu" style="display:none;position:absolute;z-index:20;" />').appendTo(document.body); + + $menu.bind('mouseleave', function (e) { + $(this).fadeOut(options.fadeSpeed); + }); + $menu.bind('click', updateColumn); + + } + + function handleHeaderContextMenu(e, args) { + e.preventDefault(); + $menu.empty(); + columnCheckboxes = []; + + var $li, $input; + for (var i = 0; i < columns.length; i++) { + $li = $('<li />').appendTo($menu); + $input = $('<input type="checkbox" />').data('column-id', columns[i].id).attr('id','slick-column-vis-'+columns[i].id); + columnCheckboxes.push($input); + + if (grid.getColumnIndex(columns[i].id) !== null) { + $input.attr('checked', 'checked'); + } + $input.appendTo($li); + $('<label />') + .text(columns[i].name) + .attr('for','slick-column-vis-'+columns[i].id) + .appendTo($li); + } + $('<li/>').addClass('divider').appendTo($menu); + $li = $('<li />').data('option', 'autoresize').appendTo($menu); + $input = $('<input type="checkbox" />').data('option', 'autoresize').attr('id','slick-option-autoresize'); + $input.appendTo($li); + $('<label />') + .text('Force fit columns') + .attr('for','slick-option-autoresize') + .appendTo($li); + if (grid.getOptions().forceFitColumns) { + $input.attr('checked', 'checked'); + } + + $menu.css('top', e.pageY - 10) + .css('left', e.pageX - 10) + .fadeIn(options.fadeSpeed); + } + + function updateColumn(e) { + var checkbox; + + if ($(e.target).data('option') === 'autoresize') { + var checked; + if ($(e.target).is('li')){ + checkbox = $(e.target).find('input').first(); + checked = !checkbox.is(':checked'); + checkbox.attr('checked',checked); + } else { + checked = e.target.checked; + } + + if (checked) { + grid.setOptions({forceFitColumns:true}); + grid.autosizeColumns(); + } else { + grid.setOptions({forceFitColumns:false}); + } + options.state.set({fitColumns:checked}); + return; + } + + if (($(e.target).is('li') && !$(e.target).hasClass('divider')) || + $(e.target).is('input')) { + if ($(e.target).is('li')){ + checkbox = $(e.target).find('input').first(); + checkbox.attr('checked',!checkbox.is(':checked')); + } + var visibleColumns = []; + var hiddenColumnsIds = []; + $.each(columnCheckboxes, function (i, e) { + if ($(this).is(':checked')) { + visibleColumns.push(columns[i]); + } else { + hiddenColumnsIds.push(columns[i].id); + } + }); + + if (!visibleColumns.length) { + $(e.target).attr('checked', 'checked'); + return; + } + + grid.setColumns(visibleColumns); + options.state.set({hiddenColumns:hiddenColumnsIds}); + } + } + init(); + }
    + + + + +
  • +
    + +
    + +
    +

    Slick.Controls.ColumnPicker

    + +
    + + 
      $.extend(true, window, {
+    Slick: {
+      Controls: {
+        ColumnPicker: SlickColumnPicker
+      }
+    }
+  });
+
+})(jQuery);
    + +
    • + + +
    + + diff --git a/docs/src/view.timeline.html b/docs/src/view.timeline.html index f86f6c45..5a7551f8 100644 --- a/docs/src/view.timeline.html +++ b/docs/src/view.timeline.html @@ -1,162 +1,446 @@ - view.timeline.js

    view.timeline.js 

    /*jshint multistr:true */
+
 
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
+
+
+  view.timeline.js
+  
+  
+  
+
+
+

    turn off unnecessary logging from VMM Timeline

    		 
    if (typeof VMM !== 'undefined') {
-  VMM.debug = false;
-}

    Timeline

    +this.recline = this.recline || {}; +this.recline.View = this.recline.View || {}; -

    Timeline view using http://timeline.verite.co/

    		 
    my.Timeline = Backbone.View.extend({
-  template: ' \
-    <div class="recline-timeline"> \
-      <div id="vmm-timeline-id"></div> \
-    </div> \
-  ',

    These are the default (case-insensitive) names of field that are used if found. -If not found, the user will need to define these fields on initialization

    		 
      startFieldNames: ['date','startdate', 'start', 'start-date'],
-  endFieldNames: ['end','endDate'],
-  elementId: '#vmm-timeline-id',
+(function($, my) {
+  "use strict";
    + + + + +
  • +
    + +
    + +
    +

    turn off unnecessary logging from VMM Timeline

    - initialize: function(options) { - var self = this; - this.timeline = new VMM.Timeline(this.elementId); - this._timelineIsInitialized = false; - this.listenTo(this.model.fields, 'reset', function() { - self._setupTemporalField(); - }); - this.listenTo(this.model.records, 'all', function() { - self.reloadData(); - }); - var stateData = _.extend({ - startField: null, - endField: null,
    		•

    by default timelinejs (and browsers) will parse ambiguous dates in US format (mm/dd/yyyy) -set to true to interpret dd/dd/dddd as dd/mm/yyyy

    		 
            nonUSDates: false,
-        timelineJSOptions: {}
-      },
-      options.state
-    );
-    this.state = new recline.Model.ObjectState(stateData);
-    this._setupTemporalField();
-  },
+
    + + 
    if (typeof VMM !== 'undefined') {
+  VMM.debug = false;
+}
    + + + + +
  • +
    + +
    + +
    +

    Timeline

    +

    Timeline view using http://timeline.verite.co/

    - render: function() { - var tmplData = {}; - var htmls = Mustache.render(this.template, tmplData); - this.$el.html(htmls);
    		•

    can only call _initTimeline once view in DOM as Timeline uses $ -internally to look up element

    		 
        if ($(this.elementId).length > 0) {
-      this._initTimeline();
-    }
-  },
+
    + + 
    my.Timeline = Backbone.View.extend({
+  template: ' \
+    <div class="recline-timeline"> \
+      <div id="vmm-timeline-id"></div> \
+    </div> \
+  ',
    + + + + +
  • +
    + +
    + +
    +

    These are the default (case-insensitive) names of field that are used if found. +If not found, the user will need to define these fields on initialization

    - show: function() {
    		•

    only call _initTimeline once view in DOM as Timeline uses $ internally to look up element

    		 
        if (this._timelineIsInitialized === false) {
-      this._initTimeline();
-    }
-  },
+
    + + 
      startFieldNames: ['date','startdate', 'start', 'start-date'],
+  endFieldNames: ['end','endDate'],
+  elementId: '#vmm-timeline-id',
 
-  _initTimeline: function() {
-    var data = this._timelineJSON();
-    var config = this.state.get("timelineJSOptions");
-    config.id = this.elementId;
-    this.timeline.init(config, data);
-    this._timelineIsInitialized = true
-  },
+  initialize: function(options) {
+    var self = this;
+    this.timeline = new VMM.Timeline(this.elementId);
+    this._timelineIsInitialized = false;
+    this.listenTo(this.model.fields, 'reset', function() {
+      self._setupTemporalField();
+    });
+    this.listenTo(this.model.records, 'all', function() {
+      self.reloadData();
+    });
+    var stateData = _.extend({
+        startField: null,
+        endField: null,
    + + + + +
  • +
    + +
    + +
    +

    by default timelinejs (and browsers) will parse ambiguous dates in US format (mm/dd/yyyy) +set to true to interpret dd/dd/dddd as dd/mm/yyyy

    - reloadData: function() { - if (this._timelineIsInitialized) { - var data = this._timelineJSON(); - this.timeline.reload(data); - } - },
    		•

    Convert record to JSON for timeline

    + + + 
            nonUSDates: false,
+        timelineJSOptions: {}
+      },
+      options.state
+    );
+    this.state = new recline.Model.ObjectState(stateData);
+    this._setupTemporalField();
+  },
 
-
    Designed to be overridden in client apps
                 
      convertRecord: function(record, fields) {
-    return this._convertRecord(record, fields);
-  },

    Internal method to generate a Timeline formatted entry

    		 
      _convertRecord: function(record, fields) {
-    var start = this._parseDate(record.get(this.state.get('startField')));
-    var end = this._parseDate(record.get(this.state.get('endField')));
-    if (start) {
-      var tlEntry = {
-        "startDate": start,
-        "endDate": end,
-        "headline": String(record.get('title') || ''),
-        "text": record.get('description') || record.summary()
-      };
-      return tlEntry;
-    } else {
-      return null;
-    }
-  },
+  render: function() {
+    var tmplData = {};
+    var htmls = Mustache.render(this.template, tmplData);
+    this.$el.html(htmls);
    + + + + +
  • +
    + +
    + +
    +

    can only call _initTimeline once view in DOM as Timeline uses $ +internally to look up element

    - _timelineJSON: function() { - var self = this; - var out = { - 'timeline': { - 'type': 'default', - 'headline': '', - 'date': [ - ] - } - }; - this.model.records.each(function(record) { - var newEntry = self.convertRecord(record, self.fields); - if (newEntry) { - out.timeline.date.push(newEntry); - } - });
    		•

    if no entries create a placeholder entry to prevent Timeline crashing with error

    		 
        if (out.timeline.date.length === 0) {
-      var tlEntry = {
-        "startDate": '2000,1,1',
-        "headline": 'No data to show!'
-      };
-      out.timeline.date.push(tlEntry);
-    }
-    return out;
-  },

    convert dates into a format TimelineJS will handle + + + 

        if ($(this.elementId).length > 0) {
+      this._initTimeline();
+    }
+  },
+
+  show: function() {
    + + + + +
  • +
    + +
    + +
    +

    only call _initTimeline once view in DOM as Timeline uses $ internally to look up element

    + +
    + + 
        if (this._timelineIsInitialized === false) {
+      this._initTimeline();
+    }
+  },
+
+  _initTimeline: function() {
+    var data = this._timelineJSON();
+    var config = this.state.get("timelineJSOptions");
+    config.id = this.elementId;
+    this.timeline.init(config, data);
+    this._timelineIsInitialized = true
+  },
+
+  reloadData: function() {
+    if (this._timelineIsInitialized) {
+      var data = this._timelineJSON();
+      this.timeline.reload(data);
+    }
+  },
    + +
    • + + +
  • +
    + +
    + +
    +

    Convert record to JSON for timeline

    +

    Designed to be overridden in client apps

    + +
    + + 
      convertRecord: function(record, fields) {
+    return this._convertRecord(record, fields);
+  },
    + +
    • + + +
  • +
    + +
    + +
    +

    Internal method to generate a Timeline formatted entry

    + +
    + + 
      _convertRecord: function(record, fields) {
+    var start = this._parseDate(record.get(this.state.get('startField')));
+    var end = this._parseDate(record.get(this.state.get('endField')));
+    if (start) {
+      var tlEntry = {
+        "startDate": start,
+        "endDate": end,
+        "headline": String(record.get('title') || ''),
+        "text": record.get('description') || record.summary(),
+        "tag": record.get('tags')
+      };
+      return tlEntry;
+    } else {
+      return null;
+    }
+  },
+
+  _timelineJSON: function() {
+    var self = this;
+    var out = {
+      'timeline': {
+        'type': 'default',
+        'headline': '',
+        'date': [
+        ]
+      }
+    };
+    this.model.records.each(function(record) {
+      var newEntry = self.convertRecord(record, self.fields);
+      if (newEntry) {
+        out.timeline.date.push(newEntry); 
+      }
+    });
    + +
    • + + +
  • +
    + +
    + +
    +

    if no entries create a placeholder entry to prevent Timeline crashing with error

    + +
    + + 
        if (out.timeline.date.length === 0) {
+      var tlEntry = {
+        "startDate": '2000,1,1',
+        "headline": 'No data to show!'
+      };
+      out.timeline.date.push(tlEntry);
+    }
+    return out;
+  },
    + +
    • + + +
  • +
    + +
    + +
    +

    convert dates into a format TimelineJS will handle TimelineJS does not document this at all so combo of read the code + trial and error Summary (AFAICt): Preferred: [-]yyyy[,mm,dd,hh,mm,ss] -Supported: mm/dd/yyyy

    		•  
      _parseDate: function(date) {
-    if (!date) {
-      return null;
-    }
-    var out = $.trim(date);
-    out = out.replace(/(\d)th/g, '$1');
-    out = out.replace(/(\d)st/g, '$1');
-    out = $.trim(out);
-    if (out.match(/\d\d\d\d-\d\d-\d\d(T.*)?/)) {
-      out = out.replace(/-/g, ',').replace('T', ',').replace(':',',');
-    }
-    if (out.match(/\d\d-\d\d-\d\d.*/)) {
-      out = out.replace(/-/g, '/');
-    }
-    if (this.state.get('nonUSDates')) {
-      var parts = out.match(/(\d\d)\/(\d\d)\/(\d\d.*)/);
-      if (parts) {
-        out = [parts[2], parts[1], parts[3]].join('/');
-      }
-    }
-    return out;
-  },
+Supported: mm/dd/yyyy
    
 
-  _setupTemporalField: function() {
-    this.state.set({
-      startField: this._checkField(this.startFieldNames),
-      endField: this._checkField(this.endFieldNames)
-    });
-  },
+
    + + 
      _parseDate: function(date) {
+    if (!date) {
+      return null;
+    }
+    var out = $.trim(date);
+    out = out.replace(/(\d)th/g, '$1');
+    out = out.replace(/(\d)st/g, '$1');
+    out = $.trim(out);
+    if (out.match(/\d\d\d\d-\d\d-\d\d(T.*)?/)) {
+      out = out.replace(/-/g, ',').replace('T', ',').replace(':',',');
+    }
+    if (out.match(/\d\d-\d\d-\d\d.*/)) {
+      out = out.replace(/-/g, '/');
+    }
+    if (this.state.get('nonUSDates')) {
+      var parts = out.match(/(\d\d)\/(\d\d)\/(\d\d.*)/);
+      if (parts) {
+        out = [parts[2], parts[1], parts[3]].join('/');
+      }
+    }
+    return out;
+  },
 
-  _checkField: function(possibleFieldNames) {
-    var modelFieldNames = this.model.fields.pluck('id');
-    for (var i = 0; i < possibleFieldNames.length; i++){
-      for (var j = 0; j < modelFieldNames.length; j++){
-        if (modelFieldNames[j].toLowerCase() == possibleFieldNames[i].toLowerCase())
-          return modelFieldNames[j];
-      }
-    }
-    return null;
-  }
-});
+  _setupTemporalField: function() {
+    this.state.set({
+      startField: this._checkField(this.startFieldNames),
+      endField: this._checkField(this.endFieldNames)
+    });
+  },
 
-})(jQuery, recline.View);
+  _checkField: function(possibleFieldNames) {
+    var modelFieldNames = this.model.fields.pluck('id');
+    for (var i = 0; i < possibleFieldNames.length; i++){
+      for (var j = 0; j < modelFieldNames.length; j++){
+        if (modelFieldNames[j].toLowerCase() == possibleFieldNames[i].toLowerCase())
+          return modelFieldNames[j];
+      }
+    }
+    return null;
+  }
+});
 
-
    \ No newline at end of file +})(jQuery, recline.View);
    + + + + +
    + + diff --git a/docs/src/widget.facetviewer.html b/docs/src/widget.facetviewer.html index ddc3ab72..d2523dc3 100644 --- a/docs/src/widget.facetviewer.html +++ b/docs/src/widget.facetviewer.html @@ -1,83 +1,259 @@ - widget.facetviewer.js

    widget.facetviewer.js 

    /*jshint multistr:true */
+
 
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
+
+
+  widget.facetviewer.js
+  
+  
+  
+
+
+

    FacetViewer

    +this.recline = this.recline || {}; +this.recline.View = this.recline.View || {}; +(function($, my) { + "use strict"; + + + + +
  • +
    + +
    + +
    +

    FacetViewer

    Widget for displaying facets

    -

    Usage:

    - -
     var viewer = new FacetViewer({
+
     var viewer = new FacetViewer({
    model: dataset
  });
-
                 
    • my.FacetViewer = Backbone.View.extend({
-  className: 'recline-facet-viewer', 
-  template: ' \
-    <div class="facets"> \
-      {{#facets}} \
-      <div class="facet-summary" data-facet="{{id}}"> \
-        <h3> \
-          {{id}} \
-        </h3> \
-        <ul class="facet-items"> \
-        {{#terms}} \
-          <li><a class="facet-choice js-facet-filter" data-value="{{term}}" href="#{{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> \
-  ',
+
    +
    + + 
    my.FacetViewer = Backbone.View.extend({
+  className: 'recline-facet-viewer', 
+  template: ' \
+    <div class="facets"> \
+      {{#facets}} \
+      <div class="facet-summary" data-facet="{{id}}"> \
+        <h3> \
+          {{id}} \
+        </h3> \
+        <ul class="facet-items"> \
+        {{#terms}} \
+          <li><a class="facet-choice js-facet-filter" data-value="{{term}}" href="#{{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-facet-filter': 'onFacetFilter'
-  },
-  initialize: function(model) {
-    _.bindAll(this, 'render');
-    this.listenTo(this.model.facets, 'all', this.render);
-    this.listenTo(this.model.fields, 'all', this.render);
-    this.render();
-  },
-  render: function() {
-    var tmplData = {
-      fields: this.model.fields.toJSON()
-    };
-    tmplData.facets = _.map(this.model.facets.toJSON(), 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) {
-    e.preventDefault();
-    var $target= $(e.target);
-    var fieldId = $target.closest('.facet-summary').attr('data-facet');
-    var value = $target.attr('data-value');
-    this.model.queryState.addFilter({type: 'term', field: fieldId, term: value});

    have to trigger explicitly for some reason

    		 
        this.model.query();
-  }
-});
+  events: {
+    'click .js-facet-filter': 'onFacetFilter'
+  },
+  initialize: function(model) {
+    _.bindAll(this, 'render');
+    this.listenTo(this.model.facets, 'all', this.render);
+    this.listenTo(this.model.fields, 'all', this.render);
+    this.render();
+  },
+  render: function() {
+    var tmplData = {
+      fields: this.model.fields.toJSON()
+    };
+    tmplData.facets = _.map(this.model.facets.toJSON(), 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) {
+    e.preventDefault();
+    var $target= $(e.target);
+    var fieldId = $target.closest('.facet-summary').attr('data-facet');
+    var value = $target.attr('data-value');
+    this.model.queryState.addFilter({type: 'term', field: fieldId, term: value});
    + +
    • + + +
  • +
    + +
    + +
    +

    have to trigger explicitly for some reason

    + +
    + + 
        this.model.query();
+  }
+});
 
 
-})(jQuery, recline.View);
-
-
    		•
    \ No newline at end of file +})(jQuery, recline.View);
    + + + + +
    + + diff --git a/docs/src/widget.fields.html b/docs/src/widget.fields.html index d4fe2282..07b34852 100644 --- a/docs/src/widget.fields.html +++ b/docs/src/widget.fields.html @@ -1,82 +1,299 @@ - widget.fields.js

    widget.fields.js 

    /*jshint multistr:true */

    Field Info

    + + + + widget.fields.js + + + + + +
    +
    + + + +
      + +
    • +
      +

      widget.fields.js

      +
      +
      • + + + +
    • +
      + +
      + +
      + +
      + + 
      /*jshint multistr:true */
      + +
      • + + +
    • +
      + +
      + +
      +

      Field Info

      For each field

      +

      Id / Label / type / format

      -

      Id / Label / type / format

    		 
                     		           
                                   
                                
                                    
                   
    Editor -- to change type (and possibly format)
-Editor for show/hide ...
                     		                            
                     		           
                                   
                                
                                    
                   
    Summaries of fields
    
+            
+            
+        
+        
+        
+        
  • 
+            
    
+              
+              
    
+                
+              
    
+              
    Editor — to change type (and possibly format)
+Editor for show/hide …
    
 
+            
    
+            
+        
    • 
+        
+        
+        
  • 
+            
    
+              
+              
    
+                
+              
    
+              
    Summaries of fields
    
 
    Top values / number empty
-If number: max, min average ...
                 
    		•                             
                     		           
                                   
                                
                                    
                   
    Box to boot transform editor ...
                     		                            
    this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
+If number: max, min average …
    
 
-(function($, my) {
-  "use strict";
+            
    
+            
+        
+        
+        
+        
  • 
+            
    
+              
+              
    
+                
+              
    
+              
    Box to boot transform editor …
    
+
+            
    
+            
+            
    +this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
+
+(function($, my) {
+  "use strict";
   
-my.Fields = Backbone.View.extend({
-  className: 'recline-fields-view', 
-  template: ' \
-    <div class="accordion fields-list well"> \
-    <h3>Fields <a href="#" class="js-show-hide">+</a></h3> \
-    {{#fields}} \
-      <div class="accordion-group field"> \
-        <div class="accordion-heading"> \
-          <i class="icon-file"></i> \
-          <h4> \
-            {{label}} \
-            <small> \
-              {{type}} \
-              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; </a> \
-            </small> \
-          </h4> \
-        </div> \
-        <div id="collapse{{id}}" class="accordion-body collapse"> \
-          <div class="accordion-inner"> \
-            {{#facets}} \
-            <div class="facet-summary" data-facet="{{id}}"> \
-              <ul class="facet-items"> \
-              {{#terms}} \
-                <li class="facet-item"><span class="term">{{term}}</span> <span class="count">[{{count}}]</span></li> \
-              {{/terms}} \
-              </ul> \
-            </div> \
-            {{/facets}} \
-            <div class="clear"></div> \
-          </div> \
-        </div> \
-      </div> \
-    {{/fields}} \
-    </div> \
-  ',
+my.Fields = Backbone.View.extend({
+  className: 'recline-fields-view', 
+  template: ' \
+    <div class="panel-group fields-list well"> \
+    <h3>Fields <a href="#" class="js-show-hide">+</a></h3> \
+    {{#fields}} \
+      <div class="panel panel-default field"> \
+        <div class="panel-heading"> \
+          <i class="glyphicon glyphicon-file"></i> \
+          <h4> \
+            {{label}} \
+            <small> \
+              {{type}} \
+              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; </a> \
+            </small> \
+          </h4> \
+        </div> \
+        <div id="collapse{{id}}" class="panel-collapse collapse"> \
+          <div class="panel-body"> \
+            {{#facets}} \
+            <div class="facet-summary" data-facet="{{id}}"> \
+              <ul class="facet-items"> \
+              {{#terms}} \
+                <li class="facet-item"><span class="term">{{term}}</span> <span class="count">[{{count}}]</span></li> \
+              {{/terms}} \
+              </ul> \
+            </div> \
+            {{/facets}} \
+            <div class="clear"></div> \
+          </div> \
+        </div> \
+      </div> \
+    {{/fields}} \
+    </div> \
+  ',
 
-  initialize: function(model) {
-    var self = this;
-    _.bindAll(this, 'render');
                 
    		•            
                                   
                                
                                    
                   
    TODO: this is quite restrictive in terms of when it is re-run
+  initialize: function(model) {
+    var self = this;
+    _.bindAll(this, 'render');
+            
+        
+        
+        
+        
  • 
+            
    
+              
+              
    
+                
+              
    
+              
    TODO: this is quite restrictive in terms of when it is re-run
 e.g. a change in type will not trigger a re-run atm.
-being more liberal (e.g. binding to all) can lead to being called a lot (e.g. for change:width)
                 
    		•                             
        this.listenTo(this.model.fields, 'reset', function(action) {
-      self.model.fields.each(function(field) {
-        field.facets.unbind('all', self.render);
-        field.facets.bind('all', self.render);
-      });
                     		           
                                   
                                
                                    
                   
    fields can get reset or changed in which case we need to recalculate
                     		                            
          self.model.getFieldsSummary();
-      self.render();
-    });
-    this.$el.find('.collapse').collapse();
-    this.render();
-  },
-  render: function() {
-    var self = this;
-    var tmplData = {
-      fields: []
-    };
-    this.model.fields.each(function(field) {
-      var out = field.toJSON();
-      out.facets = field.facets.toJSON();
-      tmplData.fields.push(out);
-    });
-    var templated = Mustache.render(this.template, tmplData);
-    this.$el.html(templated);
-  }
-});
+being more liberal (e.g. binding to all) can lead to being called a lot (e.g. for change:width)
    
 
-})(jQuery, recline.View);
+            
    
+            
+            
        this.listenTo(this.model.fields, 'reset', function(action) {
+      self.model.fields.each(function(field) {
+        field.facets.unbind('all', self.render);
+        field.facets.bind('all', self.render);
+      });
    
+            
+        
+        
+        
+        
  • 
+            
    
+              
+              
    
+                
+              
    
+              
    fields can get reset or changed in which case we need to recalculate
    
 
-
                 
    		•            
                             
       
       
\ No newline at end of file
+            
    
+            
+            
          self.model.getFieldsSummary();
+      self.render();
+    });
+    this.$el.find('.collapse').collapse();
+    this.render();
+  },
+  render: function() {
+    var self = this;
+    var tmplData = {
+      fields: []
+    };
+    this.model.fields.each(function(field) {
+      var out = field.toJSON();
+      out.facets = field.facets.toJSON();
+      tmplData.fields.push(out);
+    });
+    var templated = Mustache.render(this.template, tmplData);
+    this.$el.html(templated);
+  }
+});
+
+})(jQuery, recline.View);
    
+            
+        
+        
+    
+  
    
+
+
diff --git a/docs/src/widget.filtereditor.html b/docs/src/widget.filtereditor.html
index d4bf97bb..a761e3d7 100644
--- a/docs/src/widget.filtereditor.html
+++ b/docs/src/widget.filtereditor.html
@@ -1,168 +1,330 @@
-      widget.filtereditor.js           
         
                          
                    
                            
                   widget.filtereditor.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    /*jshint multistr:true */
+
 
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
+
+
+  widget.filtereditor.js
+  
+  
+  
+
+
+  
    
+    
    
+    
+      
+    
+    
      
+        
+          
    • 
+              
      
+                  
      widget.filtereditor.js
      
+              
      
+          
      • 
+        
+        
+        
+        
    • 
+            
      
+              
+              
      
+                
+              
      
+              
+            
      
+            
+            
      /*jshint multistr:true */
 
-(function($, my) {
-  "use strict";
+this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
 
-my.FilterEditor = Backbone.View.extend({
-  className: 'recline-filter-editor well', 
-  template: ' \
-    <div class="filters"> \
-      <h3>Filters</h3> \
-      <a href="#" class="js-add-filter">Add filter</a> \
-      <form class="form-stacked js-add" style="display: none;"> \
-        <fieldset> \
-          <label>Field</label> \
-          <select class="fields"> \
-            {{#fields}} \
-            <option value="{{id}}">{{label}}</option> \
-            {{/fields}} \
-          </select> \
-          <label>Filter type</label> \
-          <select class="filterType"> \
-            <option value="term">Value</option> \
-            <option value="range">Range</option> \
-            <option value="geo_distance">Geo distance</option> \
-          </select> \
-          <button type="submit" class="btn">Add</button> \
-        </fieldset> \
-      </form> \
-      <form class="form-stacked js-edit"> \
-        {{#filters}} \
-          {{{filterRender}}} \
-        {{/filters}} \
-        {{#filters.length}} \
-        <button type="submit" class="btn">Update</button> \
-        {{/filters.length}} \
-      </form> \
-    </div> \
-  ',
-  filterTemplates: {
-    term: ' \
-      <div class="filter-{{type}} filter"> \
-        <fieldset> \
-          <legend> \
-            {{field}} <small>{{type}}</small> \
-            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
-          </legend> \
-          <input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-        </fieldset> \
-      </div> \
-    ',
-    range: ' \
-      <div class="filter-{{type}} filter"> \
-        <fieldset> \
-          <legend> \
-            {{field}} <small>{{type}}</small> \
-            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
-          </legend> \
-          <label class="control-label" for="">From</label> \
-          <input type="text" value="{{from}}" name="from" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-          <label class="control-label" for="">To</label> \
-          <input type="text" value="{{to}}" name="to" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-        </fieldset> \
-      </div> \
-    ',
-    geo_distance: ' \
-      <div class="filter-{{type}} filter"> \
-        <fieldset> \
-          <legend> \
-            {{field}} <small>{{type}}</small> \
-            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
-          </legend> \
-          <label class="control-label" for="">Longitude</label> \
-          <input type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-          <label class="control-label" for="">Latitude</label> \
-          <input type="text" value="{{point.lat}}" name="lat" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-          <label class="control-label" for="">Distance (km)</label> \
-          <input type="text" value="{{distance}}" name="distance" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-        </fieldset> \
-      </div> \
-    '
-  },
-  events: {
-    'click .js-remove-filter': 'onRemoveFilter',
-    'click .js-add-filter': 'onAddFilterShow',
-    'submit form.js-edit': 'onTermFiltersUpdate',
-    'submit form.js-add': 'onAddFilter'
-  },
-  initialize: function() {
-    _.bindAll(this, 'render');
-    this.listenTo(this.model.fields, 'all', this.render);
-    this.listenTo(this.model.queryState, 'change change:filters:new-blank', this.render);
-    this.render();
-  },
-  render: function() {
-    var self = this;
-    var tmplData = $.extend(true, {}, this.model.queryState.toJSON());
                   
    		           
                                   
                                
                                    
                   
    we will use idx in list as there id ...
                     		                            
        tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
-      filter.id = idx;
-      return filter;
-    });
-    tmplData.fields = this.model.fields.toJSON();
-    tmplData.filterRender = function() {
-      return Mustache.render(self.filterTemplates[this.type], this);
-    };
-    var out = Mustache.render(this.template, tmplData);
-    this.$el.html(out);
-  },
-  onAddFilterShow: function(e) {
-    e.preventDefault();
-    var $target = $(e.target);
-    $target.hide();
-    this.$el.find('form.js-add').show();
-  },
-  onAddFilter: function(e) {
-    e.preventDefault();
-    var $target = $(e.target);
-    $target.hide();
-    var filterType = $target.find('select.filterType').val();
-    var field      = $target.find('select.fields').val();
-    this.model.queryState.addFilter({type: filterType, field: field});
-  },
-  onRemoveFilter: function(e) {
-    e.preventDefault();
-    var $target = $(e.target);
-    var filterId = $target.attr('data-filter-id');
-    this.model.queryState.removeFilter(filterId);
-  },
-  onTermFiltersUpdate: function(e) {
-   var self = this;
-    e.preventDefault();
-    var filters = self.model.queryState.get('filters');
-    var $form = $(e.target);
-    _.each($form.find('input'), function(input) {
-      var $input = $(input);
-      var filterType  = $input.attr('data-filter-type');
-      var fieldId     = $input.attr('data-filter-field');
-      var filterIndex = parseInt($input.attr('data-filter-id'), 10);
-      var name        = $input.attr('name');
-      var value       = $input.val();
+(function($, my) {
+  "use strict";
 
-      switch (filterType) {
-        case 'term':
-          filters[filterIndex].term = value;
-          break;
-        case 'range':
-          filters[filterIndex][name] = value;
-          break;
-        case 'geo_distance':
-          if(name === 'distance') {
-            filters[filterIndex].distance = parseFloat(value);
-          }
-          else {
-            filters[filterIndex].point[name] = parseFloat(value);
-          }
-          break;
-      }
-    });
-    self.model.queryState.set({filters: filters, from: 0});
-    self.model.queryState.trigger('change');
-  }
-});
+my.FilterEditor = Backbone.View.extend({
+  className: 'recline-filter-editor well', 
+  template: ' \
+    <div class="filters"> \
+      <h3>Filters</h3> \
+      <a href="#" class="js-add-filter">Add filter</a> \
+      <form class="form-stacked js-add" style="display: none;"> \
+        <div class="form-group"> \
+          <label>Field</label> \
+          <select class="fields form-control"> \
+            {{#fields}} \
+            <option value="{{id}}">{{label}}</option> \
+            {{/fields}} \
+          </select> \
+        </div> \
+        <div class="form-group"> \
+          <label>Filter type</label> \
+          <select class="filterType form-control"> \
+            <option value="term">Value</option> \
+            <option value="range">Range</option> \
+            <option value="geo_distance">Geo distance</option> \
+          </select> \
+        </div> \
+        <button type="submit" class="btn btn-default">Add</button> \
+      </form> \
+      <form class="form-stacked js-edit"> \
+        {{#filters}} \
+          {{{filterRender}}} \
+        {{/filters}} \
+        {{#filters.length}} \
+        <button type="submit" class="btn btn-default">Update</button> \
+        {{/filters.length}} \
+      </form> \
+    </div> \
+  ',
+  filterTemplates: {
+    term: ' \
+      <div class="filter-{{type}} filter"> \
+        <fieldset> \
+          <legend> \
+            {{field}} <small>{{type}}</small> \
+            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
+          </legend> \
+          <input class="input-sm" type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+        </fieldset> \
+      </div> \
+    ',
+    range: ' \
+      <div class="filter-{{type}} filter"> \
+        <fieldset> \
+          <legend> \
+            {{field}} <small>{{type}}</small> \
+            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
+          </legend> \
+          <div class="form-group"> \
+            <label class="control-label" for="">From</label> \
+            <input class="input-sm" type="text" value="{{from}}" name="from" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
+          <div class="form-group"> \
+            <label class="control-label" for="">To</label> \
+            <input class="input-sm" type="text" value="{{to}}" name="to" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
+        </fieldset> \
+      </div> \
+    ',
+    geo_distance: ' \
+      <div class="filter-{{type}} filter"> \
+        <fieldset> \
+          <legend> \
+            {{field}} <small>{{type}}</small> \
+            <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
+          </legend> \
+          <div class="form-group"> \
+            <label class="control-label" for="">Longitude</label> \
+            <input class="input-sm" type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
+          <div class="form-group"> \
+            <label class="control-label" for="">Latitude</label> \
+            <input class="input-sm" type="text" value="{{point.lat}}" name="lat" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
+          <div class="form-group"> \
+            <label class="control-label" for="">Distance (km)</label> \
+            <input class="input-sm" type="text" value="{{distance}}" name="distance" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
+        </fieldset> \
+      </div> \
+    '
+  },
+  events: {
+    'click .js-remove-filter': 'onRemoveFilter',
+    'click .js-add-filter': 'onAddFilterShow',
+    'submit form.js-edit': 'onTermFiltersUpdate',
+    'submit form.js-add': 'onAddFilter'
+  },
+  initialize: function() {
+    _.bindAll(this, 'render');
+    this.listenTo(this.model.fields, 'all', this.render);
+    this.listenTo(this.model.queryState, 'change change:filters:new-blank', this.render);
+    this.render();
+  },
+  render: function() {
+    var self = this;
+    var tmplData = $.extend(true, {}, this.model.queryState.toJSON());
    
+            
+        
+        
+        
+        
  • 
+            
    
+              
+              
    
+                
+              
    
+              
    we will use idx in list as there id …
    
+
+            
    
+            
+            
        tmplData.filters = _.map(tmplData.filters, function(filter, idx) {
+      filter.id = idx;
+      return filter;
+    });
+    tmplData.fields = this.model.fields.toJSON();
+    tmplData.filterRender = function() {
+      return Mustache.render(self.filterTemplates[this.type], this);
+    };
+    var out = Mustache.render(this.template, tmplData);
+    this.$el.html(out);
+  },
+  onAddFilterShow: function(e) {
+    e.preventDefault();
+    var $target = $(e.target);
+    $target.hide();
+    this.$el.find('form.js-add').show();
+  },
+  onAddFilter: function(e) {
+    e.preventDefault();
+    var $target = $(e.target);
+    $target.hide();
+    var filterType = $target.find('select.filterType').val();
+    var field      = $target.find('select.fields').val();
+    this.model.queryState.addFilter({type: filterType, field: field});
+  },
+  onRemoveFilter: function(e) {
+    e.preventDefault();
+    var $target = $(e.target);
+    var filterId = $target.attr('data-filter-id');
+    this.model.queryState.removeFilter(filterId);
+  },
+  onTermFiltersUpdate: function(e) {
+   var self = this;
+    e.preventDefault();
+    var filters = self.model.queryState.get('filters');
+    var $form = $(e.target);
+    _.each($form.find('input'), function(input) {
+      var $input = $(input);
+      var filterType  = $input.attr('data-filter-type');
+      var fieldId     = $input.attr('data-filter-field');
+      var filterIndex = parseInt($input.attr('data-filter-id'), 10);
+      var name        = $input.attr('name');
+      var value       = $input.val();
+
+      switch (filterType) {
+        case 'term':
+          filters[filterIndex].term = value;
+          break;
+        case 'range':
+          filters[filterIndex][name] = value;
+          break;
+        case 'geo_distance':
+          if(name === 'distance') {
+            filters[filterIndex].distance = parseFloat(value);
+          }
+          else {
+            filters[filterIndex].point[name] = parseFloat(value);
+          }
+          break;
+      }
+    });
+    self.model.queryState.set({filters: filters, from: 0});
+    self.model.queryState.trigger('change');
+  }
+});
 
 
-})(jQuery, recline.View);
-
-
                 
    		•            
                             
       
       
\ No newline at end of file
+})(jQuery, recline.View);
    
+            
+        
+        
+    
+  
    
+
+
diff --git a/docs/src/widget.pager.html b/docs/src/widget.pager.html
index c03c3d98..71ab94da 100644
--- a/docs/src/widget.pager.html
+++ b/docs/src/widget.pager.html
@@ -1,70 +1,223 @@
-      widget.pager.js           
         
                          
                    
                            
                   widget.pager.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    /*jshint multistr:true */
+
 
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
+
+
+  widget.pager.js
+  
+  
+  
+
+
+  
    
+    
    
+    
+      
+    
+    
      
+        
+          
    • 
+              
      
+                  
      widget.pager.js
      
+              
      
+          
      • 
+        
+        
+        
+        
    • 
+            
      
+              
+              
      
+                
+              
      
+              
+            
      
+            
+            
      /*jshint multistr:true */
 
-(function($, my) {
-  "use strict";
+this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
 
-my.Pager = Backbone.View.extend({
-  className: 'recline-pager', 
-  template: ' \
-    <div class="pagination"> \
-      <ul> \
-        <li class="prev action-pagination-update"><a href="">&laquo;</a></li> \
-        <li class="active"><a><input name="from" type="text" value="{{from}}" /> &ndash; <input name="to" type="text" value="{{to}}" /> </a></li> \
-        <li class="next action-pagination-update"><a href="">&raquo;</a></li> \
-      </ul> \
-    </div> \
-  ',
+(function($, my) {
+  "use strict";
 
-  events: {
-    'click .action-pagination-update': 'onPaginationUpdate',
-    'change input': 'onFormSubmit'
-  },
+my.Pager = Backbone.View.extend({
+  className: 'recline-pager', 
+  template: ' \
+    <div class="pagination"> \
+      <ul class="pagination"> \
+        <li class="prev action-pagination-update"><a href="" class="btn btn-default">&laquo;</a></li> \
+        <li class="page-range"><a><label for="from">From</label><input name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input name="to" type="text" value="{{to}}" /> </a></li> \
+        <li class="next action-pagination-update"><a href="" class="btn btn-default">&raquo;</a></li> \
+      </ul> \
+    </div> \
+  ',
 
-  initialize: function() {
-    _.bindAll(this, 'render');
-    this.listenTo(this.model.queryState, 'change', this.render);
-    this.render();
-  },
-  onFormSubmit: function(e) {
-    e.preventDefault();
-    var newFrom = parseInt(this.$el.find('input[name="from"]').val());
-    newFrom = Math.min(this.model.recordCount, Math.max(newFrom, 1))-1;
-    var newSize = parseInt(this.$el.find('input[name="to"]').val()) - newFrom;
-    newSize = Math.min(Math.max(newSize, 1), this.model.recordCount);
-    this.model.queryState.set({size: newSize, from: newFrom});
-  },
-  onPaginationUpdate: function(e) {
-    e.preventDefault();
-    var $el = $(e.target);
-    var newFrom = 0;
-    var currFrom = this.model.queryState.get('from');
-    var size = this.model.queryState.get('size');
-    var updateQuery = false;
-    if ($el.parent().hasClass('prev')) {
-      newFrom = Math.max(currFrom - Math.max(0, size), 1)-1;
-      updateQuery = newFrom != currFrom;
-    } else {
-      newFrom = Math.max(currFrom + size, 1);
-      updateQuery = (newFrom < this.model.recordCount);
-    }
-    if (updateQuery) {
-      this.model.queryState.set({from: newFrom});
-    }
-  },
-  render: function() {
-    var tmplData = this.model.toJSON();
-    var from = parseInt(this.model.queryState.get('from'));
-    tmplData.from = from+1;
-    tmplData.to = Math.min(from+this.model.queryState.get('size'), this.model.recordCount);
-    var templated = Mustache.render(this.template, tmplData);
-    this.$el.html(templated);
-    return this;
-  }
-});
+  events: {
+    'click .action-pagination-update': 'onPaginationUpdate',
+    'change input': 'onFormSubmit'
+  },
 
-})(jQuery, recline.View);
+  initialize: function() {
+    _.bindAll(this, 'render');
+    this.listenTo(this.model.queryState, 'change', this.render);
+    this.render();
+  },
+  onFormSubmit: function(e) {
+    e.preventDefault();
      
+            
+        
      • 
+        
+        
+        
    • 
+            
      
+              
+              
      
+                
+              
      
+              
      filter is 0-based; form is 1-based
      
 
-
                     		           
                             
       
       
\ No newline at end of file
+            
    
+            
+            
        var formFrom = parseInt(this.$el.find('input[name="from"]').val())-1; 
+    var formTo = parseInt(this.$el.find('input[name="to"]').val())-1; 
+    var maxRecord = this.model.recordCount-1;
+    if (this.model.queryState.get('from') != formFrom) { // changed from; update from
+      this.model.queryState.set({from: Math.min(maxRecord, Math.max(formFrom, 0))});
+    } else if (this.model.queryState.get('to') != formTo) { // change to; update size
+      var to = Math.min(maxRecord, Math.max(formTo, 0));
+      this.model.queryState.set({size: Math.min(maxRecord+1, Math.max(to-formFrom+1, 1))});
+    }
+  },
+  onPaginationUpdate: function(e) {
+    e.preventDefault();
+    var $el = $(e.target);
+    var newFrom = 0;
+    var currFrom = this.model.queryState.get('from');
+    var size = this.model.queryState.get('size');
+    var updateQuery = false;
+    if ($el.parent().hasClass('prev')) {
+      newFrom = Math.max(currFrom - Math.max(0, size), 0);
+      updateQuery = newFrom != currFrom;
+    } else {
+      newFrom = Math.max(currFrom + size, 0);
+      updateQuery = (newFrom < this.model.recordCount);
+    }
+    if (updateQuery) {
+      this.model.queryState.set({from: newFrom});
+    }
+  },
+  render: function() {
+    var tmplData = this.model.toJSON();
+    var from = parseInt(this.model.queryState.get('from'));
+    tmplData.from = from+1;
+    tmplData.to = Math.min(from+this.model.queryState.get('size'), this.model.recordCount);
+    var templated = Mustache.render(this.template, tmplData);
+    this.$el.html(templated);
+    return this;
+  }
+});
+
+})(jQuery, recline.View);
    
+            
+        
+        
+    
+  
    
+
+
diff --git a/docs/src/widget.queryeditor.html b/docs/src/widget.queryeditor.html
index 79262cf0..37a42d30 100644
--- a/docs/src/widget.queryeditor.html
+++ b/docs/src/widget.queryeditor.html
@@ -1,44 +1,184 @@
-      widget.queryeditor.js           
         
                
             Jump To …                
              
                    
                            
                   widget.queryeditor.js             
                   		                               
                                                     
                                
                                    
                                    		                            
    /*jshint multistr:true */
+
 
-this.recline = this.recline || {};
-this.recline.View = this.recline.View || {};
+
+
+  widget.queryeditor.js
+  
+  
+  
+
+
+  
    
+    
    
+    
+      
+    
+    
      
+        
+          
    • 
+              
      
+                  
      widget.queryeditor.js
      
+              
      
+          
      • 
+        
+        
+        
+        
    • 
+            
      
+              
+              
      
+                
+              
      
+              
+            
      
+            
+            
      /*jshint multistr:true */
 
-(function($, my) {
-  "use strict";
+this.recline = this.recline || {};
+this.recline.View = this.recline.View || {};
 
-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> \
-      <button type="submit" class="btn">Go &raquo;</button> \
-    </form> \
-  ',
+(function($, my) {
+  "use strict";
 
-  events: {
-    'submit form': 'onFormSubmit'
-  },
+my.QueryEditor = Backbone.View.extend({
+  className: 'recline-query-editor', 
+  template: ' \
+    <form action="" method="GET" class="form-inline" role="form"> \
+      <div class="form-group"> \
+        <div class="input-group text-query"> \
+          <div class="input-group-addon"> \
+            <i class="glyphicon glyphicon-search"></i> \
+          </div> \
+          <label>Search</label> \
+          <input class="form-control search-query" type="text" name="q" value="{{q}}" placeholder="Search data ..."> \
+        </div> \
+      </div> \
+      <button type="submit" class="btn btn-default">Go &raquo;</button> \
+    </form> \
+  ',
 
-  initialize: function() {
-    _.bindAll(this, 'render');
-    this.listenTo(this.model, 'change', this.render);
-    this.render();
-  },
-  onFormSubmit: function(e) {
-    e.preventDefault();
-    var query = this.$el.find('.text-query input').val();
-    this.model.set({q: query});
-  },
-  render: function() {
-    var tmplData = this.model.toJSON();
-    var templated = Mustache.render(this.template, tmplData);
-    this.$el.html(templated);
-  }
-});
+  events: {
+    'submit form': 'onFormSubmit'
+  },
 
-})(jQuery, recline.View);
+  initialize: function() {
+    _.bindAll(this, 'render');
+    this.listenTo(this.model, 'change', this.render);
+    this.render();
+  },
+  onFormSubmit: function(e) {
+    e.preventDefault();
+    var query = this.$el.find('.search-query').val();
+    this.model.set({q: query});
+  },
+  render: function() {
+    var tmplData = this.model.toJSON();
+    var templated = Mustache.render(this.template, tmplData);
+    this.$el.html(templated);
+  }
+});
 
-
                   
    		           
                             
       
       
\ No newline at end of file
+})(jQuery, recline.View);
+            
+        
+        
+    
+  
+
+
diff --git a/docs/src/widget.valuefilter.html b/docs/src/widget.valuefilter.html
new file mode 100644
index 00000000..1f72bc0f
--- /dev/null
+++ b/docs/src/widget.valuefilter.html
@@ -0,0 +1,264 @@
+
+
+
+
+  widget.valuefilter.js
+  
+  
+  
+
+
+  
    
+    
    
+    
+      
+    
+    
+  
    
+
+
diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown
index b44281cb..8f850c30 100644
--- a/docs/tutorial-views.markdown
+++ b/docs/tutorial-views.markdown
@@ -25,7 +25,7 @@ Before writing any code with Recline, you need to do the following preparation s
 2. Include the relevant CSS in the head section of your document:
     {% highlight html %}
 
-
+
 
 {% endhighlight %}
 
@@ -35,7 +35,7 @@ Before writing any code with Recline, you need to do the following preparation s
 
 
 
-
+
 
 
 
diff --git a/docs/tutorials.html b/docs/tutorials.html
index 8ed90f7f..6ef1e832 100644
--- a/docs/tutorials.html
+++ b/docs/tutorials.html
@@ -12,19 +12,19 @@ root: ../
 
 
    Basics – Using the Dataset and its Friends
    
 
    
-
    
+
    
   
    
-    
    
+    
    
       
    
         
    Dataset Basics
    
       
    
     
    
-    
    
+    
    
       
    
         
    Dataset Querying
    
       
    
     
    
-    
    
+    
    
       
    
         
    Datasets and Events
    
       
    
@@ -34,9 +34,9 @@ root: ../
 
 
    Backends – Loading and Storing Data from Remote Sources
    
 
    
-
    
+
    
   
    
-    
    
+    
    
       
    
         
    Backends: loading data from Google Docs, Local CSV, DataHub & more ...
    
       
    
@@ -46,14 +46,14 @@ root: ../
 
 
    Views – visualize data
    
 
    
-
    
+
    
   
    
-    
    
+    
    
       
    
         
    Views Quickstart - Grids, Graphs, Maps & Timelines
    
       
    
     
    
-    
    
+    
    
       
    
         
    Doing more with maps
    
       
    
diff --git a/download.markdown b/download.markdown
index 056ed898..049e2e6d 100644
--- a/download.markdown
+++ b/download.markdown
@@ -12,22 +12,22 @@ title: Download
 
    Latest Code - Master
    
 
    The tutorials on this website will usually be based on the latest (master) codebase. It should also be very stable.
    
 
    
-
    
-  
+
    
+  
     recline.js (master) »
     
    
     Single file containing all of Recline library
       
 
    
-
    
-  
+
    
+  
     recline.dataset.js (master) »
     
    
     Single file with only the core data objects Dataset, Record etc without any Views or backends
       
 
    
-
    
-  
+
    
+  
     Full package (master) »
     
    
     Everything - library, source code, unit tests, vendor libraries and documentation
@@ -37,22 +37,22 @@ title: Download
 
 
    Most Recent Official Release – v0.5
    
 
    
-
    
-  
+
    
+  
     recline.js »
     
    
     Single file containing all of Recline library
       
 
    
-
    
-  
+
    
+  
     recline.dataset.js »
     
    
     Single file with only the core data objects Dataset, Record etc without any Views or backends
       
 
    
-
    
-  
+
    
+  
     Full package (master) »
     
    
     Everything - library, source code, unit tests, vendor libraries and documentation
@@ -89,7 +89,7 @@ Individual views have additional dependencies such as:
 * [Leaflet](http://leaflet.cloudmade.com/) >= 0.4.4 (required for map view)
 * [Leaflet.markercluster](https://github.com/danzel/Leaflet.markercluster)  as of 2012-09-12 (required for marker clustering)
 * [Verite Timeline](https://github.com/VeriteCo/Timeline/) as of 2012-05-02 (required for the timeline view)
-* [Bootstrap](http://twitter.github.com/bootstrap/) >= v2.0 (default option for CSS and UI JS but you can use your own)
+* [Bootstrap](http://twitter.github.com/bootstrap/) >= v3 (default option for CSS and UI JS but you can use your own)
 
 If you grab the full zipball for Recline this will include all of the relevant
 dependencies in the vendor directory and you can also find them at in the
@@ -105,7 +105,7 @@ Here is an example of the page setup for an app using every Recline component:
   
-  
+  
 
 {% include recline-deps.html %}
 {% endhighlight %}
diff --git a/index.html b/index.html
index 451ec381..aea40126 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@ title: Home
 
    
   
    
     
    
-      
    
+      
    
         
    
           Recline Data Explorer and Library
         
    
@@ -19,9 +19,9 @@ title: Home
             and allows you to connect them with your data in seconds.
           
    
           
    
-            Documentation »
-            Tutorials »
-            Demos »
+            Documentation »
+            Tutorials »
+            Demos »
           
    
 
           
    Get started fast
    
diff --git a/src/view.flot.js b/src/view.flot.js
index 62605eb3..cf75265c 100644
--- a/src/view.flot.js
+++ b/src/view.flot.js
@@ -26,7 +26,7 @@ my.Flot = Backbone.View.extend({
   template: ' \
     
     \
       
     \
-        
     \
+        
     \
           
    Hey there!
     \
           
    There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.
     \
           
    Please tell us by using the menu on the right and a graph will automatically appear.
     \
@@ -367,30 +367,34 @@ my.FlotControls = Backbone.View.extend({
   
     \
     
     \
       
     \
-         \
-        
     \
-           \
+        
     \
+           \
+          
     \
+             \
+          
     \
         
     \
-         \
-        
     \
-           \
+        
     \
+           \
+          
     \
+             \
+          
     \
         
     \
         
     \
         
     \
       
     \
       
     \
-         \
+         \
       
     \