Initial commit

lib/assets/javascripts/builder/editor/layers/layer-analysis-draggable-view.js

@@ -0,0 +1,56 @@
+require('jquery-ui');
+var CoreView = require('backbone/core-view');
+var template = require('./layer-analysis-draggable.tpl');
+var analyses = require('builder/data/analyses');
+var layerColors = require('builder/data/layer-colors');
+
+/**
+ * Attach draggable behavior to an analysis node
+ * Implemented as a view to hook into Backbone's lifecycle handling, but really it's just attaching the behavior to the
+ * provided $nodeViewElement
+ */
+module.exports = CoreView.extend({
+  options: {
+    getNextLetter: function () { return 'x'; },
+    sortableSelector: '',
+    $nodeViewElement: null
+  },
+
+  initialize: function (opts) {
+    if (!opts.sortableSelector) throw new Error('sortableSelector is required');
+    if (!opts.$nodeViewElement) throw new Error('$nodeViewElement is required');
+    if (!opts.layerDefinitionModel) throw new Error('layerDefinitionModel is required');
+
+    this.options.$nodeViewElement.draggable({
+      appendTo: this.options.sortableSelector,
+      connectToSortable: this.options.sortableSelector,
+      cursor: 'move',
+      axis: 'y',
+      cursorAt: { top: 40 },
+      helper: this._createHelper.bind(this),
+      zIndex: 1000
+    });
+  },
+
+  _createHelper: function () {
+    var nextLetter = this.options.getNextLetter();
+    var layerLetter = this.options.layerDefinitionModel.get('letter');
+    return template({
+      nodeId: this.model.id,
+      nextLetter: nextLetter,
+      layerLetter: layerLetter,
+      nextBgColor: layerColors.getColorForLetter(nextLetter),
+      title: analyses.title(this.model)
+    });
+  },
+
+  clean: function () {
+    if (this.options.$nodeViewElement && this.options.$nodeViewElement.data('ui-draggable')) {
+      this.options.$nodeViewElement.draggable('destroy');
+    }
+
+    this.options.$nodeViewElement = null; // remove DOM reference to avoid memory leak
+    CoreView.prototype.clean.apply(this, arguments);
+  }
+
+});