diff options
Diffstat (limited to 'js/components/ui/icon-list-basic')
6 files changed, 378 insertions, 0 deletions
diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.css b/js/components/ui/icon-list-basic/icon.reel/icon.css new file mode 100644 index 00000000..ca591aff --- /dev/null +++ b/js/components/ui/icon-list-basic/icon.reel/icon.css | |||
@@ -0,0 +1,42 @@ | |||
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 | .icon{ | ||
8 | width:90px; | ||
9 | height:80px; | ||
10 | display: inline; | ||
11 | float: left; | ||
12 | -moz-border-radius: 8px; | ||
13 | border-radius: 8px; | ||
14 | margin-bottom: 5px; | ||
15 | margin-right: 5px; | ||
16 | background-color: #5f5f5f; | ||
17 | } | ||
18 | |||
19 | .icon .selected{ | ||
20 | /*background-color: #d1d1d1;*/ | ||
21 | background-color: #919191; | ||
22 | } | ||
23 | |||
24 | .icon .iconImg{ | ||
25 | width:35px; | ||
26 | height:35px; | ||
27 | /*border: 1px solid #000000; | ||
28 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);*/ | ||
29 | margin-left: 20px; | ||
30 | margin-top: 10px; | ||
31 | } | ||
32 | |||
33 | .icon .iconLabel{ | ||
34 | margin-top:8px; | ||
35 | white-space: nowrap; | ||
36 | text-overflow:ellipsis; | ||
37 | line-height:15px; | ||
38 | overflow: hidden; | ||
39 | max-width:80%; | ||
40 | text-align: center; | ||
41 | padding-left: 2px; | ||
42 | } \ No newline at end of file | ||
diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.html b/js/components/ui/icon-list-basic/icon.reel/icon.html new file mode 100644 index 00000000..fc197e8c --- /dev/null +++ b/js/components/ui/icon-list-basic/icon.reel/icon.html | |||
@@ -0,0 +1,31 @@ | |||
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="icon.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner":{ | ||
14 | "module": "js/components/ui/icon-list-basic/iconsList.reel", | ||
15 | "name":"Icon", | ||
16 | "properties":{ | ||
17 | "element": {"#" : "icon"}, | ||
18 | "iconImg": {"#": "iconImg"}, | ||
19 | "iconLabel": {"#": "iconLabel"} | ||
20 | } | ||
21 | } | ||
22 | } | ||
23 | </script> | ||
24 | </head> | ||
25 | <body> | ||
26 | <div id="icon" class="icon"> | ||
27 | <div><img id="iconImg" class="iconImg" src="" /></div> | ||
28 | <div id="iconLabel" class="iconLabel"></div> | ||
29 | </div> | ||
30 | </body> | ||
31 | </html> \ No newline at end of file | ||
diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.js b/js/components/ui/icon-list-basic/icon.reel/icon.js new file mode 100644 index 00000000..d934e7f1 --- /dev/null +++ b/js/components/ui/icon-list-basic/icon.reel/icon.js | |||
@@ -0,0 +1,192 @@ | |||
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 | var Icon = exports.Icon = Montage.create(Component, { | ||
11 | |||
12 | _icondata:{ | ||
13 | enumerable : false, | ||
14 | value:null | ||
15 | }, | ||
16 | icondata:{ | ||
17 | get:function(){ | ||
18 | return this._icondata; | ||
19 | }, | ||
20 | set:function(value){ | ||
21 | this._icondata = value; | ||
22 | this.needsDraw = true; | ||
23 | } | ||
24 | }, | ||
25 | metadata:{ | ||
26 | enumerable:true, | ||
27 | writable:true, | ||
28 | value:null | ||
29 | }, | ||
30 | |||
31 | willDraw: { | ||
32 | enumerable: false, | ||
33 | value: function() { | ||
34 | |||
35 | } | ||
36 | }, | ||
37 | draw: { | ||
38 | enumerable: false, | ||
39 | value: function() { | ||
40 | if(this.icondata.type === "directory"){ | ||
41 | this.iconImg.src = this.imgStore.img_root + this.imgStore.directory; | ||
42 | }else{ | ||
43 | var fileImg = ""; | ||
44 | //get extension to map again right icon image | ||
45 | var extension = this.icondata.name.substring(this.icondata.name.lastIndexOf(".")).toLowerCase(); | ||
46 | if(typeof this.imgStore[extension] !== "undefined"){ | ||
47 | fileImg = this.imgStore.img_root + this.imgStore[extension]; | ||
48 | }else{ | ||
49 | fileImg = this.imgStore.img_root + this.imgStore.file_default; | ||
50 | } | ||
51 | this.iconImg.src = fileImg; | ||
52 | } | ||
53 | } | ||
54 | }, | ||
55 | didDraw: { | ||
56 | enumerable: false, | ||
57 | value: function() { | ||
58 | var that = this; | ||
59 | |||
60 | var icon = this.iconImg; | ||
61 | var iconLabel = this.iconLabel; | ||
62 | if(this.icondata !== null){ | ||
63 | if(((typeof this.icondata.iconUrl !== "undefined")) && !this.icondata.hasIcon){ | ||
64 | icon.className = icon.className + " iconBox"; | ||
65 | }else if((typeof this.icondata.iconUrl !== "undefined") && (this.icondata.iconUrl !== null)){ | ||
66 | icon.style.backgroundImage = "url("+this.icondata.iconUrl+")"; | ||
67 | icon.style.backgroundRepeat = "no-repeat"; | ||
68 | icon.style.backgroundPosition = "center"; | ||
69 | } | ||
70 | iconLabel.innerHTML = this.icondata.name; | ||
71 | } | ||
72 | |||
73 | this.element.addEventListener("dblclick", function(evt){that.handleIconDblclick(evt);}, false); | ||
74 | this.element.addEventListener("mouseover", function(evt){that.handleIconMouseover(evt);}, false); | ||
75 | this.element.addEventListener("click", function(evt){that.handleIconClick(evt);}, false); | ||
76 | |||
77 | //prepare metadata string | ||
78 | if(this.icondata.name !== ""){ | ||
79 | this.metadata = "Name: "+this.icondata.name; | ||
80 | } | ||
81 | this.metadata = this.metadata + "<br />" + "Type: "+this.icondata.type; | ||
82 | if(this.icondata.size){this.metadata = this.metadata + "<br />" + "Size: "+this.icondata.size;} | ||
83 | if(this.icondata.creationDate){this.metadata = this.metadata + "<br />" + "Creation date: "+ this.formatTimestamp(this.icondata.creationDate);} | ||
84 | if(this.icondata.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.icondata.modifiedDate);} | ||
85 | |||
86 | } | ||
87 | }, | ||
88 | |||
89 | /** | ||
90 | * Event Listeners | ||
91 | */ | ||
92 | |||
93 | handleIconClick : { | ||
94 | value: function(evt){ | ||
95 | var selectedItemEvent = document.createEvent("Events"); | ||
96 | selectedItemEvent.initEvent("selectedItem", false, false); | ||
97 | selectedItemEvent.uri = this.icondata.uri; | ||
98 | this.element.dispatchEvent(selectedItemEvent); | ||
99 | |||
100 | var showMetadataEvent = document.createEvent("Events"); | ||
101 | showMetadataEvent.initEvent("updateMetadata", false, false); | ||
102 | showMetadataEvent.metadata = this.metadata; | ||
103 | this.element.dispatchEvent(showMetadataEvent); | ||
104 | |||
105 | //stop propagation so that the container click handler does not deselect it | ||
106 | if(evt.bubbles){ | ||
107 | evt.stopPropagation (); | ||
108 | } | ||
109 | } | ||
110 | }, | ||
111 | |||
112 | handleIconDblclick:{ | ||
113 | value:function(evt){ | ||
114 | //console.log(""+ JSON.stringify(that.icondata)); | ||
115 | if(this.icondata.type === "directory"){ | ||
116 | var openFolderEvent = document.createEvent("Events"); | ||
117 | openFolderEvent.initEvent("openFolder", false, false); | ||
118 | openFolderEvent.folderUri = this.icondata.uri; | ||
119 | this.element.dispatchEvent(openFolderEvent); | ||
120 | } | ||
121 | if(evt.bubbles){ | ||
122 | evt.stopPropagation(); | ||
123 | } | ||
124 | } | ||
125 | }, | ||
126 | |||
127 | handleIconMouseover:{ | ||
128 | value: function(evt){ | ||
129 | //console.log(""+ JSON.stringify(that.icondata)); | ||
130 | var showMetadataEvent = document.createEvent("Events"); | ||
131 | showMetadataEvent.initEvent("showMetadata", false, false); |