From f87edcc8b03acfd3b134a3e6e2bbd1ebd1fe2756 Mon Sep 17 00:00:00 2001 From: Gabriel Masei Date: Thu, 12 Sep 2024 13:34:03 +0300 Subject: [PATCH] some improvements in implementation Signed-off-by: Gabriel Masei Change-Id: I022433099333483b9274524a1e38e0e9bd975960 --- browser/src/control/Control.Menubar.js | 37 +++++++ browser/src/control/Control.StatusBar.js | 35 ++++++- browser/src/control/Toolbar.js | 2 +- .../control/jsdialog/Widget.HTMLContent.ts | 25 +++++ browser/src/map/Map.js | 97 ++----------------- 5 files changed, 106 insertions(+), 90 deletions(-) diff --git a/browser/src/control/Control.Menubar.js b/browser/src/control/Control.Menubar.js index 12fe703267cd..6a7ced8e3838 100644 --- a/browser/src/control/Control.Menubar.js +++ b/browser/src/control/Control.Menubar.js @@ -1376,6 +1376,8 @@ L.Control.Menubar = L.Control.extend({ map.on('addmenu', this._addMenu, this); map.on('languagesupdated', this._onInitLanguagesMenu, this); map.on('updatetoolbarcommandvalues', this._onStyleMenu, this); + map.on('initmodificationindicator', this._onInitModificationIndicator, this); + map.on('updatemodificationindicator', this._onUpdateModificationIndicator, this); }, onRemove: function() { @@ -1384,6 +1386,8 @@ L.Control.Menubar = L.Control.extend({ this._map.off('addmenu', this._addMenu, this); this._map.off('languagesupdated', this._onInitLanguagesMenu, this); this._map.off('updatetoolbarcommandvalues', this._onStyleMenu, this); + this._map.off('initmodificationindicator', this._onInitModificationIndicator, this); + this._map.off('updatemodificationindicator', this._onUpdateModificationIndicator, this); this._menubarCont.remove(); this._menubarCont = null; @@ -2524,6 +2528,39 @@ L.Control.Menubar = L.Control.extend({ } return null; }, + + _onInitModificationIndicator: function(lastmodtime) { + var lastModButton = L.DomUtil.get('menu-last-mod'); + if (lastModButton !== null && lastModButton !== undefined + && lastModButton.firstChild.innerHTML !== null + && lastModButton.firstChild.childElementCount == 0) { + if (lastmodtime == null) { + // No modification time -> hide the indicator + L.DomUtil.setStyle(lastModButton, 'display', 'none'); + return; + } + var mainSpan = document.createElement('span'); + this.lastModIndicator = document.createElement('span'); + mainSpan.appendChild(this.lastModIndicator); + + //this._map.updateModificationIndicator(this._lastmodtime); + + // Replace menu button body with new content + lastModButton.firstChild.innerHTML = ''; + lastModButton.firstChild.appendChild(mainSpan); + + if (L.Params.revHistoryEnabled) { + L.DomUtil.setStyle(lastModButton, 'cursor', 'pointer'); + } + + this._map.fire('modificationindicatorinitialized'); + } + }, + _onUpdateModificationIndicator: function(e) { + if (this.lastModIndicator !== null && this.lastModIndicator !== undefined) { + this.lastModIndicator.innerHTML = e.lastSaved; + } + } }); L.control.menubar = function (options) { diff --git a/browser/src/control/Control.StatusBar.js b/browser/src/control/Control.StatusBar.js index bb2a596bb181..c7707431b1ff 100644 --- a/browser/src/control/Control.StatusBar.js +++ b/browser/src/control/Control.StatusBar.js @@ -25,6 +25,8 @@ class StatusBar extends JSDialog.Toolbar { map.on('updatestatepagenumber', this.onPageChange, this); map.on('search', this.onSearch, this); map.on('zoomend', this.onZoomEnd, this); + map.on('initmodificationindicator', this.onInitModificationIndicator, this); + map.on('updatemodificationindicator', this.onUpdateModificationIndicator, this); } localizeStateTableCell(text) { @@ -242,7 +244,7 @@ class StatusBar extends JSDialog.Toolbar { this._generateHtmlItem('permissionmode'), // spreadsheet, text, presentation {type: 'toolitem', id: 'signstatus', command: '.uno:Signature', w2icon: '', text: _UNO('.uno:Signature'), visible: false}, {type: 'spacer', id: 'permissionspacer'}, - {type: 'customtoolitem', id: 'documentstatus'}, + this._generateHtmlItem('documentstatus'), // spreadsheet, text, presentation, drawing {type: 'customtoolitem', id: 'prev', command: 'prev', text: _UNO('.uno:PageUp', 'text'), pressAndHold: true}, {type: 'customtoolitem', id: 'next', command: 'next', text: _UNO('.uno:PageDown', 'text'), pressAndHold: true}, {type: 'separator', id: 'prevnextbreak', orientation: 'vertical'}, @@ -293,6 +295,7 @@ class StatusBar extends JSDialog.Toolbar { this.showItem('StateTableCellMenu', !app.map.isReadOnlyMode()); this.showItem('statetablebreak', !app.map.isReadOnlyMode()); this.showItem('permissionmode-container', true); + this.showItem('documentstatus-container', true); } break; @@ -305,6 +308,7 @@ class StatusBar extends JSDialog.Toolbar { this.showItem('languagestatus', !app.map.isReadOnlyMode()); this.showItem('languagestatusbreak', !app.map.isReadOnlyMode()); this.showItem('permissionmode-container', true); + this.showItem('documentstatus-container', true); } break; @@ -314,6 +318,7 @@ class StatusBar extends JSDialog.Toolbar { this.showItem('languagestatus', !app.map.isReadOnlyMode()); this.showItem('languagestatusbreak', !app.map.isReadOnlyMode()); this.showItem('permissionmode-container', true); + this.showItem('documentstatus-container', true); } break; case 'drawing': @@ -322,6 +327,7 @@ class StatusBar extends JSDialog.Toolbar { this.showItem('languagestatus', !app.map.isReadOnlyMode()); this.showItem('languagestatusbreak', !app.map.isReadOnlyMode()); this.showItem('permissionmode-container', true); + this.showItem('documentstatus-container', true); } break; } @@ -497,6 +503,33 @@ class StatusBar extends JSDialog.Toolbar { JSDialog.MenuDefinitions.set('LanguageStatusMenu', menuEntries); } + + onInitModificationIndicator(lastmodtime) { + const docstatcontainer = document.getElementById('documentstatus-container'); + if (lastmodtime == null) { + if (docstatcontainer !== null && docstatcontainer !== undefined) { + docstatcontainer.classList.add('hidden'); + } + return; + } + docstatcontainer.classList.remove('hidden'); + + this.map.fire('modificationindicatorinitialized'); + } + + // status can be '', 'SAVING', 'MODIFIED' or 'SAVED' + onUpdateModificationIndicator(e) { + if (this._lastModstatus !== e.status) { + this.updateHtmlItem('DocumentStatus', e.status); + this._lastModStatus = e.status; + } + if (e.lastSaved !== null && e.lastSaved !== undefined) { + const lastSaved = document.getElementById('last-saved'); + if (lastSaved !== null && lastSaved !== undefined) { + lastSaved.textContent = e.lastSaved; + } + } + } } JSDialog.StatusBar = function (map) { diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js index 3af6959e9866..4addfcfd1a46 100644 --- a/browser/src/control/Toolbar.js +++ b/browser/src/control/Toolbar.js @@ -327,7 +327,7 @@ L.Map.include({ }, save: function(dontTerminateEdit, dontSaveIfUnmodified, extendedData) { - this.setDocumentStatus('SAVING'); + this.fire('updatemodificationindicator', { status: 'SAVING' }); var msg = 'save' + ' dontTerminateEdit=' + (dontTerminateEdit ? 1 : 0) + diff --git a/browser/src/control/jsdialog/Widget.HTMLContent.ts b/browser/src/control/jsdialog/Widget.HTMLContent.ts index 195cd4f813e8..a11e42e14e5f 100644 --- a/browser/src/control/jsdialog/Widget.HTMLContent.ts +++ b/browser/src/control/jsdialog/Widget.HTMLContent.ts @@ -118,6 +118,30 @@ function getPageStatusElements(text: string) { return getStatusbarItemElements('PageStatus', _('Number of Pages'), text); } +function getDocumentStatusElements(text: string) { + const docstat = getStatusbarItemElements( + 'DocumentStatus', + _('Your changes have been saved'), + '', + ); + + if (text === 'SAVING') docstat.textContent = _('Saving...'); + else if (text === 'SAVED') { + const lastSaved = document.createElement('span'); + lastSaved.id = 'last-saved'; + lastSaved.title = _('Your changes have been saved') + '.'; + lastSaved.textContent = ''; + docstat.appendChild(lastSaved); + + const savedStatus = document.createElement('span'); + savedStatus.id = 'saved-status-label'; + savedStatus.textContent = _('Document saved'); + docstat.appendChild(savedStatus); + } + + return docstat; +} + var getElementsFromId = function ( id: string, closeCallback: EventListenerOrEventListenerObject, @@ -159,6 +183,7 @@ var getElementsFromId = function ( else if (id === 'statetablecell') return getStateTableCellElements(data.text); else if (id === 'slidestatus') return getSlideStatusElements(data.text); else if (id === 'pagestatus') return getPageStatusElements(data.text); + else if (id === 'documentstatus') return getDocumentStatusElements(data.text); }; function htmlContent( diff --git a/browser/src/map/Map.js b/browser/src/map/Map.js index b390f082e73d..ec3e76adaa9c 100644 --- a/browser/src/map/Map.js +++ b/browser/src/map/Map.js @@ -148,6 +148,10 @@ L.Map = L.Evented.extend({ } }); + this.on('modificationindicatorinitialized', function() { + this._modIndicatorInitialized = true; + }); + // When all these conditions are met, fire statusindicator:initializationcomplete this.initConditions = { 'doclayerinit': false, @@ -247,7 +251,7 @@ L.Map = L.Evented.extend({ this.fire('postMessage', {msgId: 'Doc_ModifiedStatus', args: { Modified: e.state === 'true' }}); if (this._everModified) { - this.setDocumentStatus(e.state === 'true' ? 'MODIFIED' : 'SAVED'); + this.fire('updatemodificationindicator', { status: e.state === 'true' ? 'MODIFIED' : 'SAVED' }); } } }, this); @@ -351,31 +355,6 @@ L.Map = L.Evented.extend({ // end of A11y - // can be '', 'SAVING', 'MODIFIED' or 'SAVED' - setDocumentStatus: function(status) { - if (status === 'SAVING') { - this._docStatusSaved.style.display = 'none'; - this._docStatusLastSaved.textContent = ''; - this._docStatusText.style.display = 'inline'; - this._docStatusUI.style.display = 'inline'; - return; - } - - if (status === 'MODIFIED') { - this._docStatusUI.style.display = 'none'; - this._docStatusLastSaved.textContent = ''; - return; - } - - if (status === 'SAVED') { - this._docStatusLastSaved.textContent = ''; - this._docStatusText.style.display = 'none'; - this._docStatusSaved.style.display = 'inline'; - this._docStatusUI.style.display = 'inline'; - return; - } - }, - loadDocument: function(socket) { app.socket.connect(socket); if (this._clip) @@ -453,60 +432,8 @@ L.Map = L.Evented.extend({ }, initializeModificationIndicator: function() { - this._docStatusUI = document.getElementById('documentstatus'); - if (this._docStatusUI !== null && this._docStatusUI !== undefined) { - this._docStatusUI.replaceChildren(); - - // - const div = document.createElement('div'); - div.className = 'jsdialog ui-badge'; - this._docStatusSaved = div; - this._docStatusUI.appendChild(div); - - const lastSaved = document.createElement('span'); - lastSaved.title = _('Your changes have been saved') + '.'; - lastSaved.textContent = ''; - div.appendChild(lastSaved); - this._docStatusLastSaved = lastSaved; - - const savedStatus = document.createElement('span'); - savedStatus.id = 'saved-status-label'; - savedStatus.textContent = _('Document saved'); - div.appendChild(savedStatus); - - const textDiv = document.createElement('div'); - textDiv.textContent = _('Saving...'); - textDiv.className = 'jsdialog ui-badge'; - this._docStatusText = textDiv; - this._docStatusUI.appendChild(textDiv); - - this.updateModificationIndicator(this._lastmodtime); - } - this._docStatusUI.style.display = 'none'; - - var lastModButton = L.DomUtil.get('menu-last-mod'); - if (lastModButton !== null && lastModButton !== undefined - && lastModButton.firstChild.innerHTML !== null - && lastModButton.firstChild.childElementCount == 0) { - if (this._lastmodtime == null) { - // No modification time -> hide the indicator - L.DomUtil.setStyle(lastModButton, 'display', 'none'); - return; - } - var mainSpan = document.createElement('span'); - this.lastModIndicator = document.createElement('span'); - mainSpan.appendChild(this.lastModIndicator); - - this.updateModificationIndicator(this._lastmodtime); - - // Replace menu button body with new content - lastModButton.firstChild.innerHTML = ''; - lastModButton.firstChild.appendChild(mainSpan); - - if (L.Params.revHistoryEnabled) { - L.DomUtil.setStyle(lastModButton, 'cursor', 'pointer'); - } - } + this.fire('initmodificationindicator', this._lastmodtime); + this.updateModificationIndicator(this._lastmodtime); }, updateModificationIndicator: function(newModificationTime) { @@ -518,8 +445,7 @@ L.Map = L.Evented.extend({ clearTimeout(this._modTimeout); - if ((this.lastModIndicator !== null && this.lastModIndicator !== undefined) - || (this._docStatusLastSaved !== null && this._docStatusLastSaved !== undefined)) { + if (this._modIndicatorInitialized) { var dateTime = new Date(this._lastmodtime.replace(/,.*/, 'Z')); var dateValue; @@ -543,12 +469,7 @@ L.Map = L.Evented.extend({ timeout = 60000; } - if (this.lastModIndicator !== null && this.lastModIndicator !== undefined) { - this.lastModIndicator.innerHTML = dateValue; - } - if (this._docStatusLastSaved !== null && this._docStatusLastSaved !== undefined) { - this._docStatusLastSaved.innerHTML = dateValue; - } + this.fire('updatemodificationindicator', {lastSaved: dateValue}); if (timeout) { this._modTimeout = setTimeout(L.bind(this.updateModificationIndicator, this, -1), timeout);