Changes for page Open Source

Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -1,37 +1,235 @@
1	1	Deze sectie wordt nog gevuld.
2	2
3	3	{{html clean="false"}}
4		-<div id="linkding-bookmarks-tech-opensource">Laden...</div>
	4	+<style>
	5	+#ldsf-container-tech-opensource {
	6	+ display: flex;
	7	+ height: 65vh;
	8	+ border: 1px solid #4e5d6c;
	9	+ border-radius: 4px;
	10	+ overflow: hidden;
	11	+}
	12	+#ldsf-container-tech-opensource .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-tech-opensource .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-tech-opensource .ldsf-divider:hover,
	29	+#ldsf-container-tech-opensource .ldsf-divider.dragging { background: #df691a; }
	30	+#ldsf-container-tech-opensource .ldsf-right {
	31	+ flex: 1;
	32	+ min-width: 200px;
	33	+ display: flex;
	34	+ flex-direction: column;
	35	+}
	36	+#ldsf-container-tech-opensource .ldsf-status {
	37	+ color: #6b7c8d;
	38	+ font-size: 13px;
	39	+ padding: 8px 12px;
	40	+ flex-shrink: 0;
	41	+}
	42	+#ldsf-container-tech-opensource .ldsf-bm {
	43	+ overflow-y: auto;
	44	+ flex: 1;
	45	+}
	46	+#ldsf-container-tech-opensource .ldsf-bm ul {
	47	+ list-style: none;
	48	+ padding: 0;
	49	+ margin: 0;
	50	+}
	51	+#ldsf-container-tech-opensource .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-tech-opensource .ldsf-bm li:hover { background: #3b4e60; }
	59	+#ldsf-container-tech-opensource .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-tech-opensource .ldsf-bm a:hover { color: #df691a; }
	68	+#ldsf-container-tech-opensource .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-tech-opensource .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-tech-opensource .sf-btn:hover { background: #df691a; color: #fff; }
	92	+#ldsf-container-tech-opensource .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-tech-opensource .ldsf-vbar .close-btn {
	104	+ cursor: pointer;
	105	+ color: #d9534f;
	106	+ font-size: 18px;
	107	+ padding: 0 4px;
	108	+}
	109	+#ldsf-container-tech-opensource .ldsf-vbar .close-btn:hover { color: #ff6b6b; }
	110	+#ldsf-container-tech-opensource .ldsf-frame {
	111	+ width: 100%;
	112	+ flex: 1;
	113	+ border: none;
	114	+ background: #fff;
	115	+ display: none;
	116	+}
	117	+#ldsf-container-tech-opensource .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-tech-opensource">
	129	+ <div class="ldsf-left" id="ldsf-left-tech-opensource">
	130	+ <div class="ldsf-status" id="ldsf-status-tech-opensource">Laden...</div>
	131	+ <div class="ldsf-bm" id="ldsf-bm-tech-opensource"></div>
	132	+ </div>
	133	+ <div class="ldsf-divider" id="ldsf-div-tech-opensource"></div>
	134	+ <div class="ldsf-right">
	135	+ <div class="ldsf-vbar" id="ldsf-vbar-tech-opensource">
	136	+ <span id="ldsf-vtitle-tech-opensource"></span>
	137	+ <span class="close-btn" data-sfclose-tech-opensource="1">&times;</span>
	138	+ </div>
	139	+ <div class="ldsf-ph" id="ldsf-ph-tech-opensource">Klik op &#128196; om een archief te bekijken</div>
	140	+ <iframe class="ldsf-frame" id="ldsf-frame-tech-opensource" sandbox="allow-same-origin"></iframe>
	141	+ </div>
	142	+</div>
	143	+
5	5	<script>
6	6	(function() {
7		- var config = {
8		- url: 'https://bookmarks.rhebergen.org/api/bookmarks/',
9		- token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
10		- tag: 'Open-Source',
11		- count: 10
	146	+ var U = 'tech-opensource';
	147	+ var CFG = {
	148	+ linkding: 'https://bookmarks.rhebergen.org/api/bookmarks/',
	149	+ token: '3b7443e0f84e2b2b269adebb96d7475e4a5e653e',
	150	+ tag: 'Open-Source',
	151	+ count: 20,
	152	+ share: 'eT2X9ttBHK5GoEY',
	153	+ webdav: 'https://cloud.rhebergen.org/public.php/webdav/'
12	12	};
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-tech-opensource');
20		- var total = data.count || 0;
21		- var html = '<h3>Bookmarks: ' + config.tag + ' (' + total + ' totaal)</h3><ul>';
22		- (data.results || []).forEach(function(bm) {
	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) {
23	23	var title = bm.title || bm.website_title || bm.url;
24		- html += '<li><a href="' + bm.url + '" target="_blank">' + title + '</a></li>';
	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>';
25	25	});
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-tech-opensource').innerHTML = '<p>Kon bookmarks niet laden: ' + err.message + '</p>';
	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();
34	34	});
	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; });
35	35	})();
36	36	</script>
37	37	{{/html}}