@striven-erp/striven-fileviewer
Version:
A pure javascript fileviewer made for Striven ERP
364 lines (327 loc) • 11.4 kB
JavaScript
const IMAGEEXTENSTIONS = [
"ase",
"art",
"bmp",
"blp",
"cd5",
"cit",
"cpt",
"cr2",
"cut",
"dds",
"dib",
"djvu",
"egt",
"exif",
"gif",
"gpl",
"grf",
"icns",
"ico",
"iff",
"jng",
"jpeg",
"jpg",
"jfif",
"jp2",
"jps",
"lbm",
"max",
"miff",
"mng",
"msp",
"nitf",
"ota",
"pbm",
"pc1",
"pc2",
"pc3",
"pcf",
"pcx",
"pdn",
"pgm",
"PI1",
"PI2",
"PI3",
"pict",
"pct",
"pnm",
"pns",
"ppm",
"psb",
"psd",
"pdd",
"psp",
"px",
"pxm",
"pxr",
"qfx",
"raw",
"rle",
"sct",
"sgi",
"rgb",
"int",
"bw",
"tga",
"tiff",
"tif",
"vtf",
"xbm",
"xcf",
"xpm",
"3dv",
"amf",
"ai",
"awg",
"cgm",
"cdr",
"cmx",
"dxf",
"e2d",
"egt",
"eps",
"fs",
"gbr",
"odg",
"svg",
"stl",
"vrml",
"x3d",
"sxd",
"v2d",
"vnd",
"wmf",
"emf",
"art",
"xar",
"png",
"webp",
"jxr",
"hdp",
"wdp",
"cur",
"ecw",
"iff",
"lbm",
"liff",
"nrrd",
"pam",
"pcx",
"pgf",
"sgi",
"rgb",
"rgba",
"bw",
"int",
"inta",
"sid",
"ras",
"sun",
"tga"
]
const MICROSOFTOFFICEEXTENSIONS = [
"doc",
"dot",
"wbk",
"docx",
"docm",
"dotx",
"dotm",
"docb",
"xls",
"xlt",
"xlm",
"xlsx",
"xlsm",
"xltx",
"xltm",
"xlsb",
"xla",
"xlam",
"xll",
"xlw",
"ppt",
"pot",
"pps",
"pptx",
"pptm",
"potx",
"potm",
"ppam",
"ppsx",
"ppsm",
"sldx",
"sldm"
]
const CONFIG = {
useSVG: true,
downloadIconClass: '',
closeIconClass: '',
};
export default class StrivenFileViewer {
constructor(el, config, view) {
this.path = config.path;
this.fileName = config.name;
this.fileType = config.type;
this.view = view;
el.style.cursor = "pointer";
el.onclick = () => view ? this.viewFile() : this.initFileViewer();
this.config = { ...CONFIG, ...config };
}
downloadFile(unsupported) {
const fileTag = document.createElement("a");
fileTag.href = this.path;
unsupported && fileTag.setAttribute("target", "blank");
fileTag.setAttribute("download", `${this.fileName}.${this.fileType}`);
document.body.append(fileTag);
fileTag.click();
fileTag.remove();
}
constructSVG(svgData) {
const { viewBox, d } = svgData;
const fillColor = "#fff";
const xmlns = "http://www.w3.org/2000/svg";
const height = "25";
const width = "25";
const icon = document.createElement('span');
const svg = `<svg width="${width}" height="${height}" viewBox="${viewBox}" xmlns="${xmlns}">`;
const path = `<path fill="${fillColor}" d="${d}"/>`;
icon.innerHTML = `${svg}${path}</svg>`;
return icon;
}
constructFontIcons(classNames) {
const icon = document.createElement('i');
classNames.split(' ').forEach((className) => icon.classList.add(className));
return icon;
}
createFileViewerControl(svgData, handler) {
let fileviewerControlIcon;
const fileviewerControl = document.createElement("div");
fileviewerControl.style.display = "flex";
fileviewerControl.style.justifyContent = "center";
fileviewerControl.style.alignItems = "center";
fileviewerControl.style.color = "#fff";
fileviewerControl.style.textAlign = "center";
fileviewerControl.style.padding = "10px";
fileviewerControl.style.backgroundColor = "#333";
fileviewerControl.style.cursor = "pointer";
fileviewerControl.onclick = () => handler();
if (!this.config.useSVG) {
fileviewerControlIcon = this.constructFontIcons(svgData);
fileviewerControl.onmouseenter = (e) => e.target.style.color = "#ddd";
fileviewerControl.onmouseleave = (e) => e.target.style.color = "#fff";
}
else {
fileviewerControlIcon = this.constructSVG(svgData);
fileviewerControl.onmouseenter = (e) => e.target.querySelector("path").setAttribute("fill", "#ddd");
fileviewerControl.onmouseleave = (e) => e.target.querySelector("path").setAttribute("fill", "#fff");
}
fileviewerControl.append(fileviewerControlIcon);
return fileviewerControl;
}
viewFile() {
const that = this;
function clearView() {
that.view && (that.view.innerHTML = "");
that.view && (that.lightbox = null);
}
if (window.matchMedia("(max-width: 400px)").matches) {
this.lightbox = null;
this.downloadFile();
} else {
const fileType = this.fileType.toLowerCase();
if (IMAGEEXTENSTIONS.includes(fileType)) {
clearView();
const image = document.createElement("img");
image.style.maxWidth = "90%";
image.style.maxHeight = "90%";
image.style.alignSelf = "center";
image.src = this.path;
this.view ? this.view.append(image) : this.lightbox.append(image);
}
else if (MICROSOFTOFFICEEXTENSIONS.includes(fileType)) {
clearView();
const iframe = document.createElement("embed");
iframe.src = `https://view.officeapps.live.com/op/embed.aspx?src=${this.path}`;
iframe.href = "http://office.com";
iframe.style.alignSelf = "center";
iframe.width = "100%";
iframe.height = "100%";
// if (!this.view) {
// this.fileviewerControlHeader.style.position = "absolute";
// this.fileviewerControlHeader.style.right = "0";
// }
this.view ? this.view.append(iframe) : this.lightbox.append(iframe);
}
else {
switch (fileType) {
case 'pdf':
case 'txt':
clearView();
const embed = document.createElement("embed");
embed.src = `${this.path}`;
embed.width = "100%";
embed.height = "100%";
embed.style.alignSelf = "center";
(fileType === 'txt') && (embed.style.backgroundColor = '#fff');
// if (!this.view) {
// this.fileviewerControlHeader.style.position = "absolute";
// this.fileviewerControlHeader.style.right = "0";
// }
this.view ? this.view.append(embed) : this.lightbox.append(embed);
break;
default:
this.lightbox = null;
this.downloadFile(true);
break;
}
}
}
}
initFileViewer() {
document.body.style.overflow = "hidden";
this.lightbox = document.createElement("div");
this.lightbox.style.overflow = "hidden";
this.lightbox.style.display = "flex";
this.lightbox.style.justifyContent = "space-between";
this.lightbox.style.flexDirection = "column";
this.lightbox.style.backgroundColor = "rgba(0, 0, 0, .75)";
this.lightbox.style.position = "fixed";
this.lightbox.style.zIndex = '1000000';
this.lightbox.style.top = "0";
this.lightbox.style.right = "0";
this.lightbox.style.left = "0";
this.lightbox.style.bottom = "0";
window.addEventListener('keyup', (e) => {
if (e.key) {
e.key === 'Escape' && this.close();
} else {
e.keyCode === '27' && this.close();
}
})
this.fileviewerControlHeader = document.createElement("div");
this.fileviewerControlHeader.style.display = "flex";
this.fileviewerControlHeader.style.justifyContent = "flex-end";
if (this.config.useSVG) {
this.fileviewerControlHeader.append(this.createFileViewerControl({ viewBox: "0 0 512 512", d: "M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z" }, () => this.downloadFile()));
// this.fileviewerControlHeader.append(this.createFileViewerControl({ viewBox: "0 0 512 512", d: "M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z" }, () => printJS(this.path)))
this.fileviewerControlHeader.append(this.createFileViewerControl({ viewBox: "0 0 352 512", d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }, () => this.lightbox.remove()));
}
else {
this.fileviewerControlHeader.append(this.createFileViewerControl(this.config.downloadIconClass, () => this.downloadFile()));
this.fileviewerControlHeader.append(this.createFileViewerControl(this.config.closeIconClass, () => this.close()));
}
this.lightbox && this.lightbox.append(this.fileviewerControlHeader);
this.viewFile();
this.fileviewerControlFooter = document.createElement("div");
this.lightbox && this.lightbox.append(this.fileviewerControlFooter);
// this.lastControl = this.fileviewerControlHeader.querySelector("span").parentElement;
// this.lastControl.style.borderBottomLeftRadius = "10px";
this.lightbox && document.querySelector("body").appendChild(this.lightbox);
}
close() {
document.body.style.overflow = "";
this.lightbox.remove()
}
}