Initial commit

lib/assets/javascripts/builder/components/modals/modal-view.js

@@ -0,0 +1,101 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var template = require('./modal.tpl');
+
+// Ought to match the duration of the .Dialog.is-closing animation.
+var CLOSE_DELAY_MS = 120;
+
+module.exports = CoreView.extend({
+  className: function () {
+    var classes = ['Dialog', 'is-white'];
+    if (!this.options.escapeOptionsDisabled) {
+      classes.push('is-opening');
+    }
+
+    if (this.options.breadcrumbsEnabled) {
+      classes.push('Dialog--withBreadcrumbs');
+    }
+
+    return classes.join(' ');
+  },
+
+  events: {
+    'click .js-close': '_onClose'
+  },
+
+  initialize: function () {
+    this.listenTo(this.model, 'change:show', this._onShowChange);
+    this.listenTo(this.model, 'destroy', this._onDestroy);
+
+    this._escapeOptionsDisabled = this.options.escapeOptionsDisabled;
+    this._breadcrumbsEnabled = this.options.breadcrumbsEnabled;
+    this._keepOpenOnRouteChange = this.options.keepOpenOnRouteChange;
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this.$el.html(
+      template({
+        escapeOptionsDisabled: this._escapeOptionsDisabled || false,
+        breadcrumbsEnabled: this._breadcrumbsEnabled || false
+      })
+    );
+
+    var view = this.model.createContentView();
+    this.addView(view);
+
+    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();
+  },
+
+  keepOpenOnRouteChange: function () {
+    return this.model.get('keepOpenOnRouteChange');
+  },
+
+  _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 (e) {
+    e.stopPropagation();
+    this.destroy();
+  },
+
+  _onDestroy: function () {
+    this.hide();
+    _.invoke(this._subviews, 'allOff');
+    this._delayDueToAnimation(function () {
+      this.clean();
+    });
+  },
+
+  _delayDueToAnimation: function (fn) {
+    setTimeout(fn.bind(this), CLOSE_DELAY_MS);
+  }
+
+});