aboutsummaryrefslogtreecommitdiff
path: root/js/components/treeview/ninja-leaf.reel
diff options
context:
space:
mode:
authorValerio Virgillito2012-02-06 14:09:29 -0800
committerValerio Virgillito2012-02-06 14:09:29 -0800
commit07e5839e0ec6da2eb71056ff18b90226af213eef (patch)
treebfc93091f03f2c2383ccfe3ec73dd85bf0a0ccf3 /js/components/treeview/ninja-leaf.reel
parent671a27069db6a121507c2b342653aede685cff67 (diff)
parentc83b0d9bf3f37ae8569e8afc51dbcba9ed003929 (diff)
downloadninja-07e5839e0ec6da2eb71056ff18b90226af213eef.tar.gz
Merge pull request #16 from ericguzman/TreeComponents
Tree components
Diffstat (limited to 'js/components/treeview/ninja-leaf.reel')
-rw-r--r--js/components/treeview/ninja-leaf.reel/ninja-leaf.css22
-rw-r--r--js/components/treeview/ninja-leaf.reel/ninja-leaf.html38
-rw-r--r--js/components/treeview/ninja-leaf.reel/ninja-leaf.js41
3 files changed, 101 insertions, 0 deletions
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 @@
1.treeRoot .leaf-label {
2 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);
3 background-position: 3px center;
4 background-repeat: no-repeat;
5 border-bottom: 1px solid #505050;
6 cursor: pointer;
7 padding: 3px 0 4px;
8}
9/* First level */
10.branch .leaf-label {
11 padding-left: 25px;
12}
13/* Second level */
14.branch .branch .leaf-label {
15 background-position: 25px center;
16 padding-left: 45px;
17}
18/* Third level */
19.branch .branch .branch .leaf-label {
20 background-position: 45px center;
21 padding-left: 65px;
22} \ 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 @@
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <link href="ninja-leaf.css" rel="stylesheet" type="text/css" />
6 <script type="text/montage-serialization">
7 {
8 "owner": {
9 "module" : "js/components/treeview/ninja-leaf.reel",
10 "name" : "Leaf",
11 "properties" : {
12 "element" : {"#" : "leaf"},
13 "label" : { "@" : "textComponent" }
14 }
15 },
16 "textComponent" : {
17 "module" : "montage/ui/dynamic-text.reel",
18 "name" : "DynamicText",
19 "properties" : {
20 "element" : { "#" : "label" }
21 },
22 "bindings" : {
23 "value" : {
24 "boundObject" : {"@": "owner"},
25 "boundObjectPropertyPath": "_labelText",
26 "oneway": true
27 }
28 }
29 }
30 }
31 </script>
32</head>
33<body>
34 <div id="leaf" class="leaf">
35 <div id="label" class="leaf-label"></div>
36 </div>
37</body>
38</html> \ 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 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component;
9 TreeNode = require("js/components/treeview/tree-node").TreeNode;
10
11exports.Leaf = Montage.create(TreeNode, {
12 hasTemplate: {
13 value: true
14 },
15 templateDidLoad : {
16 value: function() {
17 this.needsDraw = true;
18 }
19 },
20 prepareForDraw: {
21 value : function() {
22 this.activationEvent = this.activationEvent || 'click';
23 this.label._element.addEventListener(this.activationEvent, this.handleNodeActivation.bind(this), false);
24 }
25 },
26 handleNodeActivation: {
27 value: function(e) {
28 console.log(this.sourceObject);
29 this.treeView.contentController.delegate.applyPresetSelection(this.sourceObject);
30 }
31 },
32 draw : {
33 value : function() {
34 if(this.sourceObject[this.labelKey]) {
35 this._labelText = this.sourceObject[this.labelKey];
36 }
37 }
38 }
39
40
41});