|
|
|
@ -1,26 +1,28 @@
|
|
|
|
|
import Backbone from 'backbone';
|
|
|
|
|
import { View } from 'view-engine/view';
|
|
|
|
|
import template from 'templates/drag.hbs';
|
|
|
|
|
|
|
|
|
|
const DragView = Backbone.View.extend({
|
|
|
|
|
events: {
|
|
|
|
|
class DragView extends View {
|
|
|
|
|
template = template;
|
|
|
|
|
|
|
|
|
|
events = {
|
|
|
|
|
'mousedown': 'mousedown'
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
initialize(coord) {
|
|
|
|
|
constructor(coord, options) {
|
|
|
|
|
super(coord, options);
|
|
|
|
|
this.setCoord(coord);
|
|
|
|
|
this.mouseDownTime = -1;
|
|
|
|
|
this.mouseDownCount = 0;
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
super.render({ coord: this.model });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setCoord(coord) {
|
|
|
|
|
this.coord = coord;
|
|
|
|
|
this.offsetProp = 'page' + coord.toUpperCase();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
$('<div/>')
|
|
|
|
|
.addClass('drag-handle__inner')
|
|
|
|
|
.appendTo(this.$el);
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
mousedown(e) {
|
|
|
|
|
if (e.which === 1) {
|
|
|
|
@ -28,7 +30,7 @@ const DragView = Backbone.View.extend({
|
|
|
|
|
if (now - this.mouseDownTime < 500) {
|
|
|
|
|
this.mouseDownCount++;
|
|
|
|
|
if (this.mouseDownCount === 2) {
|
|
|
|
|
this.trigger('autosize', { coord: this.coord });
|
|
|
|
|
this.emit('autosize', { coord: this.coord });
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
@ -42,24 +44,24 @@ const DragView = Backbone.View.extend({
|
|
|
|
|
.appendTo('body');
|
|
|
|
|
this.dragMask.on('mousemove', this.mousemove.bind(this));
|
|
|
|
|
this.dragMask.on('mouseup', this.mouseup.bind(this));
|
|
|
|
|
this.trigger('dragstart', { offset: this.initialOffset, coord: this.coord });
|
|
|
|
|
this.emit('dragstart', { offset: this.initialOffset, coord: this.coord });
|
|
|
|
|
this.$el.addClass('dragging');
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
mousemove(e) {
|
|
|
|
|
if (e.which === 0) {
|
|
|
|
|
this.mouseup();
|
|
|
|
|
} else {
|
|
|
|
|
this.trigger('drag', { offset: e[this.offsetProp] - this.initialOffset });
|
|
|
|
|
this.emit('drag', { offset: e[this.offsetProp] - this.initialOffset });
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
mouseup() {
|
|
|
|
|
this.dragMask.remove();
|
|
|
|
|
this.$el.removeClass('dragging');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export { DragView };
|
|
|
|
|