Skip to content

Commit

Permalink
fix(module:affix): fix should reset placeholder size when trigger res…
Browse files Browse the repository at this point in the history 
…ize event (#2835)

* fix(module:affix): fix should reset placeholder size when trigger resize event

- close #2818

* chore: fix test
  • Loading branch information
@cipchk @vthinkxie
cipchk authored and vthinkxie committed Feb 12, 2019
1 parent 05ce186 commit 7068a5e
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 42 deletions.
56 changes: 38 additions & 18 deletions components/affix/affix.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,44 @@ describe('affix', () => {
}));
});

describe('resize', () => {
it('should be reset placeholder size', fakeAsync(() => {
const offsetTop = 150;
context.newOffset = offsetTop;
setupInitialState({ offsetTop: offsetTop + 1 });
const offsetWidthSpy = spyOnProperty(componentObject.elementRef(), 'offsetWidth', 'get');
emitScroll(window, 2);
expect(componentObject.elementRef().style.width).toBe(`${width}px`);
componentObject.offsetYTo(componentObject.elementRef(), offsetTop + 2);
tick(20);
fixture.detectChanges();
offsetWidthSpy.and.returnValue(100);
componentObject.emitEvent(window, new Event('resize'));
tick(20);
fixture.detectChanges();

expect(componentObject.elementRef().style.width).toBe(`100px`);

discardPeriodicTasks();
}));

it('should be reset placeholder size when container becomes greater', fakeAsync(() => {
const target = componentObject.target();
const clientHeightSpy = spyOnProperty(target, 'clientHeight', 'get');
context.fakeTarget = target;
context.newOffsetBottom = 10;
clientHeightSpy.and.returnValue(10);
setupInitialState();
emitScroll(target, 11);
clientHeightSpy.and.returnValue(100);
componentObject.emitEvent(target, new Event('resize'));
tick(20);
fixture.detectChanges();
expect(componentObject.elementRef().style.width).toBe(`${componentObject.elementRef().offsetWidth}px`);
discardPeriodicTasks();
}));
});

describe('[nzOffsetTop]', () => {
const offsetTop = 150;
const componentOffset = 160;
Expand Down Expand Up @@ -329,24 +367,6 @@ describe('affix', () => {
}));
});

it('should adjust placeholder width when resize', fakeAsync(() => {
const offsetTop = 150;
context.newOffset = offsetTop;
setupInitialState({ offsetTop: offsetTop + 1 });
emitScroll(window, 2);
expect(componentObject.elementRef().style.width).toBe(`${width}px`);
componentObject.offsetYTo(componentObject.elementRef(), offsetTop + 2);
tick(20);
fixture.detectChanges();
componentObject.emitEvent(window, new Event('resize'));
tick(20);
fixture.detectChanges();

expect(componentObject.elementRef().style.width).toBe(``);

discardPeriodicTasks();
}));

class NzAffixPageObject {
offsets: { [key: string]: Offset };
scrolls: { [key: string]: Scroll };
Expand Down
2 changes: 1 addition & 1 deletion components/affix/nz-affix.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div #wrap>
<div #fixedEl>
<ng-content></ng-content>
</div>
63 changes: 42 additions & 21 deletions components/affix/nz-affix.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
this.clearEventListeners();
this._target = typeof value === 'string' ? this.doc.querySelector(value) : value || window;
this.setTargetEventListeners();
this.updatePosition({});
this.updatePosition({} as Event);
}

@Input()
Expand All @@ -46,6 +46,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
return;
}
this._offsetTop = toNumber(value, null);
this.updatePosition({} as Event);
}

get nzOffsetTop(): number {
Expand All @@ -58,17 +59,19 @@ export class NzAffixComponent implements OnInit, OnDestroy {
return;
}
this._offsetBottom = toNumber(value, null);
this.updatePosition({} as Event);
}

@Output()
readonly nzChange: EventEmitter<boolean> = new EventEmitter();

