From 15fd735793cffe89fdf9662275409cdcdb3e801a Mon Sep 17 00:00:00 2001 From: Vojta Jina Date: Thu, 12 Jan 2012 03:00:34 -0800 Subject: refactor($autoScroll): rename to $anchorScroll and allow disabling auto scrolling (links) Now, that we have autoscroll attribute on ng:include, there is no reason to disable the service completely, so $anchorScrollProvider.disableAutoScrolling() means it won't be scrolling when $location.hash() changes. And then, it's not $autoScroll at all, it actually scrolls to anchor when it's called, so I renamed it to $anchorScroll. --- src/AngularPublic.js | 2 +- src/service/anchorScroll.js | 66 +++++++++++++++++++++++++++++++++++++++++++++ src/service/autoScroll.js | 64 ------------------------------------------- src/widgets.js | 16 +++++------ 4 files changed, 75 insertions(+), 73 deletions(-) create mode 100644 src/service/anchorScroll.js delete mode 100644 src/service/autoScroll.js (limited to 'src') diff --git a/src/AngularPublic.js b/src/AngularPublic.js index 4973f574..3614eb9a 100644 --- a/src/AngularPublic.js +++ b/src/AngularPublic.js @@ -66,7 +66,7 @@ function publishExternalAPI(angular){ $provide.value('$directive', angularDirective); $provide.value('$widget', angularWidget); - $provide.service('$autoScroll', $AutoScrollProvider); + $provide.service('$anchorScroll', $AnchorScrollProvider); $provide.service('$browser', $BrowserProvider); $provide.service('$cacheFactory', $CacheFactoryProvider); $provide.service('$compile', $CompileProvider); diff --git a/src/service/anchorScroll.js b/src/service/anchorScroll.js new file mode 100644 index 00000000..19a09498 --- /dev/null +++ b/src/service/anchorScroll.js @@ -0,0 +1,66 @@ +/** + * @ngdoc function + * @name angular.module.ng.$anchorScroll + * @requires $window + * @requires $location + * @requires $rootScope + * + * @description + * When called, it checks current value of `$location.hash()` and scroll to related element, + * according to rules specified in + * {@link http://dev.w3.org/html5/spec/Overview.html#the-indicated-part-of-the-document Html5 spec}. + * + * It also watches the `$location.hash()` and scroll whenever it changes to match any anchor. + * This can be disabled by calling `$anchorScrollProvider.disableAutoScrolling()`. + */ +function $AnchorScrollProvider() { + + var autoScrollingEnabled = true; + + this.disableAutoScrolling = function() { + autoScrollingEnabled = false; + }; + + this.$get = ['$window', '$location', '$rootScope', function($window, $location, $rootScope) { + var document = $window.document; + + // helper function to get first anchor from a NodeList + // can't use filter.filter, as it accepts only instances of Array + // and IE can't convert NodeList to an array using [].slice + // TODO(vojta): use filter if we change it to accept lists as well + function getFirstAnchor(list) { + var result = null; + forEach(list, function(element) { + if (!result && lowercase(element.nodeName) === 'a') result = element; + }); + return result; + } + + function scroll() { + var hash = $location.hash(), elm; + + // empty hash, scroll to the top of the page + if (!hash) $window.scrollTo(0, 0); + + // element with given id + else if ((elm = document.getElementById(hash))) elm.scrollIntoView(); + + // first anchor with given name :-D + else if ((elm = getFirstAnchor(document.getElementsByName(hash)))) elm.scrollIntoView(); + + // no element and hash == 'top', scroll to the top of the page + else if (hash === 'top') $window.scrollTo(0, 0); + } + + // does not scroll when user clicks on anchor link that is currently on + // (no url change, no $locaiton.hash() change), browser native does scroll + if (autoScrollingEnabled) { + $rootScope.$watch(function() {return $location.hash();}, function() { + $rootScope.$evalAsync(scroll); + }); + } + + return scroll; + }]; +} + diff --git a/src/service/autoScroll.js b/src/service/autoScroll.js deleted file mode 100644 index 223400f4..00000000 --- a/src/service/autoScroll.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * @ngdoc function - * @name angular.module.ng.$autoScroll - * @requires $window - * @requires $location - * @requires $rootScope - * - * @description - * When called, it checks current value of `$location.hash()` and scroll to related element, - * according to rules specified in - * {@link http://dev.w3.org/html5/spec/Overview.html#the-indicated-part-of-the-document Html5 spec}. - * - * It also watches the `$location.hash()` and scroll whenever it changes to match any anchor. - * - * You can disable `$autoScroll` service by calling `disable()` on `$autoScrollProvider`. - * Note: disabling is only possible before the service is instantiated ! - */ -function $AutoScrollProvider() { - - this.disable = function() { - this.$get = function() {return noop;}; - }; - - this.$get = ['$window', '$location', '$rootScope', function($window, $location, $rootScope) { - var document = $window.document; - - // helper function to get first anchor from a NodeList - // can't use filter.filter, as it accepts only instances of Array - // and IE can't convert NodeList to an array using [].slice - // TODO(vojta): use filter if we change it to accept lists as well - function getFirstAnchor(list) { - var result = null; - forEach(list, function(element) { - if (!result && lowercase(element.nodeName) === 'a') result = element; - }); - return result; - } - - function scroll() { - var hash = $location.hash(), elm; - - // empty hash, scroll to the top of the page - if (!hash) $window.scrollTo(0, 0); - - // element with given id - else if ((elm = document.getElementById(hash))) elm.scrollIntoView(); - - // first anchor with given name :-D - else if ((elm = getFirstAnchor(document.getElementsByName(hash)))) elm.scrollIntoView(); - - // no element and hash == 'top', scroll to the top of the page - else if (hash === 'top') $window.scrollTo(0, 0); - } - - // does not scroll when user clicks on anchor link that is currently on - // (no url change, no $locaiton.hash() change), browser native does scroll - $rootScope.$watch(function() {return $location.hash();}, function() { - $rootScope.$evalAsync(scroll); - }); - - return scroll; - }]; -} - diff --git a/src/widgets.js b/src/widgets.js index 63ddaf36..09a800de 100644 --- a/src/widgets.js +++ b/src/widgets.js @@ -43,8 +43,8 @@ * instance of angular.module.ng.$rootScope.Scope to set the HTML fragment to. * @param {string=} onload Expression to evaluate when a new partial is loaded. * - * @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$autoScroll - * $autoScroll} to scroll the viewport after the content is loaded. + * @param {string=} autoscroll Whether `ng:include` should call {@link angular.module.ng.$anchorScroll + * $anchorScroll} to scroll the viewport after the content is loaded. * * - If the attribute is not set, disable scrolling. * - If the attribute is set without value, enable scrolling. @@ -99,8 +99,8 @@ angularWidget('ng:include', function(element){ this.directives(true); } else { element[0]['ng:compiled'] = true; - return ['$http', '$templateCache', '$autoScroll', '$element', - function($http, $templateCache, $autoScroll, element) { + return ['$http', '$templateCache', '$anchorScroll', '$element', + function($http, $templateCache, $anchorScroll, element) { var scope = this, changeCounter = 0, childScope; @@ -133,7 +133,7 @@ angularWidget('ng:include', function(element){ childScope = useScope ? useScope : scope.$new(); compiler.compile(element)(childScope); if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) { - $autoScroll(); + $anchorScroll(); } scope.$eval(onloadExp); } @@ -568,8 +568,8 @@ angularWidget('ng:view', function(element) { if (!element[0]['ng:compiled']) { element[0]['ng:compiled'] = true; - return ['$http', '$templateCache', '$route', '$autoScroll', '$element', - function($http, $templateCache, $route, $autoScroll, element) { + return ['$http', '$templateCache', '$route', '$anchorScroll', '$element', + function($http, $templateCache, $route, $anchorScroll, element) { var template; var changeCounter = 0; @@ -593,7 +593,7 @@ angularWidget('ng:view', function(element) { if (newChangeCounter == changeCounter) { element.html(response); compiler.compile(element)($route.current.scope); - $autoScroll(); + $anchorScroll(); } }).error(clearContent); } else { -- cgit v1.2.3