1
Fork 0
tildes-reextended/source/options/components/username-colors.tsx

225 lines
5.8 KiB
TypeScript
Raw Normal View History

import {type Value} from "@holllo/webextension-storage";
2023-06-23 10:52:03 +00:00
import {Component} from "preact";
import {log} from "../../utilities/exports.js";
import {
type UsernameColorsData,
type UsernameColor,
Feature,
Data,
createValueUsernamecolor,
2023-06-23 10:52:03 +00:00
fromStorage,
2023-06-27 11:51:04 +00:00
} from "../../storage/exports.js";
2023-06-23 10:52:03 +00:00
import {Setting, type SettingProps} from "./index.js";
type State = {
previewChecked: "off" | "foreground" | "background";
usernameColors: UsernameColorsData;
usernameColorsToRemove: UsernameColorsData;
randomizeChecked: Value<boolean>;
2023-06-23 10:52:03 +00:00
};
export class UsernameColorsSetting extends Component<SettingProps, State> {
constructor(props: SettingProps) {
super(props);
this.state = {
previewChecked: "off",
usernameColors: undefined!,
usernameColorsToRemove: [],
randomizeChecked: undefined!,
2023-06-23 10:52:03 +00:00
};
}
async componentDidMount() {
this.setState({
randomizeChecked: await fromStorage(Data.RandomizeUsernameColors),
usernameColors: await fromStorage(Feature.UsernameColors),
});
2023-06-23 10:52:03 +00:00
}
addNewColor = async () => {
2023-06-23 10:52:03 +00:00
let id = 1;
if (this.state.usernameColors.length > 0) {
2023-06-23 10:52:03 +00:00
id =
this.state.usernameColors.sort((a, b) => b.value.id - a.value.id)[0]
.value.id + 1;
2023-06-23 10:52:03 +00:00
}
const newColor = await createValueUsernamecolor({
2023-06-23 10:52:03 +00:00
color: "",
id,
username: "",
});
2023-06-23 10:52:03 +00:00
this.state.usernameColors.push(newColor);
2023-06-23 10:52:03 +00:00
this.setState({
usernameColors: this.state.usernameColors,
});
};
removeColor = async (targetId: number) => {
const targetIndex = this.state.usernameColors.findIndex(
({value}) => value.id === targetId,
2023-06-23 10:52:03 +00:00
);
const usernameColorsToRemove = this.state.usernameColorsToRemove;
usernameColorsToRemove.push(
...this.state.usernameColors.splice(targetIndex, 1),
);
this.setState({
usernameColors: this.state.usernameColors,
usernameColorsToRemove,
});
2023-06-23 10:52:03 +00:00
};
saveChanges = async () => {
for (const usernameColor of this.state.usernameColorsToRemove) {
await usernameColor.remove();
}
for (const usernameColor of this.state.usernameColors) {
await usernameColor.save();
}
this.setState({usernameColorsToRemove: []});
2023-06-23 10:52:03 +00:00
};
togglePreview = async () => {
let {previewChecked} = this.state;
// eslint-disable-next-line default-case
switch (previewChecked) {
case "off": {
previewChecked = "foreground";
break;
}
case "foreground": {
previewChecked = "background";
break;
}
case "background": {
previewChecked = "off";
break;
}
}
this.setState({previewChecked});
};
toggleRandomized = async () => {
const randomizeChecked = this.state.randomizeChecked;
randomizeChecked.value = !randomizeChecked.value;
await randomizeChecked.save();
this.setState({randomizeChecked});
};
2023-06-23 10:52:03 +00:00
onInput = (event: Event, id: number, key: "color" | "username") => {
const colorIndex = this.state.usernameColors.findIndex(
({value}) => value.id === id,
2023-06-23 10:52:03 +00:00
);
if (colorIndex === -1) {
log(`Tried to edit unknown UsernameColor ID: ${id}`);
return;
}
const newValue = (event.target as HTMLInputElement).value;
this.state.usernameColors[colorIndex].value[key] = newValue;
2023-06-23 10:52:03 +00:00
this.setState({usernameColors: this.state.usernameColors});
};
render() {
const {previewChecked, usernameColors, randomizeChecked} = this.state;
2023-06-23 10:52:03 +00:00
if (usernameColors === undefined) {
return;
}
usernameColors.sort((a, b) => a.value.id - b.value.id);
2023-06-23 10:52:03 +00:00
const editors = usernameColors.map(({value: {color, id, username}}) => {
2023-06-23 10:52:03 +00:00
const style: Record<string, string> = {};
if (previewChecked === "background") {
style.backgroundColor = color;
} else if (previewChecked === "foreground") {
style.color = color;
}
const usernameHandler = (event: Event) => {
this.onInput(event, id, "username");
};
const colorHandler = (event: Event) => {
this.onInput(event, id, "color");
};
const removeHandler = async () => {
await this.removeColor(id);
2023-06-23 10:52:03 +00:00
};
return (
<div class="username-colors-editor" key={id}>
<input
style={style}
placeholder="Username(s)"
value={username}
onInput={usernameHandler}
/>
<input
style={style}
placeholder="Color"
value={color}
onInput={colorHandler}
/>
<button class="button destructive" onClick={removeHandler}>
Remove
</button>
</div>
);
});
return (
<Setting {...this.props}>
<p class="info">
Assign custom colors to usernames.
<br />
You can enter multiple usernames separated by a comma if you want them
to use the same color.
<br />
2023-07-12 11:51:25 +00:00
If randomize is enabled then all usernames will be given a random
background color based on a hash of the username. Manually assigned
colors will be applied normally.
2023-06-23 10:52:03 +00:00
</p>
<div class="username-colors-controls">
<button class="button" onClick={this.addNewColor}>
Add New Color
</button>
<button class="button" onClick={this.togglePreview}>
Toggle Preview
</button>
<button class="button" onClick={this.saveChanges}>
Save Changes
</button>
<ul class="checkbox-list">
<li>
<label>
<input
type="checkbox"
checked={randomizeChecked.value}
onClick={this.toggleRandomized}
/>
Randomize Username Colors
</label>
</li>
</ul>
2023-06-23 10:52:03 +00:00
</div>
{editors}
</Setting>
);
}
}