tweb-i2p/src/components/chat/dragAndDrop.ts

import { generatePathData } from "../../helpers/dom";

export default class ChatDragAndDrop {
  container: HTMLDivElement;
  svg: SVGSVGElement;
  outlineWrapper: HTMLDivElement;
  path: SVGPathElement;

  constructor(appendTo: HTMLElement, private options: {
    icon: string,
    header: string,
    subtitle: string,
    onDrop: (e: DragEvent) => void
  }) {
    this.container = document.createElement('div');
    this.container.classList.add('drop', 'z-depth-1');

    this.outlineWrapper = document.createElement('div');
    this.outlineWrapper.classList.add('drop-outline-wrapper');

    this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    this.svg.classList.add('drop-outline');

    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    this.path.classList.add('drop-outline-path');

    const dropIcon = document.createElement('div');
    dropIcon.classList.add('drop-icon', 'tgico-' + options.icon);

    const dropHeader = document.createElement('div');
    dropHeader.classList.add('drop-header');
    dropHeader.innerHTML = options.header;//'Drop files here to send them';

    const dropSubtitle = document.createElement('div');
    dropSubtitle.classList.add('drop-subtitle');
    dropSubtitle.innerHTML = options.subtitle;//'without compression';

    this.svg.append(this.path);
    this.outlineWrapper.append(this.svg);

    this.container.append(this.outlineWrapper, dropIcon, dropHeader, dropSubtitle);
    appendTo.append(this.container);

    this.container.addEventListener('dragover', this.onDragOver);
    this.container.addEventListener('dragleave', this.onDragLeave);
    this.container.addEventListener('drop', this.onDrop);
  }

  onDragOver = (e: DragEvent) => {
    this.container.classList.add('is-dragover');
    //SetTransition(this.container, 'is-dragover', true, 500);
  };

  onDragLeave = (e: DragEvent) => {
    this.container.classList.remove('is-dragover');
    //SetTransition(this.container, 'is-dragover', false, 500);
  };

  onDrop = (e: DragEvent) => {
    this.options.onDrop(e);
  };

  destroy() {
    delete this.options;
    this.container.remove();
    this.container.removeEventListener('dragover', this.onDragOver);
    this.container.removeEventListener('dragleave', this.onDragLeave);
    this.container.removeEventListener('drop', this.onDrop);
  }

  setPath() {
    const rect = this.outlineWrapper.getBoundingClientRect();
    this.svg.setAttributeNS(null, 'preserveAspectRatio', 'none');
    this.svg.setAttributeNS(null, 'viewBox', `0 0 ${rect.width} ${rect.height}`);
    this.svg.setAttributeNS(null, 'width', `${rect.width}`);
    this.svg.setAttributeNS(null, 'height', `${rect.height}`);

    const radius = 10;
    //const strokeWidth = 2;
    const sizeX = rect.width - radius;
    const sizeY = rect.height - radius;
    const pos = radius / 2;
    const d = generatePathData(pos, pos, sizeX, sizeY, radius, radius, radius, radius);
    this.path.setAttributeNS(null, 'd', d);
  }
}