diff options
author | Ananya Sen | 2012-04-09 13:11:40 -0700 |
---|---|---|
committer | Ananya Sen | 2012-04-09 13:11:40 -0700 |
commit | dece82791f43b5e8d278aba89cf8d6119af1478f (patch) | |
tree | bc15d90a380527071d77a2c8a5598a2e245b486c /js/stage/stage-view.reel | |
parent | 22ade57a30b45774882028eef4ab5a5bffe1a624 (diff) | |
download | ninja-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/stage-view.reel')
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.css | 24 | ||||
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.js | 156 |
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; | ||