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); } }