From 8495f8978783db19c9c5fb2a17ce149a166f97a4 Mon Sep 17 00:00:00 2001 From: svetoldo4444ka Date: Fri, 7 Dec 2018 12:55:45 +0200 Subject: [PATCH] feat(modal): add method to change modal window class (#4811) Fixes #2824 * fix(test): increase code coverage * Update modal-backdrop.component.spec.ts * feat(modal-backdrop): added tests to modal-backdrop component * Update modal-backdrop.component.spec.ts * Update modal-backdrop.component.spec.ts * Update modal-backdrop.component.spec.ts * Update modal-backdrop.component.spec.ts * Update modal-backdrop.component.spec.ts * fix(files): clean up --- demo/src/app/components/+modal/demos/index.ts | 2 ++ .../change-class/change-class.html | 14 +++++++++ .../change-class/change-class.ts | 26 ++++++++++++++++ .../components/+modal/modal-section.list.ts | 9 ++++++ src/modal/bs-modal-ref.service.ts | 4 +++ src/modal/bs-modal.service.ts | 3 ++ src/spec/modal-backdrop.component.spec.ts | 31 +++++++++++++++++++ 7 files changed, 89 insertions(+) create mode 100644 demo/src/app/components/+modal/demos/service-options/change-class/change-class.html create mode 100644 demo/src/app/components/+modal/demos/service-options/change-class/change-class.ts create mode 100644 src/spec/modal-backdrop.component.spec.ts diff --git a/demo/src/app/components/+modal/demos/index.ts b/demo/src/app/components/+modal/demos/index.ts index 1c90916e61..1058ab78ab 100644 --- a/demo/src/app/components/+modal/demos/index.ts +++ b/demo/src/app/components/+modal/demos/index.ts @@ -17,6 +17,7 @@ import { DemoModalServiceConfirmWindowComponent } from './service-confirm-window import { DemoModalScrollingLongContentComponent } from './scrolling-long-content/scrolling-long-content'; import { DemoAccessibilityComponent } from './accessibility/accessibility'; import { DemoModalWithPopupsComponent } from './modal-with-popups/modal-with-popups'; +import { DemoModalServiceChangeClassComponent } from './service-options/change-class/change-class'; export const DEMO_COMPONENTS = [ DemoModalSizesComponent, @@ -36,5 +37,6 @@ export const DEMO_COMPONENTS = [ DemoModalServiceConfirmWindowComponent, DemoModalScrollingLongContentComponent, DemoAccessibilityComponent, + DemoModalServiceChangeClassComponent, DemoModalWithPopupsComponent ]; diff --git a/demo/src/app/components/+modal/demos/service-options/change-class/change-class.html b/demo/src/app/components/+modal/demos/service-options/change-class/change-class.html new file mode 100644 index 0000000000..cb1e29f3ca --- /dev/null +++ b/demo/src/app/components/+modal/demos/service-options/change-class/change-class.html @@ -0,0 +1,14 @@ + + + +
+

Modal

+ +
+
+ This is a modal. +
+ + diff --git a/demo/src/app/components/+modal/demos/service-options/change-class/change-class.ts b/demo/src/app/components/+modal/demos/service-options/change-class/change-class.ts new file mode 100644 index 0000000000..a3c9b43f4f --- /dev/null +++ b/demo/src/app/components/+modal/demos/service-options/change-class/change-class.ts @@ -0,0 +1,26 @@ +import { Component, TemplateRef } from '@angular/core'; +import { BsModalService } from 'ngx-bootstrap/modal'; +import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; + +@Component({ + selector: 'demo-modal-change-class', + templateUrl: './change-class.html' +}) +export class DemoModalServiceChangeClassComponent { + modalRef: BsModalRef; + valueWidth = false; + constructor(private modalService: BsModalService) {} + + openModal(template: TemplateRef) { + this.modalRef = this.modalService.show( + template, + Object.assign({}, { class: 'modal-sm' }) + ); + } + + setModalClass() { + this.valueWidth = !this.valueWidth; + const modalWidth = this.valueWidth ? 'modal-lg' : 'modal-sm'; + this.modalRef.setClass(modalWidth); + } +} diff --git a/demo/src/app/components/+modal/modal-section.list.ts b/demo/src/app/components/+modal/modal-section.list.ts index 4664164478..d9c7c16b27 100644 --- a/demo/src/app/components/+modal/modal-section.list.ts +++ b/demo/src/app/components/+modal/modal-section.list.ts @@ -7,6 +7,7 @@ import { DemoModalServiceCustomCSSClassComponent } from './demos/service-options import { DemoModalServiceDisableEscClosingComponent } from './demos/service-options/disable-esc-closing/disable-esc-closing'; import { DemoModalServiceDisableBackdropComponent } from './demos/service-options/disable-backdrop/disable-backdrop'; import { DemoModalServiceConfirmWindowComponent } from './demos/service-confirm-window/service-confirm-window'; +import { DemoModalServiceChangeClassComponent } from './demos/service-options/change-class/change-class'; import { DemoModalStaticComponent } from './demos/static/static'; import { DemoModalSizesComponent } from './demos/sizes/sizes'; @@ -146,6 +147,14 @@ export const demoComponentContent: ContentSection[] = [ html: require('!!raw-loader?lang=markup!./demos/service-options/disable-backdrop/disable-backdrop.html'), description: `

There is backdrop options that you can configure.

`, outlet: DemoModalServiceDisableBackdropComponent + }, + { + title: 'Change class', + anchor: 'change-class', + component: require('!!raw-loader?lang=typescript!./demos/service-options/change-class/change-class.ts'), + html: require('!!raw-loader?lang=markup!./demos/service-options/change-class/change-class.html'), + description: `

Calling setClass method to change modal's window class

`, + outlet: DemoModalServiceChangeClassComponent } ] }, diff --git a/src/modal/bs-modal-ref.service.ts b/src/modal/bs-modal-ref.service.ts index 1d5ec25b94..0c51c38928 100644 --- a/src/modal/bs-modal-ref.service.ts +++ b/src/modal/bs-modal-ref.service.ts @@ -12,4 +12,8 @@ export class BsModalRef { * Hides the modal */ hide: () => void = Function; + /** + * Sets new class to modal window + */ + setClass: (newClass: string) => void = Function; } diff --git a/src/modal/bs-modal.service.ts b/src/modal/bs-modal.service.ts index 0acfe88273..5cb9d6e8a7 100644 --- a/src/modal/bs-modal.service.ts +++ b/src/modal/bs-modal.service.ts @@ -121,6 +121,9 @@ export class BsModalService { modalContainerRef.instance.hide(); }; bsModalRef.content = modalLoader.getInnerComponent() || null; + bsModalRef.setClass = (newClass: string) => { + modalContainerRef.instance.config.class = newClass; + }; return bsModalRef; } diff --git a/src/spec/modal-backdrop.component.spec.ts b/src/spec/modal-backdrop.component.spec.ts new file mode 100644 index 0000000000..422d271630 --- /dev/null +++ b/src/spec/modal-backdrop.component.spec.ts @@ -0,0 +1,31 @@ +import { ModalBackdropComponent } from '../modal'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +describe('ModalBackdropComponent tests', () => { + let fixture: ComponentFixture; + let component: ModalBackdropComponent; + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ModalBackdropComponent] + }); + fixture = TestBed.createComponent(ModalBackdropComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should get and set isAnimated correctly', () => { + component.isAnimated = true; + expect(component.isAnimated).toBeTruthy(); + }); + + it('isShown() tests', () => { + component.isShown = true; + fixture.detectChanges(); + let modalClass = component.element.nativeElement.classList.contains('in'); + expect(modalClass).toBeTruthy(); + component.isShown = false; + fixture.detectChanges(); + modalClass = component.element.nativeElement.classList.contains('in'); + expect(modalClass).toBeFalsy(); + }); +});