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 238586be0df568c6804268d97bf9d3ef7cd33fda Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 26 Apr 2012 15:33:48 -0700 Subject: Simplifying the getElement method from stage and adding an exclusion list to the new template Signed-off-by: Valerio Virgillito --- js/stage/stage.reel/stage.js | 73 +++++++++++++++++++++----------------------- 1 file changed, 35 insertions(+), 38 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 8382135d..fb7abf48 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -521,62 +521,59 @@ exports.Stage = Montage.create(Component, { }, /** - * GetSelectableElement: Returns a selectable object (direct child of current container) at clicked point + * GetElement: Returns the element or selectable element under the X,Y coordinates passed as an obj with x,y * - * @param: X,Y - * @return: Returns the current container if the the X,Y hits an element in the exclusion list + * @param position: mouse event + * @param selectable (default == null) if true this will return the current container element + * @return: Returns the element or container or null if the the X,Y hits the exclusion list and tool cannot operate on stage */ - GetSelectableElement: { - value: function(pos) { - var item = this.GetElement(pos); - if(this.application.ninja.currentDocument.inExclusion(item) !== -1) { - return this.application.ninja.currentSelectedContainer; + getElement: { + value: function(position, selectable) { + var point, element; + + point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY)); + element = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); + + // workaround Chrome 3d bug + if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(element) !== -1) { + element = this.getElementUsingSnapping(point); } - var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; - if(item.parentNode.uuid === activeContainerId) { - return item; - } else { - var outerElement = item.parentNode; - while(outerElement.parentNode && outerElement.parentNode.uuid !== activeContainerId) { - // If element is higher up than current container then return - if(outerElement.id === "UserContent") return; - // else keep going up the chain - outerElement = outerElement.parentNode; + if(selectable) { + + if(this.application.ninja.currentDocument.inExclusion(element) !== -1) { + return this.application.ninja.currentSelectedContainer; } - return outerElement; - } - } - }, + var activeContainerId = this.application.ninja.currentSelectedContainer.uuid; + if(element.parentNode.uuid === activeContainerId) { + return element; + } else { + var outerElement = element.parentNode; - /** - * GetElement: Returns the object under the X,Y coordinates passed as an obj with x,y - * - * @param: X,Y - * @return: Returns the Object or null if the the X,Y hits the exclusion list and tool cannot operate on stage - */ - GetElement: { - value: function(pos) { - var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)), - elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); + while(outerElement.parentNode && outerElement.parentNode.uuid !== activeContainerId) { + // If element is higher up than current container then return + if(outerElement.id === "UserContent") return; + // else keep going up the chain + outerElement = outerElement.parentNode; + } + + return outerElement; + } - // workaround Chrome 3d bug - if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(elt) !== -1) { - return this._getElementUsingSnapping(point); } else { - return elt; + return element; } } }, /** - * _getElementUsingSnapping: Returns the object at point using snap manager + * getElementUsingSnapping: Returns the object at point using snap manager * * @param: point * @return: Returns the Object in the user document under the point */ - _getElementUsingSnapping: { + getElementUsingSnapping: { value: function(point) { this.stageDeps.snapManager.enableElementSnap( true ); var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true); -- cgit v1.2.3 From bcfb200482c26b2bfc0d6577b1eb0de7a19a6762 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 26 Apr 2012 16:23:59 -0700 Subject: Removing all "module" declarations and replaced with "prototype" in preparation for montage converting to the new "prototype" format fully --- js/stage/stage-view.reel/stage-view.html | 5 ++--- js/stage/stage.reel/stage.html | 17 ++++++----------- 2 files changed, 8 insertions(+), 14 deletions(-) (limited to 'js/stage') diff --git a/js/stage/stage-view.reel/stage-view.html b/js/stage/stage-view.reel/stage-view.html index ee8fa315..3680e8b5 100755 --- a/js/stage/stage-view.reel/stage-view.html +++ b/js/stage/stage-view.reel/stage-view.html @@ -1,4 +1,4 @@ - +