angular-ui#91: tests for scrollfix directive. tweaked scrollfix a bit for compatibility and performance.

Author: Christopher Hiller

modules/directives/scrollfix/scrollfix.js

@@ -1,29 +1,39 @@
-
+/*global angular, $*/
 /**
  * Adds a 'ui-scrollfix' class to the element when the page scrolls past it's position.
  * @param [offset] {int} optional Y-offset to override the detected offset.
  *   Takes 300 (absolute) or -300 or +300 (relative to detected)
  */
-angular.module('ui.directives').directive('uiScrollfix', [function() {
-	return {
-		link: function(scope, elm, attrs) {
-			var top = elm.offset().top;
-			if (!attrs.uiScrollfix) {
-				attrs.uiScrollfix = top;
-			} else {
-				if (attrs.uiScrollfix.indexOf('-') === 0) {
-					attrs.uiScrollfix = top - attrs.uiScrollfix.substr(1);
-				} else if (attrs.uiScrollfix.indexOf('+') === 0) {
-					attrs.uiScrollfix = top + parseInt(attrs.uiScrollfix.substr(1));
-				}
-			}
-			$(window).bind('scroll.ui-scrollfix', function(){
-				if (!elm.hasClass('ui-scrollfix') && window.pageYOffset > attrs.uiScrollfix) {
-					elm.addClass('ui-scrollfix');
-				} else if (elm.hasClass('ui-scrollfix') && window.pageYOffset < attrs.uiScrollfix) {
-					elm.removeClass('ui-scrollfix');
-				}
-			});
-		}
-	};
+angular.module('ui.directives').directive('uiScrollfix', ['$window', function ($window) {
+    'use strict';
+    return {
+        link: function (scope, elm, attrs) {
+            var top = elm.offset().top;
+            if (!attrs.uiScrollfix) {
+                attrs.uiScrollfix = top;
+            } else {
+                // chartAt is generally faster than indexOf: http://jsperf.com/indexof-vs-chartat
+                if (attrs.uiScrollfix.charAt(0) === '-') {
+                    attrs.uiScrollfix = top - attrs.uiScrollfix.substr(1);
+                } else if (attrs.uiScrollfix.charAt(0) === '+') {
+                    attrs.uiScrollfix = top + attrs.uiScrollfix.substr(1);
+                }
+            }
+            $($window).bind('scroll.ui-scrollfix', function () {
+                // if pageYOffset is defined use it, otherwise use other crap for IE
+                var offset;
+                if (angular.isDefined($window.pageYOffset)) {
+                    offset = $window.pageYOffset;
+                } else {
+                    var iebody = (document.compatMode && document.compatMode !== "BackCompat") ? document.documentElement : document.body;
+                    offset = iebody.scrollTop;
+                }
+                if (!elm.hasClass('ui-scrollfix') && offset > attrs.uiScrollfix) {
+                    elm.addClass('ui-scrollfix');
+                } else if (elm.hasClass('ui-scrollfix') && offset < attrs.uiScrollfix) {
+                    elm.removeClass('ui-scrollfix');
+                }
+            });
+        }
+    };
 }]);

modules/directives/scrollfix/test/scrollfixSpec.js

@@ -0,0 +1,39 @@
+/*global describe, beforeEach, module, inject, it, spyOn, expect, $ */
+describe('uiRemove', function () {
+    'use strict';
+
+    var scope, $compile, $window;
+    beforeEach(module('ui.directives'));
+    beforeEach(inject(function (_$rootScope_, _$compile_, _$window_) {
+        scope = _$rootScope_.$new();
+        $compile = _$compile_;
+        $window = _$window_;
+    }));
+
+    describe('compiling this directive', function () {
+        it('should bind to window "scroll" event with a ui-scrollfix namespace', function () {
+            spyOn($.fn, 'bind');
+            $compile('<div ui-scrollfix="100"></div>')(scope);
+            expect($.fn.bind).toHaveBeenCalled();
+            expect($.fn.bind.mostRecentCall.args[0]).toBe('scroll.ui-scrollfix');
+        });
+    });
+    describe('scrolling the window', function () {
+        it('should add the ui-scrollfix class if the offset is greater than specified', function () {
+            var element = $compile('<div ui-scrollfix="-100"></div>')(scope);
+            $($window).trigger('scroll.ui-scrollfix');
+            expect(element.hasClass('ui-scrollfix')).toBe(true);
+        });
+        it('should remove the ui-scrollfix class if the offset is less than specified (using absolute coord)', function () {
+            var element = $compile('<div ui-scrollfix="100" class="ui-scrollfix"></div>')(scope);
+            $($window).trigger('scroll.ui-scrollfix');
+            expect(element.hasClass('ui-scrollfix')).toBe(false);
+
+        });
+        it('should remove the ui-scrollfix class if the offset is less than specified (using relative coord)', function () {
+            var element = $compile('<div ui-scrollfix="+100" class="ui-scrollfix"></div>')(scope);
+            $($window).trigger('scroll.ui-scrollfix');
+            expect(element.hasClass('ui-scrollfix')).toBe(false);
+        });
+    });
+});