manualsave.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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-manual-lag' ).addEventListener( 'change', evt => {
  10. HTTP_SERVER_LAG = evt.target.value;
  11. } );
  12. ClassicEditor
  13. .create( document.querySelector( '#snippet-manual' ), {
  14. cloudServices: CS_CONFIG,
  15. toolbar: {
  16. viewportTopOffset: 60
  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-manual-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. log( 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 saveButton = document.querySelector( '#snippet-manual-save' );
  65. if ( isDirty ) {
  66. saveButton.classList.add( 'active' );
  67. } else {
  68. saveButton.classList.remove( 'active' );
  69. }
  70. if ( editor.plugins.get( 'PendingActions' ).hasAny ) {
  71. document.querySelector( '#snippet-manual-save-console' ).classList.remove( 'received' );
  72. saveButton.value = 'Saving...';
  73. saveButton.classList.add( 'saving' );
  74. } else {
  75. saveButton.value = 'Save';
  76. saveButton.classList.remove( 'saving' );
  77. }
  78. }
  79. function log( msg ) {
  80. const console = document.querySelector( '#snippet-manual-save-console' );
  81. console.classList.add( 'received' );
  82. console.textContent = msg;
  83. }