@colijnit/corecomponents_v12 12.2.23 → 12.2.25

package/projects/corecomponents/src/lib/components/carousel/carousel.component.ts

@@ -0,0 +1,128 @@
+import {Component, ContentChildren, ElementRef, HostBinding, OnDestroy, ViewChild, ViewEncapsulation} from '@angular/core';
+import 'hammerjs';
+
+@Component({
+  selector: 'co-carousel',
+  template: `
+    <div class="carousel-wrapper" #container (swipeleft)="handleButtonRightClick()" (swiperight)="handleButtonLeftClick()">
+      <ng-content></ng-content>
+    </div>
+    <div class="carousel-navigate-button left">
+      <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateLeft" (click)="handleButtonLeftClick()">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+          <path
+            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
+        </svg>
+      </div>
+    </div>
+    <div class="carousel-navigate-button right">
+      <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateRight" (click)="handleButtonRightClick()">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
+        </svg>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CarouselComponent implements OnDestroy {
+  @ViewChild('container', { read: ElementRef }) set containerChild(child) {
+    if (child) {
+      this.container = child;
+      this._checkNavigationButtons();
+      this.ro.observe(this.container.nativeElement);
+    }
+  }
+
+  @ContentChildren('carouselItem', { read: ElementRef, descendants: true }) set contentChildren(content) {
+    if (content) {
+      this.carouselItems = content.toArray();
+    }
+    this._checkNavigationButtons();
+  }
+
+  @HostBinding('class.co-carousel')
+  public showClass() {
+    return true;
+  }
+
+  public carouselItems: ElementRef[];
+  public canNavigateLeft: boolean = false;
+  public canNavigateRight: boolean = false;
+  public container: ElementRef;
+  public activeIndex: number = 0;
+  public ro: ResizeObserver = new ResizeObserver(entries => {
+    this._checkNavigationButtons();
+  });
+
+  private _disableButtons: boolean = false;
+
+  ngOnDestroy(): void {
+    for (let i = this.carouselItems.length - 1; i >= 0; i--) {
+      this.carouselItems[i] = undefined;
+    }
+    this.container = undefined;
+  }
+
+  public handlePress(event): void {
+    console.log(event);
+  }
+
+  public handleSwipe(event): void {
+    const x = Math.abs(event.deltaX) > 40 ? (event.deltaX > 0 ? 'right' : 'left'):'';
+    const y = Math.abs(event.deltaY) > 40 ? (event.deltaY > 0 ? 'down' : 'up') : '';
+
+    console.log(`${x} ${y}`);
+  }
+
+  public async handleButtonLeftClick(): Promise<void> {
+    this._navigate();
+  }
+
+  public async handleButtonRightClick(): Promise<void> {
+    this._navigate(true);
+  }
+
+  private async _navigate(right: boolean = false): Promise<void> {
+    if (this._disableButtons) {
+      return;
+    }
+    this._disableButtons = true;
+    const wantedIndex: number = this.activeIndex + (right ? 1 : -1);
+    const left: number = this._getLeftPositionFromActiveItem(wantedIndex);
+    if (left !== null) {
+      if (await this._scrollWrapper(left)) {
+        this.activeIndex = wantedIndex;
+      }
+    }
+    this._checkNavigationButtons();
+    this._disableButtons = false;
+  }
+
+  private _checkNavigationButtons(): void {
+    if (this.container && this.container.nativeElement) {
+      this.canNavigateLeft = this.container.nativeElement.scrollLeft > 0;
+      this.canNavigateRight = this.container.nativeElement.scrollLeft + this.container.nativeElement.clientWidth < this.container.nativeElement.scrollWidth;
+    }
+  }
+
+  private _getLeftPositionFromActiveItem(index: number): number {
+    const element = this.carouselItems[index];
+    return element ? element.nativeElement.offsetLeft : null;
+  }
+
+  private async _scrollWrapper(left: number): Promise<boolean> {
+    return new Promise((resolve: Function) => {
+      if (this.container && this.container.nativeElement) {
+        const oldScroll: number = this.container.nativeElement.scrollLeft;
+        this.container.nativeElement.scrollLeft = left;
+        setTimeout(() => {
+          return resolve(oldScroll !== this.container.nativeElement.scrollLeft);
+        }, 400)
+      } else {
+        return resolve(false);
+      }
+    });
+  }
+}

package/projects/corecomponents/src/lib/components/carousel/carousel.module.ts

@@ -0,0 +1,28 @@
+import {Injectable, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CarouselComponent} from './carousel.component';
+import {HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule} from '@angular/platform-browser';
+
+export class CarouselHammerConfig extends HammerGestureConfig {
+  overrides = <any> {
+    swipe: { direction: Hammer.DIRECTION_HORIZONTAL },
+  };
+}
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HammerModule
+  ],
+  declarations: [
+    CarouselComponent
+  ],
+  exports: [
+    CarouselComponent
+  ],
+  providers: [
+    {provide: HAMMER_GESTURE_CONFIG, useClass: CarouselHammerConfig},
+  ]
+})
+export class CarouselModule {
+}

package/projects/corecomponents/src/lib/components/carousel-3d/carousel-3d.component.ts

@@ -0,0 +1,392 @@
+import {
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from "@angular/core";
+import {
+  AmbientLight,
+  Box3,
+  Color,
+  Fog,
+  Mesh,
+  MeshPhongMaterial,
+  PerspectiveCamera,
+  PlaneGeometry,
+  Scene,
+  SpotLight,
+  Vector2,
+  Vector3,
+  WebGLRenderer
+} from "three";
+import {CarouselItem} from "./carouselItem";
+import {CSS3DObject, CSS3DRenderer} from "three/examples/jsm/renderers/CSS3DRenderer";
+import * as TWEEN from "@tweenjs/tween.js";
+
+@Component({
+  selector: "co-carousel-3d",
+  template: `
+    <div class="carousel-3d-canvas-wrapper" #canvasContainer>
+      <div class="carousel-wrapper" #carouselWrapper>
+        <div class="carousel-navigate-button left">
+          <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateLeft" (click)="handleButtonLeftClick()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
+            </svg>
+          </div>
+        </div>
+        <div class="carousel-navigate-button right">
+          <div class="carousel-navigate-button-wrapper" *ngIf="canNavigateRight" (click)="handleButtonRightClick()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class Carousel3dComponent implements AfterViewInit, OnDestroy {
+  @ViewChild("canvasContainer", {read: ElementRef})
+  public canvasContainer: ElementRef;
+
+  @ViewChild("carouselWrapper", {read: ElementRef})
+  public carouselWrapper: ElementRef;
+
+  @ContentChildren("carouselItem", {read: ElementRef, descendants: true}) set children(children) {
+    this._elementsCreated = false;
+    this._tileElements = children.toArray();
+    this._buildCarousel();
+  }
+
+  @Input()
+  public tileWidth: number;
+
+  @Input()
+  public tileHeight: number;
+
+  @Input()
+  public cameraHeight: number = 50;
+
+  @Input()
+  public shadow: boolean = false;
+
+  @Input()
+  public selectedIndex: number = 0;
+
+  @Output()
+  public indexSelected: EventEmitter<number> = new EventEmitter<number>();
+
+  @HostBinding("class.co-carousel-3d")
+  public showClass(): boolean {
+    return true;
+  }
+
+  private _camera: PerspectiveCamera;
+  private _cameraZoom: number = 0;
+  private _backgroundColor = 0xffffff;
+  private _sceneCss: Scene;
+  private _scene: Scene;
+  private _rendererCss: CSS3DRenderer;
+  private _renderer: WebGLRenderer;
+  private _ambientLight: boolean = true;
+  private _tileSize: Vector2 = new Vector2();
+  private _tileMargin: number = 20;
+  private _targetPositions = [];
+  private _tileElements: ElementRef[] = [];
+  private _tileOffset = 0;
+  private _tiles3D: CarouselItem[] = [];
+  private _planeColor = 0xffffff;
+  private _planeHeight = -46;
+  private _spotLightPosition: Vector3 = new Vector3(0, 250, -200);
+  private _fullCircle: boolean = false;
+  private _initialized: boolean = false;
+  private _elementsCreated: boolean = false;
+
+  public canNavigateLeft: boolean = false;
+  public canNavigateRight: boolean = false;
+
+  ngAfterViewInit(): void {
+      this._buildCarousel();
+  }
+
+  ngOnDestroy(): void {
+    this.canvasContainer = undefined;
+    this.carouselWrapper = undefined;
+    this._clearScenes();
+  }
+
+  public handleButtonLeftClick(): void {
+    this._tileOffset -= 1;
+    this._rotate(400);
+  }
+
+  public handleButtonRightClick(): void {
+    this._tileOffset += 1;
+    this._rotate(400);
+  }
+
+  private _buildCarousel(): void {
+    if (!this._initialized) {
+      this._init();
+    }
+    if (this._initialized && !this._elementsCreated) {
+      this._createTiles();
+    }
+    this._checkNavigationButtons();
+    this._resizeCanvasToDisplaySize();
+  }
+
+  private _init(): void {
+    if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
+      return;
+    }
+
+    this._initCamera();
+    this._initScene();
+    this._initRenderer();
+
+    if (this.shadow) {
+      const geometry = new PlaneGeometry(10000, 10000);
+      const material = new MeshPhongMaterial({color: this._planeColor, shininess: 100});
+      const plane = new Mesh(geometry, material);
+      plane.receiveShadow = true;
+      plane.rotation.x = -Math.PI / 2;
+      plane.position.y = this._planeHeight;
+      this._scene.add(plane);
+
+      const spotLight = new SpotLight(0xffffff, 0.5);
+      spotLight.position.copy(this._spotLightPosition);
+      spotLight.castShadow = true;
+      spotLight.shadow.mapSize.width = 512;
+      spotLight.shadow.mapSize.height = 512;
+      spotLight.shadow.camera.near = 50;
+      spotLight.shadow.camera.far = 1200;
+      spotLight.shadow.camera.fov = 30;
+      spotLight.penumbra = 1;
+      this._scene.add(spotLight);
+    }
+
+    this.carouselWrapper.nativeElement.appendChild(this._rendererCss.domElement);
+    this.canvasContainer.nativeElement.appendChild(this.carouselWrapper.nativeElement);
+    this.canvasContainer.nativeElement.appendChild(this._renderer.domElement);
+
+    this._render();
+    this._animate();
+
+    window.addEventListener("resize", () => {
+      this._resizeCanvasToDisplaySize();
+    }, false);
+
+    this._initialized = true;
+  }
+
+  private _initCamera(): void {
+    this._camera = new PerspectiveCamera(50, this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight, 1, 10000);
+    this._camera.position.z = 600 - this._cameraZoom;
+    this._camera.position.y = this.cameraHeight;
+    this._camera.lookAt(new Vector3());
+  }
+
+  private _initScene(): void {
+    this._sceneCss = new Scene();
+    this._scene = new Scene();
+    this._scene.background = new Color(this._backgroundColor);
+
+    if (this._ambientLight) {
+      const light = new AmbientLight(0xaaaaaa); // soft white light
+      this._scene.add(light);
+
+      this._scene.fog = new Fog(this._backgroundColor, 70, 2500);
+    }
+  }
+
+  private _initRenderer(): void {
+    this._rendererCss = new CSS3DRenderer();
+    this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+    this._rendererCss.domElement.style.position = "absolute";
+
+    this._renderer = new WebGLRenderer({antialias: true});
+    this._renderer.setPixelRatio(window.devicePixelRatio);
+    this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+    this._renderer.shadowMap.enabled = true;
+  }
+
+  private _disposeObject(obj: Mesh | CSS3DObject): void {
+    if (obj instanceof Mesh) {
+      if (obj.geometry) {
+        obj.geometry.dispose();
+      }
+      if (obj.material) {
+        Array.isArray(obj.material)? obj.material.map(m => m.dispose()) : obj.material.dispose();
+      }
+      obj = undefined;
+    } else {
+      obj.element = undefined;
+      obj = undefined;
+    }
+  }
+
+  private _clearScenes(): void {
+    const meshes: Mesh[] = this._tiles3D.map(t => t.mesh);
+    const cssObjs: CSS3DObject[] = this._tiles3D.map(t => t.object);
+    this._scene.remove(...meshes);
+    meshes.map(m => this._disposeObject(m));
+    meshes.length = 0;
+    this._sceneCss.remove(...cssObjs);
+    cssObjs.map(o => this._disposeObject(o));
+    cssObjs.length = 0;
+    this._tiles3D.length = 0;
+    this._targetPositions.length = 0;
+  }
+
+  private _createTiles(): void {
+    this._clearScenes();
+    this._tileSize.x = this.tileWidth;
+    this._tileSize.y = this.tileHeight;
+    const tileWidth = this._tileSize.x + this._tileMargin;
+    const numItems: number = Math.max(this._tileElements.length, 20);
+    this._fullCircle = this._tileElements.length >= 20;
+    let angleTileDeg: number = 360 / numItems;
+    const circumference: number = numItems * tileWidth;
+    const radius: number = circumference / (Math.PI * 2);
+    const y = this.shadow ? 75 : 45;
+
+    const len: number = numItems;
+    let angleDeg: number = 90;
+    const position: Vector3 = new Vector3();
+    for (var i = 0; i < len; i++) {
+      const angle = angleDeg * ( Math.PI / 180 ); // Radians
+      const x = radius * Math.cos(angle);
+      const z = -radius + radius * Math.sin(angle);
+      position.set(x, y, z);
+      this._targetPositions.push(position.clone());
+      if (i < this._tileElements.length) {
+        const tile: CarouselItem = new CarouselItem({tileSize: this._tileSize}, i, (idx: number) => this._rotateTo(idx));
+        tile.setPosition(position);
+        tile.setContent(this._tileElements[i].nativeElement);
+        this._scene.add(tile.mesh);
+        this._sceneCss.add(tile.object);
+        this._tiles3D.push(tile);
+      }
+      angleDeg = angleDeg - angleTileDeg; // CW instead of CCW
+    }
+    this._adjustCameraZoom();
+    this._tileOffset = this.selectedIndex;
+    this._rotate(0);
+    this._render();
+  }
+
+  private _adjustCameraZoom(): void {
+    if (this._tiles3D.length === 0) {
+      return;
+    }
+    const object = this._tiles3D[0].mesh;
+    // offset = offset || 1.15;
+
+    // get bounding box of object - this will be used to setup controls and camera
+    const boundingBox = new Box3();
+    boundingBox.setFromObject(object);
+    const center: Vector3 = new Vector3();
+    boundingBox.getCenter(center);
+    const size: Vector3 = new Vector3();
+    boundingBox.getSize(size);
+
+    // get the max side of the bounding box (fits to width OR height as needed )
+    const maxDim = Math.max(size.x, size.y, size.z);
+    this._camera.position.z = Math.abs((maxDim / 2) * Math.atan(this._camera.fov / 2));
+    this._camera.lookAt(center);
+  }
+
+  private _checkNavigationButtons(): void {
+    const currentIdx: number = this._getSelectedIndex();
+    this.canNavigateLeft = (currentIdx > 0) || this._fullCircle;
+    this.canNavigateRight = (currentIdx < this._tileElements.length - 1) || this._fullCircle;
+  }
+
+  private _animate() {
+    TWEEN.update();
+    setTimeout(() => {
+      this._renderer.setAnimationLoop(() => this._animate());
+    }, 200);
+  }
+
+  private _getSelectedIndex() {
+    return Math.max(0, Math.min(this.selectedIndex, this._tileElements.length - 1));
+  }
+
+  private _rotate(duration) {
+    TWEEN.removeAll();
+
+    for (let i: number = 0; i < this._tiles3D.length; i++) {
+      const tile = this._tiles3D[i];
+
+      if (Math.abs(this._tileOffset) > this._targetPositions.length) { // full circle
+        this._tileOffset = this._tileOffset > 0 ? 1 : -1;
+      }
+
+      let positionIdx: number = i - this._tileOffset;
+      if (positionIdx > this._targetPositions.length - 1) {
+        positionIdx = positionIdx - this._targetPositions.length;
+      } else if (positionIdx < 0) {
+        positionIdx = this._targetPositions.length + positionIdx;
+      }
+      const target = this._targetPositions[positionIdx];
+
+      new TWEEN.Tween(tile.object.position)
+        .to(target, duration)
+        .easing(TWEEN.Easing.Quartic.Out)
+        .start();
+      new TWEEN.Tween(tile.mesh.position)
+        .to(target, duration)
+        .easing(TWEEN.Easing.Quartic.Out)
+        .start();
+    }
+
+    new TWEEN.Tween()
+      .to({}, duration * 2)
+      .onUpdate(() => {
+        this._render();
+      })
+      .start();
+
+    this.selectedIndex = this._tileOffset;
+    this._checkNavigationButtons();
+    this.indexSelected.next(this._getSelectedIndex());
+  }
+
+  private _rotateTo(index: number) {
+    const current = this._getSelectedIndex();
+    this._tileOffset += index - current;
+    this._rotate(800);
+  }
+
+  private _resizeCanvasToDisplaySize() {
+    setTimeout(() => {
+      if (!this.canvasContainer || !this.canvasContainer.nativeElement) {
+        return;
+      }
+      this._camera.aspect = this.canvasContainer.nativeElement.clientWidth / this.canvasContainer.nativeElement.clientHeight;
+      this._camera.updateProjectionMatrix();
+      this._rendererCss.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+      this._renderer.setSize(this.canvasContainer.nativeElement.clientWidth, this.canvasContainer.nativeElement.clientHeight);
+      this._render();
+    });
+  }
+
+  private _render() {
+    this._rendererCss.render(this._sceneCss, this._camera);
+    this._renderer.render(this._scene, this._camera);
+  }
+
+}

