Skip to content
Permalink
Browse files

feat(module:modal): smart to determine whether to add padding-right (#…

…1877)

close #1422
  • Loading branch information...
wilsoncook authored and hsuanxyz committed Aug 19, 2018
1 parent 02a84a9 commit a5d631db027d593e9032dd99b336cb8ae6e7da38
Showing with 34 additions and 10 deletions.
  1. +13 −3 components/modal/nz-modal.component.ts
  2. +21 −7 components/modal/nz-modal.spec.ts
@@ -414,13 +414,23 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
const openModals = this.modalControl.openModals;

if (openModals.length + plusNum > 0) {
this.renderer.setStyle(this.document.body, 'padding-right', `${this.nzMeasureScrollbarService.scrollBarWidth}px`);
this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
} else {
if (this.hasBodyScrollBar()) { // Adding padding-right only when body's scrollbar is able to shown up
this.renderer.setStyle(this.document.body, 'padding-right', `${this.nzMeasureScrollbarService.scrollBarWidth}px`);
this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
}
} else { // NOTE: we need to always remove the padding due to the scroll bar may be disappear by window resizing before modal closed
this.renderer.removeStyle(this.document.body, 'padding-right');
this.renderer.removeStyle(this.document.body, 'overflow');
}
}

/**
* Check whether the body element is able to has the scroll bar (if the body content height exceeds the window's height)
* Exceptional Cases: users can show the scroll bar by their own permanently (eg. overflow: scroll)
*/
private hasBodyScrollBar(): boolean {
return this.document.body.scrollHeight > (window.innerHeight || this.document.documentElement.clientHeight);
}
}

////////////
@@ -1,7 +1,7 @@
/* TODO: Sort out and rewrite for more standardized */

import { Component, DebugElement, ElementRef, EventEmitter, Input, NgModule } from '@angular/core';
import { async, fakeAsync, flush, flushMicrotasks, inject, tick, ComponentFixture, ComponentFixtureAutoDetect, TestBed } from '@angular/core/testing';
import { Component, ElementRef, EventEmitter, Input } from '@angular/core';
import { async, fakeAsync, flush, inject, tick, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';

@@ -15,12 +15,10 @@ import { NzI18nService } from '../i18n/nz-i18n.service';
import { CssUnitPipe } from './css-unit.pipe';
import { NzModalControlService } from './nz-modal-control.service';
import { NzModalRef } from './nz-modal-ref.class';
import { MODAL_ANIMATE_DURATION, NzModalComponent } from './nz-modal.component';
import { NzModalComponent } from './nz-modal.component';
import { NzModalModule } from './nz-modal.module';
import { NzModalService } from './nz-modal.service';

const WAIT_ANIMATE_TIME = MODAL_ANIMATE_DURATION + 50;

describe('modal testing (legacy)', () => {
let instance;
let fixture: ComponentFixture<{}>;
@@ -473,6 +471,24 @@ describe('NzModal', () => {
modalRef.triggerCancel();
expect(spyCancel).toHaveBeenCalled();
});

it('should add/remove padding-left depends on current scrollbar (just functions mockup)', () => {
const modalRef = modalService.create();
const modalInstance = modalRef.getInstance();
spyOnProperty(window, 'innerHeight').and.returnValue(null); // Disable innerHeight to test another branch
// tslint:disable-next-line:no-string-literal
spyOnProperty(modalInstance['document'].body, 'scrollHeight').and.returnValue(200);
// tslint:disable-next-line:no-string-literal
spyOnProperty(modalInstance['document'].documentElement, 'clientHeight').and.returnValue(100);
// tslint:disable-next-line:no-string-literal
expect(modalInstance['hasBodyScrollBar']()).toBeTruthy();

// tslint:disable-next-line:no-string-literal
const spySetStyle = spyOn(modalInstance['renderer'], 'setStyle');
// tslint:disable-next-line:no-string-literal
modalInstance['changeBodyOverflow'](1);
expect(spySetStyle).toHaveBeenCalled();
});
});
});

@@ -658,8 +674,6 @@ class TestCssUnitPipeComponent { }
})
export class ModalByServiceComponent {
nonServiceModalVisible = false;

constructor(modalControlService: NzModalControlService) {}
}

// -------------------------------------------

0 comments on commit a5d631d

Please sign in to comment.
You can’t perform that action at this time.