aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorValerio Virgillito2012-05-14 17:20:01 -0700
committerValerio Virgillito2012-05-14 17:20:01 -0700
commitaeb15b43b92dc38bb04ef5dac72111383f044ec5 (patch)
treee72b6ca1c7e419291f5b088b60c6f05693d3f264 /js
parent835df7fcacda5137f0953892e467e5a84f775b35 (diff)
parent150b6eb2be526627d588a0cf7226ddad7a399b8f (diff)
downloadninja-aeb15b43b92dc38bb04ef5dac72111383f044ec5.tar.gz
Merge pull request #228 from joseeight/Document
Document Banner Template
Diffstat (limited to 'js')
-rwxr-xr-xjs/document/document-html.js2
-rwxr-xr-xjs/document/templates/banner/index.html54
-rwxr-xr-xjs/document/views/design.js7
-rwxr-xr-xjs/io/templates/files/banner.txt15
-rw-r--r--js/mediators/io-mediator.js1
5 files changed, 42 insertions, 37 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, {
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
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 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2 2
3<div class="ninja-banner"> 3<div class="ninja-content-wrapper">
4 4
5 <!-- Created with Motorola Mobility Ninja --> 5 <!-- Created with Motorola Mobility Ninja -->
6 6
7 <!-- Ninja-Banner Dimensions@@@ --> 7 <!-- Ninja-Banner Dimensions@@@ -->
8 8
9 <style type="text/css"> 9 <div class="ninja-banner">
10 .ninja-banner {} 10
11 </style> 11 <style type="text/css">
12 .ninja-content-wrapper {}
13 .ninja-banner {}
14 </style>
15
16 </div>
12 17
13</div> \ No newline at end of file 18</div> \ 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, {
84 // 84 //
85 content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id); 85 content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);
86 content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}"); 86 content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");
87 content = content.replace(/ninja-content-wrapper {}/gi, "ninja-content-wrapper {overflow: hidden; width: "+dimensions.width+"; height: "+dimensions.height+"}");
87 } 88 }
88 // 89 //
89 return content; 90 return content;