Merge branch "master" of https://github.com/benarmston/angular-smooth…

…-scroll into benarmston-master
d-oliveros · Jul 30, 2014 · 5a039ea · 5a039ea
2 parents f5e6a26 + c396dc4
commit 5a039ea
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ Example:
 
 
 // With options
-<div smooth-scroll duration="800" easing="easeInQuint" offset="120">{{...}}</div>
+<div smooth-scroll duration="800" easing="easeInQuint" offset="120" callback-before="aFunction(element)" callback-after="anotherFunction">{{...}}</div>
 
 
 // With condition
@@ -66,7 +66,7 @@ Example:
 
 
 // With options
-<button scroll-to="elem-id5" duration="1800">Scroll to next page.</button>
+<button scroll-to="elem-id5" duration="1800" callback-before="aFunction(element)" callback-after="anotherFunction">Scroll to next page.</button>
 ```
 
 
@@ -87,7 +87,13 @@ var element = $elem[0];
 var options = {
 	duration: 700,
 	easing: 'easeInQuad',
-	offset: 120
+	offset: 120,
+	callbackBefore: function(element) {
+		console.log('about to scroll to element', element);
+	},
+	callbackAfter: function(element) {
+		console.log('scrolled to element', element);
+	}
 }
 
 smoothScroll(element, options);
@@ -118,10 +124,24 @@ Default: `0`
 The offset from the top of the page in which the scroll should stop.
 
 #### easing
-Type: `String`
-Default: `easeInOutQuart`
+type: `string`
+default: `easeinoutquart`
 
-The easing function to be used for this scroll.
+the easing function to be used for this scroll.
+
+#### callbackBefore
+type: `function`
+default: `function(element) {}`
+
+a callback function to run before the scroll has started. It is passed the
+element that will be scrolled to.
+
+#### callbackAfter
+type: `function`
+default: `function(element) {}`
+
+a callback function to run after the scroll has completed. It is passed the
+element that was scrolled to.
 
 ### Easing functions
 

diff --git a/angular-smooth-scroll-1.6.0.js b/angular-smooth-scroll-1.6.0.js
@@ -29,14 +29,35 @@ angular.module('smoothScroll', [])
 .directive('smoothScroll', ['$timeout', 'smoothScroll', function($timeout, smoothScroll){
 	return {
 		restrict: 'A',
+		scope: {
+			callbackBefore: '&',
+			callbackAfter: '&',
+		},
 		link: function($scope, $elem, $attrs){
 			$timeout(function(){
-
 				if ( typeof $attrs.scrollIf === 'undefined' || $attrs.scrollIf === 'true' ){
+					var callbackBefore = function(element) {
+						if ( $attrs.callbackBefore ) {
+							var exprHandler = $scope.callbackBefore({element: element});
+							if (typeof exprHandler === 'function') {
+								exprHandler(element);
+							}
+						}
+					}
+					var callbackAfter = function(element) {
+						if ( $attrs.callbackAfter ) {
+							var exprHandler = $scope.callbackAfter({element: element});
+							if (typeof exprHandler === 'function') {
+								exprHandler(element);
+							}
+						}
+					}
 					smoothScroll($elem[0], {
 						duration: $attrs.duration,
 						offset: $attrs.offset,
 						easing: $attrs.easing,
+						callbackBefore: callbackBefore,
+						callbackAfter: callbackAfter,
 					});
 				}
 
@@ -51,6 +72,10 @@ angular.module('smoothScroll', [])
 .directive('scrollTo', ['smoothScroll', function(smoothScroll){
 	return {
 		restrict: 'A',
+		scope: {
+			callbackBefore: '&',
+			callbackAfter: '&',
+		},
 		link: function($scope, $elem, $attrs){
 			var targetElement;
 
@@ -60,10 +85,29 @@ angular.module('smoothScroll', [])
 				if ( targetElement ) {
 					e.preventDefault();
 
+					var callbackBefore = function(element) {
+						if ( $attrs.callbackBefore ) {
+							var exprHandler = $scope.callbackBefore({element: element});
+							if (typeof exprHandler === 'function') {
+								exprHandler(element);
+							}
+						}
+					}
+					var callbackAfter = function(element) {
+						if ( $attrs.callbackAfter ) {
+							var exprHandler = $scope.callbackAfter({element: element});
+							if (typeof exprHandler === 'function') {
+								exprHandler(element);
+							}
+						}
+					}
+
 					smoothScroll(targetElement, {
 						duration: $attrs.duration,
 						offset: $attrs.offset,
 						easing: $attrs.easing,
+						callbackBefore: callbackBefore,
+						callbackAfter: callbackAfter,
 					});
 
 					return false;
@@ -94,7 +138,9 @@ angular.module('smoothScroll', [])
 			options = options || {};
 			var duration = options.duration || 800,
 				offset = options.offset || 0,
-				easing = options.easing || 'easeInOutQuart';
+				easing = options.easing || 'easeInOutQuart',
+				callbackBefore = options.callbackBefore || function() {},
+				callbackAfter = options.callbackAfter || function() {};
 
 
 			// Calculate the easing pattern
@@ -139,6 +185,7 @@ angular.module('smoothScroll', [])
 				var currentLocation = getScrollLocation();
 				if ( position == endLocation || currentLocation == endLocation || ( (window.innerHeight + currentLocation) >= document.body.scrollHeight ) ) {
 					clearInterval(runAnimation);
+					callbackAfter(element);
 				}
 			};
 
@@ -157,6 +204,7 @@ angular.module('smoothScroll', [])
 
 			// Init
 			//
+			callbackBefore(element);
 			var runAnimation = setInterval(animateScroll, 16);
 		});
 	};