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

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import generatePathData from '../../helpers/generatePathData';
import {FormatterArguments, i18n, LangPackKey} from '../../lib/langPack';

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

  constructor(appendTo: HTMLElement, private options: {
    icon?: string,
    header: LangPackKey,
    headerArgs?: FormatterArguments,
    subtitle?: LangPackKey,
    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');

    let dropIcon: HTMLElement;
    if(options.icon) {
      dropIcon = document.createElement('div');
      dropIcon.classList.add('drop-icon', 'tgico-' + options.icon);
    }

    const dropHeader = document.createElement('div');
    dropHeader.classList.add('drop-header');
    dropHeader.append(i18n(options.header, options.headerArgs));

    let dropSubtitle: HTMLElement;
    if(options.subtitle) {
      dropSubtitle = document.createElement('div');
      dropSubtitle.classList.add('drop-subtitle');
      dropSubtitle.append(i18n(options.subtitle));
    }

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

    this.container.append(...[this.outlineWrapper, dropIcon, dropHeader, dropSubtitle].filter(Boolean));
    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);
  }
}