ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-13 14:13:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Time Conductor] Accept drag gestures

Browse Source 
WTD-1515
This commit is contained in:
Victor Woeltjen 2015-09-02 17:19:20 -07:00
parent a18cc50a43
commit 57a947eaef
2 changed files with 82 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@ -34,13 +34,21 @@ properly on the range left and right bounds.
mct-resize="spanWidth = bounds.width">
<div class="slot range-holder">
<div class="range"
mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}">
</div>
</div>
<div class="knob knob-l" ng-style="{ left: startInnerPct }">
<div class="knob knob-l"
mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])"
ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r" ng-style="{ right: endInnerPct }">
<div class="knob knob-r"
mct-drag-down="startRightDrag()"
mct-drag="rightDrag(delta[0])"
ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div>
</div>
</div>

75
platform/commonUI/general/src/controllers/TimeConductorController.js
View File

@ -33,10 +33,10 @@ define(
* @constructor
*/
function TimeConductorController($scope, now) {
var tickCount = 2;
var tickCount = 2,
initialDragValue;
$scope.state = false;
$scope.ticks = [];
function formatTimestamp(ts) {
return moment.utc(ts).format(DATE_FORMAT);
@ -95,6 +95,75 @@ define(
updateTicks();
}
function startLeftDrag() {
initialDragValue = $scope.ngModel.inner[0];
}
function startRightDrag() {
initialDragValue = $scope.ngModel.inner[1];
}
function startMiddleDrag() {
initialDragValue = [
$scope.ngModel.inner[0],
$scope.ngModel.inner[0]
];
}
function toMillis(pixels) {
var span = $scope.ngModel.outer[1] - $scope.ngModel.outer[0];
return (pixels / $scope.spanWidth) * span;
}
function clamp(value, low, high) {
return Math.max(low, Math.min(high, value));
}
function leftDrag(pixels) {
var delta = toMillis(pixels);
$scope.ngModel.inner[0] = clamp(
initialDragValue + delta,
$scope.ngModel.outer[0],
$scope.ngModel.inner[1]
);
updateFromParameters($scope.ngModel);
}
function rightDrag(pixels) {
var delta = toMillis(pixels);
$scope.ngModel.inner[1] = clamp(
initialDragValue + delta,
$scope.ngModel.inner[0],
$scope.ngModel.outer[1]
);
updateFromParameters($scope.ngModel);
}
function middleDrag(pixels) {
var delta = toMillis(pixels),
index = delta < 0 ? 0 : 1,
opposite = (index === 0) ? 1 : 0,
span = initialDragValue[opposite] - initialDragValue[index];
$scope.ngModel.inner[index] = clamp(
initialDragValue[index] + delta,
$scope.ngModel.outer[0],
$scope.ngModel.outer[1]
);
$scope.ngModel.inner[opposite] =
$scope.ngModel.inner[index] + span;
}
$scope.startLeftDrag = startLeftDrag;
$scope.startRightDrag = startRightDrag;
//$scope.startMiddleDrag = startMiddleDrag;
$scope.leftDrag = leftDrag;
$scope.rightDrag = rightDrag;
//$scope.middleDrag = middleDrag;
$scope.state = false;
$scope.ticks = [];
// Initialize scope to defaults
updateFromParameters();