Revision 57665
Added by Konstantinos Triantafyllou over 4 years ago
modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/modal/click-outside-or-esc.directive.ts | ||
---|---|---|
14 | 14 |
private subscriptions: any[] = []; |
15 | 15 |
@Input() |
16 | 16 |
public targetId = null; |
17 |
@Input() |
|
18 |
public escClose = true; |
|
17 | 19 |
|
18 | 20 |
@Output('clickOutside') clickOutside: EventEmitter<Object>; |
19 | 21 |
|
... | ... | |
38 | 40 |
.do(() => { |
39 | 41 |
this.listening = true; |
40 | 42 |
}).subscribe((event: KeyboardEvent) => { |
41 |
if (event.keyCode === 27) { |
|
43 |
if (event.keyCode === 27 && this.escClose) {
|
|
42 | 44 |
this.clickOutside.emit({ |
43 | 45 |
target: (event.target || null), |
44 | 46 |
value: true |
modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/modal/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 |
} |
modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/HelperFunctions.class.ts | ||
---|---|---|
1 | 1 |
export class HelperFunctions { |
2 | 2 |
//Use this class function to create queryParams Objects in format {key1:value1} or {key1:value1,key2:value2,key3:value3,...} for multiple parameters |
3 |
constructor() {} |
|
3 |
constructor() { |
|
4 |
} |
|
4 | 5 |
|
5 | 6 |
public static scroll() { |
6 | 7 |
if (typeof document !== 'undefined') { |
... | ... | |
13 | 14 |
return (url.indexOf('tinyurl.com') !== -1); |
14 | 15 |
} |
15 | 16 |
|
16 |
public static copy(element: any): any { |
|
17 |
// return JSON.parse(JSON.stringify(element)); |
|
18 |
// return { ...element}; |
|
19 |
return Object.assign(Object.create(element), element); |
|
17 |
public static copy(obj: any): any { |
|
18 |
let copy; |
|
19 |
|
|
20 |
// Handle the 3 simple types, and null or undefined |
|
21 |
if (null == obj || "object" != typeof obj) return obj; |
|
22 |
|
|
23 |
// Handle Date |
|
24 |
if (obj instanceof Date) { |
|
25 |
copy = new Date(); |
|
26 |
copy.setTime(obj.getTime()); |
|
27 |
return copy; |
|
28 |
} |
|
29 |
|
|
30 |
// Handle Array |
|
31 |
if (obj instanceof Array) { |
|
32 |
copy = []; |
|
33 |
for (let i = 0, len = obj.length; i < len; i++) { |
|
34 |
copy[i] = HelperFunctions.copy(obj[i]); |
|
35 |
} |
|
36 |
return copy; |
|
37 |
} |
|
38 |
|
|
39 |
// Handle Map |
|
40 |
if (obj instanceof Map) { |
|
41 |
copy = new Map(obj.entries()); |
|
42 |
return copy; |
|
43 |
} |
|
44 |
|
|
45 |
// Handle Object |
|
46 |
if (obj instanceof Object) { |
|
47 |
copy = {}; |
|
48 |
for (let attr in obj) { |
|
49 |
if (obj.hasOwnProperty(attr)) { |
|
50 |
copy[attr] = HelperFunctions.copy(obj[attr]); |
|
51 |
} |
|
52 |
} |
|
53 |
return copy; |
|
54 |
} |
|
55 |
throw new Error("Unable to copy obj! Its type isn't supported."); |
|
20 | 56 |
} |
21 | 57 |
|
22 | 58 |
public static encodeArray(elements: string[]): string[] { |
Also available in: Unified diff
[Library]: Make modal works with uikit js. Add deep copy custom function