aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.css46
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.js192
2 files changed, 120 insertions, 118 deletions
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index ce7072c7..e2c4bb0e 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -14,7 +14,11 @@
14 width: 100%; 14 width: 100%;
15 height: 100%; 15 height: 100%;
16 overflow:auto; 16 overflow:auto;
17 /*display: none;*/ 17 cursor:text;
18}
19
20.codeViewContainer>div{
21 width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/
18} 22}
19 23
20/* OLD CSS for reference 24/* OLD CSS for reference
@@ -23,15 +27,33 @@
23} 27}
24*/ 28*/
25 29
26.CodeMirror { 30/*.CodeMirror {*/
27 width: 100%; 31 /*width: 100%;*/
28 height: 100%; 32 /*height: 100%;*/
29 background: white; 33 /*background: white;*/
30} 34/*}*/
31 35
32.CodeMirror .CodeMirror-scroll { 36/*.CodeMirror .CodeMirror-scroll {*/
33 height: 100%; 37 /*height: 100%;*/
34 overflow: scroll; 38 /*overflow: scroll;*/
35 overflow-x: auto; 39 /*overflow-x: auto;*/
36 overflow-y: auto; 40 /*overflow-y: auto;*/
37} 41/*}*/
42
43
44span.CodeMirror-matchhighlight { background: #e9e9e9 }
45.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
46div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
47.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
48.CodeMirror-completions {z-index:6001 !important;}
49
50.cm-s-default .activeline {background: #e8f2ff; !important}
51.cm-s-eclipse .activeline {background: #e8f2ff; !important}
52.cm-s-elegant .activeline {background: #e8f2ff; !important}
53.cm-s-neat .activeline {background: #e8f2ff; !important}
54.cm-s-night .activeline {background: #8da6ce; !important}
55.cm-s-cobalt .activeline {background: #8da6ce; !important}
56.cm-s-monokai .activeline {background: #8da6ce; !important}
57.cm-s-rubyblue .activeline {background: #3E7087; !important}
58.cm-s-lesser-dark .activeline {background: #8da6ce; !important}
59.cm-s-xq-dark .activeline {background: #8da6ce; !important} \ No newline at end of file
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 1f471431..518c3bdd 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -52,12 +52,11 @@ exports.StageView = Montage.create(Component, {
52 }, 52 },
53 53
54 /** 54 /**
55 * Creates a text area which will contain the content of the opened text document. 55 * Public method
56 * Creates a textarea element which will contain the content of the opened text document.
56 */ 57 */
57 createTextAreaElement: { 58 createTextAreaElement: {
58 value: function(uuid) { 59 value: function(uuid) {
59
60
61 var codeMirrorDiv = document.createElement("div"); 60 var codeMirrorDiv = document.createElement("div");
62 codeMirrorDiv.id = "codeMirror_" + uuid; 61 codeMirrorDiv.id = "codeMirror_" + uuid;
63 codeMirrorDiv.style.display = "block"; 62 codeMirrorDiv.style.display = "block";
@@ -66,19 +65,22 @@ exports.StageView = Montage.create(Component, {
66 var textArea = document.createElement("textarea"); 65 var textArea = document.createElement("textarea");
67 textArea.id = "code"; 66 textArea.id = "code";
68 textArea.name = "code"; 67 textArea.name = "code";
69
70 codeMirrorDiv.appendChild(textArea); 68 codeMirrorDiv.appendChild(textArea);
71 69
72 return textArea; 70 return textArea;
73 } 71 }
74 }, 72 },
75 73
76 // Temporary function to create a Codemirror text view 74 /**
75 * Public method
76 * Creates a new instance of a code editor
77 */
77 createTextView: { 78 createTextView: {
78 value: function(doc) { 79 value: function(doc) {
80 var type;
79 this.application.ninja.documentController._hideCurrentDocument(); 81 this.application.ninja.documentController._hideCurrentDocument();
80 this.hideOtherDocuments(doc.uuid); 82 this.hideOtherDocuments(doc.uuid);
81 var type; 83
82 switch(doc.documentType) { 84 switch(doc.documentType) {
83 case "css" : 85 case "css" :
84 type = "css"; 86 type = "css";
@@ -86,43 +88,51 @@ exports.StageView = Montage.create(Component, {
86 case "js" : 88 case "js" :
87 type = "javascript"; 89 type = "javascript";
88 break; 90 break;
91 case "html" :
92 type = "htmlmixed";
93 break;
94 case "json" :
95 type = "javascript";
96 break;
97 case "php" :
98 type = "php";
99 break;
100 case "pl" :
101 type = "perl";
102 break;
103 case "py" :
104 type = "python";
105 break;
106 case "rb" :
107 type = "ruby";
108 break;
109 case "xml" :
110 type = "xml";
111 break;
89 } 112 }
90
91 //fix hack
92 document.getElementById("codeMirror_"+doc.uuid).style.display="block"; 113 document.getElementById("codeMirror_"+doc.uuid).style.display="block";
93 114
94 var documentController = this.application.ninja.documentController; 115 doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type, doc.documentType);
95 doc.editor = CodeMirror.fromTextArea(doc.textArea, { 116 doc.editor.hline = doc.editor.setLineClass(0, "activeline");
96 lineNumbers: true, 117
97 mode: type,
98 onChange: function(){
99 var historySize = doc.editor.historySize();
100 if(historySize.undo>0){
101 doc.needsSave = true;
102 }else if(historySize.undo===0 && historySize.redo>0){
103 doc.needsSave = false;
104 }
105 },
106 onCursorActivity: function() {
107 //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null);
108 //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline");
109 }
110 });
111
112 //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline");
113 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe 118 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe
114 this.application.ninja.documentController.activeDocument = doc; 119 this.application.ninja.documentController.activeDocument = doc;
115 this.application.ninja.stage.hideCanvas(true); 120 this.application.ninja.stage.hideCanvas(true);
116
117 document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view 121 document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view
122
123 this.showCodeViewBar(true);
124 this.application.ninja.codeEditorController.applySettings();
125 this.collapseAllPanels();
118 } 126 }
119 }, 127 },
120 128
121 //called for switching between html documents 129 /**
130 * Public method
131 * Switches between documents. Document state data is saved and restored whereever applicable
132 */
122 switchDocument:{ 133 switchDocument:{
123 value: function(doc){ 134 value: function(doc){
124 this.application.ninja.documentController._hideCurrentDocument(); 135 this.application.ninja.documentController._hideCurrentDocument();
125
126 this.application.ninja.documentController.activeDocument = doc; 136 this.application.ninja.documentController.activeDocument = doc;
127 137
128 if(this.application.ninja.documentController.activeDocument.currentView === "design") { 138 if(this.application.ninja.documentController.activeDocument.currentView === "design") {
@@ -131,62 +141,37 @@ exports.StageView = Montage.create(Component, {
131 141
132 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe 142 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe
133 this.application.ninja.documentController._showCurrentDocument(); 143 this.application.ninja.documentController._showCurrentDocument();
134 144 //focus editor
135 //focus current document
136 if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){ 145 if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){
137 document.getElementById("codeMirror_"+this.application.ninja.documentController.activeDocument.uuid).getElementsByClassName("CodeMirror")[0].focus(); 146 this.application.ninja.documentController.activeDocument.editor.focus();
147
148 this.showCodeViewBar(true);
149 this.application.ninja.codeEditorController.applySettings();
150 this.collapseAllPanels();
138 } 151 }
139 152
140 if(this.application.ninja.documentController.activeDocument.currentView === "design") { 153 if(this.application.ninja.documentController.activeDocument.currentView === "design") {
141 this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe 154 this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe
155 this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util
142 156
143 //reinitialize draw-util, snapmanager and view-util 157 this.showCodeViewBar(false);
144 this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument(); 158 this.restoreAllPanels();
145
146