Merge pull request #332 from mqg734/ViewPortHack

Make stage transparent when rotating/zooming templates and draw an outline around the user's root instead.

2 files changed, 16 insertions, 0 deletions

diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js
index c5b46c3a..f43b1a2c 100755
--- a/js/document/mediators/template.js
+++ b/js/document/mediators/template.js
@@ -158,6 +158,15 @@ exports.TemplateDocumentMediator = Montage.create(Component, {
                     ninjaContentTagDoc.removeAttribute('style');
                     ninjaContentTagDoc.removeAttribute('data-ninja-style');
                 }
+                // TODO - clean up into single method
+                ninjaContentTagMem = template.document.getElementsByTagName('ninja-viewport')[0], ninjaContentTagDoc = template.file.content.document.getElementsByTagName('ninja-viewport')[0];
+                if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') !== null) {
+                    ninjaContentTagDoc.setAttribute('style', ninjaContentTagMem.getAttribute('data-ninja-style'));
+                    ninjaContentTagDoc.removeAttribute('data-ninja-style');
+                } else if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') === null) {
+                    ninjaContentTagDoc.removeAttribute('style');
+                    ninjaContentTagDoc.removeAttribute('data-ninja-style');
+                }
             } else {
                 if (template.body && template.body.getAttribute('data-ninja-style') !== null) {
                     template.file.content.document.body.setAttribute('style', template.body.getAttribute('data-ninja-style'));
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 44c61617..d5c5c6c4 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -281,6 +281,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                 this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
                         //Getting style and link tags in document
             var htags = this.document.getElementsByTagName('html'),
+                bannerWrapper,
                 userStyles,
                 stags = this.document.getElementsByTagName('style'),
                 ltags = this.document.getElementsByTagName('link'), i, orgNodes,
@@ -326,6 +327,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
             //TODO: Verify appropiate location for this operation
                 if (this._template && this._template.type === 'banner') {
                         this.documentRoot = this.document.body.getElementsByTagName('ninja-content')[0];
+                bannerWrapper = this.documentRoot.parentNode;
                 } else {
                         this.documentRoot = this.document.body;
                 }
@@ -349,6 +351,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                     this.documentRoot.setAttribute('data-ninja-style', userStyles);
                 }
             }
+            if(bannerWrapper) {
+                if(userStyles = bannerWrapper.getAttribute('style')) {
+                    bannerWrapper.setAttribute('data-ninja-style', userStyles);
+                }
+            }
                 //Making callback if specified
                 if (this._callback) this._callback();
         }