90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
|
var $ = require('jquery');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var template = require('./dashboard.tpl');
|
||
|
|
var DashboardBelowMapView = require('./dashboard-below-map-view');
|
||
|
|
var DashboardMenuView = require('./dashboard-menu-view');
|
||
|
|
var DashboardSidebarView = require('./dashboard-sidebar-view');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Dashboard is a wrapper around the map canvas, which contains widget views for the map contdxt
|
||
|
|
* Widgets may be rendered in two areas, in the "sidebar" or "below-map".
|
||
|
|
*/
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
className: 'CDB-Dashboard-canvas',
|
||
|
|
|
||
|
|
initialize: function (options) {
|
||
|
|
this._widgets = options.widgets;
|
||
|
|
this._infoView = options.infoView;
|
||
|
|
|
||
|
|
// TODO parent context requires some markup to be present already, but NOT the other views
|
||
|
|
this.el.classList.add(this.className);
|
||
|
|
this.$el.html(template());
|
||
|
|
|
||
|
|
this._onWindowResize = this._onWindowResize.bind(this);
|
||
|
|
$(window).bind('resize', this._onWindowResize);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this.clearSubViews();
|
||
|
|
|
||
|
|
var view;
|
||
|
|
var doRenderMenu = this.model.get('renderMenu');
|
||
|
|
|
||
|
|
this.$el.toggleClass('CDB-Dashboard-canvas--withMenu', doRenderMenu);
|
||
|
|
|
||
|
|
if (doRenderMenu) {
|
||
|
|
view = new DashboardMenuView({
|
||
|
|
model: this.model
|
||
|
|
});
|
||
|
|
this.addView(view);
|
||
|
|
this.$el.append(view.render().el);
|
||
|
|
}
|
||
|
|
|
||
|
|
const hasTimeSeries = this._widgets.some(function (model) {
|
||
|
|
return model.get('type') === 'time-series';
|
||
|
|
});
|
||
|
|
|
||
|
|
if (hasTimeSeries) {
|
||
|
|
this.$el.toggleClass('CDB-Dashboard-canvas--withTimeSeries');
|
||
|
|
}
|
||
|
|
|
||
|
|
view = new DashboardBelowMapView({
|
||
|
|
widgets: this._widgets
|
||
|
|
});
|
||
|
|
this.addView(view);
|
||
|
|
this.$('.js-map-wrapper')
|
||
|
|
.toggleClass('CDB-Dashboard-mapWrapper--withMenu', doRenderMenu)
|
||
|
|
.append(view.render().el);
|
||
|
|
|
||
|
|
if (this._widgets && this._widgets.length) {
|
||
|
|
this.$el.toggleClass('CDB-Dashboard-canvas--withWidgets');
|
||
|
|
}
|
||
|
|
|
||
|
|
view = new DashboardSidebarView({
|
||
|
|
widgets: this._widgets,
|
||
|
|
model: this.model
|
||
|
|
});
|
||
|
|
this.addView(view);
|
||
|
|
this.$el.append(view.render().el);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
getInitialMapState: function () {
|
||
|
|
return {
|
||
|
|
bounds: this.model.get('initialPosition').bounds
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
_onWindowResize: function () {
|
||
|
|
this._widgets.each(function (widget) {
|
||
|
|
widget.forceResize();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
clean: function () {
|
||
|
|
$(window).unbind('resize', this._onWindowResize);
|
||
|
|
CoreView.prototype.clean.call(this);
|
||
|
|
}
|
||
|
|
});
|