52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { MarginInline } from "./MarginInline";
|
|
import { addClipboardNotifications } from "../pageUtils";
|
|
import { makeElement } from "../htmlUtils";
|
|
import ClipboardJS from "clipboard";
|
|
import i18next from "i18next";
|
|
|
|
export interface CopyableInputBoxType extends HTMLElement {
|
|
setText(text: string): void;
|
|
}
|
|
|
|
export function CopyableInputBox(text: string, copyable = true): CopyableInputBoxType {
|
|
const inputBoxDiv = (makeElement({ tag: "div" }) as CopyableInputBoxType);
|
|
let inputBoxCopyButton = null;
|
|
if (copyable) {
|
|
inputBoxCopyButton = makeElement({
|
|
tag: "a",
|
|
class: "uk-form-icon",
|
|
attributes: {
|
|
"uk-icon": "icon: copy",
|
|
"role": "img",
|
|
"aria-label": i18next.t("copy_input_box_copy_icon_text")
|
|
},
|
|
thenRun: (e) => {
|
|
const clipboard = new ClipboardJS(e);
|
|
addClipboardNotifications(clipboard, 600);
|
|
}
|
|
});
|
|
}
|
|
|
|
const inputBoxInput = makeElement({
|
|
tag: "input",
|
|
class: ["uk-input"],
|
|
attributes: { "readonly": true, "type": "text" },
|
|
});
|
|
|
|
const inputBoxInner = MarginInline([
|
|
inputBoxCopyButton,
|
|
inputBoxInput
|
|
]);
|
|
inputBoxDiv.appendChild(inputBoxInner);
|
|
|
|
inputBoxDiv.setText = function (text) {
|
|
(inputBoxInput as HTMLInputElement).value = `${text}`;
|
|
if (copyable) {
|
|
inputBoxCopyButton.dataset.clipboardText = `${text}`;
|
|
}
|
|
};
|
|
inputBoxDiv.setText(text);
|
|
|
|
|
|
return inputBoxDiv;
|
|
} |