Initial commit

lib/assets/javascripts/builder/components/carousel-form-view.js

@@ -0,0 +1,59 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var CarouselView = require('./custom-carousel/custom-carousel-view');
+
+/**
+ *  Carousel form view
+ */
+
+module.exports = CoreView.extend({
+  module: 'components:carousel-form-view',
+
+  className: 'js-aggregationTypes',
+
+  initialize: function (opts) {
+    if (!opts.collection) throw new Error('Carousel collection is required');
+    if (!opts.template) throw new Error('template is required');
+    this.template = opts.template;
+    this._initBinds();
+  },
+
+  render: function () {
+    var selectedItem = this.collection.getSelected();
+    var selectedName = selectedItem && selectedItem.getName();
+    this.$el.html(
+      this.template({
+        name: selectedName
+      })
+    );
+    this._initViews();
+    return this;
+  },
+
+  _initBinds: function () {
+    this.collection.bind('change:highlighted', this._onChangeHighlighted, this);
+  },
+
+  _initViews: function () {
+    var carousel = new CarouselView(_.extend(this.options, {
+      collection: this.collection
+    }));
+
+    if (!this.$('.js-selector').length) throw new Error('HTML element with js-selector class is required');
+
+    this.$('.js-selector').append(carousel.render().el);
+    carousel.initScroll();
+    this.addView(carousel);
+  },
+
+  _onChangeHighlighted: function () {
+    var item = this.collection.getHighlighted() || this.collection.getSelected();
+    if (item) {
+      var $el = this.$('.js-highlight');
+      if ($el) {
+        $el.text(item.getName());
+      }
+    }
+  }
+
+});