Initial commit

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

@@ -0,0 +1,60 @@
+var Backbone = require('backbone');
+
+/**
+ *  Stack layout model checks and decides if next or previous
+ *  positions are possible.
+ */
+
+module.exports = Backbone.Model.extend({
+
+  defaults: {
+    position: 0
+  },
+
+  initialize: function (attrs, opts) {
+    this.stackLayoutItems = opts.stackLayoutItems;
+  },
+
+  goToStep: function (position) {
+    var stackLayoutItemsSize = this.stackLayoutItems.size();
+
+    if (position >= stackLayoutItemsSize) {
+      throw new Error('There is no ' + position + ' stack view in the collection');
+    } else {
+      this.set({
+        position: position
+      }, {
+        silent: true
+      });
+      this._rememberStep.apply(this, arguments);
+      this._triggerPositionChanged(position, Array.prototype.slice.call(arguments, 1));
+    }
+  },
+
+  nextStep: function () {
+    var currentPos = this.get('position');
+    var nextPosition = ++currentPos;
+    this.goToStep.apply(this, Array.prototype.concat.apply([nextPosition], arguments));
+  },
+
+  prevStep: function () {
+    var currentPos = this.get('position');
+    var prevPosition = --currentPos;
+    this.goToStep.apply(this, Array.prototype.concat.apply([prevPosition], arguments));
+  },
+
+  goBack: function () {
+    if (this._goBackToArguments) {
+      this.goToStep.apply(this, this._goBackToArguments);
+    }
+  },
+
+  _triggerPositionChanged: function (position, args) {
+    this.trigger('positionChanged', position, Array.prototype.slice.call(args));
+  },
+
+  _rememberStep: function () {
+    this._goBackToArguments = this._lastStepArguments || [ 0 ];
+    this._lastStepArguments = arguments;
+  }
+});

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);
+  }
+});