From 8ec342c886c02334ea5159f90979413e2b2de791 Mon Sep 17 00:00:00 2001 From: "Shlomi Assaf (shlassaf)" Date: Mon, 22 Aug 2016 22:59:52 +0300 Subject: [PATCH] refactor(overlay): add `inElement` as a base context property (overlay-context) refactor(overlay): remove `inside` property from `OverlayConfig` demo: apply inElement property change to demo pages. BREAKING CHANGE: `OverlayConfig` no longer sets the bounds area of the overlay, instead the context is used which means it is now user configurable --- .../angular2-modal/models/overlay-context.ts | 124 ++++++++++-------- .../angular2-modal/models/tokens.ts | 7 - .../angular2-modal/overlay/overlay.service.ts | 2 +- src/demo/app/bootstrap-demo/presets.ts | 75 +++++------ src/demo/app/home/home.ts | 1 + src/demo/app/vex-demo/vex-demo.ts | 2 +- 6 files changed, 110 insertions(+), 101 deletions(-) diff --git a/src/components/angular2-modal/models/overlay-context.ts b/src/components/angular2-modal/models/overlay-context.ts index ec0a4cbe..8cba55cf 100644 --- a/src/components/angular2-modal/models/overlay-context.ts +++ b/src/components/angular2-modal/models/overlay-context.ts @@ -6,46 +6,55 @@ import { DialogRef } from './dialog-ref'; import { WideVCRef } from './tokens'; export const DEFAULT_VALUES = { - isBlocking: true, - keyboard: [27], - supportsKey: function supportsKey(keyCode: number): boolean { - return (>this.keyboard).indexOf(keyCode) > -1; - } + inElement: false, + isBlocking: true, + keyboard: [27], + supportsKey: function supportsKey(keyCode: number): boolean { + return (>this.keyboard).indexOf(keyCode) > -1; + } }; const DEFAULT_SETTERS = [ - 'isBlocking', - 'keyboard' + 'inElement', + 'isBlocking', + 'keyboard' ]; export class OverlayContext { - /** - * Describes if the modal is blocking modal. - * A Blocking modal is not closable by clicking outside of the modal window. - * Defaults to false. - */ - isBlocking: boolean; + /** + * Describes if the modal is rendered within the container element. + * The container element is the ViewContainerRef supplied. + * Defaults to false. + */ + inElement: boolean; + + /** + * Describes if the modal is blocking modal. + * A Blocking modal is not closable by clicking outside of the modal window. + * Defaults to false. + */ + isBlocking: boolean; - /** - * Keyboard value/s that close the modal. - * Accepts either a single numeric value or an array of numeric values. - * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise. - * Defaults to 27, set `null` implicitly to disable. - */ - keyboard: Array | number; + /** + * Keyboard value/s that close the modal. + * Accepts either a single numeric value or an array of numeric values. + * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise. + * Defaults to 27, set `null` implicitly to disable. + */ + keyboard: Array | number; - normalize(): void { - if (this.isBlocking !== false) - this.isBlocking = true; + normalize(): void { + if (this.isBlocking !== false) + this.isBlocking = true; - if (this.keyboard === null) { - this.keyboard = []; - } else if (typeof this.keyboard === 'number') { - this.keyboard = [this.keyboard]; - } else if (!Array.isArray(>this.keyboard)) { - this.keyboard = DEFAULT_VALUES.keyboard; - } + if (this.keyboard === null) { + this.keyboard = []; + } else if (typeof this.keyboard === 'number') { + this.keyboard = [this.keyboard]; + } else if (!Array.isArray(>this.keyboard)) { + this.keyboard = DEFAULT_VALUES.keyboard; } + } } /** @@ -54,35 +63,40 @@ export class OverlayContext { */ @Injectable() export class OverlayContextBuilder extends FluentAssign { - /** - * Describes if the modal is blocking modal. - * A Blocking modal is not closable by clicking outside of the modal window. - * Defaults to false. - */ - isBlocking: FluentAssignMethod; + /** + * Describes if the modal is rendered within the container element. + * The container element is the ViewContainerRef supplied. + * Defaults to false. + */ + inElement: FluentAssignMethod; - /** - * Keyboard value/s that close the modal. - * Accepts either a single numeric value or an array of numeric values. - * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise. - * Defaults to 27, set `null` implicitly to disable. - */ - keyboard: FluentAssignMethod | number, this>; + /** + * Describes if the modal is blocking modal. + * A Blocking modal is not closable by clicking outside of the modal window. + * Defaults to false. + */ + isBlocking: FluentAssignMethod; + /** + * Keyboard value/s that close the modal. + * Accepts either a single numeric value or an array of numeric values. + * A modal closed by a keyboard stroke will result in a 'reject' notification from the promise. + * Defaults to 27, set `null` implicitly to disable. + */ + keyboard: FluentAssignMethod | number, this>; - constructor( - defaultValues: T | T[] = undefined, - initialSetters: string[] = undefined, - baseType: new () => T = undefined - ) { - super( - extend(DEFAULT_VALUES, defaultValues || {}), - arrayUnion(DEFAULT_SETTERS, initialSetters || []), - baseType - ); - } + + constructor(defaultValues: T | T[] = undefined, + initialSetters: string[] = undefined, + baseType: new () => T = undefined) { + super( + extend(DEFAULT_VALUES, defaultValues || {}), + arrayUnion(DEFAULT_SETTERS, initialSetters || []), + baseType + ); + } } export interface ModalControllingContextBuilder { - open(viewContainer?: WideVCRef): Promise>; + open(viewContainer?: WideVCRef): Promise>; } diff --git a/src/components/angular2-modal/models/tokens.ts b/src/components/angular2-modal/models/tokens.ts index 27be60da..417e098d 100644 --- a/src/components/angular2-modal/models/tokens.ts +++ b/src/components/angular2-modal/models/tokens.ts @@ -39,13 +39,6 @@ export interface OverlayConfig { */ viewContainer?: WideVCRef; - /** - * If true, render's the component inside the ViewContainerRef, - * otherwise render's the component in the root element (body in DOM) - * Default: true if ViewContainer supplied, false if not supplied. - */ - inside?: boolean; - renderer?: OverlayRenderer; /** diff --git a/src/components/angular2-modal/overlay/overlay.service.ts b/src/components/angular2-modal/overlay/overlay.service.ts index b30d734e..e6f62832 100644 --- a/src/components/angular2-modal/overlay/overlay.service.ts +++ b/src/components/angular2-modal/overlay/overlay.service.ts @@ -73,7 +73,7 @@ export class Overlay { } let dialog = new DialogRef(this, config.context || {}); - dialog.inElement = !!config.inside; + dialog.inElement = !!config.context.inElement; let cmpRef = renderer.render(dialog, vcRef); diff --git a/src/demo/app/bootstrap-demo/presets.ts b/src/demo/app/bootstrap-demo/presets.ts index 50179e60..ae112420 100644 --- a/src/demo/app/bootstrap-demo/presets.ts +++ b/src/demo/app/bootstrap-demo/presets.ts @@ -1,15 +1,15 @@ import { - Modal, - OneButtonPresetBuilder, - TwoButtonPresetBuilder + Modal, + OneButtonPresetBuilder, + TwoButtonPresetBuilder } from '../../../components/angular2-modal/plugins/bootstrap/index'; export function alert(modal: Modal): OneButtonPresetBuilder { - return modal.alert() - .size('lg') - .showClose(true) - .title('A simple Alert style modal window') - .body(` + return modal.alert() + .size('lg') + .showClose(true) + .title('A simple Alert style modal window') + .body(`

Alert is a classic (title/body/footer) 1 button modal window that does not block.

Configuration: @@ -23,10 +23,10 @@ export function alert(modal: Modal): OneButtonPresetBuilder { } export function prompt(modal: Modal): OneButtonPresetBuilder { - return modal.prompt() - .size('lg') - .title('A simple Prompt style modal window') - .body(` + 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: @@ -39,13 +39,13 @@ export function prompt(modal: Modal): OneButtonPresetBuilder { } export function confirm(modal: Modal): TwoButtonPresetBuilder { - return modal.confirm() - .size('lg') - .titleHtml(` + return modal.confirm() + .size('lg') + .titleHtml(`
A simple Confirm style modal window
`) - .body(` + .body(`

Confirm is a classic (title/body/footer) 2 button modal window that blocks.

Configuration:
    @@ -58,30 +58,31 @@ export function confirm(modal: Modal): TwoButtonPresetBuilder { } export function cascading(modal: Modal) { - let presets = []; + let presets = []; - presets.push(alert(modal)); - presets.push(prompt(modal)); - presets.push(confirm(modal)); - presets.push( - modal.prompt() - .size('sm') - .title('Cascading modals!') - .body('Find your way out...') - ); + presets.push(alert(modal)); + presets.push(prompt(modal)); + presets.push(confirm(modal)); + presets.push( + modal.prompt() + .size('sm') + .title('Cascading modals!') + .body('Find your way out...') + ); - return { - open: () => { - let ret = presets.shift().open(); - while (presets.length > 0) presets.shift().open(); - return ret; - } - }; + return { + open: () => { + let ret = presets.shift().open(); + while (presets.length > 0) presets.shift().open(); + return ret; + } + }; } export function inElement(modal: Modal) { - return modal.prompt() - .size('sm') - .title('A modal contained by an element') - .body('Try stacking up more modals!'); + return modal.prompt() + .size('sm') + .title('A modal contained by an element') + .inElement(true) + .body('Try stacking up more modals!'); } diff --git a/src/demo/app/home/home.ts b/src/demo/app/home/home.ts index 681ffc56..218a88bf 100644 --- a/src/demo/app/home/home.ts +++ b/src/demo/app/home/home.ts @@ -18,6 +18,7 @@ export class Home { this.modal.alert() .title('Angular 2 Modal') .templateRef(this.myTemplate) + .inElement(true) .open('home-overlay-container') .then(d => d.result) .catch((e) => { diff --git a/src/demo/app/vex-demo/vex-demo.ts b/src/demo/app/vex-demo/vex-demo.ts index 455e5d1d..92b41cd2 100644 --- a/src/demo/app/vex-demo/vex-demo.ts +++ b/src/demo/app/vex-demo/vex-demo.ts @@ -58,7 +58,7 @@ export class VexDemo { }, { text: 'In Element example', - factory: () => presets.alert.call(this, this.modal).open('demo-head') + factory: () => presets.alert.call(this, this.modal).inElement(true).open('demo-head') }, { text: 'Custom Modal example',