[build][xs]: standard build of recline.js.
This commit is contained in:
Rufus Pollock
parent
fa0f37b5f7
commit
76eb296a94
102
recline.js
102
recline.js
@ -612,7 +612,7 @@ my.composeQueryString = function(queryParams) {
|
||||
if (typeof(value) === 'object') {
|
||||
value = JSON.stringify(value);
|
||||
}
|
||||
items.push(key + '=' + value);
|
||||
items.push(key + '=' + encodeURIComponent(value));
|
||||
});
|
||||
queryString += items.join('&');
|
||||
return queryString;
|
||||
@ -1177,8 +1177,9 @@ my.Grid = Backbone.View.extend({
|
||||
// ======================================================
|
||||
// #### Templating
|
||||
template: ' \
|
||||
<div class="table-container"> \
|
||||
<table class="recline-grid table-striped table-condensed" cellspacing="0"> \
|
||||
<thead> \
|
||||
<thead class="fixed-header"> \
|
||||
<tr> \
|
||||
{{#notEmpty}} \
|
||||
<th class="column-header"> \
|
||||
@ -1191,7 +1192,7 @@ my.Grid = Backbone.View.extend({
|
||||
</th> \
|
||||
{{/notEmpty}} \
|
||||
{{#fields}} \
|
||||
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}"> \
|
||||
<th class="column-header {{#hidden}}hidden{{/hidden}}" data-field="{{id}}" style="width: {{width}}px;"> \
|
||||
<div class="btn-group column-header-menu"> \
|
||||
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
|
||||
<ul class="dropdown-menu data-table-menu pull-right"> \
|
||||
@ -1210,17 +1211,24 @@ my.Grid = Backbone.View.extend({
|
||||
<span class="column-header-name">{{label}}</span> \
|
||||
</th> \
|
||||
{{/fields}} \
|
||||
<th class="last-header" style="width: {{lastHeaderWidth}}px; padding: 0; margin: 0;"></th> \
|
||||
</tr> \
|
||||
</thead> \
|
||||
<tbody></tbody> \
|
||||
<tbody class="scroll-content"></tbody> \
|
||||
</table> \
|
||||
</div> \
|
||||
',
|
||||
|
||||
toTemplateJSON: function() {
|
||||
var self = this;
|
||||
var modelData = this.model.toJSON();
|
||||
modelData.notEmpty = ( this.fields.length > 0 );
|
||||
// TODO: move this sort of thing into a toTemplateJSON method on Dataset?
|
||||
modelData.fields = _.map(this.fields, function(field) { return field.toJSON(); });
|
||||
modelData.fields = _.map(this.fields, function(field) {
|
||||
return field.toJSON();
|
||||
});
|
||||
// last header width = scroll bar - border (2px) */
|
||||
modelData.lastHeaderWidth = this.scrollbarDimensions.width - 2;
|
||||
return modelData;
|
||||
},
|
||||
render: function() {
|
||||
@ -1228,6 +1236,20 @@ my.Grid = Backbone.View.extend({
|
||||
this.fields = this.model.fields.filter(function(field) {
|
||||
return _.indexOf(self.state.get('hiddenFields'), field.id) == -1;
|
||||
});
|
||||
this.scrollbarDimensions = this.scrollbarDimensions || this._scrollbarSize(); // skip measurement if already have dimensions
|
||||
var numFields = this.fields.length;
|
||||
// compute field widths (-20 for first menu col + 10px for padding on each col and finally 16px for the scrollbar)
|
||||
var fullWidth = self.el.width() - 20 - 10 * numFields - this.scrollbarDimensions.width;
|
||||
var width = parseInt(Math.max(50, fullWidth / numFields));
|
||||
var remainder = fullWidth - numFields * width;
|
||||
_.each(this.fields, function(field, idx) {
|
||||
// add the remainder to the first field width so we make up full col
|
||||
if (idx == 0) {
|
||||
field.set({width: width+remainder});
|
||||
} else {
|
||||
field.set({width: width});
|
||||
}
|
||||
});
|
||||
var htmls = $.mustache(this.template, this.toTemplateJSON());
|
||||
this.el.html(htmls);
|
||||
this.model.currentDocuments.forEach(function(doc) {
|
||||
@ -1240,8 +1262,25 @@ my.Grid = Backbone.View.extend({
|
||||
});
|
||||
newView.render();
|
||||
});
|
||||
// hide extra header col if no scrollbar to avoid unsightly overhang
|
||||
var $tbody = this.el.find('tbody')[0];
|
||||
if ($tbody.scrollHeight <= $tbody.offsetHeight) {
|
||||
this.el.find('th.last-header').hide();
|
||||
}
|
||||
this.el.find('.recline-grid').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
|
||||
return this;
|
||||
},
|
||||
|
||||
// ### _scrollbarSize
|
||||
//
|
||||
// Measure width of a vertical scrollbar and height of a horizontal scrollbar.
|
||||
//
|
||||
// @return: { width: pixelWidth, height: pixelHeight }
|
||||
_scrollbarSize: function() {
|
||||
var $c = $("<div style='position:absolute; top:-10000px; left:-10000px; width:100px; height:100px; overflow:scroll;'></div>").appendTo("body");
|
||||
var dim = { width: $c.width() - $c[0].clientWidth + 1, height: $c.height() - $c[0].clientHeight };
|
||||
$c.remove();
|
||||
return dim;
|
||||
}
|
||||
});
|
||||
|
||||
@ -1278,7 +1317,7 @@ my.GridRow = Backbone.View.extend({
|
||||
</div> \
|
||||
</td> \
|
||||
{{#cells}} \
|
||||
<td data-field="{{field}}"> \
|
||||
<td data-field="{{field}}" style="width: {{width}}px; max-width: {{width}}px;"> \
|
||||
<div class="data-table-cell-content"> \
|
||||
<a href="javascript:{}" class="data-table-cell-edit" title="Edit this cell"> </a> \
|
||||
<div class="data-table-cell-value">{{{value}}}</div> \
|
||||
@ -1298,6 +1337,7 @@ my.GridRow = Backbone.View.extend({
|
||||
var cellData = this._fields.map(function(field) {
|
||||
return {
|
||||
field: field.id,
|
||||
width: field.get('width'),
|
||||
value: doc.getFieldValue(field)
|
||||
};
|
||||
});
|
||||
@ -1795,7 +1835,7 @@ my.Map = Backbone.View.extend({
|
||||
// on [OpenStreetMap](http://openstreetmap.org).
|
||||
//
|
||||
_setupMap: function(){
|
||||
var self = this;
|
||||
|
||||
this.map = new L.Map(this.$map.get(0));
|
||||
|
||||
var mapUrl = "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png";
|
||||
@ -1835,14 +1875,6 @@ my.Map = Backbone.View.extend({
|
||||
|
||||
this.map.setView(new L.LatLng(0, 0), 2);
|
||||
|
||||
var popup = new L.Popup();
|
||||
this.map.on('click', function(e) {
|
||||
var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
|
||||
popup.setLatLng(e.latlng);
|
||||
popup.setContent("You clicked the map at " + latlngStr);
|
||||
self.map.openPopup(popup);
|
||||
});
|
||||
|
||||
this.mapReady = true;
|
||||
},
|
||||
|
||||
@ -2043,10 +2075,11 @@ my.ColumnTransform = Backbone.View.extend({
|
||||
|
||||
// # Recline Views
|
||||
//
|
||||
// Recline Views are Backbone Views and in keeping with normal Backbone views
|
||||
// are Widgets / Components displaying something in the DOM. Like all Backbone
|
||||
// views they have a pointer to a model or a collection and is bound to an
|
||||
// element.
|
||||
// Recline Views are instances of Backbone Views and they act as 'WUI' (web
|
||||
// user interface) component displaying some model object in the DOM. Like all
|
||||
// Backbone views they have a pointer to a model (or a collection) and have an
|
||||
// associated DOM-style element (usually this element will be bound into the
|
||||
// page at some point).
|
||||
//
|
||||
// Views provided by core Recline are crudely divided into two types:
|
||||
//
|
||||
@ -2262,12 +2295,11 @@ my.DataExplorer = Backbone.View.extend({
|
||||
}
|
||||
|
||||
this.model.bind('query:start', function() {
|
||||
self.notify({message: 'Loading data', loader: true});
|
||||
self.notify({loader: true, persist: true});
|
||||
});
|
||||
this.model.bind('query:done', function() {
|
||||
self.clearNotifications();
|
||||
self.el.find('.doc-count').text(self.model.docCount || 'Unknown');
|
||||
self.notify({message: 'Data loaded', category: 'success'});
|
||||
});
|
||||
this.model.bind('query:fail', function(error) {
|
||||
self.clearNotifications();
|
||||
@ -2432,19 +2464,25 @@ my.DataExplorer = Backbone.View.extend({
|
||||
// * loader: if true show loading spinner
|
||||
notify: function(flash) {
|
||||
var tmplData = _.extend({
|
||||
message: '',
|
||||
category: 'warning'
|
||||
message: 'Loading',
|
||||
category: 'warning',
|
||||
loader: false
|
||||
},
|
||||
flash
|
||||
);
|
||||
var _template = ' \
|
||||
<div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
|
||||
{{message}} \
|
||||
{{#loader}} \
|
||||
if (tmplData.loader) {
|
||||
var _template = ' \
|
||||
<div class="alert alert-info alert-loader"> \
|
||||
{{message}} \
|
||||
<span class="notification-loader"> </span> \
|
||||
{{/loader}} \
|
||||
</div>';
|
||||
var _templated = $.mustache(_template, tmplData);
|
||||
</div>';
|
||||
} else {
|
||||
var _template = ' \
|
||||
<div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \
|
||||
{{message}} \
|
||||
</div>';
|
||||
}
|
||||
var _templated = $($.mustache(_template, tmplData));
|
||||
_templated = $(_templated).appendTo($('.recline-data-explorer .alert-messages'));
|
||||
if (!flash.persist) {
|
||||
setTimeout(function() {
|
||||
@ -2460,7 +2498,9 @@ my.DataExplorer = Backbone.View.extend({
|
||||
// Clear all existing notifications
|
||||
clearNotifications: function() {
|
||||
var $notifications = $('.recline-data-explorer .alert-messages .alert');
|
||||
$notifications.remove();
|
||||
$notifications.fadeOut(1500, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user