CMS refactor
This commit is contained in:
@ -1,67 +1,67 @@
|
||||
import { Card, TextField } from "./components/index.js";
|
||||
|
||||
const AudioShortcode = {
|
||||
label: "Audiodatei",
|
||||
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;
|
||||
label: "Audiodatei",
|
||||
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 handleChange = ({ path }) => {
|
||||
onChange({ src: path });
|
||||
};
|
||||
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
src,
|
||||
{ collection, field },
|
||||
handleChange
|
||||
);
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
src,
|
||||
{ collection, field },
|
||||
handleChange
|
||||
);
|
||||
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Audiodatei",
|
||||
value: src,
|
||||
onChange: (event) => {
|
||||
onChange({ src: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{ key: "audio-button", className: "flex gap-2 pt-2 px-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "card" },
|
||||
h("audio", { src: src, controls: true })
|
||||
);
|
||||
},
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Audiodatei",
|
||||
value: src,
|
||||
onChange: (event) => {
|
||||
onChange({ src: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{ key: "audio-button", className: "flex gap-2 pt-2 px-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "card" },
|
||||
h("audio", { src: src, controls: true })
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default AudioShortcode;
|
||||
|
||||
@ -1,75 +1,75 @@
|
||||
import { Card, TextField } from "./components/index.js";
|
||||
|
||||
const CardShortcode = {
|
||||
label: "Link-Karte",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
var title = "";
|
||||
var link = "";
|
||||
const linkIndex = args.findIndex((arg) => arg.startsWith('link="'));
|
||||
const titleIndex = args.findIndex((arg) => arg.startsWith('title="'));
|
||||
for (let arg of args.slice(titleIndex, linkIndex)) {
|
||||
title += " " + arg.replaceAll("title=", "").replaceAll('"', "");
|
||||
}
|
||||
for (let arg of args.slice(linkIndex)) {
|
||||
link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
|
||||
}
|
||||
return { title: title.trim(), link: link.trim() };
|
||||
}
|
||||
label: "Link-Karte",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
var title = "";
|
||||
var link = "";
|
||||
const linkIndex = args.findIndex((arg) => arg.startsWith('link="'));
|
||||
const titleIndex = args.findIndex((arg) => arg.startsWith('title="'));
|
||||
for (let arg of args.slice(titleIndex, linkIndex)) {
|
||||
title += " " + arg.replaceAll("title=", "").replaceAll('"', "");
|
||||
}
|
||||
for (let arg of args.slice(linkIndex)) {
|
||||
link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
|
||||
}
|
||||
return { title: title.trim(), link: link.trim() };
|
||||
}
|
||||
|
||||
return { title: "", link: "" };
|
||||
},
|
||||
toArgs: ({ title, link }) => {
|
||||
return [`title=\"${title}\"`, `link=\"${link}\"`];
|
||||
},
|
||||
control: ({ title, link, onChange }) => {
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Titel",
|
||||
value: title,
|
||||
onChange: (event) => {
|
||||
onChange({ title: event.target.value, link });
|
||||
},
|
||||
}),
|
||||
TextField({
|
||||
label: "Link",
|
||||
value: link,
|
||||
onChange: (event) => {
|
||||
onChange({ title, link: event.target.value });
|
||||
},
|
||||
}),
|
||||
]);
|
||||
},
|
||||
preview: ({ title, link }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "container mb-0" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card border-primary rounded-0 hover-shadow mb-5" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card-body mb-0" },
|
||||
h(
|
||||
"h4",
|
||||
{ className: "card-title" },
|
||||
h("a", { className: "text-decoration-none", href: link }, title)
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
className: "mb-0 btn btn-primary btn-sm text-decoration-none",
|
||||
href: link,
|
||||
},
|
||||
"Mehr anzeigen"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
return { title: "", link: "" };
|
||||
},
|
||||
toArgs: ({ title, link }) => {
|
||||
return [`title=\"${title}\"`, `link=\"${link}\"`];
|
||||
},
|
||||
control: ({ title, link, onChange }) => {
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Titel",
|
||||
value: title,
|
||||
onChange: (event) => {
|
||||
onChange({ title: event.target.value, link });
|
||||
},
|
||||
}),
|
||||
TextField({
|
||||
label: "Link",
|
||||
value: link,
|
||||
onChange: (event) => {
|
||||
onChange({ title, link: event.target.value });
|
||||
},
|
||||
}),
|
||||
]);
|
||||
},
|
||||
preview: ({ title, link }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "container mb-0" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card border-primary rounded-0 hover-shadow mb-5" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card-body mb-0" },
|
||||
h(
|
||||
"h4",
|
||||
{ className: "card-title" },
|
||||
h("a", { className: "text-decoration-none", href: link }, title)
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
className: "mb-0 btn btn-primary btn-sm text-decoration-none",
|
||||
href: link,
|
||||
},
|
||||
"Mehr anzeigen"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default CardShortcode;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
const Card = (child, opts = { vertical: false }) =>
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
className:
|
||||
"relative flex border border-slate-400 focus-within:border-blue-800 dark:focus-within:border-blue-100 focus-within:bg-slate-100 dark:focus-within:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 pb-3 cursor-text group/active" +
|
||||
(opts.vertical ? " flex-col" : ""),
|
||||
},
|
||||
child
|
||||
);
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
className:
|
||||
"relative flex border border-slate-400 focus-within:border-blue-800 dark:focus-within:border-blue-100 focus-within:bg-slate-100 dark:focus-within:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800 pb-3 cursor-text group/active top-3 bottom-3" +
|
||||
(opts.vertical ? " flex-col" : ""),
|
||||
},
|
||||
child
|
||||
);
|
||||
|
||||
export default Card;
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
const Image = ({ label, assetSource, handleOpenMediaLibrary }) =>
|
||||
h(
|
||||
"span",
|
||||
{ className: "flex flex-col w-full" },
|
||||
h(
|
||||
"label",
|
||||
{
|
||||
className:
|
||||
"w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
|
||||
},
|
||||
label
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ className: "flex flex-col gap-2 px-3 pt-2" },
|
||||
h(
|
||||
"span",
|
||||
{},
|
||||
h("img", {
|
||||
role: "presentation",
|
||||
src: assetSource,
|
||||
className: "object-cover max-w-full overflow-hidden",
|
||||
})
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ className: "flex gap-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"Bild auswählen"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
h(
|
||||
"span",
|
||||
{ className: "flex flex-col w-full" },
|
||||
h(
|
||||
"label",
|
||||
{
|
||||
className:
|
||||
"w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
|
||||
},
|
||||
label
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ className: "flex flex-col gap-2 px-3 pt-2" },
|
||||
h(
|
||||
"span",
|
||||
{},
|
||||
h("img", {
|
||||
role: "presentation",
|
||||
src: assetSource,
|
||||
className: "object-cover max-w-full overflow-hidden",
|
||||
})
|
||||
),
|
||||
h(
|
||||
"span",
|
||||
{ className: "flex gap-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"Bild auswählen"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
export default Image;
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
const TextField = ({ label, value, onChange }) =>
|
||||
h(
|
||||
"span",
|
||||
{ key: "text-" + label, className: "flex flex-col w-full" },
|
||||
h(
|
||||
"label",
|
||||
{
|
||||
className:
|
||||
"w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
|
||||
},
|
||||
label
|
||||
),
|
||||
h("input", {
|
||||
className:
|
||||
"MuiInout-Input w-full h-6 px-3 bg-transparent outline-none text-sm font-medium text-gray-900 dark:text-gray-100 cursor-default",
|
||||
value,
|
||||
onChange,
|
||||
})
|
||||
);
|
||||
h(
|
||||
"span",
|
||||
{ key: "text-" + label, className: "flex flex-col w-full" },
|
||||
h(
|
||||
"label",
|
||||
{
|
||||
className:
|
||||
"w-full flex text-xs font-bold dark:font-semibold group-focus-within/active:text-blue-500 group-hover/active:text-blue-500 cursor-text text-slate-500 dark:text-slate-400 px-3 pt-3",
|
||||
},
|
||||
label
|
||||
),
|
||||
h("input", {
|
||||
className:
|
||||
"MuiInout-Input w-full h-6 px-3 bg-transparent outline-none text-sm font-medium text-gray-900 dark:text-gray-100 cursor-default",
|
||||
value,
|
||||
onChange,
|
||||
})
|
||||
);
|
||||
|
||||
export default TextField;
|
||||
|
||||
@ -1,76 +1,76 @@
|
||||
import { Card, TextField } from "./components/index.js";
|
||||
|
||||
const DownloadShortcode = {
|
||||
label: "Download-Karte",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
var title = "";
|
||||
var link = "";
|
||||
const linkIndex = args.findIndex((arg) => arg.startsWith('link="'));
|
||||
const titleIndex = args.findIndex((arg) => arg.startsWith('title="'));
|
||||
for (let arg of args.slice(titleIndex, linkIndex)) {
|
||||
title += " " + arg.replaceAll("title=", "").replaceAll('"', "");
|
||||
}
|
||||
for (let arg of args.slice(linkIndex)) {
|
||||
link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
|
||||
}
|
||||
return { title: title.trim(), link: link.trim() };
|
||||
}
|
||||
label: "Download-Karte",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
var title = "";
|
||||
var link = "";
|
||||
const linkIndex = args.findIndex((arg) => arg.startsWith('link="'));
|
||||
const titleIndex = args.findIndex((arg) => arg.startsWith('title="'));
|
||||
for (let arg of args.slice(titleIndex, linkIndex)) {
|
||||
title += " " + arg.replaceAll("title=", "").replaceAll('"', "");
|
||||
}
|
||||
for (let arg of args.slice(linkIndex)) {
|
||||
link += " " + arg.replaceAll("link=", "").replaceAll('"', "");
|
||||
}
|
||||
return { title: title.trim(), link: link.trim() };
|
||||
}
|
||||
|
||||
return { title: "", link: "" };
|
||||
},
|
||||
toArgs: ({ title, link }) => {
|
||||
return [`title=\"${title}\"`, `link=\"${link}\"`];
|
||||
},
|
||||
control: ({ title, link, onChange }) => {
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Titel",
|
||||
value: title,
|
||||
onChange: (event) => {
|
||||
onChange({ title: event.target.value, link });
|
||||
},
|
||||
}),
|
||||
TextField({
|
||||
label: "Download-Link",
|
||||
value: link,
|
||||
onChange: (event) => {
|
||||
onChange({ title, link: event.target.value });
|
||||
},
|
||||
}),
|
||||
]);
|
||||
},
|
||||
preview: ({ title, link }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "container mb-0" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card border-primary rounded-0 hover-shadow mb-5" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card-body mb-0" },
|
||||
h(
|
||||
"h4",
|
||||
{ className: "card-title" },
|
||||
h("a", { className: "text-decoration-none", href: link }, title)
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
className: "mb-0 btn btn-primary btn-sm text-decoration-none",
|
||||
href: link,
|
||||
},
|
||||
h("i", { className: "mdi mdi-tray-arrow-down mb-0 me-2" }),
|
||||
"Download"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
return { title: "", link: "" };
|
||||
},
|
||||
toArgs: ({ title, link }) => {
|
||||
return [`title=\"${title}\"`, `link=\"${link}\"`];
|
||||
},
|
||||
control: ({ title, link, onChange }) => {
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Titel",
|
||||
value: title,
|
||||
onChange: (event) => {
|
||||
onChange({ title: event.target.value, link });
|
||||
},
|
||||
}),
|
||||
TextField({
|
||||
label: "Download-Link",
|
||||
value: link,
|
||||
onChange: (event) => {
|
||||
onChange({ title, link: event.target.value });
|
||||
},
|
||||
}),
|
||||
]);
|
||||
},
|
||||
preview: ({ title, link }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "container mb-0" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card border-primary rounded-0 hover-shadow mb-5" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card-body mb-0" },
|
||||
h(
|
||||
"h4",
|
||||
{ className: "card-title" },
|
||||
h("a", { className: "text-decoration-none", href: link }, title)
|
||||
),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
className: "mb-0 btn btn-primary btn-sm text-decoration-none",
|
||||
href: link,
|
||||
},
|
||||
h("i", { className: "mdi mdi-tray-arrow-down mb-0 me-2" }),
|
||||
"Download"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default DownloadShortcode;
|
||||
|
||||
@ -1,73 +1,73 @@
|
||||
import { Card, TextField } from "./components/index.js";
|
||||
|
||||
const GalleryShortcode = {
|
||||
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;
|
||||
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;
|
||||
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ dir: path });
|
||||
};
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ dir: path });
|
||||
};
|
||||
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
dir,
|
||||
{ collection, field, forFolder: true },
|
||||
handleChange
|
||||
);
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
dir,
|
||||
{ collection, field, forFolder: true },
|
||||
handleChange
|
||||
);
|
||||
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Gallerie-Ordner",
|
||||
value: dir,
|
||||
onChange: (event) => {
|
||||
onChange({ dir: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{ key: "gallery-button", className: "flex gap-2 pt-2 px-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
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)
|
||||
)
|
||||
);
|
||||
},
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Gallerie-Ordner",
|
||||
value: dir,
|
||||
onChange: (event) => {
|
||||
onChange({ dir: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{ key: "gallery-button", className: "flex gap-2 pt-2 px-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
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;
|
||||
|
||||
@ -2,63 +2,63 @@ import { Card, Image } from "./components/index.js";
|
||||
import { md5 } from "../previews/page-previews/components/index.js";
|
||||
|
||||
const ImageShortcode = {
|
||||
label: "Bild",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
return {
|
||||
src:
|
||||
args
|
||||
.find((arg) => arg.startsWith("src="))
|
||||
?.split("=")[1]
|
||||
.replaceAll('"', "") ?? "",
|
||||
};
|
||||
}
|
||||
label: "Bild",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
return {
|
||||
src:
|
||||
args
|
||||
.find((arg) => arg.startsWith("src="))
|
||||
?.split("=")[1]
|
||||
.replaceAll('"', "") ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
return { src: "" };
|
||||
},
|
||||
toArgs: ({ src }) => {
|
||||
return [`src=\"${src}\"`];
|
||||
},
|
||||
control: ({ src, onChange, controlProps }) => {
|
||||
const { collection, field, entry } = controlProps;
|
||||
return { src: "" };
|
||||
},
|
||||
toArgs: ({ src }) => {
|
||||
return [`src=\"${src}\"`];
|
||||
},
|
||||
control: ({ src, onChange, controlProps }) => {
|
||||
const { collection, field, entry } = controlProps;
|
||||
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ src: path });
|
||||
};
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ src: path });
|
||||
};
|
||||
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
src,
|
||||
{ collection, field },
|
||||
handleChange
|
||||
);
|
||||
const assetSource = useMediaAsset(src, collection, field, entry);
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
src,
|
||||
{ collection, field },
|
||||
handleChange
|
||||
);
|
||||
const assetSource = useMediaAsset(src, collection, field, entry);
|
||||
|
||||
return Card(
|
||||
Image({
|
||||
label: "Bild",
|
||||
assetSource,
|
||||
handleOpenMediaLibrary,
|
||||
})
|
||||
);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "col-lg-3 col-md-4 col-sm-6" },
|
||||
h(
|
||||
"a",
|
||||
{ className: "vb-gallery", "data-gall": md5(src) },
|
||||
h("img", {
|
||||
className: "img-thumbnail w-100 h-100",
|
||||
style: { objectFit: "cover" },
|
||||
src,
|
||||
})
|
||||
)
|
||||
);
|
||||
},
|
||||
return Card(
|
||||
Image({
|
||||
label: "Bild",
|
||||
assetSource,
|
||||
handleOpenMediaLibrary,
|
||||
})
|
||||
);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "col-lg-3 col-md-4 col-sm-6" },
|
||||
h(
|
||||
"a",
|
||||
{ className: "vb-gallery", "data-gall": md5(src) },
|
||||
h("img", {
|
||||
className: "img-thumbnail w-100 h-100",
|
||||
style: { objectFit: "cover" },
|
||||
src,
|
||||
})
|
||||
)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default ImageShortcode;
|
||||
|
||||
@ -7,11 +7,11 @@ import AudioShortcode from "./audio.js";
|
||||
import SliderShortcode from "./slider.js";
|
||||
|
||||
export {
|
||||
GalleryShortcode,
|
||||
ImageShortcode,
|
||||
DownloadShortcode,
|
||||
CardShortcode,
|
||||
YoutubeShortcode,
|
||||
AudioShortcode,
|
||||
SliderShortcode,
|
||||
GalleryShortcode,
|
||||
ImageShortcode,
|
||||
DownloadShortcode,
|
||||
CardShortcode,
|
||||
YoutubeShortcode,
|
||||
AudioShortcode,
|
||||
SliderShortcode,
|
||||
};
|
||||
|
||||
@ -1,73 +1,73 @@
|
||||
import { Card, TextField } from "./components/index.js";
|
||||
|
||||
const SliderShortcode = {
|
||||
label: "Bilderkarussell",
|
||||
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;
|
||||
label: "Bilderkarussell",
|
||||
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;
|
||||
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ dir: path });
|
||||
};
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ dir: path });
|
||||
};
|
||||
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
dir,
|
||||
{ collection, field, forFolder: true },
|
||||
handleChange
|
||||
);
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
dir,
|
||||
{ collection, field, forFolder: true },
|
||||
handleChange
|
||||
);
|
||||
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Bilderkarussell",
|
||||
value: dir,
|
||||
onChange: (event) => {
|
||||
onChange({ dir: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{ key: "slider-button", className: "flex gap-2 pt-2 px-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
preview: ({ dir }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "card mb-4" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card-body mb-0" },
|
||||
h("div", { className: "card-title h4" }, "Bilderkarussell"),
|
||||
h("div", { className: "card-text" }, dir)
|
||||
)
|
||||
);
|
||||
},
|
||||
return Card([
|
||||
TextField({
|
||||
label: "Bilderkarussell",
|
||||
value: dir,
|
||||
onChange: (event) => {
|
||||
onChange({ dir: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{ key: "slider-button", className: "flex gap-2 pt-2 px-2" },
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "btn btn-contained-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
preview: ({ dir }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "card mb-4" },
|
||||
h(
|
||||
"div",
|
||||
{ className: "card-body mb-0" },
|
||||
h("div", { className: "card-title h4" }, "Bilderkarussell"),
|
||||
h("div", { className: "card-text" }, dir)
|
||||
)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default SliderShortcode;
|
||||
|
||||
@ -1,59 +1,59 @@
|
||||
import { Card, TextField } from "./components/index.js";
|
||||
|
||||
const YoutubeShortcode = {
|
||||
label: "YouTube-Video",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
return { src: args[0] };
|
||||
}
|
||||
label: "YouTube-Video",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
return { src: args[0] };
|
||||
}
|
||||
|
||||
return { src: "" };
|
||||
},
|
||||
toArgs: ({ src }) => {
|
||||
return [src];
|
||||
},
|
||||
control: ({ src, onChange }) => {
|
||||
return Card(
|
||||
[
|
||||
TextField({
|
||||
label: "YouTube-Video-ID",
|
||||
value: src,
|
||||
onChange: (event) => {
|
||||
onChange({ src: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"iframe",
|
||||
{
|
||||
width: "100%",
|
||||
height: "360",
|
||||
src: `https://piped.kavin.rocks/embed/${src}`,
|
||||
className: "px-3 pt-3",
|
||||
},
|
||||
""
|
||||
),
|
||||
],
|
||||
{ vertical: true }
|
||||
);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"span",
|
||||
{},
|
||||
h(
|
||||
"iframe",
|
||||
{
|
||||
width: "420",
|
||||
height: "315",
|
||||
src: `https://piped.kavin.rocks/embed/${src}`,
|
||||
},
|
||||
""
|
||||
)
|
||||
);
|
||||
},
|
||||
return { src: "" };
|
||||
},
|
||||
toArgs: ({ src }) => {
|
||||
return [src];
|
||||
},
|
||||
control: ({ src, onChange }) => {
|
||||
return Card(
|
||||
[
|
||||
TextField({
|
||||
label: "YouTube-Video-ID",
|
||||
value: src,
|
||||
onChange: (event) => {
|
||||
onChange({ src: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"iframe",
|
||||
{
|
||||
width: "100%",
|
||||
height: "360",
|
||||
src: `https://piped.kavin.rocks/embed/${src}`,
|
||||
className: "px-3 pt-3",
|
||||
},
|
||||
""
|
||||
),
|
||||
],
|
||||
{ vertical: true }
|
||||
);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"span",
|
||||
{},
|
||||
h(
|
||||
"iframe",
|
||||
{
|
||||
width: "420",
|
||||
height: "315",
|
||||
src: `https://piped.kavin.rocks/embed/${src}`,
|
||||
},
|
||||
""
|
||||
)
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default YoutubeShortcode;
|
||||
|
||||
Reference in New Issue
Block a user