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 +- js/document/document-text.js | 43 ++++++- js/document/models/text.js | 4 +- js/document/views/code.js | 193 ++++++++++++++++++++++++++++++- js/stage/stage-view.reel/stage-view.js | 120 +------------------ 7 files changed, 276 insertions(+), 191 deletions(-) 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 diff --git a/js/document/document-text.js b/js/document/document-text.js index 2a469144..533b32c9 100755 --- a/js/document/document-text.js +++ b/js/document/document-text.js @@ -7,7 +7,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; + Component = require("montage/ui/component").Component, + TextDocumentModel = require("js/document/models/text").TextDocumentModel, + CodeDocumentView = require("js/document/views/code").CodeDocumentView; //////////////////////////////////////////////////////////////////////// // exports.TextDocument = Montage.create(Component, { @@ -16,9 +18,44 @@ exports.TextDocument = Montage.create(Component, { hasTemplate: { enumerable: false, value: false - } - //////////////////////////////////////////////////////////////////// + }, //////////////////////////////////////////////////////////////////// + // + model: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + + init:{ + enumerable: false, + value : function(file, context, callback, view){ + var codeDocumentView = CodeDocumentView.create(), container = null; + codeDocumentView.initialize(); + + //Creating instance of Text Document Model + this.model = Montage.create(TextDocumentModel,{ + file: {value: file}, + parentContainer: {value: document.getElementById("codeViewContainer")}, + views: {value: {'code': codeDocumentView, 'design': null}} + }); + + codeDocumentView.textArea.value = file.content; + codeDocumentView.initializeTextView(file, this); + + if (view === 'code') { + //TODO: Remove reference and use as part of model + this.currentView = 'code'; + //Setting current view object to design + this.model.currentView = this.model.views.code; + } + + + callback.call(context, this); + } + } +//////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////// }); //////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/document/models/text.js b/js/document/models/text.js index ebf9993e..5a5e86ef 100755 --- a/js/document/models/text.js +++ b/js/document/models/text.js @@ -7,7 +7,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot //////////////////////////////////////////////////////////////////////// // var Montage = require("montage/core/core").Montage, - BaseDocumentModel = require("js/document/models/text").BaseDocumentModel; + BaseDocumentModel = require("js/document/models/base").BaseDocumentModel; //////////////////////////////////////////////////////////////////////// // exports.TextDocumentModel = Montage.create(BaseDocumentModel, { @@ -17,8 +17,6 @@ exports.TextDocumentModel = Montage.create(BaseDocumentModel, { enumerable: false, value: false } - //////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////// }); //////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/document/views/code.js b/js/document/views/code.js index cd3e02d4..de12881c 100755 --- a/js/document/views/code.js +++ b/js/document/views/code.js @@ -11,15 +11,202 @@ var Montage = require("montage/core/core").Montage, BaseDocumentView = require("js/document/views/base").BaseDocumentView; //////////////////////////////////////////////////////////////////////// // -exports.CodeDocumentView = Montage.create(BaseDocumentView, { +var CodeDocumentView = exports.CodeDocumentView = Montage.create(BaseDocumentView, { //////////////////////////////////////////////////////////////////// // hasTemplate: { enumerable: false, value: false + }, + + //////////////////////////////////////////////////////////////////// + // + _editor: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + editor: { + get: function() {return this._editor;}, + set: function(value) {this._editor= value;} + }, + //////////////////////////////////////////////////////////////////// + // + _textArea: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + textArea: { + get: function() {return this._textArea;}, + set: function(value) {this._textArea= value;} + }, + + //////////////////////////////////////////////////////////////////// + //remove _extParentContainer after moving to bucket structure for documents + _textParentContainer: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + textParentContainer: { + get: function() {return this._textParentContainer;}, + set: function(value) {this._textParentContainer= value;} + }, + //////////////////////////////////////////////////////////////////// + // + _textViewContainer: { + value: null + }, + //////////////////////////////////////////////////////////////////// + // + textViewContainer: { + get: function() {return this._textViewContainer;}, + set: function(value) {this._textViewContainer= value;} + }, + //////////////////////////////////////////////////////////////////// + // + + /** + * Public method + */ + initialize:{ + value: function(){ + //populate _textParentContainer + this.textParentContainer = document.getElementById("codeViewContainer"); + + //create contianer + this.textViewContainer = document.createElement("div"); + //this.textViewContainer.id = "codemirror_" + uuid; + this.textViewContainer.style.display = "block"; + this.textParentContainer.appendChild(this.textViewContainer); + + //create text area + this.textArea = this.createTextAreaElement(); + } + }, + + /** + * Public method + * Creates a textarea element which will contain the content of the opened text document. + */ + createTextAreaElement: { + value: function() { + var textArea = document.createElement("textarea"); +// textArea.id = "code"; +// textArea.name = "code"; + this.textViewContainer.appendChild(textArea); + + return textArea; + } + }, + //////////////////////////////////////////////////////////////////// + // + /** + * Public method + * Creates a new instance of a code editor + */ + initializeTextView: { + value: function(file, textDocument) { + var type; + + if(this.activeDocument) { + //need to hide only if another document was open before +// this.application.ninja.documentController._hideCurrentDocument(); +// this.hideOtherDocuments(doc.uuid); + } + + switch(file.extension) { + case "css" : + type = "css"; + break; + 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; + } + this.textViewContainer.style.display="block"; + + this.editor = this.application.ninja.codeEditorController.createEditor(this, type, file.extension, textDocument); + this.editor.hline = this.editor.setLineClass(0, "activeline"); + + + } + }, + //////////////////////////////////////////////////////////////////// + // + + showRulers:{ + value:function(){ + this.application.ninja.rulerTop.style.display = "block"; + this.application.ninja.rulerLeft.style.display = "block"; + } + }, + hideRulers:{ + value:function(){ + 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"; + } + } + }, + + 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(); + } + }, + + applyTheme:{ + value:function(themeClass){ + //Todo: change for bucket structure of documents + this.textParentContainer.className = "codeViewContainer "+themeClass; + } } - //////////////////////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////// + + +//////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// }); //////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// \ No newline at end of file diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js index ba94fadf..e8f29306 100755 --- a/js/stage/stage-view.reel/stage-view.js +++ b/js/stage/stage-view.reel/stage-view.js @@ -31,81 +31,6 @@ exports.StageView = Montage.create(Component, { } }, - /** - * 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"; - this.element.appendChild(codeMirrorDiv); - - var textArea = document.createElement("textarea"); - textArea.id = "code"; - textArea.name = "code"; - codeMirrorDiv.appendChild(textArea); - - return textArea; - } - }, - - /** - * 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); - - switch(doc.documentType) { - case "css" : - type = "css"; - break; - 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"; - - 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 - 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(); - } - }, - /** * Public method * Switches between documents. Document state data is saved and restored whereever applicable @@ -157,16 +82,6 @@ exports.StageView = Montage.create(Component, { } }, - /** - * Public method - * Switches between different views of a design document, like HTML design view, HTML code view - */ - switchDesignDocViews: { - value: function() { - //TODO - } - }, - showRulers:{ value:function(){ this.application.ninja.rulerTop.style.display = "block"; @@ -178,39 +93,6 @@ 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"; - } - } - }, - - 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(); - } - }, - - applyTheme:{ - value:function(themeClass){ - this.element.className = "codeViewContainer "+themeClass; - } } + }); \ No newline at end of file -- cgit v1.2.3