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

---
 .../treeview/ninja-branch.reel/ninja-branch.css    |  34 +++++
 .../treeview/ninja-branch.reel/ninja-branch.html   | 145 +++++++++++++++++++++
 .../treeview/ninja-branch.reel/ninja-branch.js     | 131 +++++++++++++++++++
 3 files changed, 310 insertions(+)
 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

(limited to 'js/components/treeview/ninja-branch.reel')

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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="ninja-branch.css" rel="stylesheet" type="text/css" />
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/components/treeview/ninja-branch.reel",
+            "name" : "Branch",
+            "properties" : {
+                "element" : {"#" : "branch"},
+                "label" : { "@" : "textComponent" },
+                "branchList": {"#" : "branchList"},
+                "arrayController": {"@": "arrayController" },
+                "repetition": {"@": "repetition"},
+                "leafComponent": {"@": "leaf"},
+                "branchComponent": {"@": "branch"},
+                "collapser": {"#": "branchCollapser" }
+            }
+        },
+
+        "textComponent" : {
+            "module" : "montage/ui/dynamic-text.reel",
+            "name" : "DynamicText",
+            "properties" : {
+                "element" : { "#" : "label" }
+            },
+            "bindings" : {
+                "value" : {
+                    "boundObject" : {"@": "owner"},
+                    "boundObjectPropertyPath": "_labelText",
+                    "oneway": true
+                }
+            }
+        },
+
+        "arrayController": {
+            "module": "montage/ui/controller/array-controller",
+            "name": "ArrayController",
+            "bindings": {
+                "content": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "childNodes"
+                }
+            }
+        },
+
+        "leaf": {
+            "module": "js/components/treeview/ninja-leaf.reel",
+            "name": "Leaf",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "branch": {
+            "module": "js/components/treeview/ninja-branch.reel",
+            "name": "Branch",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "repetition": {
+            "module": "montage/ui/repetition.reel",
+            "name": "Repetition",
+            "properties": {
+                "element": { "#": "branchList" },
+                "contentController": {"@": "arrayController" }
+            }
+        },
+
+        "substitution": {
+            "module": "montage/ui/substitution.reel",
+            "name": "Substitution",
+            "properties": {
+                "element": {"#": "treeItem"},
+                "switchComponents": {
+                    "leaf": {"@": "leaf"},
+                    "branch": {"@": "branch"}
+
+                }
+            },
+            "bindings": {
+                "switchValue": {
+                    "boundObject": {"@": "repetition"},
+                    "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
+                    "oneway": true
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="branch" class="branch">
+        <div id="label" class="branch-label"></div>
+        <div id="branchCollapser" class="branchCollapser">
+            <ul id="branchList">
+                <li id="treeItem"></li>
+            </ul>    
+        </div>
+        
+    </div>
+</body>
+</html>
\ 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 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+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
+    }
+
+
+});
-- 
cgit v1.2.3