Skip to Content

Wijzigen voor document Huisstijl

Laatst gewijzigd door Jeeves de Butler op 07-10-2026 01:56
Van versie 8.1
gewijzigd door Jeeves de Butler
op 05-10-2026 02:49
Opmerking bij wijziging: Er is geen opmerking bij deze versie
Naar versie 25.1
gewijzigd door Jeeves de Butler
op 07-10-2026 01:56
Opmerking bij wijziging: Er is geen opmerking bij deze versie

Samenvatting

Details

XWiki.JavaScriptExtension[0]
code
... ... @@ -41,6 +41,26 @@
41 41   return kaarten;
42 42   }
43 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 +
44 44   function maakKaart(k) {
45 45   var kaart = document.createElement(k.link ? 'a' : 'div');
46 46   kaart.className = 'wb-kaart';
... ... @@ -55,13 +55,14 @@
55 55   beeld.className = 'wb-kaart-beeld';
56 56   if (k.img) {
57 57   var img = document.createElement('img');
58 - img.src = k.img.currentSrc || k.img.src;
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);
59 59   img.alt = '';
60 60   img.loading = 'lazy';
61 61   img.decoding = 'async';
62 62   var geenBeeld = function () {
63 - beeld.classList.add('wb-kaart-geenbeeld');
64 64   img.remove();
85 + zetIcoon(beeld);
65 65   };
66 66   img.addEventListener('error', geenBeeld);
67 67   // Sommige externe sites geven bij een verdwenen afbeelding een leeg plaatje in plaats van een fout.
... ... @@ -72,7 +72,7 @@
72 72   });
73 73   beeld.appendChild(img);
74 74   } else {
75 - beeld.classList.add('wb-kaart-geenbeeld');
96 + zetIcoon(beeld);
76 76   }
77 77   var titel = document.createElement('span');
78 78   titel.className = 'wb-kaart-titel';
... ... @@ -106,12 +106,56 @@
106 106   Array.prototype.forEach.call(tabellen, function (tabel) {
107 107   try { verwerk(tabel); } catch (e) { /* bij een fout blijft de tabel gewoon zichtbaar */ }
108 108   });
130 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent ul.wikitoc'), eigenNummering);
131 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wbrb img'), scherpInfovak);
109 109   }
110 110  
134 + // Infovak: het origineel tonen in plaats van de kleine XWiki-verkleining, zodat de afbeelding op een breed scherm scherp blijft.
135 + // Bij een fout terug naar de verkleining. Het oude adres blijft bewaard voor herstel().
136 + function scherpInfovak(img) {
137 + var src = img.getAttribute('src') || '';
138 + if (img.hasAttribute('data-wb-src') || !/[?&](width|height)=/.test(src)) {
139 + return;
140 + }
141 + var groot = origineel(src);
142 + if (groot === src) {
143 + return;
144 + }
145 + img.setAttribute('data-wb-src', src);
146 + img.addEventListener('error', function terug() {
147 + img.removeEventListener('error', terug);
148 + img.setAttribute('src', src);
149 + });
150 + img.removeAttribute('srcset');
151 + img.setAttribute('src', groot);
152 + }
153 +
154 + // Inhoudsopgave: staan de nummers al in de koppen ("2.1 Mogelijkheden"), dan geen tweede nummering ervoor.
155 + // Beslist per inhoudsopgave, zodat die in zijn geheel genummerd of ongenummerd is.
156 + function eigenNummering(toc) {
157 + var links = toc.querySelectorAll('a');
158 + if (!links.length) {
159 + return;
160 + }
161 + var genummerd = 0;
162 + Array.prototype.forEach.call(links, function (a) {
163 + if (/^\s*\d+(\.\d+)*\.?\s/.test(a.textContent || '')) {
164 + genummerd++;
165 + }
166 + });
167 + if (genummerd / links.length >= 0.6) {
168 + toc.classList.add('wb-toc-eigen-nummers');
169 + }
170 + }
171 +
111 111   // Bij wijzigen op de pagina zelf: eerst de oorspronkelijke tabel terug, zodat de editor nooit de kaarten ziet.
112 112   function herstel() {
113 113   Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wb-kaarten'), function (r) { r.remove(); });
114 114   Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent table.wb-vervangen'), function (t) { t.classList.remove('wb-vervangen'); });
176 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wbrb img[data-wb-src]'), function (img) {
177 + img.setAttribute('src', img.getAttribute('data-wb-src'));
178 + img.removeAttribute('data-wb-src');
179 + });
115 115   }
116 116  
117 117   if (typeof window.require === 'function') {
... ... @@ -121,10 +121,30 @@
121 121   });
122 122   }
123 123  
189 + // Na opslaan bij wijzigen op de pagina zelf bouwt XWiki de inhoudsopgave opnieuw op zonder de pagina te herladen.
190 + // Daarom ook nieuwe inhoudsopgaven nalopen zodra ze verschijnen; niet binnen de editor, zodat niets in de tekst belandt.
191 + function nummersBijwerken() {
192 + Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent ul.wikitoc:not(.wb-toc-eigen-nummers)'), function (toc) {
193 + if (!toc.closest('[contenteditable="true"]')) {
194 + eigenNummering(toc);
195 + }
196 + });
197 + }
198 + var wachtend = null;
199 + if (window.MutationObserver) {
200 + new MutationObserver(function () {
201 + if (wachtend) {
202 + return;
203 + }
204 + wachtend = setTimeout(function () { wachtend = null; nummersBijwerken(); }, 100);
205 + }).observe(document.documentElement, { childList: true, subtree: true });
206 + }
207 +
124 124   if (document.readyState === 'loading') {
125 - document.addEventListener('DOMContentLoaded', start);
209 + document.addEventListener('DOMContentLoaded', function () { start(); nummersBijwerken(); });
126 126   } else {
127 127   start();
212 + nummersBijwerken();
128 128   }
129 129  })();
130 130  
XWiki.StyleSheetExtension[0]
Code
... ... @@ -109,10 +109,11 @@
109 109  
110 110  /* ---------- Infovak rechts (wbrechts) ---------- */
111 111  
112 +/* Groeit mee met de inhoudskolom: op een laptop als voorheen, op brede schermen ruimer voor de afbeelding */
112 112  .floatinginfobox.wbrechts {
113 113   width: 30%;
114 114   min-width: 260px;
115 - max-width: 340px;
116 + max-width: 460px;
116 116   margin: 0 0 16px 28px;
117 117   padding: 14px;
118 118   border: 1px solid #e8eaed;
... ... @@ -128,9 +128,10 @@
128 128   text-align: center;
129 129   margin-bottom: 12px;
130 130  }
132 +/* Nooit groter dan het origineel, zodat logo's klein en scherp blijven */
131 131  .wbrb img {
132 132   max-width: 100%;
133 - max-height: 150px;
135 + max-height: 280px;
134 134   width: auto;
135 135   height: auto;
136 136   border-radius: 10px;
... ... @@ -249,6 +249,11 @@
249 249   color: #80868b;
250 250   font-variant-numeric: tabular-nums;
251 251  }
254 +/* Koppen die zelf al genummerd zijn ("2.1 Mogelijkheden"): het script zet deze class, dan geen tweede nummer */
255 +#xwikicontent ul.wikitoc.wb-toc-eigen-nummers li > .wikilink::before,
256 +#xwikicontent ul.wikitoc.wb-toc-eigen-nummers ul li > .wikilink::before {
257 + content: none;
258 +}
252 252  #xwikicontent ul.wikitoc > li:not(.nodirectchild),
253 253  #xwikicontent ul.wikitoc > li.nodirectchild > ul > li {
254 254   margin-top: 10px;
... ... @@ -385,8 +385,9 @@
385 385  #leftPanels {
386 386   padding-left: 30px;
387 387  }
388 -/* Vaste ondergrens, zodat de menu-items ook op een laptop op één regel passen */
389 -#body.panel-left-width-Medium {
395 +/* Vaste ondergrens, zodat de menu-items ook op een laptop op één regel passen. Niet als de zijbalk is ingeklapt:
396 + dan zet XWiki de breedte op 0 en krijgt de inhoud de volle breedte. */
397 +#body.panel-left-width-Medium:not(.hideleft):not(.hidelefthideright) {
390 390   --panel-column-left-width: clamp(240px, 17vw, 290px);
391 391  }
392 392  .panels .xwikipanelcontents a {
... ... @@ -660,7 +660,7 @@
660 660   min-width: 0;
661 661   margin: 0 0 20px;
662 662   display: grid;
663 - grid-template-columns: 150px minmax(0, 1fr);
671 + grid-template-columns: 220px minmax(0, 1fr);
664 664   column-gap: 18px;
665 665   align-items: start;
666 666   }
... ... @@ -669,7 +669,7 @@
669 669   margin: 0;
670 670   }
671 671   .floatinginfobox.wbrechts > .wbrb img {
672 - max-height: 120px;
680 + max-height: 170px;
673 673   }
674 674   .floatinginfobox.wbrechts > *:not(.wbrb) {
675 675   grid-column: 2;
... ... @@ -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";
775 +/* Geen of verdwenen afbeelding: het script zet er een boekpictogram in (geen backslash-codes in deze CSS:
776 + de CSS-verkleiner van XWiki breekt die, en dan valt de rest van het bestand weg). */
777 +.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  }
792 +/* Grote schermen: grote kaarten, foto's in hun oorspronkelijke 3:2-verhouding */
793 +@media (min-width: 1200px) {
794 + .wb-kaarten {
795 + grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
796 + gap: 26px;
797 + }
798 + .wb-kaart-beeld {
799 + aspect-ratio: 3 / 2;
800 + }
801 + .wb-kaart-titel {
802 + padding: 14px 18px 16px;
803 + font-size: 17px;
804 + }
805 +}
806 +@media (min-width: 1800px) {
807 + .wb-kaarten {
808 + grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
809 + }
810 +}
784 784  
785 785  /* Zonder script: de tabel past in elk geval binnen het scherm */
786 786  #xwikicontent table.vgmtabel {
... ... @@ -821,6 +821,65 @@
821 821   text-indent: 0 !important;
822 822  }
823 823  
851 +/* ---------- Overzicht van onderliggende pagina's (startpagina van een onderdeel) ---------- */
852 +
853 +.wb-overzicht {
854 + list-style: none;
855 + display: grid;
856 + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
857 + gap: 10px;
858 + margin: 14px 0 28px;
859 + padding: 0;
860 +}
861 +.wb-overzicht li {
862 + margin: 0;
863 +}
864 +#body #xwikicontent .wb-overzicht a {
865 + display: flex;
866 + align-items: center;
867 + gap: 12px;
868 + height: 100%;
869 + padding: 12px 14px;
870 + border: 1px solid #e8eaed;
871 + border-radius: 10px;
872 + background: #ffffff;
873 + color: #202124;
874 + text-decoration: none;
875 + transition: border-color .15s ease, box-shadow .15s ease;
876 +}
877 +#body #xwikicontent .wb-overzicht a:hover,
878 +#body #xwikicontent .wb-overzicht a:focus {
879 + border-color: #ffb447;
880 + box-shadow: 0 2px 10px rgba(31, 35, 40, .08);
881 +}
882 +.wb-overzicht-icoon {
883 + flex: none;
884 + width: 36px;
885 + height: 36px;
886 + display: flex;
887 + align-items: center;
888 + justify-content: center;
889 + border-radius: 50%;
890 + background: #ffefd5;
891 + color: #b86e00;
892 + font-size: 16px;
893 + text-align: center;
894 +}
895 +.wb-overzicht strong {
896 + display: block;
897 + font-weight: 500;
898 + line-height: 1.3;
899 +}
900 +.wb-overzicht small {
901 + display: block;
902 + margin-top: 2px;
903 + font-size: 13px;
904 + color: #5f6368;
905 +}
906 +.wb-overzicht-leeg {
907 + color: #5f6368;
908 +}
909 +
824 824  /* ---------- Telefoon ---------- */
825 825  
826 826  @media (max-width: 767px) {
... ... @@ -832,7 +832,7 @@
832 832   margin: 0 0 16px;
833 833   }
834 834   .wbrb img {
835 - max-height: 110px;
921 + max-height: 200px;
836 836   }
837 837   #xwikicontent table:not(.wbinfotab table) {
838 838   display: block;
... ... @@ -867,3 +867,35 @@
867 867   }
868 868  }
869 869  
956 +/* Overzichtstabellen (livetable): woorden heel laten, lange adressen afkappen met ...; bij aanwijzen het volledige adres */
957 +#xwikicontent table.xwiki-livetable {
958 + font-size: 14px;
959 +}
960 +#xwikicontent .xwiki-livetable-display-header th,
961 +#xwikicontent .xwiki-livetable-display-body td {
962 + padding: 6px 7px;
963 +}
964 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td {
965 + word-break: normal;
966 + overflow-wrap: break-word;
967 + hyphens: manual;
968 +}
969 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL,
970 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL {
971 + max-width: 140px;
972 + white-space: nowrap;
973 + overflow: hidden;
974 + text-overflow: ellipsis;
975 +}
976 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL:hover,
977 +#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL:hover {
978 + white-space: normal;
979 + overflow-wrap: anywhere;
980 +}
981 +/* Een brede overzichtstabel blijft binnen de pagina en schuift zo nodig opzij */
982 +#xwikicontent table.xwiki-livetable {
983 + display: block;
984 + max-width: 100%;
985 + overflow-x: auto;
986 +}
987 +