From 1daf146c849a0a8dbd2b61b14218c9a39bdee3a7 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 3 Feb 2012 17:22:48 -0800 Subject: added editor tab save while switching code view tabs, integrated new file dialog with io mediator to open the new file in a new tab Signed-off-by: Ananya Sen --- .../layout/document-entry.reel/document-entry.js | 2 +- js/io/document/base-document.js | 7 +- js/io/document/document-controller.js | 41 +++++++-- js/io/document/html-document.js | 28 +++++++ js/io/document/text-document.js | 16 ++++ js/io/system/coreioapi.js | 1 + js/io/system/projectio.js | 2 +- .../new-file-options-navigator.js | 5 +- js/mediators/io-mediator.js | 9 +- js/ninja.reel/ninja.html | 8 +- js/stage/stage-view.reel/stage-view.css | 2 +- js/stage/stage-view.reel/stage-view.js | 96 +++++++++------------- 12 files changed, 147 insertions(+), 70 deletions(-) diff --git a/js/components/layout/document-entry.reel/document-entry.js b/js/components/layout/document-entry.reel/document-entry.js index 1431e76f..2a33548a 100755 --- a/js/components/layout/document-entry.reel/document-entry.js +++ b/js/components/layout/document-entry.reel/document-entry.js @@ -101,7 +101,7 @@ exports.DocumentEntry = Montage.create(Component, { this.application.ninja.documentController.closeDocument(this._uuid); } else { if(!this._document.isActive) { - this.application.ninja.stage.stageView.switchCodeView(this.application.ninja.documentController._findDocumentByUUID(this._uuid)); + this.application.ninja.stage.stageView.switchDocument(this.application.ninja.documentController._findDocumentByUUID(this._uuid)); } } } diff --git a/js/io/document/base-document.js b/js/io/document/base-document.js index d3601de5..ecc92447 100755 --- a/js/io/document/base-document.js +++ b/js/io/document/base-document.js @@ -87,7 +87,12 @@ var BaseDocument = exports.BaseDocument = Montage.create(Montage, { value: function() { // Have the XHR here? } - } + }, + save:{ + value:function(){ + //base function - to be overridden + } + } }); \ No newline at end of file diff --git a/js/io/document/document-controller.js b/js/io/document/document-controller.js index 7cc0eeeb..b900dee4 100755 --- a/js/io/document/document-controller.js +++ b/js/io/document/document-controller.js @@ -103,7 +103,32 @@ var DocumentController = exports.DocumentController = Montage.create(Component, createNewFile:{ value:function(newFileObj){ - //console.log(newFileObj); + //console.log(newFileObj);//contains the template uri and the new file uri + if(!newFileObj) return; + this.application.ninja.ioMediator.fileNew(newFileObj.newFilePath, newFileObj.fileTemplateUri, this.openNewFile, this); + + if((newFileObj.fileExtension !== ".html") && (newFileObj.fileExtension !== ".htm")){//open code view + + }else{ + //open design view + } + } + }, + + /** + * Public method + * doc contains: + * type : file type, like js, css, etc + * name : file name + * source : file content + * uri : file uri + */ + openNewFile:{ + value:function(doc){ + if(!doc){ + doc = {"type": "js", "name": "filename", "source": "test file content", "uri": "/fs/fsd/"} ; + } + this.openDocument(doc); } }, @@ -160,7 +185,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, newDoc.initialize(doc, docUuid, textArea, textArea.parentNode); // Tmp this will be filled with the real content - newDoc.textArea.innerHTML = doc.source; //this.tmpSourceForTesting; + newDoc.textArea.value = doc.source; //this.tmpSourceForTesting; this.textDocumentOpened(newDoc); @@ -175,7 +200,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, textDocumentOpened: { value: function(doc) { - this.activeDocument = doc; + this.application.ninja.stage.stageView.createTextView(doc); @@ -377,7 +402,10 @@ var DocumentController = exports.DocumentController = Montage.create(Component, value: function() { if(this.activeDocument) { this.activeDocument.container.style["display"] = "none"; - //if(this.activeDocument.documentType === "htm" || this.activeDocument.documentType === "html") this.application.ninja.stage.toggleCanvas(); + if(this.activeDocument.currentView === "design" || this.activeDocument.currentView === "design"){ + this.activeDocument.container.parentNode.style["display"] = "none"; + this.application.ninja.stage.hideCanvas(true); + } } } }, @@ -386,7 +414,10 @@ var DocumentController = exports.DocumentController = Montage.create(Component, value: function() { if(this.activeDocument) { this.activeDocument.container.style["display"] = "block"; - //if(this.activeDocument.documentType === "htm" || this.activeDocument.documentType === "html") this.application.ninja.stage.toggleCanvas(); + if(this.activeDocument.currentView === "design" || this.activeDocument.currentView === "design"){ + this.activeDocument.container.parentNode.style["display"] = "block"; + this.application.ninja.stage.hideCanvas(false); + } } } }, diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js index fc7dd05b..24d4e7e4 100755 --- a/js/io/document/html-document.js +++ b/js/io/document/html-document.js @@ -43,9 +43,16 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base } }, + // PUBLIC MEMBERS cssLoadInterval: { value: null, enumerable: false }, + codeViewDocument:{ + writable: true, + enumerable: true, + value:null + }, + /* * PUBLIC API */ @@ -432,5 +439,26 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base */ } } + }, + + /** + * public method + * parameter: + * removeCodeMirrorDivFlag - for code view, tell to remove the codemirror div after saving + */ + save:{ + value:function(removeCodeMirrorDivFlag){ + if(this.currentView === "design"){ + //generate html and save + }else if((this.currentView === "code") && (this.codeViewDocument !== null)){ + if(removeCodeMirrorDivFlag === true){ + this.codeViewDocument.save(true); + }else{ + this.codeViewDocument.save(); + } + //persist to filesystem + } + + } } }); \ No newline at end of file diff --git a/js/io/document/text-document.js b/js/io/document/text-document.js index 156aaacb..a768779f 100755 --- a/js/io/document/text-document.js +++ b/js/io/document/text-document.js @@ -85,6 +85,22 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base xhr.send(''); } + }, + + /** + * public method + * parameter: + * removeCodeMirrorDivFlag - for code view, tell to remove the codemirror div after saving + */ + save:{ + value:function(removeCodeMirrorDivFlag){ + this.editor.save(); + if(removeCodeMirrorDivFlag === true){ + var codemirrorDiv = this.textArea.parentNode.querySelector(".CodeMirror"); + if(!!codemirrorDiv){codemirrorDiv.parentNode.removeChild(codemirrorDiv);} + } + //persist to filesystem + } } }); \ No newline at end of file diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js index 5379cbfc..115fbf64 100755 --- a/js/io/system/coreioapi.js +++ b/js/io/system/coreioapi.js @@ -1064,6 +1064,7 @@ exports.CoreIoApi = Montage.create(Component, { /*** * checks for valid uri pattern * also flags if Windows uri pattern and Unix uri patterns are mixed + * Todo: need to augment when files can be accessed via other protocols like http, ftp, ssh, etc. */ isValidUri:{ value: function(uri){ diff --git a/js/io/system/projectio.js b/js/io/system/projectio.js index ad4cf151..8e3230d7 100755 --- a/js/io/system/projectio.js +++ b/js/io/system/projectio.js @@ -10,7 +10,7 @@ var Montage = require("montage/core/core").Montage, FileIo = require("js/io/system/fileio").FileIo; //////////////////////////////////////////////////////////////////////// // -exports.ProjectIo = = Montage.create(Object.prototype, { +exports.ProjectIo = Montage.create(Object.prototype, { //////////////////////////////////////////////////////////////////// // newProject: { diff --git a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js index 6f8a9ee7..2f148621 100644 --- a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js +++ b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js @@ -231,12 +231,13 @@ var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(C //console.log("$$$ new file selections: \n" + selectionlog); if(!!this.newFileModel.callback && !!this.newFileModel.callbackScope){//inform document-controller if save successful this.newFileModel.callback.call(this.newFileModel.callbackScope, {"fileTemplateUri":selectedProjectTypeID, - "newFilePath":newFilePath});//document-controller api + "newFilePath":newFilePath, + "fileExtension":fileExtension});//document-controller api }else{ //send selection event var newFileSelectionEvent = document.createEvent("Events"); newFileSelectionEvent.initEvent("createNewFile", false, false); - newFileSelectionEvent.newFileOptions = {"fileTemplateUri":selectedProjectTypeID, "newFilePath":newFilePath}; + newFileSelectionEvent.newFileOptions = {"fileTemplateUri":selectedProjectTypeID, "newFilePath":newFilePath,"fileExtension":fileExtension}; this.eventManager.dispatchEvent(newFileSelectionEvent); } //store last selected project type diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js index 8d0a671e..3d75771f 100644 --- a/js/mediators/io-mediator.js +++ b/js/mediators/io-mediator.js @@ -11,14 +11,17 @@ var Montage = require("montage/core/core").Montage, ProjectIo = require("js/io/system/projectio").ProjectIo; //////////////////////////////////////////////////////////////////////// // -exports.IoMediator = Montage.create(Object.prototype, { +exports.IoMediator = Montage.create(require("montage/ui/component").Component, { //////////////////////////////////////////////////////////////////// // fileNew: { enumerable: false, - value: function (file, template, callback) { + value: function (file, template, callback, callbackScope) { // - + + + var returnObj = null; //like {"type": "js", "name": "filename", "source": "test file content", "uri": "/fs/fsd/"} + callback.call(callbackScope, returnObj); } }, //////////////////////////////////////////////////////////////////// diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index 0f23a18f..37c269e0 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -216,6 +216,11 @@ "name": "ElementMediator" }, + "ioMediator": { + "module": "js/mediators/io-mediator", + "name": "IoMediator" + }, + "undocontroller1": { "module": "js/controllers/undo-controller", "name": "UndoController" @@ -285,7 +290,8 @@ "filePickerController": {"@": "filePickerController"}, "newFileController": {"@": "newFileController"}, "coreIoApi": {"@": "coreIoApi1"}, - "documentBar": {"@": "documentBar"} + "documentBar": {"@": "documentBar"}, + "ioMediator": {"@": "ioMediator"} } } diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css index f15f74a0..f00a5f8a 100755 --- a/js/stage/stage-view.reel/stage-view.css +++ b/js/stage/stage-view.reel/stage-view.css @@ -10,7 +10,7 @@ left: 0px; margin: 0px; padding: 0px; - background: black; + background-color: #ffffff; width: 100%; height: 100%; /*display: none;*/ diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index d8e1e46b..cf7748fc 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -76,17 +76,13 @@ exports.StageView = Montage.create(Component, { // Temporary function to create a Codemirror text view createTextView: { value: function(doc) { - var documentController = this.application.ninja.documentController; - + //save current document + if(this.application.ninja.documentController.activeDocument.currentView === "code"){ + this.application.ninja.documentController.activeDocument.save(true); + } this.application.ninja.documentController._hideCurrentDocument(); - - this.application.ninja.currentDocument.container.parentNode.style["display"] = "none"; - - this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe - this.application.ninja.documentController.activeDocument = doc; - + this.hideOtherDocuments(doc.uuid); var type; - switch(doc.documentType) { case "css" : type = "css"; @@ -96,15 +92,9 @@ exports.StageView = Montage.create(Component, { break; } - //hide other Codemirror divs - this.hideOtherCodeView(doc.uuid); - - //fix hack document.getElementById("codeMirror_"+doc.uuid).style.display="block"; - - doc.editor = CodeMirror.fromTextArea(doc.textArea, { lineNumbers: true, mode: type, @@ -115,25 +105,20 @@ exports.StageView = Montage.create(Component, { }); //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline"); - - this.application.ninja.stage.hideCanvas(true); - + 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); } }, - switchCodeView:{ + switchDocument:{ value: function(doc){ //if dirty SAVE codemirror into textarea - //this.application.ninja.documentController.activeDocument.editor.save(); - - //remove the codemirror div - var codemirrorDiv = this.application.ninja.documentController.activeDocument.container.querySelector(".CodeMirror"); - if(!!codemirrorDiv){ - codemirrorDiv.parentNode.removeChild(codemirrorDiv); - this.application.ninja.documentController.activeDocument.editor = null; + if(this.application.ninja.documentController.activeDocument.currentView === "code"){ + this.application.ninja.documentController.activeDocument.save(true); } this.application.ninja.documentController._hideCurrentDocument(); @@ -143,28 +128,29 @@ 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(); - var type; - switch(doc.documentType) { - case "css" : - type = "css"; - break; - case "js" : - type = "javascript"; - break; - } - - //add the codemirror div again for editting - doc.editor = 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"); - } - }); - - //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline"); + if(this.application.ninja.documentController.activeDocument.currentView === "code"){ + var type; + switch(doc.documentType) { + case "css" : + type = "css"; + break; + case "js" : + type = "javascript"; + break; + } + //add the codemirror div again for editting + doc.editor = 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"); + } + }); + + //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline"); + } } }, @@ -201,16 +187,16 @@ exports.StageView = Montage.create(Component, { } }, - hideOtherCodeView:{ + hideOtherDocuments:{ value:function(docUuid){ - var i=0; - if(this.element.hasChildNodes()){ - for(i=0;i