Adding special preview for templates

author: Jose Antonio Marquez 2012-05-15 16:49:32 -0700
committer: Jose Antonio Marquez 2012-05-15 16:49:32 -0700
commit: 620ae8f53d4da25c65adb675c0b0ee187e5754fc (patch)
tree: 57ceb3dd28eb5a2a0882aaf56e92984d014fb099 /js
parent: 1ab2c2925fbf6186c8d9872392831f69c61d063d (diff)
download: ninja-620ae8f53d4da25c65adb675c0b0ee187e5754fc.tar.gz
4 files changed, 87 insertions, 3 deletions
diff --git a/js/document/models/base.js b/js/document/models/base.js
index 5f2a5893..e8eba89f 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -93,13 +93,21 @@ exports.BaseDocumentModel = Montage.create(Component, {
                        //Currently only supporting current browser (Chrome, obviously)
                        switch (this.browser) {
                                case 'chrome':
-                                        window.open(this.url);
+                                        if (this.template.type === 'banner' || this.template.type === 'animation') {
+                                                window.open('/js/document/templates/preview/banner.html?width='+this.template.size.width+'&height='+this.template.size.height+'&url='+this.url);
+                                        } else {
+                                                window.open(this.url);
+                                        }
                                        break;
                        default:
-                                        window.open(this.url);
+                                        if (this.template.type === 'banner' || this.template.type === 'animation') {
+                                                window.open('/js/document/templates/preview/banner.html?width='+this.template.size.width+'&height='+this.template.size.height+'&url='+this.url);
+                                        } else {
+                                                window.open(this.url);
+                                        }
                                        break;
                        }
-                }.bind({browser: browser, url: url}));
+                }.bind({browser: browser, url: url, template: this.fileTemplate}));
        }
    },
    ////////////////////////////////////////////////////////////////////
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/io/templates/files/animation.txt b/js/io/templates/files/animation.txt
index 8a3dbd41..a850f186 100755
--- a/js/io/templates/files/animation.txt
+++ b/js/io/templates/files/animation.txt
@@ -8,6 +8,12 @@
                <!-- Ninja-Banner Dimensions@@@ -->
        
                <style type="text/css">
+                        html, body {
+                        width: 100%;
+                        height: 100%;
+                        margin: 0;
+                        padding: 0;
+                }
                        .ninja-content-wrapper {}
                        .ninja-banner {}
                </style>
diff --git a/js/io/templates/files/banner.txt b/js/io/templates/files/banner.txt
index f26accf6..fcfac14c 100755
--- a/js/io/templates/files/banner.txt
+++ b/js/io/templates/files/banner.txt
@@ -8,6 +8,12 @@
                <!-- Ninja-Banner Dimensions@@@ -->
                
                <style type="text/css">
+                        html, body {
+                        width: 100%;
+                        height: 100%;
+                        margin: 0;
+                        padding: 0;
+                }
                        .ninja-content-wrapper {}
                        .ninja-banner {}
                </style>
author	Jose Antonio Marquez	2012-05-15 16:49:32 -0700
committer	Jose Antonio Marquez	2012-05-15 16:49:32 -0700
commit	620ae8f53d4da25c65adb675c0b0ee187e5754fc (patch)
tree	57ceb3dd28eb5a2a0882aaf56e92984d014fb099 /js
parent	1ab2c2925fbf6186c8d9872392831f69c61d063d (diff)
download	ninja-620ae8f53d4da25c65adb675c0b0ee187e5754fc.tar.gz

diff --git a/js/document/models/base.js b/js/document/models/base.js index 5f2a5893..e8eba89f 100755 --- a/js/document/models/base.js +++ b/js/document/models/base.js
@@ -93,13 +93,21 @@ exports.BaseDocumentModel = Montage.create(Component, {
93	//Currently only supporting current browser (Chrome, obviously)	93	//Currently only supporting current browser (Chrome, obviously)
94	switch (this.browser) {	94	switch (this.browser) {
95	case 'chrome':	95	case 'chrome':
96	window.open(this.url);	96	if (this.template.type === 'banner' \|\| this.template.type === 'animation') {
		97	window.open('/js/document/templates/preview/banner.html?width='+this.template.size.width+'&height='+this.template.size.height+'&url='+this.url);
		98	} else {
		99	window.open(this.url);
		100	}
97	break;	101	break;
98	default:	102	default:
99	window.open(this.url);	103	if (this.template.type === 'banner' \|\| this.template.type === 'animation') {
		104	window.open('/js/document/templates/preview/banner.html?width='+this.template.size.width+'&height='+this.template.size.height+'&url='+this.url);
		105	} else {
		106	window.open(this.url);
		107	}
100	break;	108	break;
101	}	109	}
102	}.bind({browser: browser, url: url}));	110	}.bind({browser: browser, url: url, template: this.fileTemplate}));
103	}	111	}
104	},	112	},
105	////////////////////////////////////////////////////////////////////	113	////////////////////////////////////////////////////////////////////


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


diff --git a/js/io/templates/files/animation.txt b/js/io/templates/files/animation.txt index 8a3dbd41..a850f186 100755 --- a/js/io/templates/files/animation.txt +++ b/js/io/templates/files/animation.txt
@@ -8,6 +8,12 @@
8	<!-- Ninja-Banner Dimensions@@@ -->	8	<!-- Ninja-Banner Dimensions@@@ -->
9		9
10	<style type="text/css">	10	<style type="text/css">
		11	html, body {
		12	width: 100%;
		13	height: 100%;
		14	margin: 0;
		15	padding: 0;
		16	}
11	.ninja-content-wrapper {}	17	.ninja-content-wrapper {}
12	.ninja-banner {}	18	.ninja-banner {}
13	</style>	19	</style>


diff --git a/js/io/templates/files/banner.txt b/js/io/templates/files/banner.txt index f26accf6..fcfac14c 100755 --- a/js/io/templates/files/banner.txt +++ b/js/io/templates/files/banner.txt
@@ -8,6 +8,12 @@
8	<!-- Ninja-Banner Dimensions@@@ -->	8	<!-- Ninja-Banner Dimensions@@@ -->
9		9
10	<style type="text/css">	10	<style type="text/css">
		11	html, body {
		12	width: 100%;
		13	height: 100%;
		14	margin: 0;
		15	padding: 0;
		16	}
11	.ninja-content-wrapper {}	17	.ninja-content-wrapper {}
12	.ninja-banner {}	18	.ninja-banner {}
13	</style>	19	</style>