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

81 lines
1.8 KiB
JavaScript
Raw Normal View History

2024-01-02 21:58:00 +01:00
import { Card, TextField, Label } from "./components.js";
const GalleryShortcode = {
2023-05-29 16:22:34 +02:00
label: "Bildergallerie",
openTag: "{{< ",
closeTag: " >}}",
separator: " ",
toProps: (args) => {
if (args.length > 0) {
return {
dir:
args
.find((arg) => arg.startsWith("dir="))
?.split("=")[1]
.replaceAll('"', "") ?? "",
};
}
return { dir: "" };
},
toArgs: ({ dir }) => {
return [`dir=\"${dir}\"`];
},
control: ({ dir, onChange, controlProps }) => {
const { collection, field } = controlProps;
2023-05-29 16:22:34 +02:00
const handleChange = ({ path }) => {
onChange({ dir: path });
};
2023-05-29 16:22:34 +02:00
const handleOpenMediaLibrary = useMediaInsert(
dir,
{ collection, field, forFolder: true },
handleChange
);
2023-05-29 16:22:34 +02:00
return Card([
2024-01-02 21:58:00 +01:00
Label("Galerie-Ordner"),
2023-05-29 16:22:34 +02:00
h(
"span",
2024-01-02 21:58:00 +01:00
{ className: "CMS_WidgetDateTime_inputs" },
TextField({
value: dir,
onChange: (event) => {
onChange({ dir: event.target.value });
},
}),
2023-05-29 16:22:34 +02:00
h(
2024-01-02 21:58:00 +01:00
"span",
2023-05-29 16:22:34 +02:00
{
2024-01-02 21:58:00 +01:00
key: "gallery-button",
className: "CMS_WidgetDateTime_NowButton_root",
2023-05-29 16:22:34 +02:00
},
2024-01-02 21:58:00 +01:00
h(
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
},
"wählen"
)
2023-05-29 16:22:34 +02:00
)
),
]);
},
preview: ({ dir }) => {
return h(
"div",
{ className: "card mb-4" },
h(
"div",
{ className: "card-body mb-0" },
h("div", { className: "card-title h4" }, "Gallerie-Ordner"),
h("div", { className: "card-text" }, dir)
)
);
},
};
export default GalleryShortcode;