Skip to Content

Wijzigen voor document Huisstijl

Laatst gewijzigd door Jeeves de Butler op 07-10-2026 01:56
Van versie 15.1
gewijzigd door Jeeves de Butler
op 05-10-2026 03:47
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,138 +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 - function zetIcoon(beeld) {
45 - beeld.classList.add('wb-kaart-geenbeeld');
46 - var icoon = document.createElement('span');
47 - icoon.className = 'fa fa-book wb-kaart-icoon';
48 - icoon.setAttribute('aria-hidden', 'true');
49 - beeld.appendChild(icoon);
50 - }
51 -
52 - function maakKaart(k) {
53 - var kaart = document.createElement(k.link ? 'a' : 'div');
54 - kaart.className = 'wb-kaart';
55 - if (k.link) {
56 - kaart.setAttribute('href', k.link.getAttribute('href'));
57 - if (k.link.getAttribute('target')) {
58 - kaart.setAttribute('target', k.link.getAttribute('target'));
59 - kaart.setAttribute('rel', 'noopener');
60 - }
61 - }
62 - var beeld = document.createElement('span');
63 - beeld.className = 'wb-kaart-beeld';
64 - if (k.img) {
65 - var img = document.createElement('img');
66 - img.src = k.img.currentSrc || k.img.src;
67 - img.alt = '';
68 - img.loading = 'lazy';
69 - img.decoding = 'async';
70 - var geenBeeld = function () {
71 - img.remove();
72 - zetIcoon(beeld);
73 - };
74 - img.addEventListener('error', geenBeeld);
75 - // Sommige externe sites geven bij een verdwenen afbeelding een leeg plaatje in plaats van een fout.
76 - img.addEventListener('load', function () {
77 - if (!img.naturalWidth || img.naturalWidth < 4) {
78 - geenBeeld();
79 - }
80 - });
81 - beeld.appendChild(img);
82 - } else {
83 - zetIcoon(beeld);
84 - }
85 - var titel = document.createElement('span');
86 - titel.className = 'wb-kaart-titel';
87 - titel.textContent = k.titel;
88 - kaart.appendChild(beeld);
89 - kaart.appendChild(titel);
90 - return kaart;
91 - }
92 -
93 - function verwerk(tabel) {
94 - if (tabel.classList.contains('wb-vervangen')) {
95 - return;
96 - }
97 - var kaarten = kaartenUitTabel(tabel);
98 - if (!kaarten.length) {
99 - return;
100 - }
101 - var raster = document.createElement('div');
102 - raster.className = 'wb-kaarten';
103 - kaarten.forEach(function (k) { raster.appendChild(maakKaart(k)); });
104 - tabel.parentNode.insertBefore(raster, tabel.nextSibling);
105 - tabel.classList.add('wb-vervangen');
106 - }
107 -
108 - function start() {
109 - var actie = (window.XWiki && window.XWiki.contextaction) || 'view';
110 - if (actie !== 'view') {
111 - return;
112 - }
113 - var tabellen = document.querySelectorAll('#xwikicontent table.vgmtabel');
114 - Array.prototype.forEach.call(tabellen, function (tabel) {
115 - try { verwerk(tabel); } catch (e) { /* bij een fout blijft de tabel gewoon zichtbaar */ }
116 - });
117 - }
118 -
119 - // Bij wijzigen op de pagina zelf: eerst de oorspronkelijke tabel terug, zodat de editor nooit de kaarten ziet.
120 - function herstel() {
121 - Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent .wb-kaarten'), function (r) { r.remove(); });
122 - Array.prototype.forEach.call(document.querySelectorAll('#xwikicontent table.wb-vervangen'), function (t) { t.classList.remove('wb-vervangen'); });
123 - }
124 -
125 - if (typeof window.require === 'function') {
126 - window.require(['jquery'], function ($) {
127 - $(document).on('xwiki:actions:edit', herstel);
128 - $(document).on('xwiki:actions:view', function () { setTimeout(start, 0); });
129 - });
130 - }
131 -
132 - if (document.readyState === 'loading') {
133 - document.addEventListener('DOMContentLoaded', start);
134 - } else {
135 - start();
136 - }
137 -})();
138 -
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
... ... @@ -686,160 +686,6 @@
686 686   }
687 687  }
688 688  
689 -/* ---------- Paginakop: titel en knoppen naast elkaar ---------- */
690 -
691 -@media (min-width: 992px) {
692 - #mainContentArea > .document-header {
693 - display: flex;
694 - align-items: flex-start;
695 - gap: 16px;
696 - }
697 - #mainContentArea > .document-header::before,
698 - #mainContentArea > .document-header::after {
699 - content: none;
700 - }
701 - #mainContentArea > .document-header > .document-info {
702 - flex: 1 1 auto;
703 - width: auto;
704 - min-width: 0;
705 - }
706 - #mainContentArea > .document-header > .document-menu {
707 - flex: 0 0 auto;
708 - width: auto;
709 - }
710 - #mainContentArea > .document-header #contentmenu {
711 - float: none;
712 - display: flex;
713 - flex-wrap: nowrap;
714 - }
715 -}
716 -
717 -/* ---------- Tegels (vgmtabel) als kaarten ---------- */
718 -
719 -/* Het script huisstijl.js zet een tegeltabel om in een kaartenraster en verbergt de tabel. */
720 -#xwikicontent table.vgmtabel.wb-vervangen {
721 - display: none !important;
722 -}
723 -.wb-kaarten {
724 - display: grid;
725 - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
726 - gap: 18px;
727 - margin: 14px 0 30px;
728 - clear: none;
729 -}
730 -#body #xwikicontent a.wb-kaart,
731 -.wb-kaart {
732 - display: flex;
733 - flex-direction: column;
734 - overflow: hidden;
735 - border: 1px solid #e8eaed;
736 - border-radius: 12px;
737 - background: #ffffff;
738 - color: #202124;
739 - text-decoration: none;
740 - transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
741 -}
742 -#body #xwikicontent a.wb-kaart:hover,
743 -#body #xwikicontent a.wb-kaart:focus {
744 - border-color: #ffb447;
745 - box-shadow: 0 4px 14px rgba(31, 35, 40, .10);
746 - transform: translateY(-2px);
747 - color: #202124;
748 -}
749 -.wb-kaart-beeld {
750 - display: block;
751 - position: relative;
752 - aspect-ratio: 16 / 10;
753 - overflow: hidden;
754 - background: #f1f3f4;
755 -}
756 -.wb-kaart-beeld img {
757 - display: block;
758 - width: 100% !important;
759 - height: 100% !important;
760 - max-width: none;
761 - object-fit: cover;
762 - transition: transform .25s ease;
763 -}
764 -.wb-kaart:hover .wb-kaart-beeld img {
765 - transform: scale(1.03);
766 -}
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 {
770 - position: absolute;
771 - top: 50%;
772 - left: 50%;
773 - transform: translate(-50%, -50%);
774 - font-size: 34px;
775 - color: #b86e00;
776 - opacity: .5;
777 -}
778 -.wb-kaart-titel {
779 - padding: 10px 14px 12px;
780 - font-size: 15px;
781 - font-weight: 500;
782 - line-height: 1.35;
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 -}
803 -
804 -/* Zonder script: de tabel past in elk geval binnen het scherm */
805 -#xwikicontent table.vgmtabel {
806 - width: 100% !important;
807 - max-width: 100%;
808 - table-layout: fixed;
809 -}
810 -#xwikicontent table.vgmtabel th,
811 -#xwikicontent table.vgmtabel td {
812 - width: auto !important;
813 - position: static !important;
814 - top: auto !important;
815 - padding: 6px;
816 -}
817 -#xwikicontent table.vgmtabel img {
818 - width: 100% !important;
819 - height: auto !important;
820 - aspect-ratio: 16 / 10;
821 - object-fit: cover;
822 - border-radius: 10px;
823 -}
824 -
825 -/* ---------- Handboeken: geplakte Word-opmaak volgt de huisstijl ---------- */
826 -
827 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-family"] {
828 - font-family: inherit !important;
829 -}
830 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="font-size"] {
831 - font-size: inherit !important;
832 -}
833 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent [style*="line-height"] {
834 - line-height: inherit !important;
835 -}
836 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table:not(.vgmtabel) {
837 - font-size: 14px;
838 -}
839 -html[data-xwiki-space^="Main.Handboeken"] #xwikicontent table [style*="text-indent"] {
840 - text-indent: 0 !important;
841 -}
842 -
843 843  /* ---------- Telefoon ---------- */
844 844  
845 845  @media (max-width: 767px) {
... ... @@ -867,14 +867,6 @@
867 867   #contentmenu .btn-label {
868 868   display: none;
869 869   }
870 - .wb-kaarten {
871 - grid-template-columns: repeat(2, minmax(0, 1fr));
872 - gap: 10px;
873 - }
874 - .wb-kaart-titel {
875 - padding: 8px 10px 10px;
876 - font-size: 13.5px;
877 - }
878 878   #xwikicontent #actionBox ul {
879 879   flex-wrap: nowrap;
880 880   overflow-x: auto;
... ... @@ -886,35 +886,3 @@
886 886   }
887 887  }
888 888  
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 -