devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
148 lines (143 loc) • 6.57 kB
JavaScript
/**
* DevExtreme (cjs/ui/html_editor/modules/imageUpload.js)
* Version: 23.2.6
* Build date: Wed May 01 2024
*
* Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
exports.default = void 0;
var _devextremeQuill = _interopRequireDefault(require("devextreme-quill"));
var _base = _interopRequireDefault(require("./base"));
var _events_engine = _interopRequireDefault(require("../../../events/core/events_engine"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _type = require("../../../core/utils/type");
var _extend = require("../../../core/utils/extend");
var _image_uploader_helper = require("../utils/image_uploader_helper");
var _index = require("../../../events/utils/index");
var _file_uploader = _interopRequireDefault(require("../../file_uploader"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
}
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass)
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
o.__proto__ = p;
return o
};
return _setPrototypeOf(o, p)
}
const MODULE_NAMESPACE = "dxHtmlEditorImageUpload";
const HIDDEN_FILE_UPLOADER_CLASS = "dx-htmleditor-hidden-content";
let ImageUploadModule = _base.default;
if (_devextremeQuill.default) {
ImageUploadModule = function(_BaseModule) {
_inheritsLoose(ImageUploadModule, _BaseModule);
function ImageUploadModule(quill, options) {
var _this;
_this = _BaseModule.call(this, quill, options) || this;
_this.options = options;
_this._quillContainer = _this.editorInstance._getQuillContainer();
_this.addCleanCallback(_this.prepareCleanCallback());
_this._handleServerUpload();
return _this
}
var _proto = ImageUploadModule.prototype;
_proto._handleServerUpload = function() {
const useServerUpload = (0, _type.isDefined)(this.options.fileUploadMode) && "base64" !== this.options.fileUploadMode;
useServerUpload ? this._enableDragAndDropUploading() : this._disableDragAndDropUploading()
};
_proto._getUploaderModule = function() {
if (!this._uploaderModule) {
this._uploaderModule = this.quill.getModule("uploader")
}
return this._uploaderModule
};
_proto._disableDragAndDropUploading = function() {
var _this$_fileUploader;
this._getUploaderModule().preventImageUploading(false);
this._detachEvents();
null === (_this$_fileUploader = this._fileUploader) || void 0 === _this$_fileUploader ? void 0 : _this$_fileUploader.dispose()
};
_proto._enableDragAndDropUploading = function() {
this._initFileUploader();
this._getUploaderModule().preventImageUploading(true);
this._attachEvents()
};
_proto._initFileUploader = function() {
const $container = (0, _renderer.default)("<div>").addClass(HIDDEN_FILE_UPLOADER_CLASS).appendTo(this._quillContainer);
const fileUploaderOptions = (0, _extend.extend)({}, (0, _image_uploader_helper.getFileUploaderBaseOptions)(), {
uploadUrl: this.options.uploadUrl,
onUploaded: this._onUploaded.bind(this)
}, this.options.fileUploaderOptions);
this._fileUploader = this.editorInstance._createComponent($container, _file_uploader.default, fileUploaderOptions);
return $container
};
_proto._onUploaded = function(data) {
var _this$quill$getSelect;
const {
index: pasteIndex
} = null !== (_this$quill$getSelect = this.quill.getSelection()) && void 0 !== _this$quill$getSelect ? _this$quill$getSelect : {
index: this.quill.getLength()
};
(0, _image_uploader_helper.serverUpload)(this.options.uploadDirectory, data.file.name, this.quill, pasteIndex)
};
_proto._attachEvents = function() {
_events_engine.default.on(this.quill.root, (0, _index.addNamespace)("drop", MODULE_NAMESPACE), this._dropHandler.bind(this));
_events_engine.default.on(this.quill.root, (0, _index.addNamespace)("paste", MODULE_NAMESPACE), this._pasteHandler.bind(this))
};
_proto._detachEvents = function() {
_events_engine.default.off(this.quill.root, MODULE_NAMESPACE)
};
_proto._dropHandler = function(e) {
this._handleInsertImages(e, "dataTransfer")
};
_proto._pasteHandler = function(e) {
this._handleInsertImages(e, "clipboardData")
};
_proto._handleInsertImages = function(e, filesField) {
this.saveValueChangeEvent(e);
const files = Array.from(e.originalEvent[filesField].files || []);
const uploads = files;
if (uploads.length) {
e.preventDefault();
e.stopPropagation();
this._fileUploader.option("value", uploads);
this._fileUploader.upload()
}
};
_proto.clean = function() {
this._disableDragAndDropUploading()
};
_proto.prepareCleanCallback = function() {
return () => {
this.clean()
}
};
_proto.option = function(_option, value) {
switch (_option) {
case "imageUpload":
this.handleOptionChangeValue(value);
break;
case "fileUploadMode":
this.options.fileUploadMode = value;
this._handleServerUpload();
break;
case "fileUploaderOptions":
this._fileUploader.option(value)
}
};
return ImageUploadModule
}(_base.default)
}
var _default = ImageUploadModule;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;