Initial commit

lib/assets/javascripts/builder/components/stack-layout/stack-layout-view.js

@@ -0,0 +1,59 @@
+var CoreView = require('backbone/core-view');
+var StackLayoutModel = require('./stack-layout-model');
+var _ = require('underscore');
+
+/**
+ *  Stack layout view manages a "carousel" of views.
+ *  They can go forward or backward.
+ */
+
+module.exports = CoreView.extend({
+  module: 'components:stack-layout:stack-layout-view',
+
+  initialize: function (opts) {
+    if (!this.collection || !this.collection.size()) {
+      throw new Error('A collection of stack views should be provided');
+    }
+    this.model = new StackLayoutModel({}, {
+      stackLayoutItems: this.collection
+    });
+    this.model.bind('positionChanged', this._onPositionChange, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this._genNewStackView();
+    return this;
+  },
+
+  _onPositionChange: function (newPos, opts) {
+    this._removeOldStackView();
+    this._genNewStackView(_.flatten(opts));
+    this.trigger('positionChanged', this);
+  },
+
+  getCurrentPosition: function () {
+    return this.model.get('position');
+  },
+
+  _removeOldStackView: function () {
+    var oldView = this._getCurrentView();
+    if (oldView) {
+      oldView.clean();
+      this.removeView(oldView);
+    }
+  },
+
+  _getCurrentView: function () {
+    for (var key in this._subviews) break;
+    return this._subviews[key];
+  },
+
+  _genNewStackView: function () {
+    var args = [this.model].concat([_.flatten(arguments)]);
+    var nextView = this.collection.at(this.model.get('position')).get('createStackView').apply(this, args);
+    this.addView(nextView);
+
+    this.$el.html(nextView.render().el);
+  }
+});