48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import IconButton from "./IconButton.svelte";
|
|
import ColorPicker from "./ColorPicker.svelte";
|
|
|
|
import { withLazyProperties } from "anki/lazy";
|
|
import * as tr from "anki/i18n";
|
|
|
|
import squareFillIcon from "./square-fill.svg";
|
|
import "./color.css";
|
|
|
|
const foregroundColorKeyword = "--foreground-color";
|
|
|
|
function setForegroundColor(color: string): void {
|
|
document.documentElement.style.setProperty(foregroundColorKeyword, color);
|
|
}
|
|
|
|
function getForecolor(): string {
|
|
return document.documentElement.style.getPropertyValue(foregroundColorKeyword);
|
|
}
|
|
|
|
function wrapWithForecolor(color: string): void {
|
|
document.execCommand("forecolor", false, color);
|
|
}
|
|
|
|
const forecolorButton = withLazyProperties(
|
|
{
|
|
component: IconButton,
|
|
icon: squareFillIcon,
|
|
className: "forecolor",
|
|
onClick: () => wrapWithForecolor(getForecolor()),
|
|
},
|
|
{
|
|
title: tr.editingSetForegroundColourF7,
|
|
}
|
|
);
|
|
|
|
const colorpickerButton = withLazyProperties(
|
|
{
|
|
component: ColorPicker,
|
|
className: "rainbow",
|
|
onChange: ({ currentTarget }) => setForegroundColor(currentTarget.value),
|
|
},
|
|
{
|
|
title: tr.editingChangeColourF8,
|
|
}
|
|
);
|
|
|
|
export const colorButtons = [forecolorButton, colorpickerButton];
|