feat(uiScrollView) scroll page when ui-view is loaded

Replaces `$anchorScroll` call in `uiView` with a custom provider
which scrolls the element attached to `uiView` into the current
view instead. This should allow a finer default for designer by
scrolling automatically to the activate `uiView` without
manipulating anchors.

Calling `$uiViewScrollProvider.useAnchorScroll()` will restore the
current behavior or calling `$anchorScroll` instead.

Author: ysbaddaden

Gruntfile.js

@@ -36,6 +36,7 @@ module.exports = function (grunt) {
           'src/urlRouter.js',
           'src/state.js',
           'src/view.js',
+          'src/viewScrollProvider.js',
           'src/viewDirective.js',
           'src/stateDirectives.js',
           'src/compat.js'

config/karma.js

@@ -19,6 +19,7 @@ module.exports = function (karma) {
       'src/urlRouter.js',
       'src/view.js',
       'src/state.js',
+      'src/viewScrollProvider.js',
       'src/viewDirective.js',
       'src/stateDirectives.js',
       'src/stateFilters.js',
@@ -63,4 +64,4 @@ module.exports = function (karma) {
     // - PhantomJS
     browsers: [ 'PhantomJS' ]
   })
-};
+};

src/viewDirective.js

@@ -6,7 +6,6 @@
  * @requires $compile
  * @requires $controller
  * @requires $injector
- * @requires $anchorScroll
  *
  * @restrict ECA
  *
@@ -16,8 +15,8 @@
  *
  * @param {string} ui-view A view name.
  */
-$ViewDirective.$inject = ['$state', '$compile', '$controller', '$injector', '$anchorScroll'];
-function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $anchorScroll) {
+$ViewDirective.$inject = ['$state', '$compile', '$controller', '$injector', '$uiViewScroll'];
+function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $uiViewScroll) {
   var $animator = $injector.has('$animator') ? $injector.get('$animator') : false;
   var viewIsUpdating = false;
 
@@ -122,10 +121,8 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
           viewScope.$emit('$viewContentLoaded');
           if (onloadExp) viewScope.$eval(onloadExp);
 
-          // TODO: This seems strange, shouldn't $anchorScroll listen for $viewContentLoaded if necessary?
-          // $anchorScroll might listen on event...
-          if (angular.isDefined(autoscrollExp) && (!autoscrollExp || scope.$eval(autoscrollExp))) {
-            $anchorScroll();
+          if (!angular.isDefined(autoscrollExp) || !autoscrollExp || scope.$eval(autoscrollExp)) {
+            $uiViewScroll(element);
           }
         }
       };

src/viewScrollProvider.js

@@ -0,0 +1,36 @@
+/**
+ * @ngdoc directive
+ * @name ui.router.state.$uiViewScroll
+ *
+ * @requires $anchorScroll
+ * @requires $timeout
+ *
+ * @description
+ * When called with a jqLite element, it scrolls the element into view (after a
+ * `$timeout`, so the DOM had time to refresh).
+ *
+ * If you prefer to rely on `$anchorScroll` to scroll the view to the anchor,
+ * this can be enabled by calling `$uiViewScroll.useAnchorScroll()`.
+ */
+function $ViewScrollProvider() {
+
+  var useAnchorScroll = false;
+
+  this.useAnchorScroll = function () {
+    useAnchorScroll = true;
+  };
+
+  this.$get = ['$anchorScroll', '$timeout', function ($anchorScroll, $timeout) {
+    if (useAnchorScroll) {
+      return $anchorScroll;
+    }
+
+    return function ($element) {
+      $timeout(function () {
+        $element[0].scrollIntoView();
+      }, 0, false);
+    };
+  }];
+}
+
+angular.module('ui.router.state').provider('$uiViewScroll', $ViewScrollProvider);

test/debug.js

