// IDE Remote: read-only file browser (scope 'all'): a tree and a viewer (no editor: <pre> with line numbers).// Self-mounting in <section id="panel-files"> (the shell loads this as a module). Commands: files.list {} -> {files:[{path,size}]}// (the IDE's name; `file.list` is tried when it fails), file.read {path} -> {text, content | image | audio | size}.(function (root, factory) { const api = factory(root); if (typeof module === 'object' && module.exports) module.exports = api; else { (root.IdeRemoteViews = root.IdeRemoteViews || {}).files = { mount: api.mount, pure: api.pure }; if (root.document && root.document.getElementById) api.boot('files', api.mount, ['vendor/ide-md.js']); }})(typeof window !== 'undefined' ? window : globalThis, function (root) { // Texts: the page's table (config/lang.yaml, 14 languages) through IdeRemote.t; the English given here is the fallback (and what tests see). const L = (key, en, vars) => (root.IdeRemote && root.IdeRemote.t ? root.IdeRemote.t(key, vars, en) : String(en).replace(/\{(\w+)\}/g, (m, k) => (vars && k in vars ? vars[k] : m))); const errText = (e) => (root.IdeRemote && root.IdeRemote.errorText ? root.IdeRemote.errorText(e) : (e && e.message) || String(e)); // ---------------------------------------------------------------- pure part /** Flat [{path, size}] (or paths) -> nested {name, path, dir, children[], size}; folders first, then A-Z. */ function buildTree(files) { const top = { name: '', path: '', dir: true, children: [] }; for (const f of files || []) { const path = typeof f === 'string' ? f : f && (f.path || f.name); if (!path) continue; const parts = String(path).split('/').filter(Boolean); let node = top; parts.forEach((name, i) => { const last = i === parts.length - 1; let child = node.children.find((c) => c.name === name && c.dir === !last); if (!child) { child = { name, path: parts.slice(0, i + 1).join('/'), dir: !last, children: [], size: last ? (f && f.size) || 0 : 0 }; node.children.push(child); } node = child; }); } const sort = (n) => { n.children.sort((a, b) => (a.dir === b.dir ? a.name.localeCompare(b.name) : a.dir ? -1 : 1)); n.children.forEach(sort); }; sort(top); return top; } /** The viewer's lines: {lines: string[], cut: number} (cut = lines left out beyond `max`). */ function toLines(content, max) { const all = String(content || '').replace(/\r\n?/g, '\n').split('\n'); if (all.length && all[all.length - 1] === '') all.pop(); return { lines: all.slice(0, max), cut: Math.max(0, all.length - max) }; } function humanSize(n) { return n >= 1048576 ? (n / 1048576).toFixed(1) + ' MB' : n >= 1024 ? Math.round(n / 1024) + ' kB' : n + ' B'; } const pure = { buildTree, toLines, humanSize }; // ---------------------------------------------------------------- DOM part function mount(container) { const R = root.IdeRemote, { el, clear } = root.IdeMd; const open = new Set(['']); let tree = null, current = null, query = ''; const MAX = 4000; const search = el('input.rv-search', { type: 'search', placeholder: L('filter_files', 'Filter files…'), autocomplete: 'off', autocapitalize: 'off', spellcheck: 'false', 'aria-label': L('filter_files_aria', 'Filter files'), oninput: () => { query = search.value.trim().toLowerCase(); paintTree(); } }); const reload = el('button.rv-btn.rv-small', { type: 'button', onclick: () => load() }, L('reload', 'Reload')); const treeBox = el('div.rv-tree', { role: 'tree' }); const treePane = el('div.rv-files-tree', {}, el('div.rv-files-bar', {}, search, reload), treeBox); const title = el('div.rv-viewer-title'); const back = el('button.rv-btn.rv-small.rv-back', { type: 'button', onclick: () => container.classList.remove('rv-viewing') }, '‹ Files'); const body = el('div.rv-viewer-body'); const viewPane = el('div.rv-files-view', {}, el('div.rv-files-bar', {}, back, title), body); clear(container); container.classList.add('rv-files'); container.append(treePane, viewPane); body.append(el('div.rv-empty', {}, L('pick_file', 'Pick a file to read it.'))); async function load() { clear(treeBox); treeBox.append(el('div.rv-empty', {}, L('loading', 'Loading…'))); let r; try { r = await R.invoke('files.list', {}); } catch (e) { try { r = await R.invoke('file.list', {}); } catch (e2) { clear(treeBox); treeBox.append(el('div.rv-empty.rv-error', {}, errText(e2))); return; } } tree = buildTree(Array.isArray(r) ? r : (r && r.files) || []); paintTree(); } function paintTree() { clear(treeBox); if (!tree) return; if (!tree.children.length) { treeBox.append(el('div.rv-empty', {}, L('no_files', 'No files.'))); return; } const walk = (n, depth) => { for (const c of n.children) { if (query) { if (c.dir) walk(c, depth + 1); else if (c.path.toLowerCase().includes(query)) treeBox.append(row(c, 0, c.path)); continue; } treeBox.append(row(c, depth, c.name)); if (c.dir && open.has(c.path)) walk(c, depth + 1); } }; walk(tree, 0); } function row(c, depth, label) { return el('button.rv-row' + (c.dir ? '.rv-dir' : '') + (current === c.path ? '.on' : ''), { type: 'button', role: 'treeitem', style: `padding-left:${12 + depth * 16}px`, 'aria-expanded': c.dir ? String(open.has(c.path)) : undefined, onclick: () => { if (c.dir) { open.has(c.path) ? open.delete(c.path) : open.add(c.path); paintTree(); } else show(c); }, }, el('span.rv-ico', {}, c.dir ? (open.has(c.path) ? '▾' : '▸') : '·'), el('span.rv-name', {}, label)); } async function show(c) { current = c.path; title.textContent = c.path; container.classList.add('rv-viewing'); clear(body); body.append(el('div.rv-empty', {}, L('loading', 'Loading…'))); paintTree(); try { const f = await R.invoke('file.read', { path: c.path }); if (current !== c.path) return; clear(body); if (f && f.image) body.append(el('img.rv-image', { src: f.image, alt: c.path })); else if (f && f.audio) body.append(el('audio', { src: f.audio, controls: true })); else if (f && f.text !== false && typeof f.content === 'string') { const { lines, cut } = toLines(f.content, MAX); const gutter = el('pre.rv-gutter', { 'aria-hidden': 'true' }, lines.map((_, i) => i + 1).join('\n')); body.append(el('div.rv-code', {}, gutter, el('pre.rv-pre', {}, lines.join('\n')))); if (cut) body.append(el('div.rv-note', {}, L('more_lines', '{n} more line(s) not shown.', { n: cut }))); } else body.append(el('div.rv-empty', {}, f && f.size ? L('binary_file_size', 'Binary file ({size}): not shown.', { size: humanSize(f.size) }) : L('binary_file', 'Binary file: not shown.'))); body.scrollTop = 0; } catch (e) { if (current !== c.path) return; clear(body); body.append(el('div.rv-empty.rv-error', {}, errText(e))); } } let loaded = false; const once = () => { if (!loaded && R.state === 'connected') { loaded = true; load(); } }; R.on('ready', () => { loaded = false; if (container.offsetWidth) once(); }); R.on('panel', (id) => { if (id === 'files') once(); }); once(); return { reload: load }; } // The shell loads this file as a module and never calls mount(): the view mounts itself in its <section>, loading its libraries first. function boot(id, mount, assets) { const doc = root.document; const load = (src) => { const cache = (root.__rvAssets = root.__rvAssets || {}); if (cache[src]) return cache[src]; return (cache[src] = new Promise((resolve, reject) => { if (src.endsWith('.css')) { const l = doc.createElement('link'); l.rel = 'stylesheet'; l.href = src; l.onload = resolve; l.onerror = resolve; doc.head.append(l); return; } const s = doc.createElement('script'); s.src = src; s.onload = resolve; s.onerror = () => reject(new Error('cannot load ' + src)); doc.head.append(s); })); }; const run = async () => { const c = doc.getElementById('panel-' + id); if (!c || c.dataset.rvMounted) return; c.dataset.rvMounted = '1'; try { for (const a of assets) await load(a); mount(c); } catch (e) { c.textContent = errText(e); } }; if (doc.readyState === 'loading') doc.addEventListener('DOMContentLoaded', run); else run(); } return { mount, pure, boot, ...pure };});