c3-components 0.0.3 → 0.0.5

package/src/lib/c3-file/c3-download/c3-download.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { C3DownloadService } from './c3-download.service';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  imports: [CommonModule, HttpClientModule],
+  providers: [C3DownloadService],
+})
+export class C3DownloadModule {}

package/src/lib/c3-file/c3-download/c3-download.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class C3DownloadService {
+  constructor(private _http: HttpClient) {}
+
+  download(url: string): Observable<Blob> {
+    return this._http.get(url, {
+      responseType: 'blob',
+    });
+  }
+}

package/src/lib/c3-file/c3-input-file/c3-input-file.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { C3InputFileTriggerComponent } from './components/c3-input-file-trigger/c3-input-file-trigger.component';
+import { C3InputFileContainerComponent } from './components/c3-input-file-container/c3-input-file-container.component';
+import { C3InputFileDisplayerComponent } from './components/c3-input-file-displayer/c3-input-file-displayer.component';
+import { C3InputFileTriggerDirective } from './directives/c3-input-file-trigger.directive';
+
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { C3InputFileComponent } from './components/c3-input-file/c3-input-file.component';
+
+@NgModule({
+  declarations: [
+    C3InputFileComponent,
+    C3InputFileTriggerComponent,
+    C3InputFileContainerComponent,
+    C3InputFileDisplayerComponent,
+    C3InputFileTriggerDirective,
+  ],
+  imports: [CommonModule, MatProgressBarModule, MatButtonModule, MatIconModule],
+  exports: [
+    C3InputFileComponent,
+    C3InputFileTriggerComponent,
+    C3InputFileContainerComponent,
+    C3InputFileDisplayerComponent,
+    C3InputFileTriggerDirective,
+  ],
+})
+export class C3InputFileModule {}

package/src/lib/c3-file/c3-input-file/class/c3-input-file.ts

