Skip to content

Commit

Permalink
fix(window scroll values): use page offset instead of scroll for grea…
Browse files Browse the repository at this point in the history 
…ter cross browser compatability
  • Loading branch information
@jackhkmatthews
jackhkmatthews committed Jul 20, 2018
1 parent 13b6c87 commit d7e7fbc
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 82 deletions.
6 changes: 3 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -70,7 +70,7 @@
"@angular/platform-browser": "6.0.3",
"@angular/platform-browser-dynamic": "6.0.3",
"@angular/router": "6.0.3",
"@thisissoon/angular-inviewport": "^3.0.0",
"@thisissoon/angular-inviewport": "^3.0.1",
"@thisissoon/schematics": "^1.0.0-alpha.6",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
Expand Down
136 changes: 68 additions & 68 deletions src/app/scroll-collapse/scroll-collapse.directive.spec.ts
View file
Expand Up @@ -23,8 +23,8 @@ describe('ScrollCollapseDirective', () => {
};
windowRef = {
triggerEvent: null,
scrollX: 0,
scrollY: 0,
pageXOffset: 0,
pageYOffset: 0,
innerWidth: 1366,
innerHeight: 768,
addEventListener: (name, fn) => (windowRef.triggerEvent = fn),
Expand All @@ -40,22 +40,22 @@ describe('ScrollCollapseDirective', () => {
fakeAsync(() => {
const spy = spyOn(directive, 'onScrollOrResizeEvent').and.callThrough();
const events = [
{ scrollX: 0, scrollY: 0, width: 1366, height: 768 },
{ scrollX: 0, scrollY: 50, width: 1366, height: 768 }
{ pageXOffset: 0, pageYOffset: 0, width: 1366, height: 768 },
{ pageXOffset: 0, pageYOffset: 50, width: 1366, height: 768 }
];
directive.debounce = 100;
directive.ngAfterViewInit();
windowRef.triggerEvent();
tick(50);
expect(spy).not.toHaveBeenCalled();
windowRef.scrollY = 50;
windowRef.pageYOffset = 50;
windowRef.triggerEvent();
tick(100);
expect(spy).toHaveBeenCalledWith(events);
expect(directive.isScrollingUp).toBeFalsy();
expect(directive.isScrollingDown).toBeTruthy();

windowRef.scrollY = 0;
windowRef.pageYOffset = 0;
windowRef.triggerEvent();
tick(100);
expect(spy.calls.mostRecent().args).toEqual([events.reverse()]);
Expand All @@ -74,66 +74,66 @@ describe('ScrollCollapseDirective', () => {
describe('scroll direction', () => {
it('should calculate scroll direction', () => {
directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 0, width: 1366, height: 768 },
{ scrollX: 0, scrollY: 200, width: 1366, height: 768 }
{ pageXOffset: 0, pageYOffset: 0, width: 1366, height: 768 },
{ pageXOffset: 0, pageYOffset: 200, width: 1366, height: 768 }
]);
expect(directive.isScrollingDown).toBeTruthy();

directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 200, width: 1366, height: 768 },
{ scrollX: 0, scrollY: 300, width: 1366, height: 768 }
{ pageXOffset: 0, pageYOffset: 200, width: 1366, height: 768 },
{ pageXOffset: 0, pageYOffset: 300, width: 1366, height: 768 }
]);
expect(directive.isScrollingDown).toBeTruthy();

directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 200, width: 1366, height: 768 },
{ scrollX: 0, scrollY: 100, width: 1366, height: 768 }
{ pageXOffset: 0, pageYOffset: 200, width: 1366, height: 768 },
{ pageXOffset: 0, pageYOffset: 100, width: 1366, height: 768 }
]);
expect(directive.isScrollingDown).toBeFalsy();
});
it('should not reassign scroll direction if no scroll change', () => {
directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 200, width: 1266, height: 768 },
{ scrollX: 0, scrollY: 100, width: 1266, height: 768 }
{ pageXOffset: 0, pageYOffset: 200, width: 1266, height: 768 },
{ pageXOffset: 0, pageYOffset: 100, width: 1266, height: 768 }
]);
expect(directive.isScrollingUp).toBeTruthy();
directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 100, width: 1266, height: 768 },
{ scrollX: 0, scrollY: 100, width: 1366, height: 768 }
{ pageXOffset: 0, pageYOffset: 100, width: 1266, height: 768 },
{ pageXOffset: 0, pageYOffset: 100, width: 1366, height: 768 }
]);
expect(directive.isScrollingUp).toBeTruthy();

directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 100, width: 1266, height: 768 },
{ scrollX: 0, scrollY: 200, width: 1266, height: 768 }
{ pageXOffset: 0, pageYOffset: 100, width: 1266, height: 768 },
{ pageXOffset: 0, pageYOffset: 200, width: 1266, height: 768 }
]);
expect(directive.isScrollingDown).toBeTruthy();
directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 200, width: 1266, height: 768 },
{ scrollX: 0, scrollY: 200, width: 1366, height: 768 }
{ pageXOffset: 0, pageYOffset: 200, width: 1266, height: 768 },
{ pageXOffset: 0, pageYOffset: 200, width: 1366, height: 768 }
]);
expect(directive.isScrollingDown).toBeTruthy();
});
it('should emit scroll direction event on scroll direction change', () => {
const spy = spyOn(directive.scrollDirectionChange, 'emit');

directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 0, width: 1266, height: 768 },
{ scrollX: 0, scrollY: 100, width: 1266, height: 768 }
{ pageXOffset: 0, pageYOffset: 0, width: 1266, height: 768 },
{ pageXOffset: 0, pageYOffset: 100, width: 1266, height: 768 }
]);
expect(spy).toHaveBeenCalledWith(Direction.DOWN);
spy.calls.reset();

directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 100, width: 1266, height: 768 },
{ scrollX: 0, scrollY: 0, width: 1266, height: 768 }
{ pageXOffset: 0, pageYOffset: 100, width: 1266, height: 768 },
{ pageXOffset: 0, pageYOffset: 0, width: 1266, height: 768 }
]);
expect(spy).toHaveBeenCalledWith(Direction.UP);
spy.calls.reset();

directive.calculateScrollDirection([
{ scrollX: 0, scrollY: 50, width: 1266, height: 768 },
{ scrollX: 0, scrollY: 0, width: 1266, height: 768 }
{ pageXOffset: 0, pageYOffset: 50, width: 1266, height: 768 },
{ pageXOffset: 0, pageYOffset: 0, width: 1266, height: 768 }
]);
expect(spy).not.toHaveBeenCalled();
});
Expand All @@ -144,24 +144,24 @@ describe('ScrollCollapseDirective', () => {
directive.originalHeight = 100;

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 0,
pageXOffset: 0,
pageYOffset: 0,
width: 1366,
height: 768
});
expect(directive.minimiseMode).toBeFalsy();

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(directive.minimiseMode).toBeTruthy();

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 99,
pageXOffset: 0,
pageYOffset: 99,
width: 1366,
height: 768
});
Expand All @@ -173,35 +173,35 @@ describe('ScrollCollapseDirective', () => {
directive.originalHeight = 100;

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(spy).toHaveBeenCalledWith(true);
spy.calls.reset();

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 99,
pageXOffset: 0,
pageYOffset: 99,
width: 1366,
height: 768
});
expect(spy).toHaveBeenCalledWith(false);
spy.calls.reset();

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(spy).toHaveBeenCalledWith(true);
spy.calls.reset();

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 250,
pageXOffset: 0,
pageYOffset: 250,
width: 1366,
height: 768
});
Expand All @@ -212,24 +212,24 @@ describe('ScrollCollapseDirective', () => {
directive.originalHeight = 100;
directive.originalTop = 100;
directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 0,
pageXOffset: 0,
pageYOffset: 0,
width: 1366,
height: 768
});
expect(directive.minimiseMode).toBeFalsy();

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(directive.minimiseMode).toBeTruthy();

directive.calculateMinimiseMode({
scrollX: 0,
scrollY: 199,
pageXOffset: 0,
pageYOffset: 199,
width: 1366,
height: 768
});
Expand All @@ -242,24 +242,24 @@ describe('ScrollCollapseDirective', () => {
directive.originalTop = 100;

directive.calculateAffixMode({
scrollX: 0,
scrollY: 0,
pageXOffset: 0,
pageYOffset: 0,
width: 1366,
height: 768
});
expect(directive.affixMode).toBeFalsy();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(directive.affixMode).toBeTruthy();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 99,
pageXOffset: 0,
pageYOffset: 99,
width: 1366,
height: 768
});
Expand All @@ -271,35 +271,35 @@ describe('ScrollCollapseDirective', () => {
directive.originalTop = 100;

directive.calculateAffixMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(spy).toHaveBeenCalledWith(true);
spy.calls.reset();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 99,
pageXOffset: 0,
pageYOffset: 99,
width: 1366,
height: 768
});
expect(spy).toHaveBeenCalledWith(false);
spy.calls.reset();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(spy).toHaveBeenCalledWith(true);
spy.calls.reset();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 250,
pageXOffset: 0,
pageYOffset: 250,
width: 1366,
height: 768
});
Expand All @@ -311,32 +311,32 @@ describe('ScrollCollapseDirective', () => {
directive.originalTop = 500;
directive.yOffset = 200;
directive.calculateAffixMode({
scrollX: 0,
scrollY: 0,
pageXOffset: 0,
pageYOffset: 0,
width: 1366,
height: 768
});
expect(directive.affixMode).toBeFalsy();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 200,
pageXOffset: 0,
pageYOffset: 200,
width: 1366,
height: 768
});
expect(directive.affixMode).toBeFalsy();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 300,
pageXOffset: 0,
pageYOffset: 300,
width: 1366,
height: 768
});
expect(directive.affixMode).toBeTruthy();

directive.calculateAffixMode({
scrollX: 0,
scrollY: 299,
pageXOffset: 0,
pageYOffset: 299,
width: 1366,
height: 768
});
Expand Down

0 comments on commit d7e7fbc

Please sign in to comment.