fix shortcodes for scmsv4
All checks were successful
website-main / prod-build (push) Successful in 7s
website-main / test-build (push) Successful in 4s

This commit is contained in:
Denys Konovalov 2024-01-02 21:58:00 +01:00
parent 02c5040281
commit cbbf5abf04
Signed by: Denys Konovalov
GPG Key ID: 0037E1B0E33BD2C9
12 changed files with 141 additions and 150 deletions

@ -1,4 +1,4 @@
import { Card, TextField } from "./components/index.js"; import { Card, TextField, Label } from "./components.js";
const AudioShortcode = { const AudioShortcode = {
label: "Audiodatei", label: "Audiodatei",
@ -33,24 +33,31 @@ const AudioShortcode = {
); );
return Card([ return Card([
TextField({ Label("Audiodatei"),
label: "Audiodatei",
value: src,
onChange: (event) => {
onChange({ src: event.target.value });
},
}),
h( h(
"span", "span",
{ key: "audio-button", className: "CMS_WidgetDateTime_NowButton_root" }, { className: "CMS_WidgetDateTime_inputs" },
h( TextField({
"button", value: src,
{ onChange: (event) => {
type: "button", onChange({ src: event.target.value });
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
}, },
"wählen" }),
h(
"span",
{
key: "audio-button",
className: "CMS_WidgetDateTime_NowButton_root",
},
h(
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
},
"wählen"
)
) )
), ),
]); ]);

