|
|
@@ -3,7 +3,7 @@
|
|
|
* For licensing, see LICENSE.md.
|
|
|
*/
|
|
|
|
|
|
-/* globals document, window, console */
|
|
|
+/* globals document, console */
|
|
|
|
|
|
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
|
|
|
import Enter from '@ckeditor/ckeditor5-enter/src/enter';
|
|
|
@@ -22,6 +22,8 @@ import List from '@ckeditor/ckeditor5-list/src/list';
|
|
|
import ImageUpload from '../../src/imageupload';
|
|
|
import { AdapterMock } from '../_utils/mocks';
|
|
|
|
|
|
+const buttonContainer = document.getElementById( 'button-container' );
|
|
|
+
|
|
|
ClassicEditor.create( document.querySelector( '#editor' ), {
|
|
|
plugins: [
|
|
|
Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
|
|
|
@@ -30,38 +32,43 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
|
|
|
toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'insertImage' ]
|
|
|
} )
|
|
|
.then( editor => {
|
|
|
- let adapterMock, progress;
|
|
|
- const total = 500;
|
|
|
-
|
|
|
- window.editor = editor;
|
|
|
-
|
|
|
- const progressButton = document.getElementById( 'progress' );
|
|
|
-
|
|
|
// Register fake adapter.
|
|
|
editor.plugins.get( 'upload/filerepository' ).createAdapter = loader => {
|
|
|
- adapterMock = new AdapterMock( loader );
|
|
|
- progress = 0;
|
|
|
- loader.on( 'change:uploadedPercent', () => {
|
|
|
- console.log( `Loader upload progress: ${ loader.uploadedPercent }%` );
|
|
|
- } );
|
|
|
-
|
|
|
- progressButton.removeAttribute( 'disabled' );
|
|
|
+ const adapterMock = new AdapterMock( loader );
|
|
|
+ createProgressButton( loader, adapterMock );
|
|
|
|
|
|
return adapterMock;
|
|
|
};
|
|
|
-
|
|
|
- progressButton.addEventListener( 'click', () => {
|
|
|
- if ( adapterMock ) {
|
|
|
- progress += 100;
|
|
|
- adapterMock.mockProgress( progress, total );
|
|
|
-
|
|
|
- if ( progress == total ) {
|
|
|
- progressButton.setAttribute( 'disabled', 'true' );
|
|
|
- adapterMock.mockSuccess( { original: './sample.jpg' } );
|
|
|
- }
|
|
|
- }
|
|
|
- } );
|
|
|
} )
|
|
|
.catch( err => {
|
|
|
console.error( err.stack );
|
|
|
} );
|
|
|
+
|
|
|
+function createProgressButton( loader, adapterMock ) {
|
|
|
+ const fileName = loader.file.name;
|
|
|
+ const container = document.createElement( 'div' );
|
|
|
+ const progressInfo = document.createElement( 'span' );
|
|
|
+ progressInfo.innerHTML = `File: ${ fileName }. Progress: 0%.`;
|
|
|
+ const button = document.createElement( 'button' );
|
|
|
+ button.innerHTML = 'Upload progress';
|
|
|
+
|
|
|
+ container.appendChild( button );
|
|
|
+ container.appendChild( progressInfo );
|
|
|
+
|
|
|
+ buttonContainer.appendChild( container );
|
|
|
+
|
|
|
+ let progress = 0;
|
|
|
+ const total = 500;
|
|
|
+ button.addEventListener( 'click', () => {
|
|
|
+ progress += 100;
|
|
|
+ adapterMock.mockProgress( progress, total );
|
|
|
+
|
|
|
+ if ( progress == total ) {
|
|
|
+ button.setAttribute( 'disabled', 'true' );
|
|
|
+ adapterMock.mockSuccess( { original: './sample.jpg' } );
|
|
|
+ }
|
|
|
+
|
|
|
+ progressInfo.innerHTML = `File: ${ fileName }. Progress: ${ loader.uploadedPercent }%.`;
|
|
|
+ } );
|
|
|
+}
|
|
|
+
|