| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- <div id="snippet-autosave">
- <p>Type some text to test the <a href="#autosave-feature">autosave</a> feature.</p>
- </div>
- <div id="snippet-autosave-header">
- <div id="snippet-autosave-status">
- <div id="snippet-autosave-status_label">Status:</div>
- <div id="snippet-autosave-status_spinner">
- <span id="snippet-autosave-status_spinner-label"></span>
- <span id="snippet-autosave-status_spinner-loader"></span>
- </div>
- </div>
- <div id="snippet-autosave-server">
- <div id="snippet-autosave-server_label">HTTP server lag (ms):</div>
- <input id="snippet-autosave-lag" type="number" value="500" step="100" min="0" max="9000">
- </div>
- </div>
- <p>Server data:</p>
- <pre><code id="snippet-autosave-console">Type some text to test the <a href="#autosave-feature">autosave</a> feature.</code></pre>
- <style>
- #snippet-autosave-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: var(--ck-color-toolbar-background);
- border: 1px solid var(--ck-color-toolbar-border);
- padding: 10px;
- border-radius: var(--ck-border-radius);
- margin-top: -1.5em;
- margin-bottom: 1.5em;
- border-top: 0;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
- #snippet-autosave-status_spinner{
- display: flex;
- align-items: center;
- position: relative;
- }
- #snippet-autosave-status_spinner-label {
- position: relative;
- }
- #snippet-autosave-status_spinner-label::after {
- content: 'Saved!';
- color: green;
- display: inline-block;
- margin-right: var(--ck-spacing-medium);
- }
- /* During "Saving" display spinner and change content of label. */
- #snippet-autosave-status.busy #snippet-autosave-status_spinner-label::after {
- content: 'Saving...';
- color: red;
- }
- #snippet-autosave-status.busy #snippet-autosave-status_spinner-loader {
- display: block;
- width: 16px;
- height: 16px;
- border-radius: 50%;
- border-top: 3px solid hsl(0, 0%, 70%);
- border-right: 2px solid transparent;
- animation: autosave-status-spinner 1s linear infinite;
- }
- #snippet-autosave-status,
- #snippet-autosave-server {
- display: flex;
- align-items: center;
- }
- #snippet-autosave-server_label,
- #snippet-autosave-status_label {
- font-weight: bold;
- margin-right: var(--ck-spacing-medium);
- }
- #snippet-autosave + .ck.ck-editor .ck-editor__editable {
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- }
- #snippet-autosave-lag {
- padding: 4px;
- }
- #snippet-autosave-console {
- max-height: 300px;
- overflow: auto;
- white-space: normal;
- background: #2b2c26;
- transition: background-color 500ms;
- }
- #snippet-autosave-console.updated {
- background: green;
- }
- @keyframes autosave-status-spinner {
- to { transform: rotate( 360deg ); }
- }
- </style>
|