ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 13:43:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Common UI] Enforce split pane min/max

Browse Source 
WTD-1363.
This commit is contained in:
Victor Woeltjen 2015-06-26 16:30:39 -07:00
parent 39372ea9ca
commit 72c812cdaa
2 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/browse/res/templates/browse.html
View File

@ -24,6 +24,8 @@
<div class="holder browse-area s-browse-area abs" ng-controller="BrowseController"> <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
<mct-split-pane class='split-layout vertical contents abs' <mct-split-pane class='split-layout vertical contents abs'
anchor='left' anchor='left'
minimum="150"
maximum="800"
initial="25%"> initial="25%">
<div class='split-pane-component treeview pane'> <div class='split-pane-component treeview pane'>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">

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

@ -79,6 +79,8 @@ define(
* edge. * edge.
* * `anchor`: Plain string, one of "left", "right", "top", * * `anchor`: Plain string, one of "left", "right", "top",
* or "bottom". * or "bottom".
* * `maximum`: Maximum pixel width, as a literal numeric value
* * `minimum`: Minimum pixel width, as a literal numeric value
* *
* When used, an `mct-split-pane` element should contain exactly * When used, an `mct-split-pane` element should contain exactly
* three child elements, where the middle is an `mct-splitter` * three child elements, where the middle is an `mct-splitter`
@ -99,6 +101,8 @@ define(
function controller($scope, $element, $attrs) { function controller($scope, $element, $attrs) {
var anchorKey = $attrs.anchor || DEFAULT_ANCHOR, var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
maximum = parseInt($attrs.maximum, 10),
minimum = parseInt($attrs.minimum, 10),
anchor, anchor,
styleValue = $attrs.initial, styleValue = $attrs.initial,
positionParsed = $parse($attrs.position), positionParsed = $parse($attrs.position),
@ -148,11 +152,27 @@ define(
updateChildren(children); updateChildren(children);
} }
// Enforce minimum/maximum positions
function enforceExtrema() {
// Pick default min/max
var min = isNaN(minimum) ? 0 : minimum,
max = isNaN(maximum) ?
Number.POSITIVE_INFINITY : maximum;
// Disallow a max greater than the element's size
max = Math.min($element[0].offsetWidth, max);
// Finally, restrict position to allowed min/max
position = Math.max(position, min);
position = Math.min(position, max);
}
// Getter-setter for the pixel offset of the splitter, // Getter-setter for the pixel offset of the splitter,
// relative to the current edge. // relative to the current edge.
function getSetPosition(value) { function getSetPosition(value) {
var min, max;
if (typeof value === 'number') { if (typeof value === 'number') {
position = value; position = value;
enforceExtrema();
// 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, value);