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