From 984d65c818969ea3bef57ade9cbf5fc50d9a2316 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 11:43:01 -0800
Subject: Tree Components - Adding the tree components
---
js/components/treeview/branch.reel/branch.css | 16 +++
js/components/treeview/branch.reel/branch.html | 142 ++++++++++++++++++++
js/components/treeview/branch.reel/branch.js | 48 +++++++
js/components/treeview/leaf.reel/leaf.css | 4 +
js/components/treeview/leaf.reel/leaf.html | 38 ++++++
js/components/treeview/leaf.reel/leaf.js | 44 +++++++
.../treeview/ninja-branch.reel/ninja-branch.css | 34 +++++
.../treeview/ninja-branch.reel/ninja-branch.html | 145 +++++++++++++++++++++
.../treeview/ninja-branch.reel/ninja-branch.js | 131 +++++++++++++++++++
.../treeview/ninja-leaf.reel/ninja-leaf.css | 22 ++++
.../treeview/ninja-leaf.reel/ninja-leaf.html | 38 ++++++
.../treeview/ninja-leaf.reel/ninja-leaf.js | 41 ++++++
js/components/treeview/tree-node.js | 103 +++++++++++++++
js/components/treeview/treeview.reel/treeview.css | 3 +
js/components/treeview/treeview.reel/treeview.html | 50 +++++++
js/components/treeview/treeview.reel/treeview.js | 129 ++++++++++++++++++
16 files changed, 988 insertions(+)
create mode 100644 js/components/treeview/branch.reel/branch.css
create mode 100644 js/components/treeview/branch.reel/branch.html
create mode 100644 js/components/treeview/branch.reel/branch.js
create mode 100644 js/components/treeview/leaf.reel/leaf.css
create mode 100644 js/components/treeview/leaf.reel/leaf.html
create mode 100644 js/components/treeview/leaf.reel/leaf.js
create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.css
create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.html
create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.js
create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.css
create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.html
create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.js
create mode 100644 js/components/treeview/tree-node.js
create mode 100644 js/components/treeview/treeview.reel/treeview.css
create mode 100644 js/components/treeview/treeview.reel/treeview.html
create mode 100644 js/components/treeview/treeview.reel/treeview.js
(limited to 'js/components')
diff --git a/js/components/treeview/branch.reel/branch.css b/js/components/treeview/branch.reel/branch.css
new file mode 100644
index 00000000..5998e0f0
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.css
@@ -0,0 +1,16 @@
+.treeRoot > .branch > ul {
+ margin-top: 0;
+}
+.branch > .branch-label {
+ font-weight: bold;
+ cursor: pointer;
+}
+.branch ul {
+ list-style: none;
+}
+.branch ul {
+ padding-left: 30px;
+}
+.branch .collapse {
+ display: none;
+}
\ No newline at end of file
diff --git a/js/components/treeview/branch.reel/branch.html b/js/components/treeview/branch.reel/branch.html
new file mode 100644
index 00000000..31a4cf18
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.html
@@ -0,0 +1,142 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/components/treeview/branch.reel/branch.js b/js/components/treeview/branch.reel/branch.js
new file mode 100644
index 00000000..892da71a
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.js
@@ -0,0 +1,48 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage").Montage,
+ Component = require("montage/ui/component").Component,
+ TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+var Branch = exports.Branch = Montage.create(TreeNode, {
+ hasTemplate:{
+ value:true
+ },
+ repetition:{
+ value: null
+ },
+ prepareForDraw : {
+ value: function() {
+ this.label._element.addEventListener('click', this, false);
+
+ this.treeView.contentController.addBranchController(this.arrayController);
+ }
+ },
+ draw:{
+ value: function () {
+
+ if (this.sourceObject[this.labelKey]) {
+ this._labelText = this.sourceObject[this.labelKey];
+ } else {
+ console.log("Label key unknown");
+ }
+
+ }
+ },
+ handleClick : {
+ value: function(e) {
+ e.preventDefault();
+ this.toggleExpand();
+
+ }
+ },
+ collapseClass : {
+ value: 'collapse'
+ }
+
+
+});
diff --git a/js/components/treeview/leaf.reel/leaf.css b/js/components/treeview/leaf.reel/leaf.css
new file mode 100644
index 00000000..fea5a2c4
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.css
@@ -0,0 +1,4 @@
+.leaf > .leaf-label {
+ opacity: 0.8;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/js/components/treeview/leaf.reel/leaf.html b/js/components/treeview/leaf.reel/leaf.html
new file mode 100644
index 00000000..991a4323
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/components/treeview/leaf.reel/leaf.js b/js/components/treeview/leaf.reel/leaf.js
new file mode 100644
index 00000000..3a63f5ed
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.js
@@ -0,0 +1,44 @@
+/*
+This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+ TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+exports.Leaf = Montage.create(TreeNode, {
+ hasTemplate: {
+ value: true
+ },
+ deserializedFromTemplate : {
+ value: function() {
+ //console.log('Leaf deserialized.');
+ }
+ },
+ templateDidLoad : {
+ value: function() {
+ //debugger;
+ console.log('Leaf\'s template did load.');
+ this.needsDraw = true;
+ }
+ },
+ prepareForDraw: {
+ value : function() {
+ console.log('Leafs prepare for draw.', this.labelKey);
+ }
+ },
+ draw : {
+ value : function() {
+ if(this.sourceObject[this.labelKey]) {
+ this._labelText = this.sourceObject[this.labelKey];
+ } else {
+ console.log("Label key unknown");
+ }
+
+ }
+ }
+
+
+});
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
new file mode 100644
index 00000000..698fcd21
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -0,0 +1,34 @@
+.treeRoot > .branch > ul {
+ margin-top: 0;
+}
+.branch ul {
+ list-style: none;
+ padding-left: 0;
+}
+.branch .nj-collapser {
+ -webkit-transition: height 0.14s cubic-bezier(.44,.19,0,.99);
+}
+.branch .branchCollapser ul {
+ width: 100%;
+}
+.treeRoot .branch .branch-label {
+ border-bottom: 1px solid #505050;
+ cursor: pointer;
+ padding: 3px 0 4px;
+ background-repeat: no-repeat;
+ background-position: 3px 2px;
+ box-shadow: 0 0 0 0 rgba(0,0,0,0);
+ font-weight: bold;
+ box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+}
+
+/* First Level */
+.branch .branch .branch-label {
+ padding-left: 25px;
+}
+
+/* Second Level */
+.branch .branch .branch .branch-label {
+ padding-left: 45px;
+ background-position: 25px;
+}
\ No newline at end of file
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html
new file mode 100644
index 00000000..6e239855
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html
@@ -0,0 +1,145 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.js b/js/components/treeview/ninja-branch.reel/ninja-branch.js
new file mode 100644
index 00000000..6b9ebb10
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.js
@@ -0,0 +1,131 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage").Montage,
+ Component = require("montage/ui/component").Component,
+ TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+var Branch = exports.Branch = Montage.create(TreeNode, {
+ hasTemplate:{
+ value:true
+ },
+ repetition:{
+ value: null
+ },
+ prepareForDraw : {
+ value: function() {
+ this.collapser.removeAttribute('id');
+ this.label._element.addEventListener('click', this, false);
+
+ if(this.hideLabel) {
+ this.label.element.style.display = "none";
+ }
+
+ this.treeView.contentController.addBranchController(this.arrayController);
+ }
+ },
+ handleWebkitTransitionEnd : {
+ value: function(e) {
+ e.stopPropagation();
+
+ ///// Remove Transition
+ this._removeTransition = true;
+ this.collapser.removeEventListener('webkitTransitionEnd', this, false);
+
+ //// If it's an expand transition, restore height to auto
+ if(this.isExpanded) {
+ this._switchToAuto = true;
+ }
+
+ this.needsDraw = true;
+
+ }
+ },
+ templateDidLoad: {
+ value: function() {
+ this.arrayController.delegate = this.treeView.contentController;
+ }
+ },
+ willDraw : {
+ value: function() {
+ if(this._doCollapse && this._step === 0) {
+ this.branchHeight = window.getComputedStyle(this.collapser).height;
+ }
+ }
+ },
+ draw:{
+ value: function () {
+
+ if (this.sourceObject[this.labelKey]) {
+ this._labelText = this.sourceObject[this.labelKey];
+ }
+
+ if(this._doCollapse) {
+ if (this._step === 0) {
+ this.collapser.style.height = this.branchHeight;
+ this.collapser.style.position = "relative";
+ this.collapser.style.overflow = 'hidden';
+ this.collapser.childNodes[1].style.bottom = '0px';
+ this.collapser.childNodes[1].style.position = 'absolute';
+ this._step = 1;
+ this.needsDraw = true;
+ } else if (this._step === 1) {
+ this.collapser.classList.add(this.collapseClass);
+ this._step = 2;
+ this.needsDraw = true;
+ } else {
+ this.collapser.style.height = '0px';
+ this._doCollapse = false;
+ this._step = 0;
+ }
+ } else if(this._doExpand) {
+ this.collapser.style.height = this.branchHeight;
+
+ this._doExpand = false;
+ }
+ if(this._switchToAuto) {
+ this.collapser.childNodes[1].style.position = 'static';
+ this.collapser.style.height = 'auto';
+ this._switchToAuto = false;
+ }
+
+ if(this._removeTransition) {
+ this.collapser.classList.remove(this.collapseClass);
+ this._removeTransition = false;
+ }
+
+ }
+ },
+ _step : {
+ value : 0
+ },
+ handleClick : {
+ value: function(e) {
+ this.toggleExpand();
+ }
+ },
+ expand : {
+ value: function() {
+ this.collapser.addEventListener('webkitTransitionEnd', this, false);
+ this.needsDraw = this._doExpand = true;
+ }
+ },
+ collapse : {
+ value: function() {
+ this.needsDraw = this._doCollapse = true;
+ }
+ },
+ branchHeight: {
+ value: null,
+ enumberable: false
+ },
+ collapseClass : {
+ value: 'nj-collapser',
+ enumberable: false
+ }
+
+
+});
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
new file mode 100644
index 00000000..0ad10c4c
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -0,0 +1,22 @@
+.treeRoot .leaf-label {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQzcwMEU1RjQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQzcwMEU2MDQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRDNzAwRTVENDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRDNzAwRTVFNDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BUcaK3QAAANFJREFUeNqMULEOREAQdYjvuE%2FYWlSUQqKQ7A%2FsD6n0SoVCFHpRa0SllvgFlpvzZO9OcfGSnbx9M%2FNmMpp2Dw96VVX9L%2FJ93wRrmkZJIKrZcRyK%2Bs25p5%2BU8pK4KCakMAzxL4oCJIqivu8Nw0DDu25ZFtW3ritIkiS0tGVZtm1%2F6rZtu4yr67osSyJBEJx3ybKsbVukOecU4zh2XRfKMAzTNJmYpWxgPM%2BzEIIxRrzrOs%2FzdMyVvyAxTdPxAJFzv%2BeBbz8cfN93kDzPb55ZewkwAF0Ddf6ATSsHAAAAAElFTkSuQmCC);
+ background-position: 3px center;
+ background-repeat: no-repeat;
+ border-bottom: 1px solid #505050;
+ cursor: pointer;
+ padding: 3px 0 4px;
+}
+/* First level */
+.branch .leaf-label {
+ padding-left: 25px;
+}
+/* Second level */
+.branch .branch .leaf-label {
+ background-position: 25px center;
+ padding-left: 45px;
+}
+/* Third level */
+.branch .branch .branch .leaf-label {
+ background-position: 45px center;
+ padding-left: 65px;
+}
\ No newline at end of file
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
new file mode 100644
index 00000000..0a8fdac0
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
new file mode 100644
index 00000000..bd566b26
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -0,0 +1,41 @@
+/*
+This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+ TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+exports.Leaf = Montage.create(TreeNode, {
+ hasTemplate: {
+ value: true
+ },
+ templateDidLoad : {
+ value: function() {
+ this.needsDraw = true;
+ }
+ },
+ prepareForDraw: {
+ value : function() {
+ this.activationEvent = this.activationEvent || 'click';
+ this.label._element.addEventListener(this.activationEvent, this.handleNodeActivation.bind(this), false);
+ }
+ },
+ handleNodeActivation: {
+ value: function(e) {
+ console.log(this.sourceObject);
+ this.treeView.contentController.delegate.applyPresetSelection(this.sourceObject);
+ }
+ },
+ draw : {
+ value : function() {
+ if(this.sourceObject[this.labelKey]) {
+ this._labelText = this.sourceObject[this.labelKey];
+ }
+ }
+ }
+
+
+});
diff --git a/js/components/treeview/tree-node.js b/js/components/treeview/tree-node.js
new file mode 100644
index 00000000..689fc233
--- /dev/null
+++ b/js/components/treeview/tree-node.js
@@ -0,0 +1,103 @@
+/*
+This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+
+exports.TreeNode = Montage.create(Component, {
+ _labelText: {
+ value: "Default"
+ },
+ labelText : {
+ get: function() { return this._labelText; },
+ set: function(text) {
+ this._labelText = text;
+ }
+ },
+ treeView : {
+ value: null,
+ serializable: true
+ },
+ leafComponent: {
+ value: null,
+ serializable: true
+ },
+ branchKey : {
+ serializable: true,
+ value: null
+ },
+ labelKey : {
+ serializable: true,
+ value: null
+ },
+ _sourceObject : {
+ value : null
+ },
+ sourceObject : {
+ get : function() {
+ return this._sourceObject;
+ },
+ set : function(object) {
+ if(!object) {
+ return;
+ }
+ if(object[this.branchKey]) {
+ object[this.branchKey].forEach(function(node) {
+ this.childNodes.push(node);
+ }, this);
+ }
+ this._sourceObject = object;
+ }
+ },
+ childNodes : {
+ distinct: true,
+ value: []
+ },
+ isExpanded : {
+ distinct: true,
+ value: true
+ },
+ _needsToggle : {
+ value: null
+ },
+ activationEvent : {
+ value: null
+ },
+ toggleExpand : {
+ value: function() {
+ if(this.isExpanded) {
+ this.collapse();
+ this.isExpanded = false;
+ } else {
+ this.expand();
+ this.isExpanded = true;
+ }
+ }
+ },
+ expand : {
+ value: function() {
+ if(this.collapseClass) {
+ this.branchList.classList.remove(this.collapseClass);
+ } else {
+ this.branchList.style.display = "block";
+ }
+
+ }
+ },
+ collapse : {
+ value: function() {
+ if(this.collapseClass) {
+ this.branchList.classList.add(this.collapseClass);
+ } else {
+ this.branchList.style.display = "none";
+ }
+
+ }
+ }
+
+
+
+});
diff --git a/js/components/treeview/treeview.reel/treeview.css b/js/components/treeview/treeview.reel/treeview.css
new file mode 100644
index 00000000..1e3965ef
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.css
@@ -0,0 +1,3 @@
+
+
+{}
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
new file mode 100644
index 00000000..3d5d75c4
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js
new file mode 100644
index 00000000..ebbfe685
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.js
@@ -0,0 +1,129 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+
+var Montage = require("montage/core/core").Montage,
+ Component = require("montage/ui/component").Component;
+
+exports.Treeview = Montage.create(Component, {
+
+ substitution : { value : null },
+ data : { value : null },
+
+ _hasBeenDeserialized: {
+ value: false,
+ enumerable: false
+ },
+
+ branchComponent : {
+ value: null,
+ serializable: true
+ },
+ leafComponent : {
+ value: null,
+ serializable: true
+ },
+
+ hasTemplate: {
+ value: true
+ },
+ templateDidLoad : {
+ value : function() {
+ this._initializeRootBranch();
+ }
+ },
+ _initializeRootBranch : {
+ value: function() {
+ var rootBranch;
+
+ ///// Get user-defined branch/leaf components or use defaults
+ this.branchComponent = this.branchComponent || this.defaultBranchComponent;
+
+ ///// Tell branch component what the label key is (defined in tree controller)
+ this.branchComponent.labelKey = this.contentController.labelKey;
+
+ ///// Tell branch component what the branch key is (so it can recursively generate branches)
+ this.branchComponent.branchKey = this.contentController.branchKey;
+
+ rootBranch = Montage.create(this.branchComponent);
+ rootBranch.hideLabel = !this.showRoot;
+ rootBranch.treeView = this;
+
+ this.slot.content = rootBranch;
+ rootBranch.sourceObject = this.contentController.root;
+ rootBranch.needsDraw = true;
+ this.needsDraw = true;
+
+ }
+ },
+ showRoot : {
+ value: null
+ },
+
+ _contentController: {
+ enumerable: false,
+ value: null
+ },
+
+ contentController: {
+ enumerable: false,
+ get: function() {
+ return this._contentController;
+ },
+ set: function(value) {
+ if (this._contentController === value) {
+ return;
+ }
+
+ if (this._contentController) {
+ Object.deleteBinding(this, "selectedIndexes");
+ }
+
+ this._contentController = value;
+
+ if (this._contentController) {
+
+ // And bind what we need from the new contentController
+ var selectedIndexesBindingDescriptor;
+
+ selectedIndexesBindingDescriptor = {
+ boundObject: this._contentController,
+ boundObjectPropertyPath: "selectedIndexes"
+ };
+
+ if (this._hasBeenDeserialized) {
+ Object.defineBinding(this, "selectedIndexes", selectedIndexesBindingDescriptor);
+ } else {
+ // otherwise we need to defer it until later; we haven't been deserialized yet
+ if (!this._controllerBindingsToInstall) {
+ this._controllerBindingsToInstall = {};
+ }
+ this._controllerBindingsToInstall.selectedIndexes = selectedIndexesBindingDescriptor;
+ }
+ }
+
+ }
+ },
+
+ deserializedFromTemplate: {
+ value: function() {
+ var controllerBindingDescriptorsToInstall = this._controllerBindingsToInstall;
+
+ if (controllerBindingDescriptorsToInstall) {
+ for (var key in controllerBindingDescriptorsToInstall) {
+ Object.defineBinding(this, key, controllerBindingDescriptorsToInstall[key]);
+ }
+ delete this._controllerBindingsToInstall;
+ }
+
+ this._hasBeenDeserialized = true;
+ }
+ },
+
+ selectedIndexes: {
+ enumerable: false,
+ value: null
+ }
+});
\ No newline at end of file
--
cgit v1.2.3
From c83b0d9bf3f37ae8569e8afc51dbcba9ed003929 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 13:08:38 -0800
Subject: TreeController - moving the tree controller to the components
directory
---
js/components/controllers/tree-controller.js | 185 +++++++++++++++++++++++++++
1 file changed, 185 insertions(+)
create mode 100644 js/components/controllers/tree-controller.js
(limited to 'js/components')
diff --git a/js/components/controllers/tree-controller.js b/js/components/controllers/tree-controller.js
new file mode 100644
index 00000000..03ef7b9e
--- /dev/null
+++ b/js/components/controllers/tree-controller.js
@@ -0,0 +1,185 @@
+/*
+ This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ */
+/**
+ @module montage/ui/controller/tree-controller
+ @requires montage/core/core
+ @requires montage/ui/controller/object-controller
+ @requires montage/core/event/mutable-event
+ */
+var Montage = require("montage").Montage,
+ ObjectController = require("montage/ui/controller/object-controller").ObjectController,
+ ArrayController = require("montage/ui/controller/array-controller").ArrayController,
+ MutableEvent = require("montage/core/event/mutable-event").MutableEvent;
+/**
+ TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical
+ collection of objects, and managing user selection within that collection.
+ You can assign a TreeController instance as the contentProvider property for a TreeView object.
+ @class module:montage/ui/controller/tree-controller.TreeController
+ @classdesc
+ @extends module:montage/ui/controller/object-controller.ObjectController
+*/
+var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ {
+
+ rootKey : {
+ value: null
+ },
+
+ branchKey : {
+ value: 'children'
+ },
+
+ _root : {
+ value : null
+ },
+ root : {
+ get: function() {
+ return this._root;
+ },
+ set: function(value) {
+ this._root = value;
+
+ this.initArrayControllers();
+ }
+ },
+
+ rootController: {
+ value: null
+ },
+
+ initArrayControllers : {
+ value: function() {
+ var self = this;
+
+ ///// Recursive function that finds all branch nodes and initializes
+ ///// sets the tree node type to "branch" or "leaf"
+
+ function walk(node, init, depth) {
+ var branch = node[self.branchKey];
+
+ if(branch) {
+ branch.forEach(function(node) {
+ walk(node, init, ++depth);
+ });
+
+ node['treeNodeType'] = 'branch';
+ } else {
+ node['treeNodeType'] = 'leaf';
+ }
+ }
+
+ walk(this._root, 0);
+
+ }
+ },
+
+ /**
+ @private
+ */
+ _selectedIndexes: {
+ value: null,
+ enumerable: false
+ },
+
+ /**
+ Description TODO
+ @type {Function}
+ @default null
+ */
+ selectedIndexes: {
+ get: function() {
+ return this._selectedIndexes;
+ },
+ set: function(value) {
+ this._selectedIndexes = value;
+ }
+ },
+
+ branchControllers: {
+ value: []
+ },
+
+ addBranchController : {
+ value: function(controller) {
+ if(this.delegate) {
+ controller.delegate = this.delegate;
+ }
+
+ this.branchControllers.push(controller);
+ }
+ },
+
+ /**
+ @private
+ */
+ _content: {
+ enumerable: false,
+ value: null
+ },
+ /**
+ The content managed by the TreeController.
+ @type {Function}
+ @default {String} null
+ */
+ content: {
+ get: function() {
+ return this._content;
+ },
+ set: function(value) {
+ if (this._content === value) {
+ return;
+ }
+
+ this._content = value;
+
+ this.selectedObjects = null;
+
+ if (this.rootKey) {
+ if (value[this.rootKey]) {
+ this.root = value[this.rootKey];
+ } else {
+ console.log('No root key found in content data');
+ }
+ } else {
+ this.root = value;
+ }
+
+ }
+ },
+
+ addObjects : {
+ value: function() {
+
+ var objects = Array.prototype.slice.call(arguments),
+ i,
+ objectCount = objects.length,
+ selectedContentIndexes, firstIndex;
+
+ for (i = 0; i < objectCount; i++) {
+ this.content.push(objects[i]);
+ }
+
+ if (this.selectObjectsOnAddition) {
+ selectedContentIndexes = [];
+ firstIndex = this.content.length-objectCount;
+ for (i = 0; i < objectCount; i++) {
+ selectedContentIndexes[i] = firstIndex++;
+ }
+ this.selectedContentIndexes = selectedContentIndexes;
+ this.selectedObjects = objects;
+ }
+
+ if (this.clearFilterFunctionOnAddition) {
+ this.filterFunction = null;
+ }
+
+ if (this.automaticallyOrganizeObjects) {
+ this.organizeObjects();
+ }
+
+ }
+ }
+
+});
--
cgit v1.2.3
From f94b0c5ada403379b3ff8a900c2a2aabcecce49e Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 6 Feb 2012 14:03:40 -0800
Subject: Add enabled property for ComboBox to support enabling/disabling
materials dropdowns in the PI.
Signed-off-by: Nivesh Rajbhandari
---
js/components/combobox.reel/combobox.js | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
(limited to 'js/components')
diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index a68a7d6b..deef2a47 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -76,6 +76,26 @@ exports.Combobox = Montage.create(Component, {
}
},
+ _enabled: {
+ enumerable: false,
+ value: true
+ },
+
+ enabled: {
+ enumerable: true,
+ serializable: true,
+ get: function() {
+ return this._enabled;
+ },
+ set: function(value) {
+ if(value !== this._enabled)
+ {
+ this._enabled = value;
+ this.needsDraw = true;
+ }
+ }
+ },
+
handleChange:
{
value:function(event)
@@ -117,6 +137,7 @@ exports.Combobox = Montage.create(Component, {
}
this.element.appendChild(optionItem);
}
+ this.element.disabled = !this._enabled;
}
}
},
--
cgit v1.2.3
From 486842239c71e7964f38a09aacda4970f2a82e1a Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 7 Feb 2012 10:58:14 -0800
Subject: Updated tools and PI to get/set materials by binding to appModel's
materials property. This requires us to add FlatMaterial to the list of
materials in the MaterialsLibrary.
Signed-off-by: Nivesh Rajbhandari
---
js/components/combobox.reel/combobox.js | 22 ++++++++-
.../fill-properties.reel/fill-properties.html | 11 ++++-
.../fill-properties.reel/fill-properties.js | 6 ++-
.../ink-bottle-properties.html | 12 ++++-
.../ink-bottle-properties.js | 6 ++-
.../line-properties.reel/line-properties.js | 14 ++++--
.../oval-properties.reel/oval-properties.js | 14 ++++--
.../rect-properties.reel/rect-properties.js | 14 ++++--
.../shape-properties.reel/shape-properties.css | 6 +--
.../shape-properties.reel/shape-properties.html | 35 +++++++++-----
.../shape-properties.reel/shape-properties.js | 53 +++++++++++++---------
11 files changed, 137 insertions(+), 56 deletions(-)
(limited to 'js/components')
diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index deef2a47..8906a649 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -27,6 +27,14 @@ exports.Combobox = Montage.create(Component, {
value: null
},
+ dataField: {
+ value: null
+ },
+
+ dataFunction: {
+ value: null
+ },
+
_items: {
value: []
},
@@ -122,7 +130,19 @@ exports.Combobox = Montage.create(Component, {
{
var current = items[i];
optionItem = document.createElement("option");
- optionItem.value = current;
+ if(this.dataFunction)
+ {
+ optionItem.value = this.dataFunction(current);
+ }
+ else if(this.dataField)
+ {
+ optionItem.value = current[this.dataField];
+ }
+ else
+ {
+ optionItem.value = current;
+ }
+
if(this.labelFunction)
{
optionItem.innerText = this.labelFunction(current);
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index d09b7f44..a35f9b15 100644
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -11,6 +11,15 @@