c3-components 0.0.4 → 0.0.6

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

@@ -0,0 +1,15 @@
+import { Component, Host, Input } from '@angular/core';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-actions',
+  templateUrl: './c3-file-viewer-actions.component.html',
+})
+export class C3FileViewerActionsComponent {
+  @Input()
+  fileViewer!: C3FileViewer;
+
+  get config() {
+    return this.fileViewer.config;
+  }
+}

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

@@ -0,0 +1,7 @@
+<img
+  *ngIf="fileViewer.currentFile.objectUrl"
+  [src]="fileViewer.currentFile.objectUrl | async | c3SafeUrl"
+  [ngStyle]="fileViewer.style"
+  alt="Image not found..."
+  (dragstart)="dragstart.emit($event)"
+/>

package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.spec.ts

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

package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.ts

@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-image, [c3-file-viewer-image]',
+  templateUrl: './c3-file-viewer-image.component.html',
+})
+export class C3FileViewerImageComponent {
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Output()
+  dragstart = new EventEmitter<DragEvent>();
+}

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

@@ -0,0 +1,7 @@
+<!-- pdf viewer -->
+<embed
+  type="application/pdf"
+  [src]="fileViewer.currentFile.objectUrl | async | c3SafeUrl"
+  [style.height]="'100%'"
+  [style.width]="'100%'"
+/>

package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.spec.ts

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

package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.ts

@@ -0,0 +1,25 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-pdf',
+  templateUrl: './c3-file-viewer-pdf.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: block',
+    class: 'c3-file-viewer-pdf',
+  },
+})
+export class C3FileViewerPdfComponent {
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Output()
+  dragstart = new EventEmitter<DragEvent>();
+}

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

@@ -0,0 +1 @@
+<video controls [src]="src" crossorigin="*"></video>

package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.spec.ts

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

package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { FileMetadata } from '../../models/file-metadata';
+import { Subject, filter, mergeMap, tap } from 'rxjs';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-video',
+  templateUrl: './c3-file-viewer-video.component.html',
+})
+export class C3FileViewerVideoComponent {
+  @Input('file')
+  set _srcUpdated({ location }: FileMetadata) {
+    this.src$.next(location);
+  }
+  src = '';
+  private src$ = new Subject<string>();
+
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  constructor() {
+    this.src$
+      .pipe(
+        mergeMap((src) => this.fileViewer.getFile(src)),
+        filter((blob) => blob.type.startsWith('application/pdf')),
+        tap((blob) => (this.src = URL.createObjectURL(blob)))
+      )
+      .subscribe({
+        next: () => null,
+        error: (error) => {
+          console.log(error);
+        },
+      });
+  }
+}

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

@@ -0,0 +1,32 @@
+<div
+  class="container"
+  *ngIf="fileViewer"
+  [c3-full-screen]="fileViewer.fullscreen$ | async"
+  [style.height]="fileViewer.styleHeight"
+  [style.backgroundColor]="fileViewer.config.containerBackgroundColor"
+  (wheel)="fileViewer.scrollZoom($event)"
+  (dragover)="fileViewer.onDragOver($event)"
+>
+  <c3-file-viewer-image
+    *ngIf="fileViewer.currentFile.type.startsWith('image')"
+    [fileViewer]="fileViewer"
+    [style]="fileViewer.style"
+    (dragstart)="fileViewer.onDragStart($event)"
+  />
+
+  <c3-file-viewer-video
+    *ngIf="fileViewer.currentFile.type.startsWith('video')"
+  />
+
+  <c3-file-viewer-pdf
+    *ngIf="fileViewer.currentFile.type.startsWith('application/pdf')"
+    [fileViewer]="fileViewer"
+  />
+  <!-- Div below will be used to hide the 'ghost' image when dragging -->
+  <div></div>
+  <div class="spinner-container" *ngIf="fileViewer.loading">
+    <div class="spinner"></div>
+  </div>
+
+  <c3-file-viewer-actions [fileViewer]="fileViewer" />
+</div>

package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.spec.ts

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

package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.ts