package/projects/corecomponents/src/lib/components/carousel-3d/carousel-3d.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {Carousel3dComponent} from "./carousel-3d.component";
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    Carousel3dComponent
+  ],
+  exports: [
+    Carousel3dComponent
+  ]
+})
+export class Carousel3dModule {
+}

package/projects/corecomponents/src/lib/components/carousel-3d/carouselItem.ts

@@ -0,0 +1,77 @@
+import {CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer";
+import {Mesh, PlaneBufferGeometry, Vector2, Vector3} from "three";
+
+export class CarouselItem {
+
+  public object: CSS3DObject;
+  public mesh: Mesh;
+  public index: number;
+
+  private _options: {
+    tileSize: Vector2,
+    tileBackgroundColor: any,
+    textSelectable: boolean,
+    tileBorderColor: any
+  };
+  private _element: HTMLDivElement;
+
+  constructor(options, index, onClick) {
+    this._options = options || {};
+    this.index = index;
+
+    const width = this._options.tileSize?.x || 0;
+    const height = this._options.tileSize?.y || 0;
+
+    this._element = document.createElement('div');
+    // this._element.style.backgroundColor = this._options.tileBackgroundColor;
+    this._element.style.width = width + "px";
+    this._element.style.height = height + "px";
+
+    this._element.addEventListener("click", () => {
+      if (onClick) {
+        onClick(this.index);
+      }
+    }, false);
+
+    this.object = new CSS3DObject(this._element);
+
+    const geometry = new PlaneBufferGeometry(width, height);
+    this.mesh = new Mesh(geometry, options.tileMaterial);
+    this.mesh.castShadow = true;
+  }
+
+  public setPosition(position: Vector3): void {
+    if (this.mesh) {
+      this.mesh.position.copy(position);
+    }
+    if (this.object) {
+      this.object.position.copy(position);
+    }
+  }
+
+  public setContent(content): void {
+    if (this._element) {
+
+      // remove any exising tile content before setting new content
+      while (this._element.lastElementChild) {
+        this._element.removeChild(this._element.lastElementChild);
+      }
+
+      try {
+        this._element.appendChild(content);
+      }
+      catch (err) {
+      }
+    }
+  }
+
+  public setVisible(visible: boolean): void {
+    if (this.mesh) {
+      this.mesh.visible = visible;
+    }
+
+    if (this.object) {
+      this.object.visible = visible;
+    }
+  }
+}