forcedotcom · diervo · Jul 26, 2014 · Jul 1, 2014 · Jul 5, 2014 · Jul 7, 2014
diff --git a/examples/feed/example-ptr-ptl-plugin.html b/examples/feed/example-ptr-ptl-plugin.html
@@ -304,7 +304,6 @@ <h5 class="bg-3 pam mbm">Scroller Configuration</h5>
                 pullToLoadMore  : true,
                 useCSSTransition: true,
                 lockOnDirection : 'horizontal',
-                gpuOptimization : true,
                 onPullToRefresh : ptr,
                 onPullToLoadMore: ptr,
                 scrollbars      : false,

diff --git a/src/plugins/pull-to-load-more.js b/src/plugins/pull-to-load-more.js
@@ -238,6 +238,10 @@
         * ==================================
         */
         getPTLSize: function () {
+            if (!this._ptlThreshold) {
+                this._ptlThreshold = this.ptlDOM.offsetHeight;
+            }
+
             return this._ptlThreshold;
         },
         getPTLSnapTime: function () {

diff --git a/src/plugins/zoom-fx-plugin.js b/src/plugins/zoom-fx-plugin.js
@@ -60,7 +60,7 @@
 
             matrix.m42 = y; // sets initial y
             matrix.m41 = x; // sets initial x
-            matrix.m33 = 0; // sets a z coord so is "matrix3d"
+            matrix.m33 = 1; // sets a z coord so is "matrix3d"
 
             matrix = matrix.scale(normalizedPos);
             //matrix = matrix.rotate(0,0, (2 * (3 + normalizedPos)), 0.01);

diff --git a/src/scroller.js b/src/scroller.js
@@ -88,6 +88,22 @@
         */
         SCROLL_HORIZONTAL = 'horizontal',
 
+        /**
+        * Configuration object for the MutatorObserver
+        *
+        * @property MUTATOR_OBSERVER_CONFIG
+        * @type Object
+        * @static
+        * @final
+        */
+        MUTATOR_OBSERVER_CONFIG = {
+            subtree    : true, 
+            childList  : true, 
+            attributes : false
+            // NOTE: if using attributeFilter
+            // Avoid listen for "style" attribute changes
+        },
+
         /**
         * Default configuration for the scroller.
         * This option can be modified at the static level
@@ -114,7 +130,9 @@
             scrollbars            : false,
             infiniteLoading       : false,
             gpuOptimization       : false,
-            debounce              : true
+            debounce              : true,
+            observeDomChanges     : true,
+            observeDomConfig      : MUTATOR_OBSERVER_CONFIG
         },
 
         /**
@@ -292,6 +310,37 @@
             }
         },
         /**
+        * Returns wether or not to obserChanges on the DOM
+        * By default `observeDomChanges` will be enabled 
+        * unless `gpuOptimization` is set to true.
+        *
+        * @method _observeChanges
+        * @return {Boolean} Boolean to wether observe changes or not.
+        * @protected
+        */
+        _observeChanges: function () {
+            return window.MutationObserver && this.opts.observeDomChanges && !this.opts.gpuOptimization;
+        },
+        /**
+        * Creates a MutationObserver object and 
+        * sets it to observe the Scoller wrapper elelement.
+        *
+        * @method _initializeDOMObserver
+        * @private
+        */
+        _initializeDOMObserver: function () {
+            var self     = this,
+                config   = this.opts.observeDomConfig,
+                observer = this.observer = new MutationObserver(function () {
+                    self._observedDOMChange.apply(self, arguments);
+                });
+
+            observer.observe(this.wrapper, config);
+        },
+        _observedDOMChange: function (e) {
+            this.refresh();
+        },
+        /**
         * Helper method to merge two object configurations.
         * Relies on the `Helpers` utility module.
         *
@@ -386,15 +435,14 @@
             var scrollerDOM = this.scroller,
                 // We need to take into account if the `PullToLoadMore` plugin is active
                 // and in that case substract the height from the scrollable area size
-                ptl         = this.opts.pullToLoadMore,
-                ptl_offset  = this._ptlThreshold || 0;
+                ptl         = this.opts.pullToLoadMore;
 
             this._setWrapperSize();
             this._sizePullToShowMore();
 
             // Once all the sizes are accurate, performn the scroll size calculations
             this.scrollerWidth  = scrollerDOM.offsetWidth;
-            this.scrollerHeight = ptl ? scrollerDOM.offsetHeight - ptl_offset : scrollerDOM.offsetHeight;
+            this.scrollerHeight = ptl ? scrollerDOM.offsetHeight - this.getPTLSize() : scrollerDOM.offsetHeight;
 
             this.maxScrollX     = this.wrapperWidth  - this.scrollerWidth;
             this.maxScrollY     = this.wrapperHeight - this.scrollerHeight;
@@ -417,6 +465,18 @@
         _sizePullToShowMore: function () {
             //To be overriden
         },
+        /**
+        * To be overriden by the `PullToShowMore` plugin.
+        * Gets the height of `PullToShowMore` so
+        * it can be taken into account when calculating the total scrollable size.
+        *
+        * @method getPTLSize
+        * @private
+        */
+        getPTLSize: function () {
+            return 0;
+        },
+
         /**
         * Private destroy function that is responsible for the destruction of the
         * instance itself. 
@@ -491,6 +551,10 @@
 
             eventType(this.scroller, 'transitionend', this);
             eventType(this.scroller, SUPPORT.prefix + 'TransitionEnd', this);
+
+            if (this._observeChanges()) {
+                this._initializeDOMObserver();
+            }
         },
 
         /**
@@ -535,8 +599,8 @@
             if (toHookMethod) {
                 if (when === HOOK_AFTER) {
                     this[method] = function () {
-                        var ret = toHookMethod.apply(this, arguments);
-                        return hookFn.call(this, ret);
+                        toHookMethod.apply(this, arguments);
+                        hookFn.apply(this, arguments);
                     };
                 } else if (when === HOOK_BEFORE) {
                     this[method] = function () {
@@ -883,6 +947,7 @@
             this._endMoveRAF(); // Always cancel the debounce RAF
 
             if (!this.enabled || !this.moved || (EVENT_TYPE[e.type] !== this._initiated)) {
+                this._initiated = false;
                 return;
             }
 

diff --git a/tasks/auratranspile.js b/tasks/auratranspile.js
@@ -22,12 +22,12 @@ module.exports = function(grunt) {
     var DEPENDENCIES = 'build/dependencies.min.js',
         SCROLLER     = 'src/scroller.js',
         SURFACEM     = 'src/surface-manager.js',
-        SCROLLBARS   = 'src/indicators-plugin.js',
-        PTR          = 'src/pull-to-refresh.js',
-        PTL          = 'src/pull-to-load-more.js',
-        IL           = 'src/infinite-loading.js',
-        EP           = 'src/endless-plugin.js',
-        SP           = 'src/snap-plugin.js';
+        SCROLLBARS   = 'src/plugins/indicators-plugin.js',
+        PTR          = 'src/plugins/pull-to-refresh.js',
+        PTL          = 'src/plugins/pull-to-load-more.js',
+        IL           = 'src/plugins/infinite-loading.js',
+        EP           = 'src/plugins/endless-plugin.js',
+        SP           = 'src/plugins/snap-plugin.js';
 
 
     grunt.registerTask('auratranspile', function () {