mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 13:17:53 +00:00
[Tree] Continue breaking apart tree view
This commit is contained in:
parent
ece8f7fded
commit
37e6b5a352
@ -1,32 +1,8 @@
|
|||||||
<li>
|
<span class="tree-item menus-to-left">
|
||||||
<span
|
<span class='ui-symbol view-control flex-elem'>
|
||||||
class="tree-item menus-to-left"
|
|
||||||
ng-class="{selected: treeNode.isSelected()}"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class='ui-symbol view-control flex-elem'
|
|
||||||
ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
|
|
||||||
ng-click="toggle.toggle(); treeNode.trackExpansion()"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
<mct-representation
|
|
||||||
class="rep-object-label"
|
|
||||||
key="'label'"
|
|
||||||
mct-object="domainObject"
|
|
||||||
parameters="{suppressMenuOnEdit: true}"
|
|
||||||
ng-click="treeNode.select()"
|
|
||||||
>
|
|
||||||
</mct-representation>
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span class="rep-object-label">
|
||||||
class="tree-item-subtree"
|
|
||||||
ng-show="toggle.isActive()"
|
|
||||||
ng-if="model.composition !== undefined"
|
|
||||||
>
|
|
||||||
<mct-representation key="'subtree'"
|
|
||||||
ng-model="ngModel"
|
|
||||||
parameters="parameters"
|
|
||||||
mct-object="treeNode.hasBeenExpanded() && domainObject">
|
|
||||||
</mct-representation>
|
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</span>
|
||||||
|
<span class="tree-item-subtree">
|
||||||
|
</span>
|
||||||
|
2
platform/commonUI/general/res/templates/tree/toggle.html
Normal file
2
platform/commonUI/general/res/templates/tree/toggle.html
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<span class='ui-symbol view-control flex-elem'>
|
||||||
|
</span>
|
61
platform/commonUI/general/src/ui/ToggleView.js
Normal file
61
platform/commonUI/general/src/ui/ToggleView.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
|
* Administration. All rights reserved.
|
||||||
|
*
|
||||||
|
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||||
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||||
|
* License for the specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*
|
||||||
|
* Open MCT Web includes source code licensed under additional open source
|
||||||
|
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||||
|
* this source code distribution or the Licensing information page available
|
||||||
|
* at runtime from the About dialog for additional information.
|
||||||
|
*****************************************************************************/
|
||||||
|
/*global define*/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'angular',
|
||||||
|
'text!../../res/templates/ui/toggle.html'
|
||||||
|
], function (angular, toggleTemplate) {
|
||||||
|
function ToggleView(state) {
|
||||||
|
this.expanded = !!state;
|
||||||
|
this.callbacks = [];
|
||||||
|
this.el = angular.element(toggleTemplate);
|
||||||
|
this.el.on('click', function () {
|
||||||
|
this.model(!this.expanded);
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
ToggleView.prototype.model = function (state) {
|
||||||
|
this.expanded = state;
|
||||||
|
|
||||||
|
if (state) {
|
||||||
|
this.el.addClass('expanded');
|
||||||
|
} else {
|
||||||
|
this.el.removeClass('expanded');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.callbacks.forEach(function (callback) {
|
||||||
|
callback(state);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
ToggleView.prototype.observe = function (callback) {
|
||||||
|
this.callbacks.push(callback);
|
||||||
|
return function () {
|
||||||
|
this.callbacks = this.callbacks.filter(function (c) {
|
||||||
|
return c !== callback;
|
||||||
|
});
|
||||||
|
}.bind(this);
|
||||||
|
};
|
||||||
|
|
||||||
|
return ToggleView;
|
||||||
|
});
|
@ -0,0 +1,70 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||||
|
* as represented by the Administrator of the National Aeronautics and Space
|
||||||
|
* Administration. All rights reserved.
|
||||||
|
*
|
||||||
|
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||||
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||||
|
* License for the specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*
|
||||||
|
* Open MCT Web includes source code licensed under additional open source
|
||||||
|
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||||
|
* this source code distribution or the Licensing information page available
|
||||||
|
* at runtime from the About dialog for additional information.
|
||||||
|
*****************************************************************************/
|
||||||
|
/*global define*/
|
||||||
|
|
||||||
|
define([
|
||||||
|
'angular',
|
||||||
|
'text!../../res/templates/ui/node.html'
|
||||||
|
], function (angular, nodeTemplate) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var $ = angular.element.bind(angular);
|
||||||
|
|
||||||
|
function TreeNodeView(subtreeFactory) {
|
||||||
|
this.factory = subtreeFactory;
|
||||||
|
this.li = $('<li>');
|
||||||
|
this.expanded = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
TreeNodeView.prototype.populateContents = function (domainObject) {
|
||||||
|
if (this.li.children().length === 0) {
|
||||||
|
this.li.append($(nodeTemplate));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
TreeNodeView.prototype.model = function (domainObject) {
|
||||||
|
if (this.unlisten) {
|
||||||
|
this.unlisten();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (domainObject) {
|
||||||
|
this.unlisten = domainObject.getCapability('mutation')
|
||||||
|
.listen(this.populateContents.bind(this));
|
||||||
|
this.populateContents(domainObject);
|
||||||
|
} else {
|
||||||
|
this.li.empty();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns {HTMLElement[]}
|
||||||
|
*/
|
||||||
|
TreeNodeView.prototype.elements = function () {
|
||||||
|
return this.li;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return TreeNodeView;
|
||||||
|
});
|
@ -22,7 +22,8 @@
|
|||||||
/*global define*/
|
/*global define*/
|
||||||
|
|
||||||
define([
|
define([
|
||||||
'angular'
|
'angular',
|
||||||
|
'./TreeNodeView'
|
||||||
], function (angular, TreeNodeView) {
|
], function (angular, TreeNodeView) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
@ -34,11 +35,15 @@ define([
|
|||||||
this.nodeViews = [];
|
this.nodeViews = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function newTreeView() {
|
||||||
|
return new TreeView();
|
||||||
|
}
|
||||||
|
|
||||||
TreeView.prototype.setSize = function (sz) {
|
TreeView.prototype.setSize = function (sz) {
|
||||||
var nodeView;
|
var nodeView;
|
||||||
|
|
||||||
while (this.nodeViews.length < sz) {
|
while (this.nodeViews.length < sz) {
|
||||||
nodeView = new TreeNodeView();
|
nodeView = new TreeNodeView(newTreeView);
|
||||||
this.nodeViews.push(nodeView);
|
this.nodeViews.push(nodeView);
|
||||||
this.ul.append($(nodeView.elements()));
|
this.ul.append($(nodeView.elements()));
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user