From dece82791f43b5e8d278aba89cf8d6119af1478f Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 9 Apr 2012 13:11:40 -0700 Subject: - Decouple code editor from stage document switching logic - cleaning up Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 24 ++--- js/stage/stage-view.reel/stage-view.js | 156 +++++--------------------------- 2 files changed, 36 insertions(+), 144 deletions(-) (limited to 'js/stage') 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 @@ } */ -.CodeMirror { - width: 100%; - height: 100%; - background: white; -} +/*.CodeMirror {*/ + /*width: 100%;*/ + /*height: 100%;*/ + /*background: white;*/ +/*}*/ + +/*.CodeMirror .CodeMirror-scroll {*/ + /*height: 100%;*/ + /*overflow: scroll;*/ + /*overflow-x: auto;*/ + /*overflow-y: auto;*/ +/*}*/ + -.CodeMirror .CodeMirror-scroll { - height: 100%; - overflow: scroll; - overflow-x: auto; - overflow-y: auto; -} 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, { }, /** - * Creates a text area which will contain the content of the opened text document. + * Public method + * Creates a textarea element which will contain the content of the opened text document. */ createTextAreaElement: { value: function(uuid) { - - var codeMirrorDiv = document.createElement("div"); codeMirrorDiv.id = "codeMirror_" + uuid; codeMirrorDiv.style.display = "block"; @@ -66,19 +65,22 @@ exports.StageView = Montage.create(Component, { var textArea = document.createElement("textarea"); textArea.id = "code"; textArea.name = "code"; - codeMirrorDiv.appendChild(textArea); return textArea; } }, - // Temporary function to create a Codemirror text view + /** + * Public method + * Creates a new instance of a code editor + */ createTextView: { value: function(doc) { + var type; this.application.ninja.documentController._hideCurrentDocument(); this.hideOtherDocuments(doc.uuid); - var type; + switch(doc.documentType) { case "css" : type = "css"; @@ -87,66 +89,25 @@ exports.StageView = Montage.create(Component, { type = "javascript"; break; } - - //fix hack document.getElementById("codeMirror_"+doc.uuid).style.display="block"; - var documentController = this.application.ninja.documentController; - doc.editor = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: true, - lineWrapping: true, - matchBrackets:true, - mode: type, - onChange: function(){ - var historySize = doc.editor.historySize(); - if(historySize.undo>0){ - doc.needsSave = true; - }else if(historySize.undo===0 && historySize.redo>0){ - doc.needsSave = false; - } - }, - onCursorActivity: function() { - doc.editor.matchHighlight("CodeMirror-matchhighlight"); - doc.editor.setLineClass(doc.editor.hline, null, null); - doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline"); - }, - //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}} - onKeyEvent: function(cm, keyEvent) { - if((keyEvent.type === "keyup")//need seperate keycode set per mode - && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers - || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters - || (keyEvent.keyCode === 190)//period - || (keyEvent.keyCode === 189)//underscore, dash - ) - && !( (keyEvent.keyCode === 219)//open bracket [ - || (keyEvent.keyCode === 221)//close bracket ] - || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket { - || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket } - || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket ( - || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket ) - ) - ){ - - CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); - } - } - }); - + doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe this.application.ninja.documentController.activeDocument = doc; this.application.ninja.stage.hideCanvas(true); - document.getElementById("iframeContainer").style.display="none";//hide the iframe when switching to code view } }, - //called for switching between html documents + /** + * Public method + * Switches between documents. Document state data is saved and restored whereever applicable + */ switchDocument:{ value: function(doc){ this.application.ninja.documentController._hideCurrentDocument(); - this.application.ninja.documentController.activeDocument = doc; if(this.application.ninja.documentController.activeDocument.currentView === "design") { @@ -155,62 +116,30 @@ exports.StageView = Montage.create(Component, { this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe this.application.ninja.documentController._showCurrentDocument(); - - //focus current document + //focus editor if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){ - document.getElementById("codeMirror_"+this.application.ninja.documentController.activeDocument.uuid).getElementsByClassName("CodeMirror")[0].focus(); + this.application.ninja.documentController.activeDocument.editor.focus(); } if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe - - //reinitialize draw-util, snapmanager and view-util - this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument(); - - //this.application.ninja.stage.layout.reinitializeForSwitchDocument(); - - // TODO dispatch event here - // appDelegateModule.MyAppDelegate.onSetActiveDocument(); + this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util } NJevent("switchDocument"); - } }, - refreshCodeDocument:{ - value:function(doc){ - - } - }, - addCodeDocument:{ - value:function(doc){ - var type; - switch(doc.documentType) { - case "css" : - type = "css"; - break; - case "js" : - type = "javascript"; - break; - } - - var codeM = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: true, - mode: type, - onCursorActivity: function() { - //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null); - //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline"); - } - }); + /** + * Public method + * Switches between different views of a design document, like HTML design view, HTML code view + */ + switchDesignDocViews: { + value: function() { + //TODO } }, - hideCodeDocument:{ - value:function(docUuid){ - //hide the previous Codemirror div - } - }, hideOtherDocuments:{ value:function(docUuid){ this.application.ninja.documentController._documents.forEach(function(aDoc){ @@ -226,51 +155,12 @@ exports.StageView = Montage.create(Component, { value:function(){ this.application.ninja.rulerTop.style.display = "block"; this.application.ninja.rulerLeft.style.display = "block"; -// this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')"; -// this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')"; } }, hideRulers:{ value:function(){ this.application.ninja.rulerTop.style.display = "none"; this.application.ninja.rulerLeft.style.display = "none"; -// this.application.ninja.rulerTop.style.background = "rgb(128,128,128)"; -// this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)"; - } - }, - - switchViews: { - value: function() { - - //save file if dirty - - this.application.ninja.stage.saveStageScroll(); - this.application.ninja.documentController._hideCurrentDocument(); - - if(this.application.ninja.documentController.activeDocument.currentView === "design") { - this.application.ninja.documentController._textHolder.style.display = "none"; - this.application.ninja.documentController.activeDocument.container.style["display"] = "block"; - this.application.ninja.stage._scrollFlag = true; - //this._showCurrentDocument(); - this.application.ninja.stage.applySavedScroll(); - - } else { - this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe - - var codeview = this.application.ninja.documentController.activeDocument.container; - //this._textHolder.style.display = "block"; - //codeview.firstChild.innerHTML = this.activeDocument.iframe.contentWindow.document.body.parentNode.innerHTML; - -// this._codeEditor.editor = CodeMirror.fromTextArea(codeview.firstChild, { -// lineNumbers: true, -// mode: "htmlmixed", -// onCursorActivity: function() { -// DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.hline, null); -// DocumentController._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(DocumentController._codeEditor.editor.getCursor().line, "activeline"); -// } -// }); -// this._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(0, "activeline"); - } } } }); \ No newline at end of file -- cgit v1.2.3