@chat21/chat21-ionic 3.0.58 → 3.0.59-rc15

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -146,4 +146,16 @@ ion-header {
     margin: 0;
     height: 16px;
     width: 140px;
+}
+
+.tile-info-with-ios {
+    left: 82px !important;
+}
+
+.user-presence-ios {
+    left: 63px;
+}
+
+.avatar-container-ios {
+    left: 55px;
 }

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.ts

@@ -6,7 +6,7 @@ import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { setConversationAvatar, setChannelType } from 'src/chat21-core/utils/utils';
-
+import { Platform } from '@ionic/angular';
 @Component({
   selector: 'app-header-conversation-detail',
   templateUrl: './header-conversation-detail.component.html',
@@ -31,7 +31,9 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   membersConversation = ['SYSTEM'];
   fullNameConv: string;
   idConv: string;
- 
+  conversation_with_fullname: string;
+  platformName: string;
+
   private logger: LoggerService = LoggerInstance.getInstance();
 
   /**
@@ -41,6 +43,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
+    public platform: Platform
   ) {
     this.route.paramMap.subscribe(params => {
 
@@ -59,7 +62,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // ----------------------------------------------------
   ngOnInit() {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser);
-    // this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar);
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar);
+    this.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
 
     this.initialize();
   }
@@ -79,7 +83,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
       if (this.conversationAvatar) {
         this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
       }
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar',  this.conversationAvatar);
+      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar', this.conversationAvatar);
     }
 
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - isOpenInfoConversation', this.isOpenInfoConversation);
@@ -91,7 +95,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // @ Initialize (called in ngOnInit)
   // ----------------------------------------------------
   initialize() {
-
+    this.getPlatformName()
     if (this.conversationAvatar && this.conversationAvatar.channelType === this.DIRECT) {
       this.isDirect = true;
     } else if (this.idLoggedUser) {
@@ -99,6 +103,18 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     }
   }
 
+  getPlatformName() {
+    this.logger.log('getPlatformName this.platform', this.platform) 
+    if (this.platform.is('ios')) {
+      this.platformName = 'ios'
+      this.logger.log('getPlatformName platformName', this.platformName) 
+    } else if (this.platform.is('android')){
+      this.platformName = 'android'
+      this.logger.log('getPlatformName platformName', this.platformName) 
+    }
+
+  }
+
   onOpenCloseInfoConversation() {
     this.openInfoMessage = false;
     this.openInfoConversation = !this.openInfoConversation;

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -48,9 +48,10 @@
       </div>
 
       <div class="buttons-right">
-        <ion-button [disabled]="!conversationEnabled" class="send-button right active" ion-button fill="clear"
+        <!-- [disabled]="conversationEnabled === false" -->
+        <ion-button [disabled]="conversationEnabled === false"  class="send-button right active" ion-button fill="clear"
           (click)="sendMessage(messageString)">
-          <ion-icon slot="icon-only" name="send"></ion-icon>
+          <ion-icon [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }" slot="icon-only" name="send"></ion-icon>
         </ion-button>
       </div>
     </ion-col>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -21,8 +21,6 @@
             --padding-start: 0;
             --padding-end: 0;
         }
-
-        
     }
     .buttons-right {
         position: absolute;
@@ -56,7 +54,7 @@
             // min-height: 30px;
             min-height: 37px; // NK edited
             max-height: 184px;
-            background-color: rgba(0, 0, 0, .05);
+            background-color: rgba(0, 0, 0, 0.05);
             // --padding-top: 5px; // NK edited
             --padding-top: 8px;
             --padding-bottom: 5px;
@@ -69,21 +67,21 @@
     }
 }
 
-#fileInput{
+#fileInput {
     position: absolute;
     opacity: 0;
-  }
-  
-  #file-input {
+}
+
+#file-input {
     // width: 0.1px;
     // height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     // z-index: -1;
-  }
+}
 
-  .upload-image-btn {
+.upload-image-btn {
     // margin-bottom: 0px;
     // margin-top: 5px;
     // margin-left: 0px;
@@ -99,21 +97,28 @@
     --border-radius: 50%;
     --padding-end: 1px;
     --padding-start: 1px;
-  
+
     height: 33px !important;
-  }
+}
 
-  .upload-image-btn .button-native {
-      border-radius: 50%;
-  } 
+.upload-image-btn .button-native {
+    border-radius: 50%;
+}
+
+.send-msg-activated {
+    color: #3880ff !important;
+}
 
+.send-msg-disabled {
+    cursor: default;
+    opacity: 0.8;
+    pointer-events: none;
+}
 
 //   input[placeholder] { text-overflow: ellipsis; }
 // ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
 // input:-moz-placeholder { text-overflow: ellipsis; }
 
-
- 
 // #ion-textarea > div > textarea[placeholder]{ text-overflow: ellipsis; }
 // #ion-textarea > div > textarea:-moz-placeholder  { text-overflow: ellipsis; }
-// ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+// ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -43,6 +43,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
   @Input() tagsCannedFilter: any = [];
+
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -102,6 +103,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
 
   ngOnChanges() {
+
     if (this.translationMap) {
       this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
       this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
@@ -110,6 +112,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
+    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)
+
     // use case drop
     if (this.dropEvent) {
       this.presentModal(this.dropEvent)
@@ -136,11 +140,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
           const elTextAreaWrapper = elTextArea.children[0]
           // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elTextAreaWrapper", elTextAreaWrapper);
-          
+
           if (elTextAreaWrapper.children.length === 1) {
             const elNativeTearea = elTextAreaWrapper.children[0]
             // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elNativeTearea", elNativeTearea);
-             elNativeTearea.setAttribute("style", "height: 37px !important; ");
+            elNativeTearea.setAttribute("style", "height: 37px !important; ");
           }
         }
 
@@ -481,7 +485,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   // if the message is not empty it is passed  to the control method
   // ------------------------------------------------------------------------
   onKeydown(e: any, text: string) {
+    this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - onKeydown in MSG-TEXT-AREA event", e)
+    this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - onKeydown in MSG-TEXT-AREA text", text)
     e.preventDefault(); // Prevent press enter from creating new line 
+    // console.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea * event: ", e);
 
     this.countClicks++;
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - countClicks: ', this.countClicks);
@@ -489,9 +496,18 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - event target: ', e.target);
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - event target textContent: ', e.target.textContent);
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter: ', this.tagsCannedFilter);
+
     // this.logger.error("[CONVS-DETAIL][MSG-TEXT-AREA] pressedOnKeyboard e.keyCode ", e.keyCode);
+    // this.events.subscribe((cannedmessage) => {
+
+    //   console.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea * cannedmessage: ", cannedmessage);
+    //   });
+
+    // user and time are the same arguments passed in `events.publish(user, time)`
+
 
-    const message = e.target.textContent.trim();
+
+    let message = e.target.textContent.trim();
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - event target textContent (message): ', message);
     // e.inputType === 'insertLineBreak' && 
     if (e.inputType === 'insertLineBreak' && message === '') {
@@ -501,13 +517,37 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       var pos = text.lastIndexOf("/");
       this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - POSITION OF '/': ", pos);
+      this.logger.log("[CONVS-DETAIL] returnChangeTextArea onKeydown in msg-texarea  POSITION OF '/': ", pos);
+      this.logger.log("[CONVS-DETAIL] returnChangeTextArea onKeydown in msg-texarea  this.tagsCannedFilter.length': ", this.tagsCannedFilter.length);
       if (!text.includes("/")) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 1 message: ', message);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea  SEND MESSAGE 1 message: ", message);
         this.messageString = '';
         this.sendMessage(text);
         this.countClicks = 0
-      } else if (text.includes("/") && pos >= 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
+      } else if (text.includes("/") && pos === 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 2: ', this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 message: ", message);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message value: ', message.value);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 text: ', text);
+      
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.tagsCannedFilter.length: ", this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
+        this.messageString = '';
+
+        this.sendMessage(text);
+        this.countClicks = 0
+      } else if (text.includes("/") && pos > 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0 && text.substr(-1) !== '/' ) {
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
+        // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message value: ', message.value);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 text: ', text);
+
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.tagsCannedFilter.length: ", this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
         this.messageString = '';
 
@@ -516,6 +556,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       } else if (text.includes("/") && this.tagsCannedFilter.length === 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message: ', message);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
         this.messageString = '';
 
         this.sendMessage(text);
@@ -586,7 +627,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {
 
 
-     
+
       this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] HAS PRESSED COMBO KEYS this.messageString', this.messageString);
 
       if (this.messageString !== undefined && this.messageString.trim() !== '') {

package/src/app/components/ddp-header/ddp-header.component.html

@@ -14,7 +14,7 @@
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="!supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
     </ion-button>
 

package/src/app/components/ddp-header/ddp-header.component.ts

@@ -7,14 +7,16 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 })
 export class DdpHeaderComponent implements OnInit {
   @Input() numberOpenConv: number;
-  @Input() supportMode = false;
+  @Input() supportMode: boolean;
   @Output() openContactsDirectory = new EventEmitter();
   @Output() openProfileInfo = new EventEmitter();
 
   constructor(
   ) { }
 
-  ngOnInit() {}
+  ngOnInit() {
+    // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+  }
 
   // START @Output() //
   /** */

package/src/app/components/image-viewer/image-viewer.component.html

@@ -0,0 +1,23 @@
+<div id="image-viewer-modal" class="modal">
+
+  <!-- The Close Button -->
+  <span class="close" (click)="closeImageViewerModal()">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    </svg>
+  </span>
+  <span class="download-image" (click)="downloadImage()">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />
+    </svg>
+  </span>
+  <!-- Modal Content (The Image) [src]="metadata.src"-->
+  <img class="modal-content" id="image-viewer-img">
+
+  <!-- Modal Caption (Image Text) -->
+  <div id="caption"></div>
+</div>

package/src/app/components/image-viewer/image-viewer.component.scss

@@ -0,0 +1,107 @@
+// --- MODAL PREVIEW IMAGE
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1050; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+  }
+  
+  /* Modal Content (Image) */
+  .modal-content {
+    margin: auto;
+    display: block;
+    // width: 80%;
+    // max-width: 700px;
+    padding: 0px 5px;
+  }
+  
+  /* Caption of Modal Image (Image Text) - Same Width as the Image */
+  #caption {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0;
+    height: 150px;
+  }
+  
+  /* Add Animation - Zoom in the Modal */
+  .modal-content, #caption {
+    animation-name: zoom;
+    // animation-duration: 0.6s;
+  }
+  
+  @keyframes zoom {
+    from {transform:scale(0)}
+    to {transform:scale(1)}
+  }
+  
+  /* The Close Button */
+  .close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    // color: #f1f1f1;
+    // font-size: 40px;
+    // font-weight: bold;
+    transition: 0.3s;
+    border-radius: 50px;
+    padding:7px 8.5px
+  }
+
+  .close svg {
+    background-color: transparent;
+    fill: rgba(255,255,255,.5);
+  }
+
+  .close:hover,
+  .close:focus {
+    // color: #bbb;
+    background-color: rgba(255,255,255,.3);
+    text-decoration: none;
+    cursor: pointer;
+    svg {
+        fill: rgba(255,255,255);
+    }
+  }
+
+  .download-image {
+    position: absolute;
+    top: 15px;
+    right: 78px;
+    transition: 0.3s;
+    border-radius: 50px;
+    padding:7px 8.5px
+  }
+
+  .download-image svg {
+    background-color: transparent;
+    fill: rgba(255,255,255,.5);
+  }
+
+  .download-image:hover,
+  .download-image:focus {
+   
+    background-color: rgba(255,255,255,.3);
+    text-decoration: none;
+    cursor: pointer;
+    svg {
+        fill: rgba(255,255,255);
+    }
+  }
+  
+  /* 100% Image Width on Smaller Screens */
+  @media only screen and (max-width: 700px){
+    .modal-content {
+    //   width: 100%;
+    }
+  }