@@ -0,0 +1,93 @@
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { C3FileViewerConfig } from '../../../models/file-viewer-config.model';
+import { CustomFileEvent } from '../../../models/custom-file-event.model';
+import { HttpClient } from '@angular/common/http';
+import { C3FileViewer } from '../../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer',
+  templateUrl: './c3-file-viewer.component.html',
+  styleUrls: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'c3-file-viewer',
+  },
+})
+export class C3FileViewerComponent implements OnInit {
+  @Input()
+  public screenHeightOccupied?: 0; // In Px
+
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Output()
+  public indexChange: EventEmitter<number> = new EventEmitter();
+
+  @Output()
+  public configChange: EventEmitter<C3FileViewerConfig> = new EventEmitter();
+
+  @Output()
+  public customFileEvent: EventEmitter<CustomFileEvent> = new EventEmitter();
+
+  constructor(
+    @Optional() @Inject('config') public moduleConfig: C3FileViewerConfig,
+    public _http: HttpClient
+  ) {}
+
+  ngOnInit() {
+    this.defineStyleHeight();
+
+    this.fileViewer.customFile$.subscribe((event) => {
+      this.customFileEvent.emit(event);
+    });
+
+    this.fileViewer.index$.subscribe((index) => {
+      this.indexChange.emit(index);
+    });
+
+    this.fileViewer.config$.subscribe((config) => {
+      this.configChange.emit(config);
+    });
+  }
+
+  @HostListener('mouseover')
+  onMouseOver() {
+    this.fileViewer.hovered = true;
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    this.fileViewer.hovered = false;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['screenHeightOccupied'] && this.fileViewer)
+      this.defineStyleHeight();
+  }
+
+  @HostListener('window:keyup.ArrowRight', ['$event'])
+  next(event: KeyboardEvent) {
+    this.fileViewer.nextImage(event);
+  }
+
+  @HostListener('window:keyup.ArrowLeft', ['$event'])
+  previous(event: KeyboardEvent) {
+    this.fileViewer.previousImage(event);
+  }
+
+  defineStyleHeight() {
+    this.fileViewer.styleHeight =
+      'calc(100% - ' + this.screenHeightOccupied + 'px)';
+  }
+}

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.spec.ts

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

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.ts

@@ -0,0 +1,34 @@
+import { Component, HostListener, Inject, Input } from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogConfig,
+} from '@angular/material/dialog';
+import { C3FileViewer } from '../../../models/file-viewer';
+import { C3FileViewerDialog } from './c3-file-viewer-dialog';
+
+@Component({
+  selector: 'c3-file-viewer-dialog',
+  template: ` <ng-content /> `,
+})
+export class C3FileViewerDialogComponent {
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Input()
+  public dialogConfig: Partial<MatDialogConfig> = {
+    panelClass: 'c3-file-viewer-dialog',
+    width: '80%',
+    height: '80%',
+  };
+
+  constructor(private _dialog: MatDialog) {}
+
+  @HostListener('click')
+  openDialog() {
+    this._dialog.open(C3FileViewerDialog, {
+      data: this.fileViewer,
+      ...this.dialogConfig,
+    });
+  }
+}

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.spec.ts

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

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.ts

@@ -0,0 +1,12 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { C3FileViewer } from '../../../models/file-viewer';
+
+@Component({
+  template: `
+    <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
+  `,
+})
+export class C3FileViewerDialog {
+  constructor(@Inject(MAT_DIALOG_DATA) public fileViewer: C3FileViewer) {}
+}

package/src/lib/c3-file-viewer/consts/default.config.ts

@@ -0,0 +1,41 @@
+import { C3FileViewerConfig } from '../models/file-viewer-config.model';
+
+export const DEFAULT_CONFIG: C3FileViewerConfig = {
+  btnContainerClass: 'btn-container',
+  btnClass: 'default',
+  btnSubClass: 'material-icons',
+  zoomFactor: 0.1,
+  containerBackgroundColor: '#00000000',
+  wheelZoom: false,
+  allowFullscreen: true,
+  allowKeyboardNavigation: true,
+  btnShow: {
+    zoomIn: true,
+    zoomOut: true,
+    rotateClockwise: true,
+    rotateCounterClockwise: true,
+    next: true,
+    prev: true,
+    reset: true,
+  },
+  btnIcons: {
+    zoomIn: {
+      text: 'zoom_in',
+    },
+    zoomOut: {
+      text: 'zoom_out',
+    },
+    rotateClockwise: {
+      text: 'rotate_right',
+    },
+    rotateCounterClockwise: {
+      text: 'rotate_left',
+    },
+    fullscreen: {
+      text: 'fullscreen',
+    },
+    reset: {
+      text: 'restore',
+    },
+  },
+};

package/src/lib/c3-file-viewer/directives/full-screen.directive.spec.ts

