Daniele
1515492938
Nightly Build / build (push) Successful in 8m5s
A clock button in the file viewer header lists the versions of a file whose project keeps a git history; picking one shows the file as of that commit, read-only, with a banner back to the current version. A past version is never served from the working tree: the whole repository is materialized at that revision (git archive streamed through tar into a size-bounded, immutable-by-rev cache) and every fetch — content, compiled LaTeX, markdown images, downloads — resolves inside that tree, so dependencies are contemporaneous with the file: a .tex compiles against its \input's and images of that moment. Backend: new git_versions module (repo discovery bounded by the workspace mount, host-git log/rev-parse/archive, extraction cache with oldest-first prune) + GET /api/file/versions and a rev param on GET /api/file (rev is the ETag; never X-Writable). Frontend: history mode in FileViewerBase shared by the desktop and mobile viewers — popover, banner, watcher paused while browsing, rev propagated to every /api/file URL it builds.
68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
import { html, nothing } from 'lit';
|
|
import { t } from '../../lib/i18n.js';
|
|
import { FileViewerBase } from './file-viewer-base.js';
|
|
|
|
/**
|
|
* Mobile file-viewer page. Same engine as the desktop `<file-viewer-page>`, but
|
|
* prop-driven: `<mobile-app>` binds `visible` / `path` from its hash router
|
|
* (`#file_viewer?path=...`) instead of the component listening to the hash. The
|
|
* back button returns to the previous mobile section via history.
|
|
*/
|
|
export class MobileFileViewerPage extends FileViewerBase {
|
|
static properties = {
|
|
visible: { type: Boolean },
|
|
path: { type: String },
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
this.visible = false;
|
|
this.path = null;
|
|
}
|
|
|
|
updated(changed) {
|
|
if (changed.has('visible') || changed.has('path')) {
|
|
if (this.visible && this.path) this._show(this.path);
|
|
else if (!this.visible) this._hide();
|
|
}
|
|
}
|
|
|
|
_back() {
|
|
history.back();
|
|
}
|
|
|
|
// Filename portion of the path, for the compact mobile header title.
|
|
_basename() {
|
|
const p = this.path || '';
|
|
const i = p.lastIndexOf('/');
|
|
return i < 0 ? p : p.slice(i + 1);
|
|
}
|
|
|
|
render() {
|
|
if (!this.visible) return nothing;
|
|
return html`
|
|
<div class="mobile-file-viewer">
|
|
<div class="mobile-section-header">
|
|
<span class="mobile-section-title">
|
|
<button class="chat-page-back" title=${t('fv.back')} @click=${() => this._back()}>
|
|
<i class="bi bi-arrow-left"></i>
|
|
</button>
|
|
<span class="fv-mobile-name" title=${this.path ?? ''}><bdi>${this._basename()}</bdi></span>
|
|
</span>
|
|
<span class="fv-header-actions">
|
|
${this._renderHistoryButton('chat-page-back')}
|
|
${this._renderModeToggle('chat-page-back')}
|
|
<button class="chat-page-back" title=${t('fv.download')} @click=${() => this._download()}>
|
|
<i class="bi bi-download"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
${this._renderVersionBanner()}
|
|
<div class="fv-body">${this._renderBody()}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('mobile-file-viewer-page', MobileFileViewerPage);
|