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

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

@@ -47,20 +47,23 @@ define(
element.addClass("splitter"); 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 = { scope.splitter = {
// Begin moving this splitter // Begin moving this splitter
startMove: function () { startMove: function () {
var splitter = element[0]; var splitter = element[0];
initialPosition = splitter[OFFSETS_BY_EDGE[ initialPosition = mctSplitPane.position();
mctSplitPane.anchor().edge
]];
}, },
// Handle user changes to splitter position // Handle user changes to splitter position
move: function (delta) { move: function (delta) {
var anchor = mctSplitPane.anchor(), var anchor = mctSplitPane.anchor(),
pixelDelta = delta[ index = anchor.orientation === "vertical" ? 0 : 1,
anchor.orientation === "vertical" ? 0 : 1 pixelDelta = delta[index] *
]; (anchor.reversed ? -1 : 1);
// Update the position of this splitter // Update the position of this splitter
mctSplitPane.position(initialPosition + pixelDelta); mctSplitPane.position(initialPosition + pixelDelta);
} }