Initial commit

lib/assets/javascripts/builder/components/dialog/dialog-model.js

@@ -0,0 +1,38 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+
+/**
+ * View model of the dialog-view
+ */
+module.exports = Backbone.Model.extend({
+  defaults: {
+    visible: true,
+    createContentView: function () {
+      return new CoreView();
+    }
+  },
+
+  createContentView: function () {
+    return this.get('createContentView')(this);
+  },
+
+  show: function () {
+    this.set('visible', true);
+  },
+
+  hide: function () {
+    this.set('visible', false);
+  },
+
+  isHidden: function () {
+    return !this.get('visible');
+  },
+
+  /**
+   * @override {Backbone.Model.prototype.destroy}
+   */
+  destroy: function () {
+    var args = Array.prototype.slice.call(arguments);
+    this.trigger.apply(this, ['destroy'].concat(args));
+  }
+});

lib/assets/javascripts/builder/components/dialog/dialog-view.js

@@ -0,0 +1,57 @@
+var CoreView = require('backbone/core-view');
+var DropdownOverlayView = require('builder/components/dropdown-overlay/dropdown-overlay-view');
+
+module.exports = CoreView.extend({
+  className: 'Editor-boxModal Editor-FormDialog js-formDialog is-opening',
+
+  initialize: function () {
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this._renderContentView();
+    return this;
+  },
+
+  _renderContentView: function () {
+    var view = this.model.createContentView();
+    this.addView(view);
+    this.$el.append(view.render().$el);
+
+    this.dropdownOverlay = new DropdownOverlayView({
+      onClickAction: this.hide.bind(this),
+      visible: true
+    });
+    this.addView(this.dropdownOverlay);
+  },
+
+  _initBinds: function () {
+    this.listenTo(this.model, 'change:show', this._onShowChange);
+    this.listenTo(this.model, 'destroy', this._onDestroy);
+  },
+
+  _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.$el.hide();
+    }
+  },
+
+  show: function () {
+    this.model.show();
+  },
+
+  hide: function () {
+    this.model.hide();
+  },
+
+  _onDestroy: function () {
+    this.hide();
+    this.dropdownOverlay && this.dropdownOverlay.clean();
+    this.clean();
+  }
+});