[Tree] Continue breaking apart tree view

This commit is contained in:
Victor Woeltjen 2016-03-11 11:39:10 -08:00
parent ece8f7fded
commit 37e6b5a352
5 changed files with 146 additions and 32 deletions

View File

@ -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> </span>
<mct-representation <span class="rep-object-label">
class="rep-object-label"
key="'label'"
mct-object="domainObject"
parameters="{suppressMenuOnEdit: true}"
ng-click="treeNode.select()"
>
</mct-representation>
</span> </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> </span>
</li> <span class="tree-item-subtree">
</span>

View File

@ -0,0 +1,2 @@
<span class='ui-symbol view-control flex-elem'>
</span>

View 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;
});

View File

@ -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;
});

View File

@ -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()));
} }