Skip to content

Commit

Permalink
feat(Modal): Add open and close events for binding
Browse files Browse the repository at this point in the history
  • Loading branch information
@coryshaw1
coryshaw1 committed Jul 1, 2016
1 parent f0e13f5 commit 261b5ba
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 10 deletions.
13 changes: 10 additions & 3 deletions bundles/fuel-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1213,19 +1213,23 @@ System.registerDynamic("fuel-ui/dist/components/Modal/Modal", ["@angular/core",
this.closeButton = true;
this.modalTitle = '';
this.size = '';
this.close = new core_1.EventEmitter();
this.open = new core_1.EventEmitter();
this._el = el.nativeElement;
}
Modal.prototype.clickElement = function(e) {
if (this.closeOnUnfocus) {
if ((e.target && (e.target.className == 'modal customFadeIn' || e.target.className == 'modal-dialog')) || (e.srcElement && (e.srcElement.className == 'modal customFadeIn' || e.srcElement.className == 'modal-dialog')))
this.showModal(false);
this.closeModal();
}
};
Modal.prototype.getElement = function() {
return this._el;
};
Modal.prototype.closeModal = function() {
return this.showModal(false);
this.showModal(false);
this.close.next(null);
return false;
};
Modal.prototype.showModal = function(isDisplayed) {
var _this = this;
Expand All @@ -1237,6 +1241,7 @@ System.registerDynamic("fuel-ui/dist/components/Modal/Modal", ["@angular/core",
}
if (this.displayed) {
body.classList.add('modal-open');
this.open.next(null);
} else {
body.classList.remove('modal-open');
if (this.closeOnUnfocus) {
Expand All @@ -1252,10 +1257,12 @@ System.registerDynamic("fuel-ui/dist/components/Modal/Modal", ["@angular/core",
__decorate([core_1.Input(), __metadata('design:type', Boolean)], Modal.prototype, "closeButton", void 0);
__decorate([core_1.Input(), __metadata('design:type', String)], Modal.prototype, "modalTitle", void 0);
__decorate([core_1.Input(), __metadata('design:type', String)], Modal.prototype, "size", void 0);
__decorate([core_1.Output(), __metadata('design:type', core_1.EventEmitter)], Modal.prototype, "close", void 0);
__decorate([core_1.Output(), __metadata('design:type', core_1.EventEmitter)], Modal.prototype, "open", void 0);
Modal = __decorate([core_1.Component({
selector: 'modal',
host: {'(click)': 'clickElement($event)'},
template: "\n <div class=\"modal\" [ngClass]=\"{'fuel-ui-modal-fade-in': displayed}\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" [style.display]=\"displayed ? 'block' : 'none'\">\n <div class=\"modal-dialog\" role=\"document\" [ngClass]=\"{'modal-lg': size == 'large' || size == 'lg', 'modal-sm': size == 'small' || size == 'sm'}\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button *ngIf=\"closeButton\" type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"showModal(false)\">\n <span aria-hidden=\"true\">&#215;</span>\n <span class=\"sr-only\">Close</span>\n </button>\n <h4 class=\"modal-title\" id=\"myModalLabel\">{{modalTitle}}</h4>\n </div>\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n <div class=\"modal-backdrop\" [ngClass]=\"{fade: displayed, in: displayed}\" [style.display]=\"displayed ? 'block' : 'none'\"></div>\n ",
template: "\n <div class=\"modal\" [ngClass]=\"{'fuel-ui-modal-fade-in': displayed}\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" [style.display]=\"displayed ? 'block' : 'none'\">\n <div class=\"modal-dialog\" role=\"document\" [ngClass]=\"{'modal-lg': size == 'large' || size == 'lg', 'modal-sm': size == 'small' || size == 'sm'}\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button *ngIf=\"closeButton\" type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"closeModal()\">\n <span aria-hidden=\"true\">&#215;</span>\n <span class=\"sr-only\">Close</span>\n </button>\n <h4 class=\"modal-title\" id=\"myModalLabel\">{{modalTitle}}</h4>\n </div>\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n <div class=\"modal-backdrop\" [ngClass]=\"{fade: displayed, in: displayed}\" [style.display]=\"displayed ? 'block' : 'none'\"></div>\n ",
directives: [common_1.CORE_DIRECTIVES, Animation_1.Animation]
}), __metadata('design:paramtypes', [core_1.ElementRef])], Modal);
return Modal;
Expand Down
2 changes: 1 addition & 1 deletion bundles/fuel-ui.min.js
View file

Large diffs are not rendered by default.

45 changes: 42 additions & 3 deletions src/components/Modal/Modal.Demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {Component} from '@angular/core';
import {MODAL_PROVIDERS} from './Modal';
import {CodeHighlighter} from '../../directives/CodeHighlighter/CodeHighlighter';
import {TableSortable, TableSortableColumn, TableSortableSorting} from '../../components/TableSortable/TableSortable';
import {Attribute, AttributeColumns, AttributesDefaultSort} from '../../utilities/demoUtilities';
import {Event, EventColumns, EventsDefaultSort, Attribute, AttributeColumns, AttributesDefaultSort} from '../../utilities/demoUtilities';
import {TAB_PROVIDERS} from '../../components/Tab/Tab';

@Component({
Expand Down Expand Up @@ -31,7 +31,9 @@ import {TAB_PROVIDERS} from '../../components/Tab/Tab';
modalTitle="Modal Title"
[closeButton]="true"
[closeOnUnfocus]="true"
[size]="size">
[size]="size"
(close)="onClose()"
(open)="onOpen()">
<div class="modal-body">
<ul>
<li>Testing 1</li>
Expand Down Expand Up @@ -67,7 +69,9 @@ import {Modal} from 'fuel-ui/fuel-ui';
modalTitle=&quot;Modal Title&quot;
[closeButton]=&quot;true&quot;
[closeOnUnfocus]=&quot;true&quot;
size=&quot;lg&quot;&gt;
size=&quot;lg&quot;
(close)=&quot;onClose()&quot;
(open)=&quot;onOpen()&quot;&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;ul&gt;
&lt;li&gt;Any&lt;/li&gt;
Expand All @@ -84,6 +88,20 @@ import {Modal} from 'fuel-ui/fuel-ui';
</code>
</pre>
</tab>
<tab heading="TypeScript">
<pre>
<code class="language-javascript" code-highlight>
export class ModalExample {
onClose(){
console.log("Modal has been closed!");
}
onOpen(){
console.log("Modal has been opened!");
}
}
</code>
</pre>
</tab>
</tabset>
<h3>Attributes</h3>
Expand All @@ -94,12 +112,27 @@ import {Modal} from 'fuel-ui/fuel-ui';
Loading table...
</table-sortable>
<h3>Events</h3>
<table-sortable
[columns]="eventsColumns"
[data]="events"
[sort]="eventsSort">
Loading table...
</table-sortable>
</div>`,
directives: [MODAL_PROVIDERS, CodeHighlighter, TableSortable, TAB_PROVIDERS]
})
export class ModalDemo {
closeText: string = "Cancel";
size: string = "";

onClose(){
console.log("Modal has been closed!");
}
onOpen(){
console.log("Modal has been opened!");
}

attributes:any[] = [
new Attribute('closeOnUnfocus', 'boolean', 'true', 'Closes the opened modal when the user clicks off of it'),
Expand All @@ -109,6 +142,12 @@ export class ModalDemo {
];
attributesColumns:TableSortableColumn[] = AttributeColumns;
attributesSort:TableSortableSorting = AttributesDefaultSort;
events:Event[] = [
new Event('close', 'null', 'When the model is closed'),
new Event('open', 'null', 'When the model is opened')
];
eventsColumns:TableSortableColumn[] = EventColumns;
eventsSort:TableSortableSorting = EventsDefaultSort;
}

export var MODAL_DEMO_PROVIDERS = [
Expand Down
2 changes: 1 addition & 1 deletion src/components/Modal/Modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="modal-dialog" role="document" [ngClass]="{'modal-lg': size == 'large' || size == 'lg', 'modal-sm': size == 'small' || size == 'sm'}">
<div class="modal-content">
<div class="modal-header">
<button *ngIf="closeButton" type="button" class="close" aria-label="Close" (click)="showModal(false)">
<button *ngIf="closeButton" type="button" class="close" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">&#215;</span>
<span class="sr-only">Close</span>
</button>
Expand Down
9 changes: 7 additions & 2 deletions src/components/Modal/Modal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export class Modal {
@Input() closeButton:boolean = true;
@Input() modalTitle:string = '';
@Input() size:string = '';
@Output() close:EventEmitter<any> = new EventEmitter<any>();
@Output() open:EventEmitter<any> = new EventEmitter<any>();

constructor(el: ElementRef) {
this._el = el.nativeElement;
Expand All @@ -26,7 +28,7 @@ export class Modal {
if(this.closeOnUnfocus){
if((e.target && (e.target.className == 'modal customFadeIn' || e.target.className == 'modal-dialog'))
|| (e.srcElement && (e.srcElement.className == 'modal customFadeIn' || e.srcElement.className == 'modal-dialog')))
this.showModal(false);
this.closeModal();
}
}

Expand All @@ -35,7 +37,9 @@ export class Modal {
}

closeModal(): boolean {
return this.showModal(false);
this.showModal(false);
this.close.next(null);
return false;
}

showModal(isDisplayed: boolean): boolean {
Expand All @@ -50,6 +54,7 @@ export class Modal {

if(this.displayed){
body.classList.add('modal-open');
this.open.next(null);
}
else{
body.classList.remove('modal-open');
Expand Down

0 comments on commit 261b5ba

Please sign in to comment.