jodit 3.9.3 → 3.10.2

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)

package/src/modules/file-browser/styles/file-browser.less

@@ -20,7 +20,7 @@
 	height: 100%;
 	font-family: var(--font-default);
 
-	&_no_files {
+	&_no-files_true {
 		padding: var(--padding-default);
 	}
 
@@ -35,7 +35,7 @@
 		width: 100%;
 		height: 100%;
 
-		i {
+		div {
 			position: absolute;
 			top: 50%;
 			left: 50%;
@@ -62,302 +62,15 @@
 		visibility: hidden;
 		word-break: break-all;
 
-		&.jodit-filebrowser_success {
+		&_success_true {
 			color: #c5c5c5;
 		}
 
-		&.jodit-filebrowser_active {
+		&_active_true {
 			opacity: 1;
 			visibility: visible;
 		}
 	}
-
-	&__tree,
-	&__files {
-		position: relative;
-		display: none;
-		height: 100%;
-		vertical-align: top;
-
-		.jodit-button {
-			border-radius: 0;
-		}
-
-		&.jodit-filebrowser_active {
-			display: flex;
-		}
-
-		.scrollbarSlim();
-	}
-
-	&__tree.jodit-filebrowser_active {
-		z-index: 2;
-		width: var(--first_column);
-		min-width: 200px;
-		max-width: 290px;
-		flex-direction: column;
-
-		@media (max-width: @screen-xs) {
-			width: auto;
-			max-width: 100%;
-			height: 100px;
-		}
-
-		background-color: var(--color-background-filebrowser-folders);
-		overflow-y: auto;
-
-		&::-webkit-scrollbar {
-			width: calc(var(--padding-default) / 2);
-		}
-
-		&::-webkit-scrollbar-track {
-			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: rgba(127, 127, 127, 0.5);
-			outline: 1px solid slategrey;
-		}
-
-		.jodit-filebrowser__source-title {
-			position: relative;
-			display: block;
-			padding: 2px 4px;
-			border-bottom: 1px solid #484848;
-			background: #5a5a5a;
-			color: #969696;
-			font-size: 12px;
-			user-select: none;
-			word-break: break-all;
-		}
-
-		--text-color: #b1b1b1;
-
-		.jodit-filebrowser__tree-item {
-			position: relative;
-			display: flex;
-			min-height: 38px;
-			align-items: center;
-			justify-content: space-between;
-			padding: calc(var(--padding-default) / 2) var(--padding-default);
-			border-bottom: 1px solid #474747;
-			color: var(--text-color);
-			text-decoration: none;
-			transition: background-color 0.2s ease 0s;
-			word-break: break-all;
-
-			&-title {
-				flex: 1;
-			}
-
-			.jodit-icon_folder {
-				display: flex;
-				width: calc(var(--icon-size) + 4px);
-				height: calc(var(--icon-size) + 4px);
-
-				align-items: center;
-				justify-content: center;
-
-				margin-left: calc(var(--padding-default) / 2);
-
-				opacity: 0.3;
-
-				& svg {
-					width: var(--icon-size);
-					height: var(--icon-size);
-					fill: var(--text-color) !important;
-					stroke: var(--text-color) !important;
-				}
-
-				&:hover {
-					background: #696969;
-				}
-			}
-
-			&:hover {
-				background-color: var(--color-background-button-hover);
-				color: #222;
-
-				i.jodit-icon_folder {
-					opacity: 0.6;
-				}
-			}
-		}
-	}
-
-	&__files.jodit-filebrowser_active {
-		width: 100%;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		padding: calc(var(--padding-default) / 2);
-		overflow-y: auto;
-
-		.jodit-filebrowser__source-title {
-			position: relative;
-			display: block;
-			padding: var(--padding-default);
-			margin: calc(var(--padding-default) * -1);
-			margin-bottom: 0;
-			background: #5a5a5a;
-			color: #969696;
-			font-size: 16px;
-			user-select: none;
-			word-break: break-all;
-		}
-
-		a + .jodit-filebrowser__source-title {
-			margin-top: var(--padding-default);
-		}
-
-		.jodit-filebrowser__files-item {
-			position: relative;
-
-			display: flex;
-			overflow: hidden;
-			width: var(--col_size);
-			height: var(--col_size);
-
-			align-items: center;
-			justify-content: center;
-
-			border: 1px solid var(--color-border);
-			margin: calc(var(--padding-default) / 2);
-			font-size: 0;
-
-			@media (max-width: @screen-xs) {
-				width: calc(50% - var(--padding-default));
-			}
-
-			text-align: center;
-			transition: border 0.1s linear, bottom 0.1s linear;
-
-			img {
-				max-width: 100%;
-			}
-
-			&:hover {
-				border-color: #433b5c;
-			}
-
-			&_active_true {
-				border-color: var(--color-border-selected);
-				background-color: var(--color-border-active);
-
-				.jodit-filebrowser__files-item-info {
-					background-color: var(--color-border-active);
-					color: white;
-					text-shadow: none;
-				}
-			}
-
-			&-info {
-				position: absolute;
-				right: 0;
-				bottom: 0;
-				left: 0;
-				overflow: visible;
-				padding: 0.3em 0.6em;
-				background-color: var(--info-background);
-				color: rgb(51, 51, 51);
-				font-size: 14px;
-				line-height: 16px;
-				opacity: 0.85;
-				text-align: left;
-				text-shadow: rgb(238, 238, 238) 0 1px 0;
-				transition: opacity 400ms ease;
-				white-space: normal;
-
-				> span {
-					display: block;
-					overflow: hidden;
-					font-size: 0.75em;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-
-					&.jodit-filebrowser__files-item-info-filename {
-						font-size: 0.9em;
-						font-weight: bold;
-					}
-				}
-			}
-
-			&:hover:not(.jodit-filebrowser__files-item_active_true) {
-				.jodit-filebrowser__files-item-info {
-					bottom: -100px;
-				}
-			}
-		}
-
-		&.jodit-filebrowser__files_view_list {
-			scroll-behavior: smooth;
-
-			a {
-				display: block;
-				width: 100%;
-				height: 26px;
-				border-width: 0 0 1px 0;
-				margin: 0;
-				line-height: 26px;
-				text-align: left;
-				white-space: nowrap;
-
-				img {
-					display: inline-block;
-					min-width: 16px;
-					max-width: 16px;
-					margin-left: 4px;
-					vertical-align: middle;
-				}
-
-				.jodit-filebrowser__files-item-info {
-					position: static;
-					display: inline-block;
-					width: ~'calc(100% - 20px)';
-					height: 100%;
-					padding: 0;
-					margin-left: 4px;
-					background-color: transparent;
-					font-size: 0;
-					line-height: inherit;
-					vertical-align: middle;
-
-					> span {
-						display: inline-block;
-						height: 100%;
-						font-size: 12px;
-
-						&.jodit-filebrowser__files-item-info-filename {
-							width: 50%;
-						}
-
-						&.jodit-filebrowser__files-item-info-filesize {
-							width: 25%;
-						}
-
-						&.jodit-filebrowser__files-item-info-filechanged {
-							width: 25%;
-						}
-					}
-				}
-
-				&:hover {
-					background-color: #433b5c;
-
-					.jodit-filebrowser__files-item-info {
-						color: #fff;
-						text-shadow: none;
-					}
-				}
-
-				&::before {
-					display: inline-block;
-					height: 100%;
-					content: '';
-					vertical-align: middle;
-				}
-			}
-		}
-	}
 }
 
 .jodit_draghover {

package/src/modules/file-browser/styles/preview.less

@@ -6,18 +6,20 @@
 
 @import (reference) '../../../styles/variables';
 
-.jodit-filebrowser_preview {
+.jodit-filebrowser-preview {
 	position: relative;
 	display: flex;
 
-	min-width: 600px;
-	max-width: 1000px;
-	min-height: 700px;
+	min-width: 400px;
+	max-width: min(100%, 1000px);
+	height: 100%;
+	min-height: min(100%, 500px);
 	max-height: 100%;
 
 	align-items: center;
 	justify-content: center;
 
+	margin: auto;
 	text-align: center;
 
 	@media (max-width: @screen-sm) {
@@ -28,20 +30,21 @@
 		max-height: 100%;
 	}
 
-	&_box {
+	&__box {
 		display: flex;
 		flex-grow: 1;
 		align-items: center;
 		justify-content: center;
 	}
 
-	&_navigation {
+	&__navigation {
 		position: absolute;
 		top: 0;
 		left: 0;
 		height: 100%;
+		cursor: pointer;
 
-		&-next {
+		&_arrow_next {
 			right: 0;
 			left: auto;
 		}
@@ -51,8 +54,8 @@
 			top: 50%;
 			width: 45px;
 			height: 45px;
-			margin-top: -22px;
 			fill: #9e9ba7;
+			transform: translateY(-50%);
 			transition: fill 0.3s linear;
 		}