@colijnit/corecomponents_v12 255.1.1 → 255.1.2

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

@@ -1,128 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,392 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,77 +0,0 @@
-import {CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer";
-import {Mesh, PlaneGeometry, 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 PlaneGeometry(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;
-    }
-  }
-}