aboutsummaryrefslogtreecommitdiff
path: root/node_modules/ninja-components/image3d.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/ninja-components/image3d.reel')
-rw-r--r--node_modules/ninja-components/image3d.reel/image3d.html95
-rw-r--r--node_modules/ninja-components/image3d.reel/image3d.js30
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>
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").Montage,
8 Component = require("ui/component").Component;
9
10var 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