aboutsummaryrefslogtreecommitdiff
path: root/js/components/ui/icon-list-basic
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/icon-list-basic
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/icon-list-basic')
-rw-r--r--js/components/ui/icon-list-basic/icon.reel/icon.css42
-rw-r--r--js/components/ui/icon-list-basic/icon.reel/icon.html31
-rw-r--r--js/components/ui/icon-list-basic/icon.reel/icon.js192
-rw-r--r--js/components/ui/icon-list-basic/iconsList.reel/iconsList.css9
-rw-r--r--js/components/ui/icon-list-basic/iconsList.reel/iconsList.html62
-rw-r--r--js/components/ui/icon-list-basic/iconsList.reel/iconsList.js42
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>
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
10var 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){