scroll - npm Package Compare versions

Comparing version 0.0.3 to 1.0.0

index.js

 var raf = require('raf-component')
 var ease = require('ease-component')
-var listener = require('eventlistener')
 
-var scroll = function(direction, element, target, options, callback) {
+function scroll (prop, element, to, options, callback) {
+  var start = +new Date
+  var from = element[prop]
+  var cancelled = false
   var type = 'inOutSine'
@@ -12,3 +14,2 @@ var duration = 350
   }
-
   else {
@@ -18,32 +19,24 @@ options = options || {}
     duration = options.duration || duration
+    callback = callback || function () {}
   }
-  
-  callback = callback || function() {} 
 
-  var start = +new Date
-  var from = element['scroll' + direction]
-  var to = (target == null ?
-    element['scroll' + (direction === 'Top' ? 'Height' : 'Width')] :
-    target
-  )
+  var easing = ease[type]
 
-  var cancelled = false
-  var cancel = function() {
-    cancelled = true
-    listener.remove(element, 'mousewheel', cancel)
-  }
-  
   if (from === to) {
-    return callback(new Error(
-      'Element already at target position.'
-    ))
+    return callback(
+      new Error('Element already at target scroll position'),
+      element[prop]
+    )
   }
-  
-  listener.add(element, 'mousewheel', cancel)
 
-  var scroll = function(timestamp) {
+  function cancel () {
+    cancelled = true
+  }
+
+  function animate (timestamp) {
     if (cancelled) {
-      return callback(new Error(
-        'Scroll cancelled by the user.'
-      ))
+      return callback(
+        new Error('Scroll cancelled'),
+        element[prop]
+      )
     }
@@ -53,24 +46,23 @@
     var time = Math.min(1, ((now - start) / duration))
-    var eased = ease[type](time)
+    var eased = easing(time)
 
-    element['scroll' + direction] = (eased * (to - from)) + from
+    element[prop] = (eased * (to - from)) + from
 
-    if (time < 1) {
-      return raf(scroll)
-    }
-    
-    cancel()  
-    callback(null, element['scroll' + direction])
+    time < 1 ?
+      raf(animate) :
+      callback(null, element[prop])
   }
 
-  raf(scroll)
+  raf(animate)
+
+  return cancel
 }
 
 module.exports = {
-  top: function(element, target, options, callback) {
-    scroll('Top', element, target, options, callback)
+  top: function (element, to, options, callback) {
+    return scroll('scrollTop', element, to, options, callback)
   },
-  left: function(element, target, options, callback) {
-    scroll('Left', element, target, options, callback)
+  left: function (element, to, options, callback) {
+    return scroll('scrollLeft', element, to, options, callback)
   }
 }

package.json

 {
   "name": "scroll",
-  "version": "0.0.3",
-  "description": "A function that animates an element’s scrollTop/scrollLeft values.",
+  "version": "1.0.0",
+  "description": "A function that animates an element’s scrollTop or scrollLeft position.",
   "main": "index.js",
   "dependencies": {
     "ease-component": "~1.0.0",
-    "raf-component": "~1.1.2",
-    "eventlistener": "0.0.1"
+    "raf-component": "~1.1.2"
   },
@@ -11,0 +10,0 @@ "devDependencies": {

readme.md

 # scroll
-A function that animates an element’s scrollTop/scrollLeft values.
+A function that animates an element’s scrollTop or scrollLeft position.
 
@@ -11,24 +11,47 @@ [![Browser support](https://ci.testling.com/michaelrhodes/scroll.png)](https://ci.testling.com/michaelrhodes/scroll)
 
-### API
-```
-  scroll.top || scroll.left (
-    element (element),
-    target (number): the desired scrollTop position,
-    [options (object): { duration, ease },]
-    [callback (function): fn(error, position)]
-  ) 
-```
-Note: The easing functions are those specified in [component/ease](https://github.com/component/ease).
-
-### Example
+### Usage
 ``` js
 var scroll = require('scroll')
 
-var element = document.body
+var page = /Firefox/.test(navigator.userAgent) ?
+  document.documentElement :
+  document.body
 
-scroll.top(element, 200, { duration: 1000 }, function(error, position) {})
-scroll.left(element, -200, { ease: 'inBounce' })
+// Basic usage
+scroll.left(page, 200)
+
+// Register a callback
+scroll.top(page, 200, function (error, scrollTop) {
+  console.log(error)
+  // { message: "Scroll cancelled" } or
+  // { message: "Element already at target scroll position" } or
+  // null
+
+  console.log(scrollTop)
+  // => The new scrollTop position of the element
+  // This is always returned, even when there’s an `error`.
+})
+
+// Specify an easing function (default: 'inOutSine')
+scroll.left(page, 200, { ease: 'inBounce' })
+
+// Specify a duration in milliseconds (default: 350) and register a callback.
+scroll.left(page, 200, { duration: 1000 }, function (error, scrollLeft) {
+})
+
+// Cancel a scroll animation 
+var options = { ease: 'inBounce', duration: 1000 }
+var cancel = scroll.top(page, 200, options, function (error, scrollTop) {
+  console.log(error.message)
+  // => Scroll cancelled
+
+  page.removeEventListener('wheel', cancel)
+})
+
+page.addEventListener('wheel', cancel)
 ```
 
+Note: The easing functions are those specified in [component/ease](https://github.com/component/ease).
+
 ### License
 [MIT](http://opensource.org/licenses/MIT)

test/index.js

@@ -27,23 +27,36 @@ var run = require('tape')
 
-run('it works', function(test) {
+run('it scrolls', function (test) {
   container.scrollTop = 0
   container.scrollLeft = 200 
 
-  test.plan(2)
+  test.plan(3)
 
-  scroll.top(container, 200, function(error, position) {
-    clearTimeout(timeout)
+  scroll.top(container, 200, function (error, position) {
     test.ok(position === 200, 'it scrolled down 200 pixels')
+
+    scroll.top(container, 200, function (error, position) {
+      test.equal(error.message, 'Element already at target scroll position')
+    })
   })
 
   var leftOptions = { duration: 1000, ease: 'inBounce' }
-  scroll.left(container, -200, leftOptions, function(error, position) {
-    clearTimeout(timeout)
+  scroll.left(container, -200, leftOptions, function (error, position) {
     test.ok(position === 0, 'it scrolled across 200 pixels')
   })
+})
 
-  var timeout = setTimeout(function() {
-    test.fail('it never called back :\'(')
-    test.end() 
-  }, 1100)
+run('it can be cancelled', function (test) {
+  container.scrollTop = 0
+  container.scrollLeft = 200 
+
+  test.plan(2)
+
+  var options = { duration: 1000, ease: 'inBounce' }
+  var cancel = scroll.left(container, -200, options,
+    function (error, position) {
+      test.ok(error, 'it produced an error')
+      test.equal(error.message, 'Scroll cancelled', 'it cancelled the animation')
+    })
+
+  setTimeout(cancel, 500)
 })

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5331

increased by17.5%

Dependency count

2

decreased by-33.33%

Lines of code

100

increased by4.17%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

57

increased by67.65%

Dependency changes

• - Removedeventlistener@0.0.1

• - Removedeventlistener@0.0.1(transitive)