From 329f9878b28da7af618c490335ea8a62f1921e10 Mon Sep 17 00:00:00 2001 From: CaselIT Date: Wed, 31 Aug 2016 14:24:08 +0200 Subject: [PATCH] feat(bootstrap): Added proper prompt support in bootstrap. closes #https://github.com/shlomiassaf/angular2-modal/issues/119 --- .../plugins/bootstrap/bootstrap.module.ts | 3 +- .../angular2-modal/plugins/bootstrap/index.ts | 7 +- .../bootstrap/message-modal.component.ts | 18 ++- .../angular2-modal/plugins/bootstrap/modal.ts | 6 +- .../bootstrap/presets/two-button-preset.ts | 116 ++++++++++++------ src/demo/app/bootstrap-demo/presets.ts | 17 +-- 6 files changed, 113 insertions(+), 54 deletions(-) diff --git a/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts b/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts index 94de9cca..ea483571 100644 --- a/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts +++ b/src/components/angular2-modal/plugins/bootstrap/bootstrap.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; import { ModalModule, Modal as BaseModal } from '../../../../components/angular2-modal'; @@ -20,7 +21,7 @@ function getProviders(): any[] { } @NgModule({ - imports: [ ModalModule, CommonModule ], + imports: [ ModalModule, CommonModule, FormsModule ], declarations: [ BSModalFooter, BSMessageModalTitle, diff --git a/src/components/angular2-modal/plugins/bootstrap/index.ts b/src/components/angular2-modal/plugins/bootstrap/index.ts index dbc7e790..111f6af0 100644 --- a/src/components/angular2-modal/plugins/bootstrap/index.ts +++ b/src/components/angular2-modal/plugins/bootstrap/index.ts @@ -16,7 +16,12 @@ export { export { ModalOpenContext, ModalOpenContextBuilder } from '../../../../components/angular2-modal'; export { OneButtonPreset, OneButtonPresetBuilder } from './presets/one-button-preset'; -export { TwoButtonPreset, TwoButtonPresetBuilder } from './presets/two-button-preset'; +export { + TwoButtonPreset, + TwoButtonPresetBuilder, + PromptPreset, + PromptPresetBuilder +} from './presets/two-button-preset'; export { Modal } from './modal'; export { BootstrapModalModule } from './bootstrap.module'; diff --git a/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts b/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts index e9324389..dcbc91d2 100644 --- a/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts +++ b/src/components/angular2-modal/plugins/bootstrap/message-modal.component.ts @@ -44,10 +44,26 @@ export class BSMessageModalTitle { @Component({ selector: 'modal-body', encapsulation: ViewEncapsulation.None, - template: `
` + styles: [`.form-group { + margin-top: 10px; + }`], + template: `
+
+
+ +
+
+` }) export class BSMessageModalBody { + private context: MessageModalPreset; constructor(public dialog: DialogRef) { + this.context = dialog.context; } } diff --git a/src/components/angular2-modal/plugins/bootstrap/modal.ts b/src/components/angular2-modal/plugins/bootstrap/modal.ts index 4199d1ff..4ce7fa44 100644 --- a/src/components/angular2-modal/plugins/bootstrap/modal.ts +++ b/src/components/angular2-modal/plugins/bootstrap/modal.ts @@ -19,7 +19,7 @@ import { import { BSModalContainer } from './modal-container.component'; import { OneButtonPresetBuilder } from './../bootstrap/presets/one-button-preset'; -import { TwoButtonPresetBuilder } from './../bootstrap/presets/two-button-preset'; +import { TwoButtonPresetBuilder, PromptPresetBuilder } from './../bootstrap/presets/two-button-preset'; @Injectable() @@ -32,8 +32,8 @@ export class Modal extends Modal_ { return new OneButtonPresetBuilder(this, {isBlocking: false}); } - prompt(): OneButtonPresetBuilder { - return new OneButtonPresetBuilder(this, {isBlocking: true, keyboard: null}); + prompt(): PromptPresetBuilder { + return new PromptPresetBuilder(this, {isBlocking: true, keyboard: null}); } confirm(): TwoButtonPresetBuilder { diff --git a/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts b/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts index 5053d7d6..63e601e4 100644 --- a/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts +++ b/src/components/angular2-modal/plugins/bootstrap/presets/two-button-preset.ts @@ -1,5 +1,5 @@ import { ResolvedReflectiveProvider } from '@angular/core'; -import { Modal, FluentAssignMethod, extend } from '../../../../../components/angular2-modal'; +import { Modal, FluentAssignMethod, extend, arrayUnion } from '../../../../../components/angular2-modal'; import { BSMessageModal } from '../message-modal.component'; import { MessageModalPresetBuilder } from './message-modal-preset'; import { OneButtonPreset } from './one-button-preset'; @@ -19,43 +19,87 @@ export interface TwoButtonPreset extends OneButtonPreset { cancelBtnClass: string; } +/** Common two button preset */ +export abstract class AbstractTwoButtonPresetBuilder extends MessageModalPresetBuilder { + okBtn: FluentAssignMethod; + okBtnClass: FluentAssignMethod; + cancelBtn: FluentAssignMethod; + cancelBtnClass: FluentAssignMethod; + + constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined, + initialSetters: string[] = []) { + super(extend({ + modal: modal, + okBtn: 'OK', + okBtnClass: 'btn btn-primary', + cancelBtn: 'Cancel', + cancelBtnClass: 'btn btn-default' + }, defaultValues || {}), arrayUnion([ + 'okBtn', + 'okBtnClass', + 'cancelBtn', + 'cancelBtnClass', + ], initialSetters)); + } + + $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] { + this.addButton( + config.cancelBtnClass, + config.cancelBtn, + (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.dismiss() + ); + + return super.$$beforeOpen(config); + } +} + /** * A Preset for a classic 2 button modal window. */ -export class TwoButtonPresetBuilder extends MessageModalPresetBuilder { - okBtn: FluentAssignMethod; - okBtnClass: FluentAssignMethod; - cancelBtn: FluentAssignMethod; - cancelBtnClass: FluentAssignMethod; - - constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined) { - super(extend({ - modal: modal, - okBtn: 'OK', - okBtnClass: 'btn btn-primary', - cancelBtn: 'Cancel', - cancelBtnClass: 'btn btn-default' - }, defaultValues || {}), [ - 'okBtn', - 'okBtnClass', - 'cancelBtn', - 'cancelBtnClass' - ]); - } - - $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] { - this.addButton( - config.okBtnClass, - config.okBtn, - (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.close(true) - ) - .addButton( - config.cancelBtnClass, - config.cancelBtn, - (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.dismiss() - ); - - return super.$$beforeOpen(config); - } +export class TwoButtonPresetBuilder extends AbstractTwoButtonPresetBuilder { + + constructor(modal: Modal, defaultValues: TwoButtonPreset = undefined) { + super(modal, defaultValues); + } + + $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] { + this.addButton( + config.okBtnClass, + config.okBtn, + (cmp: BSMessageModal, $event: MouseEvent) => cmp.dialog.close(true) + ); + + return super.$$beforeOpen(config); + } +} + +export interface PromptPreset extends TwoButtonPreset { + showInput: boolean; + /** Default value shown in the prompt. */ + defaultValue: string; + /** A placeholder for the input element. */ + placeholder: string; + +} + +export class PromptPresetBuilder extends AbstractTwoButtonPresetBuilder { + placeholder: FluentAssignMethod; + defaultValue: FluentAssignMethod; + + constructor(modal: Modal, defaultValues: PromptPreset = undefined) { + super(modal, extend({ showInput: true }, defaultValues || {}), + ['placeholder', 'defaultValue']); + } + + $$beforeOpen(config: TwoButtonPreset): ResolvedReflectiveProvider[] { + this.addButton( + config.okBtnClass, + config.okBtn, + (cmp: BSMessageModal, $event: MouseEvent) => + cmp.dialog.close((cmp.dialog.context as PromptPreset).defaultValue) + ); + + return super.$$beforeOpen(config); + } } diff --git a/src/demo/app/bootstrap-demo/presets.ts b/src/demo/app/bootstrap-demo/presets.ts index ae112420..40234f08 100644 --- a/src/demo/app/bootstrap-demo/presets.ts +++ b/src/demo/app/bootstrap-demo/presets.ts @@ -1,7 +1,8 @@ import { Modal, OneButtonPresetBuilder, - TwoButtonPresetBuilder + TwoButtonPresetBuilder, + PromptPresetBuilder } from '../../../components/angular2-modal/plugins/bootstrap/index'; export function alert(modal: Modal): OneButtonPresetBuilder { @@ -22,20 +23,12 @@ export function alert(modal: Modal): OneButtonPresetBuilder { `); } -export function prompt(modal: Modal): OneButtonPresetBuilder { +export function prompt(modal: Modal): PromptPresetBuilder { return modal.prompt() .size('lg') .title('A simple Prompt style modal window') - .body(` -

Prompt is a classic (title/body/footer) 1 button modal window that - blocks.

- Configuration: -
    -
  • Blocks (only button click can dismiss)
    • -
  • Size large
    • -
  • Keyboard can not dismiss
    • -
  • HTML content
    • -
`); + .placeholder('This is a placeholder') + .body('Please type a value!'); } export function confirm(modal: Modal): TwoButtonPresetBuilder {