Skip to Content

Changes for page Geopolitiek

Last modified by XWikiGuest on 2026/03/11 21:09
From version 3.1
edited by XWikiGuest
on 2026/03/11 21:09
Change comment: There is no comment for this version
To version 2.1
edited by XWikiGuest
on 2026/03/11 19:07
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,235 +1,37 @@
1 1  Deze sectie wordt nog gevuld.
2 2  
3 3  {{html clean="false"}}
4 -<style>
5 -#ldsf-container-political-geopolitiek {
6 - display: flex;
7 - height: 65vh;
8 - border: 1px solid #4e5d6c;
9 - border-radius: 4px;
10 - overflow: hidden;
11 -}
12 -#ldsf-container-political-geopolitiek .ldsf-left {
13 - width: 35%;
14 - min-width: 200px;
15 - max-width: 60%;
16 - overflow-y: auto;
17 - background: #2b3e50;
18 - display: flex;
19 - flex-direction: column;
20 -}
21 -#ldsf-container-political-geopolitiek .ldsf-divider {
22 - width: 6px;
23 - background: #4e5d6c;
24 - cursor: col-resize;
25 - flex-shrink: 0;
26 - transition: background 0.2s;
27 -}
28 -#ldsf-container-political-geopolitiek .ldsf-divider:hover,
29 -#ldsf-container-political-geopolitiek .ldsf-divider.dragging { background: #df691a; }
30 -#ldsf-container-political-geopolitiek .ldsf-right {
31 - flex: 1;
32 - min-width: 200px;
33 - display: flex;
34 - flex-direction: column;
35 -}
36 -#ldsf-container-political-geopolitiek .ldsf-status {
37 - color: #6b7c8d;
38 - font-size: 13px;
39 - padding: 8px 12px;
40 - flex-shrink: 0;
41 -}
42 -#ldsf-container-political-geopolitiek .ldsf-bm {
43 - overflow-y: auto;
44 - flex: 1;
45 -}
46 -#ldsf-container-political-geopolitiek .ldsf-bm ul {
47 - list-style: none;
48 - padding: 0;
49 - margin: 0;
50 -}
51 -#ldsf-container-political-geopolitiek .ldsf-bm li {
52 - padding: 6px 12px;
53 - border-bottom: 1px solid rgba(78,93,108,0.3);
54 - display: flex;
55 - align-items: center;
56 - gap: 8px;
57 -}
58 -#ldsf-container-political-geopolitiek .ldsf-bm li:hover { background: #3b4e60; }
59 -#ldsf-container-political-geopolitiek .ldsf-bm a {
60 - color: #5bc0de;
61 - text-decoration: none;
62 - overflow: hidden;
63 - text-overflow: ellipsis;
64 - white-space: nowrap;
65 - font-size: 13px;
66 -}
67 -#ldsf-container-political-geopolitiek .ldsf-bm a:hover { color: #df691a; }
68 -#ldsf-container-political-geopolitiek .sf-num {
69 - display: inline-flex;
70 - align-items: center;
71 - justify-content: center;
72 - width: 22px;
73 - height: 22px;
74 - border-radius: 50%;
75 - background: #df691a;
76 - color: #fff;
77 - font-size: 11px;
78 - font-weight: bold;
79 - flex-shrink: 0;
80 -}
81 -#ldsf-container-political-geopolitiek .sf-btn {
82 - cursor: pointer;
83 - background: #4e5d6c;
84 - border: none;
85 - color: #5bc0de;
86 - padding: 2px 6px;
87 - border-radius: 3px;
88 - font-size: 13px;
89 - flex-shrink: 0;
90 -}
91 -#ldsf-container-political-geopolitiek .sf-btn:hover { background: #df691a; color: #fff; }
92 -#ldsf-container-political-geopolitiek .ldsf-vbar {
93 - display: none;
94 - justify-content: space-between;
95 - align-items: center;
96 - padding: 4px 12px;
97 - background: #2b3e50;
98 - color: #ebebeb;
99 - font-size: 12px;
100 - flex-shrink: 0;
101 - border-bottom: 1px solid #4e5d6c;
102 -}
103 -#ldsf-container-political-geopolitiek .ldsf-vbar .close-btn {
104 - cursor: pointer;
105 - color: #d9534f;
106 - font-size: 18px;
107 - padding: 0 4px;
108 -}
109 -#ldsf-container-political-geopolitiek .ldsf-vbar .close-btn:hover { color: #ff6b6b; }
110 -#ldsf-container-political-geopolitiek .ldsf-frame {
111 - width: 100%;
112 - flex: 1;
113 - border: none;
114 - background: #fff;
115 - display: none;
116 -}
117 -#ldsf-container-political-geopolitiek .ldsf-ph {
118 - display: flex;
119 - align-items: center;
120 - justify-content: center;
121 - flex: 1;
122 - color: #6b7c8d;
123 - font-size: 15px;
124 - background: #2b3e50;
125 -}
126 -</style>
127 -
128 -<div id="ldsf-container-political-geopolitiek">
129 - <div class="ldsf-left" id="ldsf-left-political-geopolitiek">
130 - <div class="ldsf-status" id="ldsf-status-political-geopolitiek">Laden...</div>
131 - <div class="ldsf-bm" id="ldsf-bm-political-geopolitiek"></div>
132 - </div>
133 - <div class="ldsf-divider" id="ldsf-div-political-geopolitiek"></div>
134 - <div class="ldsf-right">
135 - <div class="ldsf-vbar" id="ldsf-vbar-political-geopolitiek">
136 - <span id="ldsf-vtitle-political-geopolitiek"></span>
137 - <span class="close-btn" data-sfclose-political-geopolitiek="1">&times;</span>
138 - </div>
139 - <div class="ldsf-ph" id="ldsf-ph-political-geopolitiek">Klik op &#128196; om een archief te bekijken</div>
140 - <iframe class="ldsf-frame" id="ldsf-frame-political-geopolitiek" sandbox="allow-same-origin"></iframe>
141 - </div>
142 -</div>
143 -
4 +<div id="linkding-bookmarks-political-geopolitiek">Laden...</div>
144 144  <script>
145 145  (function() {
146 - var U = 'political-geopolitiek';
147 - var CFG = {
148 - linkding: 'https://bookmarks.rhebergen.org/api/bookmarks/',
149 - token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
150 - tag: 'Politics-&-Geopolitics',
151 - count: 20,
152 - share: 'eT2X9ttBHK5GoEY',
153 - webdav: 'https://cloud.rhebergen.org/public.php/webdav/'
7 + var config = {
8 + url: 'https://bookmarks.rhebergen.org/api/bookmarks/',
9 + token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
10 + tag: 'Politics-&-Geopolitics',
11 + count: 10
154 154   };
155 - CFG.auth = 'Basic ' + btoa(CFG.share + ':');
156 -
157 - var urlToFile = {}, fileMap = {};
158 -
159 - function match(url) {
160 - var t = [url, url.replace(/\/$/, ''), url + '/', url.replace(/\?.*$/, '')];
161 - for (var i = 0; i < t.length; i++) { if (urlToFile[t[i]]) return urlToFile[t[i]]; }
162 - return null;
163 - }
164 -
165 - function show(f) {
166 - document.getElementById('ldsf-vtitle-' + U).textContent = f.replace(/\.html?$/i, '');
167 - document.getElementById('ldsf-vbar-' + U).style.display = 'flex';
168 - document.getElementById('ldsf-ph-' + U).style.display = 'none';
169 - var fr = document.getElementById('ldsf-frame-' + U);
170 - fr.style.display = 'block';
171 - fr.srcdoc = '<p style="padding:20px;color:#888">Laden...</p>';
172 - fetch(CFG.webdav + encodeURIComponent(f), { headers: { 'Authorization': CFG.auth } })
173 - .then(function(r) { return r.text(); })
174 - .then(function(h) { fr.srcdoc = h; })
175 - .catch(function(e) { fr.srcdoc = '<p style="padding:20px;color:#d9534f">' + e.message + '</p>'; });
176 - }
177 -
178 - function close() {
179 - document.getElementById('ldsf-vbar-' + U).style.display = 'none';
180 - document.getElementById('ldsf-frame-' + U).style.display = 'none';
181 - document.getElementById('ldsf-ph-' + U).style.display = 'flex';
182 - }
183 -
184 - function render(data) {
185 - var total = data.count || 0, arc = 0;
186 - var html = '<ul>';
187 - (data.results || []).forEach(function(bm, i) {
13 + var apiUrl = config.url + '?limit=' + config.count + '&q=%23' + encodeURIComponent(config.tag);
14 + fetch(apiUrl, {
15 + headers: { 'Authorization': 'Token ' + config.token }
16 + })
17 + .then(function(r) { return r.json(); })
18 + .then(function(data) {
19 + var container = document.getElementById('linkding-bookmarks-political-geopolitiek');
20 + var total = data.count || 0;
21 + var html = '<h3>Bookmarks: ' + config.tag + ' (' + total + ' totaal)</h3><ul>';
22 + (data.results || []).forEach(function(bm) {
188 188   var title = bm.title || bm.website_title || bm.url;
189 - var f = match(bm.url);
190 - if (f) { arc++; fileMap[i] = f; }
191 - html += '<li><span class="sf-num">' + (i + 1) + '</span>';
192 - if (f) html += '<span class="sf-btn" data-sf-' + U + '="' + i + '" title="Archief bekijken">&#128196;</span>';
193 - html += '<a href="' + bm.url + '" target="_blank">' + title + '</a></li>';
24 + html += '<li><a href="' + bm.url + '" target="_blank">' + title + '</a></li>';
194 194   });
195 - document.getElementById('ldsf-bm-' + U).innerHTML = html + '</ul>';
196 - document.getElementById('ldsf-status-' + U).textContent = total + ' bookmarks, ' + arc + ' met archief';
197 - }
198 -
199 - document.addEventListener('click', function(e) {
200 - var t = e.target;
201 - if (!t || !t.getAttribute) return;
202 - var sf = t.getAttribute('data-sf-' + U);
203 - if (sf !== null && fileMap[sf]) show(fileMap[sf]);
204 - if (t.getAttribute('data-sfclose-' + U) !== null) close();
205 - }, true);
206 -
207 - var drag = false;
208 - document.getElementById('ldsf-div-' + U).addEventListener('mousedown', function(e) {
209 - drag = true; this.classList.add('dragging'); e.preventDefault();
26 + html += '</ul>';
27 + if (total > config.count) {
28 + html += '<p><em>Toont ' + config.count + ' van ' + total + '. <a href="https://bookmarks.rhebergen.org/bookmarks?q=%23' + config.tag + '">Meer in Linkding</a></em></p>';
29 + }
30 + container.innerHTML = html;
31 + })
32 + .catch(function(err) {
33 + document.getElementById('linkding-bookmarks-political-geopolitiek').innerHTML = '<p>Kon bookmarks niet laden: ' + err.message + '</p>';
210 210   });
211 - document.addEventListener('mousemove', function(e) {
212 - if (!drag) return;
213 - var box = document.getElementById('ldsf-container-' + U).getBoundingClientRect();
214 - var w = e.clientX - box.left;
215 - if (w >= 200 && w <= box.width * 0.6)
216 - document.getElementById('ldsf-left-' + U).style.width = w + 'px';
217 - });
218 - document.addEventListener('mouseup', function() {
219 - if (drag) { drag = false; document.getElementById('ldsf-div-' + U).classList.remove('dragging'); }
220 - });
221 -
222 - fetch(CFG.webdav + 'index.json', { headers: { 'Authorization': CFG.auth } })
223 - .then(function(r) { return r.ok ? r.json() : {}; })
224 - .then(function(idx) { for (var f in idx) { if (idx.hasOwnProperty(f)) urlToFile[idx[f]] = f; } })
225 - .catch(function() {})
226 - .then(function() {
227 - return fetch(CFG.linkding + '?limit=' + CFG.count + '&q=%23' + encodeURIComponent(CFG.tag),
228 - { headers: { 'Authorization': 'Token ' + CFG.token } });
229 - })
230 - .then(function(r) { return r.json(); })
231 - .then(render)
232 - .catch(function(e) { document.getElementById('ldsf-status-' + U).textContent = 'Fout: ' + e.message; });
233 233  })();
234 234  </script>
235 235  {{/html}}