feat(image-viewer): added action click output event

fivethree-team · Dec 14, 2018 · 9dd170a · 9dd170a
1 parent 8110732
commit 9dd170a
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 8 deletions.
diff --git a/projects/core/package.json b/projects/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fivethree/core",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Fivethree Core Components",
   "keywords": [
     "fivethree",

diff --git a/projects/core/src/lib/image-viewer/image-viewer.component.html b/projects/core/src/lib/image-viewer/image-viewer.component.html
@@ -1,4 +1,5 @@
-<img class="thumbnail" [width]="width" [height]="height" #thumbnail *ngIf="thumbnailVisible" (click)="open($event)" [src]="src">
+<img class="thumbnail" [width]="width" [height]="height" #thumbnail *ngIf="thumbnailVisible" (click)="open($event)"
+  [src]="src">
 <div #backdrop [@backdrop] (@backdrop.done)="onEnter($event)" *ngIf="_isOpen" class="backdrop">
   <ion-toolbar [@fade] *ngIf="_controlsVisible" color="translucent">
     <ion-buttons slot="start">
@@ -10,12 +11,12 @@
   <div #footer class="actions" [@fade] *ngIf="_controlsVisible">
     <ion-grid fixed>
       <ion-row>
-        <ion-col style="text-align: center;" *ngFor="let action of actions; let c = count" [size]="12 / c">
-          <ion-button color="light" *ngIf="action.name" [fill]="'clear'">
+        <ion-col style="text-align: center;" *ngFor="let action of actions; let c = count; let i = index" [size]="12 / c">
+          <ion-button (click)="onActionClicked(i)" color="light" *ngIf="action.name" [fill]="'clear'">
             <ion-icon *ngIf="action.icon" slot="start" [name]="action.icon"></ion-icon>
             {{action.name}}
           </ion-button>
-          <fiv-ripple *ngIf="!action.name">
+          <fiv-ripple (fivClick)="onActionClicked(i)" *ngIf="!action.name">
             <ion-icon *ngIf="action.icon" [fivCenter] [name]="action.icon"></ion-icon>
           </fiv-ripple>
         </ion-col>

diff --git a/projects/core/src/lib/image-viewer/image-viewer.component.ts b/projects/core/src/lib/image-viewer/image-viewer.component.ts
@@ -89,6 +89,7 @@ export class ImageViewerComponent implements OnInit {
   @Input() pullDistance = 150;
   @Input() actions: ImageViewerAction[] = [];
   @Output() fivClose = new EventEmitter();
+  @Output() fivActionClick = new EventEmitter<number>();
   componentRef: ComponentRef<ImageViewerComponent>;
   _isOpen = false;
   _controlsVisible = true;
@@ -107,6 +108,7 @@ export class ImageViewerComponent implements OnInit {
   singletap: Subscription;
   closeSub: Subscription;
   pinchPan: Subscription;
+  actionSub: Subscription;
 
   singletapHammer;
   doubleTapHammer;
@@ -160,6 +162,11 @@ export class ImageViewerComponent implements OnInit {
         this.thumbnailVisible = true;
       });
 
+    this.actionSub = this.componentRef.instance.fivActionClick
+      .subscribe((ev) => {
+        this.fivActionClick.emit(ev);
+      });
+
     this.appRef.attachView(this.componentRef.hostView);
 
     const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>)
@@ -185,6 +192,7 @@ export class ImageViewerComponent implements OnInit {
     this.singletap.unsubscribe();
     this.doubletap.unsubscribe();
     this.pinchPan.unsubscribe();
+    this.actionSub.unsubscribe();
   }
 
   removeHammerManager(): any {
@@ -532,6 +540,10 @@ export class ImageViewerComponent implements OnInit {
   getAbsoluteCenter() {
     return { x: this.platform.width() / 2, y: this.platform.height() / 2 };
   }
+
+  onActionClicked(index: number) {
+    this.fivActionClick.emit(index);
+  }
 }
 
 

diff --git a/src/app/pages/image/image.page.html b/src/app/pages/image/image.page.html
@@ -7,7 +7,7 @@
 <ion-content padding>
 
   <ion-card>
-    <fiv-image-viewer [actions]="[{icon: 'md-trash', name: 'remove'},{icon: 'md-send', name: 'send'}]" [src]="'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQRop4VKhcYOvhY8gLZEICF8ZnWhKFVi6zgsxSCXwEGi2uukej'"></fiv-image-viewer>
+    <fiv-image-viewer (fivActionClick)="onActionClick($event)" [actions]="[{icon: 'md-trash', name: 'remove'},{icon: 'md-send', name: 'send'}]" [src]="'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQRop4VKhcYOvhY8gLZEICF8ZnWhKFVi6zgsxSCXwEGi2uukej'"></fiv-image-viewer>
     <ion-card-header>
       <ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>
       <ion-card-title>Awesome Title</ion-card-title>
@@ -17,8 +17,8 @@
     </ion-card-content>
   </ion-card>
 
-  <fiv-image-viewer [width]="103.5" [height]="122" [actions]="[{icon: 'md-trash'},{icon: 'md-send'},{icon: 'md-image'},{icon: 'md-share'}]"
+  <fiv-image-viewer (fivActionClick)="onActionClick($event)" [width]="103.5" [height]="122" [actions]="[{icon: 'md-trash'},{icon: 'md-send'},{icon: 'md-image'},{icon: 'md-share'}]"
     [src]="'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQRop4VKhcYOvhY8gLZEICF8ZnWhKFVi6zgsxSCXwEGi2uukej'"></fiv-image-viewer>
-  <fiv-image-viewer [width]="207" [height]="244" [actions]="[{name: 'Ablesung abschließen'}]" [src]="'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQRop4VKhcYOvhY8gLZEICF8ZnWhKFVi6zgsxSCXwEGi2uukej'"></fiv-image-viewer>
+  <fiv-image-viewer (fivActionClick)="onActionClick($event)" [width]="207" [height]="244" [actions]="[{name: 'Ablesung abschließen'}]" [src]="'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQRop4VKhcYOvhY8gLZEICF8ZnWhKFVi6zgsxSCXwEGi2uukej'"></fiv-image-viewer>
 
 </ion-content>
diff --git a/src/app/pages/image/image.page.ts b/src/app/pages/image/image.page.ts
@@ -12,4 +12,8 @@ export class ImagePage implements OnInit {
   ngOnInit() {
   }
 
+  onActionClick(index) {
+    console.log('test', index);
+  }
+
 }