From 1336f0bba39824e57d47a4e0e763ba5c6cfdc5c3 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Tue, 5 Jun 2018 17:27:46 +0100 Subject: [PATCH 1/6] feat(scroll directive): add yOffset input to class setting functions apply classes on scroll taking into account yOffset property --- src/app/app.component.html | 9 +++++++++ src/app/app.component.scss | 9 +++++++++ .../scroll-collapse/scroll-collapse.directive.ts | 15 +++++++++++++-- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index e9ea83d..fe5c834 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -16,3 +16,12 @@

Scroll down ↓

+ + +
+
+ Classes applied when original Y position of element approaches yOffset. [yOffset]="200" +
+
+ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 1fb1c60..f42dc67 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -53,6 +53,15 @@ z-index: 9999; } +.bar.bar--offset.sn-affix { + top: 100px; +} + +.bar.bar--offset.sn-minimise { + background-color: #586e5d; + height: 50px; +} + .spacer { height: 150vh; } diff --git a/src/app/scroll-collapse/scroll-collapse.directive.ts b/src/app/scroll-collapse/scroll-collapse.directive.ts index 7bd0bc0..aa7dd99 100644 --- a/src/app/scroll-collapse/scroll-collapse.directive.ts +++ b/src/app/scroll-collapse/scroll-collapse.directive.ts @@ -74,6 +74,17 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy { * @memberof ScrollCollapseDirective */ @Input() public debounce = 0; + /** + * Number of pixels before the elements originalTop + * position is scroll to that the classes will be applied. + * This value will need to take into account elements which become + * fixed above this element while scrolling as they reduce + * the height of the document and the scrollY number. + * + * @default 0 + * @memberof ScrollCollapseDirective + */ + @Input() public yOffset = 0; /** * Returns true if last scroll direction is UP * @@ -190,7 +201,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy { */ public calculateMinimiseMode(viewport: Viewport): void { this.minimiseMode = - viewport.scrollY >= this.originalHeight + this.originalTop; + viewport.scrollY >= this.originalHeight + this.originalTop - this.yOffset; } /** * Calculate if the user has scrolled pass the origin height of @@ -199,7 +210,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy { * @memberof ScrollCollapseDirective */ public calculateAffixMode(viewport: Viewport): void { - this.affixMode = viewport.scrollY >= this.originalTop; + this.affixMode = viewport.scrollY >= this.originalTop - this.yOffset; } /** * Return current viewport values From 92959db6f07ba40662a6c13a2df679e0b7e00497 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 6 Jun 2018 12:32:36 +0100 Subject: [PATCH 2/6] feat(yOffset): remove yOffset logic from minimise mode calc --- .../scroll-collapse.directive.spec.ts | 37 +++++++++++++++++++ .../scroll-collapse.directive.ts | 4 +- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/app/scroll-collapse/scroll-collapse.directive.spec.ts b/src/app/scroll-collapse/scroll-collapse.directive.spec.ts index c3dc94c..843d64a 100644 --- a/src/app/scroll-collapse/scroll-collapse.directive.spec.ts +++ b/src/app/scroll-collapse/scroll-collapse.directive.spec.ts @@ -199,5 +199,42 @@ describe('ScrollCollapseDirective', () => { }); expect(directive.affixMode).toBeFalsy(); }); + + it('should factor in yOffset property when calculating affix mode', () => { + directive.originalHeight = 100; + directive.originalTop = 500; + directive.yOffset = 200; + directive.calculateAffixMode({ + scrollX: 0, + scrollY: 0, + width: 1366, + height: 768 + }); + expect(directive.affixMode).toBeFalsy(); + + directive.calculateAffixMode({ + scrollX: 0, + scrollY: 200, + width: 1366, + height: 768 + }); + expect(directive.affixMode).toBeFalsy(); + + directive.calculateAffixMode({ + scrollX: 0, + scrollY: 300, + width: 1366, + height: 768 + }); + expect(directive.affixMode).toBeTruthy(); + + directive.calculateAffixMode({ + scrollX: 0, + scrollY: 299, + width: 1366, + height: 768 + }); + expect(directive.affixMode).toBeFalsy(); + }); }); }); diff --git a/src/app/scroll-collapse/scroll-collapse.directive.ts b/src/app/scroll-collapse/scroll-collapse.directive.ts index aa7dd99..45d8f81 100644 --- a/src/app/scroll-collapse/scroll-collapse.directive.ts +++ b/src/app/scroll-collapse/scroll-collapse.directive.ts @@ -76,7 +76,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy { @Input() public debounce = 0; /** * Number of pixels before the elements originalTop - * position is scroll to that the classes will be applied. + * position is scroll to that the sn-affix class will be applied. * This value will need to take into account elements which become * fixed above this element while scrolling as they reduce * the height of the document and the scrollY number. @@ -201,7 +201,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy { */ public calculateMinimiseMode(viewport: Viewport): void { this.minimiseMode = - viewport.scrollY >= this.originalHeight + this.originalTop - this.yOffset; + viewport.scrollY >= this.originalHeight + this.originalTop; } /** * Calculate if the user has scrolled pass the origin height of From 8f1208fdc79fd5d24a55879ee19b63f9afb400c0 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 6 Jun 2018 14:21:46 +0100 Subject: [PATCH 3/6] test(yOffset): add e2e tests for yOffest feature --- e2e/app.e2e-spec.ts | 69 ++++++++++++++++++++++++++++++++++----------- e2e/app.po.ts | 4 +++ 2 files changed, 57 insertions(+), 16 deletions(-) diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts index 6f04b22..8aa4dc8 100644 --- a/e2e/app.e2e-spec.ts +++ b/e2e/app.e2e-spec.ts @@ -1,36 +1,51 @@ import { AppPage } from './app.po'; import { browser, element, by } from 'protractor'; -describe('ScrollCollapse Lib E2E Tests', function () { +describe('ScrollCollapse Lib E2E Tests', function() { let page: AppPage; - beforeEach(() => page = new AppPage()); + beforeEach(() => (page = new AppPage())); beforeEach(() => page.navigateTo()); beforeEach(() => browser.executeScript('window.scrollTo(0,0)')); afterEach(() => { - browser.manage().logs().get('browser').then((browserLog: any[]) => { - expect(browserLog).toEqual([]); - }); + browser + .manage() + .logs() + .get('browser') + .then((browserLog: any[]) => { + expect(browserLog).toEqual([]); + }); }); describe('scroll direction', () => { it('should add scrolling direction class', () => { page.scrollTo(); - expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-down'); - expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-up'); + expect(page.getNavElement().getAttribute('class')).not.toContain( + 'sn-scrolling-down' + ); + expect(page.getNavElement().getAttribute('class')).not.toContain( + 'sn-scrolling-up' + ); page.scrollTo(0, 10); page.scrollTo(0, 200); - expect(page.getNavElement().getAttribute('class')).toContain('sn-scrolling-down'); - expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-up'); - + expect(page.getNavElement().getAttribute('class')).toContain( + 'sn-scrolling-down' + ); + expect(page.getNavElement().getAttribute('class')).not.toContain( + 'sn-scrolling-up' + ); page.scrollTo(0, 100); - expect(page.getNavElement().getAttribute('class')).not.toContain('sn-scrolling-down'); - expect(page.getNavElement().getAttribute('class')).toContain('sn-scrolling-up'); + expect(page.getNavElement().getAttribute('class')).not.toContain( + 'sn-scrolling-down' + ); + expect(page.getNavElement().getAttribute('class')).toContain( + 'sn-scrolling-up' + ); }); }); @@ -38,10 +53,14 @@ describe('ScrollCollapse Lib E2E Tests', function () { it('should add "sn-minimise" class', () => { page.scrollTo(); page.scrollTo(0, 10); - expect(page.getNavElement().getAttribute('class')).not.toContain('sn-minimise'); + expect(page.getNavElement().getAttribute('class')).not.toContain( + 'sn-minimise' + ); page.scrollTo(0, 110); - expect(page.getNavElement().getAttribute('class')).toContain('sn-minimise'); + expect(page.getNavElement().getAttribute('class')).toContain( + 'sn-minimise' + ); }); }); @@ -49,11 +68,29 @@ describe('ScrollCollapse Lib E2E Tests', function () { it('should add "sn-affix" class', () => { page.scrollTo(); page.scrollTo(0, 10); - expect(page.getBarElement().getAttribute('class')).not.toContain('sn-affix'); + expect(page.getBarElement().getAttribute('class')).not.toContain( + 'sn-affix' + ); page.scrollTo(0, 768 * 3); expect(page.getBarElement().getAttribute('class')).toContain('sn-affix'); }); - }); + it('should account for yOffset when adding "sn-affix" class', () => { + page.scrollTo(); + page.scrollTo(0, 2060); + expect(page.getOffsetBarElement().getAttribute('class')).not.toContain( + 'sn-affix' + ); + page.scrollTo(0, 2061); + expect(page.getOffsetBarElement().getAttribute('class')).toContain( + 'sn-affix' + ); + + page.scrollTo(0, 2060); + expect(page.getOffsetBarElement().getAttribute('class')).not.toContain( + 'sn-affix' + ); + }); + }); }); diff --git a/e2e/app.po.ts b/e2e/app.po.ts index 58403da..7ac9f1c 100644 --- a/e2e/app.po.ts +++ b/e2e/app.po.ts @@ -17,4 +17,8 @@ export class AppPage { getBarElement() { return element(by.css('.bar')); } + + getOffsetBarElement() { + return element(by.css('.bar--offset')); + } } From 929ffaba2ac5e046cf85184fb8b60f45c6aaf3e7 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 6 Jun 2018 14:28:56 +0100 Subject: [PATCH 4/6] docs(y-offset): update docs to include [yOffset] info --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 86845a3..2a6a9a2 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,15 @@ In this scenario the nav element will have the class `sn-affix` added when the u } ``` +A `[yOffset` can also be applied. Here `sn-affix` will be added when the top of the viewport is within 200 pixels of the top of the nav. + +```html +
...
+ +``` + ### Minimise mode In this scenario the nav element will have the class `sn-minimise` added when the user scrolls 100px (the original height of the element) down the page. From ee86d0d1cb93b4201bcdea1ab8653bdb43a6c434 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 6 Jun 2018 14:38:42 +0100 Subject: [PATCH 5/6] test(y-offset): remove yOffset specific e2e test removed while window resize bug persists --- e2e/app.e2e-spec.ts | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts index 8aa4dc8..eed2c8f 100644 --- a/e2e/app.e2e-spec.ts +++ b/e2e/app.e2e-spec.ts @@ -75,22 +75,5 @@ describe('ScrollCollapse Lib E2E Tests', function() { page.scrollTo(0, 768 * 3); expect(page.getBarElement().getAttribute('class')).toContain('sn-affix'); }); - it('should account for yOffset when adding "sn-affix" class', () => { - page.scrollTo(); - page.scrollTo(0, 2060); - expect(page.getOffsetBarElement().getAttribute('class')).not.toContain( - 'sn-affix' - ); - - page.scrollTo(0, 2061); - expect(page.getOffsetBarElement().getAttribute('class')).toContain( - 'sn-affix' - ); - - page.scrollTo(0, 2060); - expect(page.getOffsetBarElement().getAttribute('class')).not.toContain( - 'sn-affix' - ); - }); }); }); From 66899817a672bf18b1b363f3374ef637f7f53e15 Mon Sep 17 00:00:00 2001 From: Jack Matthews Date: Wed, 6 Jun 2018 14:50:55 +0100 Subject: [PATCH 6/6] docs(affix mode README): correct typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2a6a9a2..9a26c23 100644 --- a/README.md +++ b/README.md @@ -104,7 +104,7 @@ In this scenario the nav element will have the class `sn-affix` added when the u } ``` -A `[yOffset` can also be applied. Here `sn-affix` will be added when the top of the viewport is within 200 pixels of the top of the nav. +A `[yOffset]` can also be applied. Here `sn-affix` will be added when the top of the viewport is within 200 pixels of the top of the nav. ```html
...