From f408e2548519d7a620ef5d167d7a6d8b4d4cae67 Mon Sep 17 00:00:00 2001 From: LucasC Date: Thu, 16 Oct 2025 16:31:09 +0200 Subject: [PATCH 1/3] XWIKI-20953: Edit autosave frequency visibility * WIP, somehow the js fails... --- .../src/main/resources/CKEditor/EditSheet.xml | 2 +- .../main/resources/flamingo/less/misc.less | 2 +- .../resources/ApplicationResources.properties | 7 +- .../resources/js/xwiki/editors/autosave.css | 18 ++---- .../resources/js/xwiki/editors/autosave.js | 64 +++++++++---------- 5 files changed, 43 insertions(+), 50 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml index b558d0310763..307b352e10d4 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml @@ -607,7 +607,7 @@ body > .selectize-dropdown { /* The 'skin-flamingo' class name is removed from the body element in full-screen mode so we need to fix the auto-save styles. */ -.cke_maximized #autosaveControl input.autosave-frequency { +.cke_maximized #autosaveControl input.autosave-interval { width: 3em; } diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less index 3485e7499803..85581cd57935 100644 --- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less +++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less @@ -181,7 +181,7 @@ div.suggestItems .hide-button { } // FIX: Auto-save -.skin-flamingo #autosaveControl input.autosave-frequency { +.skin-flamingo #autosaveControl input.autosave-interval { width: 3em; } diff --git a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties index 032a02e12bcb..05c811985790 100644 --- a/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties +++ b/xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties @@ -411,7 +411,7 @@ core.edit.wikiToolbar.htmltext= core.edit.wikiToolbar.velocity=Velocity code core.edit.wikiToolbar.velocitytext=#* Your velocity code here *# core.edit.autosave=Autosave -core.edit.autosave.every=every +core.edit.autosave.interval.label=Autosave interval (in mins) notice=Notice changephoto=Changing photo for {0} @@ -5695,6 +5695,11 @@ platform.index.spaceIndexDocumentListCreate=Create a new page csrf.confirmation=

This request contains an invalid authentication information.

This might happen in the following situations:

If you are sure that none of these situations apply in your case, you might have found a bug. We are sorry about that, please report it on XWiki JIRA

Do you want to resend the request? If unsure, say No.

core.register.successful={0} ({1}): Registration successful. +####################################### +## until 17.9.0RC1 +####################################### +core.edit.autosave.every=every + ## Used to indicate where deprecated keys end #@deprecatedend diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css index c4dba027fda6..a9f57af7db07 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css @@ -1,22 +1,14 @@ -#template('colorThemeInit.vm') #autosaveControl { display: inline; white-space: nowrap; } -#autosaveControl input.autosave-frequency { +#autosaveControl input.autosave-interval { text-align: center; width: 2em; } - -/** Override Toucan styles */ -#body #autosaveControl label { - display: inline; - margin: 0; -} -#body #autosaveControl label.frequency, #body #autosaveControl label.frequency span { - text-transform: none; - font-weight: 400; +#autosaveControl .interval { + display: none; } -#autosaveControl label.autosave { - font-weight: 400; +#autosaveControl .autosave:has(input:checked) + .interval { + display: inline-block; } diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js index d02eecf9bb78..e6b36ebd47db 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js @@ -31,7 +31,7 @@ editors.AutoSave = Class.create({ /** Is the autosave enabled ? */ enabled: false, /** If enabled, how frequent are the savings */ - frequency: 5, // minutes + interval: 5, // minutes /** Is the UI for configuring the autosave enabled or not? */ showConfigurationUI: true, /** @@ -45,7 +45,7 @@ editors.AutoSave = Class.create({ /** Initialization */ initialize : function(options) { this.options = Object.extend(Object.clone(this.options), options || { }); - this.form = $(this.options.form) || ($("xwikieditcontent") && $("xwikieditcontent").up('form')); + this.form = $(this.options.form) || $("xwikieditcontent")?.up('form'); if (!this.form || this.form.down('#autosaveControl')) { return; } @@ -83,35 +83,31 @@ editors.AutoSave = Class.create({ }, /** - * The UI of the autosave feature is created and introduced at the beginning of the edit form. It comprises a checkbox - * for enabling / disabling the autosave and an input that allows to set the autosave frequency. + * The UI of the autosave feature is created and introduced towards the end of the edit form. + * It contains a checkbox for toggling the autosave and an input that allows to set the autosave interval in minutes. */ createUIElements : function() { - // Checkbox to enable/disable the autosave + // Toggle for the autosave feature. this.autosaveCheckbox = new Element('input', { type: "checkbox", checked: this.options.enabled, name: "doAutosave", id: "doAutosave" }); - // Input for setting the autosave frequency - this.autosaveInput = new Element('input', { + // Input for setting the autosave interval + this.autosaveIntervalInput = new Element('input', { type: "text", - value: this.options.frequency, + value: this.options.interval, size: "2", - "class": "autosave-frequency" + "class": "autosave-interval" }); // Labels - var autosaveLabel = new Element('label', {'class': 'autosave', 'for' : "doAutosave"}); + var autosaveLabel = new Element('label', {'class': 'autosave'}); autosaveLabel.appendChild(this.autosaveCheckbox); - autosaveLabel.appendChild(document.createTextNode(" $services.localization.render('core.edit.autosave')")); - var frequencyLabel = new Element('label', {'class': 'frequency'}); - frequencyLabel.appendChild(document.createTextNode("$services.localization.render('core.edit.autosave.every') ")); - frequencyLabel.appendChild(this.autosaveInput); - this.timeUnit = new Element('span'); - this.setTimeUnit(); - frequencyLabel.appendChild(document.createTextNode(" ")); - frequencyLabel.appendChild(this.timeUnit); + autosaveLabel.appendChild(document.createTextNode("$!escapetool.javascript($services.localization.render('core.edit.autosave'))")); + var intervalLabel = new Element('label', {'class': 'interval'}); + intervalLabel.appendChild(document.createTextNode("$!escapetool.javascript($services.localization.render('core.edit.autosave.interval.label))")); + intervalLabel.appendChild(this.autosaveIntervalInput); // A paragraph containing the whole thing var container = new Element('div', {"id": "autosaveControl"}); this.classNameAutosaveDisabled = 'autosaveDisabled'; @@ -120,7 +116,7 @@ editors.AutoSave = Class.create({ } container.appendChild(autosaveLabel); container.appendChild(document.createTextNode(" ")); - container.appendChild(frequencyLabel); + container.appendChild(intervalLabel); container.appendChild(document.createTextNode(" ")); // Insert in the editing UI this.form.down('.buttons').insert(container); @@ -138,7 +134,7 @@ editors.AutoSave = Class.create({ } }; ["keydown", "keyup", "keypress"].each(function(eventName) { - this.autosaveInput.observe(eventName, preventSubmit); + this.autosaveIntervalInput.observe(eventName, preventSubmit); this.autosaveCheckbox.observe(eventName, preventSubmit); }.bind(this)); @@ -147,19 +143,19 @@ editors.AutoSave = Class.create({ this.toggleTimer(this.autosaveCheckbox.checked); }.bindAsEventListener(this)); - // Set autosave frequency - Event.observe(this.autosaveInput, "blur", function() { + // Set autosave interval + Event.observe(this.autosaveIntervalInput, "blur", function() { // is the given value valid? - var newFrequency = new Number(this.autosaveInput.value); - if (newFrequency > 0) { + var newInterval = new Number(this.autosaveIntervalInput.value); + if (newInterval > 0) { // yes: memorize it - this.options.frequency = newFrequency; + this.options.interval = newInterval; this.setTimeUnit(); // reset autosave loop this.startTimer(); } else { // no: restore the previous value in the input - this.autosaveInput.value = this.options.frequency; + this.autosaveIntervalInput.value = this.options.interval; } }.bindAsEventListener(this)); @@ -172,7 +168,7 @@ editors.AutoSave = Class.create({ * TODO This is bad, very difficult to internationalize. */ setTimeUnit : function() { - if (this.options.frequency == 1) { + if (this.options.interval === 1) { this.timeUnit.update("minute"); } else { this.timeUnit.update("minutes"); @@ -207,30 +203,30 @@ editors.AutoSave = Class.create({ } if (this.options.enabled) { this.startTimer(); - if (this.autosaveInput) { - this.autosaveInput.up(1).removeClassName(this.classNameAutosaveDisabled); + if (this.autosaveIntervalInput) { + this.autosaveIntervalInput.up(1).removeClassName(this.classNameAutosaveDisabled); } } else { this.stopTimer(); - if (this.autosaveInput) { - this.autosaveInput.up(1).addClassName(this.classNameAutosaveDisabled); + if (this.autosaveIntervalInput) { + this.autosaveIntervalInput.up(1).addClassName(this.classNameAutosaveDisabled); } } }, /** * Start autosave timer when the autosave is enabled. - * Every (this.options.frequency * 60) seconds, the callback function doAutosave is called. + * Every (this.options.interval * 60) seconds, the callback function doAutosave is called. */ startTimer : function() { // Make sure we stop the existing timer. this.stopTimer(); this.timer = new PeriodicalExecuter(this.doAutosave.bind(this), - this.options.frequency * 60 /* seconds in a minute */); + this.options.interval * 60 /* seconds in a minute */); }, /** - * Stop the autosave loop when the autosave is disabled or when the autosave frequency is changed + * Stop the autosave loop when the autosave is disabled or when the autosave interval is changed * and the loop needs to be restarted. */ stopTimer : function() { From ed654d70a3ce66790eef2f668a6b627805550e72 Mon Sep 17 00:00:00 2001 From: LucasC Date: Fri, 17 Oct 2025 18:20:11 +0200 Subject: [PATCH 2/3] XWIKI-20953: Edit autosave frequency visibility * Updated CSS * Fixed the error in the .js * Moved a flamingo patch to the main CSS of this element (since flamingo is supposed to be the main now anyways). --- .../main/resources/flamingo/less/misc.less | 5 ---- .../resources/js/xwiki/editors/autosave.css | 12 ++++++--- .../resources/js/xwiki/editors/autosave.js | 26 +++++-------------- 3 files changed, 14 insertions(+), 29 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less index 85581cd57935..f20b12d5af38 100644 --- a/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less +++ b/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/misc.less @@ -180,11 +180,6 @@ div.suggestItems .hide-button { } } -// FIX: Auto-save -.skin-flamingo #autosaveControl input.autosave-interval { - width: 3em; -} - // FIX: user profile .skin-flamingo { .user-menu-profile:before, .user-menu-preferences:before, .user-menu-watchlist:before, .user-menu-network:before, .user-menu-wikis:before, .user-menu-dashboard:before { diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css index a9f57af7db07..fab2c3722d18 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.css @@ -2,13 +2,17 @@ display: inline; white-space: nowrap; } -#autosaveControl input.autosave-interval { - text-align: center; - width: 2em; -} + #autosaveControl .interval { display: none; + margin-left: 2em; + + & .autosave-interval { + width: 3em; + margin-left: 1em; + } } + #autosaveControl .autosave:has(input:checked) + .interval { display: inline-block; } diff --git a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js index e6b36ebd47db..194bdcb9da1e 100644 --- a/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js +++ b/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/js/xwiki/editors/autosave.js @@ -102,14 +102,14 @@ editors.AutoSave = Class.create({ "class": "autosave-interval" }); // Labels - var autosaveLabel = new Element('label', {'class': 'autosave'}); + let autosaveLabel = new Element('label', {'class': 'autosave'}); autosaveLabel.appendChild(this.autosaveCheckbox); - autosaveLabel.appendChild(document.createTextNode("$!escapetool.javascript($services.localization.render('core.edit.autosave'))")); - var intervalLabel = new Element('label', {'class': 'interval'}); - intervalLabel.appendChild(document.createTextNode("$!escapetool.javascript($services.localization.render('core.edit.autosave.interval.label))")); + autosaveLabel.appendChild(document.createTextNode("$escapetool.javascript($services.localization.render('core.edit.autosave'))")); + let intervalLabel = new Element('label', {'class': 'interval'}); + intervalLabel.appendChild(document.createTextNode("$escapetool.javascript($services.localization.render('core.edit.autosave.interval.label'))")); intervalLabel.appendChild(this.autosaveIntervalInput); // A paragraph containing the whole thing - var container = new Element('div', {"id": "autosaveControl"}); + let container = new Element('div', {"id": "autosaveControl"}); this.classNameAutosaveDisabled = 'autosaveDisabled'; if (!this.options.enabled) { container.addClassName(this.classNameAutosaveDisabled); @@ -146,11 +146,10 @@ editors.AutoSave = Class.create({ // Set autosave interval Event.observe(this.autosaveIntervalInput, "blur", function() { // is the given value valid? - var newInterval = new Number(this.autosaveIntervalInput.value); + let newInterval = Number(this.autosaveIntervalInput.value); if (newInterval > 0) { // yes: memorize it this.options.interval = newInterval; - this.setTimeUnit(); // reset autosave loop this.startTimer(); } else { @@ -162,19 +161,6 @@ editors.AutoSave = Class.create({ this._toggleTimerWhenSaveButtonIsEnabledOrDisabled(); }, - /** - * Changes the label text displaying the time measure unit for autosave freaquency, - * according to the value introduced by the user in the input (singular or plural). - * TODO This is bad, very difficult to internationalize. - */ - setTimeUnit : function() { - if (this.options.interval === 1) { - this.timeUnit.update("minute"); - } else { - this.timeUnit.update("minutes"); - } - }, - /** * Stop the timer when the save button is disabled (e.g. because there is another save in progress or because the save * button was hidden) and restart the timer, if needed, when the save button is enabled. From 329042fe18bab203b0992f46dd0746b2e93e734d Mon Sep 17 00:00:00 2001 From: LucasC Date: Fri, 17 Oct 2025 18:26:48 +0200 Subject: [PATCH 3/3] XWIKI-20953: Edit autosave frequency visibility * Moved a flamingo patch to the main CSS of this element (since flamingo is supposed to be the main now anyways). --- .../src/main/resources/CKEditor/EditSheet.xml | 6 ------ 1 file changed, 6 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml index 307b352e10d4..3683c509cb09 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml @@ -605,12 +605,6 @@ body > .selectize-dropdown { padding: .5em; } -/* The 'skin-flamingo' class name is removed from the body element in full-screen mode so we need to fix the auto-save - styles. */ -.cke_maximized #autosaveControl input.autosave-interval { - width: 3em; -} - /* Make sure the notifications (e.g. for Save & Continue action) and the modals (e.g. for expired session) are visible when editing in full-screen mode. */ body[data-maximized] .xnotification-container,