60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import {Component, HostListener, inject, input} from '@angular/core';
|
|
import {TuiAppearance, TuiButton, TuiGroup, TuiIcon, TuiScrollbarDirective} from '@taiga-ui/core';
|
|
import {TranslatePipe} from '@ngx-translate/core';
|
|
import {ServiceManager} from '../../../service-manager';
|
|
import {MessageBoxViewModel} from './message-box-viewmodel';
|
|
import {FormsModule} from '@angular/forms';
|
|
|
|
@Component({
|
|
selector: 'message-box',
|
|
imports: [
|
|
TuiAppearance,
|
|
TranslatePipe,
|
|
TuiScrollbarDirective,
|
|
TuiGroup,
|
|
TuiIcon,
|
|
TuiButton,
|
|
FormsModule
|
|
],
|
|
templateUrl: './message-box.html',
|
|
styleUrl: './message-box.scss',
|
|
})
|
|
export class MessageBox {
|
|
viewModel = input.required<MessageBoxViewModel>()
|
|
|
|
textareaHeight = 25
|
|
messageBoxRadius = 200
|
|
|
|
private dragCounter = 0;
|
|
isDraggingOverWindow = false;
|
|
|
|
@HostListener('window:dragenter', ['$event'])
|
|
onDragEnter(event: DragEvent) {
|
|
event.preventDefault();
|
|
this.dragCounter++;
|
|
|
|
if (this.dragCounter === 1) {
|
|
this.isDraggingOverWindow = true;
|
|
console.log("Drag entered the window area");
|
|
}
|
|
}
|
|
|
|
@HostListener('window:dragleave', ['$event'])
|
|
onDragLeave(event: DragEvent) {
|
|
event.preventDefault();
|
|
this.dragCounter--;
|
|
|
|
if (this.dragCounter === 0) {
|
|
this.isDraggingOverWindow = false;
|
|
console.log("Drag left the window completely");
|
|
}
|
|
}
|
|
|
|
onTextAreaInput(e: HTMLTextAreaElement) {
|
|
const calculatedHeight = e.value.split(/\r?\n/).length * 25
|
|
const calculatedRadius = (200 - this.textareaHeight)
|
|
this.textareaHeight = calculatedHeight > 180 ? 180 : calculatedHeight
|
|
this.messageBoxRadius = calculatedRadius < 30 ? 30 : calculatedRadius
|
|
}
|
|
}
|