@striven-erp/striven-fileviewer
Version:
A pure javascript fileviewer made for Striven ERP
432 lines (373 loc) • 19.9 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["strivenfileviewer"] = factory();
else
root["strivenfileviewer"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 3);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return StrivenFileViewer; });
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var 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"];
var 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"];
var CONFIG = {
useSVG: true,
downloadIconClass: '',
closeIconClass: ''
};
var StrivenFileViewer =
/*#__PURE__*/
function () {
function StrivenFileViewer(el, config, view) {
var _this = this;
_classCallCheck(this, StrivenFileViewer);
this.path = config.path;
this.fileName = config.name;
this.fileType = config.type;
this.view = view;
el.style.cursor = "pointer";
el.onclick = function () {
return view ? _this.viewFile() : _this.initFileViewer();
};
this.config = _objectSpread({}, CONFIG, {}, config);
}
_createClass(StrivenFileViewer, [{
key: "downloadFile",
value: function downloadFile(unsupported) {
var fileTag = document.createElement("a");
fileTag.href = this.path;
unsupported && fileTag.setAttribute("target", "blank");
fileTag.setAttribute("download", "".concat(this.fileName, ".").concat(this.fileType));
document.body.append(fileTag);
fileTag.click();
fileTag.remove();
}
}, {
key: "constructSVG",
value: function constructSVG(svgData) {
var viewBox = svgData.viewBox,
d = svgData.d;
var fillColor = "#fff";
var xmlns = "http://www.w3.org/2000/svg";
var height = "25";
var width = "25";
var icon = document.createElement('span');
var svg = "<svg width=\"".concat(width, "\" height=\"").concat(height, "\" viewBox=\"").concat(viewBox, "\" xmlns=\"").concat(xmlns, "\">");
var path = "<path fill=\"".concat(fillColor, "\" d=\"").concat(d, "\"/>");
icon.innerHTML = "".concat(svg).concat(path, "</svg>");
return icon;
}
}, {
key: "constructFontIcons",
value: function constructFontIcons(classNames) {
var icon = document.createElement('i');
classNames.split(' ').forEach(function (className) {
return icon.classList.add(className);
});
return icon;
}
}, {
key: "createFileViewerControl",
value: function createFileViewerControl(svgData, handler) {
var fileviewerControlIcon;
var 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 = function () {
return handler();
};
if (!this.config.useSVG) {
fileviewerControlIcon = this.constructFontIcons(svgData);
fileviewerControl.onmouseenter = function (e) {
return e.target.style.color = "#ddd";
};
fileviewerControl.onmouseleave = function (e) {
return e.target.style.color = "#fff";
};
} else {
fileviewerControlIcon = this.constructSVG(svgData);
fileviewerControl.onmouseenter = function (e) {
return e.target.querySelector("path").setAttribute("fill", "#ddd");
};
fileviewerControl.onmouseleave = function (e) {
return e.target.querySelector("path").setAttribute("fill", "#fff");
};
}
fileviewerControl.append(fileviewerControlIcon);
return fileviewerControl;
}
}, {
key: "viewFile",
value: function viewFile() {
var 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 {
var fileType = this.fileType.toLowerCase();
if (IMAGEEXTENSTIONS.includes(fileType)) {
clearView();
var 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();
var iframe = document.createElement("embed");
iframe.src = "https://view.officeapps.live.com/op/embed.aspx?src=".concat(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();
var embed = document.createElement("embed");
embed.src = "".concat(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;
}
}
}
}
}, {
key: "initFileViewer",
value: function initFileViewer() {
var _this2 = this;
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', function (e) {
if (e.key) {
e.key === 'Escape' && _this2.close();
} else {
e.keyCode === '27' && _this2.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"
}, function () {
return _this2.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"
}, function () {
return _this2.lightbox.remove();
}));
} else {
this.fileviewerControlHeader.append(this.createFileViewerControl(this.config.downloadIconClass, function () {
return _this2.downloadFile();
}));
this.fileviewerControlHeader.append(this.createFileViewerControl(this.config.closeIconClass, function () {
return _this2.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);
}
}, {
key: "close",
value: function close() {
document.body.style.overflow = "";
this.lightbox.remove();
}
}]);
return StrivenFileViewer;
}();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return VueStrivenFileViewer; });
/* harmony import */ var _strivenfileviewer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var VueStrivenFileViewer = function VueStrivenFileViewer(vue) {
_classCallCheck(this, VueStrivenFileViewer);
vue.directive('fileviewer', {
inserted: function inserted(el, binding, vnode, oldVnode) {
var config = binding.value;
var fileviewer = new _strivenfileviewer__WEBPACK_IMPORTED_MODULE_0__["default"](el, config, config.viewer);
}
});
};
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return KoStrivenFileViewer; });
/* harmony import */ var _strivenfileviewer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var KoStrivenFileViewer = function KoStrivenFileViewer(ko) {
_classCallCheck(this, KoStrivenFileViewer);
ko.bindingHandlers.fileviewer = {
init: function init(element, valueAccessor, allBindings, viewModel, bindingContext) {
var viewElement = allBindings().viewElement;
var valueOption = valueAccessor();
var value = ko.utils.unwrapObservable(valueOption);
var fileviewer = viewElement ? new _strivenfileviewer__WEBPACK_IMPORTED_MODULE_0__["default"](element, value, viewElement) : new _strivenfileviewer__WEBPACK_IMPORTED_MODULE_0__["default"](element, value);
}
};
};
/***/ }),
/* 3 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _strivenfileviewer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "StrivenFileViewer", function() { return _strivenfileviewer__WEBPACK_IMPORTED_MODULE_0__["default"]; });
/* harmony import */ var _vue_strivenfileviewer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "VueStrivenFileViewer", function() { return _vue_strivenfileviewer__WEBPACK_IMPORTED_MODULE_1__["default"]; });
/* harmony import */ var _ko_strivenfileviewer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "KoStrivenFileViewer", function() { return _ko_strivenfileviewer__WEBPACK_IMPORTED_MODULE_2__["default"]; });
/***/ })
/******/ ]);
});