mirror of
https://github.com/nasa/openmct.git
synced 2024-12-19 05:07:52 +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"
|
||||
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 class="tree-item menus-to-left">
|
||||
<span class='ui-symbol view-control flex-elem'>
|
||||
</span>
|
||||
<span
|
||||
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 class="rep-object-label">
|
||||
</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*/
|
||||
|
||||
define([
|
||||
'angular'
|
||||
'angular',
|
||||
'./TreeNodeView'
|
||||
], function (angular, TreeNodeView) {
|
||||
'use strict';
|
||||
|
||||
@ -34,11 +35,15 @@ define([
|
||||
this.nodeViews = [];
|
||||
}
|
||||
|
||||
function newTreeView() {
|
||||
return new TreeView();
|
||||
}
|
||||
|
||||
TreeView.prototype.setSize = function (sz) {
|
||||
var nodeView;
|
||||
|
||||
while (this.nodeViews.length < sz) {
|
||||
nodeView = new TreeNodeView();
|
||||
nodeView = new TreeNodeView(newTreeView);
|
||||
this.nodeViews.push(nodeView);
|
||||
this.ul.append($(nodeView.elements()));
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user