2015-05-13 16:42:35 -07:00
|
|
|
/*****************************************************************************
|
|
|
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
|
|
|
* as represented by the Administrator of the National Aeronautics and Space
|
|
|
|
* Administration. All rights reserved.
|
|
|
|
*
|
|
|
|
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
|
|
|
* "License"); you may not use this file except in compliance with the License.
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0.
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
|
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
|
|
* License for the specific language governing permissions and limitations
|
|
|
|
* under the License.
|
|
|
|
*
|
|
|
|
* Open MCT Web includes source code licensed under additional open source
|
|
|
|
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
|
|
|
* this source code distribution or the Licensing information page available
|
|
|
|
* at runtime from the About dialog for additional information.
|
|
|
|
*****************************************************************************/
|
2014-12-04 14:45:19 -08:00
|
|
|
/*global define*/
|
|
|
|
|
|
|
|
define(
|
|
|
|
[],
|
|
|
|
function () {
|
|
|
|
"use strict";
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
/**
|
|
|
|
* The mct-drag directive allows drag functionality
|
|
|
|
* (in the mousedown-mousemove-mouseup sense, as opposed to
|
|
|
|
* the drag-and-drop sense) to be attached to specific
|
|
|
|
* elements. This takes the form of three attributes:
|
|
|
|
*
|
|
|
|
* * `mct-drag`: An Angular expression to evaluate during
|
|
|
|
* drag movement.
|
|
|
|
* * `mct-drag-down`: An Angular expression to evaluate
|
|
|
|
* when the drag begins.
|
|
|
|
* * `mct-drag-up`: An Angular expression to evaluate when
|
|
|
|
* dragging ends.
|
|
|
|
*
|
|
|
|
* In each case, a variable `delta` will be provided to the
|
|
|
|
* expression; this is a two-element array or the horizontal
|
|
|
|
* and vertical pixel offset of the current mouse position
|
|
|
|
* relative to the mouse position where dragging began.
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
*
|
|
|
|
*/
|
2014-12-04 14:45:19 -08:00
|
|
|
function MCTDrag($document) {
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Link; install event handlers.
|
2014-12-04 14:45:19 -08:00
|
|
|
function link(scope, element, attrs) {
|
2014-12-05 18:01:38 -08:00
|
|
|
// Keep a reference to the body, to attach/detach
|
|
|
|
// mouse event handlers; mousedown and mouseup cannot
|
|
|
|
// only be attached to the element being linked, as the
|
|
|
|
// mouse may leave this element during the drag.
|
2014-12-05 14:20:50 -08:00
|
|
|
var body = $document.find('body'),
|
|
|
|
initialPosition,
|
2015-06-20 11:47:10 -07:00
|
|
|
$event,
|
2014-12-04 14:45:19 -08:00
|
|
|
delta;
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Utility function to cause evaluation of mctDrag,
|
|
|
|
// mctDragUp, etc
|
2014-12-04 14:45:19 -08:00
|
|
|
function fireListener(name) {
|
2014-12-05 18:01:38 -08:00
|
|
|
// Evaluate the expression, with current delta
|
2015-06-20 11:47:10 -07:00
|
|
|
scope.$eval(attrs[name], {
|
|
|
|
delta: delta,
|
|
|
|
$event: $event
|
|
|
|
});
|
2014-12-05 08:55:54 -08:00
|
|
|
|
|
|
|
// Trigger prompt digestion
|
|
|
|
scope.$apply();
|
2014-12-04 14:45:19 -08:00
|
|
|
}
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Update positions (both actual and relative)
|
|
|
|
// based on a new mouse event object.
|
2014-12-04 14:45:19 -08:00
|
|
|
function updatePosition(event) {
|
2014-12-05 18:01:38 -08:00
|
|
|
// Get the current position, as an array
|
|
|
|
var currentPosition = [ event.pageX, event.pageY ];
|
|
|
|
|
|
|
|
// Track the initial position, if one hasn't been observed
|
2014-12-04 14:45:19 -08:00
|
|
|
initialPosition = initialPosition || currentPosition;
|
2014-12-05 18:01:38 -08:00
|
|
|
|
|
|
|
// Compute relative position
|
2014-12-04 14:45:19 -08:00
|
|
|
delta = currentPosition.map(function (v, i) {
|
|
|
|
return v - initialPosition[i];
|
|
|
|
});
|
2015-06-20 11:47:10 -07:00
|
|
|
|
|
|
|
// Also track the plain event for firing listeners
|
|
|
|
$event = event;
|
2014-12-04 14:45:19 -08:00
|
|
|
}
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Called during a drag, on mousemove
|
2014-12-04 14:45:19 -08:00
|
|
|
function continueDrag(event) {
|
|
|
|
updatePosition(event);
|
|
|
|
fireListener("mctDrag");
|
2014-12-05 08:50:45 -08:00
|
|
|
|
|
|
|
// Don't show selection highlights, etc
|
|
|
|
event.preventDefault();
|
|
|
|
return false;
|
2014-12-04 14:45:19 -08:00
|
|
|
}
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Called only when the drag ends (on mouseup)
|
2014-12-04 14:45:19 -08:00
|
|
|
function endDrag(event) {
|
2014-12-05 18:01:38 -08:00
|
|
|
// Detach event handlers
|
2014-12-04 14:45:19 -08:00
|
|
|
body.off("mouseup", endDrag);
|
|
|
|
body.off("mousemove", continueDrag);
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Also call continueDrag, to fire mctDrag
|
|
|
|
// and do its usual position update
|
2014-12-04 14:45:19 -08:00
|
|
|
continueDrag(event);
|
|
|
|
|
|
|
|
fireListener("mctDragUp");
|
2014-12-05 08:50:45 -08:00
|
|
|
|
2015-06-20 11:47:10 -07:00
|
|
|
// Clear out start-of-drag position, target
|
2014-12-05 08:50:45 -08:00
|
|
|
initialPosition = undefined;
|
|
|
|
|
|
|
|
// Don't show selection highlights, etc
|
|
|
|
event.preventDefault();
|
|
|
|
return false;
|
2014-12-04 14:45:19 -08:00
|
|
|
}
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Called on mousedown on the element
|
2014-12-04 14:45:19 -08:00
|
|
|
function startDrag(event) {
|
2014-12-05 18:01:38 -08:00
|
|
|
// Listen for mouse events at the body level,
|
|
|
|
// since the mouse may leave the element during
|
|
|
|
// the drag.
|
2014-12-04 14:45:19 -08:00
|
|
|
body.on("mouseup", endDrag);
|
|
|
|
body.on("mousemove", continueDrag);
|
2014-12-05 08:50:45 -08:00
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Set an initial position
|
2014-12-04 14:45:19 -08:00
|
|
|
updatePosition(event);
|
2014-12-05 08:50:45 -08:00
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Fire listeners, including mctDrag
|
2014-12-04 14:45:19 -08:00
|
|
|
fireListener("mctDragDown");
|
|
|
|
fireListener("mctDrag");
|
2014-12-05 08:50:45 -08:00
|
|
|
|
|
|
|
// Don't show selection highlights, etc
|
|
|
|
event.preventDefault();
|
2015-06-20 11:47:10 -07:00
|
|
|
|
2014-12-05 08:50:45 -08:00
|
|
|
return false;
|
2014-12-04 14:45:19 -08:00
|
|
|
}
|
|
|
|
|
2014-12-05 18:01:38 -08:00
|
|
|
// Listen for mousedown on the element
|
2014-12-04 14:45:19 -08:00
|
|
|
element.on("mousedown", startDrag);
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2014-12-05 18:01:38 -08:00
|
|
|
// mct-drag only makes sense as an attribute
|
2014-12-04 14:45:19 -08:00
|
|
|
restrict: "A",
|
2014-12-05 18:01:38 -08:00
|
|
|
// Link function, to install event handlers
|
2014-12-04 14:45:19 -08:00
|
|
|
link: link
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return MCTDrag;
|
|
|
|
}
|
2015-06-20 11:47:10 -07:00
|
|
|
);
|