fix shortcodes for scmsv4

2024-01-02 21:58:00 +01:00 · 2024-01-02 21:58:00 +01:00 · cbbf5abf04
commit cbbf5abf04
parent 02c5040281
12 changed files with 141 additions and 150 deletions
--- a/static/admin/shortcodes/audio.js
+++ b/static/admin/shortcodes/audio.js
@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";

 const AudioShortcode = {
  label: "Audiodatei",
@ -33,8 +33,11 @@ const AudioShortcode = {
    );

    return Card([
+      Label("Audiodatei"),
+      h(
+        "span",
+        { className: "CMS_WidgetDateTime_inputs" },
        TextField({
-        label: "Audiodatei",
          value: src,
          onChange: (event) => {
            onChange({ src: event.target.value });
@ -42,7 +45,10 @@ const AudioShortcode = {
        }),
        h(
          "span",
-        { key: "audio-button", className: "CMS_WidgetDateTime_NowButton_root" },
+          {
+            key: "audio-button",
+            className: "CMS_WidgetDateTime_NowButton_root",
+          },
          h(
            "button",
            {
@ -52,6 +58,7 @@ const AudioShortcode = {
            },
            "wählen"
          )
+        )
      ),
    ]);
  },
--- a/static/admin/shortcodes/card.js
+++ b/static/admin/shortcodes/card.js
@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";

 const CardShortcode = {
  label: "Link-Karte",
@ -27,15 +27,15 @@ const CardShortcode = {
  },
  control: ({ title, link, onChange }) => {
    return Card([
+      Label("Titel"),
      TextField({
-        label: "Titel",
        value: title,
        onChange: (event) => {
          onChange({ title: event.target.value.trimStart(), link });
        },
      }),
+      Label("Link"),
      TextField({
-        label: "Link",
        value: link,
        onChange: (event) => {
          onChange({ title, link: event.target.value });
--- a/static/admin/shortcodes/components.js
+++ b/static/admin/shortcodes/components.js
@ -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 };
--- a/static/admin/shortcodes/components/card.js
+++ b/static/admin/shortcodes/components/card.js
@ -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;
--- a/static/admin/shortcodes/components/image.js
+++ b/static/admin/shortcodes/components/image.js
@ -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;
--- a/static/admin/shortcodes/components/index.js
+++ b/static/admin/shortcodes/components/index.js
@ -1,5 +0,0 @@
-import Card from "./card.js";
-import TextField from "./text-field.js";
-import Image from "./image.js";
-
-export { Card, TextField, Image };
--- a/static/admin/shortcodes/components/text-field.js
+++ b/static/admin/shortcodes/components/text-field.js
@ -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;
--- a/static/admin/shortcodes/download.js
+++ b/static/admin/shortcodes/download.js
@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";

 const DownloadShortcode = {
  label: "Download-Karte",
@ -39,24 +39,20 @@ const DownloadShortcode = {
    );

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

 const GalleryShortcode = {
  label: "Bildergallerie",
@ -34,8 +34,11 @@ const GalleryShortcode = {
    );

    return Card([
+      Label("Galerie-Ordner"),
+      h(
+        "span",
+        { className: "CMS_WidgetDateTime_inputs" },
        TextField({
-        label: "Gallerie-Ordner",
          value: dir,
          onChange: (event) => {
            onChange({ dir: event.target.value });
@ -56,6 +59,7 @@ const GalleryShortcode = {
            },
            "wählen"
          )
+        )
      ),
    ]);
  },
--- a/static/admin/shortcodes/image.js
+++ b/static/admin/shortcodes/image.js
@ -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";

 const ImageShortcode = {
@ -36,13 +36,13 @@ const ImageShortcode = {
    );
    const assetSource = useMediaAsset(src, collection, field, entry);

-    return Card(
+    return Card([
+      Label("Bild"),
      Image({
-        label: "Bild",
        assetSource,
        handleOpenMediaLibrary,
-      })
-    );
+      }),
+    ]);
  },
  preview: ({ src }) => {
    return h(
--- a/static/admin/shortcodes/slider.js
+++ b/static/admin/shortcodes/slider.js
@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";

 const SliderShortcode = {
  label: "Bilderkarussell",
@ -34,8 +34,11 @@ const SliderShortcode = {
    );

    return Card([
+      Label("Bilderkarussell"),
+      h(
+        "span",
+        { className: "CMS_WidgetDateTime_inputs" },
        TextField({
-        label: "Bilderkarussell",
          value: dir,
          onChange: (event) => {
            onChange({ dir: event.target.value });
@ -56,6 +59,7 @@ const SliderShortcode = {
            },
            "wählen"
          )
+        )
      ),
    ]);
  },
--- a/static/admin/shortcodes/youtube.js
+++ b/static/admin/shortcodes/youtube.js
@ -1,4 +1,4 @@
-import { Card, TextField } from "./components/index.js";
+import { Card, TextField, Label } from "./components.js";

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