feat: integrate the subpage list script

README.md

@@ -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
 

metapage.js.html

@@ -12,8 +12,8 @@
     return await res.json();
   }
 
-  async function loadPagelists() {
-    console.log('populating pagelists');
+  async function loadPageLists() {
+    console.log('populating page lists');
 
     const pagelists = [...document.getElementsByClassName('pagelist')];
     pagelists.forEach(async (element) => {
@@ -21,28 +21,59 @@
       const parameters = element
         .getAttribute('data-query')
         .replaceAll("'", '"');
-      const query = `query { pages { list(${parameters}) { path, title } }}`;
+      const query = `query { pages { list(${parameters}) { path, title } } }`;
       const result = await graphql(query);
       console.log({ query, result });
       const pages = result.data.pages.list.filter(
         (page) => !page.path.includes('/_')
       );
-      const pagelist = pages.map((page) => {
-        const link = document.createElement('a');
-        link.href = `/${page.path}`;
-        link.classList.add('is-internal-link');
-        link.classList.add('is-valid-page');
-        link.textContent = page.title;
-
-        const listItem = document.createElement('li');
-        listItem.appendChild(link);
-        return listItem;
-      });
-
-      pagelist.forEach((page) => element.appendChild(page));
+      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}`;
+      link.classList.add('is-internal-link');
+      link.classList.add('is-valid-page');
+      link.textContent = page.title;
+
+      const listItem = document.createElement('li');
+      listItem.appendChild(link);
+      return listItem;
+    });
+
+    pagelist.forEach((page) => element.appendChild(page));
+  }
+
   async function isElementLoaded(selector) {
     while (document.querySelector(selector) === null) {
       await new Promise((resolve) => requestAnimationFrame(resolve));
@@ -50,5 +81,8 @@
     return document.querySelector(selector);
   }
 
-  isElementLoaded('.contents').then(() => loadPagelists());
+  isElementLoaded('.contents').then(() => {
+    loadPageLists();
+    loadSubpageLists();
+  });
 </script>