8
0
Просмотр исходного кода

Code refactoring connected to image upload progress.

Szymon Kupś 8 лет назад
Родитель
Сommit
0be946039a

+ 2 - 3
packages/ckeditor5-upload/src/imageupload.js

@@ -9,11 +9,10 @@
 
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ImageUploadEngine from './imageuploadengine';
 import ImageUploadEngine from './imageuploadengine';
+import ImageUploadProgress from './imageuploadprogress';
 import FileDialogButtonView from './ui/filedialogbuttonview';
 import FileDialogButtonView from './ui/filedialogbuttonview';
 import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
 import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
 
 
-import '../theme/theme.scss';
-
 /**
 /**
  * Image upload plugin.
  * Image upload plugin.
  * Adds `insertImage` button to UI component factory.
  * Adds `insertImage` button to UI component factory.
@@ -25,7 +24,7 @@ export default class ImageUpload extends Plugin {
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
 	static get requires() {
 	static get requires() {
-		return [ ImageUploadEngine ];
+		return [ ImageUploadEngine, ImageUploadProgress ];
 	}
 	}
 
 
 	/**
 	/**

+ 2 - 3
packages/ckeditor5-upload/src/imageuploadengine.js

@@ -10,7 +10,6 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import FileRepository from './filerepository';
 import FileRepository from './filerepository';
 import ImageUploadCommand from './imageuploadcommand';
 import ImageUploadCommand from './imageuploadcommand';
-import ImageUploadProgress from './imageuploadprogress';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
 import { isImageType } from './utils';
 import { isImageType } from './utils';
 
 
@@ -24,7 +23,7 @@ export default class ImageUploadEngine extends Plugin {
 	 * @inheritDoc
 	 * @inheritDoc
 	 */
 	 */
 	static get requires() {
 	static get requires() {
-		return [ FileRepository, Notification, ImageUploadProgress ];
+		return [ FileRepository, Notification ];
 	}
 	}
 
 
 	/**
 	/**
@@ -37,7 +36,7 @@ export default class ImageUploadEngine extends Plugin {
 
 
 		// Setup schema to allow uploadId for images.
 		// Setup schema to allow uploadId for images.
 		schema.allow( { name: 'image', attributes: [ 'uploadId' ], inside: '$root' } );
 		schema.allow( { name: 'image', attributes: [ 'uploadId' ], inside: '$root' } );
-		schema.allow( { name: 'image', attributes: [ 'uploadId', 'uploadStatus' ], inside: '$root' } );
+		schema.allow( { name: 'image', attributes: [ 'uploadStatus' ], inside: '$root' } );
 		schema.requireAttributes( 'image', [ 'uploadId' ] );
 		schema.requireAttributes( 'image', [ 'uploadId' ] );
 
 
 		// Register imageUpload command.
 		// Register imageUpload command.

+ 30 - 0
packages/ckeditor5-upload/src/imageuploadprogress.js

@@ -13,6 +13,14 @@ import FileRepository from './filerepository';
 import uploadingPlaceholder from '../theme/icons/image_placeholder.svg';
 import uploadingPlaceholder from '../theme/icons/image_placeholder.svg';
 import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
 import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
 
 
+import '../theme/imageuploadprogress.scss';
+
+/**
+ * Image upload progress plugin.
+ * Shows placeholder when image is read from disk and progress bar while image is uploading.
+ *
+ * @extends module:core/plugin~Plugin
+ */
 export default class ImageUploadProgress extends Plugin {
 export default class ImageUploadProgress extends Plugin {
 	constructor( editor ) {
 	constructor( editor ) {
 		super( editor );
 		super( editor );
@@ -35,6 +43,7 @@ export default class ImageUploadProgress extends Plugin {
 		editor.editing.modelToView.on( 'addAttribute:uploadStatus:image', uploadStatusChange );
 		editor.editing.modelToView.on( 'addAttribute:uploadStatus:image', uploadStatusChange );
 		editor.editing.modelToView.on( 'changeAttribute:uploadStatus:image', uploadStatusChange );
 		editor.editing.modelToView.on( 'changeAttribute:uploadStatus:image', uploadStatusChange );
 
 
+		// Called each time uploadStatus attribute is added or changed.
 		function uploadStatusChange( evt, data, consumable ) {
 		function uploadStatusChange( evt, data, consumable ) {
 			if ( !consumable.consume( data.item, eventNameToConsumableType( evt.name ) ) ) {
 			if ( !consumable.consume( data.item, eventNameToConsumableType( evt.name ) ) ) {
 				return;
 				return;
@@ -49,28 +58,38 @@ export default class ImageUploadProgress extends Plugin {
 				return;
 				return;
 			}
 			}
 
 
+			// Show placeholder with infinite progress bar on the top while image is read from disk.
 			if ( status == 'reading' ) {
 			if ( status == 'reading' ) {
 				viewFigure.addClass( 'ck-appear', 'ck-infinite-progress' );
 				viewFigure.addClass( 'ck-appear', 'ck-infinite-progress' );
 				const viewImg = viewFigure.getChild( 0 );
 				const viewImg = viewFigure.getChild( 0 );
 				viewImg.setAttribute( 'src', placeholder );
 				viewImg.setAttribute( 'src', placeholder );
+
+				return;
 			}
 			}
 
 
+			// Show progress bar on the top of the image when image is uploading.
 			if ( status == 'uploading' ) {
 			if ( status == 'uploading' ) {
 				viewFigure.removeClass( 'ck-infinite-progress' );
 				viewFigure.removeClass( 'ck-infinite-progress' );
 				const progressBar = createProgressBar();
 				const progressBar = createProgressBar();
 				viewFigure.appendChildren( progressBar );
 				viewFigure.appendChildren( progressBar );
 				const loader = fileRepository.loaders.get( uploadId );
 				const loader = fileRepository.loaders.get( uploadId );
 
 
+				// Update progress bar width when uploadedPercent is changed.
 				loader.on( 'change:uploadedPercent', ( evt, name, value ) => {
 				loader.on( 'change:uploadedPercent', ( evt, name, value ) => {
 					progressBar.setStyle( 'width', value + '%' );
 					progressBar.setStyle( 'width', value + '%' );
 					editor.editing.view.render();
 					editor.editing.view.render();
 				} );
 				} );
+
+				return;
 			}
 			}
 
 
+			// Hide progress bar and clean up classes.
 			if ( status == 'complete' ) {
 			if ( status == 'complete' ) {
 				const viewFigure = editor.editing.mapper.toViewElement( modelImage );
 				const viewFigure = editor.editing.mapper.toViewElement( modelImage );
 				const progressBar = getProgressBar( viewFigure );
 				const progressBar = getProgressBar( viewFigure );
 
 
+				viewFigure.removeClass( 'ck-appear' );
+
 				if ( progressBar ) {
 				if ( progressBar ) {
 					progressBar.remove();
 					progressBar.remove();
 					editor.editing.view.render();
 					editor.editing.view.render();
@@ -80,8 +99,13 @@ export default class ImageUploadProgress extends Plugin {
 	}
 	}
 }
 }
 
 
+// Symbol added to progress bar UIElement to distinguish it from other elements.
 const progressBarSymbol = Symbol( 'progress-bar' );
 const progressBarSymbol = Symbol( 'progress-bar' );
 
 
+// Create progress bar element using {@link module:engine/view/uielement~UIElement}.
+//
+// @private
+// @returns {module:engine/view/uielement~UIElement}
 function createProgressBar() {
 function createProgressBar() {
 	const progressBar = new UIElement( 'div', { class: 'ck-progress-bar' } );
 	const progressBar = new UIElement( 'div', { class: 'ck-progress-bar' } );
 	progressBar.setCustomProperty( progressBarSymbol, true );
 	progressBar.setCustomProperty( progressBarSymbol, true );
@@ -89,6 +113,12 @@ function createProgressBar() {
 	return progressBar;
 	return progressBar;
 }
 }
 
 
+// Returns progress bar {@link module:engine/view/uielement~UIElement} from image figure element. Returns `null` if
+// progress bar element is not found.
+//
+// @private
+// @param {module:engine/view/element~Element} imageFigure
+// @returns {module:engine/view/uielement~UIElement|null}
 function getProgressBar( imageFigure ) {
 function getProgressBar( imageFigure ) {
 	for ( const child of imageFigure.getChildren() ) {
 	for ( const child of imageFigure.getChildren() ) {
 		if ( child.getCustomProperty( progressBarSymbol ) ) {
 		if ( child.getCustomProperty( progressBarSymbol ) ) {

+ 3 - 3
packages/ckeditor5-upload/theme/theme.scss → packages/ckeditor5-upload/theme/imageuploadprogress.scss

@@ -26,7 +26,7 @@ $lineWidth: 30px;
 	top: 0;
 	top: 0;
 	right: 0;
 	right: 0;
 	background: rgba(0, 0, 0, 0.1);
 	background: rgba(0, 0, 0, 0.1);
-	animation-name: ltrsUploadProgressBefore;
+	animation-name: readingProgressAnimation;
 	animation-duration: 1500ms;
 	animation-duration: 1500ms;
 	animation-iteration-count: infinite;
 	animation-iteration-count: infinite;
 	transition-timing-function: linear;
 	transition-timing-function: linear;
@@ -38,11 +38,11 @@ $lineWidth: 30px;
 	position: absolute;
 	position: absolute;
 	top: 0;
 	top: 0;
 	left: 0;
 	left: 0;
-	background: red;
+	background: #6ab5f9;
 	transition: width 100ms;
 	transition: width 100ms;
 }
 }
 
 
-@keyframes ltrsUploadProgressBefore {
+@keyframes readingProgressAnimation {
 	0% {
 	0% {
 		width: $lineWidth;
 		width: $lineWidth;
 		right: 0;
 		right: 0;