Revision 57665
Added by Konstantinos Triantafyllou over 4 years ago
alert.ts | ||
---|---|---|
1 |
import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input} from '@angular/core'; |
|
1 |
import {Component, ViewEncapsulation, ElementRef, EventEmitter, Output, Input, ViewChild} from '@angular/core';
|
|
2 | 2 |
|
3 |
declare var UIkit: any; |
|
4 |
|
|
3 | 5 |
@Component({ |
4 | 6 |
selector: 'modal-alert', |
5 | 7 |
template: ` |
6 |
<div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open'" uk-modal [open]="!isOpen" |
|
7 |
id="myModal" |
|
8 |
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
|
9 |
<div [class]="'uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small uk-text-left '+classBody" |
|
10 |
click-outside-or-esc (clickOutside)="clickOutside($event)" [targetId]="'myModal'" |
|
8 |
<div #element class="uk-modal" uk-modal |
|
9 |
id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
|
10 |
<div class="uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small uk-text-left" [ngClass]="classBody" |
|
11 | 11 |
role=""> |
12 | 12 |
<div class="uk-modal-title" [hidden]=!alertHeader> |
13 | 13 |
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button> |
... | ... | |
40 | 40 |
(click)="cancel()">{{cancelButtonText}}</button> |
41 | 41 |
</span> |
42 | 42 |
<span [hidden]=!okButton> |
43 |
<button *ngIf="okDisabled" class="uk-button md-btn uk-button-default ignoreCommunityPanelBackground" disabled>{{okButtonText}}</button> |
|
44 |
<button *ngIf="!okDisabled" class="uk-button md-btn md-btn-primary portal-button ignoreCommunityPanelBackground" (click)="ok()">{{okButtonText}}</button> |
|
43 |
<button *ngIf="okDisabled" class="uk-button md-btn uk-button-default ignoreCommunityPanelBackground" |
|
44 |
disabled>{{okButtonText}}</button> |
|
45 |
<button *ngIf="!okDisabled" |
|
46 |
class="uk-button md-btn md-btn-primary portal-button ignoreCommunityPanelBackground" |
|
47 |
(click)="ok()">{{okButtonText}}</button> |
|
45 | 48 |
</span> |
46 | 49 |
</div> |
47 | 50 |
</div> |
... | ... | |
55 | 58 |
* API to an open alert window. |
56 | 59 |
*/ |
57 | 60 |
export class AlertModal { |
58 |
@Input() classBody: string =""; |
|
61 |
@Input() classBody: string = "";
|
|
59 | 62 |
/** |
60 | 63 |
* Caption for the title. |
61 | 64 |
*/ |
... | ... | |
99 | 102 |
*/ |
100 | 103 |
public alertHeader: boolean = true; |
101 | 104 |
/** |
102 |
* if the value is true alert will be visible or else it will be hidden. |
|
103 |
*/ |
|
104 |
public isOpen: boolean = false; |
|
105 |
|
|
106 |
/** |
|
107 | 105 |
* if the value is true ok button align on the left, else on the right |
108 | 106 |
*/ |
109 | 107 |
public okButtonLeft: boolean = true; |
... | ... | |
125 | 123 |
@Output() public alertOutput: EventEmitter<any> = new EventEmitter(); |
126 | 124 |
@Output() public clickOutsideOutput: EventEmitter<any> = new EventEmitter(); |
127 | 125 |
|
126 |
@ViewChild('element') element: ElementRef; |
|
127 |
|
|
128 | 128 |
constructor(public _elementRef: ElementRef) { |
129 | 129 |
} |
130 | 130 |
|
... | ... | |
132 | 132 |
* Opens a alert window creating backdrop. |
133 | 133 |
*/ |
134 | 134 |
open() { |
135 |
this.isOpen = true;
|
|
135 |
UIkit.modal(this.element.nativeElement).show();
|
|
136 | 136 |
} |
137 | 137 |
|
138 | 138 |
/** |
139 | 139 |
* ok method closes the modal and emits modalOutput. |
140 | 140 |
*/ |
141 | 141 |
ok() { |
142 |
this.isOpen = false;
|
|
142 |
this.cancel();
|
|
143 | 143 |
if (!this.choice) { |
144 | 144 |
this.alertOutput.emit(true); |
145 | 145 |
} else { |
... | ... | |
154 | 154 |
* cancel method closes the modal. |
155 | 155 |
*/ |
156 | 156 |
cancel() { |
157 |
this.isOpen = false;
|
|
157 |
UIkit.modal(this.element.nativeElement).hide();
|
|
158 | 158 |
} |
159 |
|
|
160 |
clickOutside(event: Object) { |
|
161 |
if(event && event['value'] === true) { |
|
162 |
this.cancel(); |
|
163 |
this.clickOutsideOutput.emit( { |
|
164 |
value: true |
|
165 |
}); |
|
166 |
} |
|
167 |
} |
|
168 | 159 |
} |
Also available in: Unified diff
[Library]: Make modal works with uikit js. Add deep copy custom function