8
0

manualsave.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals ClassicEditor, console, window, document, setTimeout */
  6. import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
  7. let HTTP_SERVER_LAG = 500;
  8. let isDirty = false;
  9. document.querySelector( '#snippet-manualsave-lag' ).addEventListener( 'change', evt => {
  10. HTTP_SERVER_LAG = evt.target.value;
  11. } );
  12. ClassicEditor
  13. .create( document.querySelector( '#snippet-manualsave' ), {
  14. cloudServices: CS_CONFIG,
  15. toolbar: {
  16. viewportTopOffset: window.getViewportTopOffsetConfig()
  17. }
  18. } )
  19. .then( editor => {
  20. window.editor = editor;
  21. handleStatusChanges( editor );
  22. handleSaveButton( editor );
  23. handleBeforeunload( editor );
  24. } )
  25. .catch( err => {
  26. console.error( err.stack );
  27. } );
  28. // Handle clicking the "Save" button.
  29. function handleSaveButton( editor ) {
  30. const saveButton = document.querySelector( '#snippet-manualsave-save' );
  31. const pendingActions = editor.plugins.get( 'PendingActions' );
  32. saveButton.addEventListener( 'click', evt => {
  33. const data = editor.getData();
  34. const action = pendingActions.add( 'Saving in progress.' );
  35. evt.preventDefault();
  36. // Fake HTTP server's lag.
  37. setTimeout( () => {
  38. updateServerDataConsole( data );
  39. pendingActions.remove( action );
  40. // Reset isDirty only if data didn't change in the meantime.
  41. if ( data == editor.getData() ) {
  42. isDirty = false;
  43. }
  44. updateStatus( editor );
  45. }, HTTP_SERVER_LAG );
  46. } );
  47. }
  48. function handleStatusChanges( editor ) {
  49. const pendingActions = editor.plugins.get( 'PendingActions' );
  50. pendingActions.on( 'change:hasAny', () => updateStatus( editor ) );
  51. editor.model.document.on( 'change:data', () => {
  52. isDirty = true;
  53. updateStatus( editor );
  54. } );
  55. }
  56. function handleBeforeunload( editor ) {
  57. window.addEventListener( 'beforeunload', evt => {
  58. if ( editor.plugins.get( 'PendingActions' ).hasAny ) {
  59. evt.preventDefault();
  60. }
  61. } );
  62. }
  63. function updateStatus( editor ) {
  64. const buttonContainer = document.querySelector( '#snippet-manualsave-container' );
  65. if ( isDirty ) {
  66. buttonContainer.classList.add( 'active' );
  67. } else {
  68. buttonContainer.classList.remove( 'active' );
  69. }
  70. if ( editor.plugins.get( 'PendingActions' ).hasAny ) {
  71. buttonContainer.classList.add( 'saving' );
  72. } else {
  73. buttonContainer.classList.remove( 'saving' );
  74. }
  75. }
  76. let consoleUpdates = 0;
  77. function updateServerDataConsole( msg ) {
  78. const console = document.querySelector( '#snippet-manualsave-console' );
  79. consoleUpdates++;
  80. console.classList.add( 'updated' );
  81. console.textContent = msg;
  82. setTimeout( () => {
  83. if ( --consoleUpdates == 0 ) {
  84. console.classList.remove( 'updated' );
  85. }
  86. }, 500 );
  87. }