diff --git a/browser/Makefile.am b/browser/Makefile.am index 645725065143..e9103de853b3 100644 --- a/browser/Makefile.am +++ b/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 \ diff --git a/browser/src/control/Control.Notebookbar.js b/browser/src/control/Control.Notebookbar.js index df99f7d82858..89032ae9ecae 100644 --- a/browser/src/control/Control.Notebookbar.js +++ b/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() { diff --git a/browser/src/control/Control.NotebookbarBuilder.js b/browser/src/control/Control.NotebookbarBuilder.js index 6bd167d6f38a..32908b58f3cb 100644 --- a/browser/src/control/Control.NotebookbarBuilder.js +++ b/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'); diff --git a/browser/src/control/Control.SaveState.ts b/browser/src/control/Control.SaveState.ts new file mode 100644 index 000000000000..59723ba72c94 --- /dev/null +++ b/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; diff --git a/browser/src/control/Control.Toolbar.js b/browser/src/control/Control.Toolbar.js index f30e31278543..b90f177c8e7f 100644 --- a/browser/src/control/Control.Toolbar.js +++ b/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'); } diff --git a/browser/src/control/Control.UIManager.js b/browser/src/control/Control.UIManager.js index 67481ad61298..1aee4a5f07ef 100644 --- a/browser/src/control/Control.UIManager.js +++ b/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 diff --git a/browser/src/map/Map.js b/browser/src/map/Map.js index c39c97e6e6f2..f46cad716f0a 100644 --- a/browser/src/map/Map.js +++ b/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; } }