suneditor 2.46.1 → 3.0.0-alpha.1

package/src/modules/FileBrowser.js

@@ -0,0 +1,271 @@
+import CoreInjector from '../editorInjector/_core';
+import { domUtils } from '../helper';
+import ApiManager from './ApiManager';
+
+/**
+ * @param {*} inst
+ * @param {Object} params
+ * @param {string} params.title - File browser window title. Required. Can be overridden in fileBrowser.
+ * @param {string} params.url - File server url. Required. Can be overridden in fileBrowser.
+ * @param {Object} params.headers - File server http header. Required. Can be overridden in fileBrowser.
+ * @param {string} params.listClass - Class name of list div. Required. Can be overridden in fileBrowser.
+ * @param {function} params.drawItemHandler - Function that defines the HTML of a file item. Required. Can be overridden in fileBrowser.
+ * @param {function} params.selectorHandler - Function that actions when an item is clicked. Required. Can be overridden in fileBrowser.
+ * @param {number} params.columnSize - Number of "div.se-file-item-column" to be created. Optional. Can be overridden in fileBrowser. Default: 4.
+ */
+const FileBrowser = function (inst, params) {
+	CoreInjector.call(this, inst.editor);
+
+	// create HTML
+	const browserFrame = domUtils.createElement('DIV', { class: 'se-file-browser sun-editor-common' });
+	const content = domUtils.createElement('DIV', { class: 'se-file-browser-inner' }, CreateHTML(inst.editor));
+
+	// members
+	this.kind = inst.constructor.key || inst.constructor.name;
+	this.inst = inst;
+	this.area = browserFrame;
+	this.header = content.querySelector('.se-file-browser-header');
+	this.titleArea = content.querySelector('.se-file-browser-title');
+	this.tagArea = content.querySelector('.se-file-browser-tags');
+	this.body = content.querySelector('.se-file-browser-body');
+	this.list = content.querySelector('.se-file-browser-list');
+	this._loading = content.querySelector('.se-loading-box');
+
+	this.title = params.title;
+	this.listClass = params.listClass;
+	this.url = params.url;
+	this.urlHeader = params.headers;
+	this.drawItemHandler = params.drawItemHandler;
+	this.selectorHandler = params.selectorHandler;
+	this.columnSize = params.columnSize || 4;
+
+	this.items = [];
+	this.selectedTags = [];
+	this._closeSignal = false;
+	this._bindClose = null;
+	this.__globalEventHandler = (e) => {
+		if (!/27/.test(e.keyCode)) return;
+		this.close();
+	};
+	// api manager
+	this.apiManager = new ApiManager(this, { method: 'GET' });
+
+	// init
+	browserFrame.appendChild(domUtils.createElement('DIV', { class: 'se-file-browser-back' }));
+	browserFrame.appendChild(content);
+	this.carrierWrapper.appendChild(browserFrame);
+
+	this.eventManager.addEvent(this.tagArea, 'click', OnClickTag.bind(this));
+	this.eventManager.addEvent(this.list, 'click', OnClickFile.bind(this));
+	this.eventManager.addEvent(content, 'mousedown', OnMouseDown_browser.bind(this));
+	this.eventManager.addEvent(content, 'click', OnClick_browser.bind(this));
+};
+
+FileBrowser.prototype = {
+	/**
+	 * @description Open a file browser plugin
+	 * @param {Object|null} params {
+	 * 	selectorHandler: When the function comes as an argument value, it substitutes "context.selectorHandler".
+	 * }
+	 */
+	open(params) {
+		if (!params) params = {};
+		this.__addGlobalEvent();
+
+		const listClassName = params.listClass || this.listClass;
+		if (!domUtils.hasClass(this.list, listClassName)) {
+			this.list.className = 'se-file-browser-list ' + listClassName;
+		}
+		this.titleArea.textContent = params.title || this.title;
+		this.area.style.display = 'block';
+
+		this._drawFileList(params.url || this.url, params.urlHeader || this.urlHeader);
+	},
+
+	/**
+	 * @description Close a fileBrowser plugin
+	 * The plugin's "init" method is called.
+	 */
+	close() {
+		this.__removeGlobalEvent();
+		this.apiManager.cancel();
+
+		this.area.style.display = 'none';
+		this.selectedTags = [];
+		this.items = [];
+		this.list.innerHTML = this.tagArea.innerHTML = this.titleArea.textContent = '';
+
+		if (typeof this.inst.init === 'function') this.inst.init();
+	},
+
+	/**
+	 * @description Show file browser loading box
+	 */
+	showBrowserLoading() {
+		this._loading.style.display = 'block';
+	},
+
+	/**
+	 * @description Close file browser loading box
+	 */
+	closeBrowserLoading() {
+		this._loading.style.display = 'none';
+	},
+
+	_drawFileList(url, urlHeader) {
+		this.apiManager.call({ method: 'GET', url, headers: urlHeader, callBack: CallBackGet.bind(this), errorCallBack: CallBackError.bind(this) });
+		this.showBrowserLoading();
+	},
+
+	_drawListItem(items, update) {
+		const _tags = [];
+		const len = items.length;
+		const columnSize = this.columnSize;
+		const splitSize = columnSize <= 1 ? 1 : Math.round(len / columnSize) || 1;
+		const drawItemHandler = this.drawItemHandler;
+
+		let tagsHTML = '';
+		let listHTML = '<div class="se-file-item-column">';
+		let columns = 1;
+		for (let i = 0, item, tags; i < len; i++) {
+			item = items[i];
+			tags = !item.tag ? [] : typeof item.tag === 'string' ? item.tag.split(',') : item.tag;
+			tags = item.tag = tags.map(function (v) {
+				return v.trim();
+			});
+			listHTML += drawItemHandler(item);
+
+			if ((i + 1) % splitSize === 0 && columns < columnSize && i + 1 < len) {
+				columns++;
+				listHTML += '</div><div class="se-file-item-column">';
+			}
+
+			if (update && tags.length > 0) {
+				for (let t = 0, tLen = tags.length, tag; t < tLen; t++) {
+					tag = tags[t];
+					if (tag && !_tags.includes(tag)) {
+						_tags.push(tag);
+						tagsHTML += `<a title="${tag}" aria-label="${tag}">${tag}</a>`;
+					}
+				}
+			}
+		}
+		listHTML += '</div>';
+
+		this.list.innerHTML = listHTML;
+
+		if (update) {
+			this.items = items;
+			this.tagArea.innerHTML = tagsHTML;
+		}
+	},
+
+	__addGlobalEvent() {
+		this.__removeGlobalEvent();
+		this._bindClose = this.eventManager.addGlobalEvent('keydown', this.__globalEventHandler, true);
+	},
+
+	__removeGlobalEvent() {
+		if (this._bindClose) this._bindClose = this.eventManager.removeGlobalEvent(this._bindClose);
+	},
+
+	constructor: FileBrowser
+};
+
+function CallBackGet(xmlHttp) {
+	try {
+		const res = JSON.parse(xmlHttp.responseText);
+		if (res.result.length > 0) {
+			this._drawListItem(res.result, true);
+		} else if (res.nullMessage) {
+			this.list.innerHTML = res.nullMessage;
+		}
+	} catch (e) {
+		throw Error(`[SUNEDITOR.fileBrowser.drawList.fail] cause: "${e.message}"`);
+	} finally {
+		this.closeBrowserLoading();
+		this.body.style.maxHeight = domUtils.getClientSize().h - this.header.offsetHeight - 50 + 'px';
+	}
+}
+
+function CallBackError(res, xmlHttp) {
+	this.closeBrowserLoading();
+	throw Error(`[SUNEDITOR.fileBrowser.get.serverException] status: ${xmlHttp.status}, response: ${res.errorMessage || xmlHttp.responseText}`);
+}
+
+function OnClickTag(e) {
+	const target = e.target;
+	if (!domUtils.isAnchor(target)) return;
+
+	const tagName = target.textContent;
+	const selectTag = this.tagArea.querySelector('a[title="' + tagName + '"]');
+	const selectedTags = this.selectedTags;
+	const sTagIndex = selectedTags.indexOf(tagName);
+
+	if (sTagIndex > -1) {
+		selectedTags.splice(sTagIndex, 1);
+		domUtils.removeClass(selectTag, 'on');
+	} else {
+		selectedTags.push(tagName);
+		domUtils.addClass(selectTag, 'on');
+	}
+
+	this._drawListItem(
+		selectedTags.length === 0
+			? this.items
+			: this.items.filter(function (item) {
+					return item.tag.some(function (tag) {
+						return selectedTags.includes(tag);
+					});
+			  }),
+		false
+	);
+}
+
+function OnClickFile(e) {
+	e.preventDefault();
+	e.stopPropagation();
+
+	if (e.target === this.list) return;
+
+	const target = domUtils.getCommandTarget(e.target);
+	if (!target) return;
+
+	this.close();
+	this.selectorHandler(target);
+}
+
+function OnMouseDown_browser(e) {
+	if (/se-file-browser-inner/.test(e.target.className)) {
+		this._closeSignal = true;
+	} else {
+		this._closeSignal = false;
+	}
+}
+
+function OnClick_browser(e) {
+	e.stopPropagation();
+
+	if (/close/.test(e.target.getAttribute('data-command')) || this._closeSignal) {
+		this.close();
+	}
+}
+
+function CreateHTML({ lang, icons }) {
+	return /*html*/ `
+		<div class="se-file-browser-content">
+			<div class="se-file-browser-header">
+				<button type="button" data-command="close" class="se-btn se-file-browser-close" class="close" title="${lang.close}" aria-label="${lang.close}">
+					${icons.cancel}
+				</button>
+				<span class="se-file-browser-title"></span>
+				<div class="se-file-browser-tags"></div>
+			</div>
+			<div class="se-file-browser-body">
+				<div class="se-loading-box sun-editor-common"><div class="se-loading-effect"></div></div>
+				<div class="se-file-browser-list"></div>
+			</div>
+		</div>`;
+}
+
+export default FileBrowser;

