autosave.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <div id="snippet-autosave">
  2. <p>Type some text to test the <a href="#autosave-feature">autosave</a> feature.</p>
  3. </div>
  4. <div id="snippet-autosave-header">
  5. <div id="snippet-autosave-status">
  6. <div id="snippet-autosave-status_label">Status:</div>
  7. <div id="snippet-autosave-status_spinner">
  8. <span id="snippet-autosave-status_spinner-label"></span>
  9. <span id="snippet-autosave-status_spinner-loader"></span>
  10. </div>
  11. </div>
  12. <div id="snippet-autosave-server">
  13. <div id="snippet-autosave-server_label">HTTP server lag (ms):</div>
  14. <input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000">
  15. </div>
  16. </div>
  17. <p>Server data:</p>
  18. <pre><code id="snippet-autosave-console">Type some text to test the &#x3C;a href=&#x22;#autosave-feature&#x22;&#x3E;autosave&#x3C;/a&#x3E; feature.</code></pre>
  19. <style>
  20. #snippet-autosave-header {
  21. display: flex;
  22. justify-content: space-between;
  23. align-items: center;
  24. background: var(--ck-color-toolbar-background);
  25. border: 1px solid var(--ck-color-toolbar-border);
  26. padding: 10px;
  27. border-radius: var(--ck-border-radius);
  28. margin-top: -1.5em;
  29. margin-bottom: 1.5em;
  30. border-top: 0;
  31. border-top-left-radius: 0;
  32. border-top-right-radius: 0;
  33. }
  34. #snippet-autosave-status_spinner{
  35. display: flex;
  36. align-items: center;
  37. position: relative;
  38. }
  39. #snippet-autosave-status_spinner-label {
  40. position: relative;
  41. }
  42. #snippet-autosave-status_spinner-label::after {
  43. content: 'Saved!';
  44. color: green;
  45. display: inline-block;
  46. margin-right: var(--ck-spacing-medium);
  47. }
  48. /* During "Saving" display spinner and change content of label. */
  49. #snippet-autosave-status.busy #snippet-autosave-status_spinner-label::after {
  50. content: 'Saving...';
  51. color: red;
  52. }
  53. #snippet-autosave-status.busy #snippet-autosave-status_spinner-loader {
  54. display: block;
  55. width: 16px;
  56. height: 16px;
  57. border-radius: 50%;
  58. border-top: 3px solid hsl(0, 0%, 70%);
  59. border-right: 2px solid transparent;
  60. animation: autosave-status-spinner 1s linear infinite;
  61. }
  62. #snippet-autosave-status,
  63. #snippet-autosave-server {
  64. display: flex;
  65. align-items: center;
  66. }
  67. #snippet-autosave-server_label,
  68. #snippet-autosave-status_label {
  69. font-weight: bold;
  70. margin-right: var(--ck-spacing-medium);
  71. }
  72. #snippet-autosave + .ck.ck-editor .ck-editor__editable {
  73. border-bottom-right-radius: 0;
  74. border-bottom-left-radius: 0;
  75. }
  76. #snippet-autosave-lag {
  77. padding: 4px;
  78. }
  79. #snippet-autosave-console {
  80. max-height: 300px;
  81. overflow: auto;
  82. white-space: normal;
  83. background: #2b2c26;
  84. transition: background-color 500ms;
  85. }
  86. #snippet-autosave-console.updated {
  87. background: green;
  88. }
  89. @keyframes autosave-status-spinner {
  90. to { transform: rotate( 360deg ); }
  91. }
  92. </style>