@@ -21,6 +21,7 @@ module.exports = function(config) {
       '../src/urlRouter.js',
       '../src/view.js',
       '../src/state.js',
+      '../src/viewScrollProvider.js',
       '../src/viewDirective.js',
       '../src/stateDirectives.js',
       '../src/compat.js',

test/viewDirectiveSpec.js

@@ -18,8 +18,8 @@ describe('uiView', function () {
   beforeEach(module('ui.router'));
 
   beforeEach(module(function ($provide) {
-    $provide.decorator('$anchorScroll', function ($delegate) {
-       return jasmine.createSpy('$anchorScroll');
+    $provide.decorator('$uiViewScroll', function ($delegate) {
+      return jasmine.createSpy('$uiViewScroll');
     });
   }));
 
@@ -216,32 +216,32 @@ describe('uiView', function () {
   });
 
   describe('autoscroll attribute', function () {
-    it('should not autoscroll when unspecified', inject(function ($state, $q, $anchorScroll) {
+    it('should autoscroll when unspecified', inject(function ($state, $q, $uiViewScroll) {
       elem.append($compile('<div ui-view></div>')(scope));
-      $state.transitionTo(gState);
+      $state.transitionTo(aState);
       $q.flush();
-      expect($anchorScroll).not.toHaveBeenCalled();
+      expect($uiViewScroll).toHaveBeenCalledWith(elem.find('div'));
     }));
 
-    it('should autoscroll when expression is missing', inject(function ($state, $q, $anchorScroll) {
+    it('should autoscroll when expression is missing', inject(function ($state, $q, $uiViewScroll) {
       elem.append($compile('<div ui-view autoscroll></div>')(scope));
-      $state.transitionTo(gState);
+      $state.transitionTo(aState);
       $q.flush();
-      expect($anchorScroll).toHaveBeenCalled();
+      expect($uiViewScroll).toHaveBeenCalledWith(elem.find('div'));
     }));
 
-    it('should autoscroll based on expression', inject(function ($state, $q, $anchorScroll) {
+    it('should autoscroll based on expression', inject(function ($state, $q, $uiViewScroll) {
       elem.append($compile('<div ui-view autoscroll="doScroll"></div>')(scope));
 
       scope.doScroll = false;
       $state.transitionTo(aState);
       $q.flush();
-      expect($anchorScroll).not.toHaveBeenCalled();
+      expect($uiViewScroll).not.toHaveBeenCalled();
 
       scope.doScroll = true;
       $state.transitionTo(bState);
       $q.flush();
-      expect($anchorScroll).toHaveBeenCalled();
+      expect($uiViewScroll).toHaveBeenCalledWith(elem.find('div'));
     }));
   });
 

test/viewScrollProviderSpec.js

@@ -0,0 +1,35 @@
+describe('uiView', function () {
+  'use strict';
+
+  beforeEach(module('ui.router'));
+
+  describe('scrollIntoView', function () {
+    var elem;
+
+    beforeEach(function () {
+      elem = [{ scrollIntoView: jasmine.createSpy('scrollIntoView') }];
+    });
+
+    it('should scroll element into view after timeout', inject(function ($uiViewScroll, $timeout) {
+      $uiViewScroll(elem);
+      expect(elem[0].scrollIntoView).not.toHaveBeenCalled();
+
+      $timeout.flush();
+      expect(elem[0].scrollIntoView).toHaveBeenCalled();
+    }));
+  });
+
+  describe('useAnchorScroll', function () {
+    beforeEach(module(function ($provide, $uiViewScrollProvider) {
+      $provide.decorator('$anchorScroll', function ($delegate) {
+        return jasmine.createSpy('$anchorScroll');
+      });
+      $uiViewScrollProvider.useAnchorScroll();
+    }));
+
+    it('should call $anchorScroll', inject(function ($uiViewScroll, $anchorScroll) {
+      $uiViewScroll();
+      expect($anchorScroll).toHaveBeenCalled();
+    }));
+  });
+});