ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 17:33:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Common UI] Tweak mct-split-pane

Browse Source 
Tweak mct-split-pane for use in timeline; particularly,
improve synchronization between views. WTD-1363.
This commit is contained in:
Victor Woeltjen 2015-06-27 11:59:18 -07:00
parent a0d5a1a196
commit 8c5b497377
2 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
platform/commonUI/general/src/directives/MCTSplitPane.js
View File

@ -104,7 +104,6 @@ define(
function controller($scope, $element, $attrs) {
var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
anchor,
styleValue,
positionParsed = $parse($attrs.position),
position; // Start undefined, until explicitly set
@ -116,8 +115,7 @@ define(
// Get relevant size (height or width) of DOM element
function getSize(domElement) {
return (anchor.orientation === 'vertical' ?
domElement.offsetWidth : domElement.offsetHeight)
+ "px";
domElement.offsetWidth : domElement.offsetHeight);
}
// Apply styles to child elements
@ -131,17 +129,18 @@ define(
firstSize;
first.css(anchor.edge, "0px");
if (styleValue !== undefined) {
first.css(anchor.dimension, styleValue);
}
first.css(anchor.dimension, (position - splitterSize) + 'px');
// Get actual size (to obey min-width etc.)
firstSize = getSize(first[0]);
first.css(anchor.dimension, firstSize);
splitter.css(anchor.edge, firstSize);
first.css(anchor.dimension, firstSize + 'px');
splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
splitter.css(anchor.opposite, "auto");
last.css(anchor.edge, calcSum(firstSize, splitterSize));
last.css(anchor.edge, (firstSize + splitterSize * 3) + 'px');
last.css(anchor.opposite, "0px");
position = firstSize + splitterSize;
}
// Update positioning of contained elements
@ -171,13 +170,12 @@ define(
if (typeof value === 'number') {
position = value;
enforceExtrema();
updateElementPositions();
// Pass change up so this state can be shared
if (positionParsed.assign) {
positionParsed.assign($scope, value);
positionParsed.assign($scope, position);
}
styleValue = position + 'px';
updateElementPositions();
}
return position;
}
@ -195,7 +193,9 @@ define(
$element.addClass(anchor.orientation);
// Initialize positions
updateElementPositions();
getSetPosition(getSize(
$element.children().eq(anchor.reversed ? 2 : 0)[0]
));
// Interface exposed by controller, for mct-splitter to user
return {

15
platform/commonUI/general/src/directives/MCTSplitter.js
View File

@ -47,20 +47,23 @@ define(
element.addClass("splitter");
// Now that we have the above class, the splitter width
// will have changed, so trigger a positioning update.
mctSplitPane.position(mctSplitPane.position());
scope.splitter = {
// Begin moving this splitter
startMove: function () {
var splitter = element[0];
initialPosition = splitter[OFFSETS_BY_EDGE[
mctSplitPane.anchor().edge
]];
initialPosition = mctSplitPane.position();
},
// Handle user changes to splitter position
move: function (delta) {
var anchor = mctSplitPane.anchor(),
pixelDelta = delta[
anchor.orientation === "vertical" ? 0 : 1
];
index = anchor.orientation === "vertical" ? 0 : 1,
pixelDelta = delta[index] *
(anchor.reversed ? -1 : 1);
// Update the position of this splitter
mctSplitPane.position(initialPosition + pixelDelta);
}