Initial commit

lib/assets/javascripts/deep-insights/dashboard-view.js

@@ -0,0 +1,89 @@
+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);
+  }
+});