From 7a22f7b368ef549a5b30c58a0f3900685b764bdb Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Fri, 18 May 2012 16:56:16 -0700 Subject: integrated open code view document in new dom architecture Signed-off-by: Ananya Sen --- js/controllers/code-editor-controller.js | 40 ++++++++++---------- js/controllers/document-controller.js | 65 ++++++++++++-------------------- js/controllers/styles-controller.js | 2 +- 3 files changed, 44 insertions(+), 63 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js index 7913cfc1..e7163bd8 100644 --- a/js/controllers/code-editor-controller.js +++ b/js/controllers/code-editor-controller.js @@ -68,7 +68,7 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone * Creates an editor instance */ createEditor : { - value:function(doc, type, documentType){ + value:function(codeDocumentView, type, documentType, textDocument){ var self = this, editorOptions = null; editorOptions = { @@ -76,17 +76,17 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone matchBrackets:true, mode: type, onChange: function(){ - var historySize = doc.editor.historySize(); + var historySize = codeDocumentView.editor.historySize(); if(historySize.undo>0){ - doc.needsSave = true; + textDocument.model.needsSave = true; }else if(historySize.undo===0 && historySize.redo>0){ - doc.needsSave = false; + textDocument.model.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"); + codeDocumentView.editor.matchHighlight("CodeMirror-matchhighlight"); + codeDocumentView.editor.setLineClass(codeDocumentView.editor.hline, null, null); + codeDocumentView.editor.hline = codeDocumentView.editor.setLineClass(codeDocumentView.editor.getCursor().line, null, "activeline"); } }; @@ -95,9 +95,7 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone editorOptions.onKeyEvent = function(cm, keyEvent){self._codeCompletionKeyEventHandler.call(self, cm, keyEvent, documentType)}; } - var editor = self.codeEditor.fromTextArea(doc.textArea, editorOptions); - - //editor.setOption("theme", "night"); + var editor = self.codeEditor.fromTextArea(codeDocumentView.textArea, editorOptions); return editor; } @@ -215,22 +213,22 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone autoFormatSelection:{ value: function(){ - var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor); - this.application.ninja.documentController.activeDocument.editor.autoFormatRange(range.from, range.to); + var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.model.views.code.editor); + this.application.ninja.documentController.activeDocument.model.views.code.editor.autoFormatRange(range.from, range.to); } }, commentSelection:{ value: function(isComment){ - var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor); - this.application.ninja.documentController.activeDocument.editor.commentRange(isComment, range.from, range.to); + var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.model.views.code.editor); + this.application.ninja.documentController.activeDocument.model.views.code.editor.commentRange(isComment, range.from, range.to); } }, handleThemeSelection:{ value: function(){ - this.application.ninja.documentController.activeDocument.editor.setOption("theme", this.editorTheme); - this.application.ninja.stage.stageView.applyTheme("cm-s-"+this.editorTheme); + this.application.ninja.documentController.activeDocument.model.views.code.editor.setOption("theme", this.editorTheme); + this.application.ninja.documentController.activeDocument.model.views.code.applyTheme("cm-s-"+this.editorTheme); } }, @@ -238,10 +236,10 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone value:function(value){ var originalFont=13,originalLineHeight=16; this._zoomFactor = value; - this.application.ninja.documentController.activeDocument.container.style.fontSize = ""+((value/100)*originalFont)+"px"; - this.application.ninja.documentController.activeDocument.container.style.cursor = "text"; - this.application.ninja.documentController.activeDocument.container.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px"; - this.application.ninja.documentController.activeDocument.editor.refresh();//refresh editor display for xoom + this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.style.fontSize = ""+((value/100)*originalFont)+"px"; + this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.style.cursor = "text"; + this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px"; + this.application.ninja.documentController.activeDocument.model.views.code.editor.refresh();//refresh editor display for xoom } }, @@ -250,7 +248,7 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone //set theme this.handleThemeSelection(); //check autocomplete support - this.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.documentType); + this.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.model.file.extension); //set zoom this.handleZoom(this._zoomFactor); } diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js index cf46e73e..a795d652 100755 --- a/js/controllers/document-controller.js +++ b/js/controllers/document-controller.js @@ -13,7 +13,8 @@ var Montage = require("montage/core/core").Montage, TextDocument = require("js/document/text-document").TextDocument; // New Document Objects -var Document = require("js/document/document-html").HtmlDocument; +var Document_HTML = require("js/document/document-html").HtmlDocument; +var Document_Text = require("js/document/document-text").TextDocument; //////////////////////////////////////////////////////////////////////// // var DocumentController = exports.DocumentController = Montage.create(Component, { @@ -320,32 +321,30 @@ var DocumentController = exports.DocumentController = Montage.create(Component, //////////////////////////////////////////////////////////////////// openDocument: { - value: function(doc) { + value: function(file) { var template, dimensions; - if (doc.content.body.indexOf('Ninja-Banner Dimensions@@@') !== -1) { - dimensions = (doc.content.body.split('Ninja-Banner Dimensions@@@'))[1].split('-->')[0].split('x'); - dimensions = {width: parseInt(dimensions[0]), height: parseInt(dimensions[1])}; - template = {type: 'banner', size: dimensions}; - } + // TODO: HACKS to remove - this.documentHackReference = doc; + this.documentHackReference = file; document.getElementById("iframeContainer").style.overflow = "hidden"; // - switch (doc.extension) { + switch (file.extension) { case 'html': + + if (file.content.body.indexOf('Ninja-Banner Dimensions@@@') !== -1) { + dimensions = (file.content.body.split('Ninja-Banner Dimensions@@@'))[1].split('-->')[0].split('x'); + dimensions = {width: parseInt(dimensions[0]), height: parseInt(dimensions[1])}; + template = {type: 'banner', size: dimensions}; + } + //Open in designer view this._hackRootFlag = false; - Montage.create(Document).init(doc, this, this._onOpenDocument, 'design', template); + Montage.create(Document_HTML).init(file, this, this._onOpenDocument, 'design', template); break; default: - //Open in code view - var code = Montage.create(TextDocument, {"source": {value: doc.content}}), docuuid = Uuid.generate(), textArea; - textArea = this.application.ninja.stage.stageView.createTextAreaElement(docuuid); - code.initialize(doc, docuuid, textArea, textArea.parentNode); - //code.init(doc.name, doc.uri, doc.extension, null, docuuid); - code.textArea.value = doc.content; - this.application.ninja.stage.stageView.createTextView(code); - break; + //Open in code view + Montage.create(Document_Text).init(file, this, this._onOpenTextDocument, 'code'); + break; } } }, @@ -514,9 +513,10 @@ var DocumentController = exports.DocumentController = Montage.create(Component, _onOpenTextDocument: { value: function(doc) { if(this.activeDocument) { + if(this.activeDocument.currentView === "design"){ this.activeDocument.saveAppState(); - this.activeDocument.container.parentNode.style["display"] = "none"; + this.activeDocument.parentContainer.style["display"] = "none"; this.application.ninja.stage.hideCanvas(true); this.application.ninja.stage.stageView.hideRulers(); } @@ -526,28 +526,11 @@ var DocumentController = exports.DocumentController = Montage.create(Component, this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe this.activeDocument = doc; - - var type; - - switch(doc.documentType) { - case "css" : - type = "css"; - break; - case "js" : - type = "javascript"; - break; - } - - DocumentController._codeEditor.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"); - } - }); - DocumentController._codeEditor.hline = DocumentController._codeEditor.editor.setLineClass(0, "activeline"); - + //hide the iframe when switching to code view + document.getElementById("iframeContainer").style.display = "none"; + doc.model.views.code.showCodeViewBar(true); + this.application.ninja.codeEditorController.applySettings(); + doc.model.views.code.collapseAllPanels(); } }, diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index ae504f0e..3a942364 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -111,7 +111,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { set : function(sheet) { if(sheet) { this._defaultStylesheet = sheet; - } else { + } else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){//check that the document has a design view ///// Use the last stylesheet in the document as the default -- cgit v1.2.3