refactor(module:affix): refactor affix

components/affix/affix.spec.ts

@@ -288,6 +288,15 @@ describe('affix', () => {
       fixture.detectChanges();
       expect(component.updatePosition).toHaveBeenCalled();
     });
+
+    it('should be a string value', () => {
+      spyOn(component, 'updatePosition');
+      expect(component.updatePosition).not.toHaveBeenCalled();
+      fixture.detectChanges();
+      context.fakeTarget = '#target';
+      fixture.detectChanges();
+      expect(component.updatePosition).toHaveBeenCalled();
+    });
   });
 
   describe('(nzChange)', () => {
@@ -486,14 +495,12 @@ describe('affix-extra', () => {
     <button id="content">Affix Button</button>
   </nz-affix>
   <div id="target"></div>
-  `,
-  styleUrls: [ './style/index.less' ],
-  encapsulation: ViewEncapsulation.None
+  `
 })
 class TestAffixComponent {
   @ViewChild(NzAffixComponent)
   nzAffixComponent: NzAffixComponent;
-  fakeTarget: Element | Window = null;
+  fakeTarget: string | Element | Window = null;
   newOffset: {};
   newOffsetBottom: {};
 }

components/affix/doc/index.en-US.md

@@ -20,7 +20,7 @@ Please note that Affix should not cover other content on the page, especially wh
 | -------- | ----------- | ---- | ------- |
 | `[nzOffsetBottom]` | Pixels to offset from bottom when calculating position of scroll | number | - |
 | `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | number | 0 |
-| `[nzTarget]` | specifies the scrollable area dom node | `HTMLElement` | `window` |
+| `[nzTarget]` | specifies the scrollable area dom node | `string, HTMLElement` | `window` |
 | `(nzChange)` | Callback for when affix state is changed | `EventEmitter<boolean>` | - |
 
 **Note:** Children of `nz-affix` can not be `position: absolute`, but you can set `nz-affix` as `position: absolute`:

components/affix/doc/index.zh-CN.md

@@ -21,7 +21,7 @@ title: Affix
 | --- | --- | --- | --- |
 | `[nzOffsetBottom]` | 距离窗口底部达到指定偏移量后触发 | number |  |
 | `[nzOffsetTop]` | 距离窗口顶部达到指定偏移量后触发 | number |  |
-| `[nzTarget]` | 设置 `nz-affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | `HTMLElement` | `window` |
+| `[nzTarget]` | 设置 `nz-affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | `string, HTMLElement` | `window` |
 | `(nzChange)` | 固定状态改变时触发的回调函数 | `EventEmitter<boolean>` | 无 |
 
 **注意：**`nz-affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `nz-affix` 为绝对定位：

components/affix/nz-affix.component.ts

@@ -1,10 +1,12 @@
 // tslint:disable:no-any
+import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   OnDestroy,
   OnInit,
@@ -30,9 +32,9 @@ import { throttleByAnimationFrameDecorator } from '../core/util/throttleByAnimat
 export class NzAffixComponent implements OnInit, OnDestroy {
 
   @Input()
-  set nzTarget(value: Element | Window) {
+  set nzTarget(value: string | Element | Window) {
     this.clearEventListeners();
-    this._target = value || window;
+    this._target = typeof value === 'string' ? this.doc.querySelector(value) : value || window;
     this.setTargetEventListeners();
     this.updatePosition({});
   }
@@ -60,7 +62,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
   @Output()
   readonly nzChange: EventEmitter<boolean> = new EventEmitter();
 
-  constructor(private scrollSrv: NzScrollService, private _el: ElementRef, private cd: ChangeDetectorRef) {
+  constructor(private scrollSrv: NzScrollService, private _el: ElementRef, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) {
   }
 
   private timeout: any;
@@ -109,7 +111,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     const scrollTop = this.scrollSrv.getScroll(target, true);
     const scrollLeft = this.scrollSrv.getScroll(target, false);
 
-    const docElem = window.document.body;
+    const docElem = this.doc.body;
     const clientTop = docElem.clientTop || 0;
     const clientLeft = docElem.clientLeft || 0;
 
@@ -121,6 +123,70 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     };
   }
 
+  private setTargetEventListeners(): void {
+    this.clearEventListeners();
+    this.events.forEach((eventName: string) => {
+      this._target.addEventListener(eventName, this.updatePosition, false);
+    });
+  }
+
+  private clearEventListeners(): void {
+    this.events.forEach(eventName => {
+      this._target.removeEventListener(eventName, this.updatePosition, false);
+    });
+  }
+
+  private getTargetRect(target: Element | Window | null): ClientRect {
+    return target !== window ?
+      (target as HTMLElement).getBoundingClientRect() :
+      { top: 0, left: 0, bottom: 0 } as ClientRect;
+  }
+
+  private genStyle(affixStyle: {}): string {
+    if (affixStyle == null) {
+      return '';
+    }
+    return Object.keys(affixStyle).map(key => {
+      const val = affixStyle[ key ];
+      return `${key}:${typeof val === 'string' ? val : val + 'px'}`;
+    }).join(';');
+  }
+
+  private setAffixStyle(e: any, affixStyle: {}): void {
+    const originalAffixStyle = this.affixStyle;
+    const isWindow = this._target === window;
+    if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
+      return;
+    }
+    if (shallowEqual(originalAffixStyle, affixStyle)) {
+      return;
+    }
+
+    const fixed = !!affixStyle;
+    const wrapEl = this.wrap.nativeElement as HTMLElement;
+    wrapEl.style.cssText = this.genStyle(affixStyle);
+    this.affixStyle = affixStyle;
+    const cls = 'ant-affix';
+    if (fixed) {
+      wrapEl.classList.add(cls);
+    } else {
+      wrapEl.classList.remove(cls);
+    }
+
+    if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
+      this.nzChange.emit(fixed);
+    }
+  }
+
+  private setPlaceholderStyle(placeholderStyle: {}): void {
+    const originalPlaceholderStyle = this.placeholderStyle;
+    if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) {
+      return;
+    }
+    (this._el.nativeElement as HTMLElement).style.cssText = this.genStyle(placeholderStyle);
+    this.placeholderStyle = placeholderStyle;
+  }
+
   @throttleByAnimationFrameDecorator()
   updatePosition(e: any): void {
     const targetNode = this._target;
@@ -187,69 +253,4 @@ export class NzAffixComponent implements OnInit, OnDestroy {
       this.setPlaceholderStyle(null);
     }
   }
