@ -52,6 +52,7 @@
|
||||
YoutubeShortcode,
|
||||
AudioShortcode,
|
||||
SliderShortcode,
|
||||
VideoShortcode,
|
||||
} from "./shortcodes/index.js";
|
||||
import { StatusPage, WikiLink } from "./links/index.js";
|
||||
import Icons from "./icons.js";
|
||||
@ -110,6 +111,7 @@
|
||||
CMS.registerShortcode("youtube", YoutubeShortcode);
|
||||
CMS.registerShortcode("audio", AudioShortcode);
|
||||
CMS.registerShortcode("slider", SliderShortcode);
|
||||
CMS.registerShortcode("video", VideoShortcode);
|
||||
|
||||
// links
|
||||
CMS.registerAdditionalLink(StatusPage);
|
||||
|
@ -1,17 +1,19 @@
|
||||
import AudioShortcode from "./audio.js";
|
||||
import CardShortcode from "./card.js";
|
||||
import DownloadShortcode from "./download.js";
|
||||
import GalleryShortcode from "./gallery.js";
|
||||
import ImageShortcode from "./image.js";
|
||||
import DownloadShortcode from "./download.js";
|
||||
import CardShortcode from "./card.js";
|
||||
import YoutubeShortcode from "./youtube.js";
|
||||
import AudioShortcode from "./audio.js";
|
||||
import SliderShortcode from "./slider.js";
|
||||
import VideoShortcode from "./video.js";
|
||||
import YoutubeShortcode from "./youtube.js";
|
||||
|
||||
export {
|
||||
AudioShortcode,
|
||||
CardShortcode,
|
||||
DownloadShortcode,
|
||||
GalleryShortcode,
|
||||
ImageShortcode,
|
||||
DownloadShortcode,
|
||||
CardShortcode,
|
||||
YoutubeShortcode,
|
||||
AudioShortcode,
|
||||
SliderShortcode,
|
||||
VideoShortcode,
|
||||
YoutubeShortcode,
|
||||
};
|
||||
|
74
static/admin/shortcodes/video.js
Normal file
74
static/admin/shortcodes/video.js
Normal file
@ -0,0 +1,74 @@
|
||||
import { Card, TextField, Label } from "./components.js";
|
||||
|
||||
const VideoShortcode = {
|
||||
label: "Videodatei",
|
||||
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;
|
||||
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ src: path });
|
||||
};
|
||||
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
src,
|
||||
{ collection, field },
|
||||
handleChange
|
||||
);
|
||||
|
||||
return Card([
|
||||
Label("Videodatei"),
|
||||
h(
|
||||
"span",
|
||||
{ className: "CMS_WidgetDateTime_inputs" },
|
||||
TextField({
|
||||
value: src,
|
||||
onChange: (event) => {
|
||||
onChange({ src: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
key: "video-button",
|
||||
className: "CMS_WidgetDateTime_NowButton_root",
|
||||
},
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "CMS_Button_root CMS_Button_outlined-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "card" },
|
||||
h("video", { className: "w-100", src: src, controls: true })
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default VideoShortcode;
|
Reference in New Issue
Block a user