diff options
-rwxr-xr-x | js/controllers/elements/body-controller.js | 20 | ||||
-rwxr-xr-x | js/document/mediators/template.js | 9 | ||||
-rwxr-xr-x | js/document/views/design.js | 7 | ||||
-rwxr-xr-x | js/helper-classes/3D/draw-utils.js | 32 |
4 files changed, 65 insertions, 3 deletions
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js index 0ca6c417..604b22d0 100755 --- a/js/controllers/elements/body-controller.js +++ b/js/controllers/elements/body-controller.js | |||
@@ -19,6 +19,14 @@ exports.BodyController = Montage.create(ElementController, { | |||
19 | el.elementModel.props3D.matrix3d = mat; | 19 | el.elementModel.props3D.matrix3d = mat; |
20 | el.elementModel.props3D.perspectiveDist = dist; | 20 | el.elementModel.props3D.perspectiveDist = dist; |
21 | 21 | ||
22 | if(this.application.ninja.currentDocument.model.views.design._template) { | ||
23 | if(!MathUtils.isIdentityMatrix(mat)) { | ||
24 | el.parentNode.style.backgroundColor = "transparent"; | ||
25 | } else { | ||
26 | el.parentNode.style.removeProperty("background-color"); | ||
27 | } | ||
28 | } | ||
29 | |||
22 | this.application.ninja.stage.updatedStage = true; | 30 | this.application.ninja.stage.updatedStage = true; |
23 | 31 | ||
24 | if(update3DModel) { | 32 | if(update3DModel) { |
@@ -32,7 +40,11 @@ exports.BodyController = Montage.create(ElementController, { | |||
32 | switch(p) { | 40 | switch(p) { |
33 | case "background" : | 41 | case "background" : |
34 | case "background-color": | 42 | case "background-color": |
35 | return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color")); | 43 | if(this.application.ninja.currentDocument.model.views.design._template) { |
44 | return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el.parentNode, "background-color")); | ||
45 | } else { | ||
46 | return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-color")); | ||
47 | } | ||
36 | case "border": | 48 | case "border": |
37 | return 0; | 49 | return 0; |
38 | case "height": | 50 | case "height": |
@@ -51,7 +63,11 @@ exports.BodyController = Montage.create(ElementController, { | |||
51 | switch(p) { | 63 | switch(p) { |
52 | case "background": | 64 | case "background": |
53 | case "background-color": | 65 | case "background-color": |
54 | this.application.ninja.stylesController.setElementStyle(el, "background-color", value); | 66 | if(this.application.ninja.currentDocument.model.views.design._template) { |
67 | this.application.ninja.stylesController.setElementStyle(el.parentNode, "background-color", value); | ||
68 | } else { | ||
69 | this.application.ninja.stylesController.setElementStyle(el, "background-color", value); | ||
70 | } | ||
55 | break; | 71 | break; |
56 | case "overflow": | 72 | case "overflow": |
57 | case "width": | 73 | case "width": |
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, { | |||
158 | ninjaContentTagDoc.removeAttribute('style'); | 158 | ninjaContentTagDoc.removeAttribute('style'); |
159 | ninjaContentTagDoc.removeAttribute('data-ninja-style'); | 159 | ninjaContentTagDoc.removeAttribute('data-ninja-style'); |
160 | } | 160 | } |
161 | // TODO - clean up into single method | ||
162 | ninjaContentTagMem = template.document.getElementsByTagName('ninja-viewport')[0], ninjaContentTagDoc = template.file.content.document.getElementsByTagName('ninja-viewport')[0]; | ||
163 | if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') !== null) { | ||
164 | ninjaContentTagDoc.setAttribute('style', ninjaContentTagMem.getAttribute('data-ninja-style')); | ||
165 | ninjaContentTagDoc.removeAttribute('data-ninja-style'); | ||
166 | } else if (ninjaContentTagMem && ninjaContentTagMem.getAttribute('data-ninja-style') === null) { | ||
167 | ninjaContentTagDoc.removeAttribute('style'); | ||
168 | ninjaContentTagDoc.removeAttribute('data-ninja-style'); | ||
169 | } | ||
161 | } else { | 170 | } else { |
162 | if (template.body && template.body.getAttribute('data-ninja-style') !== null) { | 171 | if (template.body && template.body.getAttribute('data-ninja-style') !== null) { |
163 | template.file.content.document.body.setAttribute('style', template.body.getAttribute('data-ninja-style')); | 172 | 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, { | |||
281 | this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); | 281 | this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]); |
282 | //Getting style and link tags in document | 282 | //Getting style and link tags in document |
283 | var htags = this.document.getElementsByTagName('html'), | 283 | var htags = this.document.getElementsByTagName('html'), |
284 | bannerWrapper, | ||
284 | userStyles, | 285 | userStyles, |
285 | stags = this.document.getElementsByTagName('style'), | 286 | stags = this.document.getElementsByTagName('style'), |
286 | ltags = this.document.getElementsByTagName('link'), i, orgNodes, | 287 | ltags = this.document.getElementsByTagName('link'), i, orgNodes, |
@@ -326,6 +327,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { | |||
326 | //TODO: Verify appropiate location for this operation | 327 | //TODO: Verify appropiate location for this operation |
327 | if (this._template && this._template.type === 'banner') { | 328 | if (this._template && this._template.type === 'banner') { |
328 | this.documentRoot = this.document.body.getElementsByTagName('ninja-content')[0]; | 329 | this.documentRoot = this.document.body.getElementsByTagName('ninja-content')[0]; |
330 | bannerWrapper = this.documentRoot.parentNode; | ||
329 | } else { | 331 | } else { |
330 | this.documentRoot = this.document.body; | 332 | this.documentRoot = this.document.body; |
331 | } | 333 | } |
@@ -349,6 +351,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, { | |||
349 | this.documentRoot.setAttribute('data-ninja-style', userStyles); | 351 | this.documentRoot.setAttribute('data-ninja-style', userStyles); |
350 | } | 352 | } |
351 | } | 353 | } |
354 | if(bannerWrapper) { | ||
355 | if(userStyles = bannerWrapper.getAttribute('style')) { | ||
356 | bannerWrapper.setAttribute('data-ninja-style', userStyles); | ||
357 | } | ||
358 | } | ||
352 | //Making callback if specified | 359 | //Making callback if specified |
353 | if (this._callback) this._callback(); | 360 | if (this._callback) this._callback(); |
354 | } | 361 | } |
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index bd47ffc3..87151964 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js | |||
@@ -1185,8 +1185,38 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { | |||
1185 | var context = this.application.ninja.stage.gridContext; | 1185 | var context = this.application.ninja.stage.gridContext; |
1186 | var stage = this.application.ninja.stage; | 1186 | var stage = this.application.ninja.stage; |
1187 | var stageRoot = this.application.ninja.currentDocument.model.documentRoot; | 1187 | var stageRoot = this.application.ninja.currentDocument.model.documentRoot; |
1188 | var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); | ||
1189 | 1188 | ||
1189 | // draw an outline around the template body if stage has any transforms | ||
1190 | if(stage.currentDocument.model.views.design._template && !MathUtils.isIdentityMatrix(this.viewUtils.getMatrixFromElement(stageRoot))) { | ||
1191 | var saveContext = this.getDrawingSurfaceElement(); | ||
1192 | this.setDrawingSurfaceElement(this.application.ninja.stage.gridCanvas); | ||
1193 | |||
1194 | var stagePt = MathUtils.getPointOnPlane([0,0,1,0]); | ||
1195 | var stageMat = this.getPlaneToWorldMatrix([0,0,1], stagePt); | ||
1196 | var width = this.snapManager.getStageWidth(), | ||
1197 | height = this.snapManager.getStageHeight(), | ||
1198 | pt0 = [0, 0, 0], | ||
1199 | pt1 = [0, height, 0], | ||
1200 | delta = [width, 0, 0]; | ||
1201 | |||
1202 | this._gridLineArray.length = 0; | ||
1203 | this.drawGridLines(pt0, pt1, delta, stageMat, 2); | ||
1204 | |||
1205 | pt0 = [0, 0, 0]; | ||
1206 | pt1 = [width, 0, 0]; | ||
1207 | delta = [0, height, 0]; | ||
1208 | this.drawGridLines(pt0, pt1, delta, stageMat, 2); | ||
1209 | |||
1210 | this._lineColor = "red"; | ||
1211 | for (var i = 0; i < 4; i++) { | ||
1212 | this.drawIntersectedLine(this._gridLineArray[i], this._drawingContext); | ||
1213 | } | ||
1214 | |||
1215 | this.setDrawingSurfaceElement(saveContext); | ||
1216 | } | ||
1217 | |||
1218 | // draw reference lines across origin | ||
1219 | var bounds3D = this.viewUtils.getElementBoundsInGlobal(stageRoot); | ||
1190 | var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); | 1220 | var l = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [0, 0, 0], [0, stage.canvas.height, 0], 0.1); |
1191 | if(!l) return; | 1221 | if(!l) return; |
1192 | var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); | 1222 | var r = MathUtils.segSegIntersection2D(bounds3D[0], bounds3D[3], [stage.canvas.width, 0, 0], [stage.canvas.width, stage.canvas.height, 0], 0.1); |