1
Fork 0
tildes-reextended/source/content-scripts/features/user-labels.tsx

428 lines
12 KiB
TypeScript
Raw Normal View History

2023-06-23 10:52:03 +00:00
import debounce from "debounce";
import {Component, render} from "preact";
import {
type UserLabelsData,
createValueUserLabel,
saveUserLabels,
2023-06-27 11:51:04 +00:00
} from "../../storage/exports.js";
import {
createElementFromString,
isColorBright,
log,
querySelectorAll,
themeColors,
2023-06-23 10:52:03 +00:00
} from "../../utilities/exports.js";
type Props = {
2023-06-23 10:52:03 +00:00
anonymizeUsernamesEnabled: boolean;
2023-06-24 12:00:27 +00:00
userLabels: UserLabelsData;
};
type State = {
color: string;
selectedColor: string;
hidden: boolean;
id: number | undefined;
priority: number;
target: HTMLElement | undefined;
text: string;
username: string;
};
export class UserLabelsFeature extends Component<Props, State> {
constructor(props: Props) {
super(props);
const selectedColor = window
.getComputedStyle(document.body)
.getPropertyValue(themeColors[1].value)
.trim();
this.state = {
color: selectedColor,
hidden: true,
id: undefined,
2023-06-23 10:52:03 +00:00
text: "",
priority: 0,
selectedColor,
target: undefined,
2023-06-23 10:52:03 +00:00
username: "",
};
2023-06-23 10:52:03 +00:00
const count = this.addLabelsToUsernames(querySelectorAll(".link-user"));
log(`User Labels: Initialized for ${count} user links.`);
}
hide = () => {
this.setState({hidden: true});
};
addLabelsToUsernames = (elements: HTMLElement[], onlyID?: number): number => {
2023-06-23 10:52:03 +00:00
const {userLabels} = this.props;
const inTopicListing = document.querySelector(".topic-listing") !== null;
// Sort the labels by priority or alphabetically, so 2 labels with the same
// priority will be sorted alphabetically.
2023-06-24 12:00:27 +00:00
const sortedLabels = userLabels.sort((a, b): number => {
if (inTopicListing) {
// If we're in the topic listing sort with highest priority first.
if (a.value.priority !== b.value.priority) {
return b.value.priority - a.value.priority;
}
} else if (a.value.priority !== b.value.priority) {
// If we're not in the topic listing, sort with lowest priority first.
// We will add elements backwards, so the first label will be
// behind all the other labels.
return a.value.priority - b.value.priority;
}
return b.value.text.localeCompare(a.value.text);
});
for (const element of elements) {
let username: string = element.textContent!.replace(/@/g, "");
2023-06-23 10:52:03 +00:00
if (this.props.anonymizeUsernamesEnabled) {
username = element.dataset.trxUsername ?? username;
}
const userLabels = sortedLabels.filter(
({value}) =>
value.username.toLowerCase() === username.toLowerCase() &&
(onlyID === undefined ? true : value.id === onlyID),
);
2023-06-23 10:52:03 +00:00
const addLabel = (
<span
class="trx-user-label-add"
2023-06-23 10:52:03 +00:00
onClick={(event: MouseEvent) => {
this.addLabelHandler(event, username);
}}
>
[+]
</span>
2023-06-23 10:52:03 +00:00
);
if (!inTopicListing && onlyID === undefined) {
2023-06-23 10:52:03 +00:00
const addLabelPlaceholder = document.createElement("span");
element.after(addLabelPlaceholder);
render(addLabel, element.parentElement!, addLabelPlaceholder);
}
if (userLabels.length === 0 && onlyID === undefined) {
if (
inTopicListing &&
(element.nextElementSibling === null ||
2023-06-23 10:52:03 +00:00
!element.nextElementSibling.className.includes("trx-user-label"))
) {
2023-06-23 10:52:03 +00:00
const addLabelPlaceholder = document.createElement("span");
element.after(addLabelPlaceholder);
render(addLabel, element.parentElement!, addLabelPlaceholder);
}
continue;
}
for (const userLabel of userLabels) {
const bright = isColorBright(userLabel.value.color.trim())
2023-06-23 10:52:03 +00:00
? "trx-bright"
: "";
const label = createElementFromString<HTMLSpanElement>(`<span
data-trx-label-id="${userLabel.value.id}"
class="trx-user-label ${bright}"
>
${userLabel.value.text}
</span>`);
2023-06-23 10:52:03 +00:00
label.addEventListener("click", (event: MouseEvent) => {
this.editLabelHandler(event, userLabel.value.id);
});
element.after(label);
label.setAttribute(
"style",
`background-color: ${userLabel.value.color};`,
);
// If we're in the topic listing, stop after adding 1 label.
if (inTopicListing) {
break;
}
}
}
return elements.length;
};
addLabelHandler = (event: MouseEvent, username: string) => {
event.preventDefault();
const target = event.target as HTMLElement;
if (this.state.target === target && !this.state.hidden) {
this.hide();
} else {
const selectedColor = window
.getComputedStyle(document.body)
.getPropertyValue(themeColors[1].value)
.trim();
this.setState({
hidden: false,
target,
username,
color: selectedColor,
id: undefined,
2023-06-23 10:52:03 +00:00
text: "",
priority: 0,
selectedColor,
});
}
};
editLabelHandler = (event: MouseEvent, id: number) => {
event.preventDefault();
const target = event.target as HTMLElement;
if (this.state.target === target && !this.state.hidden) {
this.hide();
} else {
const label = this.props.userLabels.find(({value}) => value.id === id);
if (label === undefined) {
log(
2023-06-23 10:52:03 +00:00
"User Labels: Tried to edit label with ID that could not be found.",
true,
);
return;
}
this.setState({
hidden: false,
target,
color: label.value.color,
id: label.value.id,
priority: label.value.priority,
text: label.value.text,
username: label.value.username,
});
}
};
colorChange = (event: Event) => {
2023-06-25 10:19:18 +00:00
const color = (event.target as HTMLInputElement).value.toLowerCase();
// If the color was changed through the preset values, also change the
// selected color state.
2023-06-23 10:52:03 +00:00
if ((event.target as HTMLElement).tagName === "SELECT") {
this.setState({color, selectedColor: color});
} else {
this.setState({color});
}
};
labelChange = (event: Event) => {
this.setState({text: (event.target as HTMLInputElement).value});
};
priorityChange = (event: Event) => {
this.setState({
priority: Number((event.target as HTMLInputElement).value),
});
};
save = async (event: MouseEvent) => {
event.preventDefault();
const {color, id, text, priority, username} = this.state;
2023-06-23 10:52:03 +00:00
if (color === "" || username === "") {
log("Cannot save user label without all values present.");
return;
}
2023-06-23 10:52:03 +00:00
const {userLabels} = this.props;
// If no ID is present then save a new label otherwise edit the existing one.
if (id === undefined) {
2023-06-23 10:52:03 +00:00
let newId = 1;
2023-06-24 12:00:27 +00:00
if (userLabels.length > 0) {
newId =
userLabels.sort((a, b) => b.value.id - a.value.id)[0].value.id + 1;
}
userLabels.push(
await createValueUserLabel({
color,
id: newId,
priority,
text,
username,
}),
);
2023-06-23 10:52:03 +00:00
this.addLabelsToUsernames(querySelectorAll(".link-user"), newId);
} else {
const index = userLabels.findIndex(({value}) => value.id === id);
2023-06-24 12:00:27 +00:00
userLabels.splice(index, 1);
userLabels.push(
await createValueUserLabel({
id,
color,
priority,
text,
username,
}),
);
const elements = querySelectorAll(`[data-trx-label-id="${id}"]`);
const bright = isColorBright(color);
for (const element of elements) {
element.textContent = text;
2023-06-23 10:52:03 +00:00
element.setAttribute("style", `background-color: ${color};`);
if (bright) {
2023-06-23 10:52:03 +00:00
element.classList.add("trx-bright");
} else {
2023-06-23 10:52:03 +00:00
element.classList.remove("trx-bright");
}
}
}
2023-06-24 12:00:27 +00:00
await saveUserLabels(userLabels);
2023-06-23 10:52:03 +00:00
this.props.userLabels = userLabels;
this.hide();
};
remove = async (event: MouseEvent) => {
event.preventDefault();
const {id} = this.state;
if (id === undefined) {
2023-06-23 10:52:03 +00:00
log("User Labels: Tried remove label when ID was undefined.");
return;
}
2023-06-23 10:52:03 +00:00
const {userLabels} = this.props;
const index = userLabels.findIndex(({value}) => value.id === id);
if (index === undefined) {
log(
`User Labels: Tried to remove label with ID ${id} that could not be found.`,
true,
);
return;
}
for (const value of querySelectorAll(`[data-trx-label-id="${id}"]`)) {
value.remove();
}
2023-06-28 13:03:35 +00:00
for (const userLabel of userLabels.splice(index, 1)) {
await userLabel.remove();
}
2023-06-23 10:52:03 +00:00
this.props.userLabels = userLabels;
this.hide();
};
render() {
const bodyStyle = window.getComputedStyle(document.body);
2023-06-23 10:52:03 +00:00
const themeSelectOptions = themeColors.map(({name, value}) => (
<option value={bodyStyle.getPropertyValue(value).trim()}>{name}</option>
));
2023-06-23 10:52:03 +00:00
const bright = isColorBright(this.state.color) ? "trx-bright" : "";
const hidden = this.state.hidden ? "trx-hidden" : "";
const {color, text: label, priority, selectedColor, username} = this.state;
let top = 0;
let left = 0;
const target = this.state.target;
if (target !== undefined) {
const bounds = target.getBoundingClientRect();
top = bounds.y + bounds.height + 4 + window.scrollY;
left = bounds.x + window.scrollX;
}
const position = `left: ${left}px; top: ${top}px;`;
const previewStyle = `background-color: ${color}`;
2023-06-23 10:52:03 +00:00
return (
<form class={`trx-user-label-form ${hidden}`} style={position}>
<div class="trx-label-username-priority">
<label class="trx-label-username">
Add New Label
<input
type="text"
class="form-input"
placeholder="Username"
2023-06-23 10:52:03 +00:00
value={username}
required
/>
</label>
<label class="trx-label-priority">
Priority
<input
type="number"
class="form-input"
2023-06-23 10:52:03 +00:00
value={priority}
onChange={this.priorityChange}
required
/>
</label>
</div>
<div>
<label for="trx-label-color-input">Pick A Color</label>
<div class="trx-label-grid">
<input
id="trx-label-color-input"
type="text"
class="form-input"
placeholder="Color"
2023-06-23 10:52:03 +00:00
value={color}
onInput={debounce(this.colorChange, 250)}
required
/>
<select
class="form-select"
2023-06-23 10:52:03 +00:00
value={selectedColor}
onChange={this.colorChange}
>
2023-06-23 10:52:03 +00:00
{themeSelectOptions}
</select>
</div>
</div>
<div>
<label for="trx-label-input">Label</label>
<div class="trx-label-grid">
<input
id="trx-label-input"
type="text"
class="form-input"
placeholder="Text"
2023-06-23 10:52:03 +00:00
value={label}
onInput={debounce(this.labelChange, 250)}
/>
2023-06-23 10:52:03 +00:00
<div class={`trx-label-preview ${bright}`} style={previewStyle}>
<p>{label}</p>
</div>
</div>
</div>
<div class="trx-label-actions">
2023-06-23 10:52:03 +00:00
<a class="btn-post-action" onClick={this.save}>
Save
</a>
<a class="btn-post-action" onClick={this.hide}>
Close
</a>
<a class="btn-post-action" onClick={this.remove}>
Remove
</a>
</div>
</form>
2023-06-23 10:52:03 +00:00
);
}
}