@ -1,4 +1,4 @@
import { Card, TextField } from "./components/index.js"; import { Card, TextField, Label } from "./components.js";
const CardShortcode = { const CardShortcode = {
label: "Link-Karte", label: "Link-Karte",
@ -27,15 +27,15 @@ const CardShortcode = {
}, },
control: ({ title, link, onChange }) => { control: ({ title, link, onChange }) => {
return Card([ return Card([
Label("Titel"),
TextField({ TextField({
label: "Titel",
value: title, value: title,
onChange: (event) => { onChange: (event) => {
onChange({ title: event.target.value.trimStart(), link }); onChange({ title: event.target.value.trimStart(), link });
}, },
}), }),
Label("Link"),
TextField({ TextField({
label: "Link",
value: link, value: link,
onChange: (event) => { onChange: (event) => {
onChange({ title, link: event.target.value }); onChange({ title, link: event.target.value });

@ -0,0 +1,58 @@
const Card = (children, opts = { vertical: false }) =>
h(
"span",
{
className:
"CMS_Card_root CMS_Field_root CMS_WidgetString_root CMS_WidgetString_required CMS_Field_cursor-text CMS_WidgetMarkdown_Paragraph_root" +
(opts.vertical ? " flex-col" : ""),
},
h("span", { className: "CMS_Field_wrapper" }, children)
);
const Image = ({ assetSource, handleOpenMediaLibrary }) =>
h(
"span",
{ className: "CMS_WidgetFileImage_content" },
h(
"span",
{},
h("img", {
role: "presentation",
src: assetSource,
className: "CMS_Image_root",
})
),
h(
"span",
{ className: "CMS_WidgetFileImage_actions" },
h(
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
},
"Bild auswählen"
)
)
);
const TextField = ({ value, onChange }) =>
h("input", {
className:
"MuiInput-input CMS_TextField_input CMS_WidgetString_input CMS_TextField_borderless CMS_Label_cursor-text",
type: "text",
value,
onChange,
});
const Label = (label) =>
h(
"label",
{
className: "CMS_Label_root CMS_Label_cursor-pointer",
},
label
);
export { Card, Image, TextField, Label };

@ -1,12 +0,0 @@
const Card = (child, opts = { vertical: false }) =>
h(
"span",
{
className:
"CMS_Card_root CMS_Field_root CMS_WidgetString_root CMS_WidgetString_required CMS_Field_cursor-text CMS_WidgetMarkdown_Paragraph_root" +
(opts.vertical ? " flex-col" : ""),
},
child
);
export default Card;

@ -1,40 +0,0 @@
const Image = ({ label, assetSource, handleOpenMediaLibrary }) =>
h(
"span",
{ className: "CMS_Field_wrapper" },
h(
"label",
{
className: "CMS_Label_root CMS_Label_cursor-pointer",
},
label
),
h(
"span",
{ className: "CMS_WidgetFileImage_content" },
h(
"span",
{},
h("img", {
role: "presentation",
src: assetSource,
className: "CMS_Image_root",
})
),
h(
"span",
{ className: "CMS_WidgetFileImage_actions" },
h(
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
},
"Bild auswählen"
)
)
)
);
export default Image;

@ -1,5 +0,0 @@
import Card from "./card.js";
import TextField from "./text-field.js";
import Image from "./image.js";
export { Card, TextField, Image };

@ -1,21 +0,0 @@
const TextField = ({ label, value, onChange }) =>
h(
"span",
{ key: "text-" + label, className: "CMS_Field_wrapper" },
h(
"label",
{
className: "CMS_Label_root CMS_TextField_cursor-default",
},
label
),
h("input", {
className:
"MuiInput-input CMS_TextField_input CMS_WidgetString_input CMS_TextField_borderless CMS_Label_cursor-text",
type: "text",
value,
onChange,
})
);
export default TextField;

@ -1,4 +1,4 @@
import { Card, TextField } from "./components/index.js"; import { Card, TextField, Label } from "./components.js";
const DownloadShortcode = { const DownloadShortcode = {
label: "Download-Karte", label: "Download-Karte",
@ -39,24 +39,20 @@ const DownloadShortcode = {
); );
return Card([ return Card([
Label("Titel"),
TextField({ TextField({
label: "Titel",
value: title, value: title,
onChange: (event) => { onChange: (event) => {
onChange({ title: event.target.value.trimStart(), link }); onChange({ title: event.target.value.trimStart(), link });
}, },
}), }),
Label("Download-Link"),
h( h(
"span", "span",
{ {
style: { class: "CMS_WidgetDateTime_inputs"
display: "flex",
"flex-direction": "row",
"align-items": "end",
},
}, },
TextField({ TextField({
label: "Download-Link",
value: link, value: link,
onChange: (event) => { onChange: (event) => {
onChange({ title, link: event.target.value }); onChange({ title, link: event.target.value });

@ -1,4 +1,4 @@
import { Card, TextField } from "./components/index.js"; import { Card, TextField, Label } from "./components.js";
const GalleryShortcode = { const GalleryShortcode = {
label: "Bildergallerie", label: "Bildergallerie",
@ -34,27 +34,31 @@ const GalleryShortcode = {
); );
return Card([ return Card([
TextField({ Label("Galerie-Ordner"),
label: "Gallerie-Ordner",
value: dir,
onChange: (event) => {
onChange({ dir: event.target.value });
},
}),
h( h(
"span", "span",
{ { className: "CMS_WidgetDateTime_inputs" },
key: "gallery-button", TextField({
className: "CMS_WidgetDateTime_NowButton_root", value: dir,
}, onChange: (event) => {
h( onChange({ dir: event.target.value });
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
}, },
"wählen" }),
h(
"span",
{
key: "gallery-button",
className: "CMS_WidgetDateTime_NowButton_root",
},
h(
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
},
"wählen"
)
) )
), ),
]); ]);

@ -1,4 +1,4 @@
import { Card, Image } from "./components/index.js"; import { Card, Image, Label } from "./components.js";
import { md5 } from "../previews/page-previews/components/index.js"; import { md5 } from "../previews/page-previews/components/index.js";
const ImageShortcode = { const ImageShortcode = {
@ -36,13 +36,13 @@ const ImageShortcode = {
); );
const assetSource = useMediaAsset(src, collection, field, entry); const assetSource = useMediaAsset(src, collection, field, entry);
return Card( return Card([
Label("Bild"),
Image({ Image({
label: "Bild",
assetSource, assetSource,
handleOpenMediaLibrary, handleOpenMediaLibrary,
}) }),
); ]);
}, },
preview: ({ src }) => { preview: ({ src }) => {
return h( return h(

@ -1,4 +1,4 @@
import { Card, TextField } from "./components/index.js"; import { Card, TextField, Label } from "./components.js";
const SliderShortcode = { const SliderShortcode = {
label: "Bilderkarussell", label: "Bilderkarussell",
@ -34,27 +34,31 @@ const SliderShortcode = {
); );
return Card([ return Card([
TextField({ Label("Bilderkarussell"),
label: "Bilderkarussell",
value: dir,
onChange: (event) => {
onChange({ dir: event.target.value });
},
}),
h( h(
"span", "span",
{ { className: "CMS_WidgetDateTime_inputs" },
key: "slider-button", TextField({
className: "CMS_WidgetDateTime_NowButton_root", value: dir,
}, onChange: (event) => {
h( onChange({ dir: event.target.value });
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
}, },
"wählen" }),
h(
"span",
{
key: "slider-button",
className: "CMS_WidgetDateTime_NowButton_root",
},
h(
"button",
{
type: "button",
onClick: handleOpenMediaLibrary,
className: "CMS_Button_root CMS_Button_outlined-primary",
},
"wählen"
)
) )
), ),
]); ]);

@ -1,4 +1,4 @@
import { Card, TextField } from "./components/index.js"; import { Card, TextField, Label } from "./components.js";
const YoutubeShortcode = { const YoutubeShortcode = {
label: "YouTube-Video", label: "YouTube-Video",
@ -18,8 +18,8 @@ const YoutubeShortcode = {
control: ({ src, onChange }) => { control: ({ src, onChange }) => {
return Card( return Card(
[ [
Label("YouTUbe-Video"),
TextField({ TextField({
label: "YouTube-Video-ID",
value: src, value: src,
onChange: (event) => { onChange: (event) => {
onChange({ src: event.target.value }); onChange({ src: event.target.value });