jodit 3.9.4 → 3.9.6

package/src/modules/file-browser/file-browser.ts

@@ -36,26 +36,30 @@ import './config';
 
 import { Dom } from '../../core/dom';
 import { ObserveObject } from '../../core/events/';
-import { F_CLASS, ICON_LOADER } from './consts';
 import { makeDataProvider } from './factories';
 import { stateListeners } from './listeners/state-listeners';
 import { nativeListeners } from './listeners/native-listeners';
 import { selfListeners } from './listeners/self-listeners';
 import { DEFAULT_SOURCE_NAME } from './data-provider';
 import { autobind } from '../../core/decorators';
+import { FileBrowserFiles, FileBrowserTree } from './ui';
 
 export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 	/** @override */
 	className(): string {
-		return 'FileBrowser';
+		return 'Filebrowser';
 	}
 
-	private loader = this.c.div(F_CLASS + '__loader', ICON_LOADER);
-	private browser = this.c.div(F_CLASS + ' non-selected');
-	private status_line = this.c.div(F_CLASS + '__status');
+	private loader = this.c.div(
+		this.getFullElName('loader'),
+		'<div class="jodit-icon_loader"></div>'
+	);
 
-	tree = this.c.div(F_CLASS + '__tree');
-	files = this.c.div(F_CLASS + '__files');
+	private browser = this.c.div(this.componentName);
+	private status_line = this.c.div(this.getFullElName('status'));
+
+	tree = new FileBrowserTree(this);
+	files = new FileBrowserFiles(this);
 
 	state = ObserveObject.create<IFileBrowserState>({
 		currentPath: '',
@@ -75,8 +79,8 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 	dataProvider!: IFileBrowserDataProvider;
 
 	async loadItems(): Promise<any> {
-		this.files.classList.add('jodit-filebrowser_active');
-		this.files.appendChild(this.loader.cloneNode(true));
+		this.files.setMod('active', true);
+		this.files.container.appendChild(this.loader.cloneNode(true));
 
 		return this.dataProvider
 			.items(this.state.currentPath, this.state.currentSource, {
@@ -101,11 +105,11 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			this.uploader.setSource(this.state.currentSource);
 		}
 
-		this.tree.classList.add('jodit-filebrowser_active');
+		this.tree.setMod('active', true);
 
-		Dom.detach(this.tree);
+		Dom.detach(this.tree.container);
 
-		this.tree.appendChild(this.loader.cloneNode(true));
+		this.tree.container.appendChild(this.loader.cloneNode(true));
 
 		const items = this.loadItems();
 
@@ -125,7 +129,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 			return Promise.all([tree, items]).catch(error);
 		} else {
-			this.tree.classList.remove('jodit-filebrowser_active');
+			this.tree.setMod('active', false);
 		}
 
 		return items.catch(error);
@@ -217,21 +221,23 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			message = message.message;
 		}
 
-		this.status_line.classList.remove('jodit-filebrowser_success');
+		const successClass = this.getFullElName('status', 'success', true),
+			activeClass = this.getFullElName('status', 'active', true);
 
-		this.status_line.classList.add('jodit-filebrowser_active');
+		this.status_line.classList.remove(successClass);
+		this.status_line.classList.add(activeClass);
 
 		const messageBox = this.c.div();
 		messageBox.textContent = message;
 		this.status_line.appendChild(messageBox);
 
 		if (success) {
-			this.status_line.classList.add('jodit-filebrowser_success');
+			this.status_line.classList.add(successClass);
 		}
 
 		this.async.setTimeout(
 			() => {
-				this.status_line.classList.remove('jodit-filebrowser_active');
+				this.status_line.classList.remove(activeClass);
 				Dom.detach(this.status_line);
 			},
 			{
@@ -280,9 +286,9 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			let localTimeout: number = 0;
 
 			this.e
-				.off(this.files, 'dblclick')
-				.on(this.files, 'dblclick', this.onSelect(callback))
-				.on(this.files, 'touchstart', () => {
+				.off(this.files.container, 'dblclick')
+				.on(this.files.container, 'dblclick', this.onSelect(callback))
+				.on(this.files.container, 'touchstart', () => {
 					const now = new Date().getTime();
 
 					if (now - localTimeout < consts.EMULATE_DBLCLICK_TIMEOUT) {
@@ -345,7 +351,10 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			Config.defaultOptions.filebrowser
 		) as IFileBrowserOptions;
 
-		self.storage = Storage.makeStorage(this.o.saveStateInStorage);
+		self.storage = Storage.makeStorage(
+			Boolean(this.o.saveStateInStorage),
+			this.componentName
+		);
 
 		self.dataProvider = makeDataProvider(self, self.options);
 
@@ -366,11 +375,13 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			});
 		});
 
+		self.browser.component = this;
+
 		if (self.o.showFoldersPanel) {
-			self.browser.appendChild(self.tree);
+			self.browser.appendChild(self.tree.container);
 		}
 
-		self.browser.appendChild(self.files);
+		self.browser.appendChild(self.files.container);
 		self.browser.appendChild(self.status_line);
 
 		selfListeners.call(self);
@@ -404,7 +415,14 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			}
 		});
 
-		const view = this.storage.get(F_CLASS + '_view');
+		const { storeView, storeSortBy, storeLastOpenedFolder } = this.o
+			.saveStateInStorage || {
+			storeLastOpenedFolder: false,
+			storeView: false,
+			storeSortBy: false
+		};
+
+		const view = storeView && this.storage.get('view');
 
 		if (view && this.o.view == null) {
 			self.state.view = view === 'list' ? 'list' : 'tiles';
@@ -414,7 +432,7 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 
 		this.state.fire('change.view');
 
-		const sortBy = self.storage.get<string>(F_CLASS + '_sortby');
+		const sortBy = storeSortBy && self.storage.get<string>('sortBy');
 
 		if (sortBy) {
 			const parts = sortBy.split('-');
@@ -426,10 +444,13 @@ export class FileBrowser extends ViewWithToolbar implements IFileBrowser {
 			self.state.sortBy = self.o.sortBy || 'changed-desc';
 		}
 
-		// TODO
-		// self.dataProvider.currentBaseUrl = $$('base', editorDoc).length
-		// 	? attr($$('base', editorDoc)[0], 'href') || ''
-		// 	: location.protocol + '//' + location.host;
+		if (storeLastOpenedFolder) {
+			const currentPath = self.storage.get<string>('currentPath'),
+				currentSource = self.storage.get<string>('currentSource');
+
+			self.state.currentPath = currentPath ?? '';
+			self.state.currentSource = currentSource ?? '';
+		}
 
 		self.initUploader(self);
 	}

package/src/modules/file-browser/listeners/native-listeners.ts

@@ -4,10 +4,14 @@
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { HTMLTagNames, IFileBrowserItem, Nullable } from '../../../types';
+import type {
+	HTMLTagNames,
+	IFileBrowserItem,
+	Nullable,
+	IDictionary
+} from '../../../types';
 import type { FileBrowser } from '../file-browser';
 import { ctrlKey, attr } from '../../../core/helpers';
-import { F_CLASS, ITEM_CLASS } from '../consts';
 import contextMenu from '../builders/context-menu';
 import { Dom } from '../../../core/dom';
 
@@ -18,20 +22,26 @@ export const getItem = (
 ): Nullable<HTMLElement> =>
 	Dom.closest(node as Node, elm => Dom.isTag(elm, tag), root);
 
+export const elementToItem = (
+	elm: HTMLElement,
+	elementsMap: IDictionary<{
+		elm: HTMLElement;
+		item: IFileBrowserItem;
+	}>
+): IFileBrowserItem | void => {
+	const { key } = elm.dataset,
+		{ item } = elementsMap[key || ''];
+
+	return item;
+};
+
 export function nativeListeners(this: FileBrowser): void {
 	let dragElement: false | HTMLElement = false;
 
 	const self = this;
 
-	const elementToItem = (elm: HTMLElement): IFileBrowserItem | void => {
-		const { key } = elm.dataset,
-			{ item } = self.elementsMap[key || ''];
-
-		return item;
-	};
-
 	self.e
-		.on(self.tree, 'dragstart', (e: MouseEvent): void => {
+		.on(self.tree.container, 'dragstart', (e: MouseEvent): void => {
 			const a = getItem(e.target, self.dialog.container);
 
 			if (!a) {
@@ -42,20 +52,26 @@ export function nativeListeners(this: FileBrowser): void {
 				dragElement = a;
 			}
 		})
-		.on(self.tree, 'drop', (e: MouseEvent): boolean | void => {
+		.on(self.tree.container, 'drop', (e: MouseEvent): boolean | void => {
 			if ((self.o.moveFile || self.o.moveFolder) && dragElement) {
 				let path = attr(dragElement, '-path') || '';
 
 				// move folder
 				if (
 					!self.o.moveFolder &&
-					dragElement.classList.contains(F_CLASS + '__tree-item')
+					dragElement.classList.contains(
+						this.tree.getFullElName('item')
+					)
 				) {
 					return false;
 				}
 
 				// move file
-				if (dragElement.classList.contains(ITEM_CLASS)) {
+				if (
+					dragElement.classList.contains(
+						this.files.getFullElName('item')
+					)
+				) {
 					path += attr(dragElement, '-name');
 
 					if (!self.o.moveFile) {
@@ -74,7 +90,9 @@ export function nativeListeners(this: FileBrowser): void {
 						path,
 						attr(a, '-path') || '',
 						attr(a, '-source') || '',
-						dragElement.classList.contains(ITEM_CLASS)
+						dragElement.classList.contains(
+							this.files.getFullElName('item')
+						)
 					)
 					.then(() => {
 						self.loadTree();
@@ -83,20 +101,20 @@ export function nativeListeners(this: FileBrowser): void {
 				dragElement = false;
 			}
 		})
-		.on(self.files, 'contextmenu', contextMenu(self))
-		.on(self.files, 'click', (e: MouseEvent): void => {
+		.on(self.files.container, 'contextmenu', contextMenu(self))
+		.on(self.files.container, 'click', (e: MouseEvent): void => {
 			if (!ctrlKey(e)) {
 				this.state.activeElements = [];
 			}
 		})
-		.on(self.files, 'click', (e: MouseEvent): false | void => {
+		.on(self.files.container, 'click', (e: MouseEvent): false | void => {
 			const a = getItem(e.target, self.dialog.container);
 
 			if (!a) {
 				return;
 			}
 
-			const item = elementToItem(a);
+			const item = elementToItem(a, self.elementsMap);
 
 			if (!item) {
 				return;
@@ -115,7 +133,7 @@ export function nativeListeners(this: FileBrowser): void {
 
 			return false;
 		})
-		.on(self.files, 'dragstart', (e: MouseEvent) => {
+		.on(self.files.container, 'dragstart', (e: MouseEvent) => {
 			if (self.o.moveFile) {
 				const a = getItem(e.target, self.dialog.container);
 

package/src/modules/file-browser/listeners/state-listeners.ts

@@ -6,13 +6,11 @@
 
 import type { IFileBrowserItem } from '../../../types';
 import type { FileBrowser } from '../file-browser';
-import { F_CLASS, ITEM_CLASS } from '../consts';
 import { Dom } from '../../../core/dom';
 import { normalizePath } from '../../../core/helpers/normalize';
 import { Button } from '../../../core/ui';
 
-const DEFAULT_SOURCE_NAME = 'default',
-	ITEM_ACTIVE_CLASS = ITEM_CLASS + '_active_true';
+const DEFAULT_SOURCE_NAME = 'default';
 
 /**
  * Convert state to view
@@ -49,6 +47,15 @@ export function stateListeners(this: FileBrowser): void {
 		.on(
 			['change.currentPath', 'change.currentSource'],
 			this.async.debounce(() => {
+				if (
+					this.o.saveStateInStorage &&
+					this.o.saveStateInStorage.storeLastOpenedFolder
+				) {
+					this.storage
+						.set('currentPath', this.state.currentPath)
+						.set('currentSource', this.state.currentSource);
+				}
+
 				this.loadTree();
 			}, this.defaultTimeout)
 		)
@@ -57,7 +64,10 @@ export function stateListeners(this: FileBrowser): void {
 				const key = item.uniqueHashKey,
 					{ elm } = elementsMap[key];
 
-				elm && elm.classList.remove(ITEM_ACTIVE_CLASS);
+				elm &&
+					elm.classList.remove(
+						files.getFullElName('item', 'active', true)
+					);
 			});
 		})
 
@@ -68,35 +78,45 @@ export function stateListeners(this: FileBrowser): void {
 				const key = item.uniqueHashKey,
 					{ elm } = elementsMap[key];
 
-				elm && elm.classList.add(ITEM_ACTIVE_CLASS);
+				elm &&
+					elm.classList.add(
+						files.getFullElName('item', 'active', true)
+					);
 			});
 		})
 
 		.on('change.view', () => {
-			files.classList.remove(F_CLASS + '__files_view_tiles');
-			files.classList.remove(F_CLASS + '__files_view_list');
-			files.classList.add(F_CLASS + '__files_view_' + state.view);
-
-			this.storage.set(F_CLASS + '_view', state.view);
+			files.setMod('view', state.view);
+			if (
+				this.o.saveStateInStorage &&
+				this.o.saveStateInStorage.storeView
+			) {
+				this.storage.set('view', state.view);
+			}
 		})
 
 		.on('change.sortBy', () => {
-			this.storage.set(F_CLASS + '_sortby', state.sortBy);
+			if (
+				this.o.saveStateInStorage &&
+				this.o.saveStateInStorage.storeSortBy
+			) {
+				this.storage.set('sortBy', state.sortBy);
+			}
 		})
 
 		.on(
 			'change.elements',
 			this.async.debounce(() => {
-				Dom.detach(files);
+				Dom.detach(files.container);
 
 				if (state.elements.length) {
 					state.elements.forEach(item => {
-						this.files.appendChild(getDomElement(item));
+						this.files.container.appendChild(getDomElement(item));
 					});
 				} else {
-					files.appendChild(
+					files.container.appendChild(
 						create.div(
-							F_CLASS + '_no_files',
+							this.componentName + '_no-files_true',
 							this.i18n('There are no files')
 						)
 					);
@@ -107,20 +127,23 @@ export function stateListeners(this: FileBrowser): void {
 		.on(
 			'change.sources',
 			this.async.debounce(() => {
-				Dom.detach(this.tree);
+				Dom.detach(this.tree.container);
 
 				state.sources.forEach(source => {
 					const sourceName = source.name;
 
 					if (sourceName && sourceName !== DEFAULT_SOURCE_NAME) {
-						this.tree.appendChild(
-							create.div(F_CLASS + '__source-title', sourceName)
+						this.tree.container.appendChild(
+							create.div(
+								this.tree.getFullElName('source-title'),
+								sourceName
+							)
 						);
 					}
 
 					source.folders.forEach((name: string) => {
 						const folderElm = create.a(
-							F_CLASS + '__tree-item',
+							this.tree.getFullElName('item'),
 							{
 								draggable: 'draggable',
 								href: '#',
@@ -132,7 +155,10 @@ export function stateListeners(this: FileBrowser): void {
 								'data-source': sourceName,
 								'data-source-path': source.path
 							},
-							create.span(F_CLASS + '__tree-item-title', name)
+							create.span(
+								this.tree.getFullElName('item-title'),
+								name
+							)
 						);
 
 						const action =
@@ -149,7 +175,7 @@ export function stateListeners(this: FileBrowser): void {
 
 						this.e.on(folderElm, 'click', action('openFolder'));
 
-						this.tree.appendChild(folderElm);
+						this.tree.container.appendChild(folderElm);
 
 						if (name === '..' || name === '.') {
 							return;
@@ -206,7 +232,7 @@ export function stateListeners(this: FileBrowser): void {
 							});
 						});
 
-						this.tree.appendChild(button.container);
+						this.tree.append(button);
 					}
 				});
 			}, this.defaultTimeout)