[Layout] Add mct-drag directive

Add an mct-drag directive to support various draggable
things, including frames in a layout. WTD-535.
This commit is contained in:
Victor Woeltjen 2014-12-04 14:45:19 -08:00
parent 8956be1209
commit 479aaa09fb
2 changed files with 66 additions and 0 deletions

View File

@ -49,6 +49,11 @@
"key": "mctContainer",
"implementation": "MCTContainer.js",
"depends": [ "containers[]" ]
},
{
"key": "mctDrag",
"implementation": "MCTDrag.js",
"depends": [ "$document" ]
}
],
"containers": [

View File

@ -0,0 +1,61 @@
/*global define*/
define(
[],
function () {
"use strict";
function MCTDrag($document) {
var body = $document.find('body');
function link(scope, element, attrs) {
var initialPosition,
currentPosition,
delta;
function fireListener(name) {
scope.$eval(attrs[name], { delta: delta });
}
function updatePosition(event) {
currentPosition = [ event.pageX, event.pageY ];
initialPosition = initialPosition || currentPosition;
delta = currentPosition.map(function (v, i) {
return v - initialPosition[i];
});
}
function continueDrag(event) {
updatePosition(event);
fireListener("mctDrag");
}
function endDrag(event) {
body.off("mouseup", endDrag);
body.off("mousemove", continueDrag);
continueDrag(event);
fireListener("mctDragUp");
}
function startDrag(event) {
body.on("mouseup", endDrag);
body.on("mousemove", continueDrag);
updatePosition(event);
fireListener("mctDragDown");
fireListener("mctDrag");
}
element.on("mousedown", startDrag);
}
return {
restrict: "A",
link: link
};
}
return MCTDrag;
}
);