ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-21 00:23:01 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Manual re-do of collapse/expand panes

Browse Source 
open #90
Added code to MCTSplitter and MCTSplitPane to allow
toggling of CSS class 'resizing' on pane elements when
the user is actively using the splitter;
Added resize transition animation to split pane elements
when user not actively resizing;
This commit is contained in:
Charles Hacskaylo
2015-10-23 09:18:59 -07:00
parent 57f11a9767
commit 827e1af581
6 changed files with 152 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -178,6 +178,14 @@ define(
return position;
}
// Dynamically apply a CSS class to elements when the user is actively resizing
function splitterState(state) {
var children = $element.children();
for (var i = 0; i < children.length; i++) {
children.eq(i).toggleClass('resizing');
}
}
// Make sure anchor parameter is something we know
if (!ANCHORS[anchorKey]) {
$log.warn(ANCHOR_WARNING_MESSAGE);
@ -208,6 +216,7 @@ define(
// Interface exposed by controller, for mct-splitter to user
return {
position: getSetPosition,
action: splitterState,
anchor: function () {
return anchor;
}

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

@ -29,7 +29,8 @@ define(
// Pixel width to allocate for the splitter itself
var SPLITTER_TEMPLATE = "<div class='abs'" +
"mct-drag-down=\"splitter.startMove()\" " +
"mct-drag=\"splitter.move(delta)\"></div>",
"mct-drag=\"splitter.move(delta)\" " +
"mct-drag-up=\"splitter.endMove()\"></div>",
OFFSETS_BY_EDGE = {
left: "offsetLeft",
right: "offsetRight",
@ -53,6 +54,7 @@ define(
startMove: function () {
var splitter = element[0];
initialPosition = mctSplitPane.position();
mctSplitPane.action('startMove');
},
// Handle user changes to splitter position
move: function (delta) {
@ -63,6 +65,10 @@ define(
// Update the position of this splitter
mctSplitPane.position(initialPosition + pixelDelta);
},
// Grab the event when the user is done moving the splitter and pass it on
endMove: function() {
mctSplitPane.action('endMove');
}
};
}