Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.9 KiB
86 lines
2.9 KiB
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); |
|
} |
|
} |