mirror of
https://github.com/nasa/openmct.git
synced 2025-06-19 15:43:48 +00:00
[Common UI] Reorganize general UI bundle
Reorganize sources for bundle platform/commonUI/general; number of classes here has grown as a consequence of additions for WTD-614 and so an additional layer of organization is helpful. Conflicts: platform/commonUI/general/bundle.json platform/commonUI/general/src/directives/MCTResize.js
This commit is contained in:
Victor Woeltjen
@ -0,0 +1,84 @@
|
||||
/*global define,Promise*/
|
||||
|
||||
/**
|
||||
* Module defining ActionGroupController. Created by vwoeltje on 11/14/14.
|
||||
*/
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Controller which keeps an up-to-date list of actions of
|
||||
* a certain category, and additionally bins them into
|
||||
* groups as described by their metadata. Used specifically
|
||||
* to support button groups.
|
||||
*
|
||||
* This will maintain two fields in the scope:
|
||||
* * `groups`: An array of arrays. Each element in the outer
|
||||
* array corresponds to a group; the inner array contains
|
||||
* the actions which are in that group.
|
||||
* * `ungrouped`: All actions which did not have a defined
|
||||
* group.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
function ActionGroupController($scope) {
|
||||
|
||||
// Separate out the actions that have been retrieved
|
||||
// into groups, and populate scope with this.
|
||||
function groupActions(actions) {
|
||||
var groups = {},
|
||||
ungrouped = [];
|
||||
|
||||
function assignToGroup(action) {
|
||||
var metadata = action.getMetadata(),
|
||||
group = metadata.group;
|
||||
if (group) {
|
||||
groups[group] = groups[group] || [];
|
||||
groups[group].push(action);
|
||||
} else {
|
||||
ungrouped.push(action);
|
||||
}
|
||||
}
|
||||
|
||||
(actions || []).forEach(assignToGroup);
|
||||
|
||||
$scope.ungrouped = ungrouped;
|
||||
$scope.groups = Object.keys(groups).sort().map(function (k) {
|
||||
return groups[k];
|
||||
});
|
||||
}
|
||||
|
||||
// Callback for when state which might influence action groupings
|
||||
// changes.
|
||||
function updateGroups() {
|
||||
var actionCapability = $scope.action,
|
||||
params = $scope.parameters || {},
|
||||
category = params.category;
|
||||
|
||||
if (actionCapability && category) {
|
||||
// Get actions by capability, and group them
|
||||
groupActions(actionCapability.getActions({
|
||||
category: category
|
||||
}));
|
||||
} else {
|
||||
// We don't have enough information to get any actions.
|
||||
groupActions([]);
|
||||
}
|
||||
}
|
||||
|
||||
// Changes to the represented object, to its action capability, or
|
||||
// to the chosen action category may all require an update.
|
||||
$scope.$watch("domainObject", updateGroups);
|
||||
$scope.$watch("action", updateGroups);
|
||||
$scope.$watch("parameters.category", updateGroups);
|
||||
|
||||
// Start with empty arrays.
|
||||
$scope.ungrouped = [];
|
||||
$scope.groups = [];
|
||||
}
|
||||
|
||||
return ActionGroupController;
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,40 @@
|
||||
/*global define*/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Controller for the bottombar template. Exposes
|
||||
* available indicators (of extension category "indicators")
|
||||
* @constructor
|
||||
*/
|
||||
function BottomBarController(indicators) {
|
||||
// Utility function used to make indicators presentable
|
||||
// for display.
|
||||
function present(Indicator) {
|
||||
return {
|
||||
template: Indicator.template || "indicator",
|
||||
ngModel: typeof Indicator === 'function' ?
|
||||
new Indicator() : Indicator
|
||||
};
|
||||
}
|
||||
|
||||
indicators = indicators.map(present);
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get all indicators to display.
|
||||
* @returns {Indicator[]} all indicators
|
||||
* to display in the bottom bar.
|
||||
*/
|
||||
getIndicators: function () {
|
||||
return indicators;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return BottomBarController;
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,80 @@
|
||||
/*global define,Promise*/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* A ClickAwayController is used to toggle things (such as context
|
||||
* menus) where clicking elsewhere in the document while the toggle
|
||||
* is in an active state is intended to dismiss the toggle.
|
||||
*
|
||||
* @constructor
|
||||
* @param $scope the scope in which this controller is active
|
||||
* @param $document the document element, injected by Angular
|
||||
*/
|
||||
function ClickAwayController($scope, $document) {
|
||||
var state = false,
|
||||
clickaway;
|
||||
|
||||
// Track state, but also attach and detach a listener for
|
||||
// mouseup events on the document.
|
||||
function deactivate() {
|
||||
state = false;
|
||||
$document.off("mouseup", clickaway);
|
||||
}
|
||||
|
||||
function activate() {
|
||||
state = true;
|
||||
$document.on("mouseup", clickaway);
|
||||
}
|
||||
|
||||
function changeState() {
|
||||
if (state) {
|
||||
deactivate();
|
||||
} else {
|
||||
activate();
|
||||
}
|
||||
}
|
||||
|
||||
// Callback used by the document listener. Deactivates;
|
||||
// note also $scope.$apply is invoked to indicate that
|
||||
// the state of this controller has changed.
|
||||
clickaway = function () {
|
||||
deactivate();
|
||||
$scope.$apply();
|
||||
return false;
|
||||
};
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get the current state of the toggle.
|
||||
* @return {boolean} true if active
|
||||
*/
|
||||
isActive: function () {
|
||||
return state;
|
||||
},
|
||||
/**
|
||||
* Set a new state for the toggle.
|
||||
* @return {boolean} true to activate
|
||||
*/
|
||||
setState: function (newState) {
|
||||
if (state !== newState) {
|
||||
changeState();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Toggle the current state; activate if it is inactive,
|
||||
* deactivate if it is active.
|
||||
*/
|
||||
toggle: function () {
|
||||
changeState();
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
return ClickAwayController;
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,31 @@
|
||||
/*global define,Promise*/
|
||||
|
||||
/**
|
||||
* Module defining ContextMenuController. Created by vwoeltje on 11/17/14.
|
||||
*/
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Controller for the context menu. Maintains an up-to-date
|
||||
* list of applicable actions (those from category "contextual")
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
function ContextMenuController($scope) {
|
||||
// Refresh variable "menuActions" in the scope
|
||||
function updateActions() {
|
||||
$scope.menuActions = $scope.action ?
|
||||
$scope.action.getActions({ category: 'contextual' }) :
|
||||
[];
|
||||
}
|
||||
|
||||
// Update using the action capability
|
||||
$scope.$watch("action", updateActions);
|
||||
}
|
||||
|
||||
return ContextMenuController;
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,30 @@
|
||||
/*global define*/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
function GetterSetterController($scope) {
|
||||
|
||||
function updateGetterSetter() {
|
||||
if (typeof $scope.ngModel === 'function') {
|
||||
$scope.getterSetter.value = $scope.ngModel();
|
||||
}
|
||||
}
|
||||
|
||||
function updateNgModel() {
|
||||
if (typeof $scope.ngModel === 'function') {
|
||||
$scope.ngModel($scope.getterSetter.value);
|
||||
}
|
||||
}
|
||||
|
||||
$scope.$watch("ngModel()", updateGetterSetter);
|
||||
$scope.$watch("getterSetter.value", updateNgModel);
|
||||
$scope.getterSetter = {};
|
||||
}
|
||||
|
||||
return GetterSetterController;
|
||||
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,45 @@
|
||||
/*global define,Promise*/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* A ToggleController is used to activate/deactivate things.
|
||||
* A common usage is for "twistie"
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
function ToggleController() {
|
||||
var state = false;
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get the current state of the toggle.
|
||||
* @return {boolean} true if active
|
||||
*/
|
||||
isActive: function () {
|
||||
return state;
|
||||
},
|
||||
/**
|
||||
* Set a new state for the toggle.
|
||||
* @return {boolean} true to activate
|
||||
*/
|
||||
setState: function (newState) {
|
||||
state = newState;
|
||||
},
|
||||
/**
|
||||
* Toggle the current state; activate if it is inactive,
|
||||
* deactivate if it is active.
|
||||
*/
|
||||
toggle: function () {
|
||||
state = !state;
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
return ToggleController;
|
||||
}
|
||||
);
|
||||
154
platform/commonUI/general/src/controllers/TreeNodeController.js
Normal file
154
platform/commonUI/general/src/controllers/TreeNodeController.js
Normal file
@ -0,0 +1,154 @@
|
||||
/*global define,Promise*/
|
||||
|
||||
/**
|
||||
* Module defining TreeNodeController. Created by vwoeltje on 11/10/14.
|
||||
*/
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* The TreeNodeController supports the tree node representation;
|
||||
* a tree node has a label for the current object as well as a
|
||||
* subtree which shows (and is not loaded until) the node is
|
||||
* expanded.
|
||||
*
|
||||
* This controller tracks the following, so that the tree node
|
||||
* template may update its state accordingly:
|
||||
*
|
||||
* * Whether or not the tree node has ever been expanded (this
|
||||
* is used to lazily load, exactly once, the subtree)
|
||||
* * Whether or not the node is currently the domain object
|
||||
* of navigation (this gets highlighted differently to
|
||||
* provide the user with visual feedback.)
|
||||
*
|
||||
* Additionally, this controller will automatically trigger
|
||||
* node expansion when this tree node's _subtree_ will contain
|
||||
* the navigated object (recursively, this becomes an
|
||||
* expand-to-show-navigated-object behavior.)
|
||||
* @constructor
|
||||
*/
|
||||
function TreeNodeController($scope, $timeout) {
|
||||
var selectedObject = ($scope.ngModel || {}).selectedObject,
|
||||
isSelected = false,
|
||||
hasBeenExpanded = false;
|
||||
|
||||
// Look up the id for a domain object. A convenience
|
||||
// for mapping; additionally does some undefined-checking.
|
||||
function getId(obj) {
|
||||
return obj && obj.getId && obj.getId();
|
||||
}
|
||||
|
||||
// Verify that id paths are equivalent, staring at
|
||||
// index, ending at the end of the node path.
|
||||
function checkPath(nodePath, navPath, index) {
|
||||
index = index || 0;
|
||||
|
||||
// The paths overlap if we have made it past the
|
||||
// end of the node's path; otherwise, check the
|
||||
// id at the current index for equality and perform
|
||||
// a recursive step for subsequent ids in the paths,
|
||||
// until we exceed path length or hit a mismatch.
|
||||
return (index >= nodePath.length) ||
|
||||
((navPath[index] === nodePath[index]) &&
|
||||
checkPath(nodePath, navPath, index + 1));
|
||||
}
|
||||
|
||||
// Track that a node has been expanded, either by the
|
||||
// user or automatically to show a selection.
|
||||
function trackExpansion() {
|
||||
if (!hasBeenExpanded) {
|
||||
// Run on a timeout; if a lot of expansion needs to
|
||||
// occur (e.g. if the selection is several nodes deep) we
|
||||
// want this to be spread across multiple digest cycles.
|
||||
$timeout(function () { hasBeenExpanded = true; }, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Consider the currently-navigated object and update
|
||||
// parameters which support display.
|
||||
function checkSelection() {
|
||||
var nodeObject = $scope.domainObject,
|
||||
navObject = selectedObject,
|
||||
nodeContext = nodeObject &&
|
||||
nodeObject.getCapability('context'),
|
||||
navContext = navObject &&
|
||||
navObject.getCapability('context'),
|
||||
nodePath,
|
||||
navPath;
|
||||
|
||||
// Deselect; we will reselect below, iff we are
|
||||
// exactly at the end of the path.
|
||||
isSelected = false;
|
||||
|
||||
// Expand if necessary (if the navigated object will
|
||||
// be in this node's subtree)
|
||||
if (nodeContext && navContext) {
|
||||
// Get the paths as arrays of identifiers
|
||||
nodePath = nodeContext.getPath().map(getId);
|
||||
navPath = navContext.getPath().map(getId);
|
||||
|
||||
// Check to see if the node's path lies entirely
|
||||
// within the navigation path; otherwise, navigation
|
||||
// has happened in some other subtree.
|
||||
if (navPath.length >= nodePath.length &&
|
||||
checkPath(nodePath, navPath)) {
|
||||
|
||||
// nodePath is along the navPath; if it's
|
||||
// at the end of the path, highlight;
|
||||
// otherwise, expand.
|
||||
if (nodePath.length === navPath.length) {
|
||||
isSelected = true;
|
||||
} else { // node path is shorter: Expand!
|
||||
if ($scope.toggle) {
|
||||
$scope.toggle.setState(true);
|
||||
}
|
||||
trackExpansion();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Callback for the selection updates; track the currently
|
||||
// navigated object and update display parameters as needed.
|
||||
function setSelection(object) {
|
||||
selectedObject = object;
|
||||
checkSelection();
|
||||
}
|
||||
|
||||
// Listen for changes which will effect display parameters
|
||||
$scope.$watch("ngModel.selectedObject", setSelection);
|
||||
$scope.$watch("domainObject", checkSelection);
|
||||
|
||||
return {
|
||||
/**
|
||||
* This method should be called when a node is expanded
|
||||
* to record that this has occurred, to support one-time
|
||||
* lazy loading of the node's subtree.
|
||||
*/
|
||||
trackExpansion: trackExpansion,
|
||||
/**
|
||||
* Check if this not has ever been expanded.
|
||||
* @returns true if it has been expanded
|
||||
*/
|
||||
hasBeenExpanded: function () {
|
||||
return hasBeenExpanded;
|
||||
},
|
||||
/**
|
||||
* Check whether or not the domain object represented by
|
||||
* this tree node should be highlighted.
|
||||
* An object will be highlighted if it matches
|
||||
* ngModel.selectedObject
|
||||
* @returns true if this should be highlighted
|
||||
*/
|
||||
isSelected: function () {
|
||||
return isSelected;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return TreeNodeController;
|
||||
}
|
||||
);
|
||||
@ -0,0 +1,48 @@
|
||||
/*global define,Promise*/
|
||||
|
||||
/**
|
||||
* Module defining ViewSwitcherController. Created by vwoeltje on 11/7/14.
|
||||
*/
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Controller for the view switcher; populates and maintains a list
|
||||
* of applicable views for a represented domain object.
|
||||
* @constructor
|
||||
*/
|
||||
function ViewSwitcherController($scope) {
|
||||
// If the view capability gets refreshed, try to
|
||||
// keep the same option chosen.
|
||||
function findMatchingOption(options, selected) {
|
||||
var i;
|
||||
|
||||
if (selected) {
|
||||
for (i = 0; i < options.length; i += 1) {
|
||||
if (options[i].key === selected.key) {
|
||||
return options[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return options[0];
|
||||
}
|
||||
|
||||
// Get list of views, read from capability
|
||||
function updateOptions(views) {
|
||||
$scope.ngModel.selected = findMatchingOption(
|
||||
views || [],
|
||||
($scope.ngModel || {}).selected
|
||||
);
|
||||
}
|
||||
|
||||
// Update view options when the in-scope results of using the
|
||||
// view capability change.
|
||||
$scope.$watch("view", updateOptions);
|
||||
}
|
||||
|
||||
return ViewSwitcherController;
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user