Revision 56808
Added by Konstantinos Triantafyllou almost 5 years ago
| alert.ts | ||
|---|---|---|
| 3 | 3 |
@Component({
|
| 4 | 4 |
selector: 'modal-alert', |
| 5 | 5 |
template: ` |
| 6 |
<div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open uk-animation-fade'" uk-modal [open]="!isOpen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
|
| 7 |
<div class="uk-modal-dialog uk-modal-body" role=""> |
|
| 8 |
<div class="uk-modal-title" [hidden]=!alertHeader> |
|
| 9 |
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button> |
|
| 10 |
<h4 class="modal-title text-center" id="myModalLabel">{{alertTitle}}</h4>
|
|
| 6 |
<div [class]="(!isOpen)?'uk-modal ':'uk-modal uk-open'" uk-modal [open]="!isOpen" id="myModal" |
|
| 7 |
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> |
|
| 8 |
<div class="uk-modal-dialog uk-modal-body uk-animation-slide-bottom-small uk-text-left" role=""> |
|
| 9 |
<div class="uk-modal-title" [hidden]=!alertHeader> |
|
| 10 |
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button> |
|
| 11 |
<h4 class="modal-title" id="myModalLabel">{{alertTitle}}</h4>
|
|
| 11 | 12 |
</div> |
| 12 |
<div class="uk-margin ">
|
|
| 13 |
<div class="uk-margin"> |
|
| 13 | 14 |
<div [hidden]=!alertMessage> |
| 14 |
{{message}}
|
|
| 15 |
{{message}}
|
|
| 15 | 16 |
</div> |
| 16 | 17 |
<ng-content></ng-content> |
| 17 | 18 |
</div> |
| 18 |
<div *ngIf="okButtonLeft" class="uk-text-right" [hidden]=!alertFooter> |
|
| 19 |
<span [hidden]=!okButton > |
|
| 20 |
<button class="uk-button uk-button-default" (click)="ok()">{{okButtonText}}</button>
|
|
| 21 |
</span> |
|
| 22 |
<span [hidden]=!cancelButton> |
|
| 23 |
<button class="uk-button uk-button-default uk-margin-small-left" (click)="cancel()">{{cancelButtonText}}</button>
|
|
| 24 |
</span> |
|
| 19 |
<div class="uk-grid uk-flex uk-flex-middle"> |
|
| 20 |
<label *ngIf="choice" class="uk-width-1-2 checkbox"> |
|
| 21 |
<input type="checkbox" [(ngModel)]="select"> |
|
| 22 |
<span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span> |
|
| 23 |
</label> |
|
| 24 |
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'"> |
|
| 25 |
<div *ngIf="okButtonLeft" class="uk-text-right" [hidden]=!alertFooter> |
|
| 26 |
<span [hidden]=!okButton> |
|
| 27 |
<button class="uk-button uk-button-default" (click)="ok()">{{okButtonText}}</button>
|
|
| 28 |
</span> |
|
| 29 |
<span [hidden]=!cancelButton> |
|
| 30 |
<button class="uk-button uk-button-default uk-margin-small-left" |
|
| 31 |
(click)="cancel()">{{cancelButtonText}}</button>
|
|
| 32 |
</span> |
|
| 33 |
</div> |
|
| 34 |
<div *ngIf="!okButtonLeft" class="uk-text-right" [hidden]=!alertFooter> |
|
| 35 |
<span [hidden]=!cancelButton> |
|
| 36 |
<button class="uk-button uk-button-default uk-margin-small-right" |
|
| 37 |
(click)="cancel()">{{cancelButtonText}}</button>
|
|
| 38 |
</span> |
|
| 39 |
<span [hidden]=!okButton> |
|
| 40 |
<button *ngIf="okDisabled" class="uk-button uk-button-default" disabled>{{okButtonText}}</button>
|
|
| 41 |
<button *ngIf="!okDisabled" class="uk-button portal-button" (click)="ok()">{{okButtonText}}</button>
|
|
| 42 |
</span> |
|
| 43 |
</div> |
|
| 44 |
</div> |
|
| 25 | 45 |
</div> |
| 26 |
<div *ngIf="!okButtonLeft" class="uk-text-right" [hidden]=!alertFooter> |
|
| 27 |
<span [hidden]=!cancelButton> |
|
| 28 |
<button class="uk-button uk-button-default uk-margin-small-right" (click)="cancel()">{{cancelButtonText}}</button>
|
|
| 29 |
</span> |
|
| 30 |
<span [hidden]=!okButton > |
|
| 31 |
<button *ngIf="okDisabled" class="uk-button uk-button-default" disabled>{{okButtonText}}</button>
|
|
| 32 |
<button *ngIf="!okDisabled" class="uk-button portal-button" (click)="ok()">{{okButtonText}}</button>
|
|
| 33 |
</span> |
|
| 34 |
</div> |
|
| 35 |
|
|
| 46 |
</div> |
|
| 36 | 47 |
</div> |
| 37 |
</div> |
|
| 38 |
|
|
| 39 |
|
|
| 40 | 48 |
`, |
| 41 | 49 |
encapsulation: ViewEncapsulation.None, |
| 42 | 50 |
}) |
| 43 | 51 |
/** |
| 44 |
* API to an open alert window.
|
|
| 45 |
*/
|
|
| 46 |
export class AlertModal{
|
|
| 52 |
* API to an open alert window. |
|
| 53 |
*/ |
|
| 54 |
export class AlertModal {
|
|
| 47 | 55 |
/** |
| 48 |
* Caption for the title.
|
|
| 49 |
*/
|
|
| 50 |
public alertTitle:string; |
|
| 56 |
* Caption for the title. |
|
| 57 |
*/ |
|
| 58 |
public alertTitle: string;
|
|
| 51 | 59 |
/** |
| 52 |
* Describes if the alert contains Ok Button.
|
|
| 53 |
* The default Ok button will close the alert and emit the callback.
|
|
| 54 |
* Defaults to true.
|
|
| 55 |
*/
|
|
| 56 |
public okButton:boolean = true; |
|
| 60 |
* Describes if the alert contains Ok Button. |
|
| 61 |
* The default Ok button will close the alert and emit the callback. |
|
| 62 |
* Defaults to true. |
|
| 63 |
*/ |
|
| 64 |
public okButton: boolean = true;
|
|
| 57 | 65 |
/** |
| 58 |
* Caption for the OK button.
|
|
| 59 |
* Default: Ok
|
|
| 60 |
*/
|
|
| 61 |
public okButtonText:string= 'Ok';
|
|
| 66 |
* Caption for the OK button. |
|
| 67 |
* Default: Ok |
|
| 68 |
*/ |
|
| 69 |
public okButtonText: string = 'Ok';
|
|
| 62 | 70 |
/** |
| 63 |
* Describes if the alert contains cancel Button.
|
|
| 64 |
* The default Cancelbutton will close the alert.
|
|
| 65 |
* Defaults to true.
|
|
| 66 |
*/
|
|
| 67 |
public cancelButton:boolean = true; |
|
| 71 |
* Describes if the alert contains cancel Button. |
|
| 72 |
* The default Cancelbutton will close the alert. |
|
| 73 |
* Defaults to true. |
|
| 74 |
*/ |
|
| 75 |
public cancelButton: boolean = true;
|
|
| 68 | 76 |
/** |
| 69 |
* Caption for the Cancel button.
|
|
| 70 |
* Default: Cancel
|
|
| 71 |
*/
|
|
| 72 |
public cancelButtonText:string = 'Cancel'; |
|
| 77 |
* Caption for the Cancel button. |
|
| 78 |
* Default: Cancel |
|
| 79 |
*/ |
|
| 80 |
public cancelButtonText: string = 'Cancel';
|
|
| 73 | 81 |
/** |
| 74 |
* if the alertMessage is true it will show the contentString inside alert body.
|
|
| 75 |
*/
|
|
| 76 |
public alertMessage:boolean = true; |
|
| 82 |
* if the alertMessage is true it will show the contentString inside alert body. |
|
| 83 |
*/ |
|
| 84 |
public alertMessage: boolean = true;
|
|
| 77 | 85 |
/** |
| 78 |
* Some message/content can be set in message which will be shown in alert body.
|
|
| 79 |
*/
|
|
| 80 |
public message:string; |
|
| 86 |
* Some message/content can be set in message which will be shown in alert body. |
|
| 87 |
*/ |
|
| 88 |
public message: string;
|
|
| 81 | 89 |
/** |
| 82 |
* if the value is true alert footer will be visible or else it will be hidden.
|
|
| 83 |
*/
|
|
| 84 |
public alertFooter:boolean= true;
|
|
| 90 |
* if the value is true alert footer will be visible or else it will be hidden. |
|
| 91 |
*/ |
|
| 92 |
public alertFooter: boolean = true;
|
|
| 85 | 93 |
/** |
| 86 |
* shows alert header if the value is true.
|
|
| 87 |
*/
|
|
| 88 |
public alertHeader:boolean = true; |
|
| 94 |
* shows alert header if the value is true. |
|
| 95 |
*/ |
|
| 96 |
public alertHeader: boolean = true;
|
|
| 89 | 97 |
/** |
| 90 |
* if the value is true alert will be visible or else it will be hidden.
|
|
| 91 |
*/
|
|
| 92 |
public isOpen:boolean=false;
|
|
| 98 |
* if the value is true alert will be visible or else it will be hidden. |
|
| 99 |
*/ |
|
| 100 |
public isOpen: boolean = false;
|
|
| 93 | 101 |
|
| 94 | 102 |
/** |
| 95 | 103 |
* if the value is true ok button align on the left, else on the right |
| ... | ... | |
| 101 | 109 |
*/ |
| 102 | 110 |
@Input() |
| 103 | 111 |
public okDisabled: boolean = false; |
| 112 |
|
|
| 113 |
@Input() |
|
| 114 |
public choice: boolean = false; |
|
| 115 |
|
|
| 116 |
public select: boolean = false; |
|
| 104 | 117 |
/** |
| 105 |
* Emitted when a ok button was clicked |
|
| 106 |
* or when Ok method is called. |
|
| 107 |
*/ |
|
| 108 |
@Output() public alertOutput:EventEmitter<any> = new EventEmitter(); |
|
| 109 |
constructor( public _elementRef: ElementRef){}
|
|
| 118 |
* Emitted when a ok button was clicked |
|
| 119 |
* or when Ok method is called. |
|
| 120 |
*/ |
|
| 121 |
@Output() public alertOutput: EventEmitter<any> = new EventEmitter(); |
|
| 122 |
|
|
| 123 |
constructor(public _elementRef: ElementRef) {
|
|
| 124 |
} |
|
| 125 |
|
|
| 110 | 126 |
/** |
| 111 |
* Opens a alert window creating backdrop.
|
|
| 112 |
*/
|
|
| 113 |
open(){
|
|
| 114 |
this.isOpen= true; |
|
| 127 |
* Opens a alert window creating backdrop. |
|
| 128 |
*/ |
|
| 129 |
open() {
|
|
| 130 |
this.isOpen = true;
|
|
| 115 | 131 |
} |
| 132 |
|
|
| 116 | 133 |
/** |
| 117 |
* ok method closes the modal and emits modalOutput.
|
|
| 118 |
*/
|
|
| 119 |
ok(){
|
|
| 134 |
* ok method closes the modal and emits modalOutput. |
|
| 135 |
*/ |
|
| 136 |
ok() {
|
|
| 120 | 137 |
this.isOpen = false; |
| 121 |
this.alertOutput.emit(true); |
|
| 138 |
if (!this.choice) {
|
|
| 139 |
this.alertOutput.emit(true); |
|
| 140 |
} else {
|
|
| 141 |
this.alertOutput.emit({
|
|
| 142 |
value: true, |
|
| 143 |
choice: this.select |
|
| 144 |
}); |
|
| 145 |
} |
|
| 122 | 146 |
} |
| 147 |
|
|
| 123 | 148 |
/** |
| 124 |
* cancel method closes the moda.
|
|
| 125 |
*/
|
|
| 126 |
cancel(){
|
|
| 149 |
* cancel method closes the moda. |
|
| 150 |
*/ |
|
| 151 |
cancel() {
|
|
| 127 | 152 |
this.isOpen = false; |
| 128 | 153 |
} |
| 129 | 154 |
} |
Also available in: Unified diff
[Library]: Modal: Add option to have a dont show message again checkbox. Add service to save on localStorage user's choices(only communityDireckLink now). Change search Communities result with new functionality.