Wijzigen voor document Huisstijl
Laatst gewijzigd door Jeeves de Butler op 07-10-2026 01:56
Van versie 7.1
gewijzigd door Jeeves de Butler
op 05-10-2026 02:49
op 05-10-2026 02:49
Opmerking bij wijziging:
Er is geen opmerking bij deze versie
Naar versie 17.1
gewijzigd door Jeeves de Butler
op 05-10-2026 03:49
op 05-10-2026 03:49
Opmerking bij wijziging:
Er is geen opmerking bij deze versie
Samenvatting
-
Objecten (1 gewijzigd, 1 toegevoegd, 0 verwijderd)
Details
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -764,13 +764,13 @@ 764 764 .wb-kaart:hover .wb-kaart-beeld img { 765 765 transform: scale(1.03); 766 766 } 767 -.wb-kaart-geenbeeld::before { 768 - content: "02d"; 767 +/* Geen of verdwenen afbeelding: het script zet er een boekpictogram in (geen backslash-codes in deze CSS: 768 + de CSS-verkleiner van XWiki breekt die, en dan valt de rest van het bestand weg). */ 769 +.wb-kaart-icoon { 769 769 position: absolute; 770 770 top: 50%; 771 771 left: 50%; 772 772 transform: translate(-50%, -50%); 773 - font-family: FontAwesome; 774 774 font-size: 34px; 775 775 color: #b86e00; 776 776 opacity: .5; ... ... @@ -781,6 +781,25 @@ 781 781 font-weight: 500; 782 782 line-height: 1.35; 783 783 } 784 +/* Grote schermen: grote kaarten, foto's in hun oorspronkelijke 3:2-verhouding */ 785 +@media (min-width: 1200px) { 786 + .wb-kaarten { 787 + grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); 788 + gap: 26px; 789 + } 790 + .wb-kaart-beeld { 791 + aspect-ratio: 3 / 2; 792 + } 793 + .wb-kaart-titel { 794 + padding: 14px 18px 16px; 795 + font-size: 17px; 796 + } 797 +} 798 +@media (min-width: 1800px) { 799 + .wb-kaarten { 800 + grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); 801 + } 802 +} 784 784 785 785 /* Zonder script: de tabel past in elk geval binnen het scherm */ 786 786 #xwikicontent table.vgmtabel { ... ... @@ -867,3 +867,35 @@ 867 867 } 868 868 } 869 869 889 +/* Overzichtstabellen (livetable): woorden heel laten, lange adressen afkappen met ...; bij aanwijzen het volledige adres */ 890 +#xwikicontent table.xwiki-livetable { 891 + font-size: 14px; 892 +} 893 +#xwikicontent .xwiki-livetable-display-header th, 894 +#xwikicontent .xwiki-livetable-display-body td { 895 + padding: 6px 7px; 896 +} 897 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td { 898 + word-break: normal; 899 + overflow-wrap: break-word; 900 + hyphens: manual; 901 +} 902 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL, 903 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL { 904 + max-width: 140px; 905 + white-space: nowrap; 906 + overflow: hidden; 907 + text-overflow: ellipsis; 908 +} 909 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL:hover, 910 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL:hover { 911 + white-space: normal; 912 + overflow-wrap: anywhere; 913 +} 914 +/* Een brede overzichtstabel blijft binnen de pagina en schuift zo nodig opzij */ 915 +#xwikicontent table.xwiki-livetable { 916 + display: block; 917 + max-width: 100%; 918 + overflow-x: auto; 919 +} 920 +
- XWiki.JavaScriptExtension[0]
-
- cache
-
... ... @@ -1,0 +1,1 @@ 1 +long - code
-
... ... @@ -1,0 +1,151 @@ 1 +/* Wardenburg Kennisbank; presentatie van tegeltabellen (class "vgmtabel"). 2 + Een tegeltabel is een rij met titels (kopcellen) met daaronder een rij met afbeeldingen die naar een pagina linken. 3 + Dit script toont dezelfde titels, afbeeldingen en links als een rustig kaartenraster. De pagina zelf verandert niet: 4 + de tabel blijft in de pagina staan en wordt alleen verborgen. Werkt alleen in de leesweergave. */ 5 +(function () { 6 + 'use strict'; 7 + 8 + function cellen(rij) { 9 + return rij ? Array.prototype.slice.call(rij.cells) : []; 10 + } 11 + 12 + function isKopRij(rij) { 13 + var c = cellen(rij); 14 + return c.length > 0 && c.every(function (cel) { return cel.tagName === 'TH'; }); 15 + } 16 + 17 + function kaartenUitTabel(tabel) { 18 + var rijen = Array.prototype.slice.call(tabel.rows); 19 + var kaarten = []; 20 + for (var i = 0; i < rijen.length; i++) { 21 + var kop = rijen[i]; 22 + if (!isKopRij(kop)) { 23 + continue; 24 + } 25 + var beeldRij = rijen[i + 1] && !isKopRij(rijen[i + 1]) ? rijen[i + 1] : null; 26 + var beeldCellen = cellen(beeldRij); 27 + cellen(kop).forEach(function (th, j) { 28 + var td = beeldCellen[j] || null; 29 + var titel = (th.textContent || '').replace(/\s+/g, ' ').trim(); 30 + var img = (td && td.querySelector('img')) || th.querySelector('img'); 31 + var link = (td && td.querySelector('a[href]')) || th.querySelector('a[href]'); 32 + if (!titel && !img) { 33 + return; 34 + } 35 + kaarten.push({ titel: titel || (img && img.getAttribute('alt')) || '', img: img, link: link }); 36 + }); 37 + if (beeldRij) { 38 + i++; 39 + } 40 + } 41 + return kaarten; 42 + } 43 + 44 + // Adres van de oorspronkelijke afbeelding: zonder de width- en height-parameters waarmee XWiki verkleint. 45 + function origineel(src) { 46 + try { 47 + var url = new URL(src, window.location.href); 48 + url.searchParams.delete('width'); 49 + url.searchParams.delete('height'); 50 + return url.toString(); 51 + } catch (e) { 52 + return src; 53 + } 54 + } 55 + 56 + function zetIcoon(beeld) { 57 + beeld.classList.add('wb-kaart-geenbeeld'); 58 + var icoon = document.createElement('span'); 59 + icoon.className = 'fa fa-book wb-kaart-icoon'; 60 + icoon.setAttribute('aria-hidden', 'true'); 61 + beeld.appendChild(icoon); 62 + } 63 + 64 + function maakKaart(k) { 65 + var kaart = document.createElement(k.link ? 'a' : 'div'); 66 + kaart.className = 'wb-kaart'; 67 + if (k.link) { 68 + kaart.setAttribute('href', k.link.getAttribute('href')); 69 + if (k.link.getAttribute('target')) { 70 + kaart.setAttribute('target', k.link.getAttribute('target')); 71 + kaart.setAttribute('rel', 'noopener'); 72 + } 73 + } 74 + var beeld = document.createElement('span'); 75 + beeld.className = 'wb-kaart-beeld'; 76 + if (k.img) { 77 + var img = document.createElement('img'); 78 + // Het origineel laden in plaats van de door XWiki verkleinde versie (?width=…&height=…), zodat grote kaarten scherp zijn. 79 + img.src = origineel(k.img.currentSrc || k.img.src); 80 + img.alt = ''; 81 + img.loading = 'lazy'; 82 + img.decoding = 'async'; 83 + var geenBeeld = function () { 84 + img.remove(); 85 + zetIcoon(beeld); 86 + }; 87 + img.addEventListener('error', geenBeeld); 88 + // Sommige externe sites geven bij een verdwenen afbeelding een leeg plaatje in plaats van een fout. 89 + img.addEventListener('load', function () { 90 + if (!img.naturalWidth || img.naturalWidth < 4) { 91 + geenBeeld(); 92 + } 93 + }); 94 + beeld.appendChild(img); 95 + } else { 96 + zetIcoon(beeld); 97 + } 98 + var titel = document.createElement('span'); 99 + titel.className = 'wb-kaart-titel'; 100 + titel.textContent = k.titel; 101 + kaart.appendChild(beeld); 102 + kaart.appendChild(titel); 103 + return kaart; 104 + } 105 + 106 + function verwerk(tabel) { 107 + if (tabel.classList.contains('wb-vervangen')) { 108 + return; 109 + } 110 + var kaarten = kaartenUitTabel(tabel); 111 + if (!kaarten.length) { 112 + return; 113 + } 114 + var raster = document.createElement('div'); 115 + raster.className = 'wb-kaarten'; 116 + kaarten.forEach(function (k) { raster.appendChild(maakKaart(k)); }); 117 + tabel.parentNode.insertBefore(raster, tabel.nextSibling); 118 + tabel.classList.add('wb-vervangen'); 119 + } 120 + 121 + function start() { 122 + var actie = (window.XWiki && window.XWiki.contextaction) || 'view'; 123 + if (actie !== 'view') { 124 + return; 125 + } 126 + var tabellen = document.querySelectorAll('#xwikicontent table.vgmtabel'); 127 + Array.prototype.forEach.call(tabellen, function (tabel) { 128 + try { verwerk(tabel); } catch (e) { /* bij een fout blijft de tabel gewoon zichtbaar */ } 129 + }); 130 + } 131 + 132 + // Bij wijzigen op de pagina zelf: eerst de oorspronkelijke tabel terug, zodat de editor nooit de kaarten ziet. 133 + function herstel() { 134 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wb-kaarten'), function (r) { r.remove(); }); 135 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent table.wb-vervangen'), function (t) { t.classList.remove('wb-vervangen'); }); 136 + } 137 + 138 + if (typeof window.require === 'function') { 139 + window.require(['jquery'], function ($) { 140 + $(document).on('xwiki:actions:edit', herstel); 141 + $(document).on('xwiki:actions:view', function () { setTimeout(start, 0); }); 142 + }); 143 + } 144 + 145 + if (document.readyState === 'loading') { 146 + document.addEventListener('DOMContentLoaded', start); 147 + } else { 148 + start(); 149 + } 150 +})(); 151 + - name
-
... ... @@ -1,0 +1,1 @@ 1 +Wardenburg tegels als kaarten - parse
-
... ... @@ -1,0 +1,1 @@ 1 +Nee - use
-
... ... @@ -1,0 +1,1 @@ 1 +always