aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/tree-basic/treeItem.reel
diff options
context:
space:
mode:
authorPierre Frisch2011-12-22 07:25:50 -0800
committerValerio Virgillito2012-01-27 11:18:17 -0800
commitb89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch)
tree0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/components/ui/tree-basic/treeItem.reel
parent2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff)
downloadninja-b89a7ee8b956c96a1dcee995ea840feddc5d4b27.tar.gz
First commit of Ninja to ninja-internal
Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
Diffstat (limited to 'js/components/ui/tree-basic/treeItem.reel')
-rw-r--r--js/components/ui/tree-basic/treeItem.reel/treeItem.css53
-rw-r--r--js/components/ui/tree-basic/treeItem.reel/treeItem.html35
-rw-r--r--js/components/ui/tree-basic/treeItem.reel/treeItem.js269
3 files changed, 357 insertions, 0 deletions
</
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.css b/js/components/ui/tree-basic/treeItem.reel/treeItem.css
new file mode 100644
index 00000000..f8e67541
--- /dev/null
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.css
@@ -0,0 +1,53 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No 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
7.atreeItem{
8 display:block;
9 padding:3px;
10 white-space: nowrap;
11}
12
13.atreeItem .treeArrow{
14 font-size: 8px;
15 cursor:pointer;
16 position:relative;
17}
18
19.atreeItem .hidden{
20 visibility:hidden;
21}
22
23.atreeItem .hideTree{
24 display:none;
25}
26
27.atreeItem .atreeItemImgContainer{
28 display:inline;
29}
30
31.atreeItem .name{
32 white-space: nowrap;
33 text-overflow:ellipsis;
34 line-height:15px;
35 overflow: hidden;
36 cursor:pointer;
37}
38
39.atreeItem .atreeItemImg{
40 width:15px;
41 height:15px;
42 position:relative;
43 top:2px;
44 /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);*/
45}
46
47.atreeItem .treeArrow.expanded{
48 -webkit-transform: rotate(-90deg);
49}
50
51.atreeItem .bold{
52 font-weight: bold;
53} \ No newline at end of file
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.html b/js/components/ui/tree-basic/treeItem.reel/treeItem.html
new file mode 100644
index 00000000..3c5b19a9
--- /dev/null
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.html
@@ -0,0 +1,35 @@
1<!DOCTYPE HTML>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="treeItem.css">
11 <script type="text/montage-serialization">
12 {
13 "owner":{
14 "module": "js/components/ui/tree-basic/tree.reel",
15 "name": "TreeItem",
16 "properties": {
17 "element" : {"#": "atreeItem"},
18 "itemName": {"#": "name"},
19 "itemImg": {"#": "atreeItemImg"},
20 "treeArrow": {"#": "treeArrow"}
21 }
22 }
23 }
24 </script>
25</head>
26<body>
27<li id="atreeItem" class="atreeItem">
28 <span id="treeArrow" class="treeArrow hidden">&#9654;</span>
29 <div class="atreeItemContent atreeItemImgContainer" >
30 <img id="atreeItemImg" class="atreeItemImg" src="" />
31 </div>
32 <span id="name" class="atreeItemContent name"></span>
33</li>
34</body>
35</html> \ No newline at end of file
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
new file mode 100644
index 00000000..4c1c0977
--- /dev/null
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
@@ -0,0 +1,269 @@
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;
8var Component = require("montage/ui/component").Component;
9
10exports.TreeItem = Montage.create(Component, {
11
12 _treeItemData:{
13 enumerable : false,
14 value:null
15 },
16 treeItemData:{
17 get:function(){
18 return this._treeItemData;
19 },
20 set:function(value){
21 this._treeItemData = value;
22 this.needsDraw = true;
23 }
24 },
25
26 showIcon :{
27 writable:true,
28 enumerable:true,
29 value:true
30 },
31
32 directoryBold :{
33 writable:true,
34 enumerable:true,
35 value:false
36 },
37
38 metadata:{
39 enumerable:true,
40 writable:true,
41 value:null
42 },
43 willDraw: {
44 enumerable: false,
45 value: function() {
46 var that = this;
47 this.itemName.innerHTML = this.treeItemData.name;
48
49 if(this.showIcon === false){
50 this.itemImg.style.display = "none";
51 }else{
52 if(this.treeItemData.type === "directory"){
53 this.itemImg.src = this.imgStore.img_root + this.imgStore.directory;
54 }else{
55 var fileImg = "";
56 //get extension to map again right icon image
57 var extension = this.treeItemData.name.substring(this.treeItemData.name.lastIndexOf(".")).toLowerCase();
58 if(typeof this.imgStore[extension] !== "undefined"){
59 fileImg = this.imgStore.img_root + this.imgStore[extension];
60 }else{
61 fileImg = this.imgStore.img_root + this.imgStore.file_default;
62 }
63 this.itemImg.src = fileImg;
64 }
65 }
66
67 if(this.treeItemData.type === "directory"){
68 this.treeArrow.classList.remove("hidden");
69 if(this.directoryBold === true){
70 this.itemName.classList.add("bold");
71 }
72 }
73 }
74 },
75 draw: {
76 enumerable: false,
77 value: function() {
78
79 }
80 },
81 didDraw: {
82 enumerable: false,
83 value: function() {
84 var that = this;
85 this.element.identifier = "treeItem";
86 this.treeArrow.identifier = "treeArrow";
87
88 //add arrow click handler for directory
89 if(this.treeItemData.type === "directory"){
90 this.treeArrow.addEventListener("click", this, false);
91 }
92
93 //icon or text click sends selection event
94 var contentEls = this.element.querySelectorAll(".atreeItemContent");
95 for(var i=0;i<contentEls.length;i++){
96 contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, false);
97 contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, false);
98 }
99
100 this.element.addEventListener("mouseover", function(evt){that.handleTreeItemMouseover(evt);}, false);
101
102 //prepare metadata string
103 if(this.treeItemData.name !== ""){
104 this.metadata = "Name: "+this.treeItemData.name;
105 }
106 this.metadata = this.metadata + "<br />" + "Type: "+this.treeItemData.type;
107 if(this.treeItemData.size){this.metadata = this.metadata + "<br />" + "Size: "+this.treeItemData.size;}
108 if(this.treeItemData.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.treeItemData.creationDate);}
109 if(this.treeItemData.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);}
110 }
111 },
112
113 toggleContent:{
114 writable:false,
115 enumerable:true,
116 value:function(el){
117 //if children already drawn then just hide/show
118 if(this.element.getElementsByTagName("ul").length > 0){