replace from ImageComponent to ImageDirective

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -40,7 +40,7 @@
   #chatContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="chatContextMenu"
 ></div>
-<mat-menu #chatContextMenu="matMenu" [overlapTrigger]="false">
+<mat-menu #chatContextMenu="matMenu" [hasBackdrop]="false">
   <ng-template matMenuContent let-roomInfo="roomInfo">
     <button mat-menu-item (click)="onSelectedRoom(roomInfo)">
       대화방 열기

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html

@@ -26,7 +26,7 @@
       #groupMenu="matMenu"
       xPosition="after"
       yPosition="below"
-      [overlapTrigger]="false"
+      [hasBackdrop]="false"
     >
       <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
         <mat-icon>group_add</mat-icon>
@@ -92,7 +92,7 @@
   #profileContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="profileContextMenu"
 ></div>
-<mat-menu #profileContextMenu="matMenu" [overlapTrigger]="false">
+<mat-menu #profileContextMenu="matMenu" [hasBackdrop]="false">
   <ng-template matMenuContent let-userInfo="userInfo">
     <button
       mat-menu-item
@@ -155,7 +155,7 @@
   #groupContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="groupContextMenu"
 ></div>
-<mat-menu #groupContextMenu="matMenu" [overlapTrigger]="false">
+<mat-menu #groupContextMenu="matMenu" [hasBackdrop]="false">
   <ng-template matMenuContent let-group="group">
     <button mat-menu-item (click)="onClickGroupContextMenu('CHAT', group)">
       그룹 대화하기

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html

@@ -41,7 +41,7 @@
           <mat-icon>more_vert</mat-icon>
         </button>
 
-        <mat-menu #contactMenu="matMenu">
+        <mat-menu #contactMenu="matMenu" [hasBackdrop]="false">
           <button mat-menu-item (click)="onClickContextMenu('CLOSE_ROOM')">
             방닫기
           </button>
@@ -113,7 +113,7 @@
   #messageContextMenuTrigger="matMenuTrigger"
   [matMenuTriggerFor]="messageContextMenu"
 ></div>
-<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
+<mat-menu #messageContextMenu="matMenu" [hasBackdrop]="false">
   <ng-template matMenuContent let-message="message" let-loginRes="loginRes">
     <ng-container *ngIf="!isRecalledMessage(message.type)">
       <button

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -8,7 +8,6 @@
       contact: message.senderSeq !== loginRes.userSeq
     }"
   >
-
     <ucap-chat-message-box-date-splitter
       *ngIf="getDateSplitter(i)"
       class="date-splitter"
@@ -50,7 +49,10 @@
         </ng-container>
       </ng-template>
       <ng-template #contents>
-        <div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
+        <div
+          *ngIf="getUserProfile(message.senderSeq) != ''"
+          class="profile-img"
+        >
           <!-- <img
                 class="avatar"
                 style="width: 50px; height: 50px;"
@@ -64,13 +66,21 @@
                     | async
                 "
               /> -->
-          <ucap-ui-imaage
+          <img
+            class="avatar"
+            style="width: 50px; height: 50px;"
+            ucapUiImage
+            [base]="profileImageRoot"
+            [path]="getUserProfile(message.senderSeq)"
+            [default]="'assets/images/img_nophoto_50.png'"
+          />
+          <!-- <ucap-ui-imaage
             [style]="'width: 50px; height: 50px;'"
             [imageClass]="'avatar'"
             [base]="profileImageRoot"
             [path]="getUserProfile(message.senderSeq)"
             [default]="'assets/images/img_nophoto_50.png'"
-          ></ucap-ui-imaage>
+          ></ucap-ui-imaage> -->
         </div>
 
         <div class="message-main">

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -21,13 +21,20 @@
             | async
         "
       /> -->
+      <img
+        class="thumbnail"
+        ucapUiImage
+        [base]="profileImageRoot"
+        [path]="userInfo.profileImageFile"
+        [default]="'assets/images/img_nophoto_50.png'"
+      />
 
