appear - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/appear.js

@@ -1,2 +0,2 @@
-/* appear 0.0.5 */
+/* appear 0.0.6 */
 appear = (function(){
@@ -25,2 +25,3 @@ 'use strict';
   function viewable(el, bounds){
+    
     var rect = el.getBoundingClientRect();
@@ -70,2 +71,11 @@ return (
 
+      function begin() {
+        // initial appear check before any scroll or resize event
+        doCheckAppear();
+
+        // add relevant listeners
+        addEventListener('scroll', checkAppear);
+        addEventListener('resize', checkAppear);
+      }
+
       function end() {
@@ -161,8 +171,3 @@ elements = null;
           }
-          // initial appear check before any scroll or resize event
-          doCheckAppear();
-
-          // add relevant listeners
-          addEventListener('scroll', checkAppear);
-          addEventListener('resize', checkAppear);
+          begin();
         }
@@ -173,2 +178,3 @@ }
         obj = obj || {};
+
         // assign the fn to execute when a node is visible
@@ -189,3 +195,3 @@ opts = {
           // the extra border around an element to make it viewable outside of the true viewport
-          bounds: obj.bounds || 200,
+          bounds: obj.bounds || 0,
           // the debounce timeout
@@ -210,7 +216,20 @@ debounce: obj.debounce || 50,
         return {
+          // the array of elements being tracked
+          elements: elements,
+          // manually fire check for visibility of tracked elements
+          trigger: function trigger(){
+            doCheckAppear();
+          },
+          // pause tracking of elements
+          pause: function pause(){
+            removeListeners();
+          },
+          // resume tracking of elements after a pause
+          resume: function resume(){
+            begin();
+          },
           // provide a means to stop monitoring all elements
           destroy: function destroy() {
             end();
-          },
-          elements: elements
+          }
         };
@@ -217,0 +236,0 @@

dist/appear.min.js

@@ -1,2 +0,2 @@
-/* appear 0.0.5 */
-appear=function(){"use strict";function e(){var e=window.scrollY;null!=n&&(r.velocity=e-n,r.delta=r.velocity>=0?r.velocity:-1*r.velocity),n=e,i&&clearTimeout(i),i=setTimeout(function(){n=null},30)}function t(e,t){var n=e.getBoundingClientRect();return n.top+n.height>=0&&n.left+n.width>=0&&n.bottom-n.height<=(window.innerHeight||document.documentElement.clientHeight)+t&&n.right-n.width<=(window.innerWidth||document.documentElement.clientWidth)+t}var n=null,i=0,r={};return addEventListener("scroll",e),function(e){return function(){function e(e,t){return function(){var n=this,i=arguments;clearTimeout(l),l=setTimeout(function(){e.apply(n,i)},t)}}function n(){r.delta<h.delta.speed&&(p||(p=!0,a(),setTimeout(function(){p=!1},h.delta.timeout))),e(function(){a()},h.debounce)()}function i(){s=null,l&&clearTimeout(l),o()}function o(){removeEventListener("scroll",n),removeEventListener("resize",n)}function a(){s.forEach(function(e,n){e&&t(e,h.bounds)?m[n]&&(m[n]=!1,f++,h.appear(e)&&h.appear(e),h.disappear||h.reappear||(s[n]=null)):(m[n]===!1&&(h.disappear&&h.disappear(e),v++,h.reappear||(s[n]=null)),m[n]=!0)}),h.reappear||h.appear&&(!h.appear||f!==d)||h.disappear&&(!h.disappear||v!==d)||(o(),h.done&&h.done())}function u(){if(!c){c=!0,h.init&&h.init();var e;if(e="function"==typeof h.elements?h.elements():h.elements){d=e.length;for(var t=0;d>t;t+=1)s.push(e[t]),m.push(!0);a(),addEventListener("scroll",n),addEventListener("resize",n)}}}var d,l,p,c=!1,s=[],m=[],f=0,v=0,h={};return function(e){return e=e||{},h={init:e.init,elements:e.elements,appear:e.appear,disappear:e.disappear,done:e.done,reappear:e.reappear,bounds:e.bounds||200,debounce:e.debounce||50,delta:{speed:e.deltaSpeed||50,timeout:e.deltaTimeout||500}},addEventListener("DOMContentLoaded",u),("interactive"===document.readyState||"complete"===document.readyState)&&u(),{destroy:function(){i()},elements:s}}}()(e)}}();
+/* appear 0.0.6 */
+appear=function(){"use strict";function e(){var e=window.scrollY;null!=n&&(r.velocity=e-n,r.delta=r.velocity>=0?r.velocity:-1*r.velocity),n=e,i&&clearTimeout(i),i=setTimeout(function(){n=null},30)}function t(e,t){var n=e.getBoundingClientRect();return n.top+n.height>=0&&n.left+n.width>=0&&n.bottom-n.height<=(window.innerHeight||document.documentElement.clientHeight)+t&&n.right-n.width<=(window.innerWidth||document.documentElement.clientWidth)+t}var n=null,i=0,r={};return addEventListener("scroll",e),function(e){return function(){function e(e,t){return function(){var n=this,i=arguments;clearTimeout(l),l=setTimeout(function(){e.apply(n,i)},t)}}function n(){r.delta<g.delta.speed&&(p||(p=!0,u(),setTimeout(function(){p=!1},g.delta.timeout))),e(function(){u()},g.debounce)()}function i(){u(),addEventListener("scroll",n),addEventListener("resize",n)}function o(){f=null,l&&clearTimeout(l),a()}function a(){removeEventListener("scroll",n),removeEventListener("resize",n)}function u(){f.forEach(function(e,n){e&&t(e,g.bounds)?m[n]&&(m[n]=!1,v++,g.appear(e)&&g.appear(e),g.disappear||g.reappear||(f[n]=null)):(m[n]===!1&&(g.disappear&&g.disappear(e),h++,g.reappear||(f[n]=null)),m[n]=!0)}),g.reappear||g.appear&&(!g.appear||v!==c)||g.disappear&&(!g.disappear||h!==c)||(a(),g.done&&g.done())}function d(){if(!s){s=!0,g.init&&g.init();var e;if(e="function"==typeof g.elements?g.elements():g.elements){c=e.length;for(var t=0;c>t;t+=1)f.push(e[t]),m.push(!0);i()}}}var c,l,p,s=!1,f=[],m=[],v=0,h=0,g={};return function(e){return e=e||{},g={init:e.init,elements:e.elements,appear:e.appear,disappear:e.disappear,done:e.done,reappear:e.reappear,bounds:e.bounds||0,debounce:e.debounce||50,delta:{speed:e.deltaSpeed||50,timeout:e.deltaTimeout||500}},addEventListener("DOMContentLoaded",d),("interactive"===document.readyState||"complete"===document.readyState)&&d(),{elements:f,trigger:function(){u()},pause:function(){a()},resume:function(){i()},destroy:function(){o()}}}}()(e)}}();

gulp/build.js

@@ -9,2 +9,3 @@ 'use strict';
 var replace = require('gulp-replace');
+var size = require('gulp-size');
 
@@ -18,2 +19,5 @@ module.exports = function(gulp, conf) {
       .pipe(replace(/void 0;/g, ''))
+      .pipe(size({
+        showFiles: true
+      }))
       .pipe(gulp.dest('dist'))
@@ -25,4 +29,11 @@ .pipe(rename(function(path) {
       .pipe(header(info))
+      .pipe(size({
+        showFiles: true
+      }))
+      .pipe(size({
+        showFiles: true,
+        gzip: true
+      }))
       .pipe(gulp.dest('dist'));
   });
 };

lib/appear.js

@@ -24,2 +24,3 @@ appear = (function(){
   function viewable(el, bounds){
+    console.log(bounds);
     var rect = el.getBoundingClientRect();
@@ -69,2 +70,11 @@ return (
 
+      function begin() {
+        // initial appear check before any scroll or resize event
+        doCheckAppear();
+
+        // add relevant listeners
+        addEventListener('scroll', checkAppear);
+        addEventListener('resize', checkAppear);
+      }
+
       function end() {
@@ -160,8 +170,3 @@ elements = null;
           }
-          // initial appear check before any scroll or resize event
-          doCheckAppear();
-
-          // add relevant listeners
-          addEventListener('scroll', checkAppear);
-          addEventListener('resize', checkAppear);
+          begin();
         }
@@ -172,2 +177,3 @@ }
         obj = obj || {};
+
         // assign the fn to execute when a node is visible
@@ -188,3 +194,3 @@ opts = {
           // the extra border around an element to make it viewable outside of the true viewport
-          bounds: obj.bounds || 200,
+          bounds: obj.bounds || 0,
           // the debounce timeout
@@ -209,7 +215,20 @@ debounce: obj.debounce || 50,
         return {
+          // the array of elements being tracked
+          elements: elements,
+          // manually fire check for visibility of tracked elements
+          trigger: function trigger(){
+            doCheckAppear();
+          },
+          // pause tracking of elements
+          pause: function pause(){
+            removeListeners();
+          },
+          // resume tracking of elements after a pause
+          resume: function resume(){
+            begin();
+          },
           // provide a means to stop monitoring all elements
           destroy: function destroy() {
             end();
-          },
-          elements: elements
+          }
         };
@@ -216,0 +235,0 @@

package.json

 {
   "name": "appear",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "utility to run functions when dom elements are visible",
@@ -22,3 +22,6 @@ "kewords": "detect viewable elements dom lazy load scroll ",
     "gulp-header": "^1.0.5",
-    "gulp-replace": "^0.4.0"
+    "gulp-replace": "^0.4.0",
+    "marked": "^0.2.9",
+    "ejstpl": "^3.3.0",
+    "gulp-size": "^0.4.0"
   },
@@ -25,0 +28,0 @@ "dependencies": {

README.md

@@ -7,18 +7,18 @@ # ![appear](https://raw.githubusercontent.com/creativelive/appear/master/assets/appear-64.png) appear
 
-Include the appear.js in your page, it has no dependencies.
+Include appear.js in your page, it has no dependencies.
 
-Then call `appear()` and pass in an object with the following options:
+Call `appear()` passing in an object with the following:
 
-- `init` *optional* function to run when dom is interactive, but appear.js has not yet started tracking items.
-- `elements` *required* either an htmlcollection or a function that returns an htmlcollection of items to track. The dom will be interactive at this point.
-- `appear` *optional* function to run when an element is in view, passed the element that has come into view. If defined then appear.js will track an item until it comes into view
-- `disappear` *optional* function to run when an element goes out of view, passed the element that has come into view. If defined then appear.js will track an item until it goes out of view
-- `reappear` *optional* boolean, set to keep tracking an object for successfuive appears and dissappears, false by default
-- `bounds` *optional* increase to the threshold of the size of the element so it can be considered "viewable" before it is actually in the viewport (default 200)
-- `debounce` *optional* appear.js tracks elements on browser scroll and resize, for performance reasons this check is "debounced" to only happen once for multiple events, 50ms after the last event ends. You can override this value here.
-- `deltaSpeed` *optional* appear.js will also check for items on continuous slow scrolling, you can controll how slow the scrolling should be via deltaSpeed, default is 50 (pixels)
-- `deltaTimeout` *optional* after a succesful delta speed check, when will appear.js check the viewable items again, default is 500ms
-- `done` *optional* function called when appear.js is no longer tracking any items and event listeners have been removed
+- `init` function to run when dom is interactive, but before appear.js has started tracking.
+- `elements` *required* function that returns an htmlcollection of elements to track. The dom will be interactive at this point. Can alternatively be an existing htmlcollection instead of a function.
+- `appear` function to run when an element is in view, passed the element that has come into view. If defined then appear.js will track elements until they come into view.
+- `disappear` function to run when an element goes out of view, passed the element that has gone out of view. If defined then appear.js will track elements until they go out of view.
+- `reappear` if true appear.js will keep tracking elements for successfuive appears and dissappears. Default is false.
+- `bounds` increase, in pixels, to the threshold size of the element so it can be "viewable" before it is actually in the viewport.
+- `debounce` appear.js tracks elements on browser scroll and resize, for performance reasons this check is "debounced" to only happen once for multiple events, 50ms after the last event ends. You can override this value here.
+- `deltaSpeed` in addition to debouncing, appear.js will also check for items during continuous slow scrolling, you can controll how slow the scrolling should be via this value. Default is 50 (pixels).
+- `deltaTimeout` after a succesful delta speed check, appear.js will not check for viewable items again until this timeout passes. Default is 500 (ms).
+- `done` function called when appear.js is no longer tracking any items and event listeners have been removed.
 
-Example usage:
+## Example
 
@@ -46,10 +46,17 @@ ```javascript
 
-Calling `appear(options)` returns an object with the following:
+`appear()` will return an object with the following:
 
-- `destory` function - call it to destroy the appear instance and stop listening for changes
-- `elements` the array of elements the appear instance is tracking
+- `elements` the array of elements the appear instance is tracking.
+- `trigger()` force a check for viewable elements.
+- `pause()` stop tracking elements.
+- `resume()` resume tracking elements.
+- `destroy()` destroy the appear instance, permanently stop tracking elements.
 
 
+## Download
+
+Here.
+
 ---
 
-appear.js logo designed by [Magicon](http://thenounproject.com/magicon) from the [Noun Project](http://thenounproject.com/) :: Creative Commons – Attribution (CC BY 3.0)
+appear.js logo designed by [Magicon](http://thenounproject.com/magicon) from the [Noun Project](http://thenounproject.com/) :: Creative Commons - Attribution (CC BY 3.0)

No alert changes

Improved metrics

Total package byte prevSize

88086

increased by60.56%

Number of package files

21

increased by50%

Lines of code

506

increased by13.96%

Number of lines in readme file

61

increased by12.96%

Worsened metrics

Dev dependency count

9

increased by50%

Number of low supply chain risk alerts

3

increased by50%

No dependency changes