8
0

manualsave.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  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. log( `Saving... (${ data })` );
  37. // Fake HTTP server's lag.
  38. setTimeout( () => {
  39. log( 'Saved.' );
  40. pendingActions.remove( action );
  41. // Reset isDirty only if data didn't change in the meantime.
  42. if ( data == editor.getData() ) {
  43. isDirty = false;
  44. }
  45. updateStatus( editor );
  46. }, HTTP_SERVER_LAG );
  47. } );
  48. }
  49. function handleStatusChanges( editor ) {
  50. const pendingActions = editor.plugins.get( 'PendingActions' );
  51. pendingActions.on( 'change:isPending', () => updateStatus( editor ) );
  52. editor.model.document.on( 'change:data', () => {
  53. isDirty = true;
  54. updateStatus( editor );
  55. } );
  56. }
  57. function handleBeforeunload( editor ) {
  58. window.addEventListener( 'beforeunload', evt => {
  59. if ( editor.plugins.get( 'PendingActions' ).isPending ) {
  60. evt.preventDefault();
  61. }
  62. } );
  63. }
  64. function updateStatus( editor ) {
  65. const saveButton = document.querySelector( '#snippet-manual-save' );
  66. if ( isDirty ) {
  67. saveButton.classList.add( 'active' );
  68. } else {
  69. saveButton.classList.remove( 'active' );
  70. }
  71. if ( editor.plugins.get( 'PendingActions' ).isPending ) {
  72. saveButton.classList.add( 'saving' );
  73. } else {
  74. saveButton.classList.remove( 'saving' );
  75. }
  76. }
  77. function log( msg ) {
  78. const console = document.querySelector( '#snippet-manual-console' );
  79. console.textContent = msg + '\n' + console.textContent;
  80. }