@@ -0,0 +1,11 @@
+import { ElementRef } from '@angular/core';
+import { FullScreenDirective } from './full-screen.directive';
+import { TestBed } from '@angular/core/testing';
+
+describe('FullScreenDirective', () => {
+  it('should create an instance', () => {
+    const el = TestBed.inject(ElementRef);
+    const directive = new FullScreenDirective(el);
+    expect(directive).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/directives/full-screen.directive.ts

@@ -0,0 +1,68 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+import { BehaviorSubject, debounceTime, filter, skip } from 'rxjs';
+
+@Directive({
+  selector: '[C3FullScreen], [c3-full-screen]',
+})
+export class FullScreenDirective {
+  @Input('c3Screenfull')
+  set fullscreenState(value: Boolean | null) {
+    this._fullscreenState.next(value?.valueOf() || false);
+  }
+
+  @Input('c3-full-screen')
+  set fullscreenStateSetter(value: Boolean | null) {
+    this.fullscreenState = value;
+  }
+
+  private _fullscreenState = new BehaviorSubject(false);
+
+  constructor(private el: ElementRef) {
+    this._fullscreenState
+      .pipe(
+        filter((value) => value !== null),
+        skip(2),
+        debounceTime(100)
+      )
+      .subscribe(() => {
+        this.defineState();
+      });
+  }
+
+  private defineState() {
+    if (this._fullscreenState.getValue()) {
+      const element: any = this.el.nativeElement;
+
+      const requestMethod =
+        element.requestFullscreen ||
+        element.webkitRequestFullScreen ||
+        element.mozRequestFullScreen ||
+        element.msRequestFullScreen;
+
+      if (requestMethod) {
+        // Native full screen.
+        requestMethod.call(element);
+      } else {
+        console.log('FullScreen Request Method Not Supported on this browser.');
+      }
+    } else {
+      const element: any = document;
+
+      const requestMethod =
+        element.cancelFullscreen ||
+        element.webkitExitFullscreen ||
+        element.webkitCancelFullScreen ||
+        element.mozCancelFullScreen ||
+        element.msExitFullScreen;
+
+      if (requestMethod) {
+        // Native Cancel full screen.
+        requestMethod.call(element);
+      } else {
+        console.log(
+          'FullScreen Cancel Request Method Not Supported on this browser.'
+        );
+      }
+    }
+  }
+}

package/src/lib/c3-file-viewer/models/custom-file-event.model.ts

@@ -0,0 +1,9 @@
+export class CustomFileEvent {
+  public name: string;
+  public fileUrl: string;
+
+  constructor(name: string, fileUrl: string) {
+    this.name = name;
+    this.fileUrl = fileUrl;
+  }
+}

package/src/lib/c3-file-viewer/models/file-metadata.ts

@@ -0,0 +1,13 @@
+import { Observable } from 'rxjs';
+
+export interface FileMetadata {
+  name: string;
+  size?: number;
+  type: string;
+  lastModified?: Date;
+  created?: Date;
+  extension?: string;
+  location: string;
+  objectUrl?: Observable<string>;
+  metadata?: Record<string, any>;
+}

package/src/lib/c3-file-viewer/models/file-viewer-config.model.ts

@@ -0,0 +1,53 @@
+import { HttpClient } from '@angular/common/http';
+
+export interface C3FileViewerConfig {
+  btnContainerClass?: string;
+  btnClass?: string;
+  btnSubClass?: string;
+  zoomFactor?: number;
+  containerBackgroundColor?: string;
+  wheelZoom?: boolean;
+  allowFullscreen?: boolean;
+  allowKeyboardNavigation?: boolean;
+  customClient?: HttpClient['get'];
+
+  minHeight?: number | string;
+  minWidth?: number | string;
+  width?: number | string;
+  maxHeight?: number | string;
+  height?: number | string;
+  maxWidth?: number | string;
+
+  btnShow?: {
+    zoomIn?: boolean;
+    zoomOut?: boolean;
+    rotateClockwise?: boolean;
+    rotateCounterClockwise?: boolean;
+    next?: boolean;
+    prev?: boolean;
+    reset?: boolean;
+  };
+
+  btnIcons?: {
+    zoomIn?: MultiBtn['btn'];
+    zoomOut?: MultiBtn['btn'];
+    rotateClockwise?: MultiBtn['btn'];
+    rotateCounterClockwise?: MultiBtn['btn'];
+    next?: MultiBtn['btn'];
+    prev?: MultiBtn['btn'];
+    fullscreen?: MultiBtn['btn'];
+    reset?: MultiBtn['btn'];
+  };
+
+  customBtns?: Array<{
+    name: string;
+    icon: MultiBtn['btn'];
+  }>;
+}
+
+interface MultiBtn {
+  btn: {
+    classes?: string;
+    text?: string;
+  };
+}