diff options
author | Jose Antonio Marquez | 2012-02-15 20:37:48 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-02-15 20:37:48 -0800 |
commit | 89b5e793ea88ef235b54b6e1d1c379698d3e612b (patch) | |
tree | 4d29118f35df77ca6b423119a4ff61694a442cbf /node_modules/ninja-components/image3d.reel | |
parent | 9d2c2a80483415d7560b00cda5519153db23e241 (diff) | |
parent | d366c0bd1af6471511217ed574083e15059519b5 (diff) | |
download | ninja-89b5e793ea88ef235b54b6e1d1c379698d3e612b.tar.gz |
Merge branch 'refs/heads/NinjaInternal' into Color
Diffstat (limited to 'node_modules/ninja-components/image3d.reel')
-rw-r--r-- | node_modules/ninja-components/image3d.reel/image3d.html | 95 | ||||
-rw-r--r-- | node_modules/ninja-components/image3d.reel/image3d.js | 30 |
2 files changed, 125 insertions, 0 deletions
diff --git a/node_modules/ninja-components/image3d.reel/image3d.html b/node_modules/ninja-components/image3d.reel/image3d.html new file mode 100644 index 00000000..f7b46bd0 --- /dev/null +++ b/node_modules/ninja-components/image3d.reel/image3d.html | |||
@@ -0,0 +1,95 @@ | |||
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 | <script type="text/montage-serialization"> | ||
10 | { | ||
11 | "owner": { | ||
12 | "module": "montage/ui/image3d.reel", | ||
13 | "name": "Image3D", | ||
14 | "properties": { | ||
15 | "element": {"#": "Image3D"}, | ||
16 | "left": {"#": "left"}, | ||
17 | "right": {"#": "right"} | ||
18 | } | ||
19 | } | ||
20 | } | ||
21 | </script> | ||
22 | </head> | ||
23 | <style> | ||
24 | .Image3D { | ||
25 | width: 320px; | ||
26 | height: 320px; | ||
27 | -webkit-transform-style: preserve-3d; | ||
28 | -webkit-backface-visibility: hidden; | ||
29 | } | ||
30 | .Image3D .left { | ||
31 | position: absolute; | ||
32 | width: 320px; | ||
33 | height: 30px; | ||
34 | -webkit-transform-origin: 0 0 0; | ||
35 | -webkit-transform: translate3d(0.5px, 320px, -30px) rotateY(-90deg) rotateZ(-90deg); | ||
36 | line-height: 30px; | ||
37 | font-size: 14px; | ||
38 | font-family: Helvetica, Arial, sans-serif; | ||
39 | text-align: center; | ||
40 | color: white; | ||
41 | background: black; | ||
42 | -webkit-backface-visibility: hidden; | ||
43 | } | ||
44 | .Image3D .right { | ||
45 | position: absolute; | ||
46 | width: 320px; | ||
47 | height: 30px; | ||
48 | -webkit-transform-origin: 0 0 0; | ||
49 | -webkit-transform: translate3d(319.5px, 320px, 0) rotateY(90deg) rotateZ(-90deg); | ||
50 | line-height: 30px; | ||
51 | font-size: 14px; | ||
52 | font-family: Helvetica, Arial, sans-serif; | ||
53 | text-align: center; | ||
54 | color: white; | ||
55 | background: black; | ||
56 | -webkit-backface-visibility: hidden; | ||
57 | } | ||
58 | .Image3D .top { | ||
59 | position: absolute; | ||
60 | width: 320px; | ||
61 | height: 30px; | ||
62 | -webkit-transform-origin: 0 0 0; | ||
63 | -webkit-transform: translate3d(0, .5px, -30px) rotateX(90deg); | ||
64 | background: #444; | ||
65 | -webkit-backface-visibility: hidden; | ||
66 | } | ||
67 | .Image3D .bottom { | ||
68 | position: absolute; | ||
69 | width: 320px; | ||
70 | height: 30px; | ||
71 | -webkit-transform-origin: 0 0 0; | ||
72 | -webkit-transform: translate3d(0, 319.5px, 0) rotateX(-90deg); | ||
73 | background: #444; | ||
74 | -webkit-backface-visibility: hidden; | ||
75 | } | ||
76 | .Image3D .back { | ||
77 | position: absolute; | ||
78 | width: 320px; | ||
79 | height: 320px; | ||
80 | background: inherit; | ||
81 | -webkit-transform-origin: 0 0 0; | ||
82 | -webkit-transform: translate3d(320px, 0, -30px) rotateY(-180deg); | ||
83 | -webkit-backface-visibility: hidden; | ||
84 | } | ||
85 | </style> | ||
86 | <body> | ||
87 | <div id="Image3D" class="Image3D"> | ||
88 | <div id="left" class="left"></div> | ||
89 | <div id="right" class="right"></div> | ||
90 | <div class="top"></div> | ||
91 | <div class="bottom"></div> | ||
92 | <div id="back" class="back"></div> | ||
93 | </div> | ||
94 | </body> | ||
95 | </html> | ||
diff --git a/node_modules/ninja-components/image3d.reel/image3d.js b/node_modules/ninja-components/image3d.reel/image3d.js new file mode 100644 index 00000000..d9b7b302 --- /dev/null +++ b/node_modules/ninja-components/image3d.reel/image3d.js | |||
@@ -0,0 +1,30 @@ | |||
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").Montage, | ||
8 | Component = require("ui/component").Component; | ||
9 | |||
10 | var Image3D = exports.Image3D = Montage.create(Component, { | ||
11 | |||
12 | _data: {value: null}, | ||
13 | |||
14 | data: { | ||
15 | set: function(value) { | ||
16 | this._data = value; | ||
17 | this.needsDraw = true; | ||
18 | } | ||
19 | }, | ||
20 | |||
21 | draw: { | ||
22 | value: function() { | ||
23 | this._element.style.background = "url(" + this._data["src"] + ")"; | ||
24 | this.left.textContent = this._data["text"]; | ||
25 | this.right.textContent = this._data["text"]; | ||
26 | //this.left.style.background = "-webkit-gradient(linear, left top, left bottom, from(rgba(50,50,50,.7)), color-stop(10%, rgba(10,10,10,.5)), to(black)) left top no-repeat, url(" + this._src + ") left top no-repeat"; | ||
27 | //this.left.style.backgroundSize="10000% 10000%"; | ||
28 | } | ||
29 | } | ||
30 | }); \ No newline at end of file | ||