65 lines
2.0 KiB
JavaScript
65 lines
2.0 KiB
JavaScript
import { html, nothing } from 'lit';
|
|
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="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._renderModeToggle('chat-page-back')}
|
|
<button class="chat-page-back" title="Download" @click=${() => this._download()}>
|
|
<i class="bi bi-download"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<div class="fv-body">${this._renderBody()}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('mobile-file-viewer-page', MobileFileViewerPage);
|