5 files changed, 42 insertions, 37 deletions
diff --git a/js/document/document-html.js b/js/document/document-html.js
index b5203e92..9bbea4c9 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -100,7 +100,7 @@ exports.HtmlDocument = Montage.create(Component, {
                        this._document = this.model.views.design.document;
                        //TODO: Remove usage, seems as not needed
                                if (template && template.type === 'banner') {
-                                        this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-banner')[0];
+                                        this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-content')[0];
                                } else {
                                        this.documentRoot = this.model.views.design.document.body;
                                }
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 7b29c038..91ef06de 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -38,10 +38,6 @@
                height: 100%;
                background: #666;
            }
-                        
-                        ninjaloadinghack {
-                                display: none;
-                        }
                        .active-element-outline {
                        outline: #adff2f solid 2px;
@@ -50,32 +46,30 @@
                        .nj-preset-transition {
                                -webkit-transition: all 450ms linear !important;
                        }
-           ninja-viewport {
-               display: block;
-               margin: 0;
-               padding: 0;
-               border: 0;
-               position: absolute;
-               overflow: visible;
-               top: 0;
-               left: 0;
-               background: #FFF;
-           }
                        
-                        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: 0;
+                top: 0;
-                                left: 0;
+                left: 0;
-                                background: transparent;
+                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>
        
@@ -100,11 +94,15 @@
        </head>
        <body>
+                
                <ninjaloadinghack></ninjaloadinghack>
+        
        <ninja-viewport>
-            <!--TODO - rename-->
+                    
-                    <ninja-banner></ninja-banner>
+                    <ninja-content></ninja-content>
+                    
        </ninja-viewport>
+        
        </body>
 </html>
 \ No newline at end of file
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 3378ad71..4c91ff39 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -159,8 +159,9 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
    insertBannerContent: {
        value: function (e) {
                //Getting first element in DOM (assumes it's root)
-                var banner = this._bodyFragment.getElementsByTagName('*')[1],
+                //TODO: Ensure wrapper logic is proper
-                        ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0];
+                var banner = this._bodyFragment.getElementsByTagName('*')[2],
+                        ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0];
                //Copying attributes to maintain same properties as the banner root
                        for (var n in banner.attributes) {
                                if (banner.attributes[n].value) {
@@ -169,7 +170,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                        }
                        //Adjusting margin per size of document
                        //this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
-                        this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;} ninja-banner, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
+                        this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-content {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
                        //Setting content in template
                ninjaBanner.innerHTML = banner.innerHTML;
                //Garbage collection
diff --git a/js/io/templates/files/banner.txt b/js/io/templates/files/banner.txt
index fdafe4f6..33b45e53 100755
--- a/js/io/templates/files/banner.txt
+++ b/js/io/templates/files/banner.txt
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
-<div class="ninja-banner">
+<div class="ninja-content-wrapper">
        
        <!-- Created with Motorola Mobility Ninja -->
        
        <!-- Ninja-Banner Dimensions@@@ -->
-                
+        
-        <style type="text/css">
+        <div class="ninja-banner">
-                .ninja-banner {}
+        
-        </style>
+                <style type="text/css">
+                        .ninja-content-wrapper {}
+                        .ninja-banner {}
+                </style>
+        </div>
 </div>
 \ No newline at end of file
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 7d55b20f..7a905fc6 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -84,6 +84,7 @@ exports.IoMediator = Montage.create(Component, {
                                //
                                content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);
                                content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");
+                                content = content.replace(/ninja-content-wrapper {}/gi, "ninja-content-wrapper {overflow: hidden; width: "+dimensions.width+"; height: "+dimensions.height+"}");
                        }
                        //
                        return content;

diff --git a/js/document/document-html.js b/js/document/document-html.js index b5203e92..9bbea4c9 100755 --- a/js/document/document-html.js +++ b/js/document/document-html.js
@@ -100,7 +100,7 @@ exports.HtmlDocument = Montage.create(Component, {
100	this._document = this.model.views.design.document;	100	this._document = this.model.views.design.document;
101	//TODO: Remove usage, seems as not needed	101	//TODO: Remove usage, seems as not needed
102	if (template && template.type === 'banner') {	102	if (template && template.type === 'banner') {
103	this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-banner')[0];	103	this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-content')[0];
104	} else {	104	} else {
105	this.documentRoot = this.model.views.design.document.body;	105	this.documentRoot = this.model.views.design.document.body;
106	}	106	}


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


diff --git a/js/document/views/design.js b/js/document/views/design.js index 3378ad71..4c91ff39 100755 --- a/js/document/views/design.js +++ b/js/document/views/design.js
@@ -159,8 +159,9 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
159	insertBannerContent: {	159	insertBannerContent: {
160	value: function (e) {	160	value: function (e) {
161	//Getting first element in DOM (assumes it's root)	161	//Getting first element in DOM (assumes it's root)
162	var banner = this._bodyFragment.getElementsByTagName('*')[1],	162	//TODO: Ensure wrapper logic is proper
163	ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0];	163	var banner = this._bodyFragment.getElementsByTagName('*')[2],
		164	ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0];
164	//Copying attributes to maintain same properties as the banner root	165	//Copying attributes to maintain same properties as the banner root
165	for (var n in banner.attributes) {	166	for (var n in banner.attributes) {
166	if (banner.attributes[n].value) {	167	if (banner.attributes[n].value) {
@@ -169,7 +170,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
169	}	170	}
170	//Adjusting margin per size of document	171	//Adjusting margin per size of document
171	//this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';	172	//this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
172	this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;} ninja-banner, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';	173	this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-content {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
173	//Setting content in template	174	//Setting content in template
174	ninjaBanner.innerHTML = banner.innerHTML;	175	ninjaBanner.innerHTML = banner.innerHTML;
175	//Garbage collection	176	//Garbage collection


diff --git a/js/io/templates/files/banner.txt b/js/io/templates/files/banner.txt index fdafe4f6..33b45e53 100755 --- a/js/io/templates/files/banner.txt +++ b/js/io/templates/files/banner.txt
@@ -1,13 +1,18 @@
1	<!DOCTYPE html>	1	<!DOCTYPE html>
2		2
3	<div class="ninja-banner">	3	<div class="ninja-content-wrapper">
4		4
5	<!-- Created with Motorola Mobility Ninja -->	5	<!-- Created with Motorola Mobility Ninja -->
6		6
7	<!-- Ninja-Banner Dimensions@@@ -->	7	<!-- Ninja-Banner Dimensions@@@ -->
8		8
9	<style type="text/css">	9	<div class="ninja-banner">
10	.ninja-banner {}	10
11	</style>	11	<style type="text/css">
		12	.ninja-content-wrapper {}
		13	.ninja-banner {}
		14	</style>
		15
		16	</div>
12		17
13	</div> \ No newline at end of file	18	</div> \ No newline at end of file


diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index 7d55b20f..7a905fc6 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js
@@ -84,6 +84,7 @@ exports.IoMediator = Montage.create(Component, {
84	//	84	//
85	content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);	85	content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);
86	content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");	86	content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");
		87	content = content.replace(/ninja-content-wrapper {}/gi, "ninja-content-wrapper {overflow: hidden; width: "+dimensions.width+"; height: "+dimensions.height+"}");
87	}	88	}
88	//	89	//
89	return content;	90	return content;