-      <ucap-ui-imaage
+      <!-- <ucap-ui-imaage
         [imageClass]="'thumbnail'"
         [base]="profileImageRoot"
         [path]="userInfo.profileImageFile"
         [default]="'assets/images/img_nophoto_50.png'"
-      ></ucap-ui-imaage>
+      ></ucap-ui-imaage> -->
     </dt>
     <dd class="info">
       <div class="detail">
@@ -46,8 +53,7 @@
       >
         {{ userInfo.intro }}
       </div>
-    -->
+    --></dd>
-    </dd>
   </dl>
   <mat-checkbox
     *ngIf="checkable"

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -2,12 +2,19 @@
   <dl class="item-default">
     <dt>
       <!-- <img class="thumbnail" /> -->
-      <ucap-ui-imaage
+      <img
+        class="thumbnail"
+        ucapUiImage
+        [base]="sessionVerinfo.profileRoot"
+        [path]="imagePath"
+        [default]="defaultPath"
+      />
+      <!-- <ucap-ui-imaage
         [imageClass]="'thumbnail'"
         [base]="sessionVerinfo.profileRoot"
         [path]="imagePath"
         [default]="defaultPath"
-      ></ucap-ui-imaage>
+      ></ucap-ui-imaage> -->
     </dt>
     <dd class="info">
       <div class="detail">

projects/ucap-webmessenger-ui/src/lib/components/image.component.spec.ts

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

projects/ucap-webmessenger-ui/src/lib/components/image.component.ts

@@ -1,94 +0,0 @@
-import { Component, OnInit, Input, ElementRef } from '@angular/core';
-import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
-
-import { NGXLogger } from 'ngx-logger';
-import { ucapAnimations } from '../animations';
-
-@Component({
-  selector: 'ucap-ui-imaage',
-  template: `
-    <img #imageElement [src]="imageSrc" [style]="baseStyle" [class]="classes" />
-  `,
-  animations: ucapAnimations
-})
-export class ImageComponent implements OnInit {
-  @Input()
-  base: string;
-
-  @Input()
-  path: string;
-
-  @Input()
-  validation = true;
-
-  @Input()
-  default: string;
-
-  @Input()
-  set style(style: string) {
-    this.logger.debug('style', style);
-    this.baseStyle = style;
-  }
-
-  @Input()
-  set imageClass(classes: string) {
-    // if (classes && classes.length) {
-    //   classes.split(' ').forEach((className: string) => {
-    //     this.classList[className] = true;
-    //   });
-
-    //   this.elementRef.nativeElement.className = '';
-    // }
-    this.classes = classes;
-  }
-
-  baseStyle: SafeStyle;
-  imageSrc: string;
-  // classList: { [key: string]: boolean } = {};
-  classes: string;
-
-  constructor(
-    private elementRef: ElementRef<HTMLElement>,
-    private domSanitizer: DomSanitizer,
-    private logger: NGXLogger
-  ) {
-    this.imageSrc = null;
-  }
-
-  ngOnInit() {
-    if (this.validation) {
-      if (
-        !this.base ||
-        '' === this.base.trim() ||
-        !this.path ||
-        '' === this.path.trim()
-      ) {
-        this.imageSrc = this.default;
-      }
-    }
-
-    if (!this.imageSrc) {
-      this.imageSrc = this.default;
-
-      const imageUrl = `${this.base}${this.path}`;
-      const image = new Image();
-      image.onload = () => {
-        if ('naturalHeight' in image) {
-          if (image.naturalHeight + image.naturalWidth === 0) {
-            image.onerror('naturalHeight');
-            return;
-          }
-        }
-        if (image.width + image.height === 0) {
-          image.onerror('width');
-          return;
-        }
-        this.imageSrc = image.src;
-      };
-      image.onerror = () => {
-        this.imageSrc = this.default;
-      };
-      image.src = imageUrl;
-    }
-  }
-}

projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts

