4 files changed, 70 insertions, 21 deletions

diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js
index 90612f83..e41a1958 100755
--- a/node_modules/montage/ui/component.js
+++ b/node_modules/montage/ui/component.js
@@ -7,7 +7,6 @@
         @module montage/ui/component
     @requires montage/core/core
     @requires montage/core/event/mutable-event
-    @requires montage/core/bitfield
     @requires montage/ui/reel
     @requires montage/core/gate
     @requires montage/core/logger | component
@@ -16,7 +15,6 @@
 */
 var Montage = require("montage").Montage,
     MutableEvent = require("core/event/mutable-event").MutableEvent,
-    BitField = require("core/bitfield").BitField,
     Template = require("ui/template").Template,
     Gate = require("core/gate").Gate,
     logger = require("core/logger").logger("component"),
@@ -525,7 +523,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
     
     content: {
         get: function() {
-            return Array.prototype.slice.call(this._element.childNodes, 0);
+            if (this._element) {
+                return Array.prototype.slice.call(this._element.childNodes, 0);
+            } else {
+                return null;
+            }
         },
         set: function(value) {
             var components = [],
@@ -891,11 +893,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         Template.templateWithModuleId(info.require, templateModuleId, onTemplateLoad);
     }},
     /**
-    Callback for the <code>_canDrawBitField</code>.<br>
+    Callback for the <code>_canDrawGate</code>.<br>
     Propagates to the parent and adds the component to the draw list.
     @function
     @param {Property} gate
-    @see _canDrawBitField
+    @see _canDrawGate
     */
     gateDidBecomeTrue: {
         value: function(gate) {
@@ -1047,6 +1049,27 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         enumerable: false,
         value: null
     },
+
+    /**
+     * Called to add event listeners on demand
+     * @type function
+     * @private
+     */
+    _prepareForActivationEvents: {
+        value: function() {
+            var i = this.composerList.length, composer;
+            for (i = 0; i < this.composerList.length; i++) {
+                composer = this.composerList[i];
+                if (composer.lazyLoad) {
+                    composer._load();
+                }
+            }
+            if (typeof this.prepareForActivationEvents === "function") {
+                this.prepareForActivationEvents();
+            }
+        }
+    },
+
 /**
   Description TODO
   @private
@@ -1297,7 +1320,11 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
             this.composerList.push(composer);
 
             if (!this._firstDraw) {  // prepareForDraw has already happened so do the loading here
-                composer._load();
+                if (!composer.lazyLoad) {
+                    composer._load();
+                } else if (this._preparedForActivationEvents) { // even though it's lazyLoad prepareForActivationEvents has already happened
+                    composer._load();
+                }
             }
         }
     },
@@ -1671,7 +1698,7 @@ var rootComponent = Montage.create(Component, /** @lends module:montage/ui/compo
     */
     addToDrawCycle: {
         value: function(component) {
-            var needsDrawListIndex = this._readyToDrawListIndex, length;
+            var needsDrawListIndex = this._readyToDrawListIndex, length, composer;
 
             if (needsDrawListIndex.hasOwnProperty(component.uuid)) {
                 // Requesting a draw of a component that has already been drawn in the current cycle
@@ -1694,10 +1721,13 @@ var rootComponent = Montage.create(Component, /** @lends module:montage/ui/compo
                     component.prepareForDraw();
                 }
 
-                // Load any composers that have been added
+                // Load any non lazyLoad composers that have been added
                 length = component.composerList.length;
                 for (i = 0; i < length; i++) {
-                    component.composerList[i]._load();
+                    composer = component.composerList[i];
+                    if (!composer.lazyLoad) {
+                        composer._load();
+                    }
                 }
 
                 // Will we expose a different property, firstDraw, for components to check
diff --git a/node_modules/montage/ui/composer/composer.js b/node_modules/montage/ui/composer/composer.js
index 2f91bb22..eee7be67 100644
--- a/node_modules/montage/ui/composer/composer.js
+++ b/node_modules/montage/ui/composer/composer.js
@@ -40,6 +40,20 @@ exports.Composer = Montage.create(Montage, /** @lends module:montage/ui/composer
         }
     },
 
+
+    /**
+     * This property controls when a composer's load method is called.  If `false`
+     * the composer's load method is called immediately as part of the next draw
+     * cycle after addComposer has been called on its associated component.  If
+     * `true` loading of the composer is delayed until its associated component
+     * has prepareForActivationEvents called.
+     * @property
+     * @default false
+     */
+    lazyLoad: {
+        value: false
+    },
+
     _needsFrame: {
         value: false
     },
diff --git a/node_modules/montage/ui/composer/swipe-composer.js b/node_modules/montage/ui/composer/swipe-composer.js
index 4eb9ee3b..2d9fe266 100644
--- a/node_modules/montage/ui/composer/swipe-composer.js
+++ b/node_modules/montage/ui/composer/swipe-composer.js
@@ -208,17 +208,19 @@ exports.SwipeComposer = Montage.create(Composer, /** @lends module:montage/ui/co
                 }
             }
 
-            swipeEvent = document.createEvent("CustomEvent");
-            swipeEvent.initCustomEvent("swipemove", true, false, null);
-            swipeEvent.direction = direction;
-            swipeEvent.angle = this._startSwipeAngle;
-            swipeEvent.velocity = this._findVelocity((event.timeStamp - this._startTimestamp));
-            swipeEvent.startX = this._startX;
-            swipeEvent.startY = this._startY;
-            swipeEvent.dX = this._deltaX;
-            swipeEvent.dY = this._deltaY;
-
-            this.dispatchEvent(swipeEvent);
+            if (dX != 0 || dY != 0) {
+                swipeEvent = document.createEvent("CustomEvent");
+                swipeEvent.initCustomEvent("swipemove", true, false, null);
+                swipeEvent.direction = direction;
+                swipeEvent.angle = this._startSwipeAngle;
+                swipeEvent.velocity = this._findVelocity((event.timeStamp - this._startTimestamp));
+                swipeEvent.startX = this._startX;
+                swipeEvent.startY = this._startY;
+                swipeEvent.dX = this._deltaX;
+                swipeEvent.dY = this._deltaY;
+
+                this.dispatchEvent(swipeEvent);
+            }
         }
     },
 
diff --git a/node_modules/montage/ui/slot.reel/slot.js b/node_modules/montage/ui/slot.reel/slot.js
index 45c0ac1d..818cc68d 100755
--- a/node_modules/montage/ui/slot.reel/slot.js
+++ b/node_modules/montage/ui/slot.reel/slot.js
@@ -247,7 +247,10 @@ var Slot = exports.Slot = Montage.create(Component, /** @lends module:"montage/u
 
                 // Introduce to the componentTree if content appended was a component
                 if (this._contentToAppend && (typeof this._contentToAppend.element !== "undefined")) {
-                    this.childComponents = [this._contentToAppend];
+                    this._contentToAppend.attachToParentComponent();
+                    // HACK: gets around the issue of the component never being part of the draw loop again because of the idempotence of the needsDraw = true.
+                    this._contentToAppend.needsDraw = false;
+                    this._contentToAppend.needsDraw = true;
                 }
             }