aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/tree-basic
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/ui/tree-basic')
-rwxr-xr-xjs/components/ui/tree-basic/treeItem.reel/treeItem.css2
-rwxr-xr-xjs/components/ui/tree-basic/treeItem.reel/treeItem.js51
2 files changed, 39 insertions, 14 deletions
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.css b/js/components/ui/tree-basic/treeItem.reel/treeItem.css
index f8e67541..d33404e7 100755
--- a/js/components/ui/tree-basic/treeItem.reel/treeItem.css
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.css
@@ -29,7 +29,7 @@
29} 29}
30 30
31.atreeItem .name{ 31.atreeItem .name{
32 white-space: nowrap; 32 white-space: pre;
33 text-overflow:ellipsis; 33 text-overflow:ellipsis;
34 line-height:15px; 34 line-height:15px;
35 overflow: hidden; 35 overflow: hidden;
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
index 4c71cb6b..e9e5c1fb 100755
--- a/js/components/ui/tree-basic/treeItem.reel/treeItem.js
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
@@ -107,8 +107,8 @@ exports.TreeItem = Montage.create(Component, {
107 //icon or text click sends selection event 107 //icon or text click sends selection event
108 var contentEls = this.element.querySelectorAll(".atreeItemContent"); 108 var contentEls = this.element.querySelectorAll(".atreeItemContent");
109 for(var i=0;i<contentEls.length;i++){ 109 for(var i=0;i<contentEls.length;i++){
110 contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, false); 110 contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, true);
111 contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, false); 111 contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, true);
112 } 112 }
113 113
114 this.element.addEventListener("mouseover", function(evt){that.handleTreeItemMouseover(evt);}, false); 114 this.element.addEventListener("mouseover", function(evt){that.handleTreeItemMouseover(evt);}, false);
@@ -118,12 +118,12 @@ exports.TreeItem = Montage.create(Component, {
118 this.metadata = "Name: "+this.treeItemData.name; 118 this.metadata = "Name: "+this.treeItemData.name;
119 } 119 }
120 this.metadata = this.metadata + "<br />" + "Type: "+this.treeItemData.type; 120 this.metadata = this.metadata + "<br />" + "Type: "+this.treeItemData.type;
121 if(this.treeItemData.size){this.metadata = this.metadata + "<br />" + "Size: "+this.treeItemData.size;} 121 if(this.treeItemData.size){this.metadata = this.metadata + "<br />" + "Size: "+this.treeItemData.size+ " bytes";}
122 if(this.treeItemData.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.treeItemData.creationDate);} 122 if(this.treeItemData.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.treeItemData.creationDate);}
123 if(this.treeItemData.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);} 123 if(this.treeItemData.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);}
124 124
125 if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){ 125 if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){
126 this.toggleContent(this.treeArrow); 126 this.expand(this.treeArrow);
127 } 127 }
128 if(this.treeItemData.uri === this.highlightedUri){ 128 if(this.treeItemData.uri === this.highlightedUri){
129 this.itemName.classList.add("selected"); 129 this.itemName.classList.add("selected");
@@ -171,6 +171,35 @@ exports.TreeItem = Montage.create(Component, {
171 } 171 }
172 }, 172 },
173 173
174 expand:{
175 writable:false,
176 enumerable:true,
177 value:function(el){
178 //if children already drawn then just hide/show
179 if(this.element.getElementsByTagName("ul").length > 0){
180 var theParent = this.element.getElementsByTagName("ul")[0].parentNode;
181 if(theParent.classList.contains("hideTree")){//collapsed
182 theParent.classList.remove("hideTree");//expand
183 el.innerHTML = "&#9660;";
184 }
185 }
186 //else send event to draw the children
187 else{
188 var treeClickEvent = document.createEvent("Events");
189 treeClickEvent.initEvent("drawTree", false, false);
190 treeClickEvent.uri = this.treeItemData.uri;
191 treeClickEvent.uriType = this.treeItemData.type;
192 var divEl = document.createElement("div");
193 this.element.appendChild(divEl);
194 treeClickEvent.subTreeContainer = divEl;
195 this.element.dispatchEvent(treeClickEvent);
196
197 el.innerHTML = "&#9660;";
198 }
199 }
200 },
201
202
174 /** 203 /**
175 * Event Listeners 204 * Event Listeners
176 */ 205 */
@@ -242,21 +271,17 @@ exports.TreeItem = Montage.create(Component, {
242 enumerable: true, 271 enumerable: true,
243 value:{ 272 value:{
244 "img_root":"images/picker/", 273 "img_root":"images/picker/",
245 ".png":"png_file.png",
246 ".jpg":"jpeg_file.png",
247 ".js":"js_file.png", 274 ".js":"js_file.png",
275 ".json":"json_file.png",
248 ".css":"css_file.png", 276 ".css":"css_file.png",
249 ".html":"html_file.png", 277 ".html":"html_file.png",
250 ".xml":"xml_file.png", 278 ".xml":"xml_file.png",
251 ".php":"php_file.png", 279 ".php":"php_file.png",
280 ".pl":"pl_file.png",
281 ".py":"py_file.png",
282 ".rb":"rb_file.png",
252 ".doc":"doc_file.png", 283 ".doc":"doc_file.png",
253 ".docx":"doc_file.png", 284 ".txt":"txt_file.png",
254 ".rtf":"rtf_file.png",
255 ".pdf":"pdf_file.png",
256 ".zip":"zip_file.png",
257 ".rar":"zip_file.png",
258 ".app":"executable.png",
259 ".exe":"executable.png",
260 "file_default":"file.png", 285 "file_default":"file.png",
261 "directory":"folder.png" 286 "directory":"folder.png"
262 } 287 }