aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/tree-basic/treeItem.reel/treeItem.js
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/treeItem.js
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/treeItem.js')
-rw-r--r--js/components/ui/tree-basic/treeItem.reel/treeItem.js269
1 files changed, 269 insertions, 0 deletions
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){
119 var theParent = this.element.getElementsByTagName("ul")[0].parentNode;
120 if(theParent.classList.contains("hideTree")){//collapsed
121
122// //check if content has changed and refresh if yes
123// var refreshTreeSegmentEvent = document.createEvent("Events");
124// refreshTreeSegmentEvent.initEvent("refreshTreeSegment", false, false);
125// refreshTreeSegmentEvent.uri = this.treeItemData.uri;
126// refreshTreeSegmentEvent.type = this.treeItemData.type;
127// refreshTreeSegmentEvent.treeSegment = this.element.querySelector(".atree");
128// this.element.dispatchEvent(refreshTreeSegmentEvent);
129
130 theParent.classList.remove("hideTree");//expand
131 el.innerHTML = "&#9660;";
132 }else{//expanded
133 theParent.classList.add("hideTree");//collapse
134 el.innerHTML = "&#9654;";
135 }
136 }
137 //else send event to draw the children
138 else{
139 var treeClickEvent = document.createEvent("Events");
140 treeClickEvent.initEvent("drawTree", false, false);
141 treeClickEvent.uri = this.treeItemData.uri;
142 treeClickEvent.uriType = this.treeItemData.type;
143 var divEl = document.createElement("div");
144 this.element.appendChild(divEl);
145 treeClickEvent.subTreeContainer = divEl;
146 this.element.dispatchEvent(treeClickEvent);
147
148 el.innerHTML = "&#9660;";
149 }
150 }
151 },
152
153 /**
154 * Event Listeners
155 */
156
157 handleTreeArrowClick : {
158 value: function(evt){
159 this.toggleContent(evt.target);
160
161 if(evt.bubbles){
162 evt.stopPropagation();
163 }
164 }
165 },
166
167 handleTreeItemMouseover:{
168 value:function(evt){
169 //console.log(that.element.querySelector(".name").innerHTML);
170 var showMetadataEvent = document.createEvent("Events");
171 showMetadataEvent.initEvent("showMetadata", false, false);
172 showMetadataEvent.metadata = this.metadata;
173 this.element.dispatchEvent(showMetadataEvent);
174
175 if(evt.bubbles){
176 evt.stopPropagation();
177 }
178
179 }
180 },
181
182 handleTreeItemContentClick:{
183 value: function(evt){
184 var selectedItemEvent = document.createEvent("Events");
185 selectedItemEvent.initEvent("selectedItem", false, false);
186 selectedItemEvent.uri = this.treeItemData.uri;
187 this.itemName.dispatchEvent(selectedItemEvent);
188
189 var showMetadataEvent = document.createEvent("Events");
190 showMetadataEvent.initEvent("updateMetadata", false, false);
191 showMetadataEvent.metadata = this.metadata;
192 this.element.dispatchEvent(showMetadataEvent);
193
194 if(evt.bubbles){
195 evt.stopPropagation();
196 }
197 }
198 },
199
200 handleTreeItemContentDblclick:{
201 value: function(evt){
202 if(this.treeItemData.type === "directory"){
203 var openFolderEvent = document.createEvent("Events");
204 openFolderEvent.initEvent("openFolder", false, false);
205 openFolderEvent.folderUri = this.treeItemData.uri;
206 this.element.dispatchEvent(openFolderEvent);
207 }
208 if(evt.bubbles){