Skip to Content

Wijzigen voor document Huisstijl

Laatst gewijzigd door Jeeves de Butler op 07-10-2026 01:56
Van versie 20.1
gewijzigd door Jeeves de Butler
op 05-10-2026 04:54
Opmerking bij wijziging: Er is geen opmerking bij deze versie
Naar versie 5.1
gewijzigd door Jeeves de Butler
op 05-10-2026 01:21
Opmerking bij wijziging: Er is geen opmerking bij deze versie

Samenvatting

Details

Paginaeigenschappen
Inhoud
... ... @@ -1,4 +1,4 @@
1 -Huisstijl van de Wardenburg Kennisbank. Het object //StyleSheetExtension// op deze pagina (de opmaak) en het object //JavaScriptExtension// (kaartenraster voor tegeltabellen, alleen presentatie) worden op elke pagina geladen.
1 +Huisstijl van de Wardenburg Kennisbank. Het object //StyleSheetExtension// op deze pagina wordt op elke pagina geladen.
2 2  
3 3  Kleuren en lettertypen staan in het kleurthema [[Wardenburg>>doc:FlamingoThemes.Wardenburg]]. Zie het [[register van eigen aanpassingen>>doc:Wardenburg.Code.WebHome]].
4 4  
XWiki.JavaScriptExtension[0]
cache
... ... @@ -1,1 +1,0 @@
1 -long
code
... ... @@ -1,170 +1,0 @@
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 - Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent ul.wikitoc'), eigenNummering);
131 - }
132 -
133 - // Inhoudsopgave: staan de nummers al in de koppen ("2.1 Mogelijkheden"), dan geen tweede nummering ervoor.
134 - // Beslist per inhoudsopgave, zodat die in zijn geheel genummerd of ongenummerd is.
135 - function eigenNummering(toc) {
136 - var links = toc.querySelectorAll('a');
137 - if (!links.length) {
138 - return;
139 - }
140 - var genummerd = 0;
141 - Array.prototype.forEach.call(links, function (a) {
142 - if (/^\s*\d+(\.\d+)*\.?\s/.test(a.textContent || '')) {
143 - genummerd++;
144 - }
145 - });
146 - if (genummerd / links.length >= 0.6) {
147 - toc.classList.add('wb-toc-eigen-nummers');
148 - }
149 - }
150 -
151 - // Bij wijzigen op de pagina zelf: eerst de oorspronkelijke tabel terug, zodat de editor nooit de kaarten ziet.
152 - function herstel() {
153 - Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wb-kaarten'), function (r) { r.remove(); });
154 - Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent table.wb-vervangen'), function (t) { t.classList.remove('wb-vervangen'); });
155 - }
156 -
157 - if (typeof window.require === 'function') {
158 - window.require(['jquery'], function ($) {
159 - $(document).on('xwiki:actions:edit', herstel);
160 - $(document).on('xwiki:actions:view', function () { setTimeout(start, 0); });
161 - });
162 - }
163 -
164 - if (document.readyState === 'loading') {
165 - document.addEventListener('DOMContentLoaded', start);
166 - } else {
167 - start();
168 - }
169 -})();
170 -
name
... ... @@ -1,1 +1,0 @@
1 -Wardenburg tegels als kaarten
parse
... ... @@ -1,1 +1,0 @@
1 -Nee
use
... ... @@ -1,1 +1,0 @@
1 -always
XWiki.StyleSheetExtension[0]
Code
... ... @@ -249,11 +249,6 @@
249 249   color: #80868b;
250 250   font-variant-numeric: tabular-nums;
251 251  }
252 -/* Koppen die zelf al genummerd zijn ("2.1 Mogelijkheden"): het script zet deze class, dan geen tweede nummer */
253 -#xwikicontent ul.wikitoc.wb-toc-eigen-nummers li > .wikilink::before,
254 -#xwikicontent ul.wikitoc.wb-toc-eigen-nummers ul li > .wikilink::before {
255 - content: none;
256 -}
257 257  #xwikicontent ul.wikitoc > li:not(.nodirectchild),
258 258  #xwikicontent ul.wikitoc > li.nodirectchild > ul > li {
259 259   margin-top: 10px;
... ... @@ -691,219 +691,6 @@
691 691   }
692 692  }
693 693  
694 -/* ---------- Paginakop: titel en knoppen naast elkaar ---------- */
695 -
696 -@media (min-width: 992px) {
697 - #mainContentArea > .document-header {
698 - display: flex;
699 - align-items: flex-start;
700 - gap: 16px;
701 - }
702 - #mainContentArea > .document-header::before,
703 - #mainContentArea > .document-header::after {
704 - content: none;
705 - }
706 - #mainContentArea > .document-header > .document-info {
707 - flex: 1 1 auto;
708 - width: auto;
709 - min-width: 0;
710 - }
711 - #mainContentArea > .document-header > .document-menu {
712 - flex: 0 0 auto;
713 - width: auto;
714 - }
715 - #mainContentArea > .document-header #contentmenu {
716 - float: none;
717 - display: flex;
718 - flex-wrap: nowrap;
719 - }
720 -}
721 -
722 -/* ---------- Tegels (vgmtabel) als kaarten ---------- */
723 -
724 -/* Het script huisstijl.js zet een tegeltabel om in een kaartenraster en verbergt de tabel. */
725 -#xwikicontent table.vgmtabel.wb-vervangen {
726 - display: none !important;
727 -}
728 -.wb-kaarten {
729 - display: grid;
730 - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
731 - gap: 18px;
732 - margin: 14px 0 30px;
733 - clear: none;
734 -}
735 -#body #xwikicontent a.wb-kaart,
736 -.wb-kaart {
737 - display: flex;
738 - flex-direction: column;
739 - overflow: hidden;
740 - border: 1px solid #e8eaed;
741 - border-radius: 12px;
742 - background: #ffffff;
743 - color: #202124;
744 - text-decoration: none;
745 - transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
746 -}
747 -#body #xwikicontent a.wb-kaart:hover,
748 -#body #xwikicontent a.wb-kaart:focus {
749 - border-color: #ffb447;
750 - box-shadow: 0 4px 14px rgba(31, 35, 40, .10);
751 - transform: translateY(-2px);
752 - color: #202124;
753 -}
754 -.wb-kaart-beeld {
755 - display: block;
756 - position: relative;
757 - aspect-ratio: 16 / 10;
758 - overflow: hidden;
759 - background: #f1f3f4;
760 -}
761 -.wb-kaart-beeld img {
762 - display: block;
763 - width: 100% !important;
764 - height: 100% !important;
765 - max-width: none;
766 - object-fit: cover;
767 - transition: transform .25s ease;
768 -}
769 -.wb-kaart:hover .wb-kaart-beeld img {
770 - transform: scale(1.03);
771 -}
772 -/* Geen of verdwenen afbeelding: het script zet er een boekpictogram in (geen backslash-codes in deze CSS:
773 - de CSS-verkleiner van XWiki breekt die, en dan valt de rest van het bestand weg). */
774 -.wb-kaart-icoon {
775 - position: absolute;
776 - top: 50%;
777 - left: 50%;
778 - transform: translate(-50%, -50%);
779 - font-size: 34px;
780 - color: #b86e00;
781 - opacity: .5;
782 -}
783 -.wb-kaart-titel {
784 - padding: 10px 14px 12px;
785 - font-size: 15px;
786 - font-weight: 500;
787 - line-height: 1.35;
788 -}
789 -/* Grote schermen: grote kaarten, foto's in hun oorspronkelijke 3:2-verhouding */
790 -@media (min-width: 1200px) {
791 - .wb-kaarten {
792 - grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
793 - gap: 26px;
794 - }
795 - .wb-kaart-beeld {
796 - aspect-ratio: 3 / 2;
797 - }
798 - .wb-kaart-titel {
799 - padding: 14px 18px 16px;
800 - font-size: 17px;
801 - }
802 -}
803 -@media (min-width: 1800px) {
804 - .wb-kaarten {
805 - grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
806 - }
807 -}
808 -
809 -/* Zonder script: de tabel past in elk geval binnen het scherm */
810 -#xwikicontent table.vgmtabel {
811 - width: 100% !important;
812 - max-width: 100%;
813 - table-layout: fixed;
814 -}
815 -#xwikicontent table.vgmtabel th,
816 -#xwikicontent table.vgmtabel td {
817 - width: auto !important;
818 - position: static !important;
819 - top: auto !important;
820 - padding: 6px;
821 -}
822 -#xwikicontent table.vgmtabel img {
823 - width: 100% !important;
824 - height: auto !important;
825 - aspect-ratio: 16 / 10;
826 - object-fit: cover;
827 - border-radius: 10px;
828 -}
829 -
830 -/* ---------- Handboeken: geplakte Word-opmaak volgt de huisstijl ---------- */
831 -
832 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-family"] {
833 - font-family: inherit !important;
834 -}
835 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-size"] {
836 - font-size: inherit !important;
837 -}
838 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="line-height"] {
839 - line-height: inherit !important;
840 -}
841 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table:not(.vgmtabel) {
842 - font-size: 14px;
843 -}
844 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table [style*="text-indent"] {
845 - text-indent: 0 !important;
846 -}
847 -
848 -/* ---------- Overzicht van onderliggende pagina's (startpagina van een onderdeel) ---------- */
849 -
850 -.wb-overzicht {
851 - list-style: none;
852 - display: grid;
853 - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
854 - gap: 10px;
855 - margin: 14px 0 28px;
856 - padding: 0;
857 -}
858 -.wb-overzicht li {
859 - margin: 0;
860 -}
861 -#body #xwikicontent .wb-overzicht a {
862 - display: flex;
863 - align-items: center;
864 - gap: 12px;
865 - height: 100%;
866 - padding: 12px 14px;
867 - border: 1px solid #e8eaed;
868 - border-radius: 10px;
869 - background: #ffffff;
870 - color: #202124;
871 - text-decoration: none;
872 - transition: border-color .15s ease, box-shadow .15s ease;
873 -}
874 -#body #xwikicontent .wb-overzicht a:hover,
875 -#body #xwikicontent .wb-overzicht a:focus {
876 - border-color: #ffb447;
877 - box-shadow: 0 2px 10px rgba(31, 35, 40, .08);
878 -}
879 -.wb-overzicht-icoon {
880 - flex: none;
881 - width: 36px;
882 - height: 36px;
883 - display: flex;
884 - align-items: center;
885 - justify-content: center;
886 - border-radius: 50%;
887 - background: #ffefd5;
888 - color: #b86e00;
889 - font-size: 16px;
890 - text-align: center;
891 -}
892 -.wb-overzicht strong {
893 - display: block;
894 - font-weight: 500;
895 - line-height: 1.3;
896 -}
897 -.wb-overzicht small {
898 - display: block;
899 - margin-top: 2px;
900 - font-size: 13px;
901 - color: #5f6368;
902 -}
903 -.wb-overzicht-leeg {
904 - color: #5f6368;
905 -}
906 -
907 907  /* ---------- Telefoon ---------- */
908 908  
909 909  @media (max-width: 767px) {
... ... @@ -931,14 +931,6 @@
931 931   #contentmenu .btn-label {
932 932   display: none;
933 933   }
934 - .wb-kaarten {
935 - grid-template-columns: repeat(2, minmax(0, 1fr));
936 - gap: 10px;
937 - }
938 - .wb-kaart-titel {
939 - padding: 8px 10px 10px;
940 - font-size: 13.5px;
941 - }
942 942   #xwikicontent #actionBox ul {
943 943   flex-wrap: nowrap;
944 944   overflow-x: auto;
... ... @@ -950,35 +950,3 @@
950 950   }
951 951  }
952 952  
953 -/* Overzichtstabellen (livetable): woorden heel laten, lange adressen afkappen met ...; bij aanwijzen het volledige adres */
954 -#xwikicontent table.xwiki-livetable {
955 - font-size: 14px;
956 -}
957 -#xwikicontent .xwiki-livetable-display-header th,
958 -#xwikicontent .xwiki-livetable-display-body td {
959 - padding: 6px 7px;
960 -}
961 -#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td {
962 - word-break: normal;
963 - overflow-wrap: break-word;
964 - hyphens: manual;
965 -}
966 -#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL,
967 -#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL {
968 - max-width: 140px;
969 - white-space: nowrap;
970 - overflow: hidden;
971 - text-overflow: ellipsis;
972 -}
973 -#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.URL:hover,
974 -#xwikicontent table.xwiki-livetable .xwiki-livetable-display-body td.DOWNLOADURL:hover {
975 - white-space: normal;
976 - overflow-wrap: anywhere;
977 -}
978 -/* Een brede overzichtstabel blijft binnen de pagina en schuift zo nodig opzij */
979 -#xwikicontent table.xwiki-livetable {
980 - display: block;
981 - max-width: 100%;
982 - overflow-x: auto;
983 -}
984 -