gcg-website/static/admin/shortcodes/audio.js

68 lines
1.5 KiB
JavaScript
Raw Normal View History

import { Card, TextField } from "./components/index.js";
const AudioShortcode = {
2023-05-29 16:22:34 +02:00
label: "Audiodatei",
openTag: "{{< ",
closeTag: " >}}",
separator: " ",
toProps: (args) => {
if (args.length > 0) {
const src =
args
.find((arg) => arg.startsWith("src="))
?.split("=")[1]
.replaceAll('"', "") ?? "";
return { src: src };
}
return { src: "" };
},
toArgs: ({ src }) => {
return [`src=\"${src}\"`];
},
control: ({ src, onChange, controlProps }) => {
const { collection, field } = controlProps;
2023-05-29 16:22:34 +02:00
const handleChange = ({ path }) => {
onChange({ src: path });
};
2023-05-29 16:22:34 +02:00
const handleOpenMediaLibrary = useMediaInsert(
src,
{ collection, field },
handleChange
);
2023-05-29 16:22:34 +02:00
return Card([
TextField({
label: "Audiodatei",
value: src,
onChange: (event) => {
onChange({ src: event.target.value });
},
}),
h(
"span",
2023-09-30 21:15:23 +02:00
{ key: "audio-button", className: "CMS_WidgetDateTime_NowButton_root" },
2023-05-29 16:22:34 +02:00
h(
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
2023-09-30 21:15:23 +02:00
className: "CMS_Button_root CMS_Button_outlined-primary",
2023-05-29 16:22:34 +02:00
},
"wählen"
)
),
]);
},
preview: ({ src }) => {
return h(
"div",
{ className: "card" },
h("audio", { src: src, controls: true })
);
},
};
export default AudioShortcode;