From cbbf5abf04526a27c6a1f7676b3cef19442b67e9 Mon Sep 17 00:00:00 2001 From: Denys Konovalov Date: Tue, 2 Jan 2024 21:58:00 +0100 Subject: [PATCH] fix shortcodes for scmsv4 --- static/admin/shortcodes/audio.js | 39 ++++++++----- static/admin/shortcodes/card.js | 6 +- static/admin/shortcodes/components.js | 58 +++++++++++++++++++ static/admin/shortcodes/components/card.js | 12 ---- static/admin/shortcodes/components/image.js | 40 ------------- static/admin/shortcodes/components/index.js | 5 -- .../admin/shortcodes/components/text-field.js | 21 ------- static/admin/shortcodes/download.js | 12 ++-- static/admin/shortcodes/gallery.js | 42 ++++++++------ static/admin/shortcodes/image.js | 10 ++-- static/admin/shortcodes/slider.js | 42 ++++++++------ static/admin/shortcodes/youtube.js | 4 +- 12 files changed, 141 insertions(+), 150 deletions(-) create mode 100644 static/admin/shortcodes/components.js delete mode 100644 static/admin/shortcodes/components/card.js delete mode 100644 static/admin/shortcodes/components/image.js delete mode 100644 static/admin/shortcodes/components/index.js delete mode 100644 static/admin/shortcodes/components/text-field.js diff --git a/static/admin/shortcodes/audio.js b/static/admin/shortcodes/audio.js index 3aa0449e..abb22e45 100644 --- 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,24 +33,31 @@ const AudioShortcode = { ); return Card([ - TextField({ - label: "Audiodatei", - value: src, - onChange: (event) => { - onChange({ src: event.target.value }); - }, - }), + Label("Audiodatei"), h( "span", - { key: "audio-button", className: "CMS_WidgetDateTime_NowButton_root" }, - h( - "button", - { - type: "button", - onClick: handleOpenMediaLibrary, - className: "CMS_Button_root CMS_Button_outlined-primary", + { className: "CMS_WidgetDateTime_inputs" }, + TextField({ + value: src, + onChange: (event) => { + onChange({ src: event.target.value }); }, - "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" + ) ) ), ]); diff --git a/static/admin/shortcodes/card.js b/static/admin/shortcodes/card.js index f8771dc5..b08edd0b 100644 --- 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 }); diff --git a/static/admin/shortcodes/components.js b/static/admin/shortcodes/components.js new file mode 100644 index 00000000..1b1941cb --- /dev/null +++ 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 }; diff --git a/static/admin/shortcodes/components/card.js b/static/admin/shortcodes/components/card.js deleted file mode 100644 index 87468dbd..00000000 --- a/static/admin/shortcodes/components/card.js +++ /dev/null @@ -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; diff --git a/static/admin/shortcodes/components/image.js b/static/admin/shortcodes/components/image.js deleted file mode 100644 index 91995b32..00000000 --- a/static/admin/shortcodes/components/image.js +++ /dev/null @@ -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; diff --git a/static/admin/shortcodes/components/index.js b/static/admin/shortcodes/components/index.js deleted file mode 100644 index ebfbcc3f..00000000 --- a/static/admin/shortcodes/components/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Card from "./card.js"; -import TextField from "./text-field.js"; -import Image from "./image.js"; - -export { Card, TextField, Image }; diff --git a/static/admin/shortcodes/components/text-field.js b/static/admin/shortcodes/components/text-field.js deleted file mode 100644 index be227327..00000000 --- a/static/admin/shortcodes/components/text-field.js +++ /dev/null @@ -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; diff --git a/static/admin/shortcodes/download.js b/static/admin/shortcodes/download.js index b8527936..4c3848ff 100644 --- 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 }); diff --git a/static/admin/shortcodes/gallery.js b/static/admin/shortcodes/gallery.js index f4708bba..4dcc86f3 100644 --- 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,27 +34,31 @@ const GalleryShortcode = { ); return Card([ - TextField({ - label: "Gallerie-Ordner", - value: dir, - onChange: (event) => { - onChange({ dir: event.target.value }); - }, - }), + Label("Galerie-Ordner"), h( "span", - { - key: "gallery-button", - className: "CMS_WidgetDateTime_NowButton_root", - }, - h( - "button", - { - type: "button", - onClick: handleOpenMediaLibrary, - className: "CMS_Button_root CMS_Button_outlined-primary", + { className: "CMS_WidgetDateTime_inputs" }, + TextField({ + value: dir, + onChange: (event) => { + onChange({ dir: event.target.value }); }, - "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" + ) ) ), ]); diff --git a/static/admin/shortcodes/image.js b/static/admin/shortcodes/image.js index 7256f404..f91cb7b3 100644 --- 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( diff --git a/static/admin/shortcodes/slider.js b/static/admin/shortcodes/slider.js index b55ca762..4dd9f88e 100644 --- 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,27 +34,31 @@ const SliderShortcode = { ); return Card([ - TextField({ - label: "Bilderkarussell", - value: dir, - onChange: (event) => { - onChange({ dir: event.target.value }); - }, - }), + Label("Bilderkarussell"), h( "span", - { - key: "slider-button", - className: "CMS_WidgetDateTime_NowButton_root", - }, - h( - "button", - { - type: "button", - onClick: handleOpenMediaLibrary, - className: "CMS_Button_root CMS_Button_outlined-primary", + { className: "CMS_WidgetDateTime_inputs" }, + TextField({ + value: dir, + onChange: (event) => { + onChange({ dir: event.target.value }); }, - "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" + ) ) ), ]); diff --git a/static/admin/shortcodes/youtube.js b/static/admin/shortcodes/youtube.js index 2ac57c1e..f47c66d7 100644 --- 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 });