92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
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);
|
|
}
|
|
} |