From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- js/io/document/base-document.js | 88 +++++++ js/io/document/document-controller.js | 326 ++++++++++++++++++++++++++ js/io/document/html-document.js | 424 ++++++++++++++++++++++++++++++++++ js/io/document/text-document.js | 91 ++++++++ 4 files changed, 929 insertions(+) create mode 100644 js/io/document/base-document.js create mode 100644 js/io/document/document-controller.js create mode 100644 js/io/document/html-document.js create mode 100644 js/io/document/text-document.js (limited to 'js/io/document') diff --git a/js/io/document/base-document.js b/js/io/document/base-document.js new file mode 100644 index 00000000..44f54f78 --- /dev/null +++ b/js/io/document/base-document.js @@ -0,0 +1,88 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +//BaseDocument Object for all files types and base class for HTML documents. + +var Montage = require("montage/core/core").Montage; + +var BaseDocument = exports.BaseDocument = Montage.create(Montage, { + /** Private Members **/ + _name: { value: null, enumerable: false }, + _uri: { value: null, enumerable: false }, + _documentType: { value: null, enumerable: false }, + _container: {value: null, enumerable: false }, + _uuid: { value: null, enumerable: false }, + _isActive: { value: true, enumerable: false }, + _dirtyFlag: { value: false, enumerable: false }, + _callback: { value: null, enumerable: false }, + _currentView: { value: null, enumerable: false}, + + /** Getters/Setters **/ + name: { + get: function() { return this._name; }, + set: function(value) { this._name = value; } + }, + + uri: { + get: function() { return this._uri; }, + set: function(value) { this._uri = value; } + }, + + documentType: { + get: function() { return this._documentType; }, + set: function(value) { this._documentType = value; } + }, + + container: { + get: function() { return this._container; }, + set: function(value) { this._container = value; } + }, + + uuid: { + get: function() { return this._uuid; }, + set: function(value) { this._uuid = value; } + }, + + isActive: { + get: function() { return this._isActive; }, + set: function(value) { this._isActive = value; } + }, + + dirtyFlag: { + get: function() { return this._dirtyFlag; }, + set: function(value) { this._dirtyFlag = value; } + }, + + callback: { + get: function() { return this._callback; }, + set: function(value) { this._callback = value; } + }, + + currentView: { + get: function() { return this._currentView; }, + set: function(value) { this._currentView = value } + }, + + /** Base Methods **/ + init: { + 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; + } + }, + + loadDocument: { + value: function() { + // Have the XHR here? + } + } + + +}); \ No newline at end of file diff --git a/js/io/document/document-controller.js b/js/io/document/document-controller.js new file mode 100644 index 00000000..99177de0 --- /dev/null +++ b/js/io/document/document-controller.js @@ -0,0 +1,326 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +/** +@module js/document/documentManager +@requires montage/core/core +@requires montage/ui/component +@requires js/document/html-document +@requires js/document/text-document +*/ + +// TODO : Fix deps from Montage V4 Archi + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component, + Uuid = require("montage/core/uuid").Uuid; + +var HTMLDocument = require("js/io/document/html-document").HTMLDocument; +var TextDocument = require("js/io/document/text-document").TextDocument; + +var DocumentController = exports.DocumentController = Montage.create(Component, { + hasTemplate: { value: false }, + + _documents: { value: [] }, + _documentsHash: { value: {} }, + _activeDocument: { value: null }, + _iframeCounter: { value: 1, enumerable: false }, + _iframeHolder: { value: null, enumerable: false }, + _textHolder: { value: null, enumerable: false }, + _codeMirrorCounter: {value: 1, enumerable: false}, + + _codeEditor: { + value: { + "editor": { + value: null, + enumerable: false + }, + "hline": { + value: null, + enumerable: false + } + } + }, + + activeDocument: { + get: function() { + return this._activeDocument; + }, + set: function(doc) { + if(this._activeDocument) { + if(this.activeDocument.documentType === "htm" || this.activeDocument.documentType === "html") { + // TODO selection should use the document own selectionModel + //this._activeDocument.selectionModel = selectionManagerModule.selectionManager._selectedItems; + } + + this._activeDocument.isActive = false; + } + + if(this._documents.indexOf(doc) === -1) { + //this._documentsHash[doc.uuid] = this._documents.push(doc) - 1; + this._documents.push(doc); + } + + this._activeDocument = doc; + this._activeDocument.isActive = true; + + if(this.activeDocument.documentType === "htm" || this.activeDocument.documentType === "html") { + // TODO selection should use the document own selectionModel + //selectionManagerModule.selectionManager._selectedItems = this._activeDocument.selectionModel; + } + } + }, + + deserializedFromTemplate: { + value: function() { + this.eventManager.addEventListener("appLoaded", this, false); + } + }, + + handleAppLoaded: { + value: function() { + this.openDocument({"type": "html"}); + } + }, + + /** Open a Document **/ + openDocument: { + value: function(doc) { + var d; + + if(!doc) return false; + + try { + if (doc.type === 'html' || doc.type === 'htm') { + d = Montage.create(HTMLDocument); + d.initialize(doc, Uuid.generate(), this._createIframeElement(), this._onOpenDocument); + } else { + d = Montage.create(TextDocument); + d.initialize(doc, Uuid.generate(), this._createTextAreaElement(), this._onOpenTextDocument); + } + + } catch (err) { + console.log("Could not open Document ", err); + } + } + }, + + closeDocument: { + value: function(id) { + var doc = this._findDocumentByUUID(id); + this._removeDocumentView(doc.container); + + this._documents.splice(this._findIndexByUUID(id), 1); + + if(this.activeDocument.uuid === id && this._documents.length > 0) { + this.switchDocument(this._documents[0].uuid) + } + } + }, + + switchDocument: { + value: function(id) { + this._hideCurrentDocument(); + this.activeDocument = this._findDocumentByUUID(id); + + this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe + this._showCurrentDocument(); + + if(this.activeDocument.documentType === "htm" || this.activeDocument.documentType === "html") { + this.application.ninja.stage._scrollFlag = true; // TODO HACK to prevent type error on Hide/Show Iframe + // TODO dispatch event here +// appDelegateModule.MyAppDelegate.onSetActiveDocument(); + } + } + }, + + switchViews: { + value: function() { + this.application.ninja.stage.saveScroll(); + this._hideCurrentDocument(); + + if(this.activeDocument.currentView === "design") { + this._textHolder.style.display = "none"; + this.activeDocument.container.style["display"] = "block"; + this.application.ninja.stage._scrollFlag = true; + //this._showCurrentDocument(); + this.application.ninja.stage.restoreScroll(); + + } 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() { + DocumentManager._codeEditor.editor.setLineClass(DocumentManager._codeEditor.hline, null); + DocumentManager._codeEditor.hline = DocumentManager._codeEditor.editor.setLineClass(DocumentManager._codeEditor.editor.getCursor().line, "activeline"); + } + }); + this._codeEditor.hline = DocumentManager._codeEditor.editor.setLineClass(0, "activeline"); + } + } + }, + + // Document has been loaded into the Iframe. Dispatch the event. + // Event Detail: Contains the current ActiveDocument + _onOpenDocument: { + value: function(doc){ + //var data = DocumentManager.activeDocument; + //DocumentManager._hideCurrentDocument(); + + //stageManagerModule.stageManager.toggleCanvas(); + + DocumentController.activeDocument = doc; + + NJevent("onOpenDocument", doc); +// appDelegateModule.MyAppDelegate.onSetActiveDocument(); + + } + }, + + _onOpenTextDocument: { + value: function(doc) { + DocumentManager._hideCurrentDocument(); + this.application.ninja.stage._scrollFlag = false; // TODO HACK to prevent type error on Hide/Show Iframe + DocumentManager.activeDocument = doc; + + var type; + + switch(doc.documentType) { + case "css" : + type = "css"; + break; + case "js" : + type = "javascript"; + break; + } + + DocumentManager._codeEditor.editor = CodeMirror.fromTextArea(doc.textArea, { + lineNumbers: true, + mode: type, + onCursorActivity: function() { + DocumentManager._codeEditor.editor.setLineClass(DocumentManager._codeEditor.hline, null); + DocumentManager._codeEditor.hline = DocumentManager._codeEditor.editor.setLineClass(DocumentManager._codeEditor.editor.getCursor().line, "activeline"); + } + }); + DocumentManager._codeEditor.hline = DocumentManager._codeEditor.editor.setLineClass(0, "activeline"); + + } + }, + + /** + * VIEW Related Methods + */ + // PUBLIC + ShowActiveDocument: { + value: function() { + this.activeDocument.iframe.style.opacity = 1.0; + } + }, + + // PRIVATE + _findDocumentByUUID: { + value: function(uuid) { + var len = this._documents.length; + for(var i = 0; i < len; i++) { + if(this._documents[i].uuid === uuid) return this._documents[i]; + } + + return false; + } + }, + + _findIndexByUUID: { + value: function(uuid) { + var len = this._documents.length; + for(var i = 0; i < len; i++) { + if(this._documents[i].uuid === uuid) return i; + } + + return false; + } + }, + + _hideCurrentDocument: { + 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(); + } + } + }, + + _showCurrentDocument: { + 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(); + } + } + }, + + _removeDocumentView: { + value: function(node) { + node.parentNode.removeChild(node); + } + }, + + reloadDocumentContent: { + value: function() { + this.activeDocument._window.location.reload(); + } + }, + + /** + * Creates a new iFrame element using a new unique ID for it. Returns the iframe ID. + */ + _createIframeElement: { + value: function() { + var e = document.createElement("iframe"); + e.id = this._createIframeID(); + e.style.border = "none"; + e.style.opacity = 0; + e.height = 1000; + e.width = 2000; + e.src = ""; + + if(!this._iframeHolder) this._iframeHolder = document.getElementById("iframeContainer"); + + this._iframeHolder.appendChild(e); + + return e; + } + }, + + + _createIframeID: { + value: function() { + return "userDocument_" + (this._iframeCounter++); + } + }, + + _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 codeMirrorDiv; + } + } +}); diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js new file mode 100644 index 00000000..c44dfe75 --- /dev/null +++ b/js/io/document/html-document.js @@ -0,0 +1,424 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage, + baseDocumentModule = require("js/io/document/base-document"), + NJUtils = require("js/lib/NJUtils").NJUtils; + +var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.BaseDocument, { + // PRIVATE MEMBERS + _selectionExclude: { value: null, enumerable: false }, + _cloudTemplateUri: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false}, + _iframe: { value: null, enumerable: false }, + _server: { value: null, enumerable: false }, + _selectionModel: { value: [], enumerable: false }, + _undoModel: { value: { "queue" : [], "position" : 0 }, enumerable: false}, + + _document: { value: null, enumerable: false }, + _documentRoot: { value: null, enumerable: false }, + _stageBG: { value: null, enumerable: false }, + _window: { value: null, enumerable: false }, + _styles: { value: null, enumerable: false }, + _stylesheets: { value: null, enumerable: false }, + _stageStyleSheetId : { value: 'nj-stage-stylesheet', enumerable: false }, + _initialUserDocument: { value: null, enumerable: false }, + _htmlSource: {value: "", enumerable: false}, + _glData: {value: null, enumerable: false }, + + _elementCounter: { value: 1, enumerable: false }, + _snapping : { value: true, enumerable: false }, + _layoutMode: { value: "all", enumerable: false }, + _draw3DGrid: { value: false, writable: true }, + _swfObject: { value: false, enumerable: false }, + + _zoomFactor: { value: 100, enumerable: false }, + + // PUBLIC MEMBERS + cssLoadInterval: { value: null, enumerable: false }, + + /* + * PUBLIC API + */ + + // GETTERS / SETTERS + selectionExclude: { + get: function() { return this._selectionExclude; }, + set: function(value) { this._selectionExclude = value; } + }, + + iframe: { + get: function() { return this._iframe; }, + set: function(value) { this._iframe = value; } + }, + + server: { + get: function() { return this._server; }, + set: function(value) { this._server = value; } + }, + + selectionModel: { + get: function() { return this._selectionModel; }, + set: function(value) { this._selectionModel = value; } + }, + + undoModel: { + get: function() { return this._undoModel; }, + set: function(value) { this._undoModel.queue = value.queue; this._undoModel.position = value.position; } + }, + + documentRoot: { + get: function() { return this._documentRoot; }, + set: function(value) { this._documentRoot = value; } + }, + + stageBG: { + get: function() { return this._stageBG; }, + set: function(value) { this._stageBG = value; } + }, + + elementCounter: { + set: function(value) { this._elementCounter = value; }, + get: function() { return this._elementCounter; } + }, + + snapping: { + get: function() { return this._snapping; }, + set: function(value) { + if(this._snapping !== value) { + this._snapping = value; + } + } + }, + + // TODO SEND THE EVENT --> Redraw the desired layout + layoutMode: { + get: function() { return this._layoutMode; }, + set: function(mode) { this._layoutMode = mode; } + }, + + draw3DGrid: { + get: function() { return this._draw3DGrid; }, + set: function(value) { + if(this._draw3DGrid !== value) { + this._draw3DGrid = value; + } + } + }, + + _userComponentSet: { + value: {}, + writable: true, + enumerable:true + }, + +// userComponentSet:{ +// enumerable: true, +// get: function() { +// return this._userComponentSet; +// }, +// set: function(value) { +// this._userComponentSet = value; +// this._drawUserComponentsOnOpen(); +// } +// }, +// +// _drawUserComponentsOnOpen:{ +// value:function(){ +// for(var i in this._userComponentSet){ +// console.log(this._userComponentSet[i].control) +// this._userComponentSet[i].control.needsDraw = true; +// } +// } +// }, + + glData: { + get: function() + { + var elt = this.iframe; + var elt = this.iframe.contentWindow.document.getElementById("UserContent"); + this._glData = null; + if (elt) + { + this._glData = new Array(); + this.collectGLData( elt, this._glData ); + } + + return this._glData + }, + + set: function(value) + { + var nWorlds = value.length; + for (var i=0; i= 0) + { + var endIndex = importStr.indexOf( "\n", startIndex ); + if (endIndex > 0) + { + var id = importStr.substring( startIndex+4, endIndex ); + var canvas = this.iframe.contentWindow.document.getElementById( id ); + if (canvas) + { + if (!canvas.elementModel) + { + NJUtils.makeElementModel(canvas, "Canvas", "shape", true); + } + + if (canvas.elementModel) + { + if (canvas.elementModel.shapeModel.GLWorld) + canvas.elementModel.shapeModel.GLWorld.clearTree(); + + var world = new GLWorld( canvas ); + canvas.elementModel.shapeModel.GLWorld = world; + world.import( importStr ); + } + } + } + } + } + } + }, + + zoomFactor: { + get: function() { return this._zoomFactor; }, + set: function(value) { this._zoomFactor = value; } + }, + + //****************************************// + // PUBLIC METHODS + initialize: { + value: function(doc, uuid, iframe, callback) { + // Shell mode is not used anymore + //if(!window.IsInShellMode()) { + + this.init("index-cloud", this._cloudTemplateUri, doc.type, iframe, uuid, callback); + /* + } else { + var tmpurl = doc.uri.split('\\'); + var fileUrl = doc.server.url + "/" + tmpurl[tmpurl.length -1] + "?fileio=true&template=/user-document-templates/montage-application/index.html"; + this.init(name, fileUrl, doc.type, iframe, uuid, callback); + this.server = doc.server; + this._initialUserDocument = doc; + } + */ + this.iframe = iframe; + this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"]; + this.currentView = "design"; + + this._loadDocument(this.uri); + } + }, + + collectGLData: { + value: function( elt, dataArray ) + { + if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) + { + var data = elt.elementModel.shapeModel.GLWorld.export(); + dataArray.push( data ); + } + + if (elt.children) + { + var nKids = elt.children.length; + for (var i=0; i 1) { + clearInterval(this.cssLoadInterval); + this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; + this._stylesheets = this._document.styleSheets; // Entire stlyesheets array + + this.callback(this); + } + }.bind(this), 50); + + // TODO - Not sure where this goes + this._userComponentSet = {}; + } else { + this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; + this._stylesheets = this._document.styleSheets; // Entire stlyesheets array + + /* TODO Finish this implementation once we start caching Core Elements */ + // Assign a model to the UserContent and add the ViewPort reference to it. + NJUtils.makeElementModel(this.documentRoot, "Stage", "stage"); + //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport"); + NJUtils.makeElementModel(this.stageBG, "Stage", "stage"); + NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage"); + + for(i = 0; i < this._stylesheets.length; i++) { + if(this._stylesheets[i].ownerNode.id === this._stageStyleSheetId) { + this.documentRoot.elementModel.defaultRule = this._stylesheets[i]; + break; + } + } + + // Temporary create properties for each rule we need to save the index of the rule. + var len = this.documentRoot.elementModel.defaultRule.cssRules.length; + for(var j = 0; j < len; j++) { +// console.log(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText); + if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "*") { + + this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j]; + + } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "body") { + + this.documentRoot.elementModel.body = this.documentRoot.elementModel.defaultRule.cssRules[j]; + + } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#Viewport") { + + this.documentRoot.elementModel.viewPort = this.documentRoot.elementModel.defaultRule.cssRules[j]; + + } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageDimension") { + + this.documentRoot.elementModel.stageDimension = this.documentRoot.elementModel.defaultRule.cssRules[j]; + + } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageView") { + + this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j]; + + } + } + + this.callback(this); + } + } + }, + + _setSWFObjectScript: { + value: function() { + if(!this._swfObject) { + /* + var swfObj = document.createElement("script"); + swfObj.type = "text/javascript"; + swfObj.src = "../../user-document-templates/external-libs/swf-object/swfobject.js"; + swfObj.id = "swfObject"; + var head= this._document.getElementsByTagName('head')[0]; + head.appendChild(swfObj); + this._swfObject = true; + */ + } + } + } +}); \ No newline at end of file diff --git a/js/io/document/text-document.js b/js/io/document/text-document.js new file mode 100644 index 00000000..3506891a --- /dev/null +++ b/js/io/document/text-document.js @@ -0,0 +1,91 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage/core/core").Montage; +var baseDocumentModule = require("js/io/document/base-document"); + + +var TextDocument = exports.TextDocument = Montage.create(baseDocumentModule.BaseDocument, { + // PRIVATE MEMBERS + _codeEditor: { + value: { + "editor": { value: null, enumerable: false }, + "hline": { value: null, enumerable: false } + } + }, + + _textArea: { value: null, enumerable: false }, + + // Temporary Save the source + _source: { value: null, enumerable: false}, + + textArea: { + get: function() { return this._textArea;}, + set: function(value) { this._textArea = value; } + }, + + source: { + get: function() { return this._source;}, + set: function(value) { this._source = value;} + }, + + // PUBLIC MEMBERS + + //****************************************// + //PUBLIC API + + + // GETTERS / SETTERS + editor: { + get: function() { return this._codeEditor.editor; }, + set: function(value) { this._codeEditor.editor = value} + }, + + hline: { + get: function() { return this._codeEditor.hline; }, + set: function(value) {this._codeEditor.hline = value; } + }, + + + // PUBLIC METHODS + initialize: { + value: function(doc, uuid, textArea, callback) { + this.init(doc.name, doc.uri, doc.type, textArea, uuid, callback); + this.textArea = textArea.firstChild; + this.currentView = "code"; + this._loadContent(); + } + }, + + // PRIVATE METHODS + _loadContent: { + value: function() { + // Start and AJAX call to load the HTML Document as a String + var xhr = new XMLHttpRequest(); + var ref = this; + + xhr.onreadystatechange = function() { + if (xhr.readyState == 4) { + ref.source = xhr.responseText; + ref.textArea.innerHTML = xhr.responseText; + //ref.callback(xhr.responseText); + ref.callback(ref); + } + }; + + if(this.documentType === "js") { + xhr.open('GET', 'user-document-templates/montage-application-cloud/appdelegate.js'); + } else if(this.documentType === "css") { + xhr.open('GET', 'user-document-templates/montage-application-cloud/default_html.css'); + } else { + xhr.open('GET', 'user-document-templates/montage-application-cloud/index.html'); + } + + xhr.send(''); + } + } + +}); \ No newline at end of file -- cgit v1.2.3