@limetech/lime-elements
Version:
298 lines (292 loc) • 13.1 kB
JavaScript
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2714248e.js';
import { t as translate } from './translations-91c611da.js';
/**
*
* @param fileName
* @param url
*/
function detectExtension(fileName, url) {
const pathLike = fileName || url;
if (!pathLike) {
return 'unknown';
}
const extension = pathLike.split('.').pop().toLowerCase();
const extensionsToTypes = {
pdf: 'pdf',
jpg: 'image',
jpeg: 'image',
heic: 'image',
bmp: 'image',
png: 'image',
gif: 'image',
svg: 'image',
svgz: 'image',
ep: 'image',
eps: 'image',
avi: 'video',
flv: 'video',
h264: 'video',
mov: 'video',
mp4: 'video',
mwv: 'video',
mkv: 'video',
mp3: 'audio',
wav: 'audio',
wma: 'audio',
ogg: 'audio',
txt: 'text',
json: 'text',
html: 'text',
xml: 'text',
// Word
doc: 'office',
docx: 'office',
odt: 'office',
dot: 'office',
dotx: 'office',
docm: 'office',
dotm: 'office',
// Presentation
pot: 'office',
ppt: 'office',
pptx: 'office',
odp: 'office',
potx: 'office',
potm: 'office',
pps: 'office',
ppsx: 'office',
ppsm: 'office',
pptm: 'office',
ppam: 'office',
pages: 'office',
// Spreadsheet
xls: 'office',
xlsx: 'office',
xlsm: 'office',
xlsb: 'office',
ods: 'office',
csv: 'office',
numbers: 'office', // not supported (Apple)
};
return extensionsToTypes[extension] || 'unknown';
}
class Fullscreen {
constructor(element) {
this.requestFullscreen = () => {
if (this.enter) {
this.enter();
}
};
this.exitFullscreen = () => {
if (this.exit) {
this.exit.bind(window.document)();
}
};
this.toggle = () => {
const doc = window.document;
const isFullscreen = doc.fullscreenElement ||
doc.mozFullScreenElement ||
doc.webkitFullscreenElement ||
doc.msFullscreenElement;
if (isFullscreen) {
this.exitFullscreen();
}
else {
this.requestFullscreen();
}
};
this.enter =
element.requestFullscreen ||
element.msRequestFullscreen ||
element.mozRequestFullScreen ||
element.webkitRequestFullscreen;
this.enter = this.enter.bind(element);
const doc = window.document;
this.exit =
doc.exitFullscreen ||
doc.msExitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen;
}
isSupported() {
return !!this.requestFullscreen;
}
}
const fileViewerCss = "@charset \"UTF-8\";:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type=\"application/pdf\"]{min-height:20rem}object[type=\"text/plain\"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type=\"text/plain\"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type=\"text/plain\"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;gap:0.5rem;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support h1,.no-support p{margin:0}[class^=button--]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover,[class^=button--]:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}";
const FileViewer = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.action = createEvent(this, "action", 7);
this.renderPdf = () => {
return [
h("div", { class: "action-menu-for-pdf-files" }, this.renderActionMenu()),
h("iframe", { src: this.sanitizeUrl(this.fileUrl), loading: "lazy" }),
];
};
this.renderImage = () => {
return [
this.renderButtons(),
h("img", { src: this.sanitizeUrl(this.fileUrl), alt: this.alt, loading: "lazy" }),
];
};
this.renderVideo = () => {
return (h("video", { controls: true }, h("source", { src: this.sanitizeUrl(this.fileUrl) })));
};
this.renderAudio = () => {
return (h("audio", { controls: true }, h("source", { src: this.sanitizeUrl(this.fileUrl) })));
};
this.renderText = () => {
const fallbackContent = [this.renderNoFileSupportMessage()];
return [
this.renderButtons(),
h("object", { data: this.sanitizeUrl(this.fileUrl), type: "text/plain" }, fallbackContent),
];
};
this.renderOffice = () => {
return [
h("div", { class: "action-menu-for-office-files" }, this.renderActionMenu()),
h("iframe", { src: this.getOfficeViewerUrl() +
encodeURIComponent(this.sanitizeUrl(this.fileUrl)) +
'&embedded=true', loading: "lazy" }),
];
};
this.isOfficeFileAccessibleViaURL = () => {
return (this.fileType === 'office' &&
!(this.fileUrl.startsWith('http://') ||
this.fileUrl.startsWith('https://')));
};
this.getOfficeViewerUrl = () => {
const officeViewers = {
'microsoft-office': 'https://view.officeapps.live.com/op/embed.aspx?src=',
'google-drive': 'https://docs.google.com/gview?url=',
};
return officeViewers[this.officeViewer];
};
this.renderNoFileSupportMessage = () => {
return (h("div", { class: "no-support", role: "alert" }, h("h1", null, "\u26A0\uFE0F"), h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), h("p", { style: { textAlign: 'center', margin: '0 auto' } }, this.getTranslation('file-viewer.message.try-other-options')), this.renderDownloadButton()));
};
this.renderButtons = () => {
return (h("div", { class: "buttons" }, this.renderActionMenu(), this.renderToggleFullscreenButton(), this.renderDownloadButton(), this.renderOpenInNewTabButton()));
};
this.renderToggleFullscreenButton = () => {
if (!this.allowFullscreen || !this.fullscreen.isSupported()) {
return;
}
const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';
const label = this.isFullscreen
? this.getTranslation('file-viewer.exit-fullscreen')
: this.getTranslation('file-viewer.open-in-fullscreen');
return [
h("button", { class: "button--toggle-fullscreen", id: "tooltip-toggle-fullscreen", role: "button", onClick: this.handleToggleFullscreen }, h("limel-icon", { name: icon }), h("limel-tooltip", { label: label, elementId: "tooltip-toggle-fullscreen", openDirection: "left" })),
];
};
this.renderDownloadButton = () => {
var _a;
if (!this.allowDownload || this.isFullscreen) {
return;
}
return (h("a", { class: "button--download", id: "tooltip-download", role: "button", download: (_a = this.filename) !== null && _a !== void 0 ? _a : '', href: this.sanitizeUrl(this.fileUrl), target: "_blank" }, h("limel-icon", { name: "download_2" }), h("limel-tooltip", { label: this.getTranslation('file-viewer.download'), elementId: "tooltip-download", openDirection: "left" })));
};
this.renderOpenInNewTabButton = () => {
if (!this.allowOpenInNewTab || this.isFullscreen) {
return;
}
return (h("a", { class: "button--new-tab", id: "tooltip-new-tab", role: "button", href: this.sanitizeUrl(this.fileUrl), target: "_blank", rel: "noopener noreferrer" }, h("limel-icon", { name: "external_link" }), h("limel-tooltip", { label: this.getTranslation('file-viewer.open-in-new-tab'), elementId: "tooltip-new-tab", openDirection: "left" })));
};
this.renderActionMenu = () => {
if (!this.actions || this.isFullscreen) {
return;
}
return (h("limel-menu", { class: "action-menu", items: this.actions, onSelect: this.emitOnAction, "open-direction": "left" }, h("button", { class: "button--action", id: "tooltip-more", role: "button", slot: "trigger" }, h("limel-icon", { name: "menu_2" }), h("limel-tooltip", { label: this.getTranslation('file-viewer.more-actions'), elementId: "tooltip-more", openDirection: "left" }))));
};
this.createURL = async (fileType) => {
if (['pdf'].includes(fileType)) {
const response = await fetch(this.url);
const blob = await response.blob();
this.fileUrl = URL.createObjectURL(blob);
}
else {
this.fileUrl = this.url;
}
this.loading = false;
};
this.handleToggleFullscreen = () => {
if (this.fullscreen.isSupported()) {
this.fullscreen.toggle();
this.isFullscreen = !this.isFullscreen;
}
};
this.emitOnAction = (event) => {
event.stopPropagation();
this.action.emit(event.detail);
};
this.url = undefined;
this.filename = undefined;
this.alt = undefined;
this.allowFullscreen = false;
this.allowOpenInNewTab = false;
this.allowDownload = false;
this.language = 'en';
this.officeViewer = 'microsoft-office';
this.actions = undefined;
this.isFullscreen = false;
this.fileType = undefined;
this.loading = true;
this.fileUrl = '';
this.fullscreen = new Fullscreen(this.HostElement);
}
async componentWillLoad() {
this.fileType = detectExtension(this.filename, this.url);
await this.createURL(this.fileType);
}
render() {
if (!this.isOfficeFileAccessibleViaURL) {
return this.renderNoFileSupportMessage();
}
if (this.loading) {
return h("limel-spinner", { size: "x-small", limeBranded: false });
}
return this.renderFileViewer();
}
async watchUrl(newUrl, oldUrl) {
if (newUrl === oldUrl) {
return;
}
this.loading = true;
this.fileType = detectExtension(this.filename, this.fileUrl);
await this.createURL(this.fileType);
}
renderFileViewer() {
const fileViewerFunctions = {
pdf: this.renderPdf,
image: this.renderImage,
video: this.renderVideo,
audio: this.renderAudio,
text: this.renderText,
office: this.renderOffice,
};
const fileViewerFunction = fileViewerFunctions[this.fileType] ||
this.renderNoFileSupportMessage;
return fileViewerFunction();
}
sanitizeUrl(url) {
try {
const u = new URL(url, window.location.href);
const allowed = ['http:', 'https:', 'blob:'];
return allowed.includes(u.protocol) ? u.href : '';
}
catch (_a) {
return '';
}
}
getTranslation(key) {
return translate.get(key, this.language);
}
get HostElement() { return getElement(this); }
static get watchers() { return {
"url": ["watchUrl"]
}; }
};
FileViewer.style = fileViewerCss;
export { FileViewer as limel_file_viewer };
//# sourceMappingURL=limel-file-viewer.entry.js.map