Merge branch 'dom-architecture' of github.com:Motorola-Mobility/ninja-internal into dom-architecture

3 files changed, 38 insertions, 23 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 7e1f1806..9bbea4c9 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -100,15 +100,14 @@ 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;
-                                        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;
                                 }
                         //TODO: Why is this needed?
-                        this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');
+                        this._liveNodeList = this.documentRoot.getElementsByTagName('*');
                         //Initiliazing document model
-                        document.application.njUtils.makeElementModel(this.model.views.design.document.body, "Body", "body");
+                        document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body");
                         //Adding observer to know when template is ready
                         this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));
                                 this._observer.observe(this.model.views.design.document.head, {childList: true});
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;
-                                padding: 0;
-                                border: 0;
-                                position: absolute;
-                                overflow: visible;
-                                top: 50%;
-                                left: 50%;
-                                background: #FFF;
+                margin: 0;
+                padding: 0;
+                border: 0;
+                position: absolute;
+                overflow: visible;
+                top: 0;
+                left: 0;
+                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/views/design.js b/js/document/views/design.js
index e838dd49..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],
-                        ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0];
+                //TODO: Ensure wrapper logic is proper
+                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) {
@@ -168,7 +169,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                                 }
                         }
                         //Adjusting margin per size of document
-                        this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {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; 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-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