// tslint:disable-next-line:no-any
constructor(private scrollSrv: NzScrollService, private _el: ElementRef, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) {
constructor(_el: ElementRef, private scrollSrv: NzScrollService, @Inject(DOCUMENT) private doc: any, private cd: ChangeDetectorRef) {
this.placeholderNode = _el.nativeElement;
}

private timeout;
private events = [
private timeout: number;
private readonly events = [
'resize',
'scroll',
'touchstart',
Expand All @@ -77,10 +80,12 @@ export class NzAffixComponent implements OnInit, OnDestroy {
'pageshow',
'load'
];
private affixStyle;
private placeholderStyle;

@ViewChild('wrap') private wrap: ElementRef;
@ViewChild('fixedEl') private fixedEl: ElementRef;
// tslint:disable-next-line:no-any
private affixStyle: any;
// tslint:disable-next-line:no-any
private placeholderStyle: any;
private placeholderNode: HTMLElement;

private _target: Element | Window = window;

Expand All @@ -91,7 +96,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
ngOnInit(): void {
this.timeout = setTimeout(() => {
this.setTargetEventListeners();
this.updatePosition({});
this.updatePosition({} as Event);
});
}

Expand Down Expand Up @@ -166,7 +171,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
}

const fixed = !!affixStyle;
const wrapEl = this.wrap.nativeElement as HTMLElement;
const wrapEl = this.fixedEl.nativeElement as HTMLElement;
wrapEl.style.cssText = this.genStyle(affixStyle);
this.affixStyle = affixStyle;
const cls = 'ant-affix';
Expand All @@ -186,22 +191,34 @@ export class NzAffixComponent implements OnInit, OnDestroy {
if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) {
return;
}
(this._el.nativeElement as HTMLElement).style.cssText = this.genStyle(placeholderStyle);
this.placeholderNode.style.cssText = this.genStyle(placeholderStyle);
this.placeholderStyle = placeholderStyle;
}

private syncPlaceholderStyle(e: Event): void {
if (!this.affixStyle) {
return ;
}
this.placeholderNode.style.cssText = '';
const widthObj = { width: this.placeholderNode.offsetWidth };
this.setAffixStyle(e, {
...this.affixStyle,
...widthObj
});
this.setPlaceholderStyle(widthObj);
}

@throttleByAnimationFrameDecorator()
// tslint:disable-next-line:no-any
updatePosition(e: any): void {
updatePosition(e: Event): void {
const targetNode = this._target;
// Backwards support
let offsetTop = this.nzOffsetTop;
const scrollTop = this.scrollSrv.getScroll(targetNode, true);
const affixNode = this._el.nativeElement as HTMLElement;
const elemOffset = this.getOffset(affixNode, targetNode);
const elemOffset = this.getOffset(this.placeholderNode, targetNode);
const fixedNode = this.fixedEl.nativeElement as HTMLElement;
const elemSize = {
width : affixNode.offsetWidth,
height: affixNode.offsetHeight
width : fixedNode.offsetWidth,
height: fixedNode.offsetHeight
};
const offsetMode = {
top : false,
Expand All @@ -218,7 +235,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
const targetRect = this.getTargetRect(targetNode);
const targetInnerHeight =
(targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
if (scrollTop > elemOffset.top - (offsetTop as number) && offsetMode.top) {
if (scrollTop >= elemOffset.top - (offsetTop as number) && offsetMode.top) {
const width = elemOffset.width;
const top = targetRect.top + (offsetTop as number);
this.setAffixStyle(e, {
Expand All @@ -233,7 +250,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
height: elemSize.height
});
} else if (
scrollTop < elemOffset.top + elemSize.height + (this._offsetBottom as number) - targetInnerHeight &&
scrollTop <= elemOffset.top + elemSize.height + (this._offsetBottom as number) - targetInnerHeight &&
offsetMode.bottom
) {
const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
Expand All @@ -249,12 +266,16 @@ export class NzAffixComponent implements OnInit, OnDestroy {
height: elemOffset.height
});
} else {
if (e.type === 'resize' && this.affixStyle && this.affixStyle.position === 'fixed' && affixNode.offsetWidth) {
this.setAffixStyle(e, { ...this.affixStyle, width: affixNode.offsetWidth });
if (e.type === 'resize' && this.affixStyle && this.affixStyle.position === 'fixed' && this.placeholderNode.offsetWidth) {
this.setAffixStyle(e, { ...this.affixStyle, width: this.placeholderNode.offsetWidth });
} else {
this.setAffixStyle(e, null);
}
this.setPlaceholderStyle(null);
}

if (e.type === 'resize') {
this.syncPlaceholderStyle(e);
}
}
}
4 changes: 2 additions & 2 deletions components/anchor/anchor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,12 +211,12 @@ describe('anchor', () => {
expect(el).not.toBeNull();
return el.nativeElement as HTMLElement;
}
to(href: string = '#何时使用'): this {
to(href: string = '#basic'): this {
this.getEl(`nz-affix [href="${href}"]`).click();
fixture.detectChanges();
return this;
}
scrollTo(href: string = '#何时使用'): this {
scrollTo(href: string = '#basic'): this {
const toNode = dl.query(By.css(href));
(toNode.nativeElement as HTMLElement).scrollIntoView();
fixture.detectChanges();
Expand Down

0 comments on commit 7068a5e

Please sign in to comment.