Merge pull request #226 from mqg734/Dom-Architecture

Fixing 3d to work in banner templates.

5 files changed, 14 insertions, 6 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index e6b543d7..3f4fe2ed 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -686,8 +686,11 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
             }
 
             if(needsRule) {
-                rule = sc.addRule('body{}');
+//                rule = sc.addRule('body{}');
+//                sc.setStyles(rule, styles);
+                rule = sc.addRule('.ninjaUserDoc{}');
                 sc.setStyles(rule, styles);
+                sc.addClass(docRoot, "ninjaUserDoc");
             }
         }
     }
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 4767271f..f8e88ede 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -107,7 +107,7 @@ exports.HtmlDocument = Montage.create(Component, {
                         //TODO: Why is this needed?
                         this._liveNodeList = this.model.views.design.document.body.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 8e8c96d6..9da6699b 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 {
@@ -63,6 +61,9 @@
                                 top: 0;
                                 left: 0;
                                 background: #FFF;
+                -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>
         
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index 22446403..8c338f84 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -358,9 +358,13 @@ exports.ViewUtils = Montage.create(Component, {
             {
                 pt = this.childToParent( pt, child );
 
-                if (child === this._stageElement)  break;
+//                if (child === this._stageElement)  break;
+//                child = child.offsetParent;
 
+                if (child === this._stageElement)  break;
+                if (child === this._rootElement)  break;
                 child = child.offsetParent;
+                if (child === this._rootElement)  break;
             }
 
             /////////////////////////////////////////////////////////
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index c9c7203f..7d55b20f 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -83,7 +83,7 @@ exports.IoMediator = Montage.create(Component, {
                                 dimensions = {width: String(dimensions[0])+'px', height: String(dimensions[1])+'px'};
                                 //
                                 content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);
-                                content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: hidden; width: "+dimensions.width+"; height: "+dimensions.height+"}");
+                                content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");
                         }
                         //
                         return content;