From 87e247e74040b5e80ff40003d233d5317881102a Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 2 Feb 2012 03:30:54 -0800 Subject: fixed code view container, and switching code view Signed-off-by: Ananya Sen --- js/io/document/base-document.js | 8 +-- js/io/document/document-controller.js | 54 ++++++----------- js/io/document/html-document.js | 12 ++++ js/io/document/text-document.js | 10 +++- js/io/system/coreioapi.js | 1 - js/stage/stage-view.reel/stage-view.js | 103 +++++++++++++++++++-------------- 6 files changed, 97 insertions(+), 91 deletions(-) (limited to 'js') diff --git a/js/io/document/base-document.js b/js/io/document/base-document.js index af96c851..d3601de5 100755 --- a/js/io/document/base-document.js +++ b/js/io/document/base-document.js @@ -12,7 +12,6 @@ var BaseDocument = exports.BaseDocument = Montage.create(Montage, { /** Private Members **/ _name: { value: null, enumerable: false }, _uri: { value: null, enumerable: false }, - _externalUri: {value: null, enumerable:false}, _documentType: { value: null, enumerable: false }, _container: {value: null, enumerable: false }, _uuid: { value: null, enumerable: false }, @@ -74,18 +73,13 @@ var BaseDocument = exports.BaseDocument = Montage.create(Montage, { /** Base Methods **/ init: { - value: function(name, uri, type, container, uuid, callback, externalUri) { + value: function(name, uri, type, container, uuid, callback) { this.name = name; this.uri = uri; this.documentType = type; this.container = container; this.uuid = uuid; this.callback = callback; - if(!!externalUri){ - this.externalUri = externalUri; - this.container.setAttribute("data-uri", externalUri); - } - } }, diff --git a/js/io/document/document-controller.js b/js/io/document/document-controller.js index 7fe94c12..9be40ccc 100755 --- a/js/io/document/document-controller.js +++ b/js/io/document/document-controller.js @@ -112,7 +112,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component, if(uri.indexOf('.') != -1){ fileType = uri.substr(uri.lastIndexOf('.') + 1); } - this.openDocument({"type": ""+fileType, "name": ""+filename, "source": fileContent, "externalUri": uri}); + this.openDocument({"type": ""+fileType, "name": ""+filename, "source": fileContent, "uri": uri}); } } @@ -141,7 +141,9 @@ var DocumentController = exports.DocumentController = Montage.create(Component, newDoc = Montage.create(TextDocument, { "source": { value: doc.source } }); - newDoc.initialize(doc, Uuid.generate(), this._createTextAreaElement()); + var docUuid = Uuid.generate(); + var textArea = this.application.ninja.stage.stageView.createTextAreaElement(docUuid); + newDoc.initialize(doc, docUuid, textArea, textArea.parentNode); // Tmp this will be filled with the real content newDoc.textArea.innerHTML = doc.source; //this.tmpSourceForTesting; @@ -254,19 +256,20 @@ var DocumentController = exports.DocumentController = Montage.create(Component, } else { this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe - var codeview = this._createTextAreaElement(); - 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"); + + var codeview = this.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"); } } }, @@ -409,26 +412,5 @@ var DocumentController = exports.DocumentController = Montage.create(Component, value: function() { return "userDocument_" + (this._iframeCounter++); } - }, - - /** - * Creates a text area which will contain the content of the opened text document. - */ -_createTextAreaElement: { - value: function() { - var codeMirrorDiv = document.createElement("div"); - codeMirrorDiv.id = "codeMirror_" + (this._codeMirrorCounter++); - - var textArea = document.createElement("textarea"); - textArea.id = "code"; - textArea.name = "code"; - - //codeMirrorDiv.appendChild(textArea); - -// if(!this._textHolder) this._textHolder = document.getElementById("codeViewContainer"); -// this._textHolder.appendChild(codeMirrorDiv); - - return textArea; - } } }); \ No newline at end of file diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js index c44dfe75..fc7dd05b 100755 --- a/js/io/document/html-document.js +++ b/js/io/document/html-document.js @@ -36,6 +36,13 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base _zoomFactor: { value: 100, enumerable: false }, + _codeEditor: { + value: { + "editor": { value: null, enumerable: false }, + "hline": { value: null, enumerable: false } + } + }, + // PUBLIC MEMBERS cssLoadInterval: { value: null, enumerable: false }, @@ -44,6 +51,11 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base */ // GETTERS / SETTERS + editor: { + get: function() { return this._codeEditor.editor; }, + set: function(value) { this._codeEditor.editor = value} + }, + selectionExclude: { get: function() { return this._selectionExclude; }, set: function(value) { this._selectionExclude = value; } diff --git a/js/io/document/text-document.js b/js/io/document/text-document.js index a9081cb5..156aaacb 100755 --- a/js/io/document/text-document.js +++ b/js/io/document/text-document.js @@ -17,6 +17,8 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base } }, + _textArea: {value: null, enumerable: false }, + _source: { value: null, enumerable: false}, source: { @@ -31,6 +33,10 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base // GETTERS / SETTERS + textArea: { + get: function() { return this._textArea; }, + set: function(value) { this._textArea = value; } + }, editor: { get: function() { return this._codeEditor.editor; }, set: function(value) { this._codeEditor.editor = value} @@ -44,8 +50,8 @@ var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.Base // PUBLIC METHODS initialize: { - value: function(doc, uuid, textArea, callback) { - this.init(doc.name, doc.uri, doc.type, textArea, uuid, null, doc.externalUri); + value: function(doc, uuid, textArea, container, callback) { + this.init(doc.name, doc.uri, doc.type, container, uuid); this.currentView = "code"; this.textArea = textArea; diff --git a/js/io/system/coreioapi.js b/js/io/system/coreioapi.js index 3a007028..717606b5 100755 --- a/js/io/system/coreioapi.js +++ b/js/io/system/coreioapi.js @@ -926,7 +926,6 @@ exports.CoreIoApi = Montage.create(Component, { // 204 - The file exists and response body has writable flag // 404 - the file does not exist // 500 - unknown server error occurred - //TODO:to be finalized isFileWritable:{ enumerable:true, writable:false, diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index c0b0b83e..bb77b3de 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -28,7 +28,12 @@ exports.StageView = Montage.create(Component, { templateDidLoad: { value: function() { this.eventManager.addEventListener("appLoaded", this, false); - //console.log(this.application.ninja.documentController._documents); + } + }, + + didDraw:{ + value: function() { + if(!this.application.ninja.documentController._textHolder) this.application.ninja.documentController._textHolder = this.element; } }, @@ -46,6 +51,28 @@ exports.StageView = Montage.create(Component, { } }, + /** + * Creates a text area 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"; + this.element.appendChild(codeMirrorDiv); + + var textArea = document.createElement("textarea"); + textArea.id = "code"; + textArea.name = "code"; + + codeMirrorDiv.appendChild(textArea); + + return textArea; + } + }, + // Temporary function to create a Codemirror text view createTextView: { value: function(doc) { @@ -58,8 +85,6 @@ 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.activeDocument = doc; - this.element.appendChild(doc.textArea); - var type; switch(doc.documentType) { @@ -71,13 +96,16 @@ exports.StageView = Montage.create(Component, { break; } - //remove any previous Codemirror div - var codemirrorDiv = this.element.querySelector(".CodeMirror"); - if(!!codemirrorDiv){ - codemirrorDiv.parentNode.removeChild(codemirrorDiv); - } + //hide other Codemirror divs + this.hideOtherCodeView(doc.uuid); - var codeM = CodeMirror.fromTextArea(doc.textArea, { + + //fix hack + document.getElementById("codeMirror_"+doc.uuid).style.display="block"; + + + + doc.editor = CodeMirror.fromTextArea(doc.textArea, { lineNumbers: true, mode: type, onCursorActivity: function() { @@ -95,6 +123,11 @@ exports.StageView = Montage.create(Component, { switchCodeView:{ value: function(doc){ + + //if dirty SAVE codemirror into textarea + //doc.editor.save(); + + var documentController = this.application.ninja.documentController; this.application.ninja.documentController._hideCurrentDocument(); @@ -102,36 +135,7 @@ exports.StageView = Montage.create(Component, { this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe - - - //remove any previous Codemirror div - var codemirrorDiv = this.element.querySelector(".CodeMirror"); - if(!!codemirrorDiv){ - codemirrorDiv.parentNode.removeChild(codemirrorDiv); - } - - 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"); - } - }); - - //this.application.ninja.documentController._codeEditor.hline = this.application.ninja.documentController._codeEditor.editor.setLineClass(0, "activeline"); - + this.application.ninja.documentController._showCurrentDocument(); } }, refreshCodeDocument:{ @@ -161,12 +165,21 @@ exports.StageView = Montage.create(Component, { }); } }, - removeCodeDocument:{ - value:function(){ - //remove any previous Codemirror div - var codemirrorDiv = this.element.querySelector(".CodeMirror"); - if(!!codemirrorDiv){ - codemirrorDiv.parentNode.removeChild(codemirrorDiv); + hideCodeDocument:{ + value:function(docUuid){ + //hide the previous Codemirror div + + } + }, + hideOtherCodeView:{ + value:function(docUuid){ + var i=0; + if(this.element.hasChildNodes()){ + for(i=0;i