From 0d83ad4dc08448e016c79ae739e84c3d71552b56 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 27 Mar 2012 17:19:18 -0700 Subject: - Highlight Matching bracket - Highlight selection matched -Highlight current line Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index ad67cada..66a18964 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -93,23 +93,27 @@ exports.StageView = Montage.create(Component, { var documentController = this.application.ninja.documentController; doc.editor = CodeMirror.fromTextArea(doc.textArea, { - lineNumbers: 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() { - //documentController._codeEditor.editor.setLineClass(documentController._codeEditor.hline, null); - //documentController._codeEditor.hline = documentController._codeEditor.editor.setLineClass(documentController._codeEditor.editor.getCursor().line, "activeline"); + 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); + doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); + } }); - //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline"); + 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); -- cgit v1.2.3 From 4b1b72971567ea569a10c740e26aee33421e7bd5 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 3 Apr 2012 15:07:33 -0700 Subject: adding basic autocomplete Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index bee12838..28a66396 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -109,7 +109,11 @@ exports.StageView = Montage.create(Component, { doc.editor.matchHighlight("CodeMirror-matchhighlight"); doc.editor.setLineClass(doc.editor.hline, null); doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); - } + }, + extraKeys: {"Ctrl-Space": function(cm) { + CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); + } + } }); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); -- cgit v1.2.3 From e5dc1a5f35c2c6f3273e89109f1be445471b2dec Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 4 Apr 2012 12:19:08 -0700 Subject: -styled the autocomplete dropdown - trigger autocomplete automatically Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 28a66396..43751559 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -110,10 +110,19 @@ exports.StageView = Montage.create(Component, { doc.editor.setLineClass(doc.editor.hline, null); doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); }, - extraKeys: {"Ctrl-Space": function(cm) { - CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); - } - } + //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 + ) + ){ + + CodeMirror.simpleHint(cm, CodeMirror.javascriptHint); + } + } }); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); -- cgit v1.2.3 From bec4cde986975d1cc5f1d2791fdb18548fc2d72a Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 4 Apr 2012 13:17:45 -0700 Subject: - fix for current line highlighting for version 2.23 - changes to not show autocomplete dropdown for brackets Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 43751559..917cbeb5 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -107,8 +107,8 @@ exports.StageView = Montage.create(Component, { }, onCursorActivity: function() { doc.editor.matchHighlight("CodeMirror-matchhighlight"); - doc.editor.setLineClass(doc.editor.hline, null); - doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, "activeline"); + 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) { @@ -117,7 +117,14 @@ exports.StageView = Montage.create(Component, { || (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); -- cgit v1.2.3 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 From 6ffda1a7ebe18adb518eb24a612df22305b050a6 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 9 Apr 2012 17:15:41 -0700 Subject: - added configurability of code completion with the file type - added logic to toggle between automatic code completion and manually triggered code completion [ UI pending ] Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 5 +++++ 1 file changed, 5 insertions(+) (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 372af144..a7e255ae 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -37,3 +37,8 @@ /*}*/ +span.CodeMirror-matchhighlight { background: #e9e9e9 } +.CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } +.activeline {background: #e8f2ff !important;} +div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} +.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 -- cgit v1.2.3 From c2ec390d42945d2df1aed3f2b7ff3d1aa722fce8 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 13 Apr 2012 16:51:50 -0700 Subject: - code editor view options bar - Checkbox for user to toggle between manually triggered autocomplete and automatic autocomplete - font zoom hottext Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index bfbee2b6..c06ad988 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -94,6 +94,10 @@ exports.StageView = Montage.create(Component, { doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); + this.showCodeViewBar(true); + + this.application.ninja.codeEditorController.handleCodeCompletionSupport(type); + 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); @@ -112,6 +116,11 @@ exports.StageView = Montage.create(Component, { if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.currentDocument = this.application.ninja.documentController.activeDocument; + + this.showCodeViewBar(false); + }else{ + this.showCodeViewBar(true); + this.application.ninja.codeEditorController.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.editor.getOption("mode")); } this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe @@ -162,5 +171,16 @@ exports.StageView = Montage.create(Component, { this.application.ninja.rulerTop.style.display = "none"; this.application.ninja.rulerLeft.style.display = "none"; } + }, + showCodeViewBar:{ + value:function(isCodeView){ + if(isCodeView === true) { + this.application.ninja.editorViewOptions.element.style.display = "block"; + this.application.ninja.documentBar.element.style.display = "none"; + }else{ + this.application.ninja.documentBar.element.style.display = "block"; + this.application.ninja.editorViewOptions.element.style.display = "none"; + } + } } }); \ No newline at end of file -- cgit v1.2.3 From ea4385add0e9087487ccded929c2d6674d326db8 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 18 Apr 2012 00:29:52 -0700 Subject: - collapse panels for code view, restore for design view - apply theme selection to all code view documents Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index c06ad988..bc8b469c 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -102,6 +102,7 @@ exports.StageView = Montage.create(Component, { 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 + this.collapseAllPanels(); } }, @@ -128,11 +129,14 @@ exports.StageView = Montage.create(Component, { //focus editor if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){ this.application.ninja.documentController.activeDocument.editor.focus(); + this.application.ninja.codeEditorController.handleThemeSelection(); + this.collapseAllPanels(); } if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util + this.restoreAllPanels(); } NJevent("switchDocument"); @@ -182,5 +186,22 @@ exports.StageView = Montage.create(Component, { this.application.ninja.editorViewOptions.element.style.display = "none"; } } + }, + + collapseAllPanels:{ + value:function(){ + this.application.ninja.panelSplitter.collapse(); + this.application.ninja.timelineSplitter.collapse(); + this.application.ninja.toolsSplitter.collapse(); + this.application.ninja.optionsSplitter.collapse(); + } + }, + restoreAllPanels:{ + value:function(){ + this.application.ninja.panelSplitter.restore(); + this.application.ninja.timelineSplitter.restore(); + this.application.ninja.toolsSplitter.restore(); + this.application.ninja.optionsSplitter.restore(); + } } }); \ No newline at end of file -- cgit v1.2.3 From 8cd6c76aabb4c75ab63f8d46b7e89bddbcbfe2a7 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 19 Apr 2012 10:38:43 -0700 Subject: - fixed the text cursor - code cleanup Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 2 +- js/stage/stage-view.reel/stage-view.js | 18 ++++++++---------- 2 files changed, 9 insertions(+), 11 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 a7e255ae..4cf5b2ab 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -14,7 +14,7 @@ width: 100%; height: 100%; overflow:auto; - /*display: none;*/ + cursor:text; } /* OLD CSS for reference diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index bc8b469c..53eff90e 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -94,14 +94,13 @@ exports.StageView = Montage.create(Component, { doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); - this.showCodeViewBar(true); - - this.application.ninja.codeEditorController.handleCodeCompletionSupport(type); - 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 + + this.showCodeViewBar(true); + this.application.ninja.codeEditorController.applySettings(); this.collapseAllPanels(); } }, @@ -117,11 +116,6 @@ exports.StageView = Montage.create(Component, { if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.currentDocument = this.application.ninja.documentController.activeDocument; - - this.showCodeViewBar(false); - }else{ - this.showCodeViewBar(true); - this.application.ninja.codeEditorController.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.editor.getOption("mode")); } this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe @@ -129,13 +123,17 @@ exports.StageView = Montage.create(Component, { //focus editor if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){ this.application.ninja.documentController.activeDocument.editor.focus(); - this.application.ninja.codeEditorController.handleThemeSelection(); + + this.showCodeViewBar(true); + this.application.ninja.codeEditorController.applySettings(); this.collapseAllPanels(); } if(this.application.ninja.documentController.activeDocument.currentView === "design") { this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe this.application.ninja.stage.stageDeps.reinitializeForSwitchDocument();//reinitialize draw-util, snapmanager and view-util + + this.showCodeViewBar(false); this.restoreAllPanels(); } -- cgit v1.2.3 From 2fafe26f74f342388b97960e7a58e3f45d8d961f Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 20 Apr 2012 13:07:26 -0700 Subject: set editor background color as per the selected theme Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 53eff90e..53c6125b 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -201,5 +201,11 @@ exports.StageView = Montage.create(Component, { this.application.ninja.toolsSplitter.restore(); this.application.ninja.optionsSplitter.restore(); } + }, + + applyTheme:{ + value:function(themeClass){ + this.element.className = "codeViewContainer "+themeClass; + } } }); \ No newline at end of file -- cgit v1.2.3 From c3a0bdb0af1db149efb86b1a8f6b14cb695831cf Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 23 Apr 2012 12:33:24 -0700 Subject: fixed ugly scroll coming in the middle of the page for a short file Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 4 ++++ 1 file changed, 4 insertions(+) (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 4cf5b2ab..2fc8fd15 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -17,6 +17,10 @@ cursor:text; } +.codeViewContainer>div{ + width:2050px;/*to prevent scrolling of editor container in the middle of the page for short files*/ +} + /* OLD CSS for reference #mainContent #codeMirror_1 { height:100%; -- cgit v1.2.3 From 46c3c16d0a7c737a2669b1684cdb1ede74a628c0 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 23 Apr 2012 13:03:07 -0700 Subject: IKNINJA-1528 : temporarily disabling active line color for this Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 2fc8fd15..b86c197a 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -43,6 +43,6 @@ span.CodeMirror-matchhighlight { background: #e9e9e9 } .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } -.activeline {background: #e8f2ff !important;} +/*.activeline {background: #e8f2ff !important;}*/ div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} .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 -- cgit v1.2.3 From a7548b4c53de8f42cb5e0fb1c054eba6f7c45afb Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Tue, 24 Apr 2012 16:45:47 -0700 Subject: IKNINJA-1529 : zooming such that cursor position can be calculated accurately Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 b86c197a..10f80476 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -18,7 +18,7 @@ } .codeViewContainer>div{ - width:2050px;/*to prevent scrolling of editor container in the middle of the page for short files*/ + width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ } /* OLD CSS for reference -- cgit v1.2.3 From b680af490b9736d16ed491c999af3f06d78a7d18 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 26 Apr 2012 12:26:31 -0700 Subject: IKNINJA-1551 - added editor support for other file types Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index 53c6125b..dcc84a35 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -88,6 +88,27 @@ exports.StageView = Montage.create(Component, { case "js" : type = "javascript"; break; + case "html" : + type = "htmlmixed"; + break; + case "json" : + type = "javascript"; + break; + case "php" : + type = "php"; + break; + case "pl" : + type = "perl"; + break; + case "py" : + type = "python"; + break; + case "rb" : + type = "ruby"; + break; + case "xml" : + type = "xml"; + break; } document.getElementById("codeMirror_"+doc.uuid).style.display="block"; -- cgit v1.2.3 From 7aee2bd02218d9572ac1c00f191d08efe57f5bcb Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 26 Apr 2012 14:28:36 -0700 Subject: increasing z-indem of code hinting dropdown to appear above the disabled panels Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (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 10f80476..eb7aa23f 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -45,4 +45,5 @@ span.CodeMirror-matchhighlight { background: #e9e9e9 } .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } /*.activeline {background: #e8f2ff !important;}*/ div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} -.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 +.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);} +.CodeMirror-completions {z-index:6001 !important;} -- cgit v1.2.3 From aa35d31fa94f844586581c770913858bd15af505 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 30 Apr 2012 11:23:33 -0700 Subject: IKNINJA-1537 - don't show code hinting for ctrl+S IKNINJA-1568 - code hinting not supported for son files Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index dcc84a35..518c3bdd 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -112,7 +112,7 @@ exports.StageView = Montage.create(Component, { } document.getElementById("codeMirror_"+doc.uuid).style.display="block"; - doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type); + doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type, doc.documentType); doc.editor.hline = doc.editor.setLineClass(0, "activeline"); this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe -- cgit v1.2.3 From 052caf2b8e10a1e42ec1355a9bb7dd039ea01f69 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 30 Apr 2012 17:26:24 -0700 Subject: set up different activeline colors for different themes Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (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 eb7aa23f..e2c4bb0e 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -43,7 +43,17 @@ span.CodeMirror-matchhighlight { background: #e9e9e9 } .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } -/*.activeline {background: #e8f2ff !important;}*/ div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;} .CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);} .CodeMirror-completions {z-index:6001 !important;} + +.cm-s-default .activeline {background: #e8f2ff; !important} +.cm-s-eclipse .activeline {background: #e8f2ff; !important} +.cm-s-elegant .activeline {background: #e8f2ff; !important} +.cm-s-neat .activeline {background: #e8f2ff; !important} +.cm-s-night .activeline {background: #8da6ce; !important} +.cm-s-cobalt .activeline {background: #8da6ce; !important} +.cm-s-monokai .activeline {background: #8da6ce; !important} +.cm-s-rubyblue .activeline {background: #3E7087; !important} +.cm-s-lesser-dark .activeline {background: #8da6ce; !important} +.cm-s-xq-dark .activeline {background: #8da6ce; !important} \ No newline at end of file -- cgit v1.2.3 From 5a74b74e8ec76d60cadf623cabaa0b667f1c4058 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 2 May 2012 11:08:59 -0700 Subject: code cleanup Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 515165bf..a7c22a7f 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -958,8 +958,9 @@ exports.Stage = Montage.create(Component, { this.application.ninja.documentController.activeDocument.savedLeftScroll = this._iframeContainer.scrollLeft; this.application.ninja.documentController.activeDocument.savedTopScroll = this._iframeContainer.scrollTop; } - }, - restoreScroll:{ + }, + + restoreScroll:{ value: function(){ this._iframeContainer.scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll; this._scrollLeft = this.application.ninja.documentController.activeDocument.savedLeftScroll; -- cgit v1.2.3 From 2078bfa96afaef40acb4edac99848ba55e808ef1 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 15:15:21 -0700 Subject: Refactor creating elements. Removed makeNJElement and separated the model creation Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index a7c22a7f..b181dc70 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -855,6 +855,12 @@ exports.Stage = Montage.create(Component, { } }, + setStageAsViewport: { + value: function() { + this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.documentRoot); + } + }, + setZoom: { value: function(value) { if(!this._firstDraw) -- cgit v1.2.3 From f1f2e65712d7c5a163dd6fdbd8f5911555c3f377 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 3 May 2012 17:46:23 -0700 Subject: finishing to replace all id with data-montage-id Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html index 12a331c3..30c3d231 100755 --- a/js/stage/stage.reel/stage.html +++ b/js/stage/stage.reel/stage.html @@ -79,13 +79,13 @@ -
-
-
-
- - - +
+
+
+
+ + +
-- cgit v1.2.3 From c51a1317a767dcd5dfded822815305d4330f4892 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Mon, 7 May 2012 15:43:24 -0700 Subject: removed incorrect id selector css for code view container since its breaking it. Signed-off-by: Ananya Sen --- js/stage/stage-view.reel/stage-view.css | 29 ++++++++++------------------- 1 file changed, 10 insertions(+), 19 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 e2c4bb0e..8afb52a2 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -17,29 +17,20 @@ cursor:text; } -.codeViewContainer>div{ - width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ +.codeViewContainer .CodeMirror { + width: 100%; + height: 100%; + background: white; } -/* OLD CSS for reference -#mainContent #codeMirror_1 { - height:100%; +.codeViewContainer .CodeMirror-scroll { + height: 100%; + overflow: auto; } -*/ - -/*.CodeMirror {*/ - /*width: 100%;*/ - /*height: 100%;*/ - /*background: white;*/ -/*}*/ - -/*.CodeMirror .CodeMirror-scroll {*/ - /*height: 100%;*/ - /*overflow: scroll;*/ - /*overflow-x: auto;*/ - /*overflow-y: auto;*/ -/*}*/ +.codeViewContainer>div{ + width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/ +} span.CodeMirror-matchhighlight { background: #e9e9e9 } .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important } -- cgit v1.2.3