From 150b6eb2be526627d588a0cf7226ddad7a399b8f Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 14 May 2012 16:35:09 -0700 Subject: Fixing banner template Need to implement save, but this cover open and new. --- js/document/document-html.js | 2 +- js/document/templates/banner/index.html | 54 ++++++++++++++++----------------- js/document/views/design.js | 7 +++-- js/io/templates/files/banner.txt | 15 ++++++--- js/mediators/io-mediator.js | 1 + 5 files changed, 42 insertions(+), 37 deletions(-) (limited to 'js') 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; - padding: 0; - border: 0; - position: absolute; - overflow: visible; - top: 0; - left: 0; - background: transparent; + 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); - } @@ -100,11 +94,15 @@ + + - - + + + + \ 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], - 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) { @@ -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 @@ -
+
- - + +
+ + + +
\ 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; -- cgit v1.2.3