title.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals console, window, document, setTimeout */
  6. import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
  7. import Title from '@ckeditor/ckeditor5-heading/src/title';
  8. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  9. ClassicEditor.builtinPlugins.push( Title );
  10. ClassicEditor
  11. .create( document.querySelector( '#snippet-title' ), {
  12. cloudServices: CS_CONFIG
  13. } )
  14. .then( editor => {
  15. window.editor = editor;
  16. const titlePlugin = editor.plugins.get( 'Title' );
  17. const titleConsole = new Console( document.querySelector( '.title-console__title' ) );
  18. const bodyConsole = new Console( document.querySelector( '.title-console__body' ) );
  19. const dataConsole = new Console( document.querySelector( '.title-console__data' ) );
  20. editor.model.document.on( 'change:data', () => {
  21. titleConsole.update( titlePlugin.getTitle() );
  22. bodyConsole.update( titlePlugin.getBody() );
  23. dataConsole.update( editor.getData() );
  24. } );
  25. } )
  26. .catch( err => {
  27. console.error( err.stack );
  28. } );
  29. class Console {
  30. constructor( element ) {
  31. this.element = element;
  32. this.consoleUpdates = 0;
  33. this.previousData = '';
  34. }
  35. update( data ) {
  36. if ( this.previousData == data ) {
  37. return;
  38. }
  39. this.previousData = data;
  40. const element = this.element;
  41. this.consoleUpdates++;
  42. element.classList.add( 'updated' );
  43. element.textContent = `'${ data }'`;
  44. setTimeout( () => {
  45. if ( --this.consoleUpdates == 0 ) {
  46. element.classList.remove( 'updated' );
  47. }
  48. }, 500 );
  49. }
  50. }