Initial commit

lib/assets/javascripts/builder/components/onboardings/onboarding-view.js

@@ -0,0 +1,78 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var template = require('./onboarding.tpl');
+
+// Ought to match the duration of the .Dialog.is-closing animation.
+var CLOSE_DELAY_MS = 120;
+
+module.exports = CoreView.extend({
+  className: 'Onboarding is-opening',
+
+  initialize: function () {
+    this.listenTo(this.model, 'change:show', this._onShowChange);
+    this.listenTo(this.model, 'destroy', this._onDestroy);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template());
+
+    var view = this.model.createContentView();
+    this.$el.addClass(this.model.getContentClasses());
+    this.addView(view);
+
+    view.bind('customEvent', this._onCustomEvent, this);
+    view.bind('close', this._onClose, this);
+
+    view.render();
+    this.$('.js-content').append(view.el);
+
+    return this;
+  },
+
+  show: function () {
+    this.model.show();
+  },
+
+  hide: function () {
+    this.model.hide();
+  },
+
+  destroy: function () {
+    // 'remove' would be a better name ofc, but there is already an internal method with that name in CoreView
+    this.model.destroy();
+  },
+
+  _onShowChange: function (m, show) {
+    if (show) {
+      this.$el.show();
+      this.$el.removeClass('is-closing').addClass('is-opening');
+    } else {
+      this.$el.removeClass('is-opening').addClass('is-closing');
+      this._delayDueToAnimation(function () {
+        this.$el.hide();
+      });
+    }
+  },
+
+  _onClose: function () {
+    this.destroy();
+  },
+
+  _onCustomEvent: function (customEventName) {
+    this.destroy();
+    this.trigger('customEvent', customEventName, this);
+  },
+
+  _onDestroy: function () {
+    this.hide();
+    _.invoke(this._subviews, 'allOff');
+    this._delayDueToAnimation(function () {
+      this.clean();
+    });
+  },
+
+  _delayDueToAnimation: function (fn) {
+    setTimeout(fn.bind(this), CLOSE_DELAY_MS);
+  }
+});