2 files changed, 94 insertions, 16 deletions
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 2cd82f51..91ef06de 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -27,8 +27,6 @@
                                margin: 0;
                        padding: 0;
                                position: absolute;
-                                -webkit-transform-style: preserve-3d;
-                                -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                        }
            html {
@@ -40,10 +38,6 @@
                height: 100%;
                background: #666;
            }
-                        
-                        ninjaloadinghack {
-                                display: none;
-                        }
                        .active-element-outline {
                        outline: #adff2f solid 2px;
@@ -53,16 +47,29 @@
                                -webkit-transition: all 450ms linear !important;
                        }
                        
-                        ninja-banner {
+                        ninjaloadinghack {
+                                display: none;
+                        }
+                        
+                        ninja-viewport, ninja-content {
                                display: block;
-                                margin: 0;
+                margin: 0;
-                                padding: 0;
+                padding: 0;
-                                border: 0;
+                border: 0;
-                                position: absolute;
+                position: absolute;
-                                overflow: visible;
+                overflow: visible;
-                                top: 50%;
+                top: 0;
-                                left: 50%;
+                left: 0;
-                                background: #FFF;
+                background: transparent;
+                        }
+                        
+                        ninja-viewport {
+                background: #FFF;
+                }
+                        
+                        ninja-content {
+                -webkit-transform-style: preserve-3d;
+                -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                        }
        </style>
        
@@ -87,8 +94,15 @@
        </head>
        <body>
+                
                <ninjaloadinghack></ninjaloadinghack>
-                <ninja-banner></ninja-banner>
+        
+        <ninja-viewport>
+                    
+                    <ninja-content></ninja-content>
+                    
+        </ninja-viewport>
+        
        </body>
 </html>
 \ No newline at end of file
diff --git a/js/document/templates/preview/banner.html b/js/document/templates/preview/banner.html
new file mode 100755
index 00000000..5838ec91
--- /dev/null
+++ b/js/document/templates/preview/banner.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+ 
+<html>
+        <head>
+        
+        <style type="text/css">
+                
+                html, body {
+                        width: 100%;
+                        height: 100%;
+                        margin: 0;
+                        padding: 0;
+                        background: #333;
+                }
+                
+                .preview {
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        margin: 0;
+                        padding: 0;
+                        border: 1px solid #000;
+                        background: #FFF;
+                        -webkit-box-shadow: 0 0 16px #000;
+                }
+                
+        </style>
+        
+        <script type="text/javascript">
+                //
+                window.addEventListener('load', loadBanner, false);
+                //
+                function loadBanner (e) {
+                        var iframe = document.getElementsByTagName('iframe')[0];
+                        iframe.src = qs('url');
+                        iframe.style.width = qs('width')+'px';
+                        iframe.style.height = qs('height')+'px';
+                        iframe.style.marginLeft = -1*qs('width')/2+'px';
+                        iframe.style.marginTop = -1*qs('height')/2+'px';
+                }
+                /*
+                Taken from:
+                http://stackoverflow.com/questions/7731778/jquery-get-query-string-parameters
+                */
+                function qs(key) {
+                        key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
+                        var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
+                        return match && decodeURIComponent(match[1]);
+                        }
+        </script>
+        </head>
+        <body>
+                <iframe class="preview"></iframe>
+        </body>
+</html>
+\ No newline at end of file

diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html index 2cd82f51..91ef06de 100755 --- a/js/document/templates/banner/index.html +++ b/js/document/templates/banner/index.html
@@ -27,8 +27,6 @@
27	margin: 0;	27	margin: 0;
28	padding: 0;	28	padding: 0;
29	position: absolute;	29	position: absolute;
30	-webkit-transform-style: preserve-3d;
31	-webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
32	}	30	}
33		31
34	html {	32	html {
@@ -40,10 +38,6 @@
40	height: 100%;	38	height: 100%;
41	background: #666;	39	background: #666;
42	}	40	}
43
44	ninjaloadinghack {
45	display: none;
46	}
47		41
48	.active-element-outline {	42	.active-element-outline {
49	outline: #adff2f solid 2px;	43	outline: #adff2f solid 2px;
@@ -53,16 +47,29 @@
53	-webkit-transition: all 450ms linear !important;	47	-webkit-transition: all 450ms linear !important;
54	}	48	}
55		49
56	ninja-banner {	50	ninjaloadinghack {
		51	display: none;
		52	}
		53
		54	ninja-viewport, ninja-content {
57	display: block;	55	display: block;
58	margin: 0;	56	margin: 0;
59	padding: 0;	57	padding: 0;
60	border: 0;	58	border: 0;
61	position: absolute;	59	position: absolute;
62	overflow: visible;	60	overflow: visible;
63	top: 50%;	61	top: 0;
64	left: 50%;	62	left: 0;
65	background: #FFF;	63	background: transparent;
		64	}
		65
		66	ninja-viewport {
		67	background: #FFF;
		68	}
		69
		70	ninja-content {
		71	-webkit-transform-style: preserve-3d;
		72	-webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
66	}	73	}
67	</style>	74	</style>
68		75
@@ -87,8 +94,15 @@
87	</head>	94	</head>
88		95
89	<body>	96	<body>
		97
90	<ninjaloadinghack></ninjaloadinghack>	98	<ninjaloadinghack></ninjaloadinghack>
91	<ninja-banner></ninja-banner>	99
		100	<ninja-viewport>
		101
		102	<ninja-content></ninja-content>
		103
		104	</ninja-viewport>
		105
92	</body>	106	</body>
93		107
94	</html> \ No newline at end of file	108	</html> \ No newline at end of file


diff --git a/js/document/templates/preview/banner.html b/js/document/templates/preview/banner.html new file mode 100755 index 00000000..5838ec91 --- /dev/null +++ b/js/document/templates/preview/banner.html
@@ -0,0 +1,64 @@
		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
		8	<html>
		9
		10	<head>
		11
		12	<style type="text/css">
		13
		14	html, body {
		15	width: 100%;
		16	height: 100%;
		17	margin: 0;
		18	padding: 0;
		19	background: #333;
		20	}
		21
		22	.preview {
		23	position: absolute;
		24	top: 50%;
		25	left: 50%;
		26	margin: 0;
		27	padding: 0;
		28	border: 1px solid #000;
		29	background: #FFF;
		30	-webkit-box-shadow: 0 0 16px #000;
		31	}
		32
		33	</style>
		34
		35	<script type="text/javascript">
		36	//
		37	window.addEventListener('load', loadBanner, false);
		38	//
		39	function loadBanner (e) {
		40	var iframe = document.getElementsByTagName('iframe')[0];
		41	iframe.src = qs('url');
		42	iframe.style.width = qs('width')+'px';
		43	iframe.style.height = qs('height')+'px';
		44	iframe.style.marginLeft = -1*qs('width')/2+'px';
		45	iframe.style.marginTop = -1*qs('height')/2+'px';
		46	}
		47	/*
		48	Taken from:
		49	http://stackoverflow.com/questions/7731778/jquery-get-query-string-parameters
		50	*/
		51	function qs(key) {
		52	key = key.replace(/[*+?^$.\[\]{}()\|\\\/]/g, "\\$&"); // escape RegEx meta chars
		53	var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&\|$)"));
		54	return match && decodeURIComponent(match[1]);
		55	}
		56	</script>
		57
		58	</head>
		59
		60	<body>
		61	<iframe class="preview"></iframe>
		62	</body>
		63
		64	</html> \ No newline at end of file