From 37e6b5a35210fa176373268f381a9326242b1b02 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 11 Mar 2016 11:39:10 -0800 Subject: [PATCH] [Tree] Continue breaking apart tree view --- .../general/res/templates/tree/node.html | 36 ++-------- .../general/res/templates/tree/toggle.html | 2 + .../commonUI/general/src/ui/ToggleView.js | 61 ++++++++++++++++ .../commonUI/general/src/ui/TreeNodeView.js | 70 +++++++++++++++++++ platform/commonUI/general/src/ui/TreeView.js | 9 ++- 5 files changed, 146 insertions(+), 32 deletions(-) create mode 100644 platform/commonUI/general/res/templates/tree/toggle.html create mode 100644 platform/commonUI/general/src/ui/ToggleView.js diff --git a/platform/commonUI/general/res/templates/tree/node.html b/platform/commonUI/general/res/templates/tree/node.html index ea5e2b3786..2041a39cca 100644 --- a/platform/commonUI/general/res/templates/tree/node.html +++ b/platform/commonUI/general/res/templates/tree/node.html @@ -1,32 +1,8 @@ -
  • - - - - - + + - - - + -
    • \ No newline at end of file + + + diff --git a/platform/commonUI/general/res/templates/tree/toggle.html b/platform/commonUI/general/res/templates/tree/toggle.html new file mode 100644 index 0000000000..289f781f95 --- /dev/null +++ b/platform/commonUI/general/res/templates/tree/toggle.html @@ -0,0 +1,2 @@ + + diff --git a/platform/commonUI/general/src/ui/ToggleView.js b/platform/commonUI/general/src/ui/ToggleView.js new file mode 100644 index 0000000000..26e0980944 --- /dev/null +++ b/platform/commonUI/general/src/ui/ToggleView.js @@ -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; +}); diff --git a/platform/commonUI/general/src/ui/TreeNodeView.js b/platform/commonUI/general/src/ui/TreeNodeView.js index e69de29bb2..5fe7eab514 100644 --- a/platform/commonUI/general/src/ui/TreeNodeView.js +++ b/platform/commonUI/general/src/ui/TreeNodeView.js @@ -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 = $('
  • '); + 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; +}); \ No newline at end of file diff --git a/platform/commonUI/general/src/ui/TreeView.js b/platform/commonUI/general/src/ui/TreeView.js index 4032711321..5e2f0b0877 100644 --- a/platform/commonUI/general/src/ui/TreeView.js +++ b/platform/commonUI/general/src/ui/TreeView.js @@ -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())); }