aboutsummaryrefslogtreecommitdiff
path: root/js/stage
diff options
context:
space:
mode:
authorAnanya Sen2012-04-09 13:11:40 -0700
committerAnanya Sen2012-04-09 13:11:40 -0700
commitdece82791f43b5e8d278aba89cf8d6119af1478f (patch)
treebc15d90a380527071d77a2c8a5598a2e245b486c /js/stage
parent22ade57a30b45774882028eef4ab5a5bffe1a624 (diff)
downloadninja-dece82791f43b5e8d278aba89cf8d6119af1478f.tar.gz
- Decouple code editor from stage document switching logic
- cleaning up Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
Diffstat (limited to 'js/stage')
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.css24
-rwxr-xr-xjs/stage/stage-view.reel/stage-view.js156
2 files changed, 36 insertions, 144 deletions
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index ce7072c7..372af144 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -23,15 +23,17 @@
23} 23}
24*/ 24*/
25 25
26.CodeMirror { 26/*.CodeMirror {*/
27 width: 100%; 27 /*width: 100%;*/
28 height: 100%; 28 /*height: 100%;*/
29 background: white; 29 /*background: white;*/
30} 30/*}*/
31
32/*.CodeMirror .CodeMirror-scroll {*/
33 /*height: 100%;*/
34 /*overflow: scroll;*/
35 /*overflow-x: auto;*/
36 /*overflow-y: auto;*/
37/*}*/
38
31 39
32.CodeMirror .CodeMirror-scroll {
33 height: 100%;
34 overflow: scroll;
35 overflow-x: auto;
36 overflow-y: auto;
37}
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 917cbeb5..bfbee2b6 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";
@@ -87,66 +89,25 @@ exports.StageView = Montage.create(Component, {
87 type = "javascript"; 89 type = "javascript";
88 break; 90 break;
89 } 91 }
90
91 //fix hack
92 document.getElementById("codeMirror_"+doc.uuid).style.display="block"; 92 document.getElementById("codeMirror_"+doc.uuid).style.display="block";
93 93
94 var documentController = this.application.ninja.documentController; 94 doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type);
95 doc.editor = CodeMirror.fromTextArea(doc.textArea, {
96 lineNumbers: true,
97 lineWrapping: true,
98 matchBrackets:true,
99 mode: type,
100 onChange: function(){
101 var historySize = doc.editor.historySize();
102 if(historySize.undo>0){
103 doc.needsSave = true;
104 }else if(historySize.undo===0 && historySize.redo>0){
105 doc.needsSave = false;
106 }
107 },
108 onCursorActivity: function() {
109 doc.editor.matchHighlight("CodeMirror-matchhighlight");
110 doc.editor.setLineClass(doc.editor.hline, null, null);
111 doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline");
112 },
113 //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}
114 onKeyEvent: function(cm, keyEvent) {
115 if((keyEvent.type === "keyup")//need seperate keycode set per mode
116 && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
117 || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
118 || (keyEvent.keyCode === 190)//period
119 || (keyEvent.keyCode === 189)//underscore, dash
120 )
121 && !( (keyEvent.keyCode === 219)//open bracket [
122 || (keyEvent.keyCode === 221)//close bracket ]
123 || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
124 || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
125 || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
126 || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
127 )
128 ){
129
130 CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
131 }
132 }
133 });
134
135 doc.editor.hline = doc.editor.setLineClass(0, "activeline"); 95 doc.editor.hline = doc.editor.setLineClass(0, "activeline");
136 96
137 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe 97 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe
138 this.application.ninja.documentController.activeDocument = doc; 98 this.application.ninja.documentController.activeDocument = doc;
139 this.application.ninja.stage.hideCanvas(true); 99 this.application.ninja.stage.hideCanvas(true);
140
141 document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view 100 document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view
142 } 101 }
143 }, 102 },
144 103
145 //called for switching between html documents 104 /**
105 * Public method
106 * Switches between documents. Document state data is saved and restored whereever applicable
107 */
146 switchDocument:{ 108 switchDocument:{
147 value: function(doc){ 109 value: function(doc){
148 this.application.ninja.documentController._hideCurrentDocument(); 110 this.application.ninja.documentController._hideCurrentDocument();
149
150 this.application.ninja.documentController.activeDocument = doc; 111 this.application.ninja.documentController.activeDocument = doc;
151 112
152 if(this.application.ninja.documentController.activeDocument.currentView === "design") { 113 if(this.application.ninja.documentController.activeDocument.currentView === "design") {
@@ -155,62 +116,30 @@ exports.StageView = Montage.create(Component, {
155 116
156 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe 117 this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe
157 this.application.ninja.documentController._showCurrentDocument(); 118 this.application.ninja.documentController._showCurrentDocument();
158 119 //focus editor
159 //focus current document
160 if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){ 120 if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){
161 document.getElementById("codeMirror_"+this.application.ninja.documentController.activeDocument.uuid).getElementsByClassName("CodeMirror")[0].focus(); 121 this.application.ninja.documentController.activeDocument.editor.focus();
162 } 122 }
163 123
164 if(this.application.ninja.documentController.activeDocument.currentView === "design") { 124 if(this.application.ninja.documentController.activeDocument.currentView === "design") {
165 this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe 125 this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe
166 126 this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util
167 //reinitialize draw-util, snapmanager and view-util
168 this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();
169
170 //this.application.ninja.stage.layout.reinitializeForSwitchDocument();
171
172 // TODO dispatch event here
173 // appDelegateModule.MyAppDelegate.onSetActiveDocument();
174 } 127 }
175 128
176 NJevent("switchDocument"); 129 NJevent("switchDocument");
177
178 } 130 }
179 }, 131 },
180 132
181 refreshCodeDocument:{ 133 /**
182 value:function(doc){ 134 * Public method
183 135 * Switches between different views of a design document, like HTML design view, HTML code view
184 } 136 */
185 }, 137 switchDesignDocViews: {
186 addCodeDocument:{ 138 value: function() {
187 value:function(doc){ 139 //TODO
188 var type;
189 switch(doc.documentType) {
190 case "css" :
191 type = "css";
192 break;
193 case "js" :
194 type = "javascript";