From a7952c5a16e2cae3fd1a459b03b9f16bba1004da Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 14 Feb 2012 13:23:20 -0800
Subject: Cleaning up

Setting up a 'document' folder to handle all document related classes that in relation to IO
---
 js/document/models/base-document.js |  93 +++++++
 js/document/models/html-document.js | 492 ++++++++++++++++++++++++++++++++++++
 js/document/models/text-document.js | 156 ++++++++++++
 3 files changed, 741 insertions(+)
 create mode 100755 js/document/models/base-document.js
 create mode 100755 js/document/models/html-document.js
 create mode 100755 js/document/models/text-document.js

(limited to 'js/document')

diff --git a/js/document/models/base-document.js b/js/document/models/base-document.js
new file mode 100755
index 00000000..918b51ad
--- /dev/null
+++ b/js/document/models/base-document.js
@@ -0,0 +1,93 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+//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?
+        }
+    },
+
+    save:{
+        value:function(){
+            //base function - to be overridden
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/document/models/html-document.js b/js/document/models/html-document.js
new file mode 100755
index 00000000..cb399f04
--- /dev/null
+++ b/js/document/models/html-document.js
@@ -0,0 +1,492 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = 		require("montage/core/core").Montage,
+    BaseDocument =	require("js/document/models/base-document").BaseDocument,
+    NJUtils = 		require("js/lib/NJUtils").NJUtils;
+////////////////////////////////////////////////////////////////////////
+//
+exports.HTMLDocument = Montage.create(BaseDocument, {
+    // PRIVATE MEMBERS
+    _selectionExclude: { value: null, enumerable: false },
+    _htmlTemplateUrl: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false},
+    _iframe: { value: null, enumerable: false },
+    _server: { value: null, enumerable: false },
+    _templateDocument: { 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 },
+    _userDocument: { value: null, enumerable: false },
+    _htmlSource: {value: "<html></html>", 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 },
+
+    _savedLeftScroll: {value:null},
+    _savedTopScroll: {value:null},
+
+    _codeViewDocument:{
+        writable: true,
+        enumerable: true,
+        value:null
+    },
+
+    /*
+     * PUBLIC API
+     */
+
+    // GETTERS / SETTERS
+
+    codeViewDocument:{
+        get: function() { return this._codeViewDocument; },
+        set: function(value) { this._codeViewDocument = value}
+    },
+
+    savedLeftScroll:{
+        get: function() { return this._savedLeftScroll; },
+        set: function(value) { this._savedLeftScroll = value}
+    },
+
+    savedTopScroll:{
+        get: function() { return this._savedTopScroll; },
+        set: function(value) { this._savedTopScroll = value}
+    },
+
+    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<nWorlds;  i++)
+			{
+				var importStr = value[i];
+				var startIndex = importStr.indexOf( "id: " );
+				if (startIndex >= 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(file, uuid, iframe, callback) {
+			//
+			this._userDocument = file;
+			//
+			this.init(file.name, file.uri, file.extension, iframe, uuid, callback);
+			//
+			this.iframe = iframe;
+			this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
+			this.currentView = "design";
+			//
+			this.iframe.src = this._htmlTemplateUrl;
+            this.iframe.addEventListener("load", this, true);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+
+
+	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<nKids;  i++)
+				{
+					var child = elt.children[i];
+					this.collectGLData( child, dataArray );
+				}
+			}
+		}
+	},
+
+
+    // OLD
+
+    inExclusion: {
+        value: function(element) {
+            if(this._selectionExclude.indexOf(element.id) === -1) {
+                if(this._selectionExclude.indexOf(element.nodeName) === -1) {
+                    return -1;
+                }
+            } else if (this._selectionExclude.indexOf(element.id) === -1) {
+                return -1;
+            } else {
+                return 1;
+            }
+        }
+    },
+
+
+
+    AppendElement: {
+        value: function(element, parent) {
+            this.dirtyFlag = true;
+        }
+    },
+
+
+    /**
+     * Return the specified inline attribute from the element.
+     */
+    GetElementAttribute: {
+        value: function(element, attribute) {
+
+            var value;
+
+            if(attribute === "src") {
+                return element[attribute].replace(window.location.href, '');
+            }
+
+            value = element[attribute];
+
+            if(value !== undefined) return value;
+//            if(value || value === false) return [value, "inline"];
+
+            // 3.
+            //value = this._document.defaultView.getComputedStyle(element,null).getPropertyValue(attribute);
+            //if(value) return value;
+
+            return null;
+        }
+    },
+
+    GetElementStyle: {
+        value: function(element, style) {
+//            return this._queryStylesheets(element, style);
+        }
+    },
+
+    SetStyle: {
+        value: function(type, selector, style, value) {
+            try {
+                for(var j=0; j<this._stylesheets.length;j++){
+                    for(var i=0; i<this._stylesheets[j].cssRules.length;i++) {
+                        if(this._stylesheets[j].cssRules[i].selectorText === type + selector) {
+                            this._stylesheets[j].cssRules[i].style[style] = value;
+
+                            return true;
+                        }
+                    }
+                }
+            } catch(err) {
+                console.log("Cannot change the style of selector: " + selector + " " + err);
+            }
+        }
+    },
+
+    GetElementFromPoint: {
+        value: function(x, y) {
+            return this._window.getElement(x,y);
+        }
+    },
+
+    /*
+// Private
+    _loadDocument: {
+        value: function(uri) {
+            // Load the document into the Iframe
+            this.iframe.src = uri;
+            this.iframe.addEventListener("load", this, true);
+        }
+    },
+*/
+	
+	
+	
+	////////////////////////////////////////////////////////////////////
+	//
+    handleEvent: {
+        value: function(event){
+        	//TODO: Clean up, using for prototyping save
+        	this._templateDocument = {};
+        	this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");;
+        	this._templateDocument.body = this.iframe.contentWindow.document.getElementById("UserContent");;
+        	//
+        	this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
+            this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG");
+            this.stageBG.onclick = null;
+            this._document = this.iframe.contentWindow.document;
+            this._window = this.iframe.contentWindow;
+            //
+            if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
+            //
+            
+            this.documentRoot.innerHTML = this._userDocument.content.body;
+            this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._userDocument.content.head;
+            
+          
+            //TODO: Look at code below and clean up
+            	
+            	
+            
+
+                this.cssLoadInterval = setInterval(function() {
+                    if(this._document.styleSheets.length > 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 = {};
+
+            
+                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];
+
+                    } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") {
+
+                        this.documentRoot.elementModel.stageBackground = 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;
+                */
+            }
+        }
+    },
+
+    /**
+     * public method
+     *
+     */
+	////////////////////////////////////////////////////////////////////
+	//
+	save: {
+		enumerable: false,
+    	value: function () {
+    		//TODO: Add code view logic and also styles for HTML
+    		if (this.currentView === 'design') {
+    			return {mode: 'html', document: this._userDocument, style: this._styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+    		} else if (this.currentView === "code"){
+    			//TODO: Would this get call when we are in code of HTML?
+    		} else {
+    			//Error
+    		}
+    	}
+	}
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+});
\ No newline at end of file
diff --git a/js/document/models/text-document.js b/js/document/models/text-document.js
new file mode 100755
index 00000000..c0d4f256
--- /dev/null
+++ b/js/document/models/text-document.js
@@ -0,0 +1,156 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = 		require("montage/core/core").Montage,
+	BaseDocument =	require("js/document/models/base-document").BaseDocument;
+////////////////////////////////////////////////////////////////////////
+//
+exports.TextDocument = Montage.create(BaseDocument, {
+    // PRIVATE MEMBERS
+    _codeEditor: {
+        value: {
+            "editor": { value: null, enumerable: false },
+
+        }
+    },
+
+    _editor: { value: null, enumerable: false },
+    _hline: { value: null, enumerable: false },
+
+    _textArea: {value: null, enumerable: false },
+	
+	_userDocument: {value: null, enumerable: false },
+	
+    _source: { value: null, enumerable: false},
+
+    source: {
+        get: function() { return this._source;},
+        set: function(value) { this._source = value;}
+    },
+
+    // PUBLIC MEMBERS
+
+    _savedLeftScroll: {value:null},
+    _savedTopScroll: {value:null},
+
+    //****************************************//
+    //PUBLIC API
+
+
+    // GETTERS / SETTERS
+
+    savedLeftScroll:{
+        get: function() { return this._savedLeftScroll; },
+        set: function(value) { this._savedLeftScroll = value}
+    },
+
+    savedTopScroll:{
+        get: function() { return this._savedTopScroll; },
+        set: function(value) { this._savedTopScroll = value}
+    },
+
+    textArea: {
+        get: function() { return this._textArea; },
+        set: function(value) { this._textArea = value; }
+    },
+    editor: {
+        get: function() { return this._editor; },
+        set: function(value) { this._editor = value}
+    },
+
+    hline: {
+        get: function() { return this._hline; },
+        set: function(value) {this._hline = value; }
+    },
+
+    
+    ////////////////////////////////////////////////////////////////////
+	//
+    initialize: {
+    	value: function(file, uuid, textArea, container, callback) {
+        	//
+			this._userDocument = file;
+			//
+			this.init(file.name, file.uri, file.extension, container, uuid, callback);
+	        //
+    	    this.currentView = "code";
+        	this.textArea = textArea;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+	save: {
+		enumerable: false,
+    	value: function () {
+    		//TODO: Improve sequence
+    		this.editor.save();
+    		return {mode: this._userDocument.extension, document: this._userDocument, content: this.textArea.value};
+    	}
+	}
+	////////////////////////////////////////////////////////////////////
+
+
+
+
+
+
+
+
+
+
+
+    /*
+// 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('');
+        }
+    },
+*/
+    ////////////////////////////////////////////////////////////////////
+	
+
+    /**
+     * public method
+     */
+    /*
+save:{
+        value:function(){
+            try{
+                this.editor.save();
+                //persist textArea.value to filesystem
+                this.dirtyFlag=false;
+            }catch(e){
+                console.log("Error while saving "+this.uri);
+                console.log(e.stack);
+            }
+        }
+    }
+*/
+});
\ No newline at end of file
-- 
cgit v1.2.3


From 93c8f327d662a7693d1d6ca050a0efd15ebc18ed Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 14 Feb 2012 14:00:48 -0800
Subject: Merging TextDocument into BaseDocument

Merged the text-document class with base-document, didn't make sense to have two classes for basic model of documents, the html-document class remain extending base-document to incorporate design view. These two classes might be renamed.
---
 js/document/models/base-document.js | 113 +++++++++++++++++++++++++-
 js/document/models/text-document.js | 156 ------------------------------------
 2 files changed, 112 insertions(+), 157 deletions(-)
 delete mode 100755 js/document/models/text-document.js

(limited to 'js/document')

diff --git a/js/document/models/base-document.js b/js/document/models/base-document.js
index 918b51ad..45c340ce 100755
--- a/js/document/models/base-document.js
+++ b/js/document/models/base-document.js
@@ -9,6 +9,115 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage;
 
 var BaseDocument = exports.BaseDocument = Montage.create(Montage, {
+	
+	
+	//TODO: Clean up, test
+	
+	
+	
+	
+	
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+	//Taken from text-document, which shouldn't be needed
+
+	// PRIVATE MEMBERS
+    _codeEditor: {
+        value: {
+            "editor": { value: null, enumerable: false },
+
+        }
+    },
+
+    _editor: { value: null, enumerable: false },
+    _hline: { value: null, enumerable: false },
+
+    _textArea: {value: null, enumerable: false },
+	
+	_userDocument: {value: null, enumerable: false },
+	
+    _source: { value: null, enumerable: false},
+
+    source: {
+        get: function() { return this._source;},
+        set: function(value) { this._source = value;}
+    },
+
+    // PUBLIC MEMBERS
+
+    _savedLeftScroll: {value:null},
+    _savedTopScroll: {value:null},
+
+    //****************************************//
+    //PUBLIC API
+
+
+    // GETTERS / SETTERS
+
+    savedLeftScroll:{
+        get: function() { return this._savedLeftScroll; },
+        set: function(value) { this._savedLeftScroll = value}
+    },
+
+    savedTopScroll:{
+        get: function() { return this._savedTopScroll; },
+        set: function(value) { this._savedTopScroll = value}
+    },
+
+    textArea: {
+        get: function() { return this._textArea; },
+        set: function(value) { this._textArea = value; }
+    },
+    editor: {
+        get: function() { return this._editor; },
+        set: function(value) { this._editor = value}
+    },
+
+    hline: {
+        get: function() { return this._hline; },
+        set: function(value) {this._hline = value; }
+    },
+
+    
+    ////////////////////////////////////////////////////////////////////
+	//
+    initialize: {
+    	value: function(file, uuid, textArea, container, callback) {
+        	//
+			this._userDocument = file;
+			//
+			this.init(file.name, file.uri, file.extension, container, uuid, callback);
+	        //
+    	    this.currentView = "code";
+        	this.textArea = textArea;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+	save: {
+		enumerable: false,
+    	value: function () {
+    		//TODO: Improve sequence
+    		this.editor.save();
+    		return {mode: this._userDocument.extension, document: this._userDocument, content: this.textArea.value};
+    	}
+	},
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
     /** Private Members **/
     _name: { value: null, enumerable: false },
     _uri: { value: null, enumerable: false },
@@ -82,12 +191,14 @@ 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/document/models/text-document.js b/js/document/models/text-document.js
deleted file mode 100755
index c0d4f256..00000000
--- a/js/document/models/text-document.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-////////////////////////////////////////////////////////////////////////
-//
-var Montage = 		require("montage/core/core").Montage,
-	BaseDocument =	require("js/document/models/base-document").BaseDocument;
-////////////////////////////////////////////////////////////////////////
-//
-exports.TextDocument = Montage.create(BaseDocument, {
-    // PRIVATE MEMBERS
-    _codeEditor: {
-        value: {
-            "editor": { value: null, enumerable: false },
-
-        }
-    },
-
-    _editor: { value: null, enumerable: false },
-    _hline: { value: null, enumerable: false },
-
-    _textArea: {value: null, enumerable: false },
-	
-	_userDocument: {value: null, enumerable: false },
-	
-    _source: { value: null, enumerable: false},
-
-    source: {
-        get: function() { return this._source;},
-        set: function(value) { this._source = value;}
-    },
-
-    // PUBLIC MEMBERS
-
-    _savedLeftScroll: {value:null},
-    _savedTopScroll: {value:null},
-
-    //****************************************//
-    //PUBLIC API
-
-
-    // GETTERS / SETTERS
-
-    savedLeftScroll:{
-        get: function() { return this._savedLeftScroll; },
-        set: function(value) { this._savedLeftScroll = value}
-    },
-
-    savedTopScroll:{
-        get: function() { return this._savedTopScroll; },
-        set: function(value) { this._savedTopScroll = value}
-    },
-
-    textArea: {
-        get: function() { return this._textArea; },
-        set: function(value) { this._textArea = value; }
-    },
-    editor: {
-        get: function() { return this._editor; },
-        set: function(value) { this._editor = value}
-    },
-
-    hline: {
-        get: function() { return this._hline; },
-        set: function(value) {this._hline = value; }
-    },
-
-    
-    ////////////////////////////////////////////////////////////////////
-	//
-    initialize: {
-    	value: function(file, uuid, textArea, container, callback) {
-        	//
-			this._userDocument = file;
-			//
-			this.init(file.name, file.uri, file.extension, container, uuid, callback);
-	        //
-    	    this.currentView = "code";
-        	this.textArea = textArea;
-        }
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-	save: {
-		enumerable: false,
-    	value: function () {
-    		//TODO: Improve sequence
-    		this.editor.save();
-    		return {mode: this._userDocument.extension, document: this._userDocument, content: this.textArea.value};
-    	}
-	}
-	////////////////////////////////////////////////////////////////////
-
-
-
-
-
-
-
-
-
-
-
-    /*
-// 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('');
-        }
-    },
-*/
-    ////////////////////////////////////////////////////////////////////
-	
-
-    /**
-     * public method
-     */
-    /*
-save:{
-        value:function(){
-            try{
-                this.editor.save();
-                //persist textArea.value to filesystem
-                this.dirtyFlag=false;
-            }catch(e){
-                console.log("Error while saving "+this.uri);
-                console.log(e.stack);
-            }
-        }
-    }
-*/
-});
\ No newline at end of file
-- 
cgit v1.2.3


From 68ce64a5a2f4a71b54d33916aaf1d57161302425 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 14 Feb 2012 20:48:40 -0800
Subject: Reverting text/html document classes and setting up MVC folder
 structure

Setting up the folder structure for the proposed set up for documents in Ninja. Reverted to have a temp HTML/Text document class. Tweak some UI for file pickers.
---
 js/document/controllers/base-controller.js |  32 ++
 js/document/html-document.js               | 492 +++++++++++++++++++++++++++++
 js/document/mediators/base-mediator.js     |  32 ++
 js/document/models/base-document.js        | 204 ------------
 js/document/models/base-model.js           |  32 ++
 js/document/models/html-document.js        | 492 -----------------------------
 js/document/text-document.js               | 204 ++++++++++++
 js/document/views/base-view.js             |  32 ++
 8 files changed, 824 insertions(+), 696 deletions(-)
 create mode 100755 js/document/controllers/base-controller.js
 create mode 100755 js/document/html-document.js
 create mode 100755 js/document/mediators/base-mediator.js
 delete mode 100755 js/document/models/base-document.js
 create mode 100755 js/document/models/base-model.js
 delete mode 100755 js/document/models/html-document.js
 create mode 100755 js/document/text-document.js
 create mode 100755 js/document/views/base-view.js

(limited to 'js/document')

diff --git a/js/document/controllers/base-controller.js b/js/document/controllers/base-controller.js
new file mode 100755
index 00000000..be441da2
--- /dev/null
+++ b/js/document/controllers/base-controller.js
@@ -0,0 +1,32 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = require("montage/core/core").Montage,
+	Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//	
+exports.ENTERNAME = Montage.create(Montage, {
+	////////////////////////////////////////////////////////////////////
+	//
+	hasTemplate: {
+		enumerable: false,
+        value: false
+    },
+	////////////////////////////////////////////////////////////////////
+    //
+	deserializedFromTemplate: {
+		enumerable: false,
+		value: function () {
+			//
+		}
+	}
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/document/html-document.js b/js/document/html-document.js
new file mode 100755
index 00000000..d0b63dcc
--- /dev/null
+++ b/js/document/html-document.js
@@ -0,0 +1,492 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = 		require("montage/core/core").Montage,
+    TextDocument =	require("js/document/text-document").TextDocument,
+    NJUtils = 		require("js/lib/NJUtils").NJUtils;
+////////////////////////////////////////////////////////////////////////
+//
+exports.HTMLDocument = Montage.create(TextDocument, {
+    // PRIVATE MEMBERS
+    _selectionExclude: { value: null, enumerable: false },
+    _htmlTemplateUrl: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false},
+    _iframe: { value: null, enumerable: false },
+    _server: { value: null, enumerable: false },
+    _templateDocument: { 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 },
+    _userDocument: { value: null, enumerable: false },
+    _htmlSource: {value: "<html></html>", 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 },
+
+    _savedLeftScroll: {value:null},
+    _savedTopScroll: {value:null},
+
+    _codeViewDocument:{
+        writable: true,
+        enumerable: true,
+        value:null
+    },
+
+    /*
+     * PUBLIC API
+     */
+
+    // GETTERS / SETTERS
+
+    codeViewDocument:{
+        get: function() { return this._codeViewDocument; },
+        set: function(value) { this._codeViewDocument = value}
+    },
+
+    savedLeftScroll:{
+        get: function() { return this._savedLeftScroll; },
+        set: function(value) { this._savedLeftScroll = value}
+    },
+
+    savedTopScroll:{
+        get: function() { return this._savedTopScroll; },
+        set: function(value) { this._savedTopScroll = value}
+    },
+
+    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<nWorlds;  i++)
+			{
+				var importStr = value[i];
+				var startIndex = importStr.indexOf( "id: " );
+				if (startIndex >= 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(file, uuid, iframe, callback) {
+			//
+			this._userDocument = file;
+			//
+			this.init(file.name, file.uri, file.extension, iframe, uuid, callback);
+			//
+			this.iframe = iframe;
+			this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
+			this.currentView = "design";
+			//
+			this.iframe.src = this._htmlTemplateUrl;
+            this.iframe.addEventListener("load", this, true);
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+
+
+	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<nKids;  i++)
+				{
+					var child = elt.children[i];
+					this.collectGLData( child, dataArray );
+				}
+			}
+		}
+	},
+
+
+    // OLD
+
+    inExclusion: {
+        value: function(element) {
+            if(this._selectionExclude.indexOf(element.id) === -1) {
+                if(this._selectionExclude.indexOf(element.nodeName) === -1) {
+                    return -1;
+                }
+            } else if (this._selectionExclude.indexOf(element.id) === -1) {
+                return -1;
+            } else {
+                return 1;
+            }
+        }
+    },
+
+
+
+    AppendElement: {
+        value: function(element, parent) {
+            this.dirtyFlag = true;
+        }
+    },
+
+
+    /**
+     * Return the specified inline attribute from the element.
+     */
+    GetElementAttribute: {
+        value: function(element, attribute) {
+
+            var value;
+
+            if(attribute === "src") {
+                return element[attribute].replace(window.location.href, '');
+            }
+
+            value = element[attribute];
+
+            if(value !== undefined) return value;
+//            if(value || value === false) return [value, "inline"];
+
+            // 3.
+            //value = this._document.defaultView.getComputedStyle(element,null).getPropertyValue(attribute);
+            //if(value) return value;
+
+            return null;
+        }
+    },
+
+    GetElementStyle: {
+        value: function(element, style) {
+//            return this._queryStylesheets(element, style);
+        }
+    },
+
+    SetStyle: {
+        value: function(type, selector, style, value) {
+            try {
+                for(var j=0; j<this._stylesheets.length;j++){
+                    for(var i=0; i<this._stylesheets[j].cssRules.length;i++) {
+                        if(this._stylesheets[j].cssRules[i].selectorText === type + selector) {
+                            this._stylesheets[j].cssRules[i].style[style] = value;
+
+                            return true;
+                        }
+                    }
+                }
+            } catch(err) {
+                console.log("Cannot change the style of selector: " + selector + " " + err);
+            }
+        }
+    },
+
+    GetElementFromPoint: {
+        value: function(x, y) {
+            return this._window.getElement(x,y);
+        }
+    },
+
+    /*
+// Private
+    _loadDocument: {
+        value: function(uri) {
+            // Load the document into the Iframe
+            this.iframe.src = uri;
+            this.iframe.addEventListener("load", this, true);
+        }
+    },
+*/
+	
+	
+	
+	////////////////////////////////////////////////////////////////////
+	//
+    handleEvent: {
+        value: function(event){
+        	//TODO: Clean up, using for prototyping save
+        	this._templateDocument = {};
+        	this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");;
+        	this._templateDocument.body = this.iframe.contentWindow.document.getElementById("UserContent");;
+        	//
+        	this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
+            this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG");
+            this.stageBG.onclick = null;
+            this._document = this.iframe.contentWindow.document;
+            this._window = this.iframe.contentWindow;
+            //
+            if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
+            //
+            
+            this.documentRoot.innerHTML = this._userDocument.content.body;
+            this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._userDocument.content.head;
+            
+          
+            //TODO: Look at code below and clean up
+            	
+            	
+            
+
+                this.cssLoadInterval = setInterval(function() {
+                    if(this._document.styleSheets.length > 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 = {};
+
+            
+                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];
+
+                    } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") {
+
+                        this.documentRoot.elementModel.stageBackground = 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;
+                */
+            }
+        }
+    },
+
+    /**
+     * public method
+     *
+     */
+	////////////////////////////////////////////////////////////////////
+	//
+	save: {
+		enumerable: false,
+    	value: function () {
+    		//TODO: Add code view logic and also styles for HTML
+    		if (this.currentView === 'design') {
+    			return {mode: 'html', document: this._userDocument, style: this._styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+    		} else if (this.currentView === "code"){
+    			//TODO: Would this get call when we are in code of HTML?
+    		} else {
+    			//Error
+    		}
+    	}
+	}
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+});
\ No newline at end of file
diff --git a/js/document/mediators/base-mediator.js b/js/document/mediators/base-mediator.js
new file mode 100755
index 00000000..be441da2
--- /dev/null
+++ b/js/document/mediators/base-mediator.js
@@ -0,0 +1,32 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = require("montage/core/core").Montage,
+	Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//	
+exports.ENTERNAME = Montage.create(Montage, {
+	////////////////////////////////////////////////////////////////////
+	//
+	hasTemplate: {
+		enumerable: false,
+        value: false
+    },
+	////////////////////////////////////////////////////////////////////
+    //
+	deserializedFromTemplate: {
+		enumerable: false,
+		value: function () {
+			//
+		}
+	}
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/document/models/base-document.js b/js/document/models/base-document.js
deleted file mode 100755
index 45c340ce..00000000
--- a/js/document/models/base-document.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-//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, {
-	
-	
-	//TODO: Clean up, test
-	
-	
-	
-	
-	
-	////////////////////////////////////////////////////////////////////
-	////////////////////////////////////////////////////////////////////
-	////////////////////////////////////////////////////////////////////
-	////////////////////////////////////////////////////////////////////
-	//Taken from text-document, which shouldn't be needed
-
-	// PRIVATE MEMBERS
-    _codeEditor: {
-        value: {
-            "editor": { value: null, enumerable: false },
-
-        }
-    },
-
-    _editor: { value: null, enumerable: false },
-    _hline: { value: null, enumerable: false },
-
-    _textArea: {value: null, enumerable: false },
-	
-	_userDocument: {value: null, enumerable: false },
-	
-    _source: { value: null, enumerable: false},
-
-    source: {
-        get: function() { return this._source;},
-        set: function(value) { this._source = value;}
-    },
-
-    // PUBLIC MEMBERS
-
-    _savedLeftScroll: {value:null},
-    _savedTopScroll: {value:null},
-
-    //****************************************//
-    //PUBLIC API
-
-
-    // GETTERS / SETTERS
-
-    savedLeftScroll:{
-        get: function() { return this._savedLeftScroll; },
-        set: function(value) { this._savedLeftScroll = value}
-    },
-
-    savedTopScroll:{
-        get: function() { return this._savedTopScroll; },
-        set: function(value) { this._savedTopScroll = value}
-    },
-
-    textArea: {
-        get: function() { return this._textArea; },
-        set: function(value) { this._textArea = value; }
-    },
-    editor: {
-        get: function() { return this._editor; },
-        set: function(value) { this._editor = value}
-    },
-
-    hline: {
-        get: function() { return this._hline; },
-        set: function(value) {this._hline = value; }
-    },
-
-    
-    ////////////////////////////////////////////////////////////////////
-	//
-    initialize: {
-    	value: function(file, uuid, textArea, container, callback) {
-        	//
-			this._userDocument = file;
-			//
-			this.init(file.name, file.uri, file.extension, container, uuid, callback);
-	        //
-    	    this.currentView = "code";
-        	this.textArea = textArea;
-        }
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-	save: {
-		enumerable: false,
-    	value: function () {
-    		//TODO: Improve sequence
-    		this.editor.save();
-    		return {mode: this._userDocument.extension, document: this._userDocument, content: this.textArea.value};
-    	}
-	},
-	////////////////////////////////////////////////////////////////////
-	////////////////////////////////////////////////////////////////////
-	////////////////////////////////////////////////////////////////////
-	////////////////////////////////////////////////////////////////////
-	
-	
-	
-	
-	
-	
-	
-	
-	
-	
-    /** 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?
-        }
-    }/*
-,
-
-    save:{
-        value:function(){
-            //base function - to be overridden
-        }
-    }
-*/
-
-});
\ No newline at end of file
diff --git a/js/document/models/base-model.js b/js/document/models/base-model.js
new file mode 100755
index 00000000..be441da2
--- /dev/null
+++ b/js/document/models/base-model.js
@@ -0,0 +1,32 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage = require("montage/core/core").Montage,
+	Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//	
+exports.ENTERNAME = Montage.create(Montage, {
+	////////////////////////////////////////////////////////////////////
+	//
+	hasTemplate: {
+		enumerable: false,
+        value: false
+    },
+	////////////////////////////////////////////////////////////////////
+    //
+	deserializedFromTemplate: {
+		enumerable: false,
+		value: function () {
+			//
+		}
+	}
+	////////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////////
+});
+////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/js/document/models/html-document.js b/js/document/models/html-document.js
deleted file mode 100755
index cb399f04..00000000
--- a/js/document/models/html-document.js
+++ /dev/null
@@ -1,492 +0,0 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-////////////////////////////////////////////////////////////////////////
-//
-var Montage = 		require("montage/core/core").Montage,
-    BaseDocument =	require("js/document/models/base-document").BaseDocument,
-    NJUtils = 		require("js/lib/NJUtils").NJUtils;
-////////////////////////////////////////////////////////////////////////
-//
-exports.HTMLDocument = Montage.create(BaseDocument, {
-    // PRIVATE MEMBERS
-    _selectionExclude: { value: null, enumerable: false },
-    _htmlTemplateUrl: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false},
-    _iframe: { value: null, enumerable: false },
-    _server: { value: null, enumerable: false },
-    _templateDocument: { 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 },
-