57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|