diff options
author | Pierre Frisch | 2011-12-22 07:25:50 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-01-27 11:18:17 -0800 |
commit | b89a7ee8b956c96a1dcee995ea840feddc5d4b27 (patch) | |
tree | 0f3136ab0ecdbbbed6a83576581af0a53124d6f1 /js/components/ui/tree-basic/treeItem.reel/treeItem.js | |
parent | 2401f05d1f4b94d45e4568b81fc73e67b969d980 (diff) | |
download | ninja-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.js | 269 |
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> | ||
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 | var Montage = require("montage/core/core").Montage; | ||
8 | var Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.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 = "▼"; | ||
132 | }else{//expanded | ||
133 | theParent.classList.add("hideTree");//collapse | ||
134 | el.innerHTML = "▶"; | ||
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 = "▼"; | ||
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(ev |