Preliminary IO to new DOM view

10 files changed, 201 insertions, 164 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 7795a74d..bb0f542f 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -366,7 +366,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
                                 case 'html':
                                         //Open in designer view
                     this._hackRootFlag = false;
-                    Montage.create(Document).init(doc, this, this._onOpenDocument);
+                    Montage.create(Document).init(doc, this, this._onOpenDocument, 'design');
                                         break;
                                 default:
                                         //Open in code view
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index 5665b09c..2bd774f5 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -152,7 +152,6 @@ exports.SelectionController = Montage.create(Component, {
 
     selectElement: {
         value: function(element) {
-
             if(this.findSelectedElement(element) === -1) {
 
                 if(this.application.ninja.currentDocument.inExclusion(element) !== -1){
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 28406ee8..ad82c371 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -7,117 +7,108 @@ 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;
-    HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel;
+        Component =         require("montage/ui/component").Component,
+    HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel,
+    DesignDocumentView = require("js/document/views/design").DesignDocumentView;
 ////////////////////////////////////////////////////////////////////////
 //      
 exports.HtmlDocument = Montage.create(Component, {
         ////////////////////////////////////////////////////////////////////
         //
         hasTemplate: {
-                enumerable: false,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
         //
     model: {
-        enumerable: false,
         value: null
     },
-        ////////////////////////////////////////////////////////////////////
-        //
-    loadDelegate: {
-        enumerable: false,
-        value: null
-    },
-        ////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////
         //
-    delegateContext: {
-        enumerable: false,
-        value: null
+    _document: {
+        value: null //TODO: Figure out if this will be needed, probably not
     },
         ////////////////////////////////////////////////////////////////////
         //
     exclusionList: {
-        enumerable: false,
-        value: ["HTML", "BODY"]
+        value: [] //TODO: Update to correct list
     },
         ////////////////////////////////////////////////////////////////////
-        ////////////////////////////////////////////////////////////////////
-        //TODO: Remove these setters/getters, should call model directly
-    name: {
-        get: function() {
-            return this.model._name;
-        },
-        set: function(value) {
-            this.model._name = value;
-        }
-    },
-    //
-    isActive: {
-        get: function() {
-            return this.model._isActive;
-        },
-        set: function(value) {
-            this.model._isActive = value;
-        }
-    },
-    //
-    needsSave: {
-        get: function() {
-            return this.model._needsSave;
-        },
-        set: function(value) {
-            this.model._needsSave = value;
-        }
-    },
-    //
+        //
     uuid: {
         get: function() {
             return this._uuid;
         }
     },
-    //
-    currentView: {
-        value: "design"
-    },
-        ////////////////////////////////////////////////////////////////////
-        ////////////////////////////////////////////////////////////////////
-    //
-    iframe: { //MOVE TO: base.js in views
-        value: null 
-    },
-    //
-    createView: { //MOVE TO: design.js in views
-        value: function() {
-            var ifr = document.createElement("iframe");
-            //
-            ifr.id = "document_" + this._uuid;
-            ifr.style.border = "none";
-            ifr.style.background = "#FFF";
-            ifr.style.height = "100%";
-            ifr.style.width = "100%";
-            //
-            ifr.src = "js/document/templates/montage-web/index.html";
-            ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true);
-                        //
-            return document.getElementById("iframeContainer").appendChild(ifr);
+    ////////////////////////////////////////////////////////////////////
+        //
+    inExclusion: {
+        value: function(element) {
+            if(this.exclusionList.indexOf(element.nodeName) === -1) {
+                return -1;
+            }
+            return 1;
         }
     },
         ////////////////////////////////////////////////////////////////////
-        ////////////////////////////////////////////////////////////////////
         //
     init: {
-        value:function(file, context, callback) {
-            this.model = Montage.create(HtmlDocumentModel, {
-                file: {
-                    value: file
-                }
+        value:function(file, context, callback, view) {
+            //Creating instance of HTML Document Model
+            this.model = Montage.create(HtmlDocumentModel,{
+                file: {value: file},
+                views: {value: {'design': DesignDocumentView.create(), 'code': null}} //TODO: Add code view logic
             });
-            this.name = file.name;
-            this.iframe = this.createView();
-            this.delegateContext = context;
-            this.loadDelegate = callback;
+            //Initiliazing views and hiding
+                if (this.model.views.design.initiliaze(document.getElementById("iframeContainer"))) {
+                        //Hiding iFrame, just initiliazing
+                        this.model.views.design.hide();
+                } else {
+                        //ERROR: Design View not initilized
+                }
+            //
+            if (view === 'design') {
+                //Showing design iFrame
+                this.model.views.design.show();
+                this.model.views.design.iframe.style.opacity = 0;
+                this.model.views.design.content = this.model.file.content;
+                //
+                this.model.views.design.render(function () {
+                        //Setting opacity to be viewable after load
+                        this.model.views.design.iframe.style.opacity = 1;
+                        
+                        
+                        
+                        
+                        //TODO: Identify and remove usage of '_document'
+                        this._document = this.model.views.design.document;
+                                //TODO: Check for needed
+                        this.documentRoot = this.model.views.design.document.body;
+                        //
+                        this._liveNodeList = this.documentRoot.getElementsByTagName('*');
+                        //
+                        document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body");
+                        
+                        
+                        
+                        
+                        this.hack = {callback: callback, context: context};
+                        
+                        setTimeout(function () {
+                                //Making callback after view is loaded
+                                this.hack.callback.call(this.hack.context, this);
+                        }.bind(this), 1000);
+                        
+                        
+