From 1e769bc21e496bb7ed3f5adcfb3a9d834a472de0 Mon Sep 17 00:00:00 2001 From: Matt Kirchstein Date: Wed, 21 May 2014 20:55:28 -0700 Subject: [PATCH 1/7] Added a triggerScroll() hook to allow scroll action to be initiated from a Controller --- README.md | 7 +++++ angular-scrollto.js | 66 ++++++++++++++++++++++++----------------- angular-scrollto.min.js | 2 +- bower.json | 7 +++-- package.json | 8 ++--- 5 files changed, 55 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index c6b3364..2b5f1fb 100644 --- a/README.md +++ b/README.md @@ -58,3 +58,10 @@ Length of time, in milliseconds, the animation will take. Default value: `html, body` The container element to scroll. + +### [UPDATED 2014-05-21] Included hook allow the scrolling action to be triggered from a controller + +Added a `triggerScroll(delay)` function that will trigger the scroll action after an optional delay (in milliseconds) + + + diff --git a/angular-scrollto.js b/angular-scrollto.js index 3ee53e4..957b0de 100644 --- a/angular-scrollto.js +++ b/angular-scrollto.js @@ -1,33 +1,45 @@ angular.module('scrollto', []); angular.module('scrollto') - .directive('scrollTo', ['$timeout', function ($timeout) { + .directive('scrollTo', [ + + '$timeout', + + function ($timeout) { - function scroll (settings) { - return function () { - var scrollPane = angular.element(settings.container); - var scrollTo = (typeof settings.scrollTo == "number") ? settings.scrollTo : angular.element(settings.scrollTo); - var scrollY = (typeof scrollTo == "number") ? scrollTo : scrollTo.offset().top - settings.offset; - scrollPane.animate({scrollTop : scrollY }, settings.duration, settings.easing, function(){ - if (typeof callback == 'function') { callback.call(this); } - }); + function scroll (settings) { + return function () { + var scrollPane = angular.element(settings.container); + var scrollTo = (typeof settings.scrollTo == "number") ? settings.scrollTo : angular.element(settings.scrollTo); + var scrollY = (typeof scrollTo == "number") ? scrollTo : scrollTo.offset().top - settings.offset; + scrollPane.animate({scrollTop : scrollY }, settings.duration, settings.easing, function(){ + if (typeof callback == 'function') { callback.call(this); } + }); + } } + + return { + restrict: 'A', + link: function (scope, element, attrs) { + var settings = angular.extend({ + container: 'html, body', + scrollTo: angular.element(), + offset: 0, + duration: 150, + easing: 'swing' + }, attrs); + + element.on('click', function () { + $timeout(scroll(settings)); + }); + + // Hook to trigger the scrolling action outside of the target element (e.g. can call from a Controller) + scope.triggerScroll = function(delay) { + delay = delay || 0; // delay is optional + $timeout(scroll(settings), delay); + }; + + } + }; } - - return { - restrict: 'A', - link: function (scope, element, attrs) { - var settings = angular.extend({ - container: 'html, body', - scrollTo: angular.element(), - offset: 0, - duration: 150, - easing: 'swing' - }, attrs); - - element.on('click', function () { - $timeout(scroll(settings)); - }); - } - }; - }]); \ No newline at end of file + ]); \ No newline at end of file diff --git a/angular-scrollto.min.js b/angular-scrollto.min.js index fd3374e..d899412 100644 --- a/angular-scrollto.min.js +++ b/angular-scrollto.min.js @@ -1 +1 @@ -angular.module("scrollto",[]),angular.module("scrollto").directive("scrollTo",["$timeout",function(a){function b(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo),d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}return{restrict:"A",link:function(c,d,e){var f=angular.extend({container:"html, body",scrollTo:angular.element(),offset:0,duration:150,easing:"swing"},e);d.on("click",function(){a(b(f))})}}}]); \ No newline at end of file +angular.module("scrollto",[]),angular.module("scrollto").directive("scrollTo",["$timeout",function(a){function b(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo),d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}return{restrict:"A",link:function(c,d,e){var f=angular.extend({container:"html, body",scrollTo:angular.element(),offset:0,duration:150,easing:"swing"},e);d.on("click",function(){a(b(f))}),c.triggerScroll=function(c){c=c||0,a(b(f),c)}}}}]); \ No newline at end of file diff --git a/bower.json b/bower.json index 82701eb..15d42dd 100644 --- a/bower.json +++ b/bower.json @@ -1,9 +1,10 @@ { "name": "angular-scrollto", - "version": "0.1.4", - "homepage": "https://github.com/scottcorgan/angular-scrollto", + "version": "0.1.5", + "homepage": "https://github.com/mkirchstein/angular-scrollto", "authors": [ - "Scott Corgan " + "Scott Corgan ", + "Matt Kirchstein " ], "description": "Angular directive to scroll to element by selector", "main": "angular-scrollto.js", diff --git a/package.json b/package.json index 6425ca1..8fee5d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.4", + "version": "0.1.5", "description": "Angular directive to scroll to element by selector", "main": "angular-scrollto.js", "scripts": { @@ -8,17 +8,17 @@ }, "repository": { "type": "git", - "url": "https://github.com/scottcorgan/angular-scrollto.git" + "url": "https://github.com/mkirchstein/angular-scrollto.git" }, "keywords": [ "angular", "scroll", "directive" ], - "author": "Scott Corgan", + "author": "Scott Corgan, Matt Kirchstein", "license": "MIT", "bugs": { - "url": "https://github.com/scottcorgan/angular-scrollto/issues" + "url": "https://github.com/mkirchstein/angular-scrollto/issues" }, "devDependencies": { "grunt": "~0.4.2", From ced120f83b925cee279b8ddb25ae2da9210554f1 Mon Sep 17 00:00:00 2001 From: Matt Kirchstein Date: Thu, 22 May 2014 15:23:41 -0700 Subject: [PATCH 2/7] Failing gracefully when target elelment no longer present --- angular-scrollto.js | 7 +++++++ angular-scrollto.min.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/angular-scrollto.js b/angular-scrollto.js index 957b0de..3bf41a0 100644 --- a/angular-scrollto.js +++ b/angular-scrollto.js @@ -9,9 +9,15 @@ angular.module('scrollto') function scroll (settings) { return function () { + var scrollPane = angular.element(settings.container); + var scrollTo = (typeof settings.scrollTo == "number") ? settings.scrollTo : angular.element(settings.scrollTo); + + if (typeof scrollTo == 'undefined') { return; } // element no longer available + var scrollY = (typeof scrollTo == "number") ? scrollTo : scrollTo.offset().top - settings.offset; + scrollPane.animate({scrollTop : scrollY }, settings.duration, settings.easing, function(){ if (typeof callback == 'function') { callback.call(this); } }); @@ -21,6 +27,7 @@ angular.module('scrollto') return { restrict: 'A', link: function (scope, element, attrs) { + var settings = angular.extend({ container: 'html, body', scrollTo: angular.element(), diff --git a/angular-scrollto.min.js b/angular-scrollto.min.js index d899412..f72d069 100644 --- a/angular-scrollto.min.js +++ b/angular-scrollto.min.js @@ -1 +1 @@ -angular.module("scrollto",[]),angular.module("scrollto").directive("scrollTo",["$timeout",function(a){function b(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo),d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}return{restrict:"A",link:function(c,d,e){var f=angular.extend({container:"html, body",scrollTo:angular.element(),offset:0,duration:150,easing:"swing"},e);d.on("click",function(){a(b(f))}),c.triggerScroll=function(c){c=c||0,a(b(f),c)}}}}]); \ No newline at end of file +angular.module("scrollto",[]),angular.module("scrollto").directive("scrollTo",["$timeout",function(a){function b(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo);if("undefined"!=typeof c){var d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}}return{restrict:"A",link:function(c,d,e){var f=angular.extend({container:"html, body",scrollTo:angular.element(),offset:0,duration:150,easing:"swing"},e);d.on("click",function(){a(b(f))}),c.triggerScroll=function(c){c=c||0,a(b(f),c)}}}}]); \ No newline at end of file From 03ea0332d52c2c81b11499145279c0b92a46b913 Mon Sep 17 00:00:00 2001 From: Matt Kirchstein Date: Thu, 22 May 2014 15:26:37 -0700 Subject: [PATCH 3/7] Failing gracefully when target elelment no longer present --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 15d42dd..3d98ea2 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.5", + "version": "0.1.6", "homepage": "https://github.com/mkirchstein/angular-scrollto", "authors": [ "Scott Corgan ", diff --git a/package.json b/package.json index 8fee5d7..cfd481b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.5", + "version": "0.1.6", "description": "Angular directive to scroll to element by selector", "main": "angular-scrollto.js", "scripts": { From 835028c5cf468b8b211f11edfa0f6d4561da7d52 Mon Sep 17 00:00:00 2001 From: Matt Kirchstein Date: Thu, 22 May 2014 16:02:33 -0700 Subject: [PATCH 4/7] Bug fix --- angular-scrollto.js | 2 +- angular-scrollto.min.js | 2 +- bower.json | 2 +- package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/angular-scrollto.js b/angular-scrollto.js index 3bf41a0..253b7c0 100644 --- a/angular-scrollto.js +++ b/angular-scrollto.js @@ -14,7 +14,7 @@ angular.module('scrollto') var scrollTo = (typeof settings.scrollTo == "number") ? settings.scrollTo : angular.element(settings.scrollTo); - if (typeof scrollTo == 'undefined') { return; } // element no longer available + if (typeof scrollTo.offset() == 'undefined') { return; } // element no longer available var scrollY = (typeof scrollTo == "number") ? scrollTo : scrollTo.offset().top - settings.offset; diff --git a/angular-scrollto.min.js b/angular-scrollto.min.js index f72d069..979464b 100644 --- a/angular-scrollto.min.js +++ b/angular-scrollto.min.js @@ -1 +1 @@ -angular.module("scrollto",[]),angular.module("scrollto").directive("scrollTo",["$timeout",function(a){function b(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo);if("undefined"!=typeof c){var d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}}return{restrict:"A",link:function(c,d,e){var f=angular.extend({container:"html, body",scrollTo:angular.element(),offset:0,duration:150,easing:"swing"},e);d.on("click",function(){a(b(f))}),c.triggerScroll=function(c){c=c||0,a(b(f),c)}}}}]); \ No newline at end of file +angular.module("scrollto",[]),angular.module("scrollto").directive("scrollTo",["$timeout",function(a){function b(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo);if("undefined"!=typeof c.offset()){var d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}}return{restrict:"A",link:function(c,d,e){var f=angular.extend({container:"html, body",scrollTo:angular.element(),offset:0,duration:150,easing:"swing"},e);d.on("click",function(){a(b(f))}),c.triggerScroll=function(c){c=c||0,a(b(f),c)}}}}]); \ No newline at end of file diff --git a/bower.json b/bower.json index 3d98ea2..ab36730 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.6", + "version": "0.1.7", "homepage": "https://github.com/mkirchstein/angular-scrollto", "authors": [ "Scott Corgan ", diff --git a/package.json b/package.json index cfd481b..5d2f72a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.6", + "version": "0.1.7", "description": "Angular directive to scroll to element by selector", "main": "angular-scrollto.js", "scripts": { From 48d8d6da45da45a79c644ab10b6187b375093388 Mon Sep 17 00:00:00 2001 From: Matt Kirchstein Date: Sat, 24 May 2014 01:18:44 -0700 Subject: [PATCH 5/7] Version bump --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index ab36730..0bdfb42 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.7", + "version": "0.1.8", "homepage": "https://github.com/mkirchstein/angular-scrollto", "authors": [ "Scott Corgan ", diff --git a/package.json b/package.json index 5d2f72a..80a889e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.7", + "version": "0.1.8", "description": "Angular directive to scroll to element by selector", "main": "angular-scrollto.js", "scripts": { From a4b90eacc4e52f26e4b29fa13890d0db552ca3be Mon Sep 17 00:00:00 2001 From: Dieter Geerts Date: Thu, 15 Jan 2015 14:16:02 +0100 Subject: [PATCH 6/7] Added scrollToConfig provider to be able to set global config options + Used IIFE to avoid polluting the global scope + Version bump. --- .gitignore | 2 ++ angular-scrollto.js | 77 ++++++++++++++++++----------------------- angular-scrollto.min.js | 2 +- bower.json | 5 +-- package.json | 4 +-- 5 files changed, 42 insertions(+), 48 deletions(-) diff --git a/.gitignore b/.gitignore index a72b52e..d03b49a 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,5 @@ results npm-debug.log node_modules + +.idea \ No newline at end of file diff --git a/angular-scrollto.js b/angular-scrollto.js index 253b7c0..25f5f76 100644 --- a/angular-scrollto.js +++ b/angular-scrollto.js @@ -1,52 +1,43 @@ -angular.module('scrollto', []); +(function () { + 'use strict'; -angular.module('scrollto') - .directive('scrollTo', [ + angular.module('scrollto', []) + .provider('scrollToConfig', scrollToConfig) + .directive('scrollTo', scrollTo); - '$timeout', + function scrollToConfig() { + this.config = {container: 'html, body', offset: 0, duration: 150}; + this.$get = function () { return {config: this.config}; }; + } - function ($timeout) { - - function scroll (settings) { - return function () { + scrollTo.$inject = ['$timeout', 'scrollToConfig']; - var scrollPane = angular.element(settings.container); + function scrollTo($timeout, scrollToConfig) { + return {restrict: 'A', link: link}; - var scrollTo = (typeof settings.scrollTo == "number") ? settings.scrollTo : angular.element(settings.scrollTo); + function link(scope, element, attrs) { + var settings = angular.extend( + {scrollTo: angular.element(), easing: 'swing'}, + scrollToConfig.config, attrs); + element.on('click', function () { $timeout(scroll(settings)); }); - if (typeof scrollTo.offset() == 'undefined') { return; } // element no longer available - - var scrollY = (typeof scrollTo == "number") ? scrollTo : scrollTo.offset().top - settings.offset; + // Hook to trigger the scrolling action outside of the target element (e.g. can call from a Controller) + scope.triggerScroll = function(delay) { + delay = delay || 0; // delay is optional + $timeout(scroll(settings), delay); + }; + } - scrollPane.animate({scrollTop : scrollY }, settings.duration, settings.easing, function(){ - if (typeof callback == 'function') { callback.call(this); } - }); - } + function scroll (settings) { + return function () { + var scrollPane = angular.element(settings.container); + var scrollTo = (typeof settings.scrollTo == "number") ? settings.scrollTo : angular.element(settings.scrollTo); + if (typeof scrollTo.offset() == 'undefined') { return; } // element no longer available + var scrollY = (typeof scrollTo == "number") ? scrollTo : scrollTo.offset().top - settings.offset; + scrollPane.animate({scrollTop : scrollY }, settings.duration, settings.easing, function(){ + if (typeof callback == 'function') { callback.call(this); } + }); } - - return { - restrict: 'A', - link: function (scope, element, attrs) { - - var settings = angular.extend({ - container: 'html, body', - scrollTo: angular.element(), - offset: 0, - duration: 150, - easing: 'swing' - }, attrs); - - element.on('click', function () { - $timeout(scroll(settings)); - }); - - // Hook to trigger the scrolling action outside of the target element (e.g. can call from a Controller) - scope.triggerScroll = function(delay) { - delay = delay || 0; // delay is optional - $timeout(scroll(settings), delay); - }; - - } - }; } - ]); \ No newline at end of file + } +})(); \ No newline at end of file diff --git a/angular-scrollto.min.js b/angular-scrollto.min.js index 979464b..3141e9d 100644 --- a/angular-scrollto.min.js +++ b/angular-scrollto.min.js @@ -1 +1 @@ -angular.module("scrollto",[]),angular.module("scrollto").directive("scrollTo",["$timeout",function(a){function b(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo);if("undefined"!=typeof c.offset()){var d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}}return{restrict:"A",link:function(c,d,e){var f=angular.extend({container:"html, body",scrollTo:angular.element(),offset:0,duration:150,easing:"swing"},e);d.on("click",function(){a(b(f))}),c.triggerScroll=function(c){c=c||0,a(b(f),c)}}}}]); \ No newline at end of file +!function(){"use strict";function a(){this.config={container:"html, body",offset:0,duration:150},this.$get=function(){return{config:this.config}}}function b(a,b){function c(c,e,f){var g=angular.extend({scrollTo:angular.element(),easing:"swing"},b.config,f);e.on("click",function(){a(d(g))}),c.triggerScroll=function(b){b=b||0,a(d(g),b)}}function d(a){return function(){var b=angular.element(a.container),c="number"==typeof a.scrollTo?a.scrollTo:angular.element(a.scrollTo);if("undefined"!=typeof c.offset()){var d="number"==typeof c?c:c.offset().top-a.offset;b.animate({scrollTop:d},a.duration,a.easing,function(){"function"==typeof callback&&callback.call(this)})}}}return{restrict:"A",link:c}}angular.module("scrollto",[]).provider("scrollToConfig",a).directive("scrollTo",b),b.$inject=["$timeout","scrollToConfig"]}(); \ No newline at end of file diff --git a/bower.json b/bower.json index 0bdfb42..e8b3a0c 100644 --- a/bower.json +++ b/bower.json @@ -1,10 +1,11 @@ { "name": "angular-scrollto", - "version": "0.1.8", + "version": "0.1.9", "homepage": "https://github.com/mkirchstein/angular-scrollto", "authors": [ "Scott Corgan ", - "Matt Kirchstein " + "Matt Kirchstein ", + "Dieter Geerts " ], "description": "Angular directive to scroll to element by selector", "main": "angular-scrollto.js", diff --git a/package.json b/package.json index 80a889e..821f392 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-scrollto", - "version": "0.1.8", + "version": "0.1.9", "description": "Angular directive to scroll to element by selector", "main": "angular-scrollto.js", "scripts": { @@ -15,7 +15,7 @@ "scroll", "directive" ], - "author": "Scott Corgan, Matt Kirchstein", + "author": "Scott Corgan, Matt Kirchstein, Dieter Geerts", "license": "MIT", "bugs": { "url": "https://github.com/mkirchstein/angular-scrollto/issues" From bcd500a390734069dae6b0c852e66b4efba5febd Mon Sep 17 00:00:00 2001 From: Dieter Geerts Date: Thu, 15 Jan 2015 14:21:01 +0100 Subject: [PATCH 7/7] Updated README with config usage example. --- README.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/README.md b/README.md index 2b5f1fb..e682a8e 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,26 @@ Default value: `html, body` The container element to scroll. +## Config + +You can globally configure the options by using the scrollToConfigProvider: + +``` +(function () { + 'use strict'; + + angular.module('app.core') + .config(configure); + + /* @ngInject */ + function configure(scrollToConfigProvider) { + scrollToConfigProvider.config.offset = 80; + scrollToConfigProvider.config.duration = 200; + scrollToConfigProvider.config.container = 'body'; + } +})(); +``` + ### [UPDATED 2014-05-21] Included hook allow the scrolling action to be triggered from a controller Added a `triggerScroll(delay)` function that will trigger the scroll action after an optional delay (in milliseconds)