package/src/app/components/image-viewer/image-viewer.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ImageViewerComponent } from './image-viewer.component';
+
+describe('ImageViewerComponent', () => {
+  let component: ImageViewerComponent;
+  let fixture: ComponentFixture<ImageViewerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImageViewerComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ImageViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/components/image-viewer/image-viewer.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-image-viewer',
+  templateUrl: './image-viewer.component.html',
+  styleUrls: ['./image-viewer.component.scss'],
+})
+export class ImageViewerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  closeImageViewerModal() {
+    // console.log('HAS CLICKED CLOSE MODAL')
+    var modal = document.getElementById("image-viewer-modal");
+    // var span = document.getElementsByClassName("close")[0]; 
+    modal.style.display = "none";
+  }
+
+  downloadImage()  {
+    var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img")
+    // console.log('HAS CLICKED CLOSE DWNLD IMG modalImg ', modalImg)
+    var modalImgURL = modalImg.src;
+    // console.log('HAS CLICKED CLOSE DWNLD IMG modalImgURL ', modalImgURL)
+    var captionText = document.getElementById("caption").innerHTML;
+    // console.log('HAS CLICKED CLOSE DWNLD IMG captionText ', captionText)
+
+    const a: any = document.createElement('a');
+    a.href = modalImgURL;
+    a.download = captionText;
+    document.body.appendChild(a);
+    a.style = 'display: none';
+    a.click();
+    a.remove();
+  }
+
+}