vue-smoothscroll - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/vue-smoothscroll.js

@@ -55,3 +55,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* 0 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
@@ -64,3 +64,3 @@ var SmoothScroll = __webpack_require__(1);
 	            inserted: function (el, binding) {
-	                SmoothScroll(el, binding.value["duration"], binding.value["callback"], binding.value["context"]);
+	                SmoothScroll(el, binding.value["duration"], binding.value["callback"], binding.value["context"], binding.value['axis']);
 	            }
@@ -76,129 +76,141 @@ });
 
-/***/ },
+/***/ }),
 /* 1 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
 	var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (root, smoothScroll) {
-	  'use strict';
+	    'use strict';
 
-	  // Support RequireJS and CommonJS/NodeJS module formats.
-	  // Attach smoothScroll to the `window` when executed as a <script>.
+	    // Support RequireJS and CommonJS/NodeJS module formats.
+	    // Attach smoothScroll to the `window` when executed as a <script>.
 
-	  // RequireJS
-	  if (true) {
-	    !(__WEBPACK_AMD_DEFINE_FACTORY__ = (smoothScroll), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+	    // RequireJS
 
-	  // CommonJS
-	  } else if (typeof exports === 'object' && typeof module === 'object') {
-	    module.exports = smoothScroll();
+	    if (true) {
+	        !(__WEBPACK_AMD_DEFINE_FACTORY__ = (smoothScroll), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
 
-	  } else {
-	    root.smoothScroll = smoothScroll();
-	  }
+	        // CommonJS
+	    } else if (typeof exports === 'object' && typeof module === 'object') {
+	        module.exports = smoothScroll();
+	    } else {
+	        root.smoothScroll = smoothScroll();
+	    }
+	})(this, function () {
+	    'use strict';
 
-	})(this, function(){
-	'use strict';
+	    // Do not initialize smoothScroll when running server side, handle it in client:
 
-	// Do not initialize smoothScroll when running server side, handle it in client:
-	if (typeof window !== 'object') return;
+	    if (typeof window !== 'object') return;
 
-	// We do not want this script to be applied in browsers that do not support those
-	// That means no smoothscroll on IE9 and below.
-	if(document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) { return; }
+	    // We do not want this script to be applied in browsers that do not support those
+	    // That means no smoothscroll on IE9 and below.
+	    if (document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) {
+	        return;
+	    }
 
-	// Get the top position of an element in the document
-	var getTop = function(element, start) {
-	    // return value of html.getBoundingClientRect().top ... IE : 0, other browsers : -pageYOffset
-	    if(element.nodeName === 'HTML') return -start
-	    return element.getBoundingClientRect().top + start
-	}
-	// ease in out function thanks to:
-	// http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
-	var easeInOutCubic = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
+	    // Get the top position of an element in the document
+	    var getTop = function (element, start, axis) {
+	        // return value of html.getBoundingClientRect().top ... IE : 0, other browsers : -pageYOffset
+	        if (element.nodeName === 'HTML') return -start;
+	        return (axis ? element.getBoundingClientRect().top : element.getBoundingClientRect().left) + start;
+	    };
+	    // ease in out function thanks to:
+	    // http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
+	    var easeInOutCubic = function (t) {
+	        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+	    };
 
-	// calculate the scroll position we should be in
-	// given the start and end point of the scroll
-	// the time elapsed from the beginning of the scroll
-	// and the total duration of the scroll (default 500ms)
-	var position = function(start, end, elapsed, duration) {
-	    if (elapsed > duration) return end;
-	    return start + (end - start) * easeInOutCubic(elapsed / duration); // <-- you can change the easing funtion there
-	    // return start + (end - start) * (elapsed / duration); // <-- this would give a linear scroll
-	}
+	    // calculate the scroll position we should be in
+	    // given the start and end point of the scroll
+	    // the time elapsed from the beginning of the scroll
+	    // and the total duration of the scroll (default 500ms)
+	    var position = function (start, end, elapsed, duration) {
+	        if (elapsed > duration) return end;
+	        return start + (end - start) * easeInOutCubic(elapsed / duration); // <-- you can change the easing funtion there
+	        // return start + (end - start) * (elapsed / duration); // <-- this would give a linear scroll
+	    };
 
-	// we use requestAnimationFrame to be called by the browser before every repaint
-	// if the first argument is an element then scroll to the top of this element
-	// if the first argument is numeric then scroll to this location
-	// if the callback exist, it is called when the scrolling is finished
-	// if context is set then scroll that element, else scroll window
-	var smoothScroll = function(el, duration, callback, context){
-	    duration = duration || 500;
-	    context = context || window;
-	    var start = context.scrollTop || window.pageYOffset;
+	    // we use requestAnimationFrame to be called by the browser before every repaint
+	    // if the first argument is an element then scroll to the top of this element
+	    // if the first argument is numeric then scroll to this location
+	    // if the callback exist, it is called when the scrolling is finished
+	    // if context is set then scroll that element, else scroll window
+	    var smoothScroll = function (el, duration, callback, context, axis) {
+	        duration = duration || 500;
+	        context = context || window;
+	        axis = axis === 'both' ? 0b11 : axis === 'y' ? 0b01 : axis === 'x' ? 0b10 : 0b01;
+	        var enableY = axis & 0b01,
+	            enableX = axis & 0b10;
+	        var startY = context.scrollTop || window.pageYOffset;
+	        var startX = context.screenLeft || window.pageXOffset;
+	        if (typeof el === 'number') {
+	            var endY = enableY && parseInt(el);
+	            var endX = enableX && parseInt(el);
+	        } else {
+	            var endY = enableY && getTop(el, startY, true);
+	            var endX = enableX && getTop(el, startX, false);
+	        }
 
-	    if (typeof el === 'number') {
-	      var end = parseInt(el);
-	    } else {
-	      var end = getTop(el, start);
-	    }
+	        var clock = Date.now();
+	        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (fn) {
+	            window.setTimeout(fn, 15);
+	        };
 
-	    var clock = Date.now();
-	    var requestAnimationFrame = window.requestAnimationFrame ||
-	        window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
-	        function(fn){window.setTimeout(fn, 15);};
+	        var step = function () {
+	            var elapsed = Date.now() - clock;
+	            if (context !== window) {
+	                if (enableY) {
+	                    context.scrollTop = position(startY, endY, elapsed, duration);
+	                }
+	                if (enableX) {
+	                    context.scrollLeft = position(startX, endX, elapsed, duration);
+	                }
+	            } else {
+	                window.scroll(enableX ? position(startX, endX, elapsed, duration) : startX, enableY ? position(startY, endY, elapsed, duration) : startY);
+	            }
 
-	    var step = function(){
-	        var elapsed = Date.now() - clock;
-	        if (context !== window) {
-	          context.scrollTop = position(start, end, elapsed, duration);
-	        }
-	        else {
-	          window.scroll(0, position(start, end, elapsed, duration));
-	        }
-
-	        if (elapsed > duration) {
-	            if (typeof callback === 'function') {
-	                callback(el);
+	            if (elapsed > duration) {
+	                if (typeof callback === 'function') {
+	                    callback(el);
+	                }
+	            } else {
+	                requestAnimationFrame(step);
 	            }
-	        } else {
-	            requestAnimationFrame(step);
-	        }
-	    }
-	    step();
-	}
+	        };
+	        step();
+	    };
 
-	var linkHandler = function(ev) {
-	    ev.preventDefault();
+	    var linkHandler = function (ev) {
+	        ev.preventDefault();
 
-	    if (location.hash !== this.hash) window.history.pushState(null, null, this.hash)
-	    // using the history api to solve issue #1 - back doesn't work
-	    // most browser don't update :target when the history api is used:
-	    // THIS IS A BUG FROM THE BROWSERS.
-	    // change the scrolling duration in this call
-	    var node = document.getElementById(this.hash.substring(1))
-	    if(!node) return; // Do not scroll to non-existing node
+	        if (location.hash !== this.hash) window.history.pushState(null, null, this.hash);
+	        // using the history api to solve issue #1 - back doesn't work
+	        // most browser don't update :target when the history api is used:
+	        // THIS IS A BUG FROM THE BROWSERS.
+	        // change the scrolling duration in this call
+	        var node = document.getElementById(this.hash.substring(1));
+	        if (!node) return; // Do not scroll to non-existing node
 
-	    smoothScroll(node, 500, function(el) {
-	        location.replace('#' + el.id)
-	        // this will cause the :target to be activated.
+	        smoothScroll(node, 500, function (el) {
+	            location.replace('#' + el.id);
+	            // this will cause the :target to be activated.
+	        });
+	    };
+
+	    // We look for all the internal links in the documents and attach the smoothscroll function
+	    document.addEventListener("DOMContentLoaded", function () {
+	        var internal = document.querySelectorAll('a[href^="#"]:not([href="#"])'),
+	            a;
+	        for (var i = internal.length; a = internal[--i];) {
+	            a.addEventListener("click", linkHandler, false);
+	        }
 	    });
-	}
 
-	// We look for all the internal links in the documents and attach the smoothscroll function
-	document.addEventListener("DOMContentLoaded", function () {
-	    var internal = document.querySelectorAll('a[href^="#"]:not([href="#"])'), a;
-	    for(var i=internal.length; a=internal[--i];){
-	        a.addEventListener("click", linkHandler, false);
-	    }
+	    // return smoothscroll API
+	    return smoothScroll;
 	});
 
-	// return smoothscroll API
-	return smoothScroll;
-
-	});
-
-
-/***/ }
+/***/ })
 /******/ ])
 });
 ;

