[Tree] Begin adding tree label
This commit is contained in:
		@@ -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>
 | 
			
		||||
@@ -57,5 +57,9 @@ define([
 | 
			
		||||
        }.bind(this);
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    ToggleView.prototype.elements = function () {
 | 
			
		||||
        return this.el;
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    return ToggleView;
 | 
			
		||||
});
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										45
									
								
								platform/commonUI/general/src/ui/TreeLabelView.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										45
									
								
								platform/commonUI/general/src/ui/TreeLabelView.js
									
									
									
									
									
										Normal 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;
 | 
			
		||||
});
 | 
			
		||||
@@ -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);
 | 
			
		||||
        }
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user