Project

General

Profile

« Previous | Next » 

Revision 57665

[Library]: Make modal works with uikit js. Add deep copy custom function

View differences:

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