Files
.gitea
assets
content
data
layouts
static
admin
config
links
previews
shortcodes
audio.js
card.js
components.js
download.js
gallery.js
image.js
index.js
slider.js
youtube.js
icons.js
index.html
data
media
schulchronik
favicon.ico
.gitignore
.mailmap
LICENSE
config.yml
go.mod
go.sum
renovate.json
gcg-website/static/admin/shortcodes/card.js

72 lines
1.8 KiB
JavaScript

import { Card, TextField, Label } from "./components.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.trimStart(), link: link.trim() };
}
return { title: "", link: "" };
},
toArgs: ({ title, link }) => {
return [`title=\"${title}\"`, `link=\"${link}\"`];
},
control: ({ title, link, onChange }) => {
return Card([
Label("Titel"),
TextField({
value: title,
onChange: (event) => {
onChange({ title: event.target.value.trimStart(), link });
},
}),
Label("Link"),
TextField({
value: link,
onChange: (event) => {
onChange({ title, link: event.target.value });
},
}),
]);
},
preview: ({ title, link }) => {
return h(
"div",
{ className: "card border-primary rounded-0 hover-shadow mb-2" },
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;