knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated code and tests to stop recline clobbering view.el. Issue #350.

Browse Source
This commit is contained in:
Dan Wilson
2013-05-13 17:59:03 +01:00
parent 38256b455b
commit 8ea1a81c0a
18 changed files with 111 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/view.flot.js
View File

@@ -38,7 +38,6 @@ my.Flot = Backbone.View.extend({
var self = this;
this.graphColors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"];
this.el = $(this.el);
_.bindAll(this, 'render', 'redraw', '_toolTip', '_xaxisLabel');
this.needToRedraw = false;
this.model.bind('change', this.render);
@@ -64,15 +63,15 @@ my.Flot = Backbone.View.extend({
self.state.set(self.editor.state.toJSON());
self.redraw();
});
this.elSidebar = this.editor.el;
this.elSidebar = this.editor.$el;
},
render: function() {
var self = this;
var tmplData = this.model.toTemplateJSON();
var htmls = Mustache.render(this.template, tmplData);
$(this.el).html(htmls);
this.$graph = this.el.find('.panel.graph');
this.$el.html(htmls);
this.$graph = this.$el.find('.panel.graph');
this.$graph.on("plothover", this._toolTip);
return this;
},
@@ -82,7 +81,7 @@ my.Flot = Backbone.View.extend({
// * The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with
// Uncaught Invalid dimensions for plot, width = 0, height = 0
// * There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value'
var areWeVisible = !jQuery.expr.filters.hidden(this.el[0]);
var areWeVisible = !jQuery.expr.filters.hidden(this.el);
if ((!areWeVisible || this.model.records.length === 0)) {
this.needToRedraw = true;
return;
@@ -403,7 +402,6 @@ my.FlotControls = Backbone.View.extend({
initialize: function(options) {
var self = this;
this.el = $(this.el);
_.bindAll(this, 'render');
this.model.fields.bind('reset', this.render);
this.model.fields.bind('add', this.render);
@@ -415,7 +413,7 @@ my.FlotControls = Backbone.View.extend({
var self = this;
var tmplData = this.model.toTemplateJSON();
var htmls = Mustache.render(this.template, tmplData);
this.el.html(htmls);
this.$el.html(htmls);
// set up editor from state
if (this.state.get('graphType')) {
@@ -439,7 +437,7 @@ my.FlotControls = Backbone.View.extend({
// Private: Helper function to select an option from a select list
//
_selectOption: function(id,value){
var options = this.el.find(id + ' select > option');
var options = this.$el.find(id + ' select > option');
if (options) {
options.each(function(opt){
if (this.value == value) {
@@ -451,16 +449,16 @@ my.FlotControls = Backbone.View.extend({
},
onEditorSubmit: function(e) {
var select = this.el.find('.editor-group select');
var select = this.$el.find('.editor-group select');
var $editor = this;
var $series = this.el.find('.editor-series select');
var $series = this.$el.find('.editor-series select');
var series = $series.map(function () {
return $(this).val();
});
var updatedState = {
series: $.makeArray(series),
group: this.el.find('.editor-group select').val(),
graphType: this.el.find('.editor-type select').val()
group: this.$el.find('.editor-group select').val(),
graphType: this.$el.find('.editor-type select').val()
};
this.state.set(updatedState);
},
@@ -477,7 +475,7 @@ my.FlotControls = Backbone.View.extend({
}, this.model.toTemplateJSON());
var htmls = Mustache.render(this.templateSeriesEditor, data);
this.el.find('.editor-series-group').append(htmls);
this.$el.find('.editor-series-group').append(htmls);
return this;
},

24
src/view.grid.js
View File

@@ -16,7 +16,6 @@ my.Grid = Backbone.View.extend({
initialize: function(modelEtc) {
var self = this;
this.el = $(this.el);
_.bindAll(this, 'render', 'onHorizontalScroll');
this.model.records.bind('add', this.render);
this.model.records.bind('reset', this.render);
@@ -60,7 +59,7 @@ my.Grid = Backbone.View.extend({
onHorizontalScroll: function(e) {
var currentScroll = $(e.target).scrollLeft();
this.el.find('.recline-grid thead tr').scrollLeft(currentScroll);
this.$el.find('.recline-grid thead tr').scrollLeft(currentScroll);
},
// ======================================================
@@ -103,7 +102,7 @@ my.Grid = Backbone.View.extend({
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 fullWidth = self.$el.width() - 20 - 10 * numFields - this.scrollbarDimensions.width;
var width = parseInt(Math.max(50, fullWidth / numFields), 10);
// if columns extend outside viewport then remainder is 0
var remainder = Math.max(fullWidth - numFields * width,0);
@@ -116,10 +115,10 @@ my.Grid = Backbone.View.extend({
}
});
var htmls = Mustache.render(this.template, this.toTemplateJSON());
this.el.html(htmls);
this.$el.html(htmls);
this.model.records.forEach(function(doc) {
var tr = $('<tr />');
self.el.find('tbody').append(tr);
self.$el.find('tbody').append(tr);
var newView = new my.GridRow({
model: doc,
el: tr,
@@ -128,12 +127,12 @@ 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];
var $tbody = this.$el.find('tbody')[0];
if ($tbody.scrollHeight <= $tbody.offsetHeight) {
this.el.find('th.last-header').hide();
this.$el.find('th.last-header').hide();
}
this.el.find('.recline-grid').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
this.el.find('.recline-grid tbody').scroll(this.onHorizontalScroll);
this.$el.find('.recline-grid').toggleClass('no-hidden', (self.state.get('hiddenFields').length === 0));
this.$el.find('.recline-grid tbody').scroll(this.onHorizontalScroll);
return this;
},
@@ -169,7 +168,6 @@ my.GridRow = Backbone.View.extend({
initialize: function(initData) {
_.bindAll(this, 'render');
this._fields = initData.fields;
this.el = $(this.el);
this.model.bind('change', this.render);
},
@@ -203,9 +201,9 @@ my.GridRow = Backbone.View.extend({
},
render: function() {
this.el.attr('data-id', this.model.id);
this.$el.attr('data-id', this.model.id);
var html = Mustache.render(this.template, this.toTemplateJSON());
$(this.el).html(html);
this.$el.html(html);
return this;
},
@@ -225,7 +223,7 @@ my.GridRow = Backbone.View.extend({
',
onEditClick: function(e) {
var editing = this.el.find('.data-table-cell-editor-editor');
var editing = this.$el.find('.data-table-cell-editor-editor');
if (editing.length > 0) {
editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
}

40
src/view.map.js
View File

@@ -51,7 +51,6 @@ my.Map = Backbone.View.extend({
initialize: function(options) {
var self = this;
this.el = $(this.el);
this.visible = true;
this.mapReady = false;
// this will be the Leaflet L.Map object (setup below)
@@ -103,7 +102,7 @@ my.Map = Backbone.View.extend({
this.state.bind('change', function() {
self.redraw();
});
this.elSidebar = this.menu.el;
this.elSidebar = this.menu.$el;
},
// ## Customization Functions
@@ -173,8 +172,8 @@ my.Map = Backbone.View.extend({
render: function() {
var self = this;
var htmls = Mustache.render(this.template, this.model.toTemplateJSON());
$(this.el).html(htmls);
this.$map = this.el.find('.panel.map');
this.$el.html(htmls);
this.$map = this.$el.find('.panel.map');
this.redraw();
return this;
},
@@ -546,7 +545,6 @@ my.MapMenu = Backbone.View.extend({
initialize: function(options) {
var self = this;
this.el = $(this.el);
_.bindAll(this, 'render');
this.model.fields.bind('change', this.render);
this.state = new recline.Model.ObjectState(options.state);
@@ -560,27 +558,27 @@ my.MapMenu = Backbone.View.extend({
render: function() {
var self = this;
var htmls = Mustache.render(this.template, this.model.toTemplateJSON());
$(this.el).html(htmls);
this.$el.html(htmls);
if (this._geomReady() && this.model.fields.length){
if (this.state.get('geomField')){
this._selectOption('editor-geom-field',this.state.get('geomField'));
this.el.find('#editor-field-type-geom').attr('checked','checked').change();
this.$el.find('#editor-field-type-geom').attr('checked','checked').change();
} else{
this._selectOption('editor-lon-field',this.state.get('lonField'));
this._selectOption('editor-lat-field',this.state.get('latField'));
this.el.find('#editor-field-type-latlon').attr('checked','checked').change();
this.$el.find('#editor-field-type-latlon').attr('checked','checked').change();
}
}
if (this.state.get('autoZoom')) {
this.el.find('#editor-auto-zoom').attr('checked', 'checked');
this.$el.find('#editor-auto-zoom').attr('checked', 'checked');
} else {
this.el.find('#editor-auto-zoom').removeAttr('checked');
this.$el.find('#editor-auto-zoom').removeAttr('checked');
}
if (this.state.get('cluster')) {
this.el.find('#editor-cluster').attr('checked', 'checked');
this.$el.find('#editor-cluster').attr('checked', 'checked');
} else {
this.el.find('#editor-cluster').removeAttr('checked');
this.$el.find('#editor-cluster').removeAttr('checked');
}
return this;
},
@@ -599,17 +597,17 @@ my.MapMenu = Backbone.View.extend({
//
onEditorSubmit: function(e){
e.preventDefault();
if (this.el.find('#editor-field-type-geom').attr('checked')){
if (this.$el.find('#editor-field-type-geom').attr('checked')){
this.state.set({
geomField: this.el.find('.editor-geom-field > select > option:selected').val(),
geomField: this.$el.find('.editor-geom-field > select > option:selected').val(),
lonField: null,
latField: null
});
} else {
this.state.set({
geomField: null,
lonField: this.el.find('.editor-lon-field > select > option:selected').val(),
latField: this.el.find('.editor-lat-field > select > option:selected').val()
lonField: this.$el.find('.editor-lon-field > select > option:selected').val(),
latField: this.$el.find('.editor-lat-field > select > option:selected').val()
});
}
return false;
@@ -620,11 +618,11 @@ my.MapMenu = Backbone.View.extend({
//
onFieldTypeChange: function(e){
if (e.target.value == 'geom'){
this.el.find('.editor-field-type-geom').show();
this.el.find('.editor-field-type-latlon').hide();
this.$el.find('.editor-field-type-geom').show();
this.$el.find('.editor-field-type-latlon').hide();
} else {
this.el.find('.editor-field-type-geom').hide();
this.el.find('.editor-field-type-latlon').show();
this.$el.find('.editor-field-type-geom').hide();
this.$el.find('.editor-field-type-latlon').show();
}
},
@@ -639,7 +637,7 @@ my.MapMenu = Backbone.View.extend({
// Private: Helper function to select an option from a select list
//
_selectOption: function(id,value){
var options = this.el.find('.' + id + ' > select > option');
var options = this.$el.find('.' + id + ' > select > option');
if (options){
options.each(function(opt){
if (this.value == value) {

27
src/view.multiview.js
View File

@@ -130,7 +130,6 @@ my.MultiView = Backbone.View.extend({
initialize: function(options) {
var self = this;
this.el = $(this.el);
this._setupState(options.state);
// Hash of 'page' views (i.e. those for whole page) keyed by page name
@@ -205,7 +204,7 @@ my.MultiView = Backbone.View.extend({
});
this.model.bind('query:done', function() {
self.clearNotifications();
self.el.find('.doc-count').text(self.model.recordCount || 'Unknown');
self.$el.find('.doc-count').text(self.model.recordCount || 'Unknown');
});
this.model.bind('query:fail', function(error) {
self.clearNotifications();
@@ -236,7 +235,7 @@ my.MultiView = Backbone.View.extend({
},
setReadOnly: function() {
this.el.addClass('recline-read-only');
this.$el.addClass('recline-read-only');
},
render: function() {
@@ -244,11 +243,11 @@ my.MultiView = Backbone.View.extend({
tmplData.views = this.pageViews;
tmplData.sidebarViews = this.sidebarViews;
var template = Mustache.render(this.template, tmplData);
$(this.el).html(template);
this.$el.html(template);
// now create and append other views
var $dataViewContainer = this.el.find('.data-view-container');
var $dataSidebar = this.el.find('.data-view-sidebar');
var $dataViewContainer = this.$el.find('.data-view-container');
var $dataSidebar = this.$el.find('.data-view-sidebar');
// the main views
_.each(this.pageViews, function(view, pageName) {
@@ -260,25 +259,25 @@ my.MultiView = Backbone.View.extend({
});
_.each(this.sidebarViews, function(view) {
this['$'+view.id] = view.view.el;
this['$'+view.id] = view.view.$el;
$dataSidebar.append(view.view.el);
}, this);
var pager = new recline.View.Pager({
model: this.model.queryState
});
this.el.find('.recline-results-info').after(pager.el);
this.$el.find('.recline-results-info').after(pager.el);
var queryEditor = new recline.View.QueryEditor({
model: this.model.queryState
});
this.el.find('.query-editor-here').append(queryEditor.el);
this.$el.find('.query-editor-here').append(queryEditor.el);
},
// hide the sidebar if empty
_showHideSidebar: function() {
var $dataSidebar = this.el.find('.data-view-sidebar');
var $dataSidebar = this.$el.find('.data-view-sidebar');
var visibleChildren = $dataSidebar.children().filter(function() {
return $(this).css("display") != "none";
}).length;
@@ -291,19 +290,19 @@ 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 a').removeClass('active');
var $el = this.$el.find('.navigation a[data-view="' + pageName + '"]');
$el.addClass('active');
// add/remove sidebars and hide inactive views
_.each(this.pageViews, function(view, idx) {
if (view.id === pageName) {
view.view.el.show();
view.view.$el.show();
if (view.view.elSidebar) {
view.view.elSidebar.show();
}
} else {
view.view.el.hide();
view.view.$el.hide();
if (view.view.elSidebar) {
view.view.elSidebar.hide();
}

3
src/view.slickgrid.js
View File

@@ -34,8 +34,7 @@ this.recline.View = this.recline.View || {};
my.SlickGrid = Backbone.View.extend({
initialize: function(modelEtc) {
var self = this;
this.el = $(this.el);
this.el.addClass('recline-slickgrid');
this.$el.addClass('recline-slickgrid');
_.bindAll(this, 'render');
this.model.records.bind('add', this.render);
this.model.records.bind('reset', this.render);

5
src/view.timeline.js
View File

@@ -28,7 +28,6 @@ my.Timeline = Backbone.View.extend({
initialize: function(options) {
var self = this;
this.el = $(this.el);
this.timeline = new VMM.Timeline();
this._timelineIsInitialized = false;
this.model.fields.bind('reset', function() {
@@ -51,7 +50,7 @@ my.Timeline = Backbone.View.extend({
render: function() {
var tmplData = {};
var htmls = Mustache.render(this.template, tmplData);
this.el.html(htmls);
this.$el.html(htmls);
// can only call _initTimeline once view in DOM as Timeline uses $
// internally to look up element
if ($(this.elementId).length > 0) {
@@ -67,7 +66,7 @@ my.Timeline = Backbone.View.extend({
},
_initTimeline: function() {
var $timeline = this.el.find(this.elementId);
var $timeline = this.$el.find(this.elementId);
var data = this._timelineJSON();
this.timeline.init(data, this.elementId, this.state.get("timelineJSOptions"));
this._timelineIsInitialized = true

9
src/widget.facetviewer.js
View File

@@ -42,7 +42,6 @@ my.FacetViewer = Backbone.View.extend({
},
initialize: function(model) {
_.bindAll(this, 'render');
this.el = $(this.el);
this.model.facets.bind('all', this.render);
this.model.fields.bind('all', this.render);
this.render();
@@ -61,17 +60,17 @@ my.FacetViewer = Backbone.View.extend({
return facet;
});
var templated = Mustache.render(this.template, tmplData);
this.el.html(templated);
this.$el.html(templated);
// are there actually any facets to show?
if (this.model.facets.length > 0) {
this.el.show();
this.$el.show();
} else {
this.el.hide();
this.$el.hide();
}
},
onHide: function(e) {
e.preventDefault();
this.el.hide();
this.$el.hide();
},
onFacetFilter: function(e) {
e.preventDefault();

5
src/widget.fields.js
View File

@@ -60,7 +60,6 @@ my.Fields = Backbone.View.extend({
initialize: function(model) {
var self = this;
this.el = $(this.el);
_.bindAll(this, 'render');
// TODO: this is quite restrictive in terms of when it is re-run
@@ -75,7 +74,7 @@ my.Fields = Backbone.View.extend({
self.model.getFieldsSummary();
self.render();
});
this.el.find('.collapse').collapse();
this.$el.find('.collapse').collapse();
this.render();
},
render: function() {
@@ -89,7 +88,7 @@ my.Fields = Backbone.View.extend({
tmplData.fields.push(out);
});
var templated = Mustache.render(this.template, tmplData);
this.el.html(templated);
this.$el.html(templated);
}
});

5
src/widget.filtereditor.js
View File

@@ -89,7 +89,6 @@ my.FilterEditor = Backbone.View.extend({
'submit form.js-add': 'onAddFilter'
},
initialize: function() {
this.el = $(this.el);
_.bindAll(this, 'render');
this.model.fields.bind('all', this.render);
this.model.queryState.bind('change', this.render);
@@ -109,13 +108,13 @@ my.FilterEditor = Backbone.View.extend({
return Mustache.render(self.filterTemplates[this.type], this);
};
var out = Mustache.render(this.template, tmplData);
this.el.html(out);
this.$el.html(out);
},
onAddFilterShow: function(e) {
e.preventDefault();
var $target = $(e.target);
$target.hide();
this.el.find('form.js-add').show();
this.$el.find('form.js-add').show();
},
onAddFilter: function(e) {
e.preventDefault();

7
src/widget.pager.js
View File

@@ -25,14 +25,13 @@ my.Pager = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render');
this.el = $(this.el);
this.model.bind('change', this.render);
this.render();
},
onFormSubmit: function(e) {
e.preventDefault();
var newFrom = parseInt(this.el.find('input[name="from"]').val());
var newSize = parseInt(this.el.find('input[name="to"]').val()) - newFrom;
var newFrom = parseInt(this.$el.find('input[name="from"]').val());
var newSize = parseInt(this.$el.find('input[name="to"]').val()) - newFrom;
newFrom = Math.max(newFrom, 0);
newSize = Math.max(newSize, 1);
this.model.set({size: newSize, from: newFrom});
@@ -53,7 +52,7 @@ my.Pager = Backbone.View.extend({
var tmplData = this.model.toJSON();
tmplData.to = this.model.get('from') + this.model.get('size');
var templated = Mustache.render(this.template, tmplData);
this.el.html(templated);
this.$el.html(templated);
}
});

5
src/widget.queryeditor.js
View File

@@ -24,19 +24,18 @@ my.QueryEditor = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render');
this.el = $(this.el);
this.model.bind('change', this.render);
this.render();
},
onFormSubmit: function(e) {
e.preventDefault();
var query = this.el.find('.text-query input').val();
var query = this.$el.find('.text-query input').val();
this.model.set({q: query});
},
render: function() {
var tmplData = this.model.toJSON();
var templated = Mustache.render(this.template, tmplData);
this.el.html(templated);
this.$el.html(templated);
}
});

5
src/widget.valuefilter.js
View File

@@ -51,7 +51,6 @@ my.ValueFilter = Backbone.View.extend({
'submit form.js-add': 'onAddFilter'
},
initialize: function() {
this.el = $(this.el);
_.bindAll(this, 'render');
this.model.fields.bind('all', this.render);
this.model.queryState.bind('change', this.render);
@@ -71,7 +70,7 @@ my.ValueFilter = Backbone.View.extend({
return Mustache.render(self.filterTemplates.term, this);
};
var out = Mustache.render(this.template, tmplData);
this.el.html(out);
this.$el.html(out);
},
updateFilter: function(input) {
var self = this;
@@ -85,7 +84,7 @@ my.ValueFilter = Backbone.View.extend({
e.preventDefault();
var $target = $(e.target);
$target.hide();
this.el.find('form.js-add').show();
this.$el.find('form.js-add').show();
},
onAddFilter: function(e) {
e.preventDefault();