@@ -0,0 +1,83 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Output,
+  Input,
+  AfterViewInit,
+  OnInit,
+  HostListener
+} from '@angular/core';
+
+import { NGXLogger } from 'ngx-logger';
+
+@Directive({
+  selector: 'img[ucapUiImage]'
+})
+export class ImageDirective implements OnInit, AfterViewInit {
+  @Input()
+  base: string;
+
+  @Input()
+  path: string;
+
+  @Input()
+  validation = true;
+
+  @Input()
+  default: string;
+
+  @Output()
+  loaded = new EventEmitter<string>();
+
+  imageSrc: string;
+
+  constructor(
+    private elementRef: ElementRef<HTMLImageElement>,
+    private logger: NGXLogger
+  ) {}
+
+  ngOnInit(): void {
+    if (this.validation) {
+      if (
+        !this.base ||
+        '' === this.base.trim() ||
+        !this.path ||
+        '' === this.path.trim()
+      ) {
+        this.imageSrc = this.default;
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    if (this.imageSrc === this.default) {
+      this.elementRef.nativeElement.src = this.default;
+      this.loaded.emit(this.elementRef.nativeElement.src);
+    } else {
+      this.elementRef.nativeElement.src = this.default;
+
+      const imageUrl = `${this.base}${this.path}`;
+      const image = new Image();
+      image.onload = () => {
+        if ('naturalHeight' in image) {
+          if (image.naturalHeight + image.naturalWidth === 0) {
+            image.onerror('naturalHeight');
+            return;
+          }
+        }
+        if (image.width + image.height === 0) {
+          image.onerror('width');
+          return;
+        }
+        this.elementRef.nativeElement.src = image.src;
+        this.loaded.emit(this.elementRef.nativeElement.src);
+      };
+      image.onerror = () => {
+        this.elementRef.nativeElement.src = this.default;
+        this.loaded.emit(this.elementRef.nativeElement.src);
+      };
+      image.src = imageUrl;
+    }
+  }
+}

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -12,13 +12,24 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 
 import { FileUploadQueueComponent } from './components/file-upload-queue.component';
-import { ImageComponent } from './components/image.component';
-const COMPONENTS = [ImageComponent, FileUploadQueueComponent];
 
 import { BottomSheetService } from './services/bottom-sheet.service';
 import { ClipboardService } from './services/clipboard.service';
 import { DialogService } from './services/dialog.service';
 import { SnackBarService } from './services/snack-bar.service';
+
+import { FileUploadForDirective } from './directives/file-upload-for.directive';
+import { ImageDirective } from './directives/image.directive';
+
+import { AlertDialogComponent } from './dialogs/alert.dialog.component';
+import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
+
+import { BytesPipe } from './pipes/bytes.pipe';
+
+const COMPONENTS = [FileUploadQueueComponent];
+const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
+const DIRECTIVES = [FileUploadForDirective, ImageDirective];
+const PIPES = [BytesPipe];
 const SERVICES = [
   BottomSheetService,
   ClipboardService,
@@ -26,16 +37,6 @@ const SERVICES = [
   SnackBarService
 ];
 
-import { FileUploadForDirective } from './directives/file-upload-for.directive';
-const DIRECTIVES = [FileUploadForDirective];
-
-import { AlertDialogComponent } from './dialogs/alert.dialog.component';
-import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
-const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
-
-import { BytesPipe } from './pipes/bytes.pipe';
-const PIPES = [BytesPipe];
-
 @NgModule({
   imports: [
     CommonModule,

projects/ucap-webmessenger-ui/src/public-api.ts

@@ -5,12 +5,12 @@
 export * from './lib/animations';
 
 export * from './lib/components/file-upload-queue.component';
-export * from './lib/components/image.component';
 
 export * from './lib/dialogs/alert.dialog.component';
 export * from './lib/dialogs/confirm.dialog.component';
 
 export * from './lib/directives/file-upload-for.directive';
+export * from './lib/directives/image.directive';
 
 export * from './lib/services/bottom-sheet.service';
 export * from './lib/services/clipboard.service';