View source for DPL Test



{{#dpl:
|category = Media Pages
|include = {MediaInfo}:publication:year:illustrator:chapter:illustration:title:tags:[[%TITLE%]]
|table = class="wikitable datatable hover" id="DPL" 
data-layout='{"top1Start":"searchBuilder"}' 
data-language='<nowiki>{"searchPlaceholder":" Quick Search",  "search":"", "searchBuilder":{"add":"Add Search Condition"}}</nowiki>' 
data-page-length="50",-,Publication, Year, Illustrator, Chapter, Illustration, Title, Tags,ID
|tablerow=style="width:5%;"¦%%, %%, style="width:5%;"¦%%, %%, style="width:5%;"¦%%, style="width:5%;"¦%%, class="type" style="width:5%;"¦%%,
style="width:5%;"¦%%, style="width:5%;"¦%%
|ordermethod = title
|order=ascending
}}
<html>
<hr>

<button id="generateCatalogHTML">
Generate static Catalog HTML from DPL
</button>

<pre id="catalogOutput"
     style="white-space:pre-wrap; max-height:600px; overflow:auto; background:#f8f8f8; padding:1em;">
</pre>
<script>
(function () {

  function normalizeFileTitle(rawUrl) {
    if (!rawUrl) return null;

    try {
      const url = new URL(rawUrl.trim());
      let title = url.searchParams.get('title');
      if (!title) return null;

      title = title.replace(/\.jpg$/i, '');
      return title.toLowerCase();
    } catch {
      return null;
    }
  }

  function buildCatalogRow(data) {
    return `
<tr>
<td align="left"><font face="Liberation Serif">${data.book}</font></td>
<td align="right" sdnum="1031;" sdval="${data.year}">
  <font face="Liberation Serif">${data.year}</font>
</td>
<td align="left"><font face="Liberation Serif">${data.illustrator}</font></td>
<td align="center" sdnum="1031;" sdval="${data.chapter}">
  <font face="Liberation Serif">${data.chapter}</font>
</td>
<td align="center" sdnum="1031;" sdval="${data.chapter}">
  <font face="Liberation Serif">${data.chapter}</font>
</td>
<td align="center" sdnum="1031;" sdval="${data.illustration}">
  <font face="Liberation Serif">${data.illustration}</font>
</td>
<td align="left"><font face="Liberation Serif">${data.title}</font></td>
<td align="left"><font face="Liberation Serif">-${data.tags.replace(/,\s*/g, ' -')}</font></td>
<td align="left">
  <a href="/index.php/Special:Redirect/file/${data.file}.jpg">
    ${data.file}
  </a>
</td>
</tr>`;
  }

  document.getElementById('generateCatalogHTML')
    .addEventListener('click', function () {

      const dplTable = document.getElementById('DPL');
      if (!dplTable) {
        alert('DPL table not found.');
        return;
      }

      const rows = dplTable.querySelectorAll('tbody tr');
      let outputRows = [];

      rows.forEach(row => {
        const cells = row.querySelectorAll('td');

        if (cells.length < 8) return;

        const rawTitleLink = cells[0].querySelector('a')?.href;
        const fileBase = normalizeFileTitle(rawTitleLink);
        if (!fileBase) return;

        const rowData = {
          book: cells[1].innerText.trim(),
          year: cells[2].innerText.trim(),
          illustrator: cells[3].innerText.trim(),
          chapter: cells[4].innerText.trim(),
          illustration: cells[5].innerText.trim(),
          title: cells[6].innerText.trim(),
          tags: cells[7].innerText.trim(),
          file: fileBase
        };

        outputRows.push(buildCatalogRow(rowData));
      });

      const finalHTML = `
<table id="catalog" class="wikitable" style="width:100%">
<thead>
<tr>
<th>Book</th>
<th>Year</th>
<th>Illustrator</th>
<th>Og.Chpt.</th>
<th>Chpt.</th>
<th>Ill. in Chpt.</th>
<th>Illustration Title</th>
<th>Tags</th>
<th>ID</th>
</tr>
</thead>
<tbody>
${outputRows.join('\n')}
</tbody>
</table>`.trim();

      document.getElementById('catalogOutput').textContent = finalHTML;
    });

})();
</script>
</html>