mirror of
https://github.com/nasa/openmct.git
synced 2025-01-02 19:36:41 +00:00
3a5a015097
Add a general-purpose controller for UI elements which have 'click-away' behavior; that is, they should be deactivated on document clicks. This generalizes existing behavior added for the Create menu, such that it may be used on other, similar menus and UI elements. Part of ongoing transition of common user interface components, WTD-574.
80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
/*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;
|
|
}
|
|
); |