[Toolbar] Implement a public API for adding toolbars (#1908)
* [API] Implement a toolbar registry and a plugin to allow providing a toolbar for a selected object. * Modify the mct-toolbar directive to get the toolbar structure from a provider based on selection. * Implements the layout toolbar in the layout bundle
This commit is contained in:
Pegah Sarram
committed by
Andrew Henry
Andrew Henry
parent
de8f8d174d
commit
73e38f1955
@@ -21,30 +21,29 @@
|
||||
-->
|
||||
<form novalidate>
|
||||
<div class="tool-bar btn-bar contents abs">
|
||||
<span ng-repeat="section in structure.sections"
|
||||
class="l-control-group"
|
||||
ng-if="!section.hidden"
|
||||
title="{{section.description}}">
|
||||
<ng-form ng-repeat="item in section.items"
|
||||
ng-class="{ 'input-labeled': item.name }"
|
||||
ng-hide="item.hidden"
|
||||
class="inline"
|
||||
title="{{item.description}}"
|
||||
name="mctFormInner">
|
||||
<span ng-repeat="item in structure">
|
||||
<span ng-if="item.control === 'divider'" class="l-control-group">
|
||||
</span>
|
||||
<ng-form ng-class="{ 'input-labeled': item.name }"
|
||||
ng-hide="item.hidden"
|
||||
ng-if="item.control !== 'divider'"
|
||||
class="inline"
|
||||
title="{{item.description}}"
|
||||
name="mctFormInner">
|
||||
|
||||
<label ng-if="item.name">
|
||||
{{item.name}}:
|
||||
</label>
|
||||
<mct-control key="item.control"
|
||||
ng-class="{ disabled: item.disabled }"
|
||||
ng-model="ngModel"
|
||||
ng-required="item.required"
|
||||
ng-pattern="getRegExp(item.pattern)"
|
||||
options="item.options"
|
||||
structure="item"
|
||||
field="item.key">
|
||||
</mct-control>
|
||||
</ng-form>
|
||||
<label ng-if="item.name">
|
||||
{{item.name}}:
|
||||
</label>
|
||||
<mct-control key="item.control"
|
||||
ng-class="{ disabled: item.disabled }"
|
||||
ng-model="ngModel"
|
||||
ng-required="item.required"
|
||||
ng-pattern="getRegExp(item.pattern)"
|
||||
options="item.options"
|
||||
structure="item"
|
||||
field="item.key">
|
||||
</mct-control>
|
||||
</ng-form>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -24,8 +24,16 @@
|
||||
* Module defining MCTForm. Created by vwoeltje on 11/10/14.
|
||||
*/
|
||||
define(
|
||||
["./MCTForm", "text!../res/templates/toolbar.html"],
|
||||
function (MCTForm, toolbarTemplate) {
|
||||
[
|
||||
"./MCTForm",
|
||||
"text!../res/templates/toolbar.html",
|
||||
"./controllers/ToolbarController"
|
||||
],
|
||||
function (
|
||||
MCTForm,
|
||||
toolbarTemplate,
|
||||
ToolbarController
|
||||
) {
|
||||
|
||||
/**
|
||||
* The mct-toolbar directive allows generation of displayable
|
||||
@@ -35,7 +43,7 @@ define(
|
||||
* This directive accepts three attributes:
|
||||
*
|
||||
* * `ng-model`: The model for the form; where user input
|
||||
* where be stored.
|
||||
* will be stored.
|
||||
* * `structure`: The declarative structure of the toolbar.
|
||||
* Describes what controls should be shown and where
|
||||
* their values should be read/written in the model.
|
||||
@@ -49,9 +57,10 @@ define(
|
||||
*/
|
||||
function MCTToolbar() {
|
||||
// Use Directive Definition Object from mct-form,
|
||||
// but use the toolbar's template instead.
|
||||
// but use the toolbar's template and controller instead.
|
||||
var ddo = new MCTForm();
|
||||
ddo.template = toolbarTemplate;
|
||||
ddo.controller = ['$scope', 'openmct', ToolbarController];
|
||||
return ddo;
|
||||
}
|
||||
|
||||
|
||||
84
platform/forms/src/controllers/ToolbarController.js
Normal file
84
platform/forms/src/controllers/ToolbarController.js
Normal file
@@ -0,0 +1,84 @@
|
||||
define(
|
||||
[
|
||||
'../../../commonUI/edit/src/representers/EditToolbar'
|
||||
],
|
||||
function (EditToolbar) {
|
||||
|
||||
// Default ng-pattern; any non whitespace
|
||||
var NON_WHITESPACE = /\S/;
|
||||
|
||||
/**
|
||||
* Controller for mct-toolbar directive.
|
||||
*
|
||||
* @memberof platform/forms
|
||||
* @constructor
|
||||
*/
|
||||
function ToolbarController($scope, openmct) {
|
||||
var regexps = [];
|
||||
|
||||
// ng-pattern seems to want a RegExp, and not a
|
||||
// string (despite what documentation says) but
|
||||
// we want toolbar structure to be JSON-expressible,
|
||||
// so we make RegExp's from strings as-needed
|
||||
function getRegExp(pattern) {
|
||||
// If undefined, don't apply a pattern
|
||||
if (!pattern) {
|
||||
return NON_WHITESPACE;
|
||||
}
|
||||
|
||||
// Just echo if it's already a regexp
|
||||
if (pattern instanceof RegExp) {
|
||||
return pattern;
|
||||
}
|
||||
|
||||
// Otherwise, assume a string
|
||||
// Cache for easy lookup later (so we don't
|
||||
// creat a new RegExp every digest cycle)
|
||||
if (!regexps[pattern]) {
|
||||
regexps[pattern] = new RegExp(pattern);
|
||||
}
|
||||
|
||||
return regexps[pattern];
|
||||
}
|
||||
|
||||
this.openmct = openmct;
|
||||
this.$scope = $scope;
|
||||
$scope.editToolbar = {};
|
||||
$scope.getRegExp = getRegExp;
|
||||
|
||||
$scope.$on("$destroy", this.destroy.bind(this));
|
||||
openmct.selection.on('change', this.handleSelection.bind(this));
|
||||
}
|
||||
|
||||
ToolbarController.prototype.handleSelection = function (selection) {
|
||||
var domainObject = selection[0].context.oldItem;
|
||||
var element = selection[0].context.elementProxy;
|
||||
|
||||
if ((domainObject && domainObject === this.selectedObject) || (element && element === this.selectedObject)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectedObject = domainObject || element;
|
||||
|
||||
if (this.editToolbar) {
|
||||
this.editToolbar.destroy();
|
||||
}
|
||||
|
||||
var structure = this.openmct.toolbars.get(selection) || [];
|
||||
this.editToolbar = new EditToolbar(this.$scope, this.openmct, structure);
|
||||
this.$scope.$parent.editToolbar = this.editToolbar;
|
||||
this.$scope.$parent.editToolbar.structure = this.editToolbar.getStructure();
|
||||
this.$scope.$parent.editToolbar.state = this.editToolbar.getState();
|
||||
|
||||
setTimeout(function () {
|
||||
this.$scope.$apply();
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
ToolbarController.prototype.destroy = function () {
|
||||
this.openmct.selection.off("change", this.handleSelection);
|
||||
};
|
||||
|
||||
return ToolbarController;
|
||||
}
|
||||
);
|
||||
@@ -26,16 +26,28 @@ define(
|
||||
|
||||
describe("The mct-toolbar directive", function () {
|
||||
var mockScope,
|
||||
mockOpenMCT,
|
||||
mockSelection,
|
||||
mctToolbar;
|
||||
|
||||
function installController() {
|
||||
var Controller = mctToolbar.controller[1];
|
||||
return new Controller(mockScope);
|
||||
var Controller = mctToolbar.controller[2];
|
||||
return new Controller(mockScope, mockOpenMCT);
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
|
||||
mockScope = jasmine.createSpyObj("$scope", [
|
||||
"$watch",
|
||||
"$on"
|
||||
]);
|
||||
mockScope.$parent = {};
|
||||
mockSelection = jasmine.createSpyObj("selection", [
|
||||
'on',
|
||||
'off'
|
||||
]);
|
||||
mockOpenMCT = {
|
||||
selection: mockSelection
|
||||
};
|
||||
mctToolbar = new MCTToolbar();
|
||||
});
|
||||
|
||||
@@ -43,29 +55,15 @@ define(
|
||||
expect(mctToolbar.restrict).toEqual("E");
|
||||
});
|
||||
|
||||
it("watches for changes in form by name", function () {
|
||||
// mct-form needs to watch for the form by name
|
||||
// in order to convey changes in $valid, $dirty, etc
|
||||
// up to the parent scope.
|
||||
it("listens for selection change event", function () {
|
||||
installController();
|
||||
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith(
|
||||
"mctForm",
|
||||
expect(mockOpenMCT.selection.on).toHaveBeenCalledWith(
|
||||
"change",
|
||||
jasmine.any(Function)
|
||||
);
|
||||
});
|
||||
|
||||
it("conveys form status to parent scope", function () {
|
||||
var someState = { someKey: "some value" };
|
||||
mockScope.name = "someName";
|
||||
|
||||
installController();
|
||||
|
||||
mockScope.$watch.mostRecentCall.args[1](someState);
|
||||
|
||||
expect(mockScope.$parent.someName).toBe(someState);
|
||||
});
|
||||
|
||||
it("allows strings to be converted to RegExps", function () {
|
||||
// This is needed to support ng-pattern in the template
|
||||
installController();
|
||||
|
||||
Reference in New Issue
Block a user