88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
|
import { makeElement } from "../htmlUtils.js";
|
||
|
import ClipboardJS from "clipboard";
|
||
|
import UIkit from 'uikit/dist/js/uikit.min.js';
|
||
|
import FileSaver from 'file-saver';
|
||
|
|
||
|
export function CopyableModal(name, contentString) {
|
||
|
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: "Download",
|
||
|
onclick: _ => {
|
||
|
var 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: "Copy",
|
||
|
thenRun: (e) => {
|
||
|
let clipboard = new ClipboardJS(e);
|
||
|
clipboard.on('success', _ => {
|
||
|
UIkit.notification("Copied to clipboard.", { status: 'success', timeout: 1000 });
|
||
|
});
|
||
|
}
|
||
|
}),
|
||
|
makeElement({
|
||
|
tag: "button",
|
||
|
class: ["uk-button", "uk-button-secondary", "uk-modal-close"],
|
||
|
attributes: { type: "button" },
|
||
|
text: "Close"
|
||
|
}),
|
||
|
|
||
|
]
|
||
|
}),
|
||
|
]
|
||
|
})
|
||
|
});
|
||
|
}
|