diff options
Diffstat (limited to 'js/stage')
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.css | 29 | ||||
-rwxr-xr-x | js/stage/stage-view.reel/stage-view.js | 150 |
2 files changed, 60 insertions, 119 deletions
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index ce7072c7..a7e255ae 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css | |||
@@ -23,15 +23,22 @@ | |||
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 | 31 | ||
32 | .CodeMirror .CodeMirror-scroll { | 32 | /*.CodeMirror .CodeMirror-scroll {*/ |
33 | height: 100%; | 33 | /*height: 100%;*/ |
34 | overflow: scroll; | 34 | /*overflow: scroll;*/ |
35 | overflow-x: auto; | 35 | /*overflow-x: auto;*/ |
36 | overflow-y: auto; | 36 | /*overflow-y: auto;*/ |
37 | } | 37 | /*}*/ |
38 | |||
39 | |||
40 | span.CodeMirror-matchhighlight { background: #e9e9e9 } | ||
41 | .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } | ||
42 | .activeline {background: #e8f2ff !important;} | ||
43 | div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} | ||
44 | .CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);} \ 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..c06ad988 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,106 +89,66 @@ 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, { | 95 | doc.editor.hline = doc.editor.setLineClass(0, "activeline"); |
96 | lineNumbers: true, | 96 | |
97 | mode: type, | 97 | this.showCodeViewBar(true); |
98 | onChange: function(){ | 98 | |
99 | var historySize = doc.editor.historySize(); | 99 | this.application.ninja.codeEditorController.handleCodeCompletionSupport(type); |
100 | if(historySize.undo>0){ | 100 | |
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 | 101 | this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe |
114 | this.application.ninja.documentController.activeDocument = doc; | 102 | this.application.ninja.documentController.activeDocument = doc; |
115 | this.application.ninja.stage.hideCanvas(true); | 103 | this.application.ninja.stage.hideCanvas(true); |
116 | |||
117 | document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view | 104 | document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view |
118 | } | 105 | } |
119 | }, | 106 | }, |
120 | 107 | ||
121 | //called for switching between html documents | 108 | /** |
109 | * Public method | ||
110 | * Switches between documents. Document state data is saved and restored whereever applicable | ||
111 | */ | ||
122 | switchDocument:{ | 112 | switchDocument:{ |
123 | value: function(doc){ | 113 | value: function(doc){ |
124 | this.application.ninja.documentController._hideCurrentDocument(); | 114 | this.application.ninja.documentController._hideCurrentDocument(); |
125 | |||
126 | this.application.ninja.documentController.activeDocument = doc; | 115 | this.application.ninja.documentController.activeDocument = doc; |
127 | 116 | ||
128 | if(this.application.ninja.documentController.activeDocument.currentView === "design") { | 117 | if(this.application.ninja.documentController.activeDocument.currentView === "design") { |
129 | this.application.ninja.currentDocument = this.application.ninja.documentController.activeDocument; | 118 | this.application.ninja.currentDocument = this.application.ninja.documentController.activeDocument; |
119 | |||
120 | this.showCodeViewBar(false); | ||
121 | }else{ | ||
122 | this.showCodeViewBar(true); | ||
123 | this.application.ninja.codeEditorController.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.editor.getOption("mode")); | ||
130 | } | 124 | } |
131 | 125 | ||
132 | this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe | 126 | this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe |
133 | this.application.ninja.documentController._showCurrentDocument(); | 127 | this.application.ninja.documentController._showCurrentDocument(); |
134 | 128 | //focus editor | |
135 | //focus current document | ||
136 | if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){ | 129 | 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(); | 130 | this.application.ninja.documentController.activeDocument.editor.focus(); |
138 | } | 131 | } |
139 | 132 | ||
140 | if(this.application.ninja.documentController.activeDocument.currentView === "design") { | 133 | 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 | 134 | this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe |
142 | 135 | this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util | |
143 | //reinitialize draw-util, snapmanager and view-util | ||
144 | this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument(); | ||
145 | |||
146 | //this.application.ninja.stage.layout.reinitializeForSwitchDocument(); | ||
147 | |||
148 | // TODO dispatch event here | ||
149 | // appDelegateModule.MyAppDelegate.onSetActiveDocument(); | ||
150 | } | 136 | } |
151 | 137 | ||
152 | NJevent("switchDocument"); | 138 | NJevent("switchDocument"); |
153 | |||
154 | } | ||
155 | }, | ||
156 | |||
157 | refreshCodeDocument:{ | ||
158 | value:function(doc){ | ||
159 | |||
160 | } | 139 | } |
161 | }, | 140 | }, |
162 | addCodeDocument:{ | ||
163 | value:function(doc){ | ||
164 | var type; | ||
165 | switch(doc.documentType) { | ||
166 | case "css" : | ||
167 | type = "css"; | ||
168 | break; | ||
169 | case "js" : | ||
170 | type = "javascript"; | ||
171 | break; | ||
172 | } | ||
173 | 141 | ||
174 | var codeM = CodeMirror.fromTextArea(doc.textArea, { | 142 | /** |
175 | lineNumbers: true, | 143 | * Public method |
176 | mode: type, | 144 | * Switches between different views of a design document, like HTML design view, HTML code view |
177 | onCursorActivity: function() { | 145 | */ |
178 | //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null); | 146 | switchDesignDocViews: { |
179 | //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline"); | 147 | value: function() { |
180 | } | 148 | //TODO |
181 | }); | ||
182 | } | 149 | } |
183 | }, | 150 | }, |
184 | hideCodeDocument: |