-
-  private setTargetEventListeners(): void {
-    this.clearEventListeners();
-    this.events.forEach((eventName: string) => {
-      this._target.addEventListener(eventName, this.updatePosition, false);
-    });
-  }
-
-  private clearEventListeners(): void {
-    this.events.forEach(eventName => {
-      this._target.removeEventListener(eventName, this.updatePosition, false);
-    });
-  }
-
-  private getTargetRect(target: Element | Window | null): ClientRect {
-    return target !== window ?
-      (target as HTMLElement).getBoundingClientRect() :
-      { top: 0, left: 0, bottom: 0 } as ClientRect;
-  }
-
-  private genStyle(affixStyle: {}): string {
-    if (affixStyle == null) {
-      return '';
-    }
-    return Object.keys(affixStyle).map(key => {
-      const val = affixStyle[ key ];
-      return `${key}:${typeof val === 'string' ? val : val + 'px'}`;
-    }).join(';');
-  }
-
-  private setAffixStyle(e: any, affixStyle: {}): void {
-    const originalAffixStyle = this.affixStyle;
-    const isWindow = this._target === window;
-    if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
-      return;
-    }
-    if (shallowEqual(originalAffixStyle, affixStyle)) {
-      return;
-    }
-
-    const fixed = !!affixStyle;
-    const wrapEl = this.wrap.nativeElement as HTMLElement;
-    wrapEl.style.cssText = this.genStyle(affixStyle);
-    this.affixStyle = affixStyle;
-    const cls = 'ant-affix';
-    if (fixed) {
-      wrapEl.classList.add(cls);
-    } else {
-      wrapEl.classList.remove(cls);
-    }
-
-    if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
-      this.nzChange.emit(fixed);
-    }
-  }
-
-  private setPlaceholderStyle(placeholderStyle: {}): void {
-    const originalPlaceholderStyle = this.placeholderStyle;
-    if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) {
-      return;
-    }
-    (this._el.nativeElement as HTMLElement).style.cssText = this.genStyle(placeholderStyle);
-    this.placeholderStyle = placeholderStyle;
-  }
-
 }