@@ -0,0 +1,62 @@
+import { Subject } from 'rxjs';
+import { EventEmitter } from 'events';
+
+export class C3InputFile<ResponseType = any> extends EventEmitter {
+  name?: string;
+  id?: number;
+  fileName: string;
+  mimetype: string;
+  progressionChange = new Subject<number>();
+  private _progression = 0;
+  loaded: boolean = false;
+  path?: string;
+  size?: number;
+  aborded: boolean = false;
+  response?: ResponseType;
+
+  constructor({
+    fileName,
+    mimetype,
+    size,
+  }: {
+    fileName: string;
+    mimetype: string;
+    size: number;
+  }) {
+    super();
+    this.fileName = fileName;
+    this.mimetype = mimetype;
+    this.size = size;
+    this.progressionChange.next(this._progression);
+  }
+
+  set progression(value: number) {
+    this._progression = value;
+    if (value === 100) {
+      this.loaded = true;
+      this.emit('loaded');
+    }
+    this.progressionChange.next(value);
+  }
+
+  get progression(): number {
+    return this._progression;
+  }
+
+  override on(event: string | symbol, listener: (...args: any[]) => void) {
+    return super.on(event, listener);
+  }
+
+  override emit(event: string | symbol, ...args: any[]): boolean {
+    return super.emit(event, args);
+  }
+
+  override off(event: string | symbol, listener: (...args: any[]) => void) {
+    return super.off(event, listener);
+  }
+
+  abord() {
+    this.aborded = true;
+    this.emit('abord');
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.html

@@ -0,0 +1,7 @@
+<input
+  type="file"
+  #fileInput
+  [accept]="accept"
+  [multiple]="multiple"
+  (change)="change($event)"
+/>

package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.ts

@@ -0,0 +1,96 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ViewChild,
+  ElementRef,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { C3InputFile } from '../../class/c3-input-file';
+
+@Component({
+  selector: 'c3-input-file',
+  templateUrl: './c3-input-file.component.html',
+  styleUrls: ['./c3-input-file.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class C3InputFileComponent {
+  @Input() accept!: string;
+  @Input() multiple: Boolean = false;
+  @Input() dest: string = 'api/upload';
+  @Input() baseUrl: string = 'localhost:3000';
+  @Input() method: string = 'POST';
+  @Input() headers?: Object;
+
+  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
+  @Output()
+  fileAdded: EventEmitter<C3InputFile> = new EventEmitter<C3InputFile>();
+
+  click() {
+    this.fileInput.nativeElement.click();
+  }
+
+  change({ target }: any) {
+    const files = Array.from(target.files as FileList);
+
+    files.forEach((file) => {
+      const formData = new FormData();
+      const xhr = new XMLHttpRequest();
+
+      formData.append('upload', file);
+
+      // ecoute la progression de l'upload
+      xhr.upload.addEventListener(
+        'progress',
+        (progress) => {
+          _file.progression = Math.round(
+            (progress.loaded / progress.total) * 100
+          );
+        },
+        false
+      );
+
+      // ecoute si une erreur survient lors de l'upload
+      xhr.addEventListener('error', (event) => console.log(event), false);
+
+      // ecoute si l'utilisateur annul l'upload en cours
+      xhr.addEventListener('abort', (event) => console.log(event), false);
+
+      xhr.addEventListener('readystatechange', (ev) => {
+        if (xhr.readyState === 4) {
+          const data = JSON.parse(xhr.response);
+          _file.name = data.name;
+          _file.id = data.id;
+          _file.path = data.path;
+          _file.response = data;
+          if (_file.progression !== 100) _file.progression = 100;
+          _file.progressionChange.complete();
+          _file.emit('completed');
+        }
+      });
+
+      // initialise le type de connection et l'url
+      xhr.open(this.method, `${this.baseUrl}/${this.dest}`);
+
+      // set header if data is transmitted
+      if (this.headers)
+        for (const [key, value] of Object.entries(this.headers))
+          xhr.setRequestHeader(key, value);
+
+      // start upload
+      xhr.send(formData);
+
+      const _file: C3InputFile = new C3InputFile({
+        fileName: file.name,
+        mimetype: file.type,
+        size: file.size,
+      });
+
+      _file.on('abord', () => {
+        xhr.abort();
+      });
+      this.fileAdded.emit(_file);
+    });
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file-container/c3-input-file-container.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ContentChild,
+  OnDestroy,
+  Input,
+} from '@angular/core';
+import { C3InputFileTriggerComponent } from '../c3-input-file-trigger/c3-input-file-trigger.component';
+import { C3InputFileTriggerDirective } from '../../directives/c3-input-file-trigger.directive';
+import { C3InputFileComponent } from '../c3-input-file/c3-input-file.component';
+
+@Component({
+  selector:
+    'c3-input-file-container, [c3InputFileContainer], [c3-input-file-container]',
+  template: ` <ng-content> </ng-content>
+    <c3-input-file-displayer
+      *ngIf="c3InputFile"
+      [c3InputFile]="c3InputFile"
+      [autoclose]="autoclose"
+    ></c3-input-file-displayer>`,
+  styles: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'c3-input-file-container',
+  },
+})
+export class C3InputFileContainerComponent implements OnDestroy {
+  @Input() autoclose?: boolean | number;
+
+  @ContentChild(C3InputFileComponent) c3InputFile?: C3InputFileComponent;
+
+  @ContentChild(C3InputFileTriggerComponent)
+  c3Trigger?: C3InputFileTriggerComponent;
+
+  @ContentChild(C3InputFileTriggerDirective)
+  c3TriggerDirective?: C3InputFileTriggerDirective;
+
+  ngAfterViewInit() {
+    if (this.c3Trigger)
+      this.c3Trigger.clicked.subscribe(($event) => {
+        this.c3InputFile?.click();
+      });
+    else if (this.c3TriggerDirective)
+      this.c3TriggerDirective.click.subscribe(($event) => {
+        this.c3InputFile?.click();
+      });
+  }
+
+  ngOnDestroy() {
+    if (this.c3Trigger) this.c3Trigger.clicked.unsubscribe();
+    if (this.c3TriggerDirective) this.c3TriggerDirective.click.unsubscribe();
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file-displayer/c3-input-file-displayer.component.ts

@@ -0,0 +1,107 @@
+import {
+  Component,
+  OnInit,
+  ViewEncapsulation,
+  Input,
+  AfterContentInit,
+} from '@angular/core';
+import { C3InputFile } from '../../class/c3-input-file';
+import { C3InputFileComponent } from '../c3-input-file/c3-input-file.component';
+
+@Component({
+  selector: 'c3-input-file-displayer',
+  template: `
+    <ng-container *ngIf="files.length">
+      <div class="c3-input-file-displayer mat-card">
+        <div
+          class="title-bar mat-elevation-z4"
+          fxLayout="row"
+          fxLayoutAlign="space-between center"
+        >
+          <span>Liste des téléversement</span>
+          <div>
+            <button mat-icon-button (click)="toggleMinimize()">
+              <mat-icon *ngIf="minimized">open_in_full</mat-icon>
+              <mat-icon *ngIf="!minimized">close_fullscreen</mat-icon>
+            </button>
+            <button mat-icon-button [disabled]="!closable" (click)="close()">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+        </div>
+        <div class="container-list" *ngIf="!minimized">
+          <div class="item" *ngFor="let item of files">
+            <div class="title">{{ item.fileName }}</div>
+            <div
+              fxLayout="row"
+              fxLayoutAlign="space-around center"
+              fxLayoutGap="4px"
+            >
+              <mat-progress-bar
+                fxFlex
+                [color]="item.aborded ? 'warn' : 'primary'"
+                [mode]="item.aborded ? 'determinate' : 'buffer'"
+                [value]="item.progression"
+                [bufferValue]="0"
+              >
+              </mat-progress-bar>
+
+              <button
+                mat-icon-button
+                [disabled]="item.aborded || item.loaded"
+                (click)="item.abord()"
+              >
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  `,
+  styles: [],
+  encapsulation: ViewEncapsulation.None,
+})
+export class C3InputFileDisplayerComponent implements AfterContentInit {
+  @Input() c3InputFile!: C3InputFileComponent;
+  files: Array<C3InputFile> = [];
+  @Input() autoclose?: boolean | number;
+
+  minimized: boolean = false;
+
+  get closable() {
+    return this.files.every(({ loaded, aborded }) => loaded || aborded);
+  }
+
+  constructor() {}
+
+  ngAfterContentInit(): void {
+    this.c3InputFile.fileAdded.subscribe(
+      (newFile: C3InputFile) => {
+        this.files.push(newFile);
+        if (this.autoclose)
+          if (newFile.loaded) this._autoclose();
+          else newFile.on('loaded', () => this._autoclose());
+      },
+      console.error,
+      () => {
+        console.log('completed');
+      }
+    );
+  }
+
+  toggleMinimize() {
+    this.minimized = !this.minimized;
+  }
+
+  _autoclose() {
+    if (this.closable)
+      if (typeof this.autoclose === 'number')
+        setTimeout(() => this.close(), 1000 * this.autoclose);
+      else this.close();
+  }
+
+  close() {
+    this.files = [];
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file-trigger/c3-input-file-trigger.component.ts

@@ -0,0 +1,22 @@
+import {
+  Component,
+  ViewEncapsulation,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+
+@Component({
+  selector: 'c3-input-file-trigger',
+  template: `
+    <button (click)="click($event)">Ajouter des fichiers....</button>
+  `,
+  styles: [],
+  encapsulation: ViewEncapsulation.None,
+})
+export class C3InputFileTriggerComponent {
+  @Output('click') clicked: EventEmitter<MouseEvent> = new EventEmitter();
+
+  click($event: MouseEvent) {
+    this.clicked.emit($event);
+  }
+}

package/src/lib/c3-file/c3-input-file/directives/c3-input-file-trigger.directive.ts

@@ -0,0 +1,27 @@
+import {
+  Directive,
+  Output,
+  EventEmitter,
+  ElementRef,
+  AfterViewInit,
+  OnDestroy,
+} from '@angular/core';
+
+@Directive({
+  selector: '[c3InputFileTrigger], [c3-input-file-trigger]',
+})
+export class C3InputFileTriggerDirective implements AfterViewInit, OnDestroy {
+  @Output() click: EventEmitter<MouseEvent> = new EventEmitter();
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    this.elementRef.nativeElement.addEventListener(
+      'click',
+      ($event: MouseEvent) => this.click.emit($event)
+    );
+  }
+
+  ngOnDestroy() {
+    this.elementRef.nativeElement.removeEventListener('click', () => {});
+  }
+}

package/src/lib/c3-file-upload/c3-file-upload.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+})
+export class C3FileUploadModule {}

package/src/lib/c3-file-viewer/c3-file-viewer.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { FullScreenDirective } from './directives/full-screen.directive';
+import { C3FileViewerComponent } from './components/public/c3-file-viewer/c3-file-viewer.component';
+import { CommonModule } from '@angular/common';
+import { C3FileViewerActionsComponent } from './components/c3-file-viewer-actions/c3-file-viewer-actions.component';
+import { C3FileViewerImageComponent } from './components/c3-file-viewer-image/c3-file-viewer-image.component';
+import { C3FileViewerPdfComponent } from './components/c3-file-viewer-pdf/c3-file-viewer-pdf.component';
+import { C3FileViewerVideoComponent } from './components/c3-file-viewer-video/c3-file-viewer-video.component';
+import { HttpClientModule } from '@angular/common/http';
+import { C3SafeUrlPipe } from '../../public-api';
+import { C3FileViewerDialogComponent } from './components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { C3FileViewerDialog } from './components/public/c3-file-viewer-dialog/c3-file-viewer-dialog';
+
+@NgModule({
+  providers: [],
+  declarations: [
+    FullScreenDirective,
+    C3FileViewerComponent,
+    C3FileViewerActionsComponent,
+    C3FileViewerImageComponent,
+    C3FileViewerPdfComponent,
+    C3FileViewerVideoComponent,
+    C3FileViewerDialogComponent,
+    C3FileViewerDialog,
+  ],
+  imports: [CommonModule, HttpClientModule, C3SafeUrlPipe, MatDialogModule],
+  exports: [
+    FullScreenDirective,
+    C3FileViewerComponent,
+    C3FileViewerDialogComponent,
+  ],
+})
+export class C3FileViewerModule {}

package/src/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.html

@@ -0,0 +1,185 @@
+<div class="nav-button-container">
+  <button
+    *ngIf="config.btnShow?.prev"
+    type="button"
+    [class]="config.btnClass"
+    (click)="fileViewer.previousImage($event)"
+    [disabled]="fileViewer.currentIndex === 0"
+  >
+    <span
+      *ngIf="config.btnIcons?.prev?.classes"
+      [class]="config.btnIcons?.prev?.classes"
+    ></span>
+  </button>
+  <a
+    [class]="config.btnClass"
+    *ngIf="config.btnIcons?.prev?.text"
+    (click)="fileViewer.previousImage($event)"
+  >
+    <span [class]="config.btnSubClass">{{ config.btnIcons?.prev?.text }}</span>
+  </a>
+  <button
+    *ngIf="config.btnShow?.next"
+    type="button"
+    [class]="config.btnClass"
+    (click)="fileViewer.nextImage($event)"
+    [disabled]="fileViewer.currentIndex === fileViewer.files.length - 1"
+  >
+    <span
+      *ngIf="config.btnIcons?.next?.classes"
+      [class]="config.btnIcons?.next?.classes"
+    ></span>
+  </button>
+  <a
+    [class]="config.btnClass"
+    *ngIf="config.btnIcons?.next?.text"
+    (click)="fileViewer.nextImage($event)"
+  >
+    <span [class]="config.btnSubClass">{{ config.btnIcons?.next?.text }}</span>
+  </a>
+</div>
+
+<!-- Button Container -->
+<div
+  class="btn-container"
+  [class]="config.btnContainerClass"
+  *ngIf="fileViewer.currentFile.type.startsWith('image')"
+>
+  <!-- Rotate Counter Clockwise -->
+  <ng-container *ngIf="config.btnShow?.rotateCounterClockwise">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.rotateCounterClockwise()"
+      *ngIf="config.btnIcons?.rotateCounterClockwise?.classes"
+    >
+      <span [class]="config.btnIcons?.rotateCounterClockwise?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.rotateCounterClockwise?.text"
+      (click)="fileViewer.rotateCounterClockwise()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.rotateCounterClockwise?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Rotate Clockwise -->
+  <ng-container *ngIf="config.btnShow?.rotateClockwise">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.rotateClockwise()"
+      *ngIf="config.btnIcons?.rotateClockwise?.classes"
+    >
+      <span [class]="config.btnIcons?.rotateClockwise?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.rotateClockwise?.text"
+      (click)="fileViewer.rotateClockwise()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.rotateClockwise?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Zoom Out -->
+  <ng-container *ngIf="config.btnShow?.zoomOut">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.zoomOut()"
+      *ngIf="config.btnIcons?.zoomOut?.classes"
+    >
+      <span [class]="config.btnIcons?.zoomOut?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.zoomOut?.text"
+      (click)="fileViewer.zoomOut()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.zoomOut?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Zoom In -->
+  <ng-container *ngIf="config.btnShow?.zoomIn">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.zoomIn()"
+      *ngIf="config.btnIcons?.zoomIn?.classes"
+    >
+      <span [class]="config.btnIcons?.zoomIn?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.zoomIn?.text"
+      (click)="fileViewer.zoomIn()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.zoomIn?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Fullscreen -->
+  <ng-container *ngIf="config.allowFullscreen">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.toggleFullscreen()"
+      *ngIf="config.btnIcons?.fullscreen?.classes"
+    >
+      <span [class]="config.btnIcons?.fullscreen?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.fullscreen?.text"
+      (click)="fileViewer.toggleFullscreen()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.fullscreen?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Reset -->
+  <ng-container *ngIf="config.btnShow?.reset">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.reset()"
+      *ngIf="config.btnIcons?.reset?.classes"
+    >
+      <span [class]="config.btnIcons?.reset?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.reset?.text"
+      (click)="fileViewer.reset()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.reset?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Custom Buttons -->
+  <ng-container *ngFor="let cBtn of config.customBtns">
+    <button *ngIf="cBtn.icon.classes" type="button" [class]="config.btnClass">
+      <span *ngIf="cBtn.icon.classes" [class]="cBtn.icon.classes"></span>
+    </button>
+    <ng-container *ngIf="cBtn.icon.text">
+      <a [class]="config.btnClass" *ngIf="cBtn.icon.text">
+        <span [class]="config.btnSubClass">{{ cBtn.icon.text }}</span>
+      </a>
+    </ng-container>
+  </ng-container>
+</div>