mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
Merge pull request #1029 from nasa/api-toolbar-add-only
[API Prototype] Add toolbar
This commit is contained in:
Victor Woeltjen
GitHub
commit
06f87c1472
73
src/MCT.js
73
src/MCT.js
@ -3,12 +3,16 @@ define([
|
||||
'legacyRegistry',
|
||||
'uuid',
|
||||
'./api/api',
|
||||
'text!./adapter/templates/edit-object-replacement.html',
|
||||
'./ui/Dialog',
|
||||
'./api/objects/bundle'
|
||||
], function (
|
||||
EventEmitter,
|
||||
legacyRegistry,
|
||||
uuid,
|
||||
api
|
||||
api,
|
||||
editObjectTemplate,
|
||||
Dialog
|
||||
) {
|
||||
function MCT() {
|
||||
EventEmitter.call(this);
|
||||
@ -22,25 +26,34 @@ define([
|
||||
});
|
||||
MCT.prototype.MCT = MCT;
|
||||
|
||||
MCT.prototype.legacyExtension = function (category, extension) {
|
||||
this.legacyBundle.extensions[category] =
|
||||
this.legacyBundle.extensions[category] || [];
|
||||
this.legacyBundle.extensions[category].push(extension);
|
||||
};
|
||||
|
||||
MCT.prototype.view = function (region, factory) {
|
||||
var viewKey = region + uuid();
|
||||
var adaptedViewKey = "adapted-view-" + viewKey;
|
||||
var adaptedViewKey = "adapted-view-" + region;
|
||||
|
||||
this.legacyBundle.extensions.views =
|
||||
this.legacyBundle.extensions.views || [];
|
||||
this.legacyBundle.extensions.views.push({
|
||||
name: "A view",
|
||||
key: adaptedViewKey,
|
||||
template: '<mct-view key="\'' +
|
||||
viewKey +
|
||||
'\'" ' +
|
||||
'mct-object="domainObject">' +
|
||||
'</mct-view>'
|
||||
});
|
||||
this.legacyExtension(
|
||||
region === this.regions.main ? 'views' : 'representations',
|
||||
{
|
||||
name: "A view",
|
||||
key: adaptedViewKey,
|
||||
editable: true,
|
||||
template: '<mct-view region="\'' +
|
||||
region +
|
||||
'\'" ' +
|
||||
'key="\'' +
|
||||
viewKey +
|
||||
'\'" ' +
|
||||
'mct-object="domainObject">' +
|
||||
'</mct-view>'
|
||||
}
|
||||
);
|
||||
|
||||
this.legacyBundle.extensions.policies =
|
||||
this.legacyBundle.extensions.policies || [];
|
||||
this.legacyBundle.extensions.policies.push({
|
||||
this.legacyExtension('policies', {
|
||||
category: "view",
|
||||
implementation: function Policy() {
|
||||
this.allow = function (view, domainObject) {
|
||||
@ -52,10 +65,9 @@ define([
|
||||
}
|
||||
});
|
||||
|
||||
this.legacyBundle.extensions.newViews =
|
||||
this.legacyBundle.extensions.newViews || [];
|
||||
this.legacyBundle.extensions.newViews.push({
|
||||
this.legacyExtension('newViews', {
|
||||
factory: factory,
|
||||
region: region,
|
||||
key: viewKey
|
||||
});
|
||||
};
|
||||
@ -63,11 +75,19 @@ define([
|
||||
MCT.prototype.type = function (key, type) {
|
||||
var legacyDef = type.toLegacyDefinition();
|
||||
legacyDef.key = key;
|
||||
this.legacyBundle.extensions.types =
|
||||
this.legacyBundle.extensions.types || [];
|
||||
this.legacyBundle.extensions.types.push(legacyDef);
|
||||
|
||||
type.key = key;
|
||||
|
||||
this.legacyExtension('types', legacyDef);
|
||||
this.legacyExtension('representations', {
|
||||
key: "edit-object",
|
||||
priority: "preferred",
|
||||
template: editObjectTemplate,
|
||||
type: key
|
||||
});
|
||||
};
|
||||
|
||||
MCT.prototype.dialog = function (view, title) {
|
||||
return new Dialog(view, title).show();
|
||||
};
|
||||
|
||||
MCT.prototype.start = function () {
|
||||
@ -76,7 +96,8 @@ define([
|
||||
};
|
||||
|
||||
MCT.prototype.regions = {
|
||||
main: "MAIN"
|
||||
main: "MAIN",
|
||||
toolbar: "TOOLBAR"
|
||||
};
|
||||
|
||||
MCT.prototype.verbs = {
|
||||
@ -86,6 +107,10 @@ define([
|
||||
var persistence = domainObject.getCapability('persistence');
|
||||
return persistence.persist();
|
||||
});
|
||||
},
|
||||
observe: function (domainObject, callback) {
|
||||
var mutation = domainObject.getCapability('mutation');
|
||||
return mutation.listen(callback);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -3,24 +3,21 @@ define(['angular'], function (angular) {
|
||||
var factories = {};
|
||||
|
||||
newViews.forEach(function (newView) {
|
||||
factories[newView.key] = newView.factory;
|
||||
factories[newView.region] = factories[newView.region] || {};
|
||||
factories[newView.region][newView.key] = newView.factory;
|
||||
});
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
link: function (scope, element, attrs) {
|
||||
var key = undefined;
|
||||
var mctObject = undefined;
|
||||
var key, mctObject, region;
|
||||
|
||||
function maybeShow() {
|
||||
if (!factories[key]) {
|
||||
return;
|
||||
}
|
||||
if (!mctObject) {
|
||||
if (!factories[region] || !factories[region][key] || !mctObject) {
|
||||
return;
|
||||
}
|
||||
|
||||
var view = factories[key](mctObject);
|
||||
var view = factories[region][key](mctObject);
|
||||
view.show(element[0]);
|
||||
}
|
||||
|
||||
@ -34,12 +31,19 @@ define(['angular'], function (angular) {
|
||||
maybeShow();
|
||||
}
|
||||
|
||||
function setRegion(r) {
|
||||
region = r;
|
||||
maybeShow();
|
||||
}
|
||||
|
||||
scope.$watch('key', setKey);
|
||||
scope.$watch('region', setRegion);
|
||||
scope.$watch('mctObject', setObject);
|
||||
|
||||
},
|
||||
scope: {
|
||||
key: "=",
|
||||
region: "=",
|
||||
mctObject: "="
|
||||
}
|
||||
};
|
||||
|
||||
46
src/adapter/templates/edit-object-replacement.html
Normal file
46
src/adapter/templates/edit-object-replacement.html
Normal file
@ -0,0 +1,46 @@
|
||||
<div class="abs l-flex-col" ng-controller="EditObjectController as EditObjectController">
|
||||
<div mct-before-unload="EditObjectController.getUnloadWarning()"
|
||||
class="holder flex-elem l-flex-row object-browse-bar ">
|
||||
<div class="items-select left flex-elem l-flex-row grows">
|
||||
<mct-representation key="'back-arrow'"
|
||||
mct-object="domainObject"
|
||||
class="flex-elem l-back"></mct-representation>
|
||||
<mct-representation key="'object-header'"
|
||||
mct-object="domainObject"
|
||||
class="l-flex-row flex-elem grows object-header">
|
||||
</mct-representation>
|
||||
</div>
|
||||
<div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
|
||||
<mct-representation key="'switcher'"
|
||||
mct-object="domainObject"
|
||||
ng-model="representation">
|
||||
</mct-representation>
|
||||
<!-- Temporarily, on mobile, the action buttons are hidden-->
|
||||
<mct-representation key="'action-group'"
|
||||
mct-object="domainObject"
|
||||
parameters="{ category: 'view-control' }"
|
||||
class="mobile-hide">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
<div class="holder l-flex-col flex-elem grows l-object-wrapper">
|
||||
<div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
|
||||
<!-- Toolbar and Save/Cancel buttons -->
|
||||
<div class="l-edit-controls flex-elem l-flex-row flex-align-end">
|
||||
<mct-representation key="'adapted-view-TOOLBAR'"
|
||||
mct-object="domainObject"
|
||||
class="flex-elem grows">
|
||||
</mct-representation>
|
||||
<mct-representation key="'edit-action-buttons'"
|
||||
mct-object="domainObject"
|
||||
class='flex-elem conclude-editing'>
|
||||
</mct-representation>
|
||||
</div>
|
||||
<mct-representation key="representation.selected.key"
|
||||
mct-object="representation.selected.key && domainObject"
|
||||
class="abs flex-elem grows object-holder-main scroll"
|
||||
toolbar="toolbar">
|
||||
</mct-representation>
|
||||
</div><!--/ l-object-wrapper-inner -->
|
||||
</div>
|
||||
</div>
|
||||
43
src/ui/Dialog.js
Normal file
43
src/ui/Dialog.js
Normal file
@ -0,0 +1,43 @@
|
||||
define(['text!./dialog.html', 'zepto'], function (dialogTemplate, $) {
|
||||
function Dialog(view, title) {
|
||||
this.view = view;
|
||||
this.title = title;
|
||||
}
|
||||
|
||||
Dialog.prototype.show = function () {
|
||||
var $body = $('body');
|
||||
var $dialog = $(dialogTemplate);
|
||||
var $contents = $dialog.find('.contents .editor');
|
||||
var $close = $dialog.find('.close');
|
||||
|
||||
var $ok = $dialog.find('.ok');
|
||||
var $cancel = $dialog.find('.cancel');
|
||||
|
||||
var view = this.view;
|
||||
|
||||
function dismiss() {
|
||||
$dialog.remove();
|
||||
view.destroy();
|
||||
}
|
||||
|
||||
if (this.title) {
|
||||
$dialog.find('.title').text(this.title);
|
||||
}
|
||||
|
||||
$body.append($dialog);
|
||||
this.view.show($contents[0]);
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
$ok.on('click', resolve);
|
||||
$ok.on('click', dismiss);
|
||||
|
||||
$cancel.on('click', reject);
|
||||
$cancel.on('click', dismiss);
|
||||
|
||||
$close.on('click', reject);
|
||||
$close.on('click', dismiss);
|
||||
});
|
||||
};
|
||||
|
||||
return Dialog;
|
||||
});
|
||||
21
src/ui/dialog.html
Normal file
21
src/ui/dialog.html
Normal file
@ -0,0 +1,21 @@
|
||||
<div class="abs overlay">
|
||||
<div class="abs blocker"></div>
|
||||
<div class="abs holder">
|
||||
<a class="clk-icon icon ui-symbol close">x</a>
|
||||
<div class="abs contents">
|
||||
<div class="abs top-bar">
|
||||
<div class="title"></div>
|
||||
<div class="hint"></div>
|
||||
</div>
|
||||
<div class='abs editor'>
|
||||
</div>
|
||||
<div class="abs bottom-bar">
|
||||
<a class='s-btn major ok'>OK</a>
|
||||
<a class='s-btn cancel'>Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
3
tutorials/todo/todo-dialog.html
Normal file
3
tutorials/todo/todo-dialog.html
Normal file
@ -0,0 +1,3 @@
|
||||
<label>Description:
|
||||
<input type="text" class="description">
|
||||
</label>
|
||||
9
tutorials/todo/todo-toolbar.html
Normal file
9
tutorials/todo/todo-toolbar.html
Normal file
@ -0,0 +1,9 @@
|
||||
<div class="tool-bar btn-bar contents abs">
|
||||
<a class="s-btn labeled example-add">
|
||||
<span class="ui-symbol icon">+</span>
|
||||
<span class="title-label">Add Task</span>
|
||||
</a>
|
||||
<a class="s-btn example-remove">
|
||||
<span class="ui-symbol icon">Z</span>
|
||||
</a>
|
||||
</div>
|
||||
@ -1,8 +1,10 @@
|
||||
define([
|
||||
"text!./todo.html",
|
||||
"text!./todo-task.html",
|
||||
"text!./todo-toolbar.html",
|
||||
"text!./todo-dialog.html",
|
||||
"zepto"
|
||||
], function (todoTemplate, taskTemplate, $) {
|
||||
], function (todoTemplate, taskTemplate, toolbarTemplate, dialogTemplate, $) {
|
||||
/**
|
||||
* @param {mct.MCT} mct
|
||||
*/
|
||||
@ -27,6 +29,8 @@ define([
|
||||
}
|
||||
|
||||
TodoView.prototype.show = function (container) {
|
||||
this.destroy();
|
||||
|
||||
this.$els = $(todoTemplate);
|
||||
this.$buttons = {
|
||||
all: this.$els.find('.example-todo-button-all'),
|
||||
@ -38,9 +42,15 @@ define([
|
||||
|
||||
this.initialize();
|
||||
this.render();
|
||||
|
||||
mct.verbs.observe(this.domainObject, this.render.bind(this));
|
||||
};
|
||||
|
||||
TodoView.prototype.destroy = function () {
|
||||
if (this.unlisten) {
|
||||
this.unlisten();
|
||||
this.unlisten = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
TodoView.prototype.setFilter = function (value) {
|
||||
@ -100,10 +110,51 @@ define([
|
||||
$message.toggle(tasks.length < 1);
|
||||
};
|
||||
|
||||
|
||||
|
||||
function TodoToolbarView(domainObject) {
|
||||
this.domainObject = domainObject;
|
||||
}
|
||||
|
||||
TodoToolbarView.prototype.show = function (container) {
|
||||
var $els = $(toolbarTemplate);
|
||||
var $add = $els.find('a.example-add');
|
||||
var $remove = $els.find('a.example-remove');
|
||||
var domainObject = this.domainObject;
|
||||
|
||||
$(container).append($els);
|
||||
|
||||
$add.on('click', function () {
|
||||
var $dialog = $(dialogTemplate),
|
||||
view = {
|
||||
show: function (container) {
|
||||
$(container).append($dialog);
|
||||
},
|
||||
destroy: function () {}
|
||||
};
|
||||
|
||||
mct.dialog(view, "Add a Task").then(function () {
|
||||
var description = $dialog.find('input').val();
|
||||
mct.verbs.mutate(domainObject, function (model) {
|
||||
model.tasks.push({ description: description });
|
||||
console.log(model);
|
||||
});
|
||||
});
|
||||
});
|
||||
$remove.on('click', window.alert.bind(window, "Remove!"));
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.destroy = function () {
|
||||
|
||||
};
|
||||
|
||||
mct.type('example.todo', todoType);
|
||||
mct.view(mct.regions.main, function (domainObject) {
|
||||
return todoType.check(domainObject) && new TodoView(domainObject);
|
||||
});
|
||||
mct.view(mct.regions.toolbar, function (domainObject) {
|
||||
return todoType.check(domainObject) && new TodoToolbarView(domainObject);
|
||||
});
|
||||
|
||||
return mct;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user