Changes for page Linkding + SingleFile Archief
Last modified by XWikiGuest on 2026/03/11 21:04
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -4,30 +4,57 @@ 4 4 5 5 {{html clean="false"}} 6 6 <style> 7 -#ldsf- wrapper {7 +#ldsf-container { 8 8 display: flex; 9 + height: 75vh; 10 + border: 1px solid #4e5d6c; 11 + border-radius: 4px; 12 + overflow: hidden; 13 + background: #1a2a3a; 14 +} 15 +#ldsf-left { 16 + width: 35%; 17 + min-width: 200px; 18 + max-width: 60%; 19 + overflow-y: auto; 20 + background: #2b3e50; 21 + display: flex; 9 9 flex-direction: column; 10 - gap: 0; 11 11 } 12 -#ldsf-bookmarks { 13 - color: #ebebeb; 24 +#ldsf-divider { 25 + width: 6px; 26 + background: #4e5d6c; 27 + cursor: col-resize; 28 + flex-shrink: 0; 29 + transition: background 0.2s; 14 14 } 15 -#ldsf-bookmarks ul { 16 - list-style: none; 17 - padding: 0; 31 +#ldsf-divider:hover, #ldsf-divider.dragging { background: #df691a; } 32 +#ldsf-right { 33 + flex: 1; 34 + min-width: 200px; 35 + display: flex; 36 + flex-direction: column; 37 + background: #fff; 18 18 } 39 +#ldsf-status { color: #6b7c8d; font-size: 13px; padding: 8px 12px; flex-shrink: 0; } 40 +#ldsf-bookmarks { overflow-y: auto; flex: 1; } 41 +#ldsf-bookmarks ul { list-style: none; padding: 0; margin: 0; } 19 19 #ldsf-bookmarks li { 20 20 padding: 6px 12px; 21 - background: #2b3e50; 22 - border-left: 3px solid #df691a; 23 - border-radius: 0 4px 4px 0; 24 - margin: 4px 0; 44 + border-bottom: 1px solid rgba(78,93,108,0.3); 25 25 display: flex; 26 26 align-items: center; 27 27 gap: 8px; 28 28 } 29 29 #ldsf-bookmarks li:hover { background: #3b4e60; } 30 -#ldsf-bookmarks a { color: #5bc0de; text-decoration: none; } 50 +#ldsf-bookmarks a { 51 + color: #5bc0de; 52 + text-decoration: none; 53 + white-space: nowrap; 54 + overflow: hidden; 55 + text-overflow: ellipsis; 56 + font-size: 13px; 57 +} 31 31 #ldsf-bookmarks a:hover { color: #df691a; } 32 32 #ldsf-bookmarks .sf-btn { 33 33 cursor: pointer; ... ... @@ -34,30 +34,22 @@ 34 34 background: #4e5d6c; 35 35 border: none; 36 36 color: #5bc0de; 37 - padding: 2px 8px;64 + padding: 2px 6px; 38 38 border-radius: 3px; 39 - font-size: 1 4px;66 + font-size: 13px; 40 40 flex-shrink: 0; 41 41 } 42 42 #ldsf-bookmarks .sf-btn:hover { background: #df691a; color: #fff; } 43 -#ldsf-bookmarks .sf-btn.active { background: #df691a; color: #fff; } 44 - 45 -#ldsf-viewer-container { 46 - display: none; 47 - margin-top: 10px; 48 - border: 1px solid #4e5d6c; 49 - border-radius: 4px; 50 - overflow: hidden; 51 - background: #1a2a3a; 52 -} 53 53 #ldsf-viewer-bar { 54 - display: flex;71 + display: none; 55 55 justify-content: space-between; 56 56 align-items: center; 57 - padding: 6px 12px;74 + padding: 4px 12px; 58 58 background: #2b3e50; 59 59 color: #6b7c8d; 60 - font-size: 13px; 77 + font-size: 12px; 78 + flex-shrink: 0; 79 + border-bottom: 1px solid #4e5d6c; 61 61 } 62 62 #ldsf-viewer-bar .close-btn { 63 63 cursor: pointer; ... ... @@ -70,22 +70,34 @@ 70 70 #ldsf-viewer-bar .close-btn:hover { color: #ff6b6b; } 71 71 #ldsf-viewer-frame { 72 72 width: 100%; 73 - height:70vh;92 + flex: 1; 74 74 border: none; 75 75 background: #fff; 76 76 } 77 -#ldsf-status { color: #6b7c8d; font-size: 13px; margin-bottom: 8px; } 96 +#ldsf-placeholder { 97 + display: flex; 98 + align-items: center; 99 + justify-content: center; 100 + flex: 1; 101 + color: #6b7c8d; 102 + font-size: 16px; 103 + background: #2b3e50; 104 +} 78 78 </style> 79 79 80 -<div id="ldsf-wrapper"> 81 - <div id="ldsf-status">Laden...</div> 82 - <div id="ldsf-bookmarks"></div> 83 - <div id="ldsf-viewer-container"> 107 +<div id="ldsf-container"> 108 + <div id="ldsf-left"> 109 + <div id="ldsf-status">Laden...</div> 110 + <div id="ldsf-bookmarks"></div> 111 + </div> 112 + <div id="ldsf-divider"></div> 113 + <div id="ldsf-right"> 84 84 <div id="ldsf-viewer-bar"> 85 85 <span id="ldsf-viewer-title">...</span> 86 - < button class="close-btn"onclick="ldsfCloseViewer()">×</button>116 + <span class="close-btn" data-sfclose="1">×</span> 87 87 </div> 88 - <iframe id="ldsf-viewer-frame" sandbox="allow-same-origin"></iframe> 118 + <div id="ldsf-placeholder">Klik op 📄 om archief te bekijken</div> 119 + <iframe id="ldsf-viewer-frame" sandbox="allow-same-origin" style="display:none"></iframe> 89 89 </div> 90 90 </div> 91 91 ... ... @@ -113,8 +113,10 @@ 113 113 114 114 function ldsfShowArchive(filename) { 115 115 document.getElementById('ldsf-viewer-title').textContent = filename.replace(/\.html?$/i, ''); 116 - document.getElementById('ldsf-viewer-container').style.display = 'block'; 147 + document.getElementById('ldsf-viewer-bar').style.display = 'flex'; 148 + document.getElementById('ldsf-placeholder').style.display = 'none'; 117 117 var frame = document.getElementById('ldsf-viewer-frame'); 150 + frame.style.display = 'block'; 118 118 frame.srcdoc = '<p style="padding:20px;color:#666">Laden...</p>'; 119 119 fetch(LDSF_WEBDAV + encodeURIComponent(filename), { headers: { 'Authorization': LDSF_AUTH } }) 120 120 .then(function(r) { return r.text(); }) ... ... @@ -123,7 +123,9 @@ 123 123 } 124 124 125 125 function ldsfCloseViewer() { 126 - document.getElementById('ldsf-viewer-container').style.display = 'none'; 159 + document.getElementById('ldsf-viewer-bar').style.display = 'none'; 160 + document.getElementById('ldsf-viewer-frame').style.display = 'none'; 161 + document.getElementById('ldsf-placeholder').style.display = 'flex'; 127 127 } 128 128 129 129 function ldsfLoadBookmarks() { ... ... @@ -135,14 +135,16 @@ 135 135 var archiveCount = 0; 136 136 var container = document.getElementById('ldsf-bookmarks'); 137 137 var html = '<ul>'; 173 + 138 138 (data.results || []).forEach(function(bm, idx) { 139 139 var title = bm.title || bm.website_title || bm.url; 140 140 var fname = ldsfFindArchive(bm.url); 141 - if (fname) { archiveCount++; ldsf_archiveMap[idx] = fname; } 177 + if (fname) { archiveCount++; ldsf_archiveMap[String(idx)] = fname; } 142 142 html += '<li>'; 143 - if (fname) html += '< button class="sf-btn"onclick="ldsfOpen(' + idx + ')" title="Archief bekijken">📄</button>';179 + if (fname) html += '<span class="sf-btn" data-sfidx="' + idx + '" title="Archief bekijken">📄</span>'; 144 144 html += '<a href="' + bm.url + '" target="_blank">' + title + '</a></li>'; 145 145 }); 182 + 146 146 html += '</ul>'; 147 147 container.innerHTML = html; 148 148 document.getElementById('ldsf-status').textContent = total + ' bookmarks, ' + archiveCount + ' met archief'; ... ... @@ -150,6 +150,41 @@ 150 150 .catch(function(err) { document.getElementById('ldsf-status').textContent = 'Fout: ' + err.message; }); 151 151 } 152 152 190 +// Global click handler for archive buttons and close button 191 +document.addEventListener('click', function(e) { 192 + var el = e.target; 193 + if (el && el.getAttribute) { 194 + if (el.getAttribute('data-sfidx') !== null) { 195 + var idx = el.getAttribute('data-sfidx'); 196 + if (ldsf_archiveMap[idx]) ldsfShowArchive(ldsf_archiveMap[idx]); 197 + } 198 + if (el.getAttribute('data-sfclose') !== null) { 199 + ldsfCloseViewer(); 200 + } 201 + } 202 +}, true); 203 + 204 +// Draggable divider 205 +var ldsf_divider = document.getElementById('ldsf-divider'); 206 +var ldsf_left = document.getElementById('ldsf-left'); 207 +var ldsf_dragging = false; 208 + 209 +ldsf_divider.addEventListener('mousedown', function(e) { 210 + ldsf_dragging = true; 211 + ldsf_divider.classList.add('dragging'); 212 + e.preventDefault(); 213 +}); 214 +document.addEventListener('mousemove', function(e) { 215 + if (!ldsf_dragging) return; 216 + var container = document.getElementById('ldsf-container'); 217 + var rect = container.getBoundingClientRect(); 218 + var w = e.clientX - rect.left; 219 + if (w >= 200 && w <= rect.width * 0.6) ldsf_left.style.width = w + 'px'; 220 +}); 221 +document.addEventListener('mouseup', function() { 222 + if (ldsf_dragging) { ldsf_dragging = false; ldsf_divider.classList.remove('dragging'); } 223 +}); 224 + 153 153 // Load index then bookmarks 154 154 fetch(LDSF_WEBDAV + 'index.json', { headers: { 'Authorization': LDSF_AUTH } }) 155 155 .then(function(r) { return r.ok ? r.json() : {}; })