Skip to Content

Wiki source code of Natuurkunde

Last modified by XWikiGuest on 2026/03/11 21:09
Hide last authors
XWikiGuest 1.1 1 Deze sectie wordt nog gevuld.
XWikiGuest 2.1 2
3 {{html clean="false"}}
XWikiGuest 3.1 4 <style>
5 #ldsf-container-science-natuurkunde {
6 display: flex;
7 height: 65vh;
8 border: 1px solid #4e5d6c;
9 border-radius: 4px;
10 overflow: hidden;
11 }
12 #ldsf-container-science-natuurkunde .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-science-natuurkunde .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-science-natuurkunde .ldsf-divider:hover,
29 #ldsf-container-science-natuurkunde .ldsf-divider.dragging { background: #df691a; }
30 #ldsf-container-science-natuurkunde .ldsf-right {
31 flex: 1;
32 min-width: 200px;
33 display: flex;
34 flex-direction: column;
35 }
36 #ldsf-container-science-natuurkunde .ldsf-status {
37 color: #6b7c8d;
38 font-size: 13px;
39 padding: 8px 12px;
40 flex-shrink: 0;
41 }
42 #ldsf-container-science-natuurkunde .ldsf-bm {
43 overflow-y: auto;
44 flex: 1;
45 }
46 #ldsf-container-science-natuurkunde .ldsf-bm ul {
47 list-style: none;
48 padding: 0;
49 margin: 0;
50 }
51 #ldsf-container-science-natuurkunde .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-science-natuurkunde .ldsf-bm li:hover { background: #3b4e60; }
59 #ldsf-container-science-natuurkunde .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-science-natuurkunde .ldsf-bm a:hover { color: #df691a; }
68 #ldsf-container-science-natuurkunde .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-science-natuurkunde .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-science-natuurkunde .sf-btn:hover { background: #df691a; color: #fff; }
92 #ldsf-container-science-natuurkunde .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-science-natuurkunde .ldsf-vbar .close-btn {
104 cursor: pointer;
105 color: #d9534f;
106 font-size: 18px;
107 padding: 0 4px;
108 }
109 #ldsf-container-science-natuurkunde .ldsf-vbar .close-btn:hover { color: #ff6b6b; }
110 #ldsf-container-science-natuurkunde .ldsf-frame {
111 width: 100%;
112 flex: 1;
113 border: none;
114 background: #fff;
115 display: none;
116 }
117 #ldsf-container-science-natuurkunde .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-science-natuurkunde">
129 <div class="ldsf-left" id="ldsf-left-science-natuurkunde">
130 <div class="ldsf-status" id="ldsf-status-science-natuurkunde">Laden...</div>
131 <div class="ldsf-bm" id="ldsf-bm-science-natuurkunde"></div>
132 </div>
133 <div class="ldsf-divider" id="ldsf-div-science-natuurkunde"></div>
134 <div class="ldsf-right">
135 <div class="ldsf-vbar" id="ldsf-vbar-science-natuurkunde">
136 <span id="ldsf-vtitle-science-natuurkunde"></span>
137 <span class="close-btn" data-sfclose-science-natuurkunde="1">&times;</span>
138 </div>
139 <div class="ldsf-ph" id="ldsf-ph-science-natuurkunde">Klik op &#128196; om een archief te bekijken</div>
140 <iframe class="ldsf-frame" id="ldsf-frame-science-natuurkunde" sandbox="allow-same-origin"></iframe>
141 </div>
142 </div>
143
XWikiGuest 2.1 144 <script>
145 (function() {
XWikiGuest 3.1 146 var U = 'science-natuurkunde';
147 var CFG = {
148 linkding: 'https://bookmarks.rhebergen.org/api/bookmarks/',
149 token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
150 tag: 'Science',
151 count: 20,
152 share: 'eT2X9ttBHK5GoEY',
153 webdav: 'https://cloud.rhebergen.org/public.php/webdav/'
XWikiGuest 2.1 154 };
XWikiGuest 3.1 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) {
XWikiGuest 2.1 188 var title = bm.title || bm.website_title || bm.url;
XWikiGuest 3.1 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>';
XWikiGuest 2.1 194 });
XWikiGuest 3.1 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();
XWikiGuest 2.1 210 });
XWikiGuest 3.1 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; });
XWikiGuest 2.1 233 })();
234 </script>
235 {{/html}}