1 files changed, 61 insertions, 32 deletions

diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 534f77c7..217a536d 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -50,10 +50,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     handleAppLoaded : {
         value: function() {
-            ///// Bind app's activeDocument property to
-            ///// styles controller's _activeDocument property
+            ///// Bind app's currentDocument property to
+            ///// styles controller's _currentDocument property
 
-//            Object.defineBinding(this, "activeDocument", {
+//            Object.defineBinding(this, "currentDocument", {
 //                boundObject: this.application.ninja,
 //                boundObjectPropertyPath: "currentDocument",
 //                oneway: true
@@ -69,20 +69,20 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     },
     ///// Active document gets automatically set when the 
     ///// document controller changes it
-    _activeDocument : {
+    _currentDocument : {
         value : null,
         enumerable : false
     },
     
-    activeDocument : {
+    currentDocument : {
         get : function() {
-            return this._activeDocument;
+            return this._currentDocument;
         },
         set : function(document) {
             ///// If the document is null set default stylesheets to null
 
             if(!document || document.currentView === "code") {
-                this._activeDocument   = null;
+                this._currentDocument   = null;
                 this._stageStylesheet  = null;
                 this.defaultStylesheet = null;
                 this.userStyleSheets   = [];
@@ -91,7 +91,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
 
             ///// setting document via binding
-            this._activeDocument = document;
+            this._currentDocument = document;
             
             ///// Stage stylesheet should always be found
             this._stageStylesheet  = this.getSheetFromElement(this.CONST.STAGE_SHEET_ID);
@@ -103,6 +103,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 return sheet !== this._stageStylesheet;
             }, this);
 
+            this.initializeRootStyles();
+
             NJevent('styleSheetsReady', this);
         },
         enumerable : false
@@ -129,10 +131,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                     return false;
                 }
                 //check that the document has a design view
-                else if(this._activeDocument.model && this._activeDocument.model.views && this._activeDocument.model.views.design){
+                else if(this._currentDocument.model && this._currentDocument.model.views && this._currentDocument.model.views.design){
                     ///// Use the last stylesheet in the document as the default
 
-                    var sheets = this._activeDocument.model.views.design.document.styleSheets,
+                    var sheets = this._currentDocument.model.views.design.document.styleSheets,
                         lastIndex = sheets.length-1;
 
                     ///// If the only sheet is the stage stylesheet, this will be true
@@ -148,7 +150,37 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
         }
     },
-    
+
+    initializeRootStyles: {
+        value: function() {
+            var styles = {},
+                needsRule = false,
+                rule;
+
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "width", false, false) == null) {
+                styles['width'] = '100%';
+                needsRule = true;
+            }
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "height", false, false) == null) {
+                styles['height'] = '100%';
+                needsRule = true;
+            }
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform", false, false) == null) {
+                styles['-webkit-transform'] = 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)';
+                needsRule = true;
+            }
+            if(this.getElementStyle(this.currentDocument.model.documentRoot, "-webkit-transform-style", false, false) == null) {
+                styles['-webkit-transform-style'] = 'preserve-3d';
+                needsRule = true;
+            }
+
+            if(needsRule) {
+                rule = this.addRule('.ninja-body{}');
+                this.setStyles(rule, styles);
+                this.addClass(this.currentDocument.model.documentRoot, "ninja-body");
+            }
+        }
+    },
     /* ----------------- Rule methods ----------------- */
     
     ///// Add Rule
@@ -538,7 +570,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 return true;
             }
 
-            var doc = document || this._activeDocument;
+            var doc = document || this._currentDocument;
             ///// TODO: somehow cache the number of elements affected
             ///// by the rule, because querySelectorAll() is expensive
             return !!(doc.querySelectorAll(rule.selectorText).length > 1);
@@ -887,7 +919,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     getAnimationRuleWithName : {
         value: function(name, document) {
-            var doc = document || this._activeDocument.model.views.design.document,
+            var doc = document || this._currentDocument.model.views.design.document,
                 animRules = this.getDocumentAnimationRules(doc),
                 rule, i;
 
@@ -909,7 +941,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     getDocumentAnimationRules : {
         value: function(document) {
-            var sheets = (document) ? document.styleSheets : this._activeDocument.model.views.design.document.styleSheets,
+            var sheets = (document) ? document.styleSheets : this._currentDocument.model.views.design.document.styleSheets,
                 rules = [];
 
             nj.toArray(sheets).forEach(function(sheet) {
@@ -1272,7 +1304,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     createStylesheet : {
         value: function(id, document) {
-            var doc = document || this._activeDocument.model.views.design.document,
+            var doc = document || this._currentDocument.model.views.design.document,
                 sheetElement, sheet;
             
             sheetElement = nj.make('style', {
@@ -1329,15 +1361,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     getSheetFromElement : {
         value : function(element, context) {
-            var doc = context || this._activeDocument.model.views.design.document,
+            var doc = context || this._currentDocument.model.views.design.document,
                 el  = (typeof element === 'string') ? nj.$(element, doc) : element;
                 
             if(el && el.sheet) {
                 return el.sheet;
             }
-            
-            return;
-            
         }
     },
 
@@ -1363,7 +1392,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// If the sheet doesn't already exist in the list of modified
             ///// sheets, dispatch dirty event and add the sheet to the list
             if(sheetSearch.length === 0) {
-                NJevent('styleSheetDirty', eventData);
+                this.currentDocument.model.needsSave = true;
                 this.dirtyStyleSheets.push({
                     document : sheet.ownerNode.ownerDocument,
                     stylesheet : sheet
@@ -1572,7 +1601,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             getStyleTest : function() {
                 var properties = ['background-position', 'width', 'height'];
                 
-                var el = stylesController.activeDocument.model.views.design.document.getElementById('Div_1');
+                var el = stylesController.currentDocument.model.views.design.document.getElementById('Div_1');
                 
                 properties.forEach(function(prop) {
                     console.log('Getting value for "' + prop + '": ' + stylesController.getElementStyle(el, prop, true));
@@ -1591,7 +1620,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {