@sumaris-net/ngx-components 2.6.4-alpha4 → 2.6.4-alpha5

package/src/app/shared/hotkeys/shared-hotkeys.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {Hotkeys} from './hotkeys.service';
+import {HotkeysDialogComponent} from './dialog/hotkeys-dialog.component';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatCommonModule} from '@angular/material/core';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatCommonModule,
+    MatDialogModule,
+    TranslateModule.forChild()
+  ],
+  exports: [
+    HotkeysDialogComponent
+  ],
+  declarations: [
+    HotkeysDialogComponent
+  ],
+  providers: [
+    Hotkeys
+  ]
+})
+export class SharedHotkeysModule {
+}

package/src/app/shared/http/http.utils.ts

@@ -0,0 +1,89 @@
+import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
+
+export class HttpUtils {
+  static async getText(http: HttpClient,
+                       uri: string,
+                       opts?: {
+                            nocache?: boolean;
+                            headers?: HttpHeaders | {
+                              [header: string]: string | string[];
+                            };
+                            params?: HttpParams | {
+                              [param: string]: string | string[];
+                            };
+                            reportProgress?: boolean;
+                            responseType?: 'text';
+                            withCredentials?: boolean;
+                          }): Promise<string> {
+
+    // Add headers
+    opts = opts || {responseType: 'text'};
+
+    // Force no cache
+    if (opts.nocache === true) {
+      opts.headers = (opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers));
+      opts.headers
+        .append('Cache-Control', 'no-cache')
+        .append('Pragma', 'no-cache');
+    }
+
+    // Use web http client
+    try {
+      return (await http.get(uri, {...opts, responseType: 'text'}).toPromise());
+    }
+    catch (err) {
+      if (err && err.message) {
+        console.error(`[network] Error on get request ${uri}: ${err.message}`, err);
+      }
+      else {
+        console.error(`[network] Error on get request ${uri}: ${err && err.statusText}`, err);
+      }
+      throw {code: err.status, message: 'ERROR.UNKNOWN_NETWORK_ERROR'};
+    }
+  }
+
+  static async getJson<T>(http: HttpClient,
+                          uri: string,
+                          opts?: {
+                              nocache?: boolean;
+                              headers?: HttpHeaders | {
+                                [header: string]: string | string[];
+                              };
+                              params?: HttpParams | {
+                                [param: string]: string | string[];
+                              };
+                              reportProgress?: boolean;
+                              responseType?: 'json';
+                              withCredentials?: boolean;
+                            }): Promise<T> {
+
+    // Add headers
+    opts = opts || {};
+
+    // Force no cache
+    if (opts.nocache === true) {
+      opts.headers = (opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers));
+      opts.headers
+        .append('Cache-Control', 'no-cache')
+        .append('Pragma', 'no-cache')
+      ;
+    }
+
+    // Use web http client
+    try {
+      return (await http.get(uri, {...opts, responseType: 'json'}).toPromise()) as T;
+    }
+    catch (err) {
+      if (err && err.message) {
+        console.error(`[network] Error on get request ${uri}: ${err.message}`, err);
+      }
+      else {
+        console.error(`[network] Error on get request ${uri}: ${err && err.statusText}`, err);
+      }
+      throw err;
+    }
+  }
+}
+
+
+

package/src/app/shared/image/gallery/image-gallery.component.html

@@ -0,0 +1,231 @@
+
+
+<ion-toolbar color="light" *ngIf="showToolbar">
+  <!-- Add -->
+  <button mat-icon-button
+          *ngIf="!readOnly && !mobile && enabled"
+          [title]="'COMMON.BTN_ADD'|translate"
+          (click)="add()">
+    <mat-icon>add</mat-icon>
+  </button>
+
+  <ion-buttons slot="end">
+    <!-- Toggle view mode -->
+    <ion-segment (ionChange)="toggleViewMode($event)" color="accent"
+                 [value]="_colSize">
+      <ion-segment-button [value]="4">
+        <mat-icon>view_module</mat-icon>
+      </ion-segment-button>
+      <ion-segment-button [value]="12">
+        <mat-icon>view_list</mat-icon>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-buttons>
+</ion-toolbar>
+
+<div class="gallery-container {{this.mode}}">
+  <div *ngIf="mobile && zoomActive" class="backdrop" [style.opacity]="zoomScale"></div>
+
+  <ion-grid class="ion-no-padding">
+    <ion-row>
+      <ion-col *ngFor="let row of rows; index as index; trackBy: trackByFn" [size]="_colSize">
+        <ion-card #card
+                  class="image-card"
+                  [class.zoom-hover]="!mobile"
+                  [color]="cardColor"
+                  *ngVar="row|propertyGet: 'currentData'; let image"
+                  (click)="clickRow(row, index)"
+                  tappable
+                  @fadeInAnimation>
+          <figure class="card-thumbnail">
+            <img [src]="image.url||image.dataUrl"/>
+          </figure>
+
+          <!-- toolbar for title (when not hover) -->
+          <ion-toolbar color="transparent" class="title">
+            <ion-label class="card-title">{{image.title}}</ion-label>
+          </ion-toolbar>
+
+          <!-- action toolbar (desktop only) shown when hover image -->
+          <ion-toolbar #cardToolbar *ngIf="!mobile && !readOnly" color="light" class="buttons">
+
+            <!-- edit title button -->
+            <button mat-button *ngIf="showTitle" slot="start"
+                    [disabled]="disabled"
+                    (click)="editTitle($event, row, cardToolbar)"
+                    (focusin)="showCardToolbar(cardToolbar)">
+              <mat-icon>edit</mat-icon>
+              <mat-label>
+                <span *ngIf="row.currentData.title|isNotNilOrBlank; else editLabel" translate>IMAGE.GALLERY.BTN_EDIT_TITLE</span>
+                <ng-template #editLabel>
+                  <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>
+                </ng-template>
+              </mat-label>
+            </button>
+
+            <div class="flex-spacer"></div>
+
+            <!-- delete button -->
+            <button mat-icon-button slot="end"
+                    class="ion-float-end"
+                    [title]="'COMMON.BTN_DELETE'|translate"
+                    [disabled]="disabled"
+                    (click)="delete($event, row)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </ion-toolbar>
+        </ion-card>
+      </ion-col>
+
+      <ion-col *ngIf="showAddCardButton && !readOnly" [size]="_colSize" @fadeInAnimation>
+        <ion-card class="image-card-button" color="light"
+                  (click)="add($event)"
+                  [disabled]="disabled"
+                  tappable>
+          <ion-card-content>
+            <div class="icon-container">
+              <ion-icon name="camera" [color]="addButtonColor"></ion-icon>
+              <ion-icon name="add" [color]="addButtonColor" class="icon-secondary"></ion-icon>
+            </div>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+</div>
+
+<!-- FAB button: add -->
+<ion-fab slot="fixed" vertical="bottom" horizontal="end"
+         *ngIf="showFabButton && !readOnly"
+         [class.cdk-visually-hidden]="disabled"
+         @fadeInOutAnimation>
+
+  <ion-fab-button color="tertiary" (click)="add($event)">
+    <ion-icon name="camera"></ion-icon>
+    <ion-icon name="add" class="icon-secondary" style="left: 33px; top: 9px; font-size: 20px;"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
+
+<!-- Zoom modal -->
+<ion-modal #zoomModal class="stack-modal zoom-modal"
+           [class.modal-fullscreen]="mobile"
+           [class.modal-large]="!mobile">
+  <ng-template>
+    <ion-content class="ion-no-padding ion-no-margin" >
+      <!-- Counter  -->
+      <div class="top-left" *ngVar="rows?.length as count">
+        <ion-label color="light">
+          {{activeSlideIndex + 1}} / {{count}}
+        </ion-label>
+      </div>
+
+      <!-- zoom button -->
+      <div class="top-right">
+        <ion-button *ngIf="!mobile" (click)="zoom(modalSwiper, true)" color="light">
+          <ion-icon slot="icon-only" name="add"></ion-icon>
+        </ion-button>
+        <ion-button *ngIf="!mobile" (click)="zoom(modalSwiper, false)" color="light">
+          <ion-icon name="remove" slot="icon-only"></ion-icon>
+        </ion-button>
+      </div>
+
+      <!-- navigation side buttons next/back -->
+      <ng-container *ngIf="!mobile && (rows|isArrayLength:{greaterThan: 1})">
+        <div class="side-buttons prev"
+             (click)="slidePrev(modalSwiper)">
+          <ion-icon name="chevron-back"></ion-icon>
+        </div>
+        <div class="side-buttons next"
+             (click)="slideNext(modalSwiper)">
+          <ion-icon name="chevron-forward"></ion-icon>
+        </div>
+      </ng-container>
+
+      <!-- image slides -->
+      <swiper-container #modalSwiper [modules]="swiperModules" [zoom]="true">
+        <swiper-slide *ngFor="let row of rows; last as last">
+          <div class="swiper-zoom-container" *ngIf="row|propertyGet: 'currentData'; let image"
+               (ngInit)="last && initModalSlides(modalSwiper)">
+            <img [src]="image.url||image.dataUrl">
+          </div>
+        </swiper-slide>
+      </swiper-container>
+    </ion-content>
+
+    <ion-footer>
+      <ion-toolbar color="light">
+        <ion-row>
+          <ion-col size="4" class="ion-text-start">
+            <ion-button *ngIf="!readOnly"
+                        (click)="deleteFromModal($event, modalSwiper)"
+                        [disabled]="disabled"
+                        fill="clear" color="danger">
+              <mat-icon slot="start">delete</mat-icon>
+              {{'COMMON.BTN_DELETE'|translate}}
+            </ion-button>
+          </ion-col>
+          <ion-col size="4">
+          </ion-col>
+          <ion-col size="4" class="ion-text-end">
+            <ion-button (click)="zoomModal.dismiss()" color="tertiary" fill="clear" *ngIf="mobile; else desktop">
+              <ion-icon slot="start" name="close"></ion-icon>
+              {{'COMMON.BTN_CLOSE'|translate}}
+            </ion-button>
+            <ng-template #desktop>
+              <ion-button (click)="zoomModal.dismiss()" color="tertiary">
+                {{'COMMON.BTN_CLOSE'|translate}}
+              </ion-button>
+            </ng-template>
+          </ion-col>
+        </ion-row>
+      </ion-toolbar>
+    </ion-footer>
+  </ng-template>
+</ion-modal>
+
+<ion-popover #titlePopover>
+  <ng-template>
+    <ion-content class="ion-padding" cdkTrapFocus [cdkTrapFocusAutoCapture]="true" >
+      <form [formGroup]="_titleForm">
+        <mat-form-field floatLabel="auto">
+          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>
+          <input
+            matInput
+            formControlName="title"
+            [readonly]="disabled"
+            [appAutofocus]="_titleAutofocus"
+            (keydown.control.enter)="titlePopover.dismiss(_titleForm.controls.title.value)"
+          />
+
+        </mat-form-field>
+      </form>
+    </ion-content>
+
+
+    <ion-footer>
+      <ion-toolbar>
+        <ion-row class="ion-no-padding" nowrap>
+          <ion-col>
+
+          </ion-col>
+
+          <ion-col size="auto">
+            <ion-button fill="clear" color="dark" (click)="titlePopover.dismiss(null, 'CANCEL')">
+              <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+            </ion-button>
+            <ion-button
+              [fill]="disabled ? 'clear' : 'solid'"
+              (click)="titlePopover.dismiss(_titleForm.controls.title.value)"
+              (keyup.enter)="titlePopover.dismiss(_titleForm.controls.title.value)"
+              color="tertiary"
+              [disabled]="disabled"
+              [title]="'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP'|translate">
+              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
+            </ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-toolbar>
+    </ion-footer>
+  </ng-template>
+</ion-popover>

package/src/app/shared/image/gallery/image-gallery.component.scss

@@ -0,0 +1,196 @@
+:host {
+  --image-margin-inline: 10px;
+}
+mat-toolbar, .mat-toolbar-single-row {
+  padding: 0;
+  height: 42px;
+}
+ion-card {
+  margin-left: unset;
+  margin-right: unset;
+  margin-inline: var(--image-margin-inline, 10px);
+}
+.image-slide {
+  overflow: visible;
+}
+.image-card {
+  height: calc(100% - 23px);
+  background-color: var(--ion-color-base);
+  z-index: 9;
+  --img-scale: 1;
+
+  .card-thumbnail {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center; /* horizontal center */
+    align-items: center; /* vertical center */
+    margin: 0;
+    padding: 0;
+
+    width: 100%; /* Thumbnail dimensions. */
+    height: 100%; /*** Change the height to make the image smaller ***/
+
+
+    & > img {
+      /* Tip: use 1:1 ratio images */
+      min-height: 100%; /* or width when img.width > img.height */
+      transition: scale 200ms ease-in-out;
+      scale: var(--img-scale);
+      max-height: var(--img-max-height);
+    }
+  }
+  &.zoom-hover:hover {
+    --img-scale: 1.2;
+  }
+
+  ion-toolbar {
+    --top-offset: calc(-1 * var(--ion-toolbar-height));
+    position: absolute;
+  }
+  ion-toolbar.title {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --ion-color-base: transparent !important;
+    position: absolute;
+    top: calc(100% + var(--top-offset));
+    transition: opacity 200ms ease-in-out;
+    //opacity: 1;
+    ion-label {
+      color: white;
+    }
+  }
+  &:hover ion-toolbar.title {
+    //opacity: 0;
+  }
+  ion-toolbar.buttons {
+    --padding-start: 4px;
+    --padding-end: 4px;
+    --ion-color-base: var(--ion-color-light) !important;
+    position: absolute;
+    top: calc(100%);
+    transition: transform 200ms ease-in-out;
+  }
+  &:hover ion-toolbar.buttons,
+  ion-toolbar.buttons.focused
+  {
+    transform: translateY(var(--top-offset));
+  }
+}
+
+.image-card-button {
+
+  height: calc(100% - var(--image-margin-inline, 0px) * 2 - 3px);
+  transition: 200ms ease-in-out;
+  max-width: 250px;
+
+  ion-card-content {
+    height: 100%;
+  }
+
+  .icon-container {
+    height: auto;
+    position: relative;
+    top: calc(50% - 75px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    //height: 100%;
+  }
+
+  ion-icon:first-of-type {
+    font-size: 150px;
+    height: 150px;
+    position: relative;
+    top: 0;
+  }
+
+  ion-icon.icon-secondary {
+    font-size: 50px;
+    position: absolute;
+    top: 0;
+    left: max(min(calc(50% + 25px), calc(100% - 50px)), 0px);
+  }
+
+  ion-button {
+    float: right;
+  }
+
+  &:hover {
+    --ion-color-base: var(--ion-color-shade) !important;
+  }
+  &:hover ion-icon {
+    --ion-color-base: var(--ion-color-shade) !important;
+  }
+}
+
+.backdrop {
+  height: calc(100vh);
+  width: calc(100vw);
+  background: black;
+  position: absolute;
+  z-index: 10;
+}
+
+.zoom-modal {
+  user-select: none;
+  .top-left {
+    z-index: 14;
+    position: absolute;
+    display: inline-grid;
+    left: var(--ion-padding-start, 8px);
+    top: var(--ion-padding-start, 8px);
+  }
+  .top-right {
+    z-index: 14;
+    position: absolute;
+    display: inline-grid;
+    right: var(--ion-padding-start, 8px);
+    top: var(--ion-padding-start, 8px);
+  }
+  .side-buttons {
+
+    --side-buttons-width: 120px;
+    --side-buttons-margin: calc(var(--side-buttons-width) / 3);
+
+    z-index: 13;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: var(--side-buttons-width);
+
+    ion-icon {
+      top: calc(50%);
+      color: white;
+      font-size: 2.5rem;
+      position: absolute;
+      opacity: 0;
+      transition-duration: 150ms;
+      transition-timing-function: ease-in;
+    }
+    &:hover {
+      cursor: pointer;
+      ion-icon {
+        opacity: 1;
+      }
+    }
+
+    &.prev {
+      left: 0;
+      ion-icon {
+        left: var(--side-buttons-margin);
+      }
+    }
+    &.next {
+      right: 0;
+      ion-icon {
+        right: var(--side-buttons-margin);
+      }
+    }
+  }
+
+  ion-slides {
+    height: 100%;
+    background: black;
+  }
+}