Merge branch 'refs/heads/master-dom-architecture' into dom-architecture

7 files changed, 42 insertions, 33 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 91f4753d..afddaa19 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -500,7 +500,7 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
             if(currentDocument) {
                 if(currentDocument.currentView === "design") {
                     currentDocument.serializeDocument();
-                    this.application.ninja.selectionController._selectionContainer = null;
+                    this.application.ninja._currentSelectedContainer = this.application.ninja.selectionController._selectionContainer = null;
                     currentDocument.model.views.design.propertiesPanel.clear();
                 }
 
diff --git a/js/document/document-html.js b/js/document/document-html.js
index d6b4ba95..f92a425c 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -147,9 +147,10 @@ exports.HtmlDocument = Montage.create(Component, {
             this.model.userContentTop = this.application.ninja.stage._userContentTop;
 
 
-            // Serialize the selection
+            // Serialize the selection, the container and grid
             //TODO: Move this property to the design view class
             this.model.selection = this.application.ninja.selectedElements.slice(0);
+            this.model.selectionContainer = this.application.ninja.currentSelectedContainer;
             this.draw3DGrid = this.application.ninja.appModel.show3dGrid;
 
             // Serialize the undo
@@ -177,7 +178,7 @@ exports.HtmlDocument = Montage.create(Component, {
                         
                         //TODO: Move this property to the design view class
             this.application.ninja.selectedElements = this.model.selection.slice(0);
-
+//            this.application.ninja.currentSelectedContainer = this.model.selectionContainer;
             this.application.ninja.appModel.show3dGrid = this.draw3DGrid;
 
             // Serialize the undo
diff --git a/js/document/models/html.js b/js/document/models/html.js
index a97b4b5a..9cc8ce92 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -22,6 +22,11 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
     selection: {
         value: []
     },
+    ////////////////////////////////////////////////////////////////////
+    //
+    selectionContainer: {
+        value: []
+    },
         ////////////////////////////////////////////////////////////////////
         //
     draw3DGrid: {
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 80d1b406..9f1d1b3b 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -296,7 +296,7 @@ exports.Ninja = Montage.create(Component, {
             this.currentDocument = this.documentController.activeDocument;
 
             if(this.currentDocument.documentRoot) {
-                this._currentSelectedContainer = this.selectionController._currentSelectedContainer = this.currentDocument.documentRoot;
+                this._currentSelectedContainer = this.selectionController._selectionContainer = this.currentDocument.documentRoot;
             }
 
             NJevent("switchDocument");
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index eb362796..b292a66a 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -48,6 +48,7 @@ exports.Properties = Montage.create(Component, {
         value : function() {
             this.eventManager.addEventListener("openDocument", this, false);
             this.eventManager.addEventListener("selectionChange", this, false);
+            this.eventManager.addEventListener("closeDocument", this, false);
 
             // This will be a toggle option
             if(this.application.ninja.appData.PILiveUpdate) {
@@ -76,6 +77,12 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
+    handleCloseDocument: {
+        value: function(){
+            this.clear();
+        }
+    },
+
     /**
      * Blur and Key up to handle change in the Element ID field.
      */
@@ -172,6 +179,7 @@ exports.Properties = Montage.create(Component, {
             this.elementId.value = "";
             this.elementClass.value = "";
             this.customPi = null;
+            this.customSections = [];
         }
     },
 
@@ -211,27 +219,29 @@ exports.Properties = Montage.create(Component, {
                     controls = this.customSections[n].content.controls;
                     if(controls["colorSelect"]) {
                         controls["colorSelect"].destroy();
-                    } else if(controls["stageBackground"]) {
-                        controls["stageBackground"].destroy();
+                    } else if(controls["background"]) {
+                        controls["background"].destroy();
                     }
                 }
 
                 this.customPi = el.elementModel.pi;
                 this.displayCustomProperties(el, el.elementModel.pi);
-            }
 
-            // Root element color chip
-            if(isRoot) {
-                var backgroundChip = this.customSections[0].content.controls["background"];
-                var rootBackgroundColor = ElementsMediator.getProperty(el, "background");
+                // Root element color chip
+                if(isRoot) {
+                    var backgroundChip = this.customSections[0].content.controls["background"];
+                    var rootBackgroundColor = ElementsMediator.getProperty(el, "background");
 
-                if(rootBackgroundColor) {
-                    backgroundChip.color = rootBackgroundColor;
-                } else {
-                    backgroundChip.color = null;
+                    if(rootBackgroundColor) {
+                        backgroundChip.color = rootBackgroundColor;
+                    } else {
+                        backgroundChip.color = null;
+                    }
                 }
             }
 
+
+
                         var previousInput = this.application.ninja.colorController.colorModel.input;
             customPI = PiData[this.customPi];
             // Get all the custom section for the custom PI
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 49b4414e..b1fd910d 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -400,7 +400,7 @@ exports.CustomSection = Montage.create(Component, {
             this.controls[aField.id] = obj;
 
             // TODO - Hack for now to reference the color select object to unregister color chips
-            this.controls["stageBackground"] = obj;
+            this.controls["background"] = obj;
 
             return obj;
         }
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index f768f03a..69cfa7ba 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -468,26 +468,19 @@ exports.Stage = Montage.create(Component, {
      */
     handleScroll: {
         value: function() {
-             // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
-                this._scrollLeft = this._iframeContainer.scrollLeft;
-                this._scrollTop = this._iframeContainer.scrollTop;
 
-                this.userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
-                this.userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
-            } else {
-                this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft;
-                this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop;
+            this._scrollLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft;
+            this._scrollTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop;
 
-                this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
-                this.userContentTop = this._documentOffsetTop - this._scrollTop;
+            this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
+            this.userContentTop = this._documentOffsetTop - this._scrollTop;
+
+            // TODO - scroll events are not dependable.  We may need to use a timer to simulate
+            // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values
+            // on mouse down.
+            // this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
+            // this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
 
-                // TODO - scroll events are not dependable.  We may need to use a timer to simulate
-                // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values
-                // on mouse down.
-//                this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
-//                this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
-            }