moveto - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/moveTo.js

 /*!
  * MoveTo - A lightweight, smooth scrolling javascript library without any dependency.
- * Version 1.4.0 (15-03-2017 12:40)
+ * Version 1.5.0 (18-03-2017 17:24)
  * Licensed under MIT
@@ -12,3 +12,3 @@ * Copyright 2017 Hasan Aydoğdu <[e-mail]>
                            * Defaults
-                           * @type {Object}
+                           * @type {object}
                            */
@@ -24,7 +24,7 @@ var defaults = {
                                          * easeOutQuart Easing Function
-                                         * @param  {Integer} t - current time
-                                         * @param  {Integer} b - start value
-                                         * @param  {Integer} c - change in value
-                                         * @param  {Integer} d - duration
-                                         * @return {Integer} - calculated value
+                                         * @param  {number} t - current time
+                                         * @param  {number} b - start value
+                                         * @param  {number} c - change in value
+                                         * @param  {number} d - duration
+                                         * @return {number} - calculated value
                                          */
@@ -39,4 +39,4 @@ function easeOutQuart(t, b, c, d) {
      * Returns html element's top and left offset
-     * @param  {Node} elem - Element
-     * @return {Object} Element top and left offset
+     * @param  {HTMLElement} elem - Element
+     * @return {object} Element top and left offset
      */
@@ -47,9 +47,8 @@ function getOffsetSum(elem) {
     while (elem) {
-      top += parseInt(elem.offsetTop, 10);
-      left += parseInt(elem.offsetLeft, 10);
+      top += elem.offsetTop;
+      left += elem.offsetLeft;
       elem = elem.offsetParent;
     }
     return {
-      top: top,
-      left: left };
+      top: top, left: left };
 
@@ -61,5 +60,5 @@ }
      *
-     * @param  {Object} obj1
-     * @param  {Object} obj2
-     * @return {Object} merged object
+     * @param  {object} obj1
+     * @param  {object} obj2
+     * @return {object} merged object
      */
@@ -85,3 +84,3 @@ function mergeObject(obj1, obj2) {
       * @param  {string} val the value to be converted
-      * @return {String} the converted value
+      * @return {string} the converted value
       */
@@ -94,3 +93,2 @@ function kebabCase(val) {
 
-
   /**
@@ -114,3 +112,3 @@ * Scrolls to an element
        * @param  {HTMLElement} dom Dom trigger element
-       * @param  {Function} callback Callback function
+       * @param  {function} callback Callback function
        */_createClass(MoveTo, [{ key: 'registerTrigger', value: function registerTrigger(
@@ -122,3 +120,3 @@ dom, callback) {var _this = this;
 
-        var href = dom.getAttribute('href');
+        var href = dom.getAttribute('href') || dom.getAttribute('data-target');
         // The element to be scrolled
@@ -143,4 +141,4 @@ var target = href && href !== '#' ?
          * Scrolls to given element by using easeOutQuart function
-         * @param  {HTMLElement|Number} target Target element to be scrolled or target position
-         * @param  {Object} options Custom options
+         * @param  {HTMLElement|number} target Target element to be scrolled or target position
+         * @param  {object} options Custom options
          */ }, { key: 'move', value: function move(
@@ -158,11 +156,18 @@ target) {var _this2 = this;var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var change = to - from;
-        var currentTime = 0;
-        var increment = 20;
+        var startTime = null;
         var lastPageYOffset = 0;
 
-        /*
-                                  * Scroll Animation Function
-                                  */
-        var animate = function animate() {
+        // rAF loop
+        var loop = function loop(currentTime) {
           var currentPageYOffset = window.pageYOffset;
+
+          if (!startTime) {
+            // To starts time from 1, we subtracted -1 from current time
+            // If time starts from 1 The first loop will not do anything,
+            // because easing value will be zero
+            startTime = currentTime - 1;
+          }
+
+          var timeElapsed = currentTime - startTime;
+
           if (lastPageYOffset !== 0) {
@@ -178,14 +183,18 @@ if (
           lastPageYOffset = currentPageYOffset;
-          currentTime += increment;
+
           var val = _this2.easeFunctions[options.easing](
-          currentTime, from, change, options.duration);
+          timeElapsed, from, change, options.duration);
 
+
           window.scroll(0, val);
-          if (currentTime < options.duration) {
-            setTimeout(animate, increment);
+
+          if (timeElapsed < options.duration) {
+            window.requestAnimationFrame(loop);
           } else {
+            window.scroll(0, to);
             options.callback(target);
           }
         };
-        animate();
+
+        window.requestAnimationFrame(loop);
       }
@@ -195,4 +204,4 @@
          * Adds custom ease function
-         * @param {String}   name Ease function name
-         * @param {Function} fn   Ease Function
+         * @param {string}   name Ease function name
+         * @param {function} fn   Ease function
          */ }, { key: 'addEaseFunction', value: function addEaseFunction(
@@ -207,4 +216,4 @@ name, fn) {
                                 * @param  {HTMLElement} dom Trigger dom element
-                                * @param  {Object} options The instance's options
-                                * @return {Object} The options which created from trigger dom element
+                                * @param  {object} options The instance's options
+                                * @return {object} The options which created from trigger dom element
                                 */
@@ -211,0 +220,0 @@ function _getOptionsFromTriggerDom(dom, options) {

dist/moveTo.min.js

 /*!
  * MoveTo - A lightweight, smooth scrolling javascript library without any dependency.
- * Version 1.4.0 (15-03-2017 12:40)
+ * Version 1.5.0 (18-03-2017 17:24)
  * Licensed under MIT
@@ -8,2 +8,2 @@ * Copyright 2017 Hasan Aydoğdu <[e-mail]>
 
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),MoveTo=function(){function e(e,t,n,o){return e/=o,e--,-n*(e*e*e*e-1)+t}function t(e){for(var t=0,n=0;e;)t+=parseInt(e.offsetTop,10),n+=parseInt(e.offsetLeft,10),e=e.offsetParent;return{top:t,left:n}}function n(e,t){var n={},o=void 0;for(o in e)e.hasOwnProperty(o)&&(n[o]=e[o]);for(o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);return n}function o(e){return e.replace(/([A-Z])/g,function(e){return"-"+e.toLowerCase()})}function r(e,t){var n={};return Object.keys(t).forEach(function(t){var r=e.getAttribute("data-mt-"+o(t));r&&(n[t]=isNaN(r)?r:parseInt(r,10))}),n}var a={tolerance:0,duration:800,easing:"easeOutQuart",callback:function(){}};return function(){function o(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,o),this.options=n(a,t),this.easeFunctions=n({easeOutQuart:e},r)}return _createClass(o,[{key:"registerTrigger",value:function(e,t){var o=this;if(e){var a=e.getAttribute("href"),i=a&&"#"!==a?document.getElementById(a.substring(1)):0,u=n(this.options,r(e,this.options));"function"==typeof t&&(u.callback=t),e.addEventListener("click",function(e){e.preventDefault(),o.move(i,u)})}}},{key:"move",value:function(e){var o=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(0===e||e){r=n(this.options,r);var a="number"==typeof e?e:t(e).top,i=window.pageYOffset;a-=r.tolerance;var u=a-i,s=0,c=0;!function t(){var n=window.pageYOffset;if(0!==c&&(c===n||u>0&&c>n||u<0&&c<n))return r.callback(e);c=n,s+=20;var a=o.easeFunctions[r.easing](s,i,u,r.duration);window.scroll(0,a),s<r.duration?setTimeout(t,20):r.callback(e)}()}}},{key:"addEaseFunction",value:function(e,t){this.easeFunctions[e]=t}}]),o}()}();"undefined"!=typeof module?module.exports=MoveTo:window.moveTo=MoveTo;
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),MoveTo=function(){function e(e,t,n,o){return e/=o,e--,-n*(e*e*e*e-1)+t}function t(e){for(var t=0,n=0;e;)t+=e.offsetTop,n+=e.offsetLeft,e=e.offsetParent;return{top:t,left:n}}function n(e,t){var n={},o=void 0;for(o in e)e.hasOwnProperty(o)&&(n[o]=e[o]);for(o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);return n}function o(e){return e.replace(/([A-Z])/g,function(e){return"-"+e.toLowerCase()})}function r(e,t){var n={};return Object.keys(t).forEach(function(t){var r=e.getAttribute("data-mt-"+o(t));r&&(n[t]=isNaN(r)?r:parseInt(r,10))}),n}var a={tolerance:0,duration:800,easing:"easeOutQuart",callback:function(){}};return function(){function o(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,o),this.options=n(a,t),this.easeFunctions=n({easeOutQuart:e},r)}return _createClass(o,[{key:"registerTrigger",value:function(e,t){var o=this;if(e){var a=e.getAttribute("href")||e.getAttribute("data-target"),i=a&&"#"!==a?document.getElementById(a.substring(1)):0,u=n(this.options,r(e,this.options));"function"==typeof t&&(u.callback=t),e.addEventListener("click",function(e){e.preventDefault(),o.move(i,u)})}}},{key:"move",value:function(e){var o=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(0===e||e){r=n(this.options,r);var a="number"==typeof e?e:t(e).top,i=window.pageYOffset;a-=r.tolerance;var u=a-i,s=null,c=0,f=function t(n){var f=window.pageYOffset;s||(s=n-1);var l=n-s;if(0!==c&&(c===f||u>0&&c>f||u<0&&c<f))return r.callback(e);c=f;var v=o.easeFunctions[r.easing](l,i,u,r.duration);window.scroll(0,v),l<r.duration?window.requestAnimationFrame(t):(window.scroll(0,a),r.callback(e))};window.requestAnimationFrame(f)}}},{key:"addEaseFunction",value:function(e,t){this.easeFunctions[e]=t}}]),o}()}();"undefined"!=typeof module?module.exports=MoveTo:window.moveTo=MoveTo;

gulpfile.js

 'use strict';
 
-var gulp = require('gulp');
-var del = require('del');
-var runSequence = require('run-sequence');
-var browserSync = require('browser-sync');
-var gulpLoadPlugins =  require('gulp-load-plugins');
-var lazypipe = require('lazypipe');
+const gulp = require('gulp');
+const del = require('del');
+const runSequence = require('run-sequence');
+const browserSync = require('browser-sync');
+const gulpLoadPlugins = require('gulp-load-plugins');
+const lazypipe = require('lazypipe');
 
-var $ = gulpLoadPlugins();
-var reload = browserSync.reload;
-var pkg = require('./package.json');
-var today = $.util.date('dd-mm-yyyy HH:MM');
+const $ = gulpLoadPlugins();
+const reload = browserSync.reload;
+const pkg = require('./package.json');
+const today = $.util.date('dd-mm-yyyy HH:MM');
 
-var browserSyncConfigs = {
+const browserSyncConfigs = {
   notify: false,
@@ -23,3 +23,3 @@ // Disable open automatically when Browsersync starts.
 
-var banner = [
+const banner = [
   '/*!',
@@ -34,3 +34,3 @@ ' * MoveTo - ' + pkg.description,
 
-gulp.task('scripts:lint', cb => {
+gulp.task('scripts:lint', (cb) => {
   return gulp.src('src/scripts/**/*.js')
@@ -43,3 +43,2 @@ .pipe($.eslint())
 gulp.task('scripts', ['scripts:lint'], () => {
-
   const scriptsMinChannel = lazypipe()
@@ -60,3 +59,3 @@ .pipe($.uglify)
 
-gulp.task('build', cb =>
+gulp.task('build', (cb) =>
   runSequence(
@@ -63,0 +62,0 @@ ['clean:dist'],

package.json

 {
   "name": "moveto",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A lightweight, smooth scrolling javascript library without any dependency.",
@@ -5,0 +5,0 @@ "main": "src/moveTo.js",

README.md

@@ -50,2 +50,6 @@ # MoveTo [![npm version](https://badge.fury.io/js/moveto.svg)](https://badge.fury.io/js/moveto) [![Bower version](https://badge.fury.io/bo/moveTo.svg)](https://badge.fury.io/bo/moveTo) [![Build Status](https://travis-ci.org/hsnaydd/moveTo.svg?branch=master)](https://travis-ci.org/hsnaydd/moveTo.js)
   <a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a>
+
+  <!-- or -->
+
+  <button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>
 ```
@@ -205,3 +209,3 @@
 
-It should work in the current stable releases of Chrome, Firefox, Safari as well as IE9 and up.
+It should work in the current stable releases of Chrome, Firefox, Safari as well as IE10 and up. To add support for older browsers, consider including polyfills/shims for the [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).
 
@@ -208,0 +212,0 @@ ## License

src/moveTo.js

@@ -5,3 +5,3 @@
    * Defaults
-   * @type {Object}
+   * @type {object}
    */
@@ -17,7 +17,7 @@ const defaults = {
    * easeOutQuart Easing Function
-   * @param  {Integer} t - current time
-   * @param  {Integer} b - start value
-   * @param  {Integer} c - change in value
-   * @param  {Integer} d - duration
-   * @return {Integer} - calculated value
+   * @param  {number} t - current time
+   * @param  {number} b - start value
+   * @param  {number} c - change in value
+   * @param  {number} d - duration
+   * @return {number} - calculated value
    */
@@ -32,4 +32,4 @@ function easeOutQuart(t, b, c, d) {
    * Returns html element's top and left offset
-   * @param  {Node} elem - Element
-   * @return {Object} Element top and left offset
+   * @param  {HTMLElement} elem - Element
+   * @return {object} Element top and left offset
    */
@@ -40,9 +40,8 @@ function getOffsetSum(elem) {
     while (elem) {
-      top += parseInt(elem.offsetTop, 10);
-      left += parseInt(elem.offsetLeft, 10);
+      top += elem.offsetTop;
+      left += elem.offsetLeft;
       elem = elem.offsetParent;
     }
     return {
-      top: top,
-      left: left,
+      top, left,
     };
@@ -54,5 +53,5 @@ }
    *
-   * @param  {Object} obj1
-   * @param  {Object} obj2
-   * @return {Object} merged object
+   * @param  {object} obj1
+   * @param  {object} obj2
+   * @return {object} merged object
    */
@@ -78,3 +77,3 @@ function mergeObject(obj1, obj2) {
    * @param  {string} val the value to be converted
-   * @return {String} the converted value
+   * @return {string} the converted value
    */
@@ -87,3 +86,2 @@ function kebabCase(val) {
 
-
   /**
@@ -107,3 +105,3 @@ * Scrolls to an element
      * @param  {HTMLElement} dom Dom trigger element
-     * @param  {Function} callback Callback function
+     * @param  {function} callback Callback function
      */
@@ -115,3 +113,3 @@ registerTrigger(dom, callback) {
 
-      const href = dom.getAttribute('href');
+      const href = dom.getAttribute('href') || dom.getAttribute('data-target');
       // The element to be scrolled
@@ -136,4 +134,4 @@ const target = (href && href !== '#')
      * Scrolls to given element by using easeOutQuart function
-     * @param  {HTMLElement|Number} target Target element to be scrolled or target position
-     * @param  {Object} options Custom options
+     * @param  {HTMLElement|number} target Target element to be scrolled or target position
+     * @param  {object} options Custom options
      */
@@ -151,11 +149,18 @@ move(target, options = {}) {
       const change = to - from;
-      let currentTime = 0;
-      const increment = 20;
+      let startTime = null;
       let lastPageYOffset = 0;
 
-      /*
-       * Scroll Animation Function
-       */
-      const animate = () => {
+      // rAF loop
+      const loop = (currentTime) => {
         let currentPageYOffset = window.pageYOffset;
+
+        if (!startTime) {
+          // To starts time from 1, we subtracted -1 from current time
+          // If time starts from 1 The first loop will not do anything,
+          // because easing value will be zero
+          startTime = currentTime - 1;
+        }
+
+        const timeElapsed = currentTime - startTime;
+
         if (lastPageYOffset !== 0) {
@@ -171,14 +176,18 @@ if (
         lastPageYOffset = currentPageYOffset;
-        currentTime += increment;
+
         const val = this.easeFunctions[options.easing](
-          currentTime, from, change, options.duration
+          timeElapsed, from, change, options.duration
         );
+
         window.scroll(0, val);
-        if (currentTime < options.duration) {
-          setTimeout(animate, increment);
+
+        if (timeElapsed < options.duration) {
+          window.requestAnimationFrame(loop);
         } else {
+          window.scroll(0, to);
           options.callback(target);
         }
       };
-      animate();
+
+      window.requestAnimationFrame(loop);
     }
@@ -188,4 +197,4 @@
      * Adds custom ease function
-     * @param {String}   name Ease function name
-     * @param {Function} fn   Ease Function
+     * @param {string}   name Ease function name
+     * @param {function} fn   Ease function
      */
@@ -200,4 +209,4 @@ addEaseFunction(name, fn) {
    * @param  {HTMLElement} dom Trigger dom element
-   * @param  {Object} options The instance's options
-   * @return {Object} The options which created from trigger dom element
+   * @param  {object} options The instance's options
+   * @return {object} The options which created from trigger dom element
    */
@@ -204,0 +213,0 @@ function _getOptionsFromTriggerDom(dom, options) {

tests/moveTo-spec.js

@@ -25,2 +25,8 @@ /* eslint-disable require-jsdoc */
 
+window.requestAnimationFrame = (function() {
+  return function(callback) {
+    window.setTimeout(callback, 1000 / 60);
+  };
+})();
+
 test('It should create instance successfully', (t) =>{
@@ -27,0 +33,0 @@ t.notThrows(() => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210429

increased by0.99%

Lines of code

691

increased by8.31%

Number of lines in readme file

213

increased by1.91%

No dependency changes