Merge pull request #470 from msolv/update-dist-files
[#469] Update of dist and doc files.
This commit is contained in:
Rufus Pollock
commit
b5e670f992
179
dist/recline.css
vendored
179
dist/recline.css
vendored
@ -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,11 +332,11 @@ 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 {
|
||||
.recline-query-editor label {
|
||||
display:none;
|
||||
}
|
||||
|
||||
@ -324,28 +344,78 @@ div.data-table-cell-content-numeric > a.data-table-cell-edit {
|
||||
* 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/**********************************************************
|
||||
@ -357,6 +427,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 +464,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 +501,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 +603,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 +745,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;
|
||||
|
||||
1
dist/recline.dataset.min.js
vendored
Normal file
1
dist/recline.dataset.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
192
dist/recline.js
vendored
192
dist/recline.js
vendored
@ -1064,7 +1064,7 @@ my.Flot = Backbone.View.extend({
|
||||
template: ' \
|
||||
<div class="recline-flot"> \
|
||||
<div class="panel graph" style="display: block;"> \
|
||||
<div class="js-temp-notice alert alert-block"> \
|
||||
<div class="js-temp-notice alert alert-warning alert-block"> \
|
||||
<h3 class="alert-heading">Hey there!</h3> \
|
||||
<p>There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.</p> \
|
||||
<p>Please tell us by <strong>using the menu on the right</strong> and a graph will automatically appear.</p> \
|
||||
@ -1405,30 +1405,34 @@ my.FlotControls = Backbone.View.extend({
|
||||
<div class="editor"> \
|
||||
<form class="form-stacked"> \
|
||||
<div class="clearfix"> \
|
||||
<label>Graph Type</label> \
|
||||
<div class="input editor-type"> \
|
||||
<select> \
|
||||
<option value="lines-and-points">Lines and Points</option> \
|
||||
<option value="lines">Lines</option> \
|
||||
<option value="points">Points</option> \
|
||||
<option value="bars">Bars</option> \
|
||||
<option value="columns">Columns</option> \
|
||||
</select> \
|
||||
<div class="form-group"> \
|
||||
<label>Graph Type</label> \
|
||||
<div class="input editor-type"> \
|
||||
<select class="form-control"> \
|
||||
<option value="lines-and-points">Lines and Points</option> \
|
||||
<option value="lines">Lines</option> \
|
||||
<option value="points">Points</option> \
|
||||
<option value="bars">Bars</option> \
|
||||
<option value="columns">Columns</option> \
|
||||
</select> \
|
||||
</div> \
|
||||
</div> \
|
||||
<label>Group Column (Axis 1)</label> \
|
||||
<div class="input editor-group"> \
|
||||
<select> \
|
||||
<option value="">Please choose ...</option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
<div class="form-group"> \
|
||||
<label>Group Column (Axis 1)</label> \
|
||||
<div class="input editor-group"> \
|
||||
<select class="form-control"> \
|
||||
<option value="">Please choose ...</option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="editor-series-group"> \
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="editor-buttons"> \
|
||||
<button class="btn editor-add">Add Series</button> \
|
||||
<button class="btn btn-default editor-add">Add Series</button> \
|
||||
</div> \
|
||||
<div class="editor-buttons editor-submit" comment="hidden temporarily" style="display: none;"> \
|
||||
<button class="editor-save">Save</button> \
|
||||
@ -1439,15 +1443,17 @@ my.FlotControls = Backbone.View.extend({
|
||||
',
|
||||
templateSeriesEditor: ' \
|
||||
<div class="editor-series js-series-{{seriesIndex}}"> \
|
||||
<label>Series <span>{{seriesName}} (Axis 2)</span> \
|
||||
[<a href="#remove" class="action-remove-series">Remove</a>] \
|
||||
</label> \
|
||||
<div class="input"> \
|
||||
<select> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
<div class="form-group"> \
|
||||
<label>Series <span>{{seriesName}} (Axis 2)</span> \
|
||||
[<a href="#remove" class="action-remove-series">Remove</a>] \
|
||||
</label> \
|
||||
<div class="input"> \
|
||||
<select class="form-control"> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</select> \
|
||||
</div> \
|
||||
</div> \
|
||||
</div> \
|
||||
',
|
||||
@ -1875,7 +1881,7 @@ my.Map = Backbone.View.extend({
|
||||
|
||||
initialize: function(options) {
|
||||
var self = this;
|
||||
this.visible = true;
|
||||
this.visible = this.$el.is(':visible');
|
||||
this.mapReady = false;
|
||||
// this will be the Leaflet L.Map object (setup below)
|
||||
this.map = null;
|
||||
@ -2140,7 +2146,7 @@ my.Map = Backbone.View.extend({
|
||||
|
||||
_.each(docs,function(doc){
|
||||
for (var key in self.features._layers){
|
||||
if (self.features._layers[key].feature.properties.cid == doc.cid){
|
||||
if (self.features._layers[key].feature.geometry.properties.cid == doc.cid){
|
||||
self.features.removeLayer(self.features._layers[key]);
|
||||
}
|
||||
}
|
||||
@ -2159,7 +2165,7 @@ my.Map = Backbone.View.extend({
|
||||
var dms = coord.split(/[^-?\.\d\w]+/);
|
||||
var deg = 0; var m = 0;
|
||||
var toDeg = [1, 60, 3600]; // conversion factors for Deg, min, sec
|
||||
var i;
|
||||
var i;
|
||||
for (i = 0; i < dms.length; ++i) {
|
||||
if (isNaN(parseFloat(dms[i]))) {
|
||||
continue;
|
||||
@ -2283,8 +2289,8 @@ my.Map = Backbone.View.extend({
|
||||
var self = this;
|
||||
this.map = new L.Map(this.$map.get(0));
|
||||
|
||||
var mapUrl = "//otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png";
|
||||
var osmAttribution = 'Map data © 2011 OpenStreetMap contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="//developer.mapquest.com/content/osm/mq_logo.png">';
|
||||
var mapUrl = "http://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png";
|
||||
var osmAttribution = 'Map data © 2011 OpenStreetMap contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">';
|
||||
var bg = new L.TileLayer(mapUrl, {maxZoom: 18, attribution: osmAttribution ,subdomains: '1234'});
|
||||
this.map.addLayer(bg);
|
||||
|
||||
@ -2333,7 +2339,7 @@ my.MapMenu = Backbone.View.extend({
|
||||
<div class="editor-field-type-latlon"> \
|
||||
<label>Latitude field</label> \
|
||||
<div class="input editor-lat-field"> \
|
||||
<select> \
|
||||
<select class="form-control"> \
|
||||
<option value=""></option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
@ -2342,7 +2348,7 @@ my.MapMenu = Backbone.View.extend({
|
||||
</div> \
|
||||
<label>Longitude field</label> \
|
||||
<div class="input editor-lon-field"> \
|
||||
<select> \
|
||||
<select class="form-control"> \
|
||||
<option value=""></option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
@ -2353,7 +2359,7 @@ my.MapMenu = Backbone.View.extend({
|
||||
<div class="editor-field-type-geom" style="display:none"> \
|
||||
<label>Geometry field (GeoJSON)</label> \
|
||||
<div class="input editor-geom-field"> \
|
||||
<select> \
|
||||
<select class="form-control"> \
|
||||
<option value=""></option> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
@ -2363,7 +2369,7 @@ my.MapMenu = Backbone.View.extend({
|
||||
</div> \
|
||||
</div> \
|
||||
<div class="editor-buttons"> \
|
||||
<button class="btn editor-update-map">Update</button> \
|
||||
<button class="btn btn-default editor-update-map">Update</button> \
|
||||
</div> \
|
||||
<div class="editor-options" > \
|
||||
<label class="checkbox"> \
|
||||
@ -2492,7 +2498,6 @@ my.MapMenu = Backbone.View.extend({
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);
|
||||
|
||||
/*jshint multistr:true */
|
||||
|
||||
// Standard JS module setup
|
||||
@ -2598,7 +2603,7 @@ my.MultiView = Backbone.View.extend({
|
||||
<div class="navigation"> \
|
||||
<div class="btn-group" data-toggle="buttons-radio"> \
|
||||
{{#views}} \
|
||||
<a href="#{{id}}" data-view="{{id}}" class="btn">{{label}}</a> \
|
||||
<button href="#{{id}}" data-view="{{id}}" class="btn btn-default">{{label}}</button> \
|
||||
{{/views}} \
|
||||
</div> \
|
||||
</div> \
|
||||
@ -2608,7 +2613,7 @@ my.MultiView = Backbone.View.extend({
|
||||
<div class="menu-right"> \
|
||||
<div class="btn-group" data-toggle="buttons-checkbox"> \
|
||||
{{#sidebarViews}} \
|
||||
<a href="#" data-action="{{id}}" class="btn">{{label}}</a> \
|
||||
<button href="#" data-action="{{id}}" class="btn btn-default">{{label}}</button> \
|
||||
{{/sidebarViews}} \
|
||||
</div> \
|
||||
</div> \
|
||||
@ -2619,8 +2624,8 @@ my.MultiView = Backbone.View.extend({
|
||||
</div> \
|
||||
',
|
||||
events: {
|
||||
'click .menu-right a': '_onMenuClick',
|
||||
'click .navigation a': '_onSwitchView'
|
||||
'click .menu-right button': '_onMenuClick',
|
||||
'click .navigation button': '_onSwitchView'
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
@ -2796,8 +2801,8 @@ my.MultiView = Backbone.View.extend({
|
||||
},
|
||||
|
||||
updateNav: function(pageName) {
|
||||
this.$el.find('.navigation a').removeClass('active');
|
||||
var $el = this.$el.find('.navigation a[data-view="' + pageName + '"]');
|
||||
this.$el.find('.navigation button').removeClass('active');
|
||||
var $el = this.$el.find('.navigation button[data-view="' + pageName + '"]');
|
||||
$el.addClass('active');
|
||||
|
||||
// add/remove sidebars and hide inactive views
|
||||
@ -3108,7 +3113,7 @@ my.SlickGrid = Backbone.View.extend({
|
||||
|
||||
// Template for row delete menu , change it if you don't love
|
||||
this.templates = {
|
||||
"deleterow" : '<a href="#" class="recline-row-delete btn" title="Delete row">X</a>'
|
||||
"deleterow" : '<button href="#" class="recline-row-delete btn btn-default" title="Delete row">X</button>'
|
||||
};
|
||||
|
||||
_.bindAll(this, 'render', 'onRecordChanged');
|
||||
@ -3221,10 +3226,15 @@ my.SlickGrid = Backbone.View.extend({
|
||||
})
|
||||
}
|
||||
|
||||
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: field.label,
|
||||
name: sanitizeFieldName(field.label),
|
||||
field: field.id,
|
||||
sortable: true,
|
||||
minWidth: 80,
|
||||
@ -3493,7 +3503,7 @@ my.SlickGrid = Backbone.View.extend({
|
||||
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>',
|
||||
template: '<h1><button href="#" class="recline-row-add btn btn-default">Add row</button></h1>',
|
||||
|
||||
initialize: function(options){
|
||||
var self = this;
|
||||
@ -3746,7 +3756,8 @@ my.Timeline = Backbone.View.extend({
|
||||
"startDate": start,
|
||||
"endDate": end,
|
||||
"headline": String(record.get('title') || ''),
|
||||
"text": record.get('description') || record.summary()
|
||||
"text": record.get('description') || record.summary(),
|
||||
"tag": record.get('tags')
|
||||
};
|
||||
return tlEntry;
|
||||
} else {
|
||||
@ -3945,12 +3956,12 @@ this.recline.View = this.recline.View || {};
|
||||
my.Fields = Backbone.View.extend({
|
||||
className: 'recline-fields-view',
|
||||
template: ' \
|
||||
<div class="accordion fields-list well"> \
|
||||
<div class="panel-group 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> \
|
||||
<div class="panel panel-default field"> \
|
||||
<div class="panel-heading"> \
|
||||
<i class="glyphicon glyphicon-file"></i> \
|
||||
<h4> \
|
||||
{{label}} \
|
||||
<small> \
|
||||
@ -3959,8 +3970,8 @@ my.Fields = Backbone.View.extend({
|
||||
</small> \
|
||||
</h4> \
|
||||
</div> \
|
||||
<div id="collapse{{id}}" class="accordion-body collapse"> \
|
||||
<div class="accordion-inner"> \
|
||||
<div id="collapse{{id}}" class="panel-collapse collapse"> \
|
||||
<div class="panel-body"> \
|
||||
{{#facets}} \
|
||||
<div class="facet-summary" data-facet="{{id}}"> \
|
||||
<ul class="facet-items"> \
|
||||
@ -4028,28 +4039,30 @@ my.FilterEditor = Backbone.View.extend({
|
||||
<h3>Filters</h3> \
|
||||
<a href="#" class="js-add-filter">Add filter</a> \
|
||||
<form class="form-stacked js-add" style="display: none;"> \
|
||||
<fieldset> \
|
||||
<div class="form-group"> \
|
||||
<label>Field</label> \
|
||||
<select class="fields"> \
|
||||
<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"> \
|
||||
<select class="filterType form-control"> \
|
||||
<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> \
|
||||
</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">Update</button> \
|
||||
<button type="submit" class="btn btn-default">Update</button> \
|
||||
{{/filters.length}} \
|
||||
</form> \
|
||||
</div> \
|
||||
@ -4062,7 +4075,7 @@ my.FilterEditor = Backbone.View.extend({
|
||||
{{field}} <small>{{type}}</small> \
|
||||
<a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">×</a> \
|
||||
</legend> \
|
||||
<input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
|
||||
<input class="input-sm" type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
|
||||
</fieldset> \
|
||||
</div> \
|
||||
',
|
||||
@ -4073,10 +4086,14 @@ my.FilterEditor = Backbone.View.extend({
|
||||
{{field}} <small>{{type}}</small> \
|
||||
<a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">×</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}}" /> \
|
||||
<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> \
|
||||
',
|
||||
@ -4087,12 +4104,18 @@ my.FilterEditor = Backbone.View.extend({
|
||||
{{field}} <small>{{type}}</small> \
|
||||
<a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">×</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}}" /> \
|
||||
<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> \
|
||||
'
|
||||
@ -4194,10 +4217,10 @@ my.Pager = Backbone.View.extend({
|
||||
className: 'recline-pager',
|
||||
template: ' \
|
||||
<div class="pagination"> \
|
||||
<ul> \
|
||||
<li class="prev action-pagination-update"><a href="">«</a></li> \
|
||||
<li class="active"><label for="from">From</label><a><input name="from" type="text" value="{{from}}" /> – <label for="to">To</label><input name="to" type="text" value="{{to}}" /> </a></li> \
|
||||
<li class="next action-pagination-update"><a href="">»</a></li> \
|
||||
<ul class="pagination"> \
|
||||
<li class="prev action-pagination-update"><a href="" class="btn btn-default">«</a></li> \
|
||||
<li class="page-range"><a><label for="from">From</label><input name="from" type="text" value="{{from}}" /> – <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">»</a></li> \
|
||||
</ul> \
|
||||
</div> \
|
||||
',
|
||||
@ -4267,12 +4290,17 @@ 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> \
|
||||
<label>Search</label><input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
|
||||
<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">Go »</button> \
|
||||
<button type="submit" class="btn btn-default">Go »</button> \
|
||||
</form> \
|
||||
',
|
||||
|
||||
@ -4287,7 +4315,7 @@ my.QueryEditor = Backbone.View.extend({
|
||||
},
|
||||
onFormSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
var query = this.$el.find('.text-query input').val();
|
||||
var query = this.$el.find('.search-query').val();
|
||||
this.model.set({q: query});
|
||||
},
|
||||
render: function() {
|
||||
@ -4316,7 +4344,7 @@ my.ValueFilter = Backbone.View.extend({
|
||||
<form class="form-stacked js-add" style="display: none;"> \
|
||||
<fieldset> \
|
||||
<label>Field</label> \
|
||||
<select class="fields"> \
|
||||
<select class="fields form-control"> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
|
||||
3
dist/recline.min.js
vendored
Normal file
3
dist/recline.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,66 +1,271 @@
|
||||
<!DOCTYPE html> <html> <head> <title>backend.dataproxy.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.dataproxy.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">DataProxy</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">DataProxy</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">'dataproxy'</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>URL for the dataproxy</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">dataproxy_url</span> <span class="o">=</span> <span class="s1">'//jsonpdataproxy.appspot.com'</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Timeout for dataproxy (after this time if no response we error)
|
||||
Needed because use JSONP so do not receive e.g. 500 errors </p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">timeout</span> <span class="o">=</span> <span class="mi">5000</span><span class="p">;</span>
|
||||
<html>
|
||||
<head>
|
||||
<title>backend.dataproxy.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>backend.dataproxy.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.Backend = <span class="hljs-keyword">this</span>.recline.Backend || {};
|
||||
<span class="hljs-keyword">this</span>.recline.Backend.DataProxy = <span class="hljs-keyword">this</span>.recline.Backend.DataProxy || {};
|
||||
|
||||
</pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">jQuery</span> <span class="o">!==</span> <span class="s2">"undefined"</span> <span class="o">&&</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">)</span> <span class="o">||</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <h2>load</h2>
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;
|
||||
my.__type__ = <span class="hljs-string">'dataproxy'</span>;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>URL for the dataproxy</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> my.dataproxy_url = <span class="hljs-string">'//jsonpdataproxy.appspot.com'</span>;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<p>Timeout for dataproxy (after this time if no response we error)
|
||||
Needed because use JSONP so do not receive e.g. 500 errors </p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> my.timeout = <span class="hljs-number">5000</span>;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>use either jQuery or Underscore Deferred depending on what is available</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> Deferred = (<span class="hljs-keyword">typeof</span> jQuery !== <span class="hljs-string">"undefined"</span> && jQuery.Deferred) || _.Deferred;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-5">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-5">¶</a>
|
||||
</div>
|
||||
<h2 id="load">load</h2>
|
||||
<p>Load data from a URL via the <a href="http://github.com/okfn/dataproxy">DataProxy</a>.</p>
|
||||
<p>Returns array of field names and array of arrays for records</p>
|
||||
|
||||
<p>Returns array of field names and array of arrays for records</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">fetch</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
<span class="s1">'max-results'</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">size</span> <span class="o">||</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">rows</span> <span class="o">||</span> <span class="mi">1000</span><span class="p">,</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="nx">dataset</span><span class="p">.</span><span class="nx">format</span> <span class="o">||</span> <span class="s1">''</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">jqxhr</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
<span class="nx">url</span><span class="o">:</span> <span class="nx">my</span><span class="p">.</span><span class="nx">dataproxy_url</span><span class="p">,</span>
|
||||
<span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">,</span>
|
||||
<span class="nx">dataType</span><span class="o">:</span> <span class="s1">'jsonp'</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="nx">_wrapInTimeout</span><span class="p">(</span><span class="nx">jqxhr</span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">error</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">({</span>
|
||||
<span class="nx">records</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span>
|
||||
<span class="nx">useMemoryStore</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <h2>_wrapInTimeout</h2>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> my.fetch = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(dataset)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> data = {
|
||||
url: dataset.url,
|
||||
<span class="hljs-string">'max-results'</span>: dataset.size || dataset.rows || <span class="hljs-number">1000</span>,
|
||||
type: dataset.format || <span class="hljs-string">''</span>
|
||||
};
|
||||
<span class="hljs-keyword">var</span> jqxhr = jQuery.ajax({
|
||||
url: my.dataproxy_url,
|
||||
data: data,
|
||||
dataType: <span class="hljs-string">'jsonp'</span>
|
||||
});
|
||||
<span class="hljs-keyword">var</span> dfd = <span class="hljs-keyword">new</span> Deferred();
|
||||
_wrapInTimeout(jqxhr).done(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(results)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (results.error) {
|
||||
dfd.reject(results.error);
|
||||
}
|
||||
|
||||
dfd.resolve({
|
||||
records: results.data,
|
||||
fields: results.fields,
|
||||
useMemoryStore: <span class="hljs-literal">true</span>
|
||||
});
|
||||
})
|
||||
.fail(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(args)</span> </span>{
|
||||
dfd.reject(args);
|
||||
});
|
||||
<span class="hljs-keyword">return</span> dfd.promise();
|
||||
};</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-6">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-6">¶</a>
|
||||
</div>
|
||||
<h2 id="_wrapintimeout">_wrapInTimeout</h2>
|
||||
<p>Convenience method providing a crude way to catch backend errors on JSONP calls.
|
||||
Many of backends use JSONP and so will not get error messages and this is
|
||||
a crude way to catch those errors.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">_wrapInTimeout</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">ourFunction</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">timer</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">({</span>
|
||||
<span class="nx">message</span><span class="o">:</span> <span class="s1">'Request Error: Backend did not respond after '</span> <span class="o">+</span> <span class="p">(</span><span class="nx">my</span><span class="p">.</span><span class="nx">timeout</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">+</span> <span class="s1">' seconds'</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="nx">my</span><span class="p">.</span><span class="nx">timeout</span><span class="p">);</span>
|
||||
<span class="nx">ourFunction</span><span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timer</span><span class="p">);</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">args</span><span class="p">);</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">};</span>
|
||||
a crude way to catch those errors.</p>
|
||||
|
||||
<span class="p">}(</span><span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">DataProxy</span><span class="p">));</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> _wrapInTimeout = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(ourFunction)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> dfd = <span class="hljs-keyword">new</span> Deferred();
|
||||
<span class="hljs-keyword">var</span> timer = setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
dfd.reject({
|
||||
message: <span class="hljs-string">'Request Error: Backend did not respond after '</span> + (my.timeout / <span class="hljs-number">1000</span>) + <span class="hljs-string">' seconds'</span>
|
||||
});
|
||||
}, my.timeout);
|
||||
ourFunction.done(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(args)</span> </span>{
|
||||
clearTimeout(timer);
|
||||
dfd.resolve(args);
|
||||
})
|
||||
.fail(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(args)</span> </span>{
|
||||
clearTimeout(timer);
|
||||
dfd.reject(args);
|
||||
})
|
||||
;
|
||||
<span class="hljs-keyword">return</span> dfd.promise();
|
||||
};
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
}(<span class="hljs-keyword">this</span>.recline.Backend.DataProxy));</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,198 +1,631 @@
|
||||
<!DOCTYPE html> <html> <head> <title>backend.memory.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> backend.memory.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">Memory</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">Memory</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">__type__</span> <span class="o">=</span> <span class="s1">'memory'</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>private data - use either jQuery or Underscore Deferred depending on what is available</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">Deferred</span> <span class="o">=</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">jQuery</span> <span class="o">!==</span> <span class="s2">"undefined"</span> <span class="o">&&</span> <span class="nx">jQuery</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">)</span> <span class="o">||</span> <span class="nx">_</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>Data Wrapper</h2>
|
||||
<html>
|
||||
<head>
|
||||
<title>backend.memory.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>backend.memory.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.Backend = <span class="hljs-keyword">this</span>.recline.Backend || {};
|
||||
<span class="hljs-keyword">this</span>.recline.Backend.Memory = <span class="hljs-keyword">this</span>.recline.Backend.Memory || {};
|
||||
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;
|
||||
my.__type__ = <span class="hljs-string">'memory'</span>;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>private data - use either jQuery or Underscore Deferred depending on what is available</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> Deferred = (<span class="hljs-keyword">typeof</span> jQuery !== <span class="hljs-string">"undefined"</span> && jQuery.Deferred) || _.Deferred;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<h2 id="data-wrapper">Data Wrapper</h2>
|
||||
<p>Turn a simple array of JS objects into a mini data-store with
|
||||
functionality like querying, faceting, updating (by ID) and deleting (by
|
||||
ID).</p>
|
||||
|
||||
<p>@param records list of hashes for each record/row in the data ({key:
|
||||
value, key: value})
|
||||
@param fields (optional) list of field hashes (each hash defining a field
|
||||
as per recline.Model.Field). If fields not specified they will be taken
|
||||
from the data.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">my</span><span class="p">.</span><span class="nx">Store</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">records</span><span class="p">,</span> <span class="nx">fields</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">records</span> <span class="o">=</span> <span class="nx">records</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>backwards compatability (in v0.5 records was named data)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">fields</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">fields</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">records</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">records</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">,</span> <span class="nx">key</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="nx">key</span><span class="p">,</span> <span class="nx">type</span><span class="o">:</span> <span class="s1">'string'</span><span class="p">};</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
from the data.</p>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">update</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">internalDoc</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">internalDoc</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">records</span><span class="p">[</span><span class="nx">idx</span><span class="p">]</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">};</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> my.Store = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(records, fields)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">this</span>.records = records;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>backwards compatability (in v0.5 records was named data)</p>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">remove</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">newdocs</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">reject</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">internalDoc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">internalDoc</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">records</span> <span class="o">=</span> <span class="nx">newdocs</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.data = <span class="hljs-keyword">this</span>.records;
|
||||
<span class="hljs-keyword">if</span> (fields) {
|
||||
<span class="hljs-keyword">this</span>.fields = fields;
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-keyword">if</span> (records) {
|
||||
<span class="hljs-keyword">this</span>.fields = _.map(records[<span class="hljs-number">0</span>], <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value, key)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> {id: key, type: <span class="hljs-string">'string'</span>};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">save</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">changes</span><span class="p">,</span> <span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>TODO _.each(changes.creates) { ... }</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">changes</span><span class="p">.</span><span class="nx">updates</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">record</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">changes</span><span class="p">.</span><span class="nx">deletes</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">record</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="hljs-keyword">this</span>.update = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(doc)</span> </span>{
|
||||
_.each(self.records, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(internalDoc, idx)</span> </span>{
|
||||
<span class="hljs-keyword">if</span>(doc.id === internalDoc.id) {
|
||||
self.records[idx] = doc;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">query</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">dfd</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Deferred</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">numRows</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">size</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">start</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">from</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">records</span><span class="p">;</span>
|
||||
<span class="hljs-keyword">this</span>.remove = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(doc)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> newdocs = _.reject(self.records, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(internalDoc)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> (doc.id === internalDoc.id);
|
||||
});
|
||||
<span class="hljs-keyword">this</span>.records = newdocs;
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">this</span>.save = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(changes, dataset)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> dfd = <span class="hljs-keyword">new</span> Deferred();</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-5">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-5">¶</a>
|
||||
</div>
|
||||
<p>TODO _.each(changes.creates) { … }</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> _.each(changes.updates, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(record)</span> </span>{
|
||||
self.update(record);
|
||||
});
|
||||
_.each(changes.deletes, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(record)</span> </span>{
|
||||
self.remove(record);
|
||||
});
|
||||
dfd.resolve();
|
||||
<span class="hljs-keyword">return</span> dfd.promise();
|
||||
},
|
||||
|
||||
<span class="hljs-keyword">this</span>.query = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(queryObj)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> dfd = <span class="hljs-keyword">new</span> Deferred();
|
||||
<span class="hljs-keyword">var</span> numRows = queryObj.size || <span class="hljs-keyword">this</span>.records.length;
|
||||
<span class="hljs-keyword">var</span> start = queryObj.from || <span class="hljs-number">0</span>;
|
||||
<span class="hljs-keyword">var</span> results = <span class="hljs-keyword">this</span>.records;
|
||||
|
||||
<span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFilters</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">);</span>
|
||||
<span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFreeTextQuery</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>TODO: this is not complete sorting!
|
||||
What's wrong is we sort on the <em>last</em> entry in the sort list if there are multiple sort criteria</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">sort</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">sortObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldName</span> <span class="o">=</span> <span class="nx">sortObj</span><span class="p">.</span><span class="nx">field</span><span class="p">;</span>
|
||||
<span class="nx">results</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">_out</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">[</span><span class="nx">fieldName</span><span class="p">];</span>
|
||||
<span class="k">return</span> <span class="nx">_out</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">sortObj</span><span class="p">.</span><span class="nx">order</span> <span class="o">==</span> <span class="s1">'desc'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">results</span><span class="p">.</span><span class="nx">reverse</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">facets</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">computeFacets</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">total</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
|
||||
<span class="nx">hits</span><span class="o">:</span> <span class="nx">results</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="nx">start</span><span class="p">,</span> <span class="nx">start</span><span class="o">+</span><span class="nx">numRows</span><span class="p">),</span>
|
||||
<span class="nx">facets</span><span class="o">:</span> <span class="nx">facets</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">dfd</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="nx">dfd</span><span class="p">.</span><span class="nx">promise</span><span class="p">();</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>in place filtering</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFilters</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">filters</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>register filters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">filterFunctions</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">term</span> <span class="o">:</span> <span class="nx">term</span><span class="p">,</span>
|
||||
<span class="nx">terms</span> <span class="o">:</span> <span class="nx">terms</span><span class="p">,</span>
|
||||
<span class="nx">range</span> <span class="o">:</span> <span class="nx">range</span><span class="p">,</span>
|
||||
<span class="nx">geo_distance</span> <span class="o">:</span> <span class="nx">geo_distance</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">dataParsers</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">integer</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="s1">'float'</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">number</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">string</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span> <span class="p">},</span>
|
||||
<span class="nx">date</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">moment</span><span class="p">(</span><span class="nx">e</span><span class="p">).</span><span class="nx">valueOf</span><span class="p">();</span> <span class="p">},</span>
|
||||
<span class="nx">datetime</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">e</span><span class="p">).</span><span class="nx">valueOf</span><span class="p">();</span> <span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">keyedFields</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">keyedFields</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">field</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">function</span> <span class="nx">getDataParser</span><span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldType</span> <span class="o">=</span> <span class="nx">keyedFields</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">field</span><span class="p">].</span><span class="nx">type</span> <span class="o">||</span> <span class="s1">'string'</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">dataParsers</span><span class="p">[</span><span class="nx">fieldType</span><span class="p">];</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>filter records</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">passes</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">filterFunctions</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">type</span><span class="p">](</span><span class="nx">record</span><span class="p">,</span> <span class="nx">filter</span><span class="p">);</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>return only these records that pass all filters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">all</span><span class="p">(</span><span class="nx">passes</span><span class="p">,</span> <span class="nx">_</span><span class="p">.</span><span class="nx">identity</span><span class="p">);</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>filters definitions</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">term</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">parse</span> <span class="o">=</span> <span class="nx">getDataParser</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">record</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">field</span><span class="p">]);</span>
|
||||
<span class="kd">var</span> <span class="nx">term</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">term</span><span class="p">);</span>
|
||||
results = <span class="hljs-keyword">this</span>._applyFilters(results, queryObj);
|
||||
results = <span class="hljs-keyword">this</span>._applyFreeTextQuery(results, queryObj);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-6">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-6">¶</a>
|
||||
</div>
|
||||
<p>TODO: this is not complete sorting!
|
||||
What’s wrong is we sort on the <em>last</em> entry in the sort list if there are multiple sort criteria</p>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span><span class="nx">value</span> <span class="o">===</span> <span class="nx">term</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> _.each(queryObj.sort, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(sortObj)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> fieldName = sortObj.field;
|
||||
results = _.sortBy(results, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(doc)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> _out = doc[fieldName];
|
||||
<span class="hljs-keyword">return</span> _out;
|
||||
});
|
||||
<span class="hljs-keyword">if</span> (sortObj.order == <span class="hljs-string">'desc'</span>) {
|
||||
results.reverse();
|
||||
}
|
||||
});
|
||||
<span class="hljs-keyword">var</span> facets = <span class="hljs-keyword">this</span>.computeFacets(results, queryObj);
|
||||
<span class="hljs-keyword">var</span> out = {
|
||||
total: results.length,
|
||||
hits: results.slice(start, start+numRows),
|
||||
facets: facets
|
||||
};
|
||||
dfd.resolve(out);
|
||||
<span class="hljs-keyword">return</span> dfd.promise();
|
||||
};</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-7">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-7">¶</a>
|
||||
</div>
|
||||
<p>in place filtering</p>
|
||||
|
||||
<span class="kd">function</span> <span class="nx">terms</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">parse</span> <span class="o">=</span> <span class="nx">getDataParser</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">record</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">field</span><span class="p">]);</span>
|
||||
<span class="kd">var</span> <span class="nx">terms</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">terms</span><span class="p">).</span><span class="nx">split</span><span class="p">(</span><span class="s2">","</span><span class="p">);</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>._applyFilters = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(results, queryObj)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> filters = queryObj.filters;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-8">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-8">¶</a>
|
||||
</div>
|
||||
<p>register filters</p>
|
||||
|
||||
<span class="k">return</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">terms</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="o">>=</span> <span class="mi">0</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> filterFunctions = {
|
||||
term : term,
|
||||
terms : terms,
|
||||
range : range,
|
||||
geo_distance : geo_distance
|
||||
};
|
||||
<span class="hljs-keyword">var</span> dataParsers = {
|
||||
integer: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(e, <span class="hljs-number">10</span>); },
|
||||
<span class="hljs-string">'float'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(e, <span class="hljs-number">10</span>); },
|
||||
number: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-built_in">parseFloat</span>(e, <span class="hljs-number">10</span>); },
|
||||
string : <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">return</span> e.toString(); },
|
||||
date : <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">return</span> moment(e).valueOf(); },
|
||||
datetime : <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(e).valueOf(); }
|
||||
};
|
||||
<span class="hljs-keyword">var</span> keyedFields = {};
|
||||
_.each(self.fields, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
||||
keyedFields[field.id] = field;
|
||||
});
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getDataParser</span><span class="hljs-params">(filter)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> fieldType = keyedFields[filter.field].type || <span class="hljs-string">'string'</span>;
|
||||
<span class="hljs-keyword">return</span> dataParsers[fieldType];
|
||||
}</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-9">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-9">¶</a>
|
||||
</div>
|
||||
<p>filter records</p>
|
||||
|
||||
<span class="kd">function</span> <span class="nx">range</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">filter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fromnull</span> <span class="o">=</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">from</span><span class="p">)</span> <span class="o">||</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">from</span> <span class="o">===</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">from</span> <span class="o">===</span> <span class="s1">''</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">tonull</span> <span class="o">=</span> <span class="p">(</span><span class="nx">_</span><span class="p">.</span><span class="nx">isUndefined</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">to</span><span class="p">)</span> <span class="o">||</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">to</span> <span class="o">===</span> <span class="kc">null</span> <span class="o">||</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">to</span> <span class="o">===</span> <span class="s1">''</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">parse</span> <span class="o">=</span> <span class="nx">getDataParser</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">record</span><span class="p">[</span><span class="nx">filter</span><span class="p">.</span><span class="nx">field</span><span class="p">]);</span>
|
||||
<span class="kd">var</span> <span class="nx">from</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">fromnull</span> <span class="o">?</span> <span class="s1">''</span> <span class="o">:</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">from</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">to</span> <span class="o">=</span> <span class="nx">parse</span><span class="p">(</span><span class="nx">tonull</span> <span class="o">?</span> <span class="s1">''</span> <span class="o">:</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">to</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>if at least one end of range is set do not allow '' to get through
|
||||
note that for strings '' <= {any-character} e.g. '' <= 'a'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">((</span><span class="o">!</span><span class="nx">fromnull</span> <span class="o">||</span> <span class="o">!</span><span class="nx">tonull</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">value</span> <span class="o">===</span> <span class="s1">''</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="p">((</span><span class="nx">fromnull</span> <span class="o">||</span> <span class="nx">value</span> <span class="o">>=</span> <span class="nx">from</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">tonull</span> <span class="o">||</span> <span class="nx">value</span> <span class="o"><=</span> <span class="nx">to</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> _.filter(results, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(record)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> passes = _.map(filters, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(filter)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> filterFunctions[filter.type](record, filter);
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-10">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-10">¶</a>
|
||||
</div>
|
||||
<p>return only these records that pass all filters</p>
|
||||
|
||||
<span class="kd">function</span> <span class="nx">geo_distance</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>TODO code here</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">}</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>we OR across fields but AND across terms in query string</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">_applyFreeTextQuery</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">terms</span> <span class="o">=</span> <span class="nx">queryObj</span><span class="p">.</span><span class="nx">q</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">' '</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">patterns</span><span class="o">=</span><span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">terms</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">term</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="nx">term</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">());</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">results</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rawdoc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">matches</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">patterns</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pattern</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">foundmatch</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">rawdoc</span><span class="p">[</span><span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">];</span>
|
||||
<span class="k">if</span> <span class="p">((</span><span class="nx">value</span> <span class="o">!==</span> <span class="kc">null</span><span class="p">)</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">value</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nx">value</span> <span class="o">=</span> <span class="nx">value</span><span class="p">.</span><span class="nx">toString</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>value can be null (apparently in some cases)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>TODO regexes?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">foundmatch</span> <span class="o">=</span> <span class="nx">foundmatch</span> <span class="o">||</span> <span class="p">(</span><span class="nx">pattern</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">value</span><span class="p">.</span><span class="nx">toLowerCase</span><span class="p">()));</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>TODO: early out (once we are true should break to spare unnecessary testing)
|
||||
if (foundmatch) return true;</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">});</span>
|
||||
<span class="nx">matches</span> <span class="o">=</span> <span class="nx">matches</span> <span class="o">&&</span> <span class="nx">foundmatch</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>TODO: early out (once false should break to spare unnecessary testing)
|
||||
if (!matches) return false;</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">matches</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">results</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> _.all(passes, _.identity);
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-11">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-11">¶</a>
|
||||
</div>
|
||||
<p>filters definitions</p>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">computeFacets</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">records</span><span class="p">,</span> <span class="nx">queryObj</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">facetResults</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">facetResults</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>TODO: remove dependency on recline.Model</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Facet</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="nx">facetId</span><span class="p">}).</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">].</span><span class="nx">termsall</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>faceting</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">records</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nx">terms</span><span class="p">.</span><span class="nx">field</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">[</span><span class="nx">fieldId</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">tmp</span> <span class="o">=</span> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">];</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">[</span><span class="nx">val</span><span class="p">]</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">[</span><span class="nx">val</span><span class="p">]</span> <span class="o">?</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">[</span><span class="nx">val</span><span class="p">]</span> <span class="o">+</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">tmp</span><span class="p">.</span><span class="nx">missing</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">missing</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryObj</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span> <span class="nx">facetId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmp</span> <span class="o">=</span> <span class="nx">facetResults</span><span class="p">[</span><span class="nx">facetId</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">terms</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmp</span><span class="p">.</span><span class="nx">termsall</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">count</span><span class="p">,</span> <span class="nx">term</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">term</span><span class="o">:</span> <span class="nx">term</span><span class="p">,</span> <span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="p">};</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">sortBy</span><span class="p">(</span><span class="nx">terms</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>want descending order</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="o">-</span><span class="nx">item</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span> <span class="o">=</span> <span class="nx">tmp</span><span class="p">.</span><span class="nx">terms</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">facetResults</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">};</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">term</span><span class="hljs-params">(record, filter)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> parse = getDataParser(filter);
|
||||
<span class="hljs-keyword">var</span> value = parse(record[filter.field]);
|
||||
<span class="hljs-keyword">var</span> term = parse(filter.term);
|
||||
|
||||
<span class="p">}(</span><span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">Backend</span><span class="p">.</span><span class="nx">Memory</span><span class="p">));</span>
|
||||
<span class="hljs-keyword">return</span> (value === term);
|
||||
}
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">terms</span><span class="hljs-params">(record, filter)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> parse = getDataParser(filter);
|
||||
<span class="hljs-keyword">var</span> value = parse(record[filter.field]);
|
||||
<span class="hljs-keyword">var</span> terms = parse(filter.terms).split(<span class="hljs-string">","</span>);
|
||||
|
||||
<span class="hljs-keyword">return</span> (_.indexOf(terms, value) >= <span class="hljs-number">0</span>);
|
||||
}
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">range</span><span class="hljs-params">(record, filter)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> fromnull = (_.isUndefined(filter.from) || filter.from === <span class="hljs-literal">null</span> || filter.from === <span class="hljs-string">''</span>);
|
||||
<span class="hljs-keyword">var</span> tonull = (_.isUndefined(filter.to) || filter.to === <span class="hljs-literal">null</span> || filter.to === <span class="hljs-string">''</span>);
|
||||
<span class="hljs-keyword">var</span> parse = getDataParser(filter);
|
||||
<span class="hljs-keyword">var</span> value = parse(record[filter.field]);
|
||||
<span class="hljs-keyword">var</span> from = parse(fromnull ? <span class="hljs-string">''</span> : filter.from);
|
||||
<span class="hljs-keyword">var</span> to = parse(tonull ? <span class="hljs-string">''</span> : filter.to);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-12">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-12">¶</a>
|
||||
</div>
|
||||
<p>if at least one end of range is set do not allow ‘’ to get through
|
||||
note that for strings ‘’ <= {any-character} e.g. ‘’ <= ‘a’</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ((!fromnull || !tonull) && value === <span class="hljs-string">''</span>) {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
|
||||
}
|
||||
<span class="hljs-keyword">return</span> ((fromnull || value >= from) && (tonull || value <= to));
|
||||
}
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">geo_distance</span><span class="hljs-params">()</span> </span>{</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-13">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-13">¶</a>
|
||||
</div>
|
||||
<p>TODO code here</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> }
|
||||
};</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-14">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-14">¶</a>
|
||||
</div>
|
||||
<p>we OR across fields but AND across terms in query string</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>._applyFreeTextQuery = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(results, queryObj)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (queryObj.q) {
|
||||
<span class="hljs-keyword">var</span> terms = queryObj.q.split(<span class="hljs-string">' '</span>);
|
||||
<span class="hljs-keyword">var</span> patterns=_.map(terms, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(term)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">RegExp</span>(term.toLowerCase());
|
||||
});
|
||||
results = _.filter(results, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(rawdoc)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> matches = <span class="hljs-literal">true</span>;
|
||||
_.each(patterns, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(pattern)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> foundmatch = <span class="hljs-literal">false</span>;
|
||||
_.each(self.fields, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> value = rawdoc[field.id];
|
||||
<span class="hljs-keyword">if</span> ((value !== <span class="hljs-literal">null</span>) && (value !== <span class="hljs-literal">undefined</span>)) {
|
||||
value = value.toString();
|
||||
} <span class="hljs-keyword">else</span> {</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-15">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-15">¶</a>
|
||||
</div>
|
||||
<p>value can be null (apparently in some cases)</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> value = <span class="hljs-string">''</span>;
|
||||
}</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-16">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-16">¶</a>
|
||||
</div>
|
||||
<p>TODO regexes?</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> foundmatch = foundmatch || (pattern.test(value.toLowerCase()));</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-17">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-17">¶</a>
|
||||
</div>
|
||||
<p>TODO: early out (once we are true should break to spare unnecessary testing)
|
||||
if (foundmatch) return true;</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> });
|
||||
matches = matches && foundmatch;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-18">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-18">¶</a>
|
||||
</div>
|
||||
<p>TODO: early out (once false should break to spare unnecessary testing)
|
||||
if (!matches) return false;</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> });
|
||||
<span class="hljs-keyword">return</span> matches;
|
||||
});
|
||||
}
|
||||
<span class="hljs-keyword">return</span> results;
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">this</span>.computeFacets = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(records, queryObj)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> facetResults = {};
|
||||
<span class="hljs-keyword">if</span> (!queryObj.facets) {
|
||||
<span class="hljs-keyword">return</span> facetResults;
|
||||
}
|
||||
_.each(queryObj.facets, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(query, facetId)</span> </span>{</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-19">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-19">¶</a>
|
||||
</div>
|
||||
<p>TODO: remove dependency on recline.Model</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> facetResults[facetId] = <span class="hljs-keyword">new</span> recline.Model.Facet({id: facetId}).toJSON();
|
||||
facetResults[facetId].termsall = {};
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-20">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-20">¶</a>
|
||||
</div>
|
||||
<p>faceting</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> _.each(records, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(doc)</span> </span>{
|
||||
_.each(queryObj.facets, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(query, facetId)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> fieldId = query.terms.field;
|
||||
<span class="hljs-keyword">var</span> val = doc[fieldId];
|
||||
<span class="hljs-keyword">var</span> tmp = facetResults[facetId];
|
||||
<span class="hljs-keyword">if</span> (val) {
|
||||
tmp.termsall[val] = tmp.termsall[val] ? tmp.termsall[val] + <span class="hljs-number">1</span> : <span class="hljs-number">1</span>;
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
tmp.missing = tmp.missing + <span class="hljs-number">1</span>;
|
||||
}
|
||||
});
|
||||
});
|
||||
_.each(queryObj.facets, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(query, facetId)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> tmp = facetResults[facetId];
|
||||
<span class="hljs-keyword">var</span> terms = _.map(tmp.termsall, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(count, term)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> { term: term, count: count };
|
||||
});
|
||||
tmp.terms = _.sortBy(terms, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(item)</span> </span>{</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-21">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-21">¶</a>
|
||||
</div>
|
||||
<p>want descending order</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> -item.count;
|
||||
});
|
||||
tmp.terms = tmp.terms.slice(<span class="hljs-number">0</span>, <span class="hljs-number">10</span>);
|
||||
});
|
||||
<span class="hljs-keyword">return</span> facetResults;
|
||||
};
|
||||
};
|
||||
|
||||
}(<span class="hljs-keyword">this</span>.recline.Backend.Memory));</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,192 +1,518 @@
|
||||
/*--------------------- Layout and Typography ----------------------------*/
|
||||
/*--------------------- Typography ----------------------------*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'aller-light';
|
||||
src: url('public/fonts/aller-light.eot');
|
||||
src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
|
||||
url('public/fonts/aller-light.woff') format('woff'),
|
||||
url('public/fonts/aller-light.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'aller-bold';
|
||||
src: url('public/fonts/aller-bold.eot');
|
||||
src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('public/fonts/aller-bold.woff') format('woff'),
|
||||
url('public/fonts/aller-bold.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'roboto-black';
|
||||
src: url('public/fonts/roboto-black.eot');
|
||||
src: url('public/fonts/roboto-black.eot?#iefix') format('embedded-opentype'),
|
||||
url('public/fonts/roboto-black.woff') format('woff'),
|
||||
url('public/fonts/roboto-black.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*--------------------- Layout ----------------------------*/
|
||||
html { height: 100%; }
|
||||
body {
|
||||
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: #252519;
|
||||
font-family: "aller-light";
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: #30404f;
|
||||
margin: 0; padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
#container { min-height: 100%; }
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: normal;
|
||||
font-family: "aller-bold";
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 15px 0 0px;
|
||||
}
|
||||
.annotation ul, .annotation ol {
|
||||
margin: 25px 0;
|
||||
}
|
||||
.annotation ul li, .annotation ol li {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #112233;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
font-family: "roboto-black";
|
||||
text-transform: uppercase;
|
||||
margin: 30px 0 15px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.26em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
background: 1px #ddd;
|
||||
height: 1px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
pre, tt, code {
|
||||
font-size: 12px; line-height: 16px;
|
||||
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
a {
|
||||
color: #261a3b;
|
||||
}
|
||||
a:visited {
|
||||
color: #261a3b;
|
||||
.annotation pre {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 7px 10px;
|
||||
background: #fcfcfc;
|
||||
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||
overflow-x: auto;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px 0;
|
||||
.annotation pre code {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
border-left: 5px solid #ccc;
|
||||
margin: 0;
|
||||
padding: 1px 0 1px 1em;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0px 0 15px 0;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 40px;
|
||||
.sections blockquote p {
|
||||
font-family: Menlo, Consolas, Monaco, monospace;
|
||||
font-size: 12px; line-height: 16px;
|
||||
color: #999;
|
||||
margin: 10px 0 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
hr {
|
||||
border: 0 none;
|
||||
border-top: 1px solid #e5e5ee;
|
||||
height: 1px;
|
||||
margin: 20px 0;
|
||||
|
||||
ul.sections {
|
||||
list-style: none;
|
||||
padding:0 0 5px 0;;
|
||||
margin:0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#background {
|
||||
position: fixed;
|
||||
top: 0; left: 525px; right: 0; bottom: 0;
|
||||
background: #f5f5ff;
|
||||
border-left: 1px solid #e5e5ee;
|
||||
z-index: -1;
|
||||
|
||||
/*
|
||||
Force border-box so that % widths fit the parent
|
||||
container without overlap because of margin/padding.
|
||||
|
||||
More Info : http://www.quirksmode.org/css/box.html
|
||||
*/
|
||||
ul.sections > li > div {
|
||||
-moz-box-sizing: border-box; /* firefox */
|
||||
-ms-box-sizing: border-box; /* ie */
|
||||
-webkit-box-sizing: border-box; /* webkit */
|
||||
-khtml-box-sizing: border-box; /* konqueror */
|
||||
box-sizing: border-box; /* css3 */
|
||||
}
|
||||
|
||||
|
||||
/*---------------------- Jump Page -----------------------------*/
|
||||
#jump_to, #jump_page {
|
||||
margin: 0;
|
||||
background: white;
|
||||
-webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
|
||||
-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
|
||||
font: 10px Arial;
|
||||
text-transform: uppercase;
|
||||
font: 16px Arial;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#jump_to a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#jump_to a.large {
|
||||
display: none;
|
||||
}
|
||||
#jump_to a.small {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
#jump_to, #jump_wrapper {
|
||||
position: fixed;
|
||||
right: 0; top: 0;
|
||||
padding: 5px 10px;
|
||||
padding: 10px 15px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#jump_wrapper {
|
||||
display: none;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
#jump_to:hover #jump_wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#jump_page_wrapper{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#jump_page {
|
||||
padding: 5px 0 3px;
|
||||
margin: 0 0 25px 25px;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#jump_page .source {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
#jump_page .source:hover {
|
||||
background: #f5f5ff;
|
||||
}
|
||||
|
||||
#jump_page .source:first-child {
|
||||
}
|
||||
|
||||
/*---------------------- Low resolutions (> 320px) ---------------------*/
|
||||
@media only screen and (min-width: 320px) {
|
||||
.pilwrap { display: none; }
|
||||
|
||||
ul.sections > li > div {
|
||||
display: block;
|
||||
padding:5px 10px 0 10px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.content {
|
||||
overflow-x:auto;
|
||||
-webkit-box-shadow: inset 0 0 5px #e5e5ee;
|
||||
box-shadow: inset 0 0 5px #e5e5ee;
|
||||
border: 1px solid #dedede;
|
||||
margin:5px 10px 5px 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation pre {
|
||||
margin: 7px 0 7px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation p tt, .annotation code {
|
||||
background: #f8f8ff;
|
||||
border: 1px solid #dedede;
|
||||
font-size: 12px;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------- (> 481px) ---------------------*/
|
||||
@media only screen and (min-width: 481px) {
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
body {
|
||||
background-color: #F5F5FF;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
pre, tt, code {
|
||||
line-height: 18px;
|
||||
}
|
||||
p, ul, ol {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
|
||||
#jump_to {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#jump_wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
#jump_to, #jump_page {
|
||||
font: 10px Arial;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#jump_page .source {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#jump_to a.large {
|
||||
display: inline-block;
|
||||
}
|
||||
#jump_to a.small {
|
||||
display: none;
|
||||
}
|
||||
#jump_to:hover #jump_wrapper {
|
||||
display: block;
|
||||
}
|
||||
#jump_page {
|
||||
padding: 5px 0 3px;
|
||||
margin: 0 0 25px 25px;
|
||||
}
|
||||
#jump_page .source {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#jump_page .source:hover {
|
||||
background: #f5f5ff;
|
||||
}
|
||||
#jump_page .source:first-child {
|
||||
}
|
||||
table td {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
td.docs, th.docs {
|
||||
max-width: 450px;
|
||||
min-width: 450px;
|
||||
|
||||
|
||||
|
||||
#background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
width: 350px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #e5e5ee;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
ul.sections > li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
ul.sections > li > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation {
|
||||
max-width: 350px;
|
||||
min-width: 350px;
|
||||
min-height: 5px;
|
||||
padding: 10px 25px 1px 50px;
|
||||
padding: 13px;
|
||||
overflow-x: hidden;
|
||||
white-space: normal;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
.docs pre {
|
||||
margin: 15px 0 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.docs p tt, .docs p code {
|
||||
background: #f8f8ff;
|
||||
border: 1px solid #dedede;
|
||||
font-size: 12px;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
.pilwrap {
|
||||
position: relative;
|
||||
}
|
||||
.pilcrow {
|
||||
font: 12px Arial;
|
||||
text-decoration: none;
|
||||
color: #454545;
|
||||
position: absolute;
|
||||
top: 3px; left: -20px;
|
||||
padding: 1px 2px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
td.docs:hover .pilcrow {
|
||||
opacity: 1;
|
||||
}
|
||||
td.code, th.code {
|
||||
padding: 14px 15px 16px 25px;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
background: #f5f5ff;
|
||||
border-left: 1px solid #e5e5ee;
|
||||
ul.sections > li > div.annotation pre {
|
||||
margin: 15px 0 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
pre, tt, code {
|
||||
font-size: 12px; line-height: 18px;
|
||||
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
|
||||
margin: 0; padding: 0;
|
||||
|
||||
ul.sections > li > div.content {
|
||||
padding: 13px;
|
||||
vertical-align: top;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pilwrap {
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pilcrow {
|
||||
font: 12px Arial;
|
||||
text-decoration: none;
|
||||
color: #454545;
|
||||
position: absolute;
|
||||
top: 3px; left: -20px;
|
||||
padding: 1px 2px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
.for-h1 .pilcrow {
|
||||
top: 47px;
|
||||
}
|
||||
.for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
ul.sections > li > div.annotation:hover .pilcrow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------- (> 1025px) ---------------------*/
|
||||
@media only screen and (min-width: 1025px) {
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#background {
|
||||
width: 525px;
|
||||
}
|
||||
ul.sections > li > div.annotation {
|
||||
max-width: 525px;
|
||||
min-width: 525px;
|
||||
padding: 10px 25px 1px 50px;
|
||||
}
|
||||
ul.sections > li > div.content {
|
||||
padding: 9px 15px 16px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------------- Syntax Highlighting -----------------------------*/
|
||||
|
||||
td.linenos { background-color: #f0f0f0; padding-right: 10px; }
|
||||
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
|
||||
body .hll { background-color: #ffffcc }
|
||||
body .c { color: #408080; font-style: italic } /* Comment */
|
||||
body .err { border: 1px solid #FF0000 } /* Error */
|
||||
body .k { color: #954121 } /* Keyword */
|
||||
body .o { color: #666666 } /* Operator */
|
||||
body .cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
||||
body .cp { color: #BC7A00 } /* Comment.Preproc */
|
||||
body .c1 { color: #408080; font-style: italic } /* Comment.Single */
|
||||
body .cs { color: #408080; font-style: italic } /* Comment.Special */
|
||||
body .gd { color: #A00000 } /* Generic.Deleted */
|
||||
body .ge { font-style: italic } /* Generic.Emph */
|
||||
body .gr { color: #FF0000 } /* Generic.Error */
|
||||
body .gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||
body .gi { color: #00A000 } /* Generic.Inserted */
|
||||
body .go { color: #808080 } /* Generic.Output */
|
||||
body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
||||
body .gs { font-weight: bold } /* Generic.Strong */
|
||||
body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||
body .gt { color: #0040D0 } /* Generic.Traceback */
|
||||
body .kc { color: #954121 } /* Keyword.Constant */
|
||||
body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */
|
||||
body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */
|
||||
body .kp { color: #954121 } /* Keyword.Pseudo */
|
||||
body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */
|
||||
body .kt { color: #B00040 } /* Keyword.Type */
|
||||
body .m { color: #666666 } /* Literal.Number */
|
||||
body .s { color: #219161 } /* Literal.String */
|
||||
body .na { color: #7D9029 } /* Name.Attribute */
|
||||
body .nb { color: #954121 } /* Name.Builtin */
|
||||
body .nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
||||
body .no { color: #880000 } /* Name.Constant */
|
||||
body .nd { color: #AA22FF } /* Name.Decorator */
|
||||
body .ni { color: #999999; font-weight: bold } /* Name.Entity */
|
||||
body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
||||
body .nf { color: #0000FF } /* Name.Function */
|
||||
body .nl { color: #A0A000 } /* Name.Label */
|
||||
body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
||||
body .nt { color: #954121; font-weight: bold } /* Name.Tag */
|
||||
body .nv { color: #19469D } /* Name.Variable */
|
||||
body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
||||
body .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
body .mf { color: #666666 } /* Literal.Number.Float */
|
||||
body .mh { color: #666666 } /* Literal.Number.Hex */
|
||||
body .mi { color: #666666 } /* Literal.Number.Integer */
|
||||
body .mo { color: #666666 } /* Literal.Number.Oct */
|
||||
body .sb { color: #219161 } /* Literal.String.Backtick */
|
||||
body .sc { color: #219161 } /* Literal.String.Char */
|
||||
body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */
|
||||
body .s2 { color: #219161 } /* Literal.String.Double */
|
||||
body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
||||
body .sh { color: #219161 } /* Literal.String.Heredoc */
|
||||
body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
||||
body .sx { color: #954121 } /* Literal.String.Other */
|
||||
body .sr { color: #BB6688 } /* Literal.String.Regex */
|
||||
body .s1 { color: #219161 } /* Literal.String.Single */
|
||||
body .ss { color: #19469D } /* Literal.String.Symbol */
|
||||
body .bp { color: #954121 } /* Name.Builtin.Pseudo */
|
||||
body .vc { color: #19469D } /* Name.Variable.Class */
|
||||
body .vg { color: #19469D } /* Name.Variable.Global */
|
||||
body .vi { color: #19469D } /* Name.Variable.Instance */
|
||||
body .il { color: #666666 } /* Literal.Number.Integer.Long */
|
||||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block; padding: 0.5em;
|
||||
color: #000;
|
||||
background: #f8f8ff
|
||||
}
|
||||
|
||||
pre .hljs-comment,
|
||||
pre .hljs-template_comment,
|
||||
pre .hljs-diff .hljs-header,
|
||||
pre .hljs-javadoc {
|
||||
color: #408080;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
pre .hljs-keyword,
|
||||
pre .hljs-assignment,
|
||||
pre .hljs-literal,
|
||||
pre .hljs-css .hljs-rule .hljs-keyword,
|
||||
pre .hljs-winutils,
|
||||
pre .hljs-javascript .hljs-title,
|
||||
pre .hljs-lisp .hljs-title,
|
||||
pre .hljs-subst {
|
||||
color: #954121;
|
||||
/*font-weight: bold*/
|
||||
}
|
||||
|
||||
pre .hljs-number,
|
||||
pre .hljs-hexcolor {
|
||||
color: #40a070
|
||||
}
|
||||
|
||||
pre .hljs-string,
|
||||
pre .hljs-tag .hljs-value,
|
||||
pre .hljs-phpdoc,
|
||||
pre .hljs-tex .hljs-formula {
|
||||
color: #219161;
|
||||
}
|
||||
|
||||
pre .hljs-title,
|
||||
pre .hljs-id {
|
||||
color: #19469D;
|
||||
}
|
||||
pre .hljs-params {
|
||||
color: #00F;
|
||||
}
|
||||
|
||||
pre .hljs-javascript .hljs-title,
|
||||
pre .hljs-lisp .hljs-title,
|
||||
pre .hljs-subst {
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
pre .hljs-class .hljs-title,
|
||||
pre .hljs-haskell .hljs-label,
|
||||
pre .hljs-tex .hljs-command {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .hljs-tag,
|
||||
pre .hljs-tag .hljs-title,
|
||||
pre .hljs-rules .hljs-property,
|
||||
pre .hljs-django .hljs-tag .hljs-keyword {
|
||||
color: #000080;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
pre .hljs-attribute,
|
||||
pre .hljs-variable,
|
||||
pre .hljs-instancevar,
|
||||
pre .hljs-lisp .hljs-body {
|
||||
color: #008080
|
||||
}
|
||||
|
||||
pre .hljs-regexp {
|
||||
color: #B68
|
||||
}
|
||||
|
||||
pre .hljs-class {
|
||||
color: #458;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .hljs-symbol,
|
||||
pre .hljs-ruby .hljs-symbol .hljs-string,
|
||||
pre .hljs-ruby .hljs-symbol .hljs-keyword,
|
||||
pre .hljs-ruby .hljs-symbol .hljs-keymethods,
|
||||
pre .hljs-lisp .hljs-keyword,
|
||||
pre .hljs-tex .hljs-special,
|
||||
pre .hljs-input_number {
|
||||
color: #990073
|
||||
}
|
||||
|
||||
pre .hljs-builtin,
|
||||
pre .hljs-constructor,
|
||||
pre .hljs-built_in,
|
||||
pre .hljs-lisp .hljs-title {
|
||||
color: #0086b3
|
||||
}
|
||||
|
||||
pre .hljs-preprocessor,
|
||||
pre .hljs-pi,
|
||||
pre .hljs-doctype,
|
||||
pre .hljs-shebang,
|
||||
pre .hljs-cdata {
|
||||
color: #999;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
pre .hljs-deletion {
|
||||
background: #fdd
|
||||
}
|
||||
|
||||
pre .hljs-addition {
|
||||
background: #dfd
|
||||
}
|
||||
|
||||
pre .hljs-diff .hljs-change {
|
||||
background: #0086b3
|
||||
}
|
||||
|
||||
pre .hljs-chunk {
|
||||
color: #aaa
|
||||
}
|
||||
|
||||
pre .hljs-tex .hljs-formula {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -1,66 +1,215 @@
|
||||
<!DOCTYPE html> <html> <head> <title>ecma-fixes.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> ecma-fixes.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <p>This file adds in full array method support in browsers that don't support it
|
||||
see: http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Add ECMA262-5 Array methods if not supported natively</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'indexOf'</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">indexOf</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">find</span><span class="p">,</span> <span class="nx">i</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o">===</span><span class="kc">undefined</span><span class="p">)</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o"><</span><span class="mi">0</span><span class="p">)</span> <span class="nx">i</span><span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o"><</span><span class="mi">0</span><span class="p">)</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">n</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">n</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span> <span class="o">&&</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="o">===</span><span class="nx">find</span><span class="p">)</span>
|
||||
<span class="k">return</span> <span class="nx">i</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'lastIndexOf'</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">lastIndexOf</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">find</span><span class="p">,</span> <span class="nx">i</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o">===</span><span class="kc">undefined</span><span class="p">)</span> <span class="nx">i</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o"><</span><span class="mi">0</span><span class="p">)</span> <span class="nx">i</span><span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span><span class="o">></span><span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="nx">i</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span><span class="o">++</span><span class="p">;</span> <span class="nx">i</span><span class="o">--></span><span class="mi">0</span><span class="p">;)</span> <span class="cm">/* i++ because from-argument is sadly inclusive */</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span> <span class="o">&&</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="o">===</span><span class="nx">find</span><span class="p">)</span>
|
||||
<span class="k">return</span> <span class="nx">i</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'forEach'</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">forEach</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">action</span><span class="p">,</span> <span class="nx">that</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">n</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">n</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span><span class="p">)</span>
|
||||
<span class="nx">action</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">that</span><span class="p">,</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">i</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'map'</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">map</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">mapper</span><span class="p">,</span> <span class="nx">that</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">other</span><span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">n</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">n</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span><span class="p">)</span>
|
||||
<span class="nx">other</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span><span class="o">=</span> <span class="nx">mapper</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">that</span><span class="p">,</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">i</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="nx">other</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'filter'</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">filter</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="nx">that</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">other</span><span class="o">=</span> <span class="p">[],</span> <span class="nx">v</span><span class="p">;</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="nx">n</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">n</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span> <span class="o">&&</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">that</span><span class="p">,</span> <span class="nx">v</span><span class="o">=</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">i</span><span class="p">,</span> <span class="k">this</span><span class="p">))</span>
|
||||
<span class="nx">other</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">v</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="nx">other</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'every'</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">every</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tester</span><span class="p">,</span> <span class="nx">that</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">n</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">n</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">tester</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">that</span><span class="p">,</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">i</span><span class="p">,</span> <span class="k">this</span><span class="p">))</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s1">'some'</span> <span class="k">in</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">some</span><span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tester</span><span class="p">,</span> <span class="nx">that</span> <span class="cm">/*opt*/</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span><span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">n</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o"><</span><span class="nx">n</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="k">in</span> <span class="k">this</span> <span class="o">&&</span> <span class="nx">tester</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">that</span><span class="p">,</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="nx">i</span><span class="p">,</span> <span class="k">this</span><span class="p">))</span>
|
||||
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ecma-fixes.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>ecma-fixes.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
<p>This file adds in full array method support in browsers that don’t support it
|
||||
see: <a href="http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc">http://stackoverflow.com/questions/2790001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>Add ECMA262-5 Array methods if not supported natively</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> (!(<span class="hljs-string">'indexOf'</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">Array</span>.prototype)) {
|
||||
<span class="hljs-built_in">Array</span>.prototype.indexOf= <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(find, i <span class="hljs-comment">/*opt*/</span>)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (i===<span class="hljs-literal">undefined</span>) i= <span class="hljs-number">0</span>;
|
||||
<span class="hljs-keyword">if</span> (i<<span class="hljs-number">0</span>) i+= <span class="hljs-keyword">this</span>.length;
|
||||
<span class="hljs-keyword">if</span> (i<<span class="hljs-number">0</span>) i= <span class="hljs-number">0</span>;
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> n= <span class="hljs-keyword">this</span>.length; i<n; i++)
|
||||
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span> && <span class="hljs-keyword">this</span>[i]===find)
|
||||
<span class="hljs-keyword">return</span> i;
|
||||
<span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;
|
||||
};
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (!(<span class="hljs-string">'lastIndexOf'</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">Array</span>.prototype)) {
|
||||
<span class="hljs-built_in">Array</span>.prototype.lastIndexOf= <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(find, i <span class="hljs-comment">/*opt*/</span>)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (i===<span class="hljs-literal">undefined</span>) i= <span class="hljs-keyword">this</span>.length-<span class="hljs-number">1</span>;
|
||||
<span class="hljs-keyword">if</span> (i<<span class="hljs-number">0</span>) i+= <span class="hljs-keyword">this</span>.length;
|
||||
<span class="hljs-keyword">if</span> (i><span class="hljs-keyword">this</span>.length-<span class="hljs-number">1</span>) i= <span class="hljs-keyword">this</span>.length-<span class="hljs-number">1</span>;
|
||||
<span class="hljs-keyword">for</span> (i++; i--><span class="hljs-number">0</span>;) <span class="hljs-comment">/* i++ because from-argument is sadly inclusive */</span>
|
||||
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span> && <span class="hljs-keyword">this</span>[i]===find)
|
||||
<span class="hljs-keyword">return</span> i;
|
||||
<span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;
|
||||
};
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (!(<span class="hljs-string">'forEach'</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">Array</span>.prototype)) {
|
||||
<span class="hljs-built_in">Array</span>.prototype.forEach= <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(action, that <span class="hljs-comment">/*opt*/</span>)</span> </span>{
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i= <span class="hljs-number">0</span>, n= <span class="hljs-keyword">this</span>.length; i<n; i++)
|
||||
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span>)
|
||||
action.call(that, <span class="hljs-keyword">this</span>[i], i, <span class="hljs-keyword">this</span>);
|
||||
};
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (!(<span class="hljs-string">'map'</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">Array</span>.prototype)) {
|
||||
<span class="hljs-built_in">Array</span>.prototype.map= <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(mapper, that <span class="hljs-comment">/*opt*/</span>)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> other= <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(<span class="hljs-keyword">this</span>.length);
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i= <span class="hljs-number">0</span>, n= <span class="hljs-keyword">this</span>.length; i<n; i++)
|
||||
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span>)
|
||||
other[i]= mapper.call(that, <span class="hljs-keyword">this</span>[i], i, <span class="hljs-keyword">this</span>);
|
||||
<span class="hljs-keyword">return</span> other;
|
||||
};
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (!(<span class="hljs-string">'filter'</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">Array</span>.prototype)) {
|
||||
<span class="hljs-built_in">Array</span>.prototype.filter= <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(filter, that <span class="hljs-comment">/*opt*/</span>)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> other= [], v;
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>, n= <span class="hljs-keyword">this</span>.length; i<n; i++)
|
||||
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span> && filter.call(that, v= <span class="hljs-keyword">this</span>[i], i, <span class="hljs-keyword">this</span>))
|
||||
other.push(v);
|
||||
<span class="hljs-keyword">return</span> other;
|
||||
};
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (!(<span class="hljs-string">'every'</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">Array</span>.prototype)) {
|
||||
<span class="hljs-built_in">Array</span>.prototype.every= <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tester, that <span class="hljs-comment">/*opt*/</span>)</span> </span>{
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i= <span class="hljs-number">0</span>, n= <span class="hljs-keyword">this</span>.length; i<n; i++)
|
||||
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span> && !tester.call(that, <span class="hljs-keyword">this</span>[i], i, <span class="hljs-keyword">this</span>))
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
|
||||
};
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (!(<span class="hljs-string">'some'</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">Array</span>.prototype)) {
|
||||
<span class="hljs-built_in">Array</span>.prototype.some= <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(tester, that <span class="hljs-comment">/*opt*/</span>)</span> </span>{
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i= <span class="hljs-number">0</span>, n= <span class="hljs-keyword">this</span>.length; i<n; i++)
|
||||
<span class="hljs-keyword">if</span> (i <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span> && tester.call(that, <span class="hljs-keyword">this</span>[i], i, <span class="hljs-keyword">this</span>))
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
|
||||
};
|
||||
}</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1772
docs/src/model.html
1772
docs/src/model.html
File diff suppressed because it is too large
Load Diff
BIN
docs/src/public/fonts/aller-bold.eot
Normal file
BIN
docs/src/public/fonts/aller-bold.eot
Normal file
Binary file not shown.
BIN
docs/src/public/fonts/aller-bold.ttf
Normal file
BIN
docs/src/public/fonts/aller-bold.ttf
Normal file
Binary file not shown.
BIN
docs/src/public/fonts/aller-bold.woff
Normal file
BIN
docs/src/public/fonts/aller-bold.woff
Normal file
Binary file not shown.
BIN
docs/src/public/fonts/aller-light.eot
Normal file
BIN
docs/src/public/fonts/aller-light.eot
Normal file
Binary file not shown.
BIN
docs/src/public/fonts/aller-light.ttf
Normal file
BIN
docs/src/public/fonts/aller-light.ttf
Normal file
Binary file not shown.
BIN
docs/src/public/fonts/aller-light.woff
Normal file
BIN
docs/src/public/fonts/aller-light.woff
Normal file
Binary file not shown.
BIN
docs/src/public/fonts/roboto-black.eot
Executable file
BIN
docs/src/public/fonts/roboto-black.eot
Executable file
Binary file not shown.
BIN
docs/src/public/fonts/roboto-black.ttf
Executable file
BIN
docs/src/public/fonts/roboto-black.ttf
Executable file
Binary file not shown.
BIN
docs/src/public/fonts/roboto-black.woff
Executable file
BIN
docs/src/public/fonts/roboto-black.woff
Executable file
Binary file not shown.
375
docs/src/public/stylesheets/normalize.css
vendored
Normal file
375
docs/src/public/stylesheets/normalize.css
vendored
Normal file
@ -0,0 +1,375 @@
|
||||
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling for `hidden` attribute not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Sets default font family to sans-serif.
|
||||
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
|
||||
* Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Corrects font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sets consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Removes border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font family not being inherited in all browsers.
|
||||
* 2. Corrects font size not being inherited in all browsers.
|
||||
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE 8/9.
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,141 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view.graph.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.graph.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">Graph</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">Flot</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">GraphControls</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">FlotControls</span><span class="p">;</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
<html>
|
||||
<head>
|
||||
<title>view.graph.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>view.graph.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View.Graph = <span class="hljs-keyword">this</span>.recline.View.Flot;
|
||||
<span class="hljs-keyword">this</span>.recline.View.GraphControls = <span class="hljs-keyword">this</span>.recline.View.FlotControls;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,232 +1,606 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view.grid.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.grid.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<html>
|
||||
<head>
|
||||
<title>view.grid.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>view.grid.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>(Data) Grid Dataset View</h2>
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<h2 id="-data-grid-dataset-view">(Data) Grid Dataset View</h2>
|
||||
<p>Provides a tabular view on a Dataset.</p>
|
||||
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p>
|
||||
|
||||
<p>Initialize it with a <code>recline.Model.Dataset</code>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Grid</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">tagName</span><span class="o">:</span> <span class="s2">"div"</span><span class="p">,</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s2">"recline-grid-container"</span><span class="p">,</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>my.Grid = Backbone.View.extend({
|
||||
tagName: <span class="hljs-string">"div"</span>,
|
||||
className: <span class="hljs-string">"recline-grid-container"</span>,
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">modelEtc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'onHorizontalScroll'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="s1">'add reset remove'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">tempState</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">hiddenFields</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">},</span> <span class="nx">modelEtc</span><span class="p">.</span><span class="nx">state</span>
|
||||
<span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(modelEtc)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>, <span class="hljs-string">'onHorizontalScroll'</span>);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.records, <span class="hljs-string">'add reset remove'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.tempState = {};
|
||||
<span class="hljs-keyword">var</span> state = _.extend({
|
||||
hiddenFields: []
|
||||
}, modelEtc.state
|
||||
);
|
||||
<span class="hljs-keyword">this</span>.state = <span class="hljs-keyword">new</span> recline.Model.ObjectState(state);
|
||||
},
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>does not work here so done at end of render function
|
||||
'scroll .recline-grid tbody': 'onHorizontalScroll'</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">},</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>======================================================
|
||||
Column and row menus</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setColumnSort</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">order</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">sort</span> <span class="o">=</span> <span class="p">[{}];</span>
|
||||
<span class="nx">sort</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="k">this</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span><span class="nx">order</span><span class="o">:</span> <span class="nx">order</span><span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">query</span><span class="p">({</span><span class="nx">sort</span><span class="o">:</span> <span class="nx">sort</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
events: {</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<p>does not work here so done at end of render function
|
||||
‘scroll .recline-grid tbody’: ‘onHorizontalScroll’</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> },</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>======================================================</p>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-5">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-5">¶</a>
|
||||
</div>
|
||||
<p>Column and row menus</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>
|
||||
setColumnSort: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(order)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> sort = [{}];
|
||||
sort[<span class="hljs-number">0</span>][<span class="hljs-keyword">this</span>.tempState.currentColumn] = {order: order};
|
||||
<span class="hljs-keyword">this</span>.model.query({sort: sort});
|
||||
},
|
||||
|
||||
<span class="nx">hideColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">hiddenFields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">);</span>
|
||||
<span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">hiddenFields</span><span class="o">:</span> <span class="nx">hiddenFields</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>change event not being triggered (because it is an array?) so trigger manually</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
hideColumn: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> hiddenFields = <span class="hljs-keyword">this</span>.state.get(<span class="hljs-string">'hiddenFields'</span>);
|
||||
hiddenFields.push(<span class="hljs-keyword">this</span>.tempState.currentColumn);
|
||||
<span class="hljs-keyword">this</span>.state.set({hiddenFields: hiddenFields});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-6">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-6">¶</a>
|
||||
</div>
|
||||
<p>change event not being triggered (because it is an array?) so trigger manually</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.state.trigger(<span class="hljs-string">'change'</span>);
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
|
||||
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">hiddenFields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">without</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">),</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'column'</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">hiddenFields</span><span class="o">:</span> <span class="nx">hiddenFields</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
showColumn: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> hiddenFields = _.without(<span class="hljs-keyword">this</span>.state.get(<span class="hljs-string">'hiddenFields'</span>), $(e.target).data(<span class="hljs-string">'column'</span>));
|
||||
<span class="hljs-keyword">this</span>.state.set({hiddenFields: hiddenFields});
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
|
||||
<span class="nx">onHorizontalScroll</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">currentScroll</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">scrollLeft</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.recline-grid thead tr'</span><span class="p">).</span><span class="nx">scrollLeft</span><span class="p">(</span><span class="nx">currentScroll</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>======================================================</p>
|
||||
onHorizontalScroll: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> currentScroll = $(e.target).scrollLeft();
|
||||
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'.recline-grid thead tr'</span>).scrollLeft(currentScroll);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-7">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-7">¶</a>
|
||||
</div>
|
||||
<p>======================================================</p>
|
||||
|
||||
<h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="table-container"> \</span>
|
||||
<span class="s1"> <table class="recline-grid table-striped table-condensed" cellspacing="0"> \</span>
|
||||
<span class="s1"> <thead class="fixed-header"> \</span>
|
||||
<span class="s1"> <tr> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;" title="{{label}}"> \</span>
|
||||
<span class="s1"> <span class="column-header-name">{{label}}</span> \</span>
|
||||
<span class="s1"> </th> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> <th class="last-header" style="width: {{lastHeaderWidth}}px; max-width: {{lastHeaderWidth}}px; min-width: {{lastHeaderWidth}}px; padding: 0; margin: 0;"></th> \</span>
|
||||
<span class="s1"> </tr> \</span>
|
||||
<span class="s1"> </thead> \</span>
|
||||
<span class="s1"> <tbody class="scroll-content"></tbody> \</span>
|
||||
<span class="s1"> </table> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-8">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-8">¶</a>
|
||||
</div>
|
||||
<h4 id="templating">Templating</h4>
|
||||
|
||||
<span class="nx">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">modelData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span> <span class="p">);</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>last header width = scroll bar - border (2px) */</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">lastHeaderWidth</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span><span class="p">.</span><span class="nx">width</span> <span class="o">-</span> <span class="mi">2</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">modelData</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">FieldList</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">_</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">),</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">)</span> <span class="o">==</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="p">}));</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> template: <span class="hljs-string">' \
|
||||
<div class="table-container"> \
|
||||
<table class="recline-grid table-striped table-condensed" cellspacing="0"> \
|
||||
<thead class="fixed-header"> \
|
||||
<tr> \
|
||||
{{#fields}} \
|
||||
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;" title="{{label}}"> \
|
||||
<span class="column-header-name">{{label}}</span> \
|
||||
</th> \
|
||||
{{/fields}} \
|
||||
<th class="last-header" style="width: {{lastHeaderWidth}}px; max-width: {{lastHeaderWidth}}px; min-width: {{lastHeaderWidth}}px; padding: 0; margin: 0;"></th> \
|
||||
</tr> \
|
||||
</thead> \
|
||||
<tbody class="scroll-content"></tbody> \
|
||||
</table> \
|
||||
</div> \
|
||||
'</span>,
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">_scrollbarSize</span><span class="p">();</span> <span class="c1">// skip measurement if already have dimensions</span>
|
||||
<span class="kd">var</span> <span class="nx">numFields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">fullWidth</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="mi">20</span> <span class="o">-</span> <span class="mi">10</span> <span class="o">*</span> <span class="nx">numFields</span> <span class="o">-</span> <span class="k">this</span><span class="p">.</span><span class="nx">scrollbarDimensions</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">50</span><span class="p">,</span> <span class="nx">fullWidth</span> <span class="o">/</span> <span class="nx">numFields</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>if columns extend outside viewport then remainder is 0 </p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">remainder</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">fullWidth</span> <span class="o">-</span> <span class="nx">numFields</span> <span class="o">*</span> <span class="nx">width</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>add the remainder to the first field width so we make up full col</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">idx</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">field</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">width</span><span class="o">:</span> <span class="nx">width</span><span class="o">+</span><span class="nx">remainder</span><span class="p">});</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">field</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">width</span><span class="o">:</span> <span class="nx">width</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tr</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'<tr />'</span><span class="p">);</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'tbody'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">tr</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">newView</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">GridRow</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="nx">doc</span><span class="p">,</span>
|
||||
<span class="nx">el</span><span class="o">:</span> <span class="nx">tr</span><span class="p">,</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>hide extra header col if no scrollbar to avoid unsightly overhang</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">$tbody</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'tbody'</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">$tbody</span><span class="p">.</span><span class="nx">scrollHeight</span> <span class="o"><=</span> <span class="nx">$tbody</span><span class="p">.</span><span class="nx">offsetHeight</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'th.last-header'</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.recline-grid'</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.recline-grid tbody'</span><span class="p">).</span><span class="nx">scroll</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">onHorizontalScroll</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <h3>_scrollbarSize</h3>
|
||||
toTemplateJSON: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> modelData = <span class="hljs-keyword">this</span>.model.toJSON();
|
||||
modelData.notEmpty = ( <span class="hljs-keyword">this</span>.fields.length > <span class="hljs-number">0</span> );</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-9">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-9">¶</a>
|
||||
</div>
|
||||
<p>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> modelData.fields = <span class="hljs-keyword">this</span>.fields.map(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> field.toJSON();
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-10">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-10">¶</a>
|
||||
</div>
|
||||
<p>last header width = scroll bar - border (2px) */</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> modelData.lastHeaderWidth = <span class="hljs-keyword">this</span>.scrollbarDimensions.width - <span class="hljs-number">2</span>;
|
||||
<span class="hljs-keyword">return</span> modelData;
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">this</span>.fields = <span class="hljs-keyword">new</span> recline.Model.FieldList(<span class="hljs-keyword">this</span>.model.fields.filter(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> _.indexOf(self.state.get(<span class="hljs-string">'hiddenFields'</span>), field.id) == -<span class="hljs-number">1</span>;
|
||||
}));
|
||||
|
||||
<span class="hljs-keyword">this</span>.scrollbarDimensions = <span class="hljs-keyword">this</span>.scrollbarDimensions || <span class="hljs-keyword">this</span>._scrollbarSize(); <span class="hljs-comment">// skip measurement if already have dimensions</span>
|
||||
<span class="hljs-keyword">var</span> numFields = <span class="hljs-keyword">this</span>.fields.length;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-11">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-11">¶</a>
|
||||
</div>
|
||||
<p>compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> fullWidth = self.$el.width() - <span class="hljs-number">20</span> - <span class="hljs-number">10</span> * numFields - <span class="hljs-keyword">this</span>.scrollbarDimensions.width;
|
||||
<span class="hljs-keyword">var</span> width = <span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.max(<span class="hljs-number">50</span>, fullWidth / numFields), <span class="hljs-number">10</span>);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-12">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-12">¶</a>
|
||||
</div>
|
||||
<p>if columns extend outside viewport then remainder is 0 </p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> remainder = <span class="hljs-built_in">Math</span>.max(fullWidth - numFields * width,<span class="hljs-number">0</span>);
|
||||
<span class="hljs-keyword">this</span>.fields.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field, idx)</span> </span>{</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-13">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-13">¶</a>
|
||||
</div>
|
||||
<p>add the remainder to the first field width so we make up full col</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (idx === <span class="hljs-number">0</span>) {
|
||||
field.set({width: width+remainder});
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
field.set({width: width});
|
||||
}
|
||||
});
|
||||
<span class="hljs-keyword">var</span> htmls = Mustache.render(<span class="hljs-keyword">this</span>.template, <span class="hljs-keyword">this</span>.toTemplateJSON());
|
||||
<span class="hljs-keyword">this</span>.$el.html(htmls);
|
||||
<span class="hljs-keyword">this</span>.model.records.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(doc)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> tr = $(<span class="hljs-string">'<tr />'</span>);
|
||||
self.$el.find(<span class="hljs-string">'tbody'</span>).append(tr);
|
||||
<span class="hljs-keyword">var</span> newView = <span class="hljs-keyword">new</span> my.GridRow({
|
||||
model: doc,
|
||||
el: tr,
|
||||
fields: self.fields
|
||||
});
|
||||
newView.render();
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-14">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-14">¶</a>
|
||||
</div>
|
||||
<p>hide extra header col if no scrollbar to avoid unsightly overhang</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> $tbody = <span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'tbody'</span>)[<span class="hljs-number">0</span>];
|
||||
<span class="hljs-keyword">if</span> ($tbody.scrollHeight <= $tbody.offsetHeight) {
|
||||
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'th.last-header'</span>).hide();
|
||||
}
|
||||
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'.recline-grid'</span>).toggleClass(<span class="hljs-string">'no-hidden'</span>, (self.state.get(<span class="hljs-string">'hiddenFields'</span>).length === <span class="hljs-number">0</span>));
|
||||
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'.recline-grid tbody'</span>).scroll(<span class="hljs-keyword">this</span>.onHorizontalScroll);
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-15">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-15">¶</a>
|
||||
</div>
|
||||
<h3 id="_scrollbarsize">_scrollbarSize</h3>
|
||||
<p>Measure width of a vertical scrollbar and height of a horizontal scrollbar.</p>
|
||||
<p>@return: { width: pixelWidth, height: pixelHeight }</p>
|
||||
|
||||
<p>@return: { width: pixelWidth, height: pixelHeight }</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_scrollbarSize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$c</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>"</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="s2">"body"</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">dim</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">width</span><span class="o">:</span> <span class="nx">$c</span><span class="p">.</span><span class="nx">width</span><span class="p">()</span> <span class="o">-</span> <span class="nx">$c</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">clientWidth</span> <span class="o">+</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">height</span><span class="o">:</span> <span class="nx">$c</span><span class="p">.</span><span class="nx">height</span><span class="p">()</span> <span class="o">-</span> <span class="nx">$c</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">clientHeight</span> <span class="p">};</span>
|
||||
<span class="nx">$c</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">dim</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <h2>GridRow View for rendering an individual record.</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> _scrollbarSize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> $c = $(<span class="hljs-string">"<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>"</span>).appendTo(<span class="hljs-string">"body"</span>);
|
||||
<span class="hljs-keyword">var</span> dim = { width: $c.width() - $c[<span class="hljs-number">0</span>].clientWidth + <span class="hljs-number">1</span>, height: $c.height() - $c[<span class="hljs-number">0</span>].clientHeight };
|
||||
$c.remove();
|
||||
<span class="hljs-keyword">return</span> dim;
|
||||
}
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-16">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-16">¶</a>
|
||||
</div>
|
||||
<h2 id="gridrow-view-for-rendering-an-individual-record-">GridRow View for rendering an individual record.</h2>
|
||||
<p>Since we want this to update in place it is up to creator to provider the element to attach to.</p>
|
||||
|
||||
<p>In addition you <em>must</em> pass in a FieldList in the constructor options. This should be list of fields for the Grid.</p>
|
||||
|
||||
<p>Example:</p>
|
||||
|
||||
<pre>
|
||||
var row = new GridRow({
|
||||
model: dataset-record,
|
||||
el: dom-element,
|
||||
fields: mydatasets.fields // a FieldList object
|
||||
});
|
||||
</pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">GridRow</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initData</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_fields</span> <span class="o">=</span> <span class="nx">initData</span><span class="p">.</span><span class="nx">fields</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">,</span> <span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</pre>
|
||||
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> {{#cells}} \</span>
|
||||
<span class="s1"> <td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-content"> \</span>
|
||||
<span class="s1"> <a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-value">{{{value}}}</div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </td> \</span>
|
||||
<span class="s1"> {{/cells}} \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .data-table-cell-edit'</span><span class="o">:</span> <span class="s1">'onEditClick'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-cell-editor .okButton'</span><span class="o">:</span> <span class="s1">'onEditorOK'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-cell-editor .cancelButton'</span><span class="o">:</span> <span class="s1">'onEditorCancel'</span>
|
||||
<span class="p">},</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>my.GridRow = Backbone.View.extend({
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(initData)</span> </span>{
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
|
||||
<span class="hljs-keyword">this</span>._fields = initData.fields;
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model, <span class="hljs-string">'change'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
},
|
||||
|
||||
template: <span class="hljs-string">' \
|
||||
{{#cells}} \
|
||||
<td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px; min-width: {{width}}px;"> \
|
||||
<div class="data-table-cell-content"> \
|
||||
<a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell">&nbsp;</a> \
|
||||
<div class="data-table-cell-value">{{{value}}}</div> \
|
||||
</div> \
|
||||
</td> \
|
||||
{{/cells}} \
|
||||
'</span>,
|
||||
events: {
|
||||
<span class="hljs-string">'click .data-table-cell-edit'</span>: <span class="hljs-string">'onEditClick'</span>,
|
||||
<span class="hljs-string">'click .data-table-cell-editor .okButton'</span>: <span class="hljs-string">'onEditorOK'</span>,
|
||||
<span class="hljs-string">'click .data-table-cell-editor .cancelButton'</span>: <span class="hljs-string">'onEditorCancel'</span>
|
||||
},
|
||||
|
||||
<span class="nx">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">cellData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_fields</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span>
|
||||
<span class="nx">width</span><span class="o">:</span> <span class="nx">field</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'width'</span><span class="p">),</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">cells</span><span class="o">:</span> <span class="nx">cellData</span> <span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
toTemplateJSON: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> doc = <span class="hljs-keyword">this</span>.model;
|
||||
<span class="hljs-keyword">var</span> cellData = <span class="hljs-keyword">this</span>._fields.map(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> {
|
||||
field: field.id,
|
||||
width: field.get(<span class="hljs-string">'width'</span>),
|
||||
value: doc.getFieldValue(field)
|
||||
};
|
||||
});
|
||||
<span class="hljs-keyword">return</span> { id: <span class="hljs-keyword">this</span>.id, cells: cellData };
|
||||
},
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-id'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>===================
|
||||
Cell Editor methods</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">cellEditorTemplate</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="menu-container data-table-cell-editor"> \</span>
|
||||
<span class="s1"> <textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea> \</span>
|
||||
<span class="s1"> <div id="data-table-cell-editor-actions"> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-editor-action"> \</span>
|
||||
<span class="s1"> <button class="okButton btn primary">Update</button> \</span>
|
||||
<span class="s1"> <button class="cancelButton btn danger">Cancel</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.$el.attr(<span class="hljs-string">'data-id'</span>, <span class="hljs-keyword">this</span>.model.id);
|
||||
<span class="hljs-keyword">var</span> html = Mustache.render(<span class="hljs-keyword">this</span>.template, <span class="hljs-keyword">this</span>.toTemplateJSON());
|
||||
<span class="hljs-keyword">this</span>.$el.html(html);
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-17">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-17">¶</a>
|
||||
</div>
|
||||
<p>===================</p>
|
||||
|
||||
<span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">editing</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-table-cell-editor-editor'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">editing</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-edit'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">);</span>
|
||||
<span class="nx">cell</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s2">"previousContents"</span><span class="p">,</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">text</span><span class="p">());</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cellEditorTemplate</span><span class="p">,</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">text</span><span class="p">()});</span>
|
||||
<span class="nx">cell</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-18">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-18">¶</a>
|
||||
</div>
|
||||
<p>Cell Editor methods</p>
|
||||
|
||||
<span class="nx">onEditorOK</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">rowId</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'tr'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-id'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'td'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">newValue</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-editor'</span><span class="p">).</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-table-cell-editor-editor'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">newData</span><span class="p">[</span><span class="nx">field</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">newData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">"Updating row..."</span><span class="p">,</span> <span class="nx">loader</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">"Row updated successfully"</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</span><span class="p">});</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">message</span><span class="o">:</span> <span class="s1">'Error saving row'</span><span class="p">,</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span>
|
||||
<span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>
|
||||
cellEditorTemplate: <span class="hljs-string">' \
|
||||
<div class="menu-container data-table-cell-editor"> \
|
||||
<textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea> \
|
||||
<div id="data-table-cell-editor-actions"> \
|
||||
<div class="data-table-cell-editor-action"> \
|
||||
<button class="okButton btn primary">Update</button> \
|
||||
<button class="cancelButton btn danger">Cancel</button> \
|
||||
</div> \
|
||||
</div> \
|
||||
</div> \
|
||||
'</span>,
|
||||
|
||||
<span class="nx">onEditorCancel</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">);</span>
|
||||
<span class="nx">cell</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">cell</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s1">'previousContents'</span><span class="p">)).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-edit'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
onEditClick: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> editing = <span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'.data-table-cell-editor-editor'</span>);
|
||||
<span class="hljs-keyword">if</span> (editing.length > <span class="hljs-number">0</span>) {
|
||||
editing.parents(<span class="hljs-string">'.data-table-cell-value'</span>).html(editing.text()).siblings(<span class="hljs-string">'.data-table-cell-edit'</span>).removeClass(<span class="hljs-string">"hidden"</span>);
|
||||
}
|
||||
$(e.target).addClass(<span class="hljs-string">"hidden"</span>);
|
||||
<span class="hljs-keyword">var</span> cell = $(e.target).siblings(<span class="hljs-string">'.data-table-cell-value'</span>);
|
||||
cell.data(<span class="hljs-string">"previousContents"</span>, cell.text());
|
||||
<span class="hljs-keyword">var</span> templated = Mustache.render(<span class="hljs-keyword">this</span>.cellEditorTemplate, {value: cell.text()});
|
||||
cell.html(templated);
|
||||
},
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
onEditorOK: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> cell = $(e.target);
|
||||
<span class="hljs-keyword">var</span> rowId = cell.parents(<span class="hljs-string">'tr'</span>).attr(<span class="hljs-string">'data-id'</span>);
|
||||
<span class="hljs-keyword">var</span> field = cell.parents(<span class="hljs-string">'td'</span>).attr(<span class="hljs-string">'data-field'</span>);
|
||||
<span class="hljs-keyword">var</span> newValue = cell.parents(<span class="hljs-string">'.data-table-cell-editor'</span>).find(<span class="hljs-string">'.data-table-cell-editor-editor'</span>).val();
|
||||
<span class="hljs-keyword">var</span> newData = {};
|
||||
newData[field] = newValue;
|
||||
<span class="hljs-keyword">this</span>.model.set(newData);
|
||||
<span class="hljs-keyword">this</span>.trigger(<span class="hljs-string">'recline:flash'</span>, {message: <span class="hljs-string">"Updating row..."</span>, loader: <span class="hljs-literal">true</span>});
|
||||
<span class="hljs-keyword">this</span>.model.save().then(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(response)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.trigger(<span class="hljs-string">'recline:flash'</span>, {message: <span class="hljs-string">"Row updated successfully"</span>, category: <span class="hljs-string">'success'</span>});
|
||||
})
|
||||
.fail(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.trigger(<span class="hljs-string">'recline:flash'</span>, {
|
||||
message: <span class="hljs-string">'Error saving row'</span>,
|
||||
category: <span class="hljs-string">'error'</span>,
|
||||
persist: <span class="hljs-literal">true</span>
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
onEditorCancel: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> cell = $(e.target).parents(<span class="hljs-string">'.data-table-cell-value'</span>);
|
||||
cell.html(cell.data(<span class="hljs-string">'previousContents'</span>)).siblings(<span class="hljs-string">'.data-table-cell-edit'</span>).removeClass(<span class="hljs-string">"hidden"</span>);
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,162 +1,446 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view.timeline.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.timeline.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<html>
|
||||
<head>
|
||||
<title>view.timeline.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>view.timeline.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>turn off unnecessary logging from VMM Timeline</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">VMM</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">VMM</span><span class="p">.</span><span class="nx">debug</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>Timeline</h2>
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
<p>Timeline view using http://timeline.verite.co/</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">Timeline</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="recline-timeline"> \</span>
|
||||
<span class="s1"> <div id="vmm-timeline-id"></div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>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</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">startFieldNames</span><span class="o">:</span> <span class="p">[</span><span class="s1">'date'</span><span class="p">,</span><span class="s1">'startdate'</span><span class="p">,</span> <span class="s1">'start'</span><span class="p">,</span> <span class="s1">'start-date'</span><span class="p">],</span>
|
||||
<span class="nx">endFieldNames</span><span class="o">:</span> <span class="p">[</span><span class="s1">'end'</span><span class="p">,</span><span class="s1">'endDate'</span><span class="p">],</span>
|
||||
<span class="nx">elementId</span><span class="o">:</span> <span class="s1">'#vmm-timeline-id'</span><span class="p">,</span>
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>turn off unnecessary logging from VMM Timeline</p>
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">timeline</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">VMM</span><span class="p">.</span><span class="nx">Timeline</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementId</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_timelineIsInitialized</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="s1">'reset'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">_setupTemporalField</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">,</span> <span class="s1">'all'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">reloadData</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">startField</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">endField</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>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</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nonUSDates</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
|
||||
<span class="nx">timelineJSOptions</span><span class="o">:</span> <span class="p">{}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">options</span><span class="p">.</span><span class="nx">state</span>
|
||||
<span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">stateData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_setupTemporalField</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> VMM !== <span class="hljs-string">'undefined'</span>) {
|
||||
VMM.debug = <span class="hljs-literal">false</span>;
|
||||
}</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<h2 id="timeline">Timeline</h2>
|
||||
<p>Timeline view using <a href="http://timeline.verite.co/">http://timeline.verite.co/</a></p>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>can only call _initTimeline once view in DOM as Timeline uses $
|
||||
internally to look up element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">elementId</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_initTimeline</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>my.Timeline = Backbone.View.extend({
|
||||
template: <span class="hljs-string">' \
|
||||
<div class="recline-timeline"> \
|
||||
<div id="vmm-timeline-id"></div> \
|
||||
</div> \
|
||||
'</span>,</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>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</p>
|
||||
|
||||
<span class="nx">show</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>only call _initTimeline once view in DOM as Timeline uses $ internally to look up element</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_timelineIsInitialized</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_initTimeline</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> startFieldNames: [<span class="hljs-string">'date'</span>,<span class="hljs-string">'startdate'</span>, <span class="hljs-string">'start'</span>, <span class="hljs-string">'start-date'</span>],
|
||||
endFieldNames: [<span class="hljs-string">'end'</span>,<span class="hljs-string">'endDate'</span>],
|
||||
elementId: <span class="hljs-string">'#vmm-timeline-id'</span>,
|
||||
|
||||
<span class="nx">_initTimeline</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_timelineJSON</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"timelineJSOptions"</span><span class="p">);</span>
|
||||
<span class="nx">config</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">elementId</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nx">config</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_timelineIsInitialized</span> <span class="o">=</span> <span class="kc">true</span>
|
||||
<span class="p">},</span>
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(options)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">this</span>.timeline = <span class="hljs-keyword">new</span> VMM.Timeline(<span class="hljs-keyword">this</span>.elementId);
|
||||
<span class="hljs-keyword">this</span>._timelineIsInitialized = <span class="hljs-literal">false</span>;
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'reset'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
self._setupTemporalField();
|
||||
});
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.records, <span class="hljs-string">'all'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
self.reloadData();
|
||||
});
|
||||
<span class="hljs-keyword">var</span> stateData = _.extend({
|
||||
startField: <span class="hljs-literal">null</span>,
|
||||
endField: <span class="hljs-literal">null</span>,</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-5">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-5">¶</a>
|
||||
</div>
|
||||
<p>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</p>
|
||||
|
||||
<span class="nx">reloadData</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">_timelineIsInitialized</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_timelineJSON</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">reload</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Convert record to JSON for timeline</p>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> nonUSDates: <span class="hljs-literal">false</span>,
|
||||
timelineJSOptions: {}
|
||||
},
|
||||
options.state
|
||||
);
|
||||
<span class="hljs-keyword">this</span>.state = <span class="hljs-keyword">new</span> recline.Model.ObjectState(stateData);
|
||||
<span class="hljs-keyword">this</span>._setupTemporalField();
|
||||
},
|
||||
|
||||
<p>Designed to be overridden in client apps</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">convertRecord</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">fields</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">_convertRecord</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">fields</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Internal method to generate a Timeline formatted entry</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_convertRecord</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">fields</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">start</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_parseDate</span><span class="p">(</span><span class="nx">record</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'startField'</span><span class="p">)));</span>
|
||||
<span class="kd">var</span> <span class="nx">end</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_parseDate</span><span class="p">(</span><span class="nx">record</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'endField'</span><span class="p">)));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">start</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tlEntry</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="s2">"startDate"</span><span class="o">:</span> <span class="nx">start</span><span class="p">,</span>
|
||||
<span class="s2">"endDate"</span><span class="o">:</span> <span class="nx">end</span><span class="p">,</span>
|
||||
<span class="s2">"headline"</span><span class="o">:</span> <span class="nb">String</span><span class="p">(</span><span class="nx">record</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'title'</span><span class="p">)</span> <span class="o">||</span> <span class="s1">''</span><span class="p">),</span>
|
||||
<span class="s2">"text"</span><span class="o">:</span> <span class="nx">record</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'description'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">record</span><span class="p">.</span><span class="nx">summary</span><span class="p">()</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">return</span> <span class="nx">tlEntry</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> tmplData = {};
|
||||
<span class="hljs-keyword">var</span> htmls = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
||||
<span class="hljs-keyword">this</span>.$el.html(htmls);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-6">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-6">¶</a>
|
||||
</div>
|
||||
<p>can only call _initTimeline once view in DOM as Timeline uses $
|
||||
internally to look up element</p>
|
||||
|
||||
<span class="nx">_timelineJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="s1">'timeline'</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'type'</span><span class="o">:</span> <span class="s1">'default'</span><span class="p">,</span>
|
||||
<span class="s1">'headline'</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span>
|
||||
<span class="s1">'date'</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">records</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">record</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">newEntry</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">convertRecord</span><span class="p">(</span><span class="nx">record</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">fields</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">newEntry</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">date</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">newEntry</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>if no entries create a placeholder entry to prevent Timeline crashing with error</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">date</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tlEntry</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="s2">"startDate"</span><span class="o">:</span> <span class="s1">'2000,1,1'</span><span class="p">,</span>
|
||||
<span class="s2">"headline"</span><span class="o">:</span> <span class="s1">'No data to show!'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">timeline</span><span class="p">.</span><span class="nx">date</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tlEntry</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">out</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>convert dates into a format TimelineJS will handle
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> ($(<span class="hljs-keyword">this</span>.elementId).length > <span class="hljs-number">0</span>) {
|
||||
<span class="hljs-keyword">this</span>._initTimeline();
|
||||
}
|
||||
},
|
||||
|
||||
show: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-7">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-7">¶</a>
|
||||
</div>
|
||||
<p>only call _initTimeline once view in DOM as Timeline uses $ internally to look up element</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>._timelineIsInitialized === <span class="hljs-literal">false</span>) {
|
||||
<span class="hljs-keyword">this</span>._initTimeline();
|
||||
}
|
||||
},
|
||||
|
||||
_initTimeline: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> data = <span class="hljs-keyword">this</span>._timelineJSON();
|
||||
<span class="hljs-keyword">var</span> config = <span class="hljs-keyword">this</span>.state.get(<span class="hljs-string">"timelineJSOptions"</span>);
|
||||
config.id = <span class="hljs-keyword">this</span>.elementId;
|
||||
<span class="hljs-keyword">this</span>.timeline.init(config, data);
|
||||
<span class="hljs-keyword">this</span>._timelineIsInitialized = <span class="hljs-literal">true</span>
|
||||
},
|
||||
|
||||
reloadData: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>._timelineIsInitialized) {
|
||||
<span class="hljs-keyword">var</span> data = <span class="hljs-keyword">this</span>._timelineJSON();
|
||||
<span class="hljs-keyword">this</span>.timeline.reload(data);
|
||||
}
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-8">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-8">¶</a>
|
||||
</div>
|
||||
<p>Convert record to JSON for timeline</p>
|
||||
<p>Designed to be overridden in client apps</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> convertRecord: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(record, fields)</span> </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._convertRecord(record, fields);
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-9">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-9">¶</a>
|
||||
</div>
|
||||
<p>Internal method to generate a Timeline formatted entry</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> _convertRecord: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(record, fields)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> start = <span class="hljs-keyword">this</span>._parseDate(record.get(<span class="hljs-keyword">this</span>.state.get(<span class="hljs-string">'startField'</span>)));
|
||||
<span class="hljs-keyword">var</span> end = <span class="hljs-keyword">this</span>._parseDate(record.get(<span class="hljs-keyword">this</span>.state.get(<span class="hljs-string">'endField'</span>)));
|
||||
<span class="hljs-keyword">if</span> (start) {
|
||||
<span class="hljs-keyword">var</span> tlEntry = {
|
||||
<span class="hljs-string">"startDate"</span>: start,
|
||||
<span class="hljs-string">"endDate"</span>: end,
|
||||
<span class="hljs-string">"headline"</span>: <span class="hljs-built_in">String</span>(record.get(<span class="hljs-string">'title'</span>) || <span class="hljs-string">''</span>),
|
||||
<span class="hljs-string">"text"</span>: record.get(<span class="hljs-string">'description'</span>) || record.summary(),
|
||||
<span class="hljs-string">"tag"</span>: record.get(<span class="hljs-string">'tags'</span>)
|
||||
};
|
||||
<span class="hljs-keyword">return</span> tlEntry;
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
|
||||
}
|
||||
},
|
||||
|
||||
_timelineJSON: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> out = {
|
||||
<span class="hljs-string">'timeline'</span>: {
|
||||
<span class="hljs-string">'type'</span>: <span class="hljs-string">'default'</span>,
|
||||
<span class="hljs-string">'headline'</span>: <span class="hljs-string">''</span>,
|
||||
<span class="hljs-string">'date'</span>: [
|
||||
]
|
||||
}
|
||||
};
|
||||
<span class="hljs-keyword">this</span>.model.records.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(record)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> newEntry = self.convertRecord(record, self.fields);
|
||||
<span class="hljs-keyword">if</span> (newEntry) {
|
||||
out.timeline.date.push(newEntry);
|
||||
}
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-10">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-10">¶</a>
|
||||
</div>
|
||||
<p>if no entries create a placeholder entry to prevent Timeline crashing with error</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (out.timeline.date.length === <span class="hljs-number">0</span>) {
|
||||
<span class="hljs-keyword">var</span> tlEntry = {
|
||||
<span class="hljs-string">"startDate"</span>: <span class="hljs-string">'2000,1,1'</span>,
|
||||
<span class="hljs-string">"headline"</span>: <span class="hljs-string">'No data to show!'</span>
|
||||
};
|
||||
out.timeline.date.push(tlEntry);
|
||||
}
|
||||
<span class="hljs-keyword">return</span> out;
|
||||
},</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-11">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-11">¶</a>
|
||||
</div>
|
||||
<p>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</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_parseDate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">date</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">trim</span><span class="p">(</span><span class="nx">date</span><span class="p">);</span>
|
||||
<span class="nx">out</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(\d)th/g</span><span class="p">,</span> <span class="s1">'$1'</span><span class="p">);</span>
|
||||
<span class="nx">out</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/(\d)st/g</span><span class="p">,</span> <span class="s1">'$1'</span><span class="p">);</span>
|
||||
<span class="nx">out</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">trim</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\d\d\d\d-\d\d-\d\d(T.*)?/</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nx">out</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/-/g</span><span class="p">,</span> <span class="s1">','</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="s1">'T'</span><span class="p">,</span> <span class="s1">','</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="s1">':'</span><span class="p">,</span><span class="s1">','</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">out</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\d\d-\d\d-\d\d.*/</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nx">out</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/-/g</span><span class="p">,</span> <span class="s1">'/'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'nonUSDates'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">parts</span> <span class="o">=</span> <span class="nx">out</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/(\d\d)\/(\d\d)\/(\d\d.*)/</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">parts</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">out</span> <span class="o">=</span> <span class="p">[</span><span class="nx">parts</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">parts</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">parts</span><span class="p">[</span><span class="mi">3</span><span class="p">]].</span><span class="nx">join</span><span class="p">(</span><span class="s1">'/'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">out</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
Supported: mm/dd/yyyy</p>
|
||||
|
||||
<span class="nx">_setupTemporalField</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span>
|
||||
<span class="nx">startField</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_checkField</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">startFieldNames</span><span class="p">),</span>
|
||||
<span class="nx">endField</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_checkField</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">endFieldNames</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> _parseDate: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(date)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (!date) {
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
|
||||
}
|
||||
<span class="hljs-keyword">var</span> out = $.trim(date);
|
||||
out = out.replace(<span class="hljs-regexp">/(\d)th/g</span>, <span class="hljs-string">'$1'</span>);
|
||||
out = out.replace(<span class="hljs-regexp">/(\d)st/g</span>, <span class="hljs-string">'$1'</span>);
|
||||
out = $.trim(out);
|
||||
<span class="hljs-keyword">if</span> (out.match(<span class="hljs-regexp">/\d\d\d\d-\d\d-\d\d(T.*)?/</span>)) {
|
||||
out = out.replace(<span class="hljs-regexp">/-/g</span>, <span class="hljs-string">','</span>).replace(<span class="hljs-string">'T'</span>, <span class="hljs-string">','</span>).replace(<span class="hljs-string">':'</span>,<span class="hljs-string">','</span>);
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (out.match(<span class="hljs-regexp">/\d\d-\d\d-\d\d.*/</span>)) {
|
||||
out = out.replace(<span class="hljs-regexp">/-/g</span>, <span class="hljs-string">'/'</span>);
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.state.get(<span class="hljs-string">'nonUSDates'</span>)) {
|
||||
<span class="hljs-keyword">var</span> parts = out.match(<span class="hljs-regexp">/(\d\d)\/(\d\d)\/(\d\d.*)/</span>);
|
||||
<span class="hljs-keyword">if</span> (parts) {
|
||||
out = [parts[<span class="hljs-number">2</span>], parts[<span class="hljs-number">1</span>], parts[<span class="hljs-number">3</span>]].join(<span class="hljs-string">'/'</span>);
|
||||
}
|
||||
}
|
||||
<span class="hljs-keyword">return</span> out;
|
||||
},
|
||||
|
||||
<span class="nx">_checkField</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">possibleFieldNames</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">modelFieldNames</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="s1">'id'</span><span class="p">);</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">possibleFieldNames</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">){</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><</span> <span class="nx">modelFieldNames</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">){</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">modelFieldNames</span><span class="p">[</span><span class="nx">j</span><span class="p">].</span><span class="nx">toLowerCase</span><span class="p">()</span> <span class="o">==</span> <span class="nx">possibleFieldNames</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">toLowerCase</span><span class="p">())</span>
|
||||
<span class="k">return</span> <span class="nx">modelFieldNames</span><span class="p">[</span><span class="nx">j</span><span class="p">];</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
_setupTemporalField: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.state.set({
|
||||
startField: <span class="hljs-keyword">this</span>._checkField(<span class="hljs-keyword">this</span>.startFieldNames),
|
||||
endField: <span class="hljs-keyword">this</span>._checkField(<span class="hljs-keyword">this</span>.endFieldNames)
|
||||
});
|
||||
},
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
_checkField: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(possibleFieldNames)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> modelFieldNames = <span class="hljs-keyword">this</span>.model.fields.pluck(<span class="hljs-string">'id'</span>);
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < possibleFieldNames.length; i++){
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> j = <span class="hljs-number">0</span>; j < modelFieldNames.length; j++){
|
||||
<span class="hljs-keyword">if</span> (modelFieldNames[j].toLowerCase() == possibleFieldNames[i].toLowerCase())
|
||||
<span class="hljs-keyword">return</span> modelFieldNames[j];
|
||||
}
|
||||
}
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
|
||||
}
|
||||
});
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,83 +1,259 @@
|
||||
<!DOCTYPE html> <html> <head> <title>widget.facetviewer.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.facetviewer.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<html>
|
||||
<head>
|
||||
<title>widget.facetviewer.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>widget.facetviewer.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h2>FacetViewer</h2>
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<h2 id="facetviewer">FacetViewer</h2>
|
||||
<p>Widget for displaying facets </p>
|
||||
|
||||
<p>Usage:</p>
|
||||
|
||||
<pre><code> var viewer = new FacetViewer({
|
||||
<pre><code> <span class="hljs-keyword">var</span> viewer = <span class="hljs-keyword">new</span> FacetViewer({
|
||||
model: dataset
|
||||
});
|
||||
</code></pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-facet-viewer'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="facets"> \</span>
|
||||
<span class="s1"> {{#facets}} \</span>
|
||||
<span class="s1"> <div class="facet-summary" data-facet="{{id}}"> \</span>
|
||||
<span class="s1"> <h3> \</span>
|
||||
<span class="s1"> {{id}} \</span>
|
||||
<span class="s1"> </h3> \</span>
|
||||
<span class="s1"> <ul class="facet-items"> \</span>
|
||||
<span class="s1"> {{#terms}} \</span>
|
||||
<span class="s1"> <li><a class="facet-choice js-facet-filter" data-value="{{term}}" href="#{{term}}">{{term}} ({{count}})</a></li> \</span>
|
||||
<span class="s1"> {{/terms}} \</span>
|
||||
<span class="s1"> {{#entries}} \</span>
|
||||
<span class="s1"> <li><a class="facet-choice js-facet-filter" data-value="{{time}}">{{term}} ({{count}})</a></li> \</span>
|
||||
<span class="s1"> {{/entries}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> {{/facets}} \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>my.FacetViewer = Backbone.View.extend({
|
||||
className: <span class="hljs-string">'recline-facet-viewer'</span>,
|
||||
template: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>,
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .js-facet-filter'</span><span class="o">:</span> <span class="s1">'onFacetFilter'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="s1">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="s1">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
|
||||
<span class="p">};</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">facets</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">facet</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">facet</span><span class="p">.</span><span class="nx">_type</span> <span class="o">===</span> <span class="s1">'date_histogram'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">facet</span><span class="p">.</span><span class="nx">entries</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">facet</span><span class="p">.</span><span class="nx">entries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">entry</span><span class="p">.</span><span class="nx">term</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">time</span><span class="p">).</span><span class="nx">toDateString</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">entry</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">facet</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onHide</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onFacetFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$target</span><span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'.facet-summary'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-facet'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-value'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFilter</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="s1">'term'</span><span class="p">,</span> <span class="nx">field</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span> <span class="nx">term</span><span class="o">:</span> <span class="nx">value</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>have to trigger explicitly for some reason</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">query</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
events: {
|
||||
<span class="hljs-string">'click .js-facet-filter'</span>: <span class="hljs-string">'onFacetFilter'</span>
|
||||
},
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(model)</span> </span>{
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.facets, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> tmplData = {
|
||||
fields: <span class="hljs-keyword">this</span>.model.fields.toJSON()
|
||||
};
|
||||
tmplData.facets = _.map(<span class="hljs-keyword">this</span>.model.facets.toJSON(), <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(facet)</span> </span>{
|
||||
<span class="hljs-keyword">if</span> (facet._type === <span class="hljs-string">'date_histogram'</span>) {
|
||||
facet.entries = _.map(facet.entries, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(entry)</span> </span>{
|
||||
entry.term = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(entry.time).toDateString();
|
||||
<span class="hljs-keyword">return</span> entry;
|
||||
});
|
||||
}
|
||||
<span class="hljs-keyword">return</span> facet;
|
||||
});
|
||||
<span class="hljs-keyword">var</span> templated = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
||||
<span class="hljs-keyword">this</span>.$el.html(templated);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<p>are there actually any facets to show?</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.model.facets.length > <span class="hljs-number">0</span>) {
|
||||
<span class="hljs-keyword">this</span>.$el.show();
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-keyword">this</span>.$el.hide();
|
||||
}
|
||||
},
|
||||
onHide: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">this</span>.$el.hide();
|
||||
},
|
||||
onFacetFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $target= $(e.target);
|
||||
<span class="hljs-keyword">var</span> fieldId = $target.closest(<span class="hljs-string">'.facet-summary'</span>).attr(<span class="hljs-string">'data-facet'</span>);
|
||||
<span class="hljs-keyword">var</span> value = $target.attr(<span class="hljs-string">'data-value'</span>);
|
||||
<span class="hljs-keyword">this</span>.model.queryState.addFilter({type: <span class="hljs-string">'term'</span>, field: fieldId, term: value});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>have to trigger explicitly for some reason</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.model.query();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,82 +1,299 @@
|
||||
<!DOCTYPE html> <html> <head> <title>widget.fields.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.fields.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Field Info</p>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>widget.fields.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>widget.fields.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span></pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>Field Info</p>
|
||||
<p>For each field</p>
|
||||
<p>Id / Label / type / format</p>
|
||||
|
||||
<p>Id / Label / type / format</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Editor -- to change type (and possibly format)
|
||||
Editor for show/hide ...</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Summaries of fields</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-3">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-3">¶</a>
|
||||
</div>
|
||||
<p>Editor — to change type (and possibly format)
|
||||
Editor for show/hide …</p>
|
||||
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-4">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-4">¶</a>
|
||||
</div>
|
||||
<p>Summaries of fields</p>
|
||||
<p>Top values / number empty
|
||||
If number: max, min average ...</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Box to boot transform editor ...</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
If number: max, min average …</p>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-5">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-5">¶</a>
|
||||
</div>
|
||||
<p>Box to boot transform editor …</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre>
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">Fields</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-fields-view'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="accordion fields-list well"> \</span>
|
||||
<span class="s1"> <h3>Fields <a href="#" class="js-show-hide">+</a></h3> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <div class="accordion-group field"> \</span>
|
||||
<span class="s1"> <div class="accordion-heading"> \</span>
|
||||
<span class="s1"> <i class="icon-file"></i> \</span>
|
||||
<span class="s1"> <h4> \</span>
|
||||
<span class="s1"> {{label}} \</span>
|
||||
<span class="s1"> <small> \</span>
|
||||
<span class="s1"> {{type}} \</span>
|
||||
<span class="s1"> <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; </a> \</span>
|
||||
<span class="s1"> </small> \</span>
|
||||
<span class="s1"> </h4> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div id="collapse{{id}}" class="accordion-body collapse"> \</span>
|
||||
<span class="s1"> <div class="accordion-inner"> \</span>
|
||||
<span class="s1"> {{#facets}} \</span>
|
||||
<span class="s1"> <div class="facet-summary" data-facet="{{id}}"> \</span>
|
||||
<span class="s1"> <ul class="facet-items"> \</span>
|
||||
<span class="s1"> {{#terms}} \</span>
|
||||
<span class="s1"> <li class="facet-item"><span class="term">{{term}}</span> <span class="count">[{{count}}]</span></li> \</span>
|
||||
<span class="s1"> {{/terms}} \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> {{/facets}} \</span>
|
||||
<span class="s1"> <div class="clear"></div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
my.Fields = Backbone.View.extend({
|
||||
className: <span class="hljs-string">'recline-fields-view'</span>,
|
||||
template: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>,
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>TODO: this is quite restrictive in terms of when it is re-run
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(model)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-6">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-6">¶</a>
|
||||
</div>
|
||||
<p>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)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="s1">'reset'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">action</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">field</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">unbind</span><span class="p">(</span><span class="s1">'all'</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="nx">field</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'all'</span><span class="p">,</span> <span class="nx">self</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>fields can get reset or changed in which case we need to recalculate</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">getFieldsSummary</span><span class="p">();</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.collapse'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">fields</span><span class="o">:</span> <span class="p">[]</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">out</span><span class="p">.</span><span class="nx">facets</span> <span class="o">=</span> <span class="nx">field</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
being more liberal (e.g. binding to all) can lead to being called a lot (e.g. for change:width)</p>
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'reset'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(action)</span> </span>{
|
||||
self.model.fields.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
||||
field.facets.unbind(<span class="hljs-string">'all'</span>, self.render);
|
||||
field.facets.bind(<span class="hljs-string">'all'</span>, self.render);
|
||||
});</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-7">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-7">¶</a>
|
||||
</div>
|
||||
<p>fields can get reset or changed in which case we need to recalculate</p>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> self.model.getFieldsSummary();
|
||||
self.render();
|
||||
});
|
||||
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'.collapse'</span>).collapse();
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> tmplData = {
|
||||
fields: []
|
||||
};
|
||||
<span class="hljs-keyword">this</span>.model.fields.each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(field)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> out = field.toJSON();
|
||||
out.facets = field.facets.toJSON();
|
||||
tmplData.fields.push(out);
|
||||
});
|
||||
<span class="hljs-keyword">var</span> templated = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
||||
<span class="hljs-keyword">this</span>.$el.html(templated);
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,168 +1,330 @@
|
||||
<!DOCTYPE html> <html> <head> <title>widget.filtereditor.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.filtereditor.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<html>
|
||||
<head>
|
||||
<title>widget.filtereditor.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>widget.filtereditor.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span>
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">FilterEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-filter-editor well'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="filters"> \</span>
|
||||
<span class="s1"> <h3>Filters</h3> \</span>
|
||||
<span class="s1"> <a href="#" class="js-add-filter">Add filter</a> \</span>
|
||||
<span class="s1"> <form class="form-stacked js-add" style="display: none;"> \</span>
|
||||
<span class="s1"> <fieldset> \</span>
|
||||
<span class="s1"> <label>Field</label> \</span>
|
||||
<span class="s1"> <select class="fields"> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> <label>Filter type</label> \</span>
|
||||
<span class="s1"> <select class="filterType"> \</span>
|
||||
<span class="s1"> <option value="term">Value</option> \</span>
|
||||
<span class="s1"> <option value="range">Range</option> \</span>
|
||||
<span class="s1"> <option value="geo_distance">Geo distance</option> \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> <button type="submit" class="btn">Add</button> \</span>
|
||||
<span class="s1"> </fieldset> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> <form class="form-stacked js-edit"> \</span>
|
||||
<span class="s1"> {{#filters}} \</span>
|
||||
<span class="s1"> {{{filterRender}}} \</span>
|
||||
<span class="s1"> {{/filters}} \</span>
|
||||
<span class="s1"> {{#filters.length}} \</span>
|
||||
<span class="s1"> <button type="submit" class="btn">Update</button> \</span>
|
||||
<span class="s1"> {{/filters.length}} \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">filterTemplates</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">term</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="filter-{{type}} filter"> \</span>
|
||||
<span class="s1"> <fieldset> \</span>
|
||||
<span class="s1"> <legend> \</span>
|
||||
<span class="s1"> {{field}} <small>{{type}}</small> \</span>
|
||||
<span class="s1"> <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \</span>
|
||||
<span class="s1"> </legend> \</span>
|
||||
<span class="s1"> <input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \</span>
|
||||
<span class="s1"> </fieldset> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">range</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="filter-{{type}} filter"> \</span>
|
||||
<span class="s1"> <fieldset> \</span>
|
||||
<span class="s1"> <legend> \</span>
|
||||
<span class="s1"> {{field}} <small>{{type}}</small> \</span>
|
||||
<span class="s1"> <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \</span>
|
||||
<span class="s1"> </legend> \</span>
|
||||
<span class="s1"> <label class="control-label" for="">From</label> \</span>
|
||||
<span class="s1"> <input type="text" value="{{from}}" name="from" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \</span>
|
||||
<span class="s1"> <label class="control-label" for="">To</label> \</span>
|
||||
<span class="s1"> <input type="text" value="{{to}}" name="to" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \</span>
|
||||
<span class="s1"> </fieldset> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">geo_distance</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="filter-{{type}} filter"> \</span>
|
||||
<span class="s1"> <fieldset> \</span>
|
||||
<span class="s1"> <legend> \</span>
|
||||
<span class="s1"> {{field}} <small>{{type}}</small> \</span>
|
||||
<span class="s1"> <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \</span>
|
||||
<span class="s1"> </legend> \</span>
|
||||
<span class="s1"> <label class="control-label" for="">Longitude</label> \</span>
|
||||
<span class="s1"> <input type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \</span>
|
||||
<span class="s1"> <label class="control-label" for="">Latitude</label> \</span>
|
||||
<span class="s1"> <input type="text" value="{{point.lat}}" name="lat" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \</span>
|
||||
<span class="s1"> <label class="control-label" for="">Distance (km)</label> \</span>
|
||||
<span class="s1"> <input type="text" value="{{distance}}" name="distance" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \</span>
|
||||
<span class="s1"> </fieldset> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .js-remove-filter'</span><span class="o">:</span> <span class="s1">'onRemoveFilter'</span><span class="p">,</span>
|
||||
<span class="s1">'click .js-add-filter'</span><span class="o">:</span> <span class="s1">'onAddFilterShow'</span><span class="p">,</span>
|
||||
<span class="s1">'submit form.js-edit'</span><span class="o">:</span> <span class="s1">'onTermFiltersUpdate'</span><span class="p">,</span>
|
||||
<span class="s1">'submit form.js-add'</span><span class="o">:</span> <span class="s1">'onAddFilter'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="s1">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">,</span> <span class="s1">'change change:filters:new-blank'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="kc">true</span><span class="p">,</span> <span class="p">{},</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>we will use idx in list as there id ...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">tmplData</span><span class="p">.</span><span class="nx">filters</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">filter</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">idx</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">filter</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">filterRender</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">filterTemplates</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">type</span><span class="p">],</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onAddFilterShow</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="nx">$target</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'form.js-add'</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onAddFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="nx">$target</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">filterType</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'select.filterType'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'select.fields'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFilter</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="nx">filterType</span><span class="p">,</span> <span class="nx">field</span><span class="o">:</span> <span class="nx">field</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onRemoveFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$target</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">filterId</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-filter-id'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">removeFilter</span><span class="p">(</span><span class="nx">filterId</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onTermFiltersUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">filters</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'filters'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">$form</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">$form</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'input'</span><span class="p">),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">input</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$input</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">input</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">filterType</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-filter-type'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-filter-field'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">filterIndex</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-filter-id'</span><span class="p">),</span> <span class="mi">10</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'name'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$input</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;
|
||||
|
||||
<span class="k">switch</span> <span class="p">(</span><span class="nx">filterType</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">case</span> <span class="s1">'term'</span><span class="o">:</span>
|
||||
<span class="nx">filters</span><span class="p">[</span><span class="nx">filterIndex</span><span class="p">].</span><span class="nx">term</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
|
||||
<span class="k">break</span><span class="p">;</span>
|
||||
<span class="k">case</span> <span class="s1">'range'</span><span class="o">:</span>
|
||||
<span class="nx">filters</span><span class="p">[</span><span class="nx">filterIndex</span><span class="p">][</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
|
||||
<span class="k">break</span><span class="p">;</span>
|
||||
<span class="k">case</span> <span class="s1">'geo_distance'</span><span class="o">:</span>
|
||||
<span class="k">if</span><span class="p">(</span><span class="nx">name</span> <span class="o">===</span> <span class="s1">'distance'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">filters</span><span class="p">[</span><span class="nx">filterIndex</span><span class="p">].</span><span class="nx">distance</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">filters</span><span class="p">[</span><span class="nx">filterIndex</span><span class="p">].</span><span class="nx">point</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">break</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">filters</span><span class="o">:</span> <span class="nx">filters</span><span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="mi">0</span><span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
my.FilterEditor = Backbone.View.extend({
|
||||
className: <span class="hljs-string">'recline-filter-editor well'</span>,
|
||||
template: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>,
|
||||
filterTemplates: {
|
||||
term: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>,
|
||||
range: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>,
|
||||
geo_distance: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>
|
||||
},
|
||||
events: {
|
||||
<span class="hljs-string">'click .js-remove-filter'</span>: <span class="hljs-string">'onRemoveFilter'</span>,
|
||||
<span class="hljs-string">'click .js-add-filter'</span>: <span class="hljs-string">'onAddFilterShow'</span>,
|
||||
<span class="hljs-string">'submit form.js-edit'</span>: <span class="hljs-string">'onTermFiltersUpdate'</span>,
|
||||
<span class="hljs-string">'submit form.js-add'</span>: <span class="hljs-string">'onAddFilter'</span>
|
||||
},
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.queryState, <span class="hljs-string">'change change:filters:new-blank'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> tmplData = $.extend(<span class="hljs-literal">true</span>, {}, <span class="hljs-keyword">this</span>.model.queryState.toJSON());</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>we will use idx in list as there id …</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> tmplData.filters = _.map(tmplData.filters, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(filter, idx)</span> </span>{
|
||||
filter.id = idx;
|
||||
<span class="hljs-keyword">return</span> filter;
|
||||
});
|
||||
tmplData.fields = <span class="hljs-keyword">this</span>.model.fields.toJSON();
|
||||
tmplData.filterRender = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> Mustache.render(self.filterTemplates[<span class="hljs-keyword">this</span>.type], <span class="hljs-keyword">this</span>);
|
||||
};
|
||||
<span class="hljs-keyword">var</span> out = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
||||
<span class="hljs-keyword">this</span>.$el.html(out);
|
||||
},
|
||||
onAddFilterShow: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $target = $(e.target);
|
||||
$target.hide();
|
||||
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'form.js-add'</span>).show();
|
||||
},
|
||||
onAddFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $target = $(e.target);
|
||||
$target.hide();
|
||||
<span class="hljs-keyword">var</span> filterType = $target.find(<span class="hljs-string">'select.filterType'</span>).val();
|
||||
<span class="hljs-keyword">var</span> field = $target.find(<span class="hljs-string">'select.fields'</span>).val();
|
||||
<span class="hljs-keyword">this</span>.model.queryState.addFilter({type: filterType, field: field});
|
||||
},
|
||||
onRemoveFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $target = $(e.target);
|
||||
<span class="hljs-keyword">var</span> filterId = $target.attr(<span class="hljs-string">'data-filter-id'</span>);
|
||||
<span class="hljs-keyword">this</span>.model.queryState.removeFilter(filterId);
|
||||
},
|
||||
onTermFiltersUpdate: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> filters = self.model.queryState.get(<span class="hljs-string">'filters'</span>);
|
||||
<span class="hljs-keyword">var</span> $form = $(e.target);
|
||||
_.each($form.find(<span class="hljs-string">'input'</span>), <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(input)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> $input = $(input);
|
||||
<span class="hljs-keyword">var</span> filterType = $input.attr(<span class="hljs-string">'data-filter-type'</span>);
|
||||
<span class="hljs-keyword">var</span> fieldId = $input.attr(<span class="hljs-string">'data-filter-field'</span>);
|
||||
<span class="hljs-keyword">var</span> filterIndex = <span class="hljs-built_in">parseInt</span>($input.attr(<span class="hljs-string">'data-filter-id'</span>), <span class="hljs-number">10</span>);
|
||||
<span class="hljs-keyword">var</span> name = $input.attr(<span class="hljs-string">'name'</span>);
|
||||
<span class="hljs-keyword">var</span> value = $input.val();
|
||||
|
||||
<span class="hljs-keyword">switch</span> (filterType) {
|
||||
<span class="hljs-keyword">case</span> <span class="hljs-string">'term'</span>:
|
||||
filters[filterIndex].term = value;
|
||||
<span class="hljs-keyword">break</span>;
|
||||
<span class="hljs-keyword">case</span> <span class="hljs-string">'range'</span>:
|
||||
filters[filterIndex][name] = value;
|
||||
<span class="hljs-keyword">break</span>;
|
||||
<span class="hljs-keyword">case</span> <span class="hljs-string">'geo_distance'</span>:
|
||||
<span class="hljs-keyword">if</span>(name === <span class="hljs-string">'distance'</span>) {
|
||||
filters[filterIndex].distance = <span class="hljs-built_in">parseFloat</span>(value);
|
||||
}
|
||||
<span class="hljs-keyword">else</span> {
|
||||
filters[filterIndex].point[name] = <span class="hljs-built_in">parseFloat</span>(value);
|
||||
}
|
||||
<span class="hljs-keyword">break</span>;
|
||||
}
|
||||
});
|
||||
self.model.queryState.set({filters: filters, from: <span class="hljs-number">0</span>});
|
||||
self.model.queryState.trigger(<span class="hljs-string">'change'</span>);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,223 @@
|
||||
<!DOCTYPE html> <html> <head> <title>widget.pager.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.pager.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<html>
|
||||
<head>
|
||||
<title>widget.pager.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>widget.pager.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span>
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">Pager</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-pager'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="pagination"> \</span>
|
||||
<span class="s1"> <ul> \</span>
|
||||
<span class="s1"> <li class="prev action-pagination-update"><a href="">&laquo;</a></li> \</span>
|
||||
<span class="s1"> <li class="active"><a><input name="from" type="text" value="{{from}}" /> &ndash; <input name="to" type="text" value="{{to}}" /> </a></li> \</span>
|
||||
<span class="s1"> <li class="next action-pagination-update"><a href="">&raquo;</a></li> \</span>
|
||||
<span class="s1"> </ul> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .action-pagination-update'</span><span class="o">:</span> <span class="s1">'onPaginationUpdate'</span><span class="p">,</span>
|
||||
<span class="s1">'change input'</span><span class="o">:</span> <span class="s1">'onFormSubmit'</span>
|
||||
<span class="p">},</span>
|
||||
my.Pager = Backbone.View.extend({
|
||||
className: <span class="hljs-string">'recline-pager'</span>,
|
||||
template: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>,
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">,</span> <span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onFormSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'input[name="from"]'</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
|
||||
<span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">recordCount</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">newFrom</span><span class="p">,</span> <span class="mi">1</span><span class="p">))</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">newSize</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'input[name="to"]'</span><span class="p">).</span><span class="nx">val</span><span class="p">())</span> <span class="o">-</span> <span class="nx">newFrom</span><span class="p">;</span>
|
||||
<span class="nx">newSize</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">newSize</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">recordCount</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">size</span><span class="o">:</span> <span class="nx">newSize</span><span class="p">,</span> <span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onPaginationUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">newFrom</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">currFrom</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'from'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">size</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'size'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">updateQuery</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">hasClass</span><span class="p">(</span><span class="s1">'prev'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">currFrom</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">size</span><span class="p">),</span> <span class="mi">1</span><span class="p">)</span><span class="o">-</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="nx">updateQuery</span> <span class="o">=</span> <span class="nx">newFrom</span> <span class="o">!=</span> <span class="nx">currFrom</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">newFrom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">currFrom</span> <span class="o">+</span> <span class="nx">size</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
|
||||
<span class="nx">updateQuery</span> <span class="o">=</span> <span class="p">(</span><span class="nx">newFrom</span> <span class="o"><</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">recordCount</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">updateQuery</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">from</span><span class="o">:</span> <span class="nx">newFrom</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">from</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'from'</span><span class="p">));</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">from</span> <span class="o">=</span> <span class="nx">from</span><span class="o">+</span><span class="mi">1</span><span class="p">;</span>
|
||||
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">to</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">from</span><span class="o">+</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'size'</span><span class="p">),</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">recordCount</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
events: {
|
||||
<span class="hljs-string">'click .action-pagination-update'</span>: <span class="hljs-string">'onPaginationUpdate'</span>,
|
||||
<span class="hljs-string">'change input'</span>: <span class="hljs-string">'onFormSubmit'</span>
|
||||
},
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.queryState, <span class="hljs-string">'change'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
onFormSubmit: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>filter is 0-based; form is 1-based</p>
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> formFrom = <span class="hljs-built_in">parseInt</span>(<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'input[name="from"]'</span>).val())-<span class="hljs-number">1</span>;
|
||||
<span class="hljs-keyword">var</span> formTo = <span class="hljs-built_in">parseInt</span>(<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'input[name="to"]'</span>).val())-<span class="hljs-number">1</span>;
|
||||
<span class="hljs-keyword">var</span> maxRecord = <span class="hljs-keyword">this</span>.model.recordCount-<span class="hljs-number">1</span>;
|
||||
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.model.queryState.get(<span class="hljs-string">'from'</span>) != formFrom) { <span class="hljs-comment">// changed from; update from</span>
|
||||
<span class="hljs-keyword">this</span>.model.queryState.set({from: <span class="hljs-built_in">Math</span>.min(maxRecord, <span class="hljs-built_in">Math</span>.max(formFrom, <span class="hljs-number">0</span>))});
|
||||
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.model.queryState.get(<span class="hljs-string">'to'</span>) != formTo) { <span class="hljs-comment">// change to; update size</span>
|
||||
<span class="hljs-keyword">var</span> to = <span class="hljs-built_in">Math</span>.min(maxRecord, <span class="hljs-built_in">Math</span>.max(formTo, <span class="hljs-number">0</span>));
|
||||
<span class="hljs-keyword">this</span>.model.queryState.set({size: <span class="hljs-built_in">Math</span>.min(maxRecord+<span class="hljs-number">1</span>, <span class="hljs-built_in">Math</span>.max(to-formFrom+<span class="hljs-number">1</span>, <span class="hljs-number">1</span>))});
|
||||
}
|
||||
},
|
||||
onPaginationUpdate: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $el = $(e.target);
|
||||
<span class="hljs-keyword">var</span> newFrom = <span class="hljs-number">0</span>;
|
||||
<span class="hljs-keyword">var</span> currFrom = <span class="hljs-keyword">this</span>.model.queryState.get(<span class="hljs-string">'from'</span>);
|
||||
<span class="hljs-keyword">var</span> size = <span class="hljs-keyword">this</span>.model.queryState.get(<span class="hljs-string">'size'</span>);
|
||||
<span class="hljs-keyword">var</span> updateQuery = <span class="hljs-literal">false</span>;
|
||||
<span class="hljs-keyword">if</span> ($el.parent().hasClass(<span class="hljs-string">'prev'</span>)) {
|
||||
newFrom = <span class="hljs-built_in">Math</span>.max(currFrom - <span class="hljs-built_in">Math</span>.max(<span class="hljs-number">0</span>, size), <span class="hljs-number">0</span>);
|
||||
updateQuery = newFrom != currFrom;
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
newFrom = <span class="hljs-built_in">Math</span>.max(currFrom + size, <span class="hljs-number">0</span>);
|
||||
updateQuery = (newFrom < <span class="hljs-keyword">this</span>.model.recordCount);
|
||||
}
|
||||
<span class="hljs-keyword">if</span> (updateQuery) {
|
||||
<span class="hljs-keyword">this</span>.model.queryState.set({from: newFrom});
|
||||
}
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> tmplData = <span class="hljs-keyword">this</span>.model.toJSON();
|
||||
<span class="hljs-keyword">var</span> from = <span class="hljs-built_in">parseInt</span>(<span class="hljs-keyword">this</span>.model.queryState.get(<span class="hljs-string">'from'</span>));
|
||||
tmplData.from = from+<span class="hljs-number">1</span>;
|
||||
tmplData.to = <span class="hljs-built_in">Math</span>.min(from+<span class="hljs-keyword">this</span>.model.queryState.get(<span class="hljs-string">'size'</span>), <span class="hljs-keyword">this</span>.model.recordCount);
|
||||
<span class="hljs-keyword">var</span> templated = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
||||
<span class="hljs-keyword">this</span>.$el.html(templated);
|
||||
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,44 +1,184 @@
|
||||
<!DOCTYPE html> <html> <head> <title>widget.queryeditor.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.queryeditor.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
|
||||
<!DOCTYPE html>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<html>
|
||||
<head>
|
||||
<title>widget.queryeditor.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>widget.queryeditor.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="s2">"use strict"</span><span class="p">;</span>
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">QueryEditor</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'recline-query-editor'</span><span class="p">,</span>
|
||||
<span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <form action="" method="GET" class="form-inline"> \</span>
|
||||
<span class="s1"> <div class="input-prepend text-query"> \</span>
|
||||
<span class="s1"> <span class="add-on"><i class="icon-search"></i></span> \</span>
|
||||
<span class="s1"> <input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <button type="submit" class="btn">Go &raquo;</button> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'submit form'</span><span class="o">:</span> <span class="s1">'onFormSubmit'</span>
|
||||
<span class="p">},</span>
|
||||
my.QueryEditor = Backbone.View.extend({
|
||||
className: <span class="hljs-string">'recline-query-editor'</span>,
|
||||
template: <span class="hljs-string">' \
|
||||
<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> \
|
||||
'</span>,
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">,</span> <span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onFormSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.text-query input'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">q</span><span class="o">:</span> <span class="nx">query</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
events: {
|
||||
<span class="hljs-string">'submit form'</span>: <span class="hljs-string">'onFormSubmit'</span>
|
||||
},
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model, <span class="hljs-string">'change'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
onFormSubmit: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> query = <span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'.search-query'</span>).val();
|
||||
<span class="hljs-keyword">this</span>.model.set({q: query});
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> tmplData = <span class="hljs-keyword">this</span>.model.toJSON();
|
||||
<span class="hljs-keyword">var</span> templated = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
||||
<span class="hljs-keyword">this</span>.$el.html(templated);
|
||||
}
|
||||
});
|
||||
|
||||
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
264
docs/src/widget.valuefilter.html
Normal file
264
docs/src/widget.valuefilter.html
Normal file
@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>widget.valuefilter.js</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||
<link rel="stylesheet" media="all" href="docco.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="background"></div>
|
||||
|
||||
<ul id="jump_to">
|
||||
<li>
|
||||
<a class="large" href="javascript:void(0);">Jump To …</a>
|
||||
<a class="small" href="javascript:void(0);">+</a>
|
||||
<div id="jump_wrapper">
|
||||
<div id="jump_page_wrapper">
|
||||
<div id="jump_page">
|
||||
|
||||
|
||||
<a class="source" href="backend.dataproxy.html">
|
||||
backend.dataproxy.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="backend.memory.html">
|
||||
backend.memory.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="ecma-fixes.html">
|
||||
ecma-fixes.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="model.html">
|
||||
model.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.flot.html">
|
||||
view.flot.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.graph.html">
|
||||
view.graph.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.grid.html">
|
||||
view.grid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.map.html">
|
||||
view.map.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.multiview.html">
|
||||
view.multiview.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.slickgrid.html">
|
||||
view.slickgrid.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="view.timeline.html">
|
||||
view.timeline.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.facetviewer.html">
|
||||
widget.facetviewer.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.fields.html">
|
||||
widget.fields.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.filtereditor.html">
|
||||
widget.filtereditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.pager.html">
|
||||
widget.pager.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.queryeditor.html">
|
||||
widget.queryeditor.js
|
||||
</a>
|
||||
|
||||
|
||||
<a class="source" href="widget.valuefilter.html">
|
||||
widget.valuefilter.js
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="sections">
|
||||
|
||||
<li id="title">
|
||||
<div class="annotation">
|
||||
<h1>widget.valuefilter.js</h1>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li id="section-1">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-1">¶</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
|
||||
|
||||
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
|
||||
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
|
||||
|
||||
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
|
||||
<span class="hljs-pi"> "use strict"</span>;
|
||||
|
||||
my.ValueFilter = Backbone.View.extend({
|
||||
className: <span class="hljs-string">'recline-filter-editor well'</span>,
|
||||
template: <span class="hljs-string">' \
|
||||
<div class="filters"> \
|
||||
<h3>Filters</h3> \
|
||||
<button class="btn js-add-filter add-filter">Add filter</button> \
|
||||
<form class="form-stacked js-add" style="display: none;"> \
|
||||
<fieldset> \
|
||||
<label>Field</label> \
|
||||
<select class="fields form-control"> \
|
||||
{{#fields}} \
|
||||
<option value="{{id}}">{{label}}</option> \
|
||||
{{/fields}} \
|
||||
</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-filter">Update</button> \
|
||||
{{/filters.length}} \
|
||||
</form> \
|
||||
</div> \
|
||||
'</span>,
|
||||
filterTemplates: {
|
||||
term: <span class="hljs-string">' \
|
||||
<div class="filter-{{type}} filter"> \
|
||||
<fieldset> \
|
||||
{{field}} \
|
||||
<a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
|
||||
<input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
|
||||
</fieldset> \
|
||||
</div> \
|
||||
'</span>
|
||||
},
|
||||
events: {
|
||||
<span class="hljs-string">'click .js-remove-filter'</span>: <span class="hljs-string">'onRemoveFilter'</span>,
|
||||
<span class="hljs-string">'click .js-add-filter'</span>: <span class="hljs-string">'onAddFilterShow'</span>,
|
||||
<span class="hljs-string">'submit form.js-edit'</span>: <span class="hljs-string">'onTermFiltersUpdate'</span>,
|
||||
<span class="hljs-string">'submit form.js-add'</span>: <span class="hljs-string">'onAddFilter'</span>
|
||||
},
|
||||
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.queryState, <span class="hljs-string">'change change:filters:new-blank'</span>, <span class="hljs-keyword">this</span>.render);
|
||||
<span class="hljs-keyword">this</span>.render();
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> tmplData = $.extend(<span class="hljs-literal">true</span>, {}, <span class="hljs-keyword">this</span>.model.queryState.toJSON());</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
<li id="section-2">
|
||||
<div class="annotation">
|
||||
|
||||
<div class="pilwrap ">
|
||||
<a class="pilcrow" href="#section-2">¶</a>
|
||||
</div>
|
||||
<p>we will use idx in list as the id …</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content"><div class='highlight'><pre> tmplData.filters = _.map(tmplData.filters, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(filter, idx)</span> </span>{
|
||||
filter.id = idx;
|
||||
<span class="hljs-keyword">return</span> filter;
|
||||
});
|
||||
tmplData.fields = <span class="hljs-keyword">this</span>.model.fields.toJSON();
|
||||
tmplData.filterRender = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> Mustache.render(self.filterTemplates.term, <span class="hljs-keyword">this</span>);
|
||||
};
|
||||
<span class="hljs-keyword">var</span> out = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
|
||||
<span class="hljs-keyword">this</span>.$el.html(out);
|
||||
},
|
||||
updateFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(input)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
<span class="hljs-keyword">var</span> filters = self.model.queryState.get(<span class="hljs-string">'filters'</span>);
|
||||
<span class="hljs-keyword">var</span> $input = $(input);
|
||||
<span class="hljs-keyword">var</span> filterIndex = <span class="hljs-built_in">parseInt</span>($input.attr(<span class="hljs-string">'data-filter-id'</span>), <span class="hljs-number">10</span>);
|
||||
<span class="hljs-keyword">var</span> value = $input.val();
|
||||
filters[filterIndex].term = value;
|
||||
},
|
||||
onAddFilterShow: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $target = $(e.target);
|
||||
$target.hide();
|
||||
<span class="hljs-keyword">this</span>.$el.find(<span class="hljs-string">'form.js-add'</span>).show();
|
||||
},
|
||||
onAddFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $target = $(e.target);
|
||||
$target.hide();
|
||||
<span class="hljs-keyword">var</span> field = $target.find(<span class="hljs-string">'select.fields'</span>).val();
|
||||
<span class="hljs-keyword">this</span>.model.queryState.addFilter({type: <span class="hljs-string">'term'</span>, field: field});
|
||||
},
|
||||
onRemoveFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> $target = $(e.target);
|
||||
<span class="hljs-keyword">var</span> filterId = $target.attr(<span class="hljs-string">'data-filter-id'</span>);
|
||||
<span class="hljs-keyword">this</span>.model.queryState.removeFilter(filterId);
|
||||
},
|
||||
onTermFiltersUpdate: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>;
|
||||
e.preventDefault();
|
||||
<span class="hljs-keyword">var</span> filters = self.model.queryState.get(<span class="hljs-string">'filters'</span>);
|
||||
<span class="hljs-keyword">var</span> $form = $(e.target);
|
||||
_.each($form.find(<span class="hljs-string">'input'</span>), <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(input)</span> </span>{
|
||||
self.updateFilter(input);
|
||||
});
|
||||
self.model.queryState.set({filters: filters, from: <span class="hljs-number">0</span>});
|
||||
self.model.queryState.trigger(<span class="hljs-string">'change'</span>);
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery, recline.View);</pre></div></div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user