diff options
Diffstat (limited to 'js/stage/stage-view.reel/stage-view.js')
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.js | 247 |
1 files changed, 247 insertions, 0 deletions
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js new file mode 100755 index 00000000..31ace49c --- /dev/null +++ b/js/stage/stage-view.reel/stage-view.js | |||
@@ -0,0 +1,247 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | |||
7 | /** | ||
8 | @requires montage/core/core | ||
9 | @requires montage/ui/component | ||
10 | */ | ||
11 | var Montage = require("montage/core/core").Montage, | ||
12 | Component = require("montage/ui/component").Component; | ||
13 | |||
14 | exports.StageView = Montage.create(Component, { | ||
15 | _documents: { | ||
16 | value : [] | ||
17 | }, | ||
18 | |||
19 | docs: { | ||
20 | get: function() { | ||
21 | return this._documents; | ||
22 | }, | ||
23 | set: function(value) { | ||
24 | //console.log(value); | ||
25 | } | ||
26 | }, | ||
27 | |||
28 | templateDidLoad: { | ||
29 | value: function() { | ||
30 | this.eventManager.addEventListener("appLoaded", this, false); | ||
31 | } | ||
32 | }, | ||
33 | |||
34 | didDraw:{ | ||
35 | value: function() { | ||
36 | if(!this.application.ninja.documentController._textHolder) this.application.ninja.documentController._textHolder = this.element; | ||
37 | } | ||
38 | }, | ||
39 | |||
40 | handleAppLoaded: { | ||
41 | value: function() { | ||
42 | |||
43 | // Don't bind for now | ||
44 | /* | ||
45 | Object.defineBinding(this, "docs", { | ||
46 | boundObject: this.application.ninja.documentController, | ||
47 | boundObjectPropertyPath: "_documents" | ||
48 | }); | ||
49 | */ | ||
50 | |||
51 | } | ||
52 | }, | ||
53 | |||
54 | /** | ||
55 | * Creates a text area which will contain the content of the opened text document. | ||
56 | */ | ||
57 | createTextAreaElement: { | ||
58 | value: function(uuid) { | ||
59 | |||
60 | |||
61 | var codeMirrorDiv = document.createElement("div"); | ||
62 | codeMirrorDiv.id = "codeMirror_" + uuid; | ||
63 | codeMirrorDiv.style.display = "block"; | ||
64 | this.element.appendChild(codeMirrorDiv); | ||
65 | |||
66 | var textArea = document.createElement("textarea"); | ||
67 | textArea.id = "code"; | ||
68 | textArea.name = "code"; | ||
69 | |||
70 | codeMirrorDiv.appendChild(textArea); | ||
71 | |||
72 | return textArea; | ||
73 | } | ||
74 | }, | ||
75 | |||
76 | // Temporary function to create a Codemirror text view | ||
77 | createTextView: { | ||
78 | value: function(doc) { | ||
79 | this.application.ninja.documentController._hideCurrentDocument(); | ||
80 | this.hideOtherDocuments(doc.uuid); | ||
81 | var type; | ||
82 | switch(doc.documentType) { | ||
83 | case "css" : | ||
84 | type = "css"; | ||
85 | break; | ||
86 | case "js" : | ||
87 | type = "javascript"; | ||
88 | break; | ||
89 | } | ||
90 | |||
91 | //fix hack | ||
92 | document.getElementById("codeMirror_"+doc.uuid).style.display="block"; | ||
93 | |||
94 | var documentController = this.application.ninja.documentController; | ||
95 | doc.editor = CodeMirror.fromTextArea(doc.textArea, { | ||
96 | lineNumbers: true, | ||
97 | mode: type, | ||
98 | onChange: function(){ | ||
99 | var historySize = doc.editor.historySize(); | ||
100 | if(historySize.undo>0){ | ||
101 | doc.dirtyFlag=true; | ||
102 | }else if(historySize.undo===0 && historySize.redo>0){ | ||
103 | doc.dirtyFlag=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 | ||
114 | this.application.ninja.documentController.activeDocument = doc; | ||
115 | this.application.ninja.stage.hideCanvas(true); | ||
116 | |||
117 | document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view | ||
118 | } | ||
119 | }, | ||
120 | |||
121 | |||
122 | |||
123 | switchDocument:{ | ||
124 | value: function(doc){ | ||
125 | //save editor cursor position | ||
126 | if(!!this.application.ninja.documentController.activeDocument.editor){ | ||
127 | this.application.ninja.documentController.activeDocument.hline = this.application.ninja.documentController.activeDocument.editor.getCursor(true); | ||
128 | } | ||
129 | this.application.ninja.documentController._hideCurrentDocument(); | ||
130 | |||
131 | this.application.ninja.documentController.activeDocument = doc; | ||
132 | |||
133 | this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe | ||
134 | this.application.ninja.documentController._showCurrentDocument(); | ||
135 | |||
136 | var documentController = this.application.ninja.documentController; | ||
137 | |||
138 | //restore editor cursor position | ||
139 | if(!!this.application.ninja.documentController.activeDocument.editor){ | ||
140 | this.application.ninja.documentController.activeDocument.editor.setCursor(this.application.ninja.documentController.activeDocument.hline); | ||
141 | document.getElementById("codeMirror_"+this.application.ninja.documentController.activeDocument.uuid).getElementsByClassName("CodeMirror")[0].focus(); | ||
142 | } | ||
143 | |||
144 | if(this.application.ninja.documentController.activeDocument.currentView === "design") { | ||
145 | this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe | ||
146 | this.application.ninja.currentDocument = this.application.ninja.documentController.activeDocument; | ||
147 | |||
148 | // TODO dispatch event here | ||
149 | // appDelegateModule.MyAppDelegate.onSetActiveDocument(); | ||
150 | } | ||
151 | |||
152 | } | ||
153 | }, | ||
154 | |||
155 | refreshCodeDocument:{ | ||
156 | value:function(doc){ | ||
157 | |||
158 | } | ||
159 | }, | ||
160 | addCodeDocument:{ | ||
161 | value:function(doc){ | ||
162 | var type; | ||
163 | switch(doc.documentType) { | ||
164 | case "css" : | ||
165 | type = "css"; | ||
166 | break; | ||
167 | case "js" : | ||
168 | type = "javascript"; | ||
169 | break; | ||
170 | } | ||
171 | |||
172 | var codeM = CodeMirror.fromTextArea(doc.textArea, { | ||
173 | lineNumbers: true, | ||
174 | mode: type, | ||
175 | onCursorActivity: function() { | ||
176 | //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null); | ||
177 | //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline"); | ||
178 | } | ||
179 | }); | ||
180 | } | ||
181 | }, | ||
182 | hideCodeDocument:{ | ||
183 | value:function(docUuid){ | ||
184 | //hide the previous Codemirror div | ||
185 | |||
186 | } | ||
187 | }, | ||
188 | hideOtherDocuments:{ | ||
189 | value:function(docUuid){ | ||
190 | //use CodeMirror toTextArea() to remove editor and save content into textarea | ||
191 | this.application.ninja.documentController._documents.forEach(function(aDoc){ | ||
192 | if(aDoc.currentView === "design"){ | ||
193 | aDoc.container.parentNode.style["display"] = "none"; | ||
194 | }else if((aDoc.currentView === "code") && (aDoc.uuid !== docUuid)){ | ||
195 | aDoc.container.style["display"] = "none"; | ||
196 | } | ||
197 | }, this); | ||
198 | } | ||
199 | }, | ||
200 | showRulers:{ | ||
201 | value:function(){ | ||
202 | this.application.ninja.rulerTop.style.display = "block"; | ||
203 | this.application.ninja.rulerLeft.style.display = "block"; | ||
204 | } | ||
205 | }, | ||
206 | hideRulers:{ | ||
207 | value:function(){ | ||
208 | this.application.ninja.rulerTop.style.display = "none"; | ||
209 | this.application.ninja.rulerLeft.style.display = "none"; | ||
210 | } | ||
211 | }, | ||
212 | |||
213 | switchViews: { | ||
214 | value: function() { | ||
215 | |||
216 | //save file if dirty | ||
217 | |||
218 | this.application.ninja.stage.saveStageScroll(); | ||
219 | this.application.ninja.documentController._hideCurrentDocument(); | ||
220 | |||
221 | if(this.application.ninja.documentController.activeDocument.currentView === "design") { | ||
222 | this.application.ninja.documentController._textHolder.style.display = "none"; | ||
223 | this.application.ninja.documentController.activeDocument.container.style["display"] = "block"; | ||
224 | this.application.ninja.stage._scrollFlag = true; | ||
225 | //this._showCurrentDocument(); | ||
226 | this.application.ninja.stage.applySavedScroll(); | ||