1
Fork 0
tildes-reextended/source/ts/scripts/user-labels/label-form.ts

145 lines
4.0 KiB
TypeScript

import {Except} from 'type-fest';
import {
appendStyleAttribute,
UserLabel,
log,
isColorBright,
querySelector,
isValidTildesUsername
} from '../../utilities';
import {themeColors} from '../../theme-colors';
export function getLabelForm(): HTMLFormElement {
return querySelector('#trx-user-label-form');
}
export function showLabelForm(label: HTMLSpanElement): HTMLFormElement {
const labelBounds: DOMRect = label.getBoundingClientRect();
const labelForm = getLabelForm();
const horizontalOffset: number = labelBounds.x + window.scrollX;
const verticalOffset: number =
labelBounds.y + labelBounds.height + 4 + window.scrollY;
appendStyleAttribute(
labelForm,
`left: ${horizontalOffset}px; top: ${verticalOffset}px;`
);
labelForm.classList.remove('trx-hidden');
return labelForm;
}
export function hideLabelForm(): HTMLFormElement {
const labelForm = getLabelForm();
labelForm.classList.add('trx-hidden');
return labelForm;
}
export function setLabelFormTitle(title: string): void {
const labelTitle: HTMLLabelElement = querySelector(
'#trx-user-label-form > div:first-child > label:first-child'
);
labelTitle.textContent = title;
}
export function setLabelFormUserID(id: number): void {
getLabelForm().dataset.trxUserLabelId = String(id);
}
export function setLabelFormUsername(username: string): void {
const usernameInput: HTMLInputElement = querySelector(
'#trx-user-label-form-username'
);
usernameInput.value = username.toLowerCase();
}
export function setLabelFormPriority(priority: number): void {
const priorityInput: HTMLInputElement = querySelector(
'#trx-user-label-priority'
);
priorityInput.value = String(priority);
}
export function setLabelFormColor(color: string): void {
const colorInput: HTMLInputElement = querySelector(
'#trx-user-label-form-color > input'
);
colorInput.value = color;
}
export function setLabelFormText(text: string): void {
const textInput: HTMLInputElement = querySelector(
'#trx-user-label-input > input'
);
textInput.value = text;
}
export function getLabelFormValues(): Except<UserLabel, 'id'> | undefined {
const usernameInput: HTMLInputElement = querySelector(
'#trx-user-label-form-username'
);
const priorityInput: HTMLInputElement = querySelector(
'#trx-user-label-priority'
);
const colorInput: HTMLInputElement = querySelector(
'#trx-user-label-form-color > input'
);
const textInput: HTMLInputElement = querySelector(
'#trx-user-label-input > input'
);
const data: Except<UserLabel, 'id'> = {
color: colorInput.value.toLowerCase(),
priority: Number(priorityInput.value),
text: textInput.value,
username: usernameInput.value.toLowerCase()
};
if (!isValidTildesUsername(data.username)) {
log(`Invalid Tildes username detected: ${data.username}`);
usernameInput.classList.add('trx-invalid');
return undefined;
}
usernameInput.classList.remove('trx-invalid');
return data;
}
export function getLabelFormID(): number | undefined {
const labelForm: HTMLFormElement = getLabelForm();
const id: string | null = labelForm.getAttribute('data-trx-user-label-id');
if (id === null) {
return undefined;
}
return Number(id);
}
export function updatePreview(color?: string, text?: string): void {
if (typeof color === 'undefined') {
const labelColorInput: HTMLInputElement = querySelector(
'#trx-user-label-form-color > input'
);
color = labelColorInput.value;
}
if (typeof text === 'undefined') {
const labelTextInput: HTMLInputElement = querySelector(
'#trx-user-label-input > input'
);
text = labelTextInput.value;
}
const labelPreview: HTMLDivElement = querySelector('#trx-user-label-preview');
labelPreview.setAttribute(
'style',
`background-color: ${color}; ` +
`border-color: var(${themeColors.foregroundSecondary});`
);
labelPreview.firstElementChild!.textContent = text;
if (isColorBright(color.trim())) {
labelPreview.classList.add('trx-bright');
} else {
labelPreview.classList.remove('trx-bright');
}
}