diff --git a/common/src/main/resources/static/assets/js/layui/util/layui-file-upload.js b/common/src/main/resources/static/assets/js/layui/util/layui-file-upload.js
new file mode 100644
index 00000000..d381ae71
--- /dev/null
+++ b/common/src/main/resources/static/assets/js/layui/util/layui-file-upload.js
@@ -0,0 +1,855 @@
+function LayuiFileUpload(layui, viewer) {
+ let $ = layui.$;
+ let form = layui.form;
+ let upload = layui.upload;
+ let ajax = top.restAjax || top.ajax;
+ let dialog = top.dialog;
+ let Viewer = viewer;
+ let viewerObj = {};
+ let style = `
+
+ `
+ $(document.head).append(style);
+
+ /**
+ * 初始化图片上传
+ * @param opt
+ */
+ function initUploadImage(opt) {
+ let maxCount = opt.maxCount ? parseInt(opt.maxCount) : 9
+ maxCount = opt.maxCount < 0 ? 9 : opt.maxCount;
+ let fieldName = opt.fieldName;
+ let headers = opt.headers;
+ headers = headers ? headers : {};
+ let isApp = opt.isApp;
+ let isAppRelease = opt.isAppRelease;
+ let isShow = opt.isShow;
+
+ let id = '#' + fieldName;
+ let fileBoxId = id + 'FileBox';
+ let uploadBtnId = id + 'UploadBtn';
+ let deleteBtnClass = `.delete-${fieldName}-btn`;
+
+ function init(callback) {
+ let fileIds = $(id).val();
+ let fileIdArray = fileIds ? fileIds.split(',') : [];
+
+ let html = '';
+ for (let i = 0, fileId; fileId = fileIdArray[i++];) {
+ html += `
+
+ `;
+ }
+
+ $(fileBoxId).empty();
+ $(fileBoxId).append(html);
+
+ if (fileIdArray.length < maxCount) {
+ $(uploadBtnId).removeClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', false);
+ } else {
+ $(uploadBtnId).addClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', true);
+ }
+
+ callback ? callback() : '';
+ }
+
+ function addClick() {
+ let layerLoadingIndex;
+ let url = 'api/file/v2/upload-image';
+ if (isApp) {
+ url = 'app/file/v2/upload-image'
+ }
+ if (isAppRelease) {
+ url = 'app/file/v2/upload-image-release'
+ }
+ upload.render({
+ elem: uploadBtnId,
+ url: url,
+ accept: 'images',
+ acceptMime: 'image/*',
+ field: 'image',
+ exts: 'jpg|png|gif|bmp|jpeg',
+ name: fieldName,
+ headers: headers,
+ before: function (obj) {
+ layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
+ },
+ done: function (res, index, upload) {
+ layer.close(layerLoadingIndex);
+ let name = this.name;
+ let files = $('#' + this.name).val();
+ if (files.length > 0) {
+ files += ',';
+ }
+ files += res.data.fileId;
+ $('#' + name).val(files);
+ init(function () {
+ viewerObj[name].update();
+ });
+ },
+ error: function (index, upload) {
+ layer.close(layerLoadingIndex);
+ layer.msg('文件上传失败');
+ },
+ progress: function (n, elem, res, index) {
+ let percent = n + '%'
+ console.log(percent);
+ console.log(elem);
+ console.log(res);
+ console.log(index);
+ // element.progress('demo-' + index, n + '%');
+ }
+ });
+ $(document).on('click', deleteBtnClass, function () {
+ let name = this.dataset.name;
+ let id = this.dataset.id;
+ let files = $('#' + name).val().replace(id, '');
+ files = files.replace(/\,+/g, ',');
+ if (files.charAt(0) == ',') {
+ files = files.substring(1);
+ }
+ if (files.charAt(files.length - 1) == ',') {
+ files = files.substring(0, files.length - 1);
+ }
+ $('#' + name).val(files);
+ init(function () {
+ viewerObj[name].update();
+ });
+ });
+ }
+
+ init(function () {
+ viewerObj[fieldName] = new Viewer(document.getElementById(fieldName + 'FileBox'), {navbar: false});
+ });
+
+ if (!isShow) {
+ addClick();
+ } else {
+ $(uploadBtnId).hide();
+ }
+ }
+
+ /**
+ * 初始化图片上传
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initUploadImage = function (fieldName, maxCount) {
+ initUploadImage({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: false
+ });
+ }
+
+ /**
+ * 初始化APP图片上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppUploadImage = function (fieldName, maxCount, headers) {
+ initUploadImage({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: true,
+ isAppRelease: false,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 初始化APP放行图片上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppReleaseUploadImage = function (fieldName, maxCount, headers) {
+ initUploadImage({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: true,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 显示上传图片
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initShowUploadImage = function (fieldName, maxCount) {
+ initUploadImage({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: true
+ });
+ }
+
+ /**
+ * 初始化文件上传
+ * @param opt
+ */
+ function initUploadFile(opt) {
+ let maxCount = opt.maxCount ? parseInt(opt.maxCount) : 3
+ maxCount = opt.maxCount < 0 ? 3 : opt.maxCount;
+ let fieldName = opt.fieldName;
+ let headers = opt.headers;
+ headers = headers ? headers : {};
+ let isApp = opt.isApp;
+ let isAppRelease = opt.isAppRelease;
+ let isShow = opt.isShow;
+
+ let id = '#' + fieldName;
+ let fileBoxId = id + 'FileBox';
+ let uploadBtnId = id + 'UploadBtn';
+ let deleteBtnClass = '.delete-' + fieldName + '-btn';
+
+ function init() {
+ let files = $(id).val();
+ let fileArray = files ? files.split(',') : [];
+
+ let html = '';
+ if (fileArray.length > 0) {
+ html += [
+ ''
+ ].join('');
+ }
+
+ $(fileBoxId).empty();
+ $(fileBoxId).append(html);
+
+ if (fileArray.length < maxCount) {
+ $(uploadBtnId).removeClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', false);
+ } else {
+ $(uploadBtnId).addClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', true);
+ }
+ }
+
+ function addClick() {
+ let layerLoadingIndex;
+ let url = 'api/file/v2/upload-file';
+ if (isApp) {
+ url = 'app/file/v2/upload-file'
+ }
+ if (isAppRelease) {
+ url = 'app/file/v2/upload-file-release'
+ }
+ upload.render({
+ elem: uploadBtnId,
+ url: url,
+ accept: 'file',
+ acceptMime: [
+ 'application/pdf',
+ 'application/msword',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ 'application/vnd.ms-excel',
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ 'application/vnd.ms-powerpoint',
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+ 'application/vnd.ms-works',
+ 'text/plain',
+ 'application/x-rar',
+ 'application/x-zip-compressed'
+ ].join(','),
+ field: 'file',
+ exts: 'pdf|doc|docx|xls|xlsx|ppt|pptx|wps|txt|rar|zip',
+ name: fieldName,
+ headers: headers,
+ before: function (obj) {
+ layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
+ },
+ done: function (res, index, upload) {
+ layer.close(layerLoadingIndex);
+ let name = this.name;
+ let files = $('#' + this.name).val();
+ if (files.length > 0) {
+ files += ',';
+ }
+ files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '，');
+ $('#' + name).val(files);
+ init();
+ },
+ error: function (index, upload) {
+ layer.close(layerLoadingIndex);
+ layer.msg('文件上传失败');
+ },
+ progress: function (n, elem, res, index) {}
+ });
+ $(document).on('click', deleteBtnClass, function () {
+ let id = this.dataset.id;
+ let name = this.dataset.name;
+ let fieldName = this.dataset.fieldName;
+ let files = $('#' + fieldName).val().replace(id + ':' + name, '');
+ files = files.replace(/\,+/g, ',');
+ if (files.charAt(0) == ',') {
+ files = files.substring(1);
+ }
+ if (files.charAt(files.length - 1) == ',') {
+ files = files.substring(0, files.length - 1);
+ }
+ $('#' + fieldName).val(files);
+ init();
+ });
+ }
+
+ init();
+ if (!isShow) {
+ addClick();
+ } else {
+ $(uploadBtnId).hide();
+ }
+
+ }
+
+ /**
+ * 初始化文件上传
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initUploadFile = function (fieldName, maxCount) {
+ initUploadFile({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: false
+ })
+ }
+
+ /**
+ * 初始化APP文件上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppUploadFile = function (fieldName, maxCount, headers) {
+ initUploadFile({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: true,
+ isAppRelease: false,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 初始化APP放行文件上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppReleaseUploadFile = function (fieldName, maxCount, headers) {
+ initUploadFile({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: true,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 显示上传文件
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initShowUploadFile = function (fieldName, maxCount) {
+ initUploadFile({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: true
+ });
+ }
+
+ /**
+ * 初始化视频上传
+ * @param opt
+ */
+ function initUploadVideo(opt) {
+ let maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
+ maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
+ let fieldName = opt.fieldName;
+ let headers = opt.headers;
+ headers = headers ? headers : {};
+ let isApp = opt.isApp;
+ let isAppRelease = opt.isAppRelease;
+ let isShow = opt.isShow;
+
+ let id = '#' + fieldName;
+ let fileBoxId = id + 'FileBox';
+ let uploadBtnId = id + 'UploadBtn';
+ let deleteBtnClass = '.delete-' + fieldName + '-btn';
+
+ function init() {
+ let files = $(id).val();
+ let fileArray = files ? files.split(',') : [];
+ let html = '';
+ for (let i = 0, file; file = fileArray[i++];) {
+ let idNameArray = file.split(':');
+ let fileId = idNameArray[0];
+ let fileName = idNameArray[1];
+ html += [
+ '',
+ ].join('');
+ }
+
+ $(fileBoxId).empty();
+ $(fileBoxId).append(html);
+
+ if (fileArray.length < maxCount) {
+ $(uploadBtnId).removeClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', false);
+ } else {
+ $(uploadBtnId).addClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', true);
+ }
+ }
+
+ function addClick() {
+ let layerLoadingIndex;
+ let url = 'api/file/v2/upload-video';
+ if (isApp) {
+ url = 'app/file/v2/upload-video'
+ }
+ if (isAppRelease) {
+ url = 'app/file/v2/upload-video-release'
+ }
+ upload.render({
+ elem: uploadBtnId,
+ url: url,
+ accept: 'video',
+ acceptMime: 'video/mp4',
+ exts: 'mp4',
+ field: 'video',
+ name: fieldName,
+ headers: headers,
+ before: function (obj) {
+ layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
+ },
+ done: function (res, index, upload) {
+ layer.close(layerLoadingIndex);
+ let name = this.name;
+ let files = $('#' + this.name).val();
+ if (files.length > 0) {
+ files += ',';
+ }
+ files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '，');
+ $('#' + name).val(files);
+ init();
+ },
+ error: function (index, upload) {
+ layer.close(layerLoadingIndex);
+ layer.msg('文件上传失败');
+ },
+ progress: function (n, elem, res, index) {}
+ });
+ $(document).on('click', deleteBtnClass, function () {
+ let name = this.dataset.name;
+ let id = this.dataset.id;
+ let fieldName = this.dataset.fieldName;
+ let files = $('#' + fieldName).val().replace(id + ':' + name, '');
+ files = files.replace(/\,+/g, ',');
+ if (files.charAt(0) == ',') {
+ files = files.substring(1);
+ }
+ if (files.charAt(files.length - 1) == ',') {
+ files = files.substring(0, files.length - 1);
+ }
+ $('#' + fieldName).val(files);
+ init();
+ });
+ }
+
+ init();
+
+ if (!isShow) {
+ addClick();
+ } else {
+ $(uploadBtnId).hide();
+ }
+ }
+
+ /**
+ * 初始化视频上传
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initUploadVideo = function (fieldName, maxCount) {
+ initUploadVideo({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: false
+ })
+ }
+
+ /**
+ * 初始化APP视频上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppUploadVideo = function (fieldName, maxCount, headers) {
+ initUploadVideo({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: true,
+ isAppRelease: false,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 初始化APP放行视频上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppReleaseUploadVideo = function (fieldName, maxCount, headers) {
+ initUploadVideo({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: true,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 显示上传视频
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initShowUploadVideo = function (fieldName, maxCount) {
+ initUploadVideo({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: true
+ });
+ }
+
+ function initUploadAudio(opt) {
+ let maxCount = opt.maxCount ? parseInt(opt.maxCount) : 1
+ maxCount = opt.maxCount < 0 ? 1 : opt.maxCount;
+ let fieldName = opt.fieldName;
+ let headers = opt.headers;
+ headers = headers ? headers : {};
+ let isApp = opt.isApp;
+ let isAppRelease = opt.isAppRelease;
+ let isShow = opt.isShow;
+
+ let id = '#' + fieldName;
+ let fileBoxId = id + 'FileBox';
+ let uploadBtnId = id + 'UploadBtn';
+ let deleteBtnClass = '.delete-' + fieldName + '-btn';
+
+ function init() {
+ let files = $(id).val();
+ let fileArray = files ? files.split(',') : [];
+ let html = '';
+ for (let i = 0, file; file = fileArray[i++];) {
+ let idNameArray = file.split(':');
+ let fileId = idNameArray[0];
+ let fileName = idNameArray[1];
+ html += [
+ '',
+ ].join('');
+ }
+
+ $(fileBoxId).empty();
+ $(fileBoxId).append(html);
+
+ if (fileArray.length < maxCount) {
+ $(uploadBtnId).removeClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', false);
+ } else {
+ $(uploadBtnId).addClass('layui-btn-disabled');
+ $(uploadBtnId).attr('disabled', true);
+ }
+ }
+
+ function addClick() {
+ let layerLoadingIndex;
+ let url = 'api/file/v2/upload-audio';
+ if (isApp) {
+ url = 'app/file/v2/upload-audio'
+ }
+ if (isAppRelease) {
+ url = 'app/file/v2/upload-audio-release'
+ }
+ upload.render({
+ elem: uploadBtnId,
+ url: url,
+ accept: 'audio',
+ acceptMime: [
+ 'audio/wav',
+ 'audio/mp3'
+ ],
+ exts: 'wav|mp3',
+ field: 'audio',
+ name: fieldName,
+ headers: headers,
+ before: function (obj) {
+ layerLoadingIndex = layer.msg('上传中...', {icon: 16, time: 0, shade: 0.3})
+ },
+ done: function (res, index, upload) {
+ layer.close(layerLoadingIndex);
+ let name = this.name;
+ let files = $('#' + this.name).val();
+ if (files.length > 0) {
+ files += ',';
+ }
+ files += res.data.fileId + ':' + res.data.fileName.replace(/\,/g, '，');
+ $('#' + name).val(files);
+ init();
+ },
+ error: function (index, upload) {
+ layer.close(layerLoadingIndex);
+ layer.msg('文件上传失败');
+ },
+ progress: function (n, elem, res, index) {}
+ });
+ $(document).on('click', deleteBtnClass, function () {
+ let name = this.dataset.name;
+ let id = this.dataset.id;
+ let fieldName = this.dataset.fieldName;
+ let files = $('#' + fieldName).val().replace(id + ':' + name, '');
+ files = files.replace(/\,+/g, ',');
+ if (files.charAt(0) == ',') {
+ files = files.substring(1);
+ }
+ if (files.charAt(files.length - 1) == ',') {
+ files = files.substring(0, files.length - 1);
+ }
+ $('#' + fieldName).val(files);
+ init();
+ });
+ }
+
+ init();
+
+ if (!isShow) {
+ addClick();
+ } else {
+ $(uploadBtnId).hide();
+ }
+ }
+
+ /**
+ * 初始化音频上传
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initUploadAudio = function (fieldName, maxCount) {
+ initUploadAudio({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: false
+ })
+ }
+
+ /**
+ * 初始化APP音频上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppUploadAudio = function (fieldName, maxCount, headers) {
+ initUploadAudio({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: true,
+ isAppRelease: false,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 初始化APP放行音频上传
+ * @param fieldName
+ * @param maxCount
+ * @param headers
+ */
+ this.initAppReleaseUploadAudio = function (fieldName, maxCount, headers) {
+ initUploadAudio({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: true,
+ isShow: false,
+ headers: headers
+ });
+ }
+
+ /**
+ * 显示上传音频
+ * @param fieldName
+ * @param maxCount
+ */
+ this.initShowUploadAudio = function (fieldName, maxCount) {
+ initUploadAudio({
+ fieldName: fieldName,
+ maxCount: maxCount,
+ isApp: false,
+ isAppRelease: false,
+ isShow: true
+ });
+ }
+
+ /**
+ * 初始化日期
+ * @param opt
+ */
+ this.initDate = function (opt) {
+ laydate.render({
+ elem: '#' + opt.id,
+ type: opt.datetype,
+ format: opt.dateformat,
+ value: opt.dateDefaultValue,
+ min: opt.dataMinValue,
+ max: opt.dataMaxValue,
+ trigger: 'click'
+ });
+ }
+
+ /**
+ * 初始化checkbox数据
+ * @param form
+ * @param checkedData
+ * @param id
+ */
+ this.initCheckboxData = function (formName, checkedData, id) {
+ let dataArray = checkedData.split(',');
+ let obj = {};
+ for (let i = 0, data; data = dataArray[i++];) {
+ obj[id + '[' + data + ']'] = true;
+ }
+ form.val(formName, obj);
+ }
+
+ /**
+ * 设置复选框值
+ * @param formData
+ * @param id
+ */
+ this.setCheckboxValue = function (formData, id) {
+ formData.field[id] = ajax.checkBoxToString(formData.field, id);
+ }
+
+ /**
+ * 设置开关值
+ * @param formData
+ * @param id
+ */
+ this.setSwitchValue = function (formData, id) {
+ formData.field[id] = formData.field[id] ? 1 : 0;
+ }
+
+ /**
+ * 清空上传字段
+ * @param formData
+ */
+ this.clearUploadField = function (formData) {
+ let fileInputs = $(formData.form).find('input[type="file"]');
+ if (fileInputs.length === 0) {
+ return;
+ }
+ $.each(fileInputs, function (index, item) {
+ delete formData.field[item.name];
+ });
+ }
+
+}
\ No newline at end of file
diff --git a/common/src/main/resources/static/assets/js/viewer/viewer.common.js b/common/src/main/resources/static/assets/js/viewer/viewer.common.js
new file mode 100644
index 00000000..21456d14
--- /dev/null
+++ b/common/src/main/resources/static/assets/js/viewer/viewer.common.js
@@ -0,0 +1,3037 @@
+/*!
+ * Viewer.js v1.3.5
+ * https://fengyuanchen.github.io/viewerjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-07-04T11:00:16.790Z
+ */
+
+'use strict';
+
+function _typeof(obj) {
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+ _typeof = function (obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function (obj) {
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+ };
+ }
+
+ return _typeof(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 DEFAULTS = {
+ /**
+ * Enable a modal backdrop, specify `static` for a backdrop
+ * which doesn't close the modal on click.
+ * @type {boolean}
+ */
+ backdrop: true,
+
+ /**
+ * Show the button on the top-right of the viewer.
+ * @type {boolean}
+ */
+ button: true,
+
+ /**
+ * Show the navbar.
+ * @type {boolean | number}
+ */
+ navbar: true,
+
+ /**
+ * Specify the visibility and the content of the title.
+ * @type {boolean | number | Function | Array}
+ */
+ title: true,
+
+ /**
+ * Show the toolbar.
+ * @type {boolean | number | Object}
+ */
+ toolbar: true,
+
+ /**
+ * Custom class name(s) to add to the viewer's root element.
+ * @type {string}
+ */
+ className: '',
+
+ /**
+ * Define where to put the viewer in modal mode.
+ * @type {string | Element}
+ */
+ container: 'body',
+
+ /**
+ * Filter the images for viewing. Return true if the image is viewable.
+ * @type {Function}
+ */
+ filter: null,
+
+ /**
+ * Enable to request fullscreen when play.
+ * @type {boolean}
+ */
+ fullscreen: true,
+
+ /**
+ * Define the initial index of image for viewing.
+ * @type {number}
+ */
+ initialViewIndex: 0,
+
+ /**
+ * Enable inline mode.
+ * @type {boolean}
+ */
+ inline: false,
+
+ /**
+ * The amount of time to delay between automatically cycling an image when playing.
+ * @type {number}
+ */
+ interval: 5000,
+
+ /**
+ * Enable keyboard support.
+ * @type {boolean}
+ */
+ keyboard: true,
+
+ /**
+ * Indicate if show a loading spinner when load image or not.
+ * @type {boolean}
+ */
+ loading: true,
+
+ /**
+ * Indicate if enable loop viewing or not.
+ * @type {boolean}
+ */
+ loop: true,
+
+ /**
+ * Min width of the viewer in inline mode.
+ * @type {number}
+ */
+ minWidth: 200,
+
+ /**
+ * Min height of the viewer in inline mode.
+ * @type {number}
+ */
+ minHeight: 100,
+
+ /**
+ * Enable to move the image.
+ * @type {boolean}
+ */
+ movable: true,
+
+ /**
+ * Enable to zoom the image.
+ * @type {boolean}
+ */
+ zoomable: true,
+
+ /**
+ * Enable to rotate the image.
+ * @type {boolean}
+ */
+ rotatable: true,
+
+ /**
+ * Enable to scale the image.
+ * @type {boolean}
+ */
+ scalable: true,
+
+ /**
+ * Indicate if toggle the image size between its natural size
+ * and initial size when double click on the image or not.
+ * @type {boolean}
+ */
+ toggleOnDblclick: true,
+
+ /**
+ * Show the tooltip with image ratio (percentage) when zoom in or zoom out.
+ * @type {boolean}
+ */
+ tooltip: true,
+
+ /**
+ * Enable CSS3 Transition for some special elements.
+ * @type {boolean}
+ */
+ transition: true,
+
+ /**
+ * Define the CSS `z-index` value of viewer in modal mode.
+ * @type {number}
+ */
+ zIndex: 2015,
+
+ /**
+ * Define the CSS `z-index` value of viewer in inline mode.
+ * @type {number}
+ */
+ zIndexInline: 0,
+
+ /**
+ * Define the ratio when zoom the image by wheeling mouse.
+ * @type {number}
+ */
+ zoomRatio: 0.1,
+
+ /**
+ * Define the min ratio of the image when zoom out.
+ * @type {number}
+ */
+ minZoomRatio: 0.01,
+
+ /**
+ * Define the max ratio of the image when zoom in.
+ * @type {number}
+ */
+ maxZoomRatio: 100,
+
+ /**
+ * Define where to get the original image URL for viewing.
+ * @type {string | Function}
+ */
+ url: 'src',
+
+ /**
+ * Event shortcuts.
+ * @type {Function}
+ */
+ ready: null,
+ show: null,
+ shown: null,
+ hide: null,
+ hidden: null,
+ view: null,
+ viewed: null,
+ zoom: null,
+ zoomed: null
+};
+
+var TEMPLATE = '' + '
' + '' + '
' + '
' + '
' + '
' + '
' + '' + '
' + '
' + '
' + '
' + '
' + '' + '
' + '
' + '
' + '