Update DOM when saving/saved state is interrupted by document modification

browser/Makefile.am

@@ -392,6 +392,7 @@ COOL_JS_LST =\
  src/control/Control.SheetsBar.js \
  src/control/Control.PresentationBar.js \
  src/control/Control.TopToolbar.js \
+ src/control/Control.SaveState.ts \
  src/control/Control.UIManager.js \
  src/control/Control.DocumentNameInput.js \
  src/control/Control.Notebookbar.js \
@@ -920,6 +921,7 @@ pot:
  src/control/Control.Scroll.Annotation.js \
  src/control/Control.MobileSearchBar.ts \
  src/control/Control.ServerAuditDialog.ts \
+ src/control/Control.SaveState.ts \
  src/control/Control.SheetsBar.js \
  src/control/Control.Sidebar.ts \
  src/control/Control.StatusBar.js \

browser/src/control/Control.Notebookbar.js

@@ -303,6 +303,9 @@ L.Control.Notebookbar = L.Control.extend({
  }
 
  this.builder.build(shortcutsBar, shortcutsBarData);
+
+ //create SaveState object after addition of shortcut bar in UI
+ this.map.saveState = new app.definitions.saveState(this.map);
  },
 
  reloadShortcutsBar: function() {

browser/src/control/Control.NotebookbarBuilder.js

@@ -163,9 +163,10 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
  $('#applystyle').val(state).trigger('change');
  }
  else if (commandName === '.uno:ModifiedStatus') {
- if (document.getElementById('save')) {
+ const saveEle = document.getElementById('save');
+ if (saveEle) {
  if (state === 'true') {
- document.getElementById('save').classList.add('savemodified');
+ this.map.saveState.showModifiedStatus();
  document.getElementById('file-save').classList.add('savemodified');
  } else {
  document.getElementById('save').classList.remove('savemodified');

browser/src/control/Control.SaveState.ts

@@ -0,0 +1,73 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+/*
+This file defines the SaveState class, which handles the logic for managing the document's save state.
+It controls the display of the saving status, saved status, and triggers the associated animations and icon changes.
+*/
+
+namespace cool {
+ export class SaveState {
+ map: any;
+ saveEle: HTMLElement;
+ saveIconEl: HTMLElement;
+
+ constructor(map: any) {
+ this.map = map;
+ this.saveEle = document.getElementById('save');
+ this.saveIconEl = document.querySelector('#save img');
+ }
+
+ // Function to show the saving status
+ showSavingStatus(): void {
+ if (window.mode.isMobile()) return;
+
+ // Only do saving animation if any content is modified in document
+ if (this.saveEle.classList.contains('savemodified')) {
+ this.saveEle.classList.remove('savemodified');
+ // Dynamically set the content string for saving state
+ const savingText = _('Saving');
+ this.saveEle.style.setProperty('--save-state', `"${savingText}"`);
+ this.saveEle.classList.add('saving');
+ this.saveIconEl.classList.add('rotate-icon'); // Start the icon rotation
+ this.saveEle.setAttribute('disabled', 'true'); // Disable the button
+ }
+ }
+
+ // Function to show the saved status
+ showSavedStatus(): void {
+ if (window.mode.isMobile()) return;
+ if (!this.saveEle.classList.contains('savemodified')) {
+ this.saveEle.classList.remove('saving');
+ this.saveIconEl.classList.remove('rotate-icon'); // Stop the icon rotation
+ // Dynamically set the content string for saved state
+ const savedText = _('Saved');
+ this.saveEle.style.setProperty('--save-state', `"${savedText}"`);
+ this.saveEle.classList.add('saved');
+ // Add some delay to show "saved" status, then hide this info
+ setTimeout(() => {
+ this.saveEle.classList.remove('saved');
+ this.saveEle.removeAttribute('disabled'); // Enable the button
+ }, 2000);
+ }
+ }
+
+ showModifiedStatus(): void {
+ this.saveEle.classList.remove('saving');
+ this.saveEle.classList.remove('saved');
+ this.saveIconEl.classList.remove('rotate-icon'); // Stop the icon rotation
+ this.saveEle.removeAttribute('disabled'); // Enable the button
+ this.saveEle.classList.add('savemodified');
+ }
+ }
+}
+
+app.definitions.saveState = cool.SaveState;

browser/src/control/Control.Toolbar.js

@@ -908,7 +908,7 @@ function processStateChangedCommand(commandName, state) {
  else if (commandName === '.uno:ModifiedStatus') {
  if (document.getElementById('save')) {
  if (state === 'true')
- document.getElementById('save').classList.add('savemodified');
+ this.map.saveState.showModifiedStatus();
  else
  document.getElementById('save').classList.remove('savemodified');
  }

browser/src/control/Control.UIManager.js

@@ -1172,46 +1172,6 @@ L.Control.UIManager = L.Control.extend({
  JSDialog.SnackbarController.setSnackbarProgress(value);
  },
 
- // Function to show the saving status
- showSavingStatus() {
- if (window.mode.isMobile())
- return;
-
- const saveEle = document.getElementById('save');
- // Only do saving animation if any content is modified in document
- if (saveEle.classList.contains('savemodified')) {
- const saveIconEl = document.querySelector('#save img');
- saveEle.classList.remove('savemodified');
- // Dynamically set the content string for saving state
- const savingText = _('Saving')
- saveEle.style.setProperty('--save-state', `"${savingText}"`);
- saveEle.classList.add('saving');
- saveIconEl.classList.add('rotate-icon'); // Start the icon rotation
- saveEle.setAttribute('disabled', true); // Disable the button
- }
- },
-
- // Function to show the saved status
- showSavedStatus() {
- if (window.mode.isMobile())
- return;
- const saveEle = document.getElementById('save');
- if (saveEle.classList.contains('saving')) {
- const saveIconEl = document.querySelector('#save img');
- saveEle.classList.remove('saving');
- saveIconEl.classList.remove('rotate-icon'); // Stop the icon rotation
- // Dynamically set the content string for saved state
- const savedText = _('Saved');
- saveEle.style.setProperty('--save-state', `"${savedText}"`);
- saveEle.classList.add('saved');
- // Add some delay to show "saved" status, then hide this info
- setTimeout(() => {
- saveEle.classList.remove('saved');
- saveEle.removeAttribute('disabled'); // Enable the button
- }, 2000);
- }
- },
-
  // Modals
 
  /// shows modal dialog

browser/src/map/Map.js

@@ -1459,14 +1459,16 @@ L.Map = L.Evented.extend({
  {
  case 'start':
  this.uiManager.documentNameInput.showProgressBar();
- this.uiManager.showSavingStatus();
+ if (this.saveState)
+ this.saveState.showSavingStatus();
  break;
  case 'setvalue':
  this.uiManager.documentNameInput.setProgressBarValue(e.value);
  break;
  case 'finish':
  this.uiManager.documentNameInput.hideProgressBar();
- this.uiManager.showSavedStatus();
+ if (this.saveState)
+ this.saveState.showSavedStatus();
  break;
  }
  }