index.js

@@ -1,12 +0,12 @@
-var SmoothScroll = require("smoothscroll")
+var SmoothScroll = require("./src/smoothscroll")
 module.exports = {
-    install: function(Vue, options) {
-        options = options || { name: 'smoothscroll' };
+    install: function (Vue, options) {
+        options = options || {name: 'smoothscroll'};
         Vue.directive(options.name, {
-            inserted: function(el, binding) {
-                SmoothScroll(el, binding.value["duration"], binding.value["callback"], binding.value["context"])
+            inserted: function (el, binding) {
+                SmoothScroll(el, binding.value["duration"], binding.value["callback"], binding.value["context"],binding.value['axis'])
             }
         })
         Object.defineProperty(Vue.prototype, '$SmoothScroll', {
-            get: function() {
+            get: function () {
                 return SmoothScroll;
@@ -13,0 +13,0 @@ }

package.json

 {
     "name": "vue-smoothscroll",
-    "homepage": "http://www.silentgo.com",
-    "version": "0.1.1",
+    "homepage": "http://www.hibuff.me",
+    "version": "0.2.0",
     "description": "it's a vuejs version of smoothscroll",
@@ -11,3 +11,2 @@ "author": "teddyzhu",
     "dependencies": {
-        "smoothscroll": "^0.3.0",
         "vue": "^1.0.21"
@@ -14,0 +13,0 @@ },

README.md

@@ -20,3 +20,3 @@ # vue-smoothscroll
    //define a tag
-   <div v-smoothscroll="{ duration : 500, callback: callback , context : undefined }" class="message">
+   <div v-smoothscroll="{ duration : 500, callback: callback , context : undefined , axis :'y' }" class="message">
        message
@@ -29,3 +29,3 @@ </div>
 ```javascript
-    this.$SmoothScroll(target,duration,callback,context);
+    this.$SmoothScroll(target,duration,callback,context，axis);
 ```
@@ -37,1 +37,2 @@ params
 * `context` is the scrolling context (optional, defaults to window, can be any `HTMLElement Object`)
+* `axis` is the x,y axis ,the value can be 'y' , 'x' , 'both', 'y' means horizontal direction, 'x' means vertical direction

New alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12057

12.27%

Dependency count

1

-50%

Lines of code

196

8.29%

Worsened metrics

Number of low quality alerts

2

100%

Dependency changes

• - Removed

  smoothscroll@^0.3.0

• - Removed

  smoothscroll@0.3.0
  (transitive)