Merge pull request #228 from joseeight/Document

Document Banner Template
author: Valerio Virgillito 2012-05-14 17:20:01 -0700
committer: Valerio Virgillito 2012-05-14 17:20:01 -0700
commit: aeb15b43b92dc38bb04ef5dac72111383f044ec5 (patch)
tree: e72b6ca1c7e419291f5b088b60c6f05693d3f264 /js/document
parent: 835df7fcacda5137f0953892e467e5a84f775b35 (diff)
parent: 150b6eb2be526627d588a0cf7226ddad7a399b8f (diff)
download: ninja-aeb15b43b92dc38bb04ef5dac72111383f044ec5.tar.gz
3 files changed, 31 insertions, 32 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
author	Valerio Virgillito	2012-05-14 17:20:01 -0700
committer	Valerio Virgillito	2012-05-14 17:20:01 -0700
commit	aeb15b43b92dc38bb04ef5dac72111383f044ec5 (patch)
tree	e72b6ca1c7e419291f5b088b60c6f05693d3f264 /js/document
parent	835df7fcacda5137f0953892e467e5a84f775b35 (diff)
parent	150b6eb2be526627d588a0cf7226ddad7a399b8f (diff)
download	ninja-aeb15b43b92dc38bb04ef5dac72111383f044ec5.tar.gz

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