[Tree] Begin adding tree label

This commit is contained in:
Victor Woeltjen 2016-03-11 12:29:24 -08:00
parent 37e6b5a352
commit cebf9f73da
4 changed files with 79 additions and 6 deletions

View File

@ -0,0 +1,8 @@
<span class="rep-object-label">
<div class="t-object-label l-flex-row flex-elem grows">
<div class="t-item-icon flex-elem" ng-class="{ 'l-icon-link':location.isLink() }">
<div class="t-item-icon-glyph">{{type.getGlyph()}}</div>
</div>
<div class='t-title-label flex-elem grows'>{{model.name}}</div>
</div>
</span>

View File

@ -57,5 +57,9 @@ define([
}.bind(this);
};
ToggleView.prototype.elements = function () {
return this.el;
};
return ToggleView;
});

View File

@ -0,0 +1,45 @@
/*****************************************************************************
* 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/tree-label.html'
], function (angular, labelTemplate) {
'use strict';
var $ = angular.element.bind(angular);
function TreeLabelView() {
this.el = $(labelTemplate);
}
TreeLabelView.prototype.model = function (domainObject) {
};
TreeLabelView.prototype.elements = function () {
return this.el;
};
return TreeLabelView;
});

View File

@ -23,24 +23,34 @@
define([
'angular',
'text!../../res/templates/ui/node.html'
], function (angular, nodeTemplate) {
'text!../../res/templates/ui/node.html',
'./ToggleView'
], function (angular, nodeTemplate, ToggleView) {
'use strict';
var $ = angular.element.bind(angular);
function TreeNodeView(subtreeFactory) {
this.factory = subtreeFactory;
this.li = $('<li>');
this.expanded = false;
this.toggleView = new ToggleView(false);
this.toggleView.observe(function (state) {
if (state) {
if (!this.subtreeView) {
this.subtreeView = subtreeFactory();
this.subtreeView.model(this.activeObject);
}
$(this.subtreeView.elements()).removeClass('hidden');
} else if (this.subtreeView) {
$(this.subtreeView.elements()).addClass('hidden');
}
}.bind(this));
}
TreeNodeView.prototype.populateContents = function (domainObject) {
if (this.li.children().length === 0) {
this.li.append($(nodeTemplate));
}
};
TreeNodeView.prototype.model = function (domainObject) {
@ -48,6 +58,8 @@ define([
this.unlisten();
}
this.activeObject = domainObject;
if (domainObject) {
this.unlisten = domainObject.getCapability('mutation')
.listen(this.populateContents.bind(this));
@ -55,6 +67,10 @@ define([
} else {
this.li.empty();
}
if (this.subtreeView) {
this.subtreeView.model(domainObject);
}
};
/**