mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-24 09:29:37 +01:00
54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
import { pages, styles } from "../ssr.js";
|
|
styles.scope(prevNext).css`
|
|
:host{
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 1fr;
|
|
margin-top: 1rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
:host [rel=prev]{
|
|
grid-column: 1;
|
|
}
|
|
:host [rel=next]{
|
|
grid-column: 3;
|
|
text-align: right;
|
|
}
|
|
`;
|
|
import { el } from "../../index.js";
|
|
/**
|
|
* @param {Object} attrs
|
|
* @param {string} attrs.textContent
|
|
* @param {string} [attrs.id]
|
|
* */
|
|
export function h3({ textContent, id }){
|
|
if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
|
|
return el("h3", { id }).append(
|
|
el("a", { textContent: "§", href: "#"+id, tabIndex: -1 }),
|
|
" ", textContent
|
|
);
|
|
}
|
|
/**
|
|
* @param {import("../types.d.ts").Info} page
|
|
* */
|
|
export function prevNext(page){
|
|
const page_index= pages.indexOf(page);
|
|
return el("div", { className: prevNext.name }).append(
|
|
el(pageLink, { rel: "prev", page: pages[page_index-1] }),
|
|
el(pageLink, { rel: "next", page: pages[page_index+1] })
|
|
);
|
|
}
|
|
/**
|
|
* @param {Object} attrs
|
|
* @param {"prev"|"next"} attrs.rel
|
|
* @param {import("../types.d.ts").Info} [attrs.page]
|
|
* */
|
|
function pageLink({ rel, page }){
|
|
if(!page) return el();
|
|
let { href, title, description }= page;
|
|
return el("a", { rel, href, title: description }).append(
|
|
rel==="next" ?"(next) " : "",
|
|
title,
|
|
rel==="prev" ? " (previous)" : "",
|
|
);
|
|
}
|