87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { addClipboardNotifications } from "../pageUtils";
|
|
import { makeElement } from "../htmlUtils";
|
|
import ClipboardJS from "clipboard";
|
|
import FileSaver from 'file-saver';
|
|
import i18next from 'i18next';
|
|
|
|
export function CopyableModal(name: string, contentString: string): Element {
|
|
return makeElement({
|
|
tag: "div",
|
|
class: "modal-sections",
|
|
attributes: {
|
|
"uk-modal": ""
|
|
},
|
|
children: makeElement({
|
|
tag: "div",
|
|
class: "uk-modal-dialog",
|
|
children: [
|
|
makeElement({
|
|
tag: "button",
|
|
class: "uk-modal-close-default",
|
|
attributes: {
|
|
"uk-close": "",
|
|
type: "button"
|
|
}
|
|
}),
|
|
makeElement({
|
|
tag: "div",
|
|
class: "uk-modal-header",
|
|
children: makeElement({
|
|
tag: "h2",
|
|
class: "uk-modal-title",
|
|
text: name
|
|
})
|
|
}),
|
|
makeElement({
|
|
tag: "div",
|
|
class: ["uk-modal-body"],
|
|
children: makeElement({
|
|
tag: "pre",
|
|
class: "wrap-pre",
|
|
text: contentString
|
|
})
|
|
}),
|
|
makeElement({
|
|
tag: "div",
|
|
class: ["uk-modal-footer", "uk-text-right"],
|
|
children: [
|
|
makeElement({
|
|
tag: "button",
|
|
class: ["uk-button", "uk-button-primary"],
|
|
attributes: {
|
|
type: "button",
|
|
"data-clipboard-text": contentString
|
|
},
|
|
text: i18next.t("copy_modal_download_btn"),
|
|
onclick: _ => {
|
|
const blob = new Blob([contentString], {type: "text/plain;charset=utf-8"});
|
|
FileSaver.saveAs(blob, "result.txt");
|
|
}
|
|
}),
|
|
makeElement({
|
|
tag: "button",
|
|
class: ["uk-button", "uk-button-primary"],
|
|
attributes: {
|
|
type: "button",
|
|
"data-clipboard-text": contentString
|
|
},
|
|
text: i18next.t("copy_modal_copy_btn"),
|
|
thenRun: (e) => {
|
|
const clipboard = new ClipboardJS(e);
|
|
addClipboardNotifications(clipboard);
|
|
}
|
|
}),
|
|
makeElement({
|
|
tag: "button",
|
|
class: ["uk-button", "uk-button-secondary", "uk-modal-close"],
|
|
attributes: { type: "button" },
|
|
text: i18next.t("copy_modal_close_btn")
|
|
}),
|
|
|
|
]
|
|
}),
|
|
]
|
|
})
|
|
});
|
|
}
|