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 @@
+
+
+
+
+
+
+
+
+
+
+
\ 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
+ }
+
+
+});
--
cgit v1.2.3