package/src/modules/FileManager.js

@@ -0,0 +1,290 @@
+import CoreInjector from '../editorInjector/_core';
+import ApiManager from './ApiManager';
+
+/**
+ *
+ * @param {*} inst
+ * @param {{ query: string, loadHandler: Function, eventHandler: Function, figure: Figure instance | null }} params
+ */
+const FileManager = function (inst, params) {
+	CoreInjector.call(this, inst.editor);
+
+	// members
+	inst.__fileManagement = this;
+	this.kind = inst.constructor.key || inst.constructor.name;
+	this.inst = inst;
+	this.component = inst.editor.component;
+	this.query = params.query;
+	this.loadHandler = params.loadHandler;
+	this.eventHandler = params.eventHandler;
+	this.infoList = [];
+	this.infoIndex = 0;
+	this.uploadFileLength = 0;
+	this.__updateTags = [];
+	// api manager
+	this.apiManager = new ApiManager(this, null);
+};
+
+FileManager.prototype = {
+	/**
+	 * @description Upload the file to the server.
+	 * @param {string} uploadUrl Upload server url
+	 * @param {Object|null} uploadHeader Request header
+	 * @param {Files|{FormData, size}} data FormData in body or Files array
+	 * @param {Function|null} callBack Success call back function
+	 * @param {Function|null} errorCallBack Error call back function
+	 */
+	upload(uploadUrl, uploadHeader, data, callBack, errorCallBack) {
+		this.editor.showLoading();
+
+		let formData = null;
+		// create formData
+		if (data.length) {
+			formData = new FormData();
+			for (let i = 0, len = data.length; i < len; i++) {
+				formData.append('file-' + i, data[i]);
+			}
+			this.uploadFileLength = data.length;
+		} else {
+			formData = data.formData;
+			this.uploadFileLength = data.size;
+		}
+
+		this.apiManager.call({ method: 'POST', url: uploadUrl, headers: uploadHeader, data: formData, callBack, errorCallBack });
+	},
+
+	/**
+	 * @description Upload the file to the server.
+	 * @param {string} uploadUrl Upload server url
+	 * @param {Object|null} uploadHeader Request header
+	 * @param {Files|{FormData, size}} data FormData in body or Files array
+	 */
+	async asyncUpload(uploadUrl, uploadHeader, data) {
+		this.editor.showLoading();
+
+		let formData = null;
+		// create formData
+		if (data.length) {
+			formData = new FormData();
+			for (let i = 0, len = data.length; i < len; i++) {
+				formData.append('file-' + i, data[i]);
+			}
+			this.uploadFileLength = data.length;
+		} else {
+			formData = data.formData;
+			this.uploadFileLength = data.size;
+		}
+
+		return await this.apiManager.asyncCall({ method: 'POST', url: uploadUrl, headers: uploadHeader, data: formData });
+	},
+
+	setFileData(element, { name, size }) {
+		if (!element) return;
+		element.setAttribute('data-se-file-name', name);
+		element.setAttribute('data-se-file-size', size);
+	},
+
+	/**
+	 * @description Create info object of file and add it to "infoList"
+	 * @private
+	 * @param {Element} element
+	 * @param {Object|null} file
+	 */
+	_setInfo(element, file) {
+		let dataIndex = element.getAttribute('data-se-index');
+		let info = null;
+		let state = '';
+
+		if (!file) {
+			file = {
+				name: element.getAttribute('data-se-file-name') || (typeof element.src === 'string' ? element.src.split('/').pop() : ''),
+				size: element.getAttribute('data-se-file-size') || 0
+			};
+		}
+
+		// create
+		if (!dataIndex || this._componentsInfoInit) {
+			state = 'create';
+			dataIndex = this.infoIndex++;
+
+			element.setAttribute('data-se-index', dataIndex);
+			element.setAttribute('data-se-file-name', file.name);
+			element.setAttribute('data-se-file-size', file.size);
+
+			info = {
+				src: element.src,
+				index: dataIndex * 1,
+				name: file.name,
+				size: file.size
+			};
+
+			this.infoList.push(info);
+		} else {
+			// update
+			state = 'update';
+			dataIndex *= 1;
+
+			for (let i = 0, len = this.infoList.length; i < len; i++) {
+				if (dataIndex === this.infoList[i].index) {
+					info = this.infoList[i];
+					break;
+				}
+			}
+
+			if (!info) {
+				dataIndex = this.infoIndex++;
+				info = {
+					index: dataIndex
+				};
+				this.infoList.push(info);
+			}
+
+			info.src = element.src;
+			info.name = element.getAttribute('data-se-file-name');
+			info.size = element.getAttribute('data-se-file-size') * 1;
+		}
+
+		// method bind
+		info.element = element;
+		info.delete = function (el) {
+			if (typeof this.inst.destroy === 'function') this.inst.destroy.call(this.inst, el);
+			this._deleteInfo(el.getAttribute('data-se-index') * 1);
+		}.bind(this, element);
+		info.select = function (el) {
+			el.scrollIntoView(true);
+			if (typeof this.inst.select === 'function') this._w.setTimeout(this.inst.select.bind(this.inst, el), 0);
+		}.bind(this, element);
+
+		const params = { editor: this.editor, element, index: dataIndex, state, info, remainingFilesCount: --this.uploadFileLength < 0 ? 0 : this.uploadFileLength };
+		if (typeof this.eventHandler === 'function') {
+			this.eventHandler(params);
+		}
+		this.triggerEvent('onFileManagerAction', { ...params, pluginName: this.kind });
+	},
+
+	/**
+	 * @description Gets the sum of the sizes of the currently saved files.
+	 * @returns {number} Size
+	 */
+	getSize() {
+		let size = 0;
+		for (let i = 0, len = this.infoList.length; i < len; i++) {
+			size += this.infoList[i].size * 1;
+		}
+		return size;
+	},
+
+	/**
+	 * @description Checke the file's information and modify the tag that does not fit the format.
+	 * @private
+	 */
+	_checkInfo(loaded) {
+		const tags = [].slice.call(this.editor.frameContext.get('wysiwyg').querySelectorAll(this.query));
+		const infoList = this.infoList;
+		if (tags.length === infoList.length) {
+			// reset
+			if (this._componentsInfoReset) {
+				for (let i = 0, len = tags.length; i < len; i++) {
+					this._setInfo(tags[i], null);
+				}
+				return;
+			} else {
+				let infoUpdate = false;
+				for (let i = 0, len = infoList.length, info; i < len; i++) {
+					info = infoList[i];
+					if (
+						tags.filter(function (t) {
+							return info.src === t.src && info.index.toString() === t.getAttribute('data-se-index');
+						}).length === 0
+					) {
+						infoUpdate = true;
+						break;
+					}
+				}
+				// pass
+				if (!infoUpdate) return;
+			}
+		}
+
+		// check
+		const currentTags = [];
+		const infoIndex = [];
+		for (let i = 0, len = infoList.length; i < len; i++) {
+			infoIndex[i] = infoList[i].index;
+		}
+
+		this.__updateTags = tags;
+
+		while (tags.length > 0) {
+			const tag = tags.shift();
+			if (!tag.getAttribute('data-se-index') || !infoIndex.includes(tag.getAttribute('data-se-index') * 1)) {
+				currentTags.push(this.infoIndex);
+				tag.removeAttribute('data-se-index');
+				this._setInfo(tag, null);
+			} else {
+				currentTags.push(tag.getAttribute('data-se-index') * 1);
+			}
+		}
+
+		// editor load
+		if (loaded && typeof this.loadHandler === 'function') {
+			this.loadHandler(infoList);
+			return;
+		}
+
+		for (let i = 0, dataIndex; i < infoList.length; i++) {
+			dataIndex = infoList[i].index;
+			if (currentTags.includes(dataIndex)) continue;
+
+			infoList.splice(i, 1);
+
+			const params = { editor: this.editor, element: null, index: dataIndex, state: 'delete', info: null, remainingFilesCount: 0 };
+			if (typeof this.eventHandler === 'function') {
+				this.eventHandler(params);
+			}
+			this.triggerEvent('onFileManagerAction', { ...params, pluginName: this.kind });
+
+			i--;
+		}
+	},
+
+	/**
+	 * @description Reset info object and "infoList = []", "infoIndex = 0"
+	 * @param {string} this.kind Plugin name
+	 * @private
+	 */
+	_resetInfo() {
+		const eh = typeof this.eventHandler === 'function';
+		const params = { editor: this.editor, element: null, state: 'delete', info: null, remainingFilesCount: 0 };
+		for (let i = 0, len = this.infoList.length; i < len; i++) {
+			if (eh) this.eventHandler({ ...params, index: this.infoList[i].index, pluginName: this.kind });
+			this.triggerEvent('onFileManagerAction', { ...params, index: this.infoList[i].index, pluginName: this.kind });
+		}
+
+		this.infoList = [];
+		this.infoIndex = 0;
+	},
+
+	/**
+	 * @description Delete info object at "infoList"
+	 * @param {number} index index of info object infoList[].index)
+	 * @private
+	 */
+	_deleteInfo(index) {
+		if (index >= 0) {
+			for (let i = 0, len = this.infoList.length; i < len; i++) {
+				if (index === this.infoList[i].index) {
+					this.infoList.splice(i, 1);
+					if (typeof this.eventHandler === 'function') {
+						this.eventHandler({ editor: this.editor, element: null, index, state: 'delete', info: null, remainingFilesCount: 0 });
+					}
+					return;
+				}
+			}
+		}
+	},
+
+	constructor: FileManager
+};
+
+export default FileManager;