From 3bcffc4cce9a251af712709c505f8d320e4d4691 Mon Sep 17 00:00:00 2001 From: cipchk Date: Tue, 27 Nov 2018 22:50:38 +0800 Subject: [PATCH 1/4] refactor(module:back-up): refactor back-up - feat: the nzTarget support string value --- components/back-top/back-top.spec.ts | 12 ++++++++++ components/back-top/doc/index.en-US.md | 4 ++-- components/back-top/doc/index.zh-CN.md | 4 ++-- components/back-top/nz-back-top.component.ts | 23 ++++++++++---------- 4 files changed, 28 insertions(+), 15 deletions(-) diff --git a/components/back-top/back-top.spec.ts b/components/back-top/back-top.spec.ts index 1d60a5407b7..cb7ceeab521 100644 --- a/components/back-top/back-top.spec.ts +++ b/components/back-top/back-top.spec.ts @@ -182,6 +182,18 @@ describe('Component:nz-back-top', () => { expect(componentObject.backTopButton() === null).toBe(false); })); + + it('element (use string id) scroll shows the button', fakeAsync(() => { + component.nzTarget = '#fakeTarget'; + + const throttleTime = 50; + + componentObject.scrollTo(fakeTarget, defaultVisibilityHeight + 1); + tick(throttleTime + 1); + fixture.detectChanges(); + + expect(componentObject.backTopButton() === null).toBe(false); + })); }); describe('#nzTemplate', () => { diff --git a/components/back-top/doc/index.en-US.md b/components/back-top/doc/index.en-US.md index c5385c785f5..da6d4f797f2 100644 --- a/components/back-top/doc/index.en-US.md +++ b/components/back-top/doc/index.en-US.md @@ -21,7 +21,7 @@ title: BackTop | Property | Description | Type | Default | | --- | --- | --- | --- | | `[nzTemplate]` | custom content | `TemplateRef` | - | -| `[nzVisibilityHeight]` | the `nz-back-top` button will not show until the scroll height reaches this value | number | `400` | -| `[nzTarget]` | specifies the scrollable area dom node | Element | `window` | +| `[nzVisibilityHeight]` | the `nz-back-top` button will not show until the scroll height reaches this value | `number` | `400` | +| `[nzTarget]` | specifies the scrollable area dom node | `string, Element` | `window` | | `(nzClick)` | a callback function, which can be executed when you click the button | `EventEmitter` | - | diff --git a/components/back-top/doc/index.zh-CN.md b/components/back-top/doc/index.zh-CN.md index 3158b9a02e9..954d8aee0ee 100644 --- a/components/back-top/doc/index.zh-CN.md +++ b/components/back-top/doc/index.zh-CN.md @@ -22,6 +22,6 @@ title: BackTop | 成员 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `[nzTemplate]` | 自定义内容，见示例 | `TemplateRef` | - | -| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | number | `400` | -| `[nzTarget]` | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Element | `window` | +| `[nzVisibilityHeight]` | 滚动高度达到此参数值才出现 `nz-back-top` | `number` | `400` | +| `[nzTarget]` | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | `string, Element` | `window` | | `(nzClick)` | 点击按钮的回调函数 | `EventEmitter` | - | diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts index fbe56a269a8..34acf805a06 100644 --- a/components/back-top/nz-back-top.component.ts +++ b/components/back-top/nz-back-top.component.ts @@ -1,8 +1,16 @@ +import { + animate, + style, + transition, + trigger +} from '@angular/animations'; +import { DOCUMENT } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, + Inject, Input, OnDestroy, OnInit, @@ -10,13 +18,6 @@ import { TemplateRef } from '@angular/core'; -import { - animate, - style, - transition, - trigger -} from '@angular/animations'; - import { fromEvent, Subscription } from 'rxjs'; import { distinctUntilChanged, throttleTime } from 'rxjs/operators'; @@ -62,14 +63,14 @@ export class NzBackTopComponent implements OnInit, OnDestroy { } @Input() - set nzTarget(el: HTMLElement) { - this.target = el; + set nzTarget(el: string | HTMLElement) { + this.target = typeof el === 'string' ? this.doc.querySelector(el) : el; this.registerScrollEvent(); } @Output() readonly nzClick: EventEmitter = new EventEmitter(); - constructor(private scrollSrv: NzScrollService, private cd: ChangeDetectorRef) { + constructor(private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: Document, private cd: ChangeDetectorRef) { } ngOnInit(): void { @@ -105,7 +106,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy { this.removeListen(); this.handleScroll(); this.scroll$ = fromEvent(this.getTarget(), 'scroll').pipe(throttleTime(50), distinctUntilChanged()) - .subscribe(e => this.handleScroll()); + .subscribe(() => this.handleScroll()); } ngOnDestroy(): void { From adea0084d8c23e4fb8606b5ae85bc88a993e1ee8 Mon Sep 17 00:00:00 2001 From: cipchk Date: Wed, 28 Nov 2018 00:36:04 +0800 Subject: [PATCH 2/4] fix: release --- components/back-top/nz-back-top.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts index 34acf805a06..3eaf37c4da9 100644 --- a/components/back-top/nz-back-top.component.ts +++ b/components/back-top/nz-back-top.component.ts @@ -70,7 +70,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy { @Output() readonly nzClick: EventEmitter = new EventEmitter(); - constructor(private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: Document, private cd: ChangeDetectorRef) { + constructor(private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) { } ngOnInit(): void { From 2dfd813c6cc4f766762e311cfe5259356b08c617 Mon Sep 17 00:00:00 2001 From: cipchk Date: Wed, 28 Nov 2018 10:03:02 +0800 Subject: [PATCH 3/4] fix: lint --- components/back-top/nz-back-top.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts index 3eaf37c4da9..55ffcb17f45 100644 --- a/components/back-top/nz-back-top.component.ts +++ b/components/back-top/nz-back-top.component.ts @@ -70,6 +70,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy { @Output() readonly nzClick: EventEmitter = new EventEmitter(); + // tslint:disable-next-line:no-any constructor(private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) { } From 236f788d7de46d36b00e14db155834f49c2b1cce Mon Sep 17 00:00:00 2001 From: cipchk Date: Fri, 30 Nov 2018 14:59:14 +0800 Subject: [PATCH 4/4] chore: add encapsulation:ViewEncapsulation.None --- components/back-top/nz-back-top.component.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/back-top/nz-back-top.component.ts b/components/back-top/nz-back-top.component.ts index 55ffcb17f45..53f34c7d747 100644 --- a/components/back-top/nz-back-top.component.ts +++ b/components/back-top/nz-back-top.component.ts @@ -15,7 +15,8 @@ import { OnDestroy, OnInit, Output, - TemplateRef + TemplateRef, + ViewEncapsulation } from '@angular/core'; import { fromEvent, Subscription } from 'rxjs'; @@ -40,6 +41,7 @@ import { toNumber } from '../core/util/convert'; ], templateUrl : './nz-back-top.component.html', changeDetection : ChangeDetectionStrategy.OnPush, + encapsulation : ViewEncapsulation.None, preserveWhitespaces: false }) export class NzBackTopComponent implements OnInit, OnDestroy {