Merge pull request michalsnik#24 from michalsnik/fix-refresh-on-ajax

Fix refresh on DOM change
protofy · Jun 18, 2016 · 9bc42b8 · 9bc42b8
2 parents b99bd82 + fb0626d
commit 9bc42b8
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 5 deletions.
diff --git a/demo/async.html b/demo/async.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>AOS - Animate on scroll library</title>
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="../dist/aos.css" />
+  </head>
+  <body>
+    <div id="aos-demo" class="aos-all">
+      <div class="aos-item" aos="fade-up">
+        <div class="aos-item__inner colored-1"><h3>Lorem ipsum</h3></div>
+      </div>
+      <div class="aos-item" aos="fade-down">
+        <div class="aos-item__inner colored-2"><h3>dolor sit amet</h3></div>
+      </div>
+      <div class="aos-item" aos="zoom-out-down">
+        <div class="aos-item__inner colored-3"><h3>onsectetur adipisicing</h3></div>
+      </div>
+    </div>
+
+    <script src="../dist/aos.js"></script>
+    <script>
+      AOS.init({
+        easing: 'ease-in-out-sine'
+      });
+
+      setInterval(addItem, 1000);
+
+      var itemsCounter = 4;
+      var container = document.getElementById('aos-demo');
+
+      function addItem () {
+        var item = document.createElement('div');
+        item.classList.add('aos-item');
+        item.setAttribute('aos', 'fade-up');
+        item.innerHTML = '<div class="aos-item__inner colored-' + itemsCounter + '"><h3>Lorem ipsum</h3></div>';
+        container.appendChild(item);
+      }
+    </script>
+  </body>
+</html>
diff --git a/dist/aos.js b/dist/aos.js
diff --git a/dist/aos.js.map b/dist/aos.js.map
diff --git a/src/js/aos.js b/src/js/aos.js
@@ -59,6 +59,15 @@ var replaceDataAttr      = require('./helpers/replaceDataAttr');
         }
     };
 
+    /**
+     * Hard refresh
+     * create array with new elements and trigger refresh
+     */
+    var refreshHard = function() {
+        $aosElements = elements();
+        refresh();
+    };
+
     /**
      * Initializing AOS
      * - Create options merging defaults with user defined options
@@ -142,7 +151,7 @@ var replaceDataAttr      = require('./helpers/replaceDataAttr');
         document.addEventListener('DOMNodeRemoved', function(event) {
             var el = event.target;
             if (el && el.nodeType === 1 && el.hasAttribute && event.target.hasAttribute('aos')) {
-                _debounce(refresh, 50, true)
+                _debounce(refreshHard, 50, true)
             }
         });
 
@@ -151,7 +160,7 @@ var replaceDataAttr      = require('./helpers/replaceDataAttr');
          * If something is loaded by AJAX
          * it'll refresh plugin automatically
          */
-        observe('[aos]', refresh);
+        observe('[aos]', refreshHard);
 
         return $aosElements;
     };
@@ -161,7 +170,8 @@ var replaceDataAttr      = require('./helpers/replaceDataAttr');
      */
     var AOS = {
         init: init,
-        refresh: refresh
+        refresh: refresh,
+        refreshHard: refreshHard
     };
 
     module.exports = AOS;