diff options
Diffstat (limited to 'js/components/ui/tree-basic/treeItem.reel')
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">▶</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> | ||
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 | // |