Skip to content

Commit

Permalink
feat(modals): added declarative modals component
Browse files Browse the repository at this point in the history
closes #29
  • Loading branch information
valorkin committed May 31, 2016
1 parent 0146e5f commit 1f808e5
Show file tree
Hide file tree
Showing 14 changed files with 719 additions and 4 deletions.
10 changes: 10 additions & 0 deletions components/modal.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export * from './modal/modal-backdrop.component';
export * from './modal/modal-options.class';
export * from './modal/modal.component';

import {ModalBackdropComponent} from './modal/modal-backdrop.component';
import {ModalDirective} from './modal/modal.component';

export const MODAL_DIRECTVES = [
ModalDirective, ModalBackdropComponent
];
32 changes: 32 additions & 0 deletions components/modal/modal-backdrop.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import {Component, ElementRef} from '@angular/core';
import {NgClass} from '@angular/common';
import {ClassName} from './modal-options.class';

export class ModalBackdropOptions {
public animate:boolean = true;

public constructor(options:ModalBackdropOptions) {
Object.assign(this, options);
}
}

@Component({
selector: 'bs-modal-backdrop',
directives: [NgClass],
template: `
<div class="${ClassName.BACKDROP}"
[class.${ClassName.IN}]="isShown"
[class.${ClassName.FADE}]="isAnimated"></div>`
})
export class ModalBackdropComponent {
public isAnimated:boolean = true;
public isShown:boolean = false;

public element:ElementRef;

public constructor(options:ModalBackdropOptions, element:ElementRef) {
this.isAnimated = options.animate;
this.element = element;
}
}

38 changes: 38 additions & 0 deletions components/modal/modal-options.class.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
export interface ModalOptions {
/**
* Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
*/
backdrop:boolean | 'static';
/**
* Closes the modal when escape key is pressed.
*/
keyboard:boolean;

focus:boolean;
/**
* Shows the modal when initialized.
*/
show:boolean;
}

export const modalConfigDefaults:ModalOptions = {
backdrop: true,
keyboard: true,
focus: true,
show: true
};

export const ClassName:any = {
SCROLLBAR_MEASURER: 'modal-scrollbar-measure',
BACKDROP: 'modal-backdrop',
OPEN: 'modal-open',
FADE: 'fade',
IN: 'in'
};

export const Selector:any = {
DIALOG: '.modal-dialog',
DATA_TOGGLE: '[data-toggle="modal"]',
DATA_DISMISS: '[data-dismiss="modal"]',
FIXED_CONTENT: '.navbar-fixed-top, .navbar-fixed-bottom, .is-fixed'
};
Loading

0 comments on commit 1f808e5

Please sign in to comment.