2 files changed, 22 insertions, 24 deletions

diff --git a/js/document/templates/montage-html/default_html.css b/js/document/templates/montage-html/default_html.css
index 68300edf..6c2b415f 100755
--- a/js/document/templates/montage-html/default_html.css
+++ b/js/document/templates/montage-html/default_html.css
@@ -72,4 +72,8 @@ body
 
 .elem-red-outline {
   outline: red solid thin;
+}
+
+.nj-preset-transition {
+    -webkit-transition: all 450ms linear !important;
 }
\ No newline at end of file
diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js
index 567f481c..019c675e 100644
--- a/js/document/templates/montage-html/main.reel/main.js
+++ b/js/document/templates/montage-html/main.reel/main.js
@@ -17,38 +17,32 @@ exports.Main = Montage.create(Component, {
      */
     templateDidLoad: {
         value: function(){
-            window.addComponent = this.addComponentToUserDocument;
-//            window.addBinding = this.addBindingToUserDocument;
+            var self = this;
+            window.addComponent = function(element, data, callback) {
+                var component;
 
-            // Dispatch event when this template has loaded.
-            var newEvent = document.createEvent( "CustomEvent" );
-            newEvent.initCustomEvent( "userTemplateDidLoad", false, true );
+                component = require.async(data.path)
+                    .then(function(component) {
+                        var componentRequire = component[data.name];
+                        var componentInstance = componentRequire.create();
 
-            document.body.dispatchEvent( newEvent );
-
-        }
-    },
+                        componentInstance.element = element;
 
-    // Adding components to the user document by using a async require.
-    addComponentToUserDocument:{
-        value:function(element, data, callback){
+                        componentInstance.needsDraw = true;
+                        componentInstance.ownerComponent = self;
 
-            var component;
+                        callback(componentInstance, element);
+                    })
+                    .end();
 
-            component = require.async(data.path)
-                .then(function(component) {
-                    var componentRequire = component[data.name];
-                    var componentInstance = componentRequire.create();
+            };
 
-                    componentInstance.element = element;
-                    //componentInstance.deserializedFromTemplate();
-                    componentInstance.needsDraw = true;
+            // Dispatch event when this template has loaded.
+            var newEvent = document.createEvent( "CustomEvent" );
+            newEvent.initCustomEvent( "userTemplateDidLoad", false, true );
 
-                    callback(componentInstance, element);
-                })
-                .end();
+            document.body.dispatchEvent( newEvent );
 
         }
     }
-
 });
\ No newline at end of file