jodit 3.9.4 → 3.9.6

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;
 		}
 

package/src/modules/file-browser/ui/files/files.less

@@ -0,0 +1,174 @@
+@import (reference) '../../../../styles/variables';
+@import (reference) '../../../../styles/mixins';
+
+.jodit-filebrowser-files {
+	position: relative;
+	display: none;
+	height: 100%;
+	vertical-align: top;
+
+	.jodit-button {
+		border-radius: 0;
+	}
+
+	&_active_true {
+		display: flex;
+	}
+
+	.scrollbarSlim();
+
+	&_active_true {
+		width: 100%;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		padding: calc(var(--padding-default) / 2);
+		overflow-y: auto;
+	}
+
+	&__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(&_active_true) &-info {
+			bottom: -100px;
+		}
+	}
+
+	&_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;
+				}
+
+				&-filename {
+					width: 50%;
+				}
+
+				&-filesize {
+					width: 25%;
+				}
+
+				&-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;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,14 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+import './files.less';
+import { UIGroup } from '../../../../core/ui';
+
+export class FileBrowserFiles extends UIGroup {
+	override className(): string {
+		return 'FilebrowserFiles';
+	}
+}

package/{types/modules/file-browser/consts.d.ts → src/modules/file-browser/ui/index.ts}

@@ -3,6 +3,6 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
-export declare const F_CLASS = "jodit-filebrowser";
-export declare const ITEM_CLASS: string;
-export declare const ICON_LOADER = "<i class=\"jodit-icon_loader\"></i>";
+
+export * from './files/files';
+export * from './tree/tree';

package/src/modules/file-browser/ui/tree/tree.less

@@ -0,0 +1,118 @@
+@import (reference) '../../../../styles/variables';
+@import (reference) '../../../../styles/mixins';
+
+.jodit-filebrowser-tree {
+	position: relative;
+	display: none;
+	height: 100%;
+	vertical-align: top;
+
+	.jodit-button {
+		border-radius: 0;
+	}
+
+	&_active_true {
+		display: flex;
+	}
+
+	.scrollbarSlim();
+
+	&_active_true {
+		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;
+		}
+
+		--text-color: #b1b1b1;
+	}
+
+	&__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;
+			}
+		}
+	}
+
+	&__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;
+	}
+
+	a + &__source-title {
+		margin-top: var(--padding-default);
+	}
+}

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

@@ -0,0 +1,14 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+import './tree.less';
+import { UIGroup } from '../../../../core/ui';
+
+export class FileBrowserTree extends UIGroup {
+	override className(): string {
+		return 'FilebrowserTree';
+	}
+}