aboutsummaryrefslogtreecommitdiff
path: root/js/stage/stage.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage/stage.reel')
-rwxr-xr-xjs/stage/stage.reel/stage.css47
-rwxr-xr-xjs/stage/stage.reel/stage.html10
-rwxr-xr-xjs/stage/stage.reel/stage.js64
3 files changed, 73 insertions, 48 deletions
diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css
index 54b9761b..13537ba1 100755
--- a/js/stage/stage.reel/stage.css
+++ b/js/stage/stage.reel/stage.css
@@ -10,4 +10,49 @@
10 box-flex: 1; 10 box-flex: 1;
11 position: relative; 11 position: relative;
12 overflow: hidden; 12 overflow: hidden;
13} \ No newline at end of file 13}
14
15.codeViewContainer {
16 position: absolute;
17 top: 0px;
18 left: 0px;
19 margin: 0px;
20 padding: 0px;
21 background-color: #ffffff;
22 width: 100%;
23 height: 100%;
24 overflow:auto;
25 cursor:text;
26}
27
28.codeViewContainer .CodeMirror {
29 width: 100%;
30 height: 100%;
31 background: white;
32}
33
34.codeViewContainer .CodeMirror-scroll {
35 height: 100%;
36 overflow: auto;
37}
38
39.codeViewContainer>div{
40 width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/
41}
42
43span.CodeMirror-matchhighlight { background: #e9e9e9 }
44.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
45div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
46.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
47.CodeMirror-completions {z-index:6001 !important;}
48
49.cm-s-default .activeline {background: #e8f2ff; !important}
50.cm-s-eclipse .activeline {background: #e8f2ff; !important}
51.cm-s-elegant .activeline {background: #e8f2ff; !important}
52.cm-s-neat .activeline {background: #e8f2ff; !important}
53.cm-s-night .activeline {background: #8da6ce; !important}
54.cm-s-cobalt .activeline {background: #8da6ce; !important}
55.cm-s-monokai .activeline {background: #8da6ce; !important}
56.cm-s-rubyblue .activeline {background: #3E7087; !important}
57.cm-s-lesser-dark .activeline {background: #8da6ce; !important}
58.cm-s-xq-dark .activeline {background: #8da6ce; !important} \ No newline at end of file
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 45667e06..7a9619cd 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -11,13 +11,6 @@
11 11
12 <script type="text/montage-serialization"> 12 <script type="text/montage-serialization">
13 { 13 {
14 "stageView" : {
15 "prototype": "js/stage/stage-view.reel",
16 "properties": {
17 "element": {"#": "stageView"}
18 }
19 },
20
21 "stageDeps": { 14 "stageDeps": {
22 "prototype": "js/stage/stage-deps", 15 "prototype": "js/stage/stage-deps",
23 "properties": { 16 "properties": {
@@ -59,7 +52,6 @@
59 "_drawingCanvas": {"#": "drawingCanvas"}, 52 "_drawingCanvas": {"#": "drawingCanvas"},
60 "stageDeps": {"@": "stageDeps"}, 53 "stageDeps": {"@": "stageDeps"},
61 "layout": {"@": "layout"}, 54 "layout": {"@": "layout"},
62 "stageView": {"@": "stageView"},
63 "textTool": {"@": "textTool"}, 55 "textTool": {"@": "textTool"},
64 "focusManager": {"@": "focusManager"} 56 "focusManager": {"@": "focusManager"}
65 }, 57 },
@@ -78,7 +70,7 @@
78<body> 70<body>
79 71
80 <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer"> 72 <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer">
81 <section data-montage-id="stageView"></section> 73 <section id="codeViewContainer" class="codeViewContainer"></section>
82 <section data-montage-id="iframeContainer" id="iframeContainer"></section> 74 <section data-montage-id="iframeContainer" id="iframeContainer"></section>
83 <section data-montage-id="textToolObject"></section> 75 <section data-montage-id="textToolObject"></section>
84 <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas> 76 <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 5a1d7f78..4d9296a1 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -192,7 +192,6 @@ exports.Stage = Montage.create(Component, {
192 drawUtils._eltArray.length = 0; 192 drawUtils._eltArray.length = 0;
193 drawUtils._planesArray.length = 0; 193 drawUtils._planesArray.length = 0;
194 } else if(this._currentDocument.currentView === "design") { 194 } else if(this._currentDocument.currentView === "design") {
195 this.showCodeViewBar(false);
196 this.restoreAllPanels(); 195 this.restoreAllPanels();
197 this.hideCanvas(false); 196 this.hideCanvas(false);
198 this.showRulers(); 197 this.showRulers();
@@ -200,13 +199,12 @@ exports.Stage = Montage.create(Component, {
200 this.clearAllCanvas(); 199 this.clearAllCanvas();
201 this.initWithDocument(); 200 this.initWithDocument();
202 } else { 201 } else {
203 this.showCodeViewBar(true);
204 this.collapseAllPanels(); 202 this.collapseAllPanels();
205 this.hideCanvas(true); 203 this.hideCanvas(true);
206 this.hideRulers(); 204 this.hideRulers();
207 } 205 }
208 } 206 }
209 }, 207 },
210 208
211 _userPaddingLeft: { value: 0 }, 209 _userPaddingLeft: { value: 0 },
212 _userPaddingTop: { value: 0 }, 210 _userPaddingTop: { value: 0 },
@@ -216,7 +214,7 @@ exports.Stage = Montage.create(Component, {
216 set: function(value) { 214 set: function(value) {
217 this._userPaddingLeft = value; 215 this._userPaddingLeft = value;
218 this._documentOffsetLeft = -value; 216 this._documentOffsetLeft = -value;
219 this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px"; 217 this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
220 this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; 218 this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
221 this.updatedStage = true; 219 this.updatedStage = true;
222 } 220 }
@@ -227,7 +225,7 @@ exports.Stage = Montage.create(Component, {
227 set: function(value) { 225 set: function(value) {
228 this._userPaddingTop = value; 226 this._userPaddingTop = value;
229 this._documentOffsetTop = -value; 227 this._documentOffsetTop = -value;
230 this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px"; 228 this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
231 this.userContentTop = this._documentOffsetTop - this._scrollTop; 229 this.userContentTop = this._documentOffsetTop - this._scrollTop;
232 this.updatedStage = true; 230 this.updatedStage = true;
233 } 231 }
@@ -242,7 +240,7 @@ exports.Stage = Montage.create(Component, {
242 240
243 // Hack for now until a full component 241 // Hack for now until a full component
244 this.layout.draw(); 242 this.layout.draw();
245 if(this.application.ninja.currentDocument) { 243 if(this.currentDocument) {
246 this.layout.draw3DInfo(true); 244 this.layout.draw3DInfo(true);
247 } 245 }
248 } else if(this.updatedStage) { 246 } else if(this.updatedStage) {
@@ -347,8 +345,8 @@ exports.Stage = Montage.create(Component, {
347 } 345 }
348 346
349 if(didSwitch) { 347 if(didSwitch) {
350 this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft; 348 this.currentDocument.model.views.design.document.body.scrollLeft = this.currentDocument.model.scrollLeft;
351 this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop; 349 this.currentDocument.model.views.design.document.body.scrollTop = this.currentDocument.model.scrollTop;
352 this.handleScroll(); 350 this.handleScroll();
353 } else { 351 } else {
354 this.centerStage(); 352 this.centerStage();
@@ -462,9 +460,9 @@ exports.Stage = Montage.create(Component, {
462 handleMousewheel: { 460 handleMousewheel: {
463 value: function(event) { 461 value: function(event) {
464 if(event._event.wheelDelta > 0) { 462 if(event._event.wheelDelta > 0) {
465 this.application.ninja.currentDocument.model.views.design.document.body.scrollTop -= 20; 463 this.currentDocument.model.views.design.document.body.scrollTop -= 20;
466 } else { 464 } else {
467 this.application.ninja.currentDocument.model.views.design.document.body.scrollTop += 20; 465 this.currentDocument.model.views.design.document.body.scrollTop += 20;
468 } 466 }
469 } 467 }
470 }, 468 },
@@ -532,8 +530,8 @@ exports.Stage = Montage.create(Component, {
532 handleScroll: { 530 handleScroll: {
533 value: function() { 531 value: function() {
534 532
535 this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft; 533 this._scrollLeft = this.currentDocument.model.views.design.document.body.scrollLeft;
536 this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop; 534 this._scrollTop = this.currentDocument.model.views.design.document.body.scrollTop;
537 535
538 this.userContentLeft = this._documentOffsetLeft - this._scrollLeft; 536 this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
539 this.userContentTop = this._documentOffsetTop - this._scrollTop; 537 this.userContentTop = this._documentOffsetTop - this._scrollTop;
@@ -571,7 +569,7 @@ exports.Stage = Montage.create(Component, {
571 */ 569 */
572 centerStage: { 570 centerStage: {
573 value: function() { 571 value: function() {
574 var designView = this.application.ninja.currentDocument.model.views.design; 572 var designView = this.currentDocument.model.views.design;
575 if(designView._template) { 573 if(designView._template) {
576 designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2); 574 designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2);
577 designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2); 575 designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2);
@@ -630,21 +628,21 @@ exports.Stage = Montage.create(Component, {
630 getElement: { 628 getElement: {
631 value: function(position, selectable) { 629 value: function(position, selectable) {
632 var point, element, 630 var point, element,
633 docView = this.application.ninja.currentDocument.model.views.design; 631 docView = this.currentDocument.model.views.design;
634 632
635 point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset + this.documentOffsetLeft, position.pageY - docView.iframe.contentWindow.pageYOffset + this.documentOffsetTop)); 633 point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset + this.documentOffsetLeft, position.pageY - docView.iframe.contentWindow.pageYOffset + this.documentOffsetTop));
636 element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop); 634 element = this.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop);
637 635
638