feat: integrate the subpage list script

This commit is contained in:
neri 2023-07-27 20:15:45 +02:00
parent b60c6cba86
commit 285c27f1f9
2 changed files with 76 additions and 24 deletions

View File

@ -9,7 +9,9 @@ anlegen kann.
Um auf einer Wiki-Seite ein Page-Listing hinzuzufügen muss in den Metadaten der Seite der Inhalt von
`metapage.js.html` als Skript gesetzt werden.
Dann kann an der gewünschten Stelle ein HTML-Element folgender Form eingefügt werden:
Dann können im Dokument die beiden folgenden HTML-Elemente benutzt werden:
### Gefilterte Liste mit Seiten aus dem ganzen Wiki
```html
<ul class="pagelist" data-query="QUERY"></ul>
@ -28,7 +30,24 @@ creatorId: Int
authorId: Int
```
### Beispiele
#### Details
- Mehrere Parameter müssen mit einem Komma getrennt werden
- Mehrere Tags im `tags`-Parameter müssen ebenfalls mit Komma getrennt werden
- Parameter vom Typ `String` müssen in einfache Anführungszeichen `'` eingeschlossen werden
- Parameter vom Typ `Int` und vom Typ `Enum` müssen ohne Anführungszeichen angegeben werden
### Liste mit allen Unterseiten von einer Seite
```html
<ul class="subpagelist" data-page-id="ID"></ul>
```
Dabei muss `ID` die interne ID von der Seite sein, deren Unterseiten aufgelistet werden sollen. Die
ID der Seite herauszufinden ist etwas nervig, es ist nicht die ID welche man im Admin-Interface
findet, man muss über die [GraphQL](https://wiki.ctdo.de/graphql) `tree` API die ID herausfinden.
## Beispiele
Liste aller Seiten die mit den Tags `top` und `new` versehen sind:
@ -45,12 +64,11 @@ Liste der 10 zuletzt bearbeiteten Seiten:
></ul>
```
### Details
Liste der Unterseiten von der Events-Seite:
- Mehrere Parameter müssen mit einem Komma getrennt werden
- Mehrere Tags im `tags`-Parameter müssen ebenfalls mit Komma getrennt werden
- Parameter vom Typ `String` müssen in einfache Anführungszeichen `'` eingeschlossen werden
- Parameter vom Typ `Int` und vom Typ `Enum` müssen ohne Anführungszeichen angegeben werden
```html
<ul class="subpagelist" data-page-id="61"></ul>
```
## Features und Einschränkungen

View File

@ -12,7 +12,7 @@
return await res.json();
}
async function loadPagelists() {
async function loadPageLists() {
console.log('populating page lists');
const pagelists = [...document.getElementsByClassName('pagelist')];
@ -27,6 +27,38 @@
const pages = result.data.pages.list.filter(
(page) => !page.path.includes('/_')
);
appendLinks(pages, element);
});
}
async function loadSubpageLists(parentId) {
console.log('populating subpage lists');
const pagelists = [...document.getElementsByClassName('subpagelist')];
pagelists.forEach(async (element) => {
console.log('processing', element);
/* currently not working, GraphQL gives wrong ID
// get page id from the given page
const parameters = element.getAttribute('data-query');
let query = `query { pages { singleByPath(path:"${parameters}", locale: "de") {id, path, title } }}`;
let result = await graphql(query);
console.log({ query, result });
*/
//const pageId = result.data.pages.singleByPath.id;
let pageId = element.getAttribute('data-page-id');
const query = `query { pages { tree(parent: ${pageId}, mode: ALL, locale: "de") { id, path, title } } }`;
const result = await graphql(query);
console.log({ query, result });
const pages = result.data.pages.tree.filter(
(page) => !page.path.includes('/_')
);
appendLinks(pages, element);
});
}
function appendLinks(pages, element) {
const pagelist = pages.map((page) => {
const link = document.createElement('a');
link.href = `/${page.path}`;
@ -40,7 +72,6 @@
});
pagelist.forEach((page) => element.appendChild(page));
});
}
async function isElementLoaded(selector) {
@ -50,5 +81,8 @@
return document.querySelector(selector);
}
isElementLoaded('.contents').then(() => loadPagelists());
isElementLoaded('.contents').then(() => {
loadPageLists();
loadSubpageLists();
});
</script>