Добавил lightbox

This commit is contained in:
Artem VV 2023-05-19 21:15:27 +07:00
parent c64d3bf2d9
commit 05789a0599
10 changed files with 66 additions and 2 deletions

View file

@ -113,9 +113,16 @@ async function deleteArticle(articleId) {
}
return `<blockquote class="blockquote"><p>${text}</p></blockquote>`;
}
function image(data) {
const {file, caption} = data.data;
if (caption && caption.length > 0) {
return `<a href="${file.url}" data-lightbox="${file.url}" data-title="${caption}"><img class="rendered-image" src="${file.url}"/></a>`;
}
return `<a href="${file.url}" data-lightbox="${file.url}"><img class="rendered-image" src="${file.url}"/></a>`;
}
document.addEventListener("DOMContentLoaded", () => {
const edjsParser = edjsHTML({ checklist, quote });
const edjsParser = edjsHTML({ checklist, quote, image });
document.querySelectorAll("[data-article]").forEach(e => {
e.innerHTML = edjsParser.parse(JSON.parse(e.dataset["article"])).reduce((a,b) => a+b, "");
});

View file

@ -16,8 +16,17 @@ const { title } = Astro.props;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<link rel="stylesheet" href="/assets/css/lightbox.min.css" />
<script is:inline src="/assets/js/lightbox-plus-jquery.min.js"></script>
</head>
<body>
<slot />
</body>
</html>
<style is:global>
img.rendered-image {
max-height: 300px;
}
</style>

View file

@ -216,8 +216,16 @@ const isCurrentUser = user.id === openedUser.id;
}
return `<blockquote class="blockquote"><p>${text}</p></blockquote>`;
}
function image(data) {
const {file, caption} = data.data;
if (caption && caption.length > 0) {
return `<a href="${file.url}" data-lightbox="${file.url}" data-title="${caption}"><img class="rendered-image" src="${file.url}"/></a>`;
}
return `<a href="${file.url}" data-lightbox="${file.url}"><img class="rendered-image" src="${file.url}"/></a>`;
}
function init() {
const edjsParser = edjsHTML({ checklist, quote });
const edjsParser = edjsHTML({ checklist, quote, image });
try {
const article = JSON.parse(document.querySelector("[data-lore]").dataset["lore"]);
if (article) {