Skip to Content
Last modified by XWikiGuest on 2026/03/11 21:09
From version 1.1
edited by Ad Min
on 2026/03/10 19:02
Change comment: There is no comment for this version
To version 3.1
edited by XWikiGuest
on 2026/03/11 21:09
Change comment: There is no comment for this version

Summary

Details

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