Wiki source code of Autosave Widget
Last modified by Simon Urli on 2023/10/10
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{box cssClass="floatinginfobox" title="**Contents**"}} | ||
| 2 | {{toc/}} | ||
| 3 | {{/box}} | ||
| 4 | |||
| 5 | {{info}} | ||
| 6 | This is a Javascript widget bundled by default with the XWiki platform. | ||
| 7 | {{/info}} | ||
| 8 | |||
| 9 | The //Autosave widget// provides support for periodical automatic saving of a document. It is loaded by default in both Wiki and WYSIWYG edit modes (stand-alone and in-place), but not enabled: you need to check the Autosave checkbox from the action buttons toolbar in order to enable the autosave. The In-line Form edit mode doesn't load it by default, but you can do it manually from your application sheet, using its JavaScript API, as we'll see below. | ||
| 10 | |||
| 11 | = Usage = | ||
| 12 | |||
| 13 | {{info}} | ||
| 14 | To learn how to use the AutoSave feature check the [[Page Editing guide>>xwiki:Documentation.UserGuide.Features.PageEditing||anchor="HAutosave"]]. | ||
| 15 | {{/info}} | ||
| 16 | |||
| 17 | {{warning}} | ||
| 18 | This API is available since XWiki 4.4 Milestone 1. | ||
| 19 | {{/warning}} | ||
| 20 | |||
| 21 | To load the autosave widget in an application you have to include the ##js/xwiki/editors/autosave.js## script in the application sheet, along with a custom [[JSX>>xwiki:Documentation.DevGuide.Tutorials.SkinExtensionsTutorial]] that initializes the widget. | ||
| 22 | |||
| 23 | In the content of your application sheet: | ||
| 24 | |||
| 25 | {{code language="none"}} | ||
| 26 | {{velocity}} | ||
| 27 | #set ($discard = $xwiki.jsfx.use('js/xwiki/editors/autosave.js')) | ||
| 28 | ## Include the CSS only if you show the Autosave configuation UI. See the showConfigurationUI option below. | ||
| 29 | #set ($discard = $xwiki.ssfx.use('js/xwiki/editors/autosave.css')) | ||
| 30 | ## Use to the correct name of the sheet, or the document where the JSX is located, if not in the sheet | ||
| 31 | #set ($discard = $xwiki.jsx.use('MyApplication.MyApplicationSheet')) | ||
| 32 | ... | ||
| 33 | {{/velocity}} | ||
| 34 | {{/code}} | ||
| 35 | |||
| 36 | {{warning}} | ||
| 37 | The widget depends on the ##actionbuttons.js## script which is loaded by all edit modes, including the In-line Form edit mode. If you want to integrate the autosave widget in some custom edit mode or some custom form then you need to make sure this script is loaded before ##autosave.js##. | ||
| 38 | {{/warning}} | ||
| 39 | |||
| 40 | In the JSX object attached to your application sheet: | ||
| 41 | |||
| 42 | {{code language="js"}} | ||
| 43 | require(['jquery'], function($) { | ||
| 44 | $(function() { | ||
| 45 | new XWiki.editors.AutoSave({ | ||
| 46 | // Hook on the form generated by the In-line Form edit mode. | ||
| 47 | form : 'inline', | ||
| 48 | // Activate the autosave by default, without the need to click on the checkbox. | ||
| 49 | enabled: true, | ||
| 50 | // Auto save once per minute. | ||
| 51 | frequency: 1, | ||
| 52 | // Don't show the autosave checkbox. | ||
| 53 | showConfigurationUI: false | ||
| 54 | }); | ||
| 55 | }); | ||
| 56 | }); | ||
| 57 | {{/code}} | ||
| 58 | |||
| 59 | == Parameters == | ||
| 60 | |||
| 61 | The constructor accepts a map of parameters as its only argument, with the following property keys known (all are optional): | ||
| 62 | |||
| 63 | |=Parameter|=Description|=Default value | ||
| 64 | |##form##|the ID (or DOM node) to save|by default the form containing the element with the "xwikieditcontent" ID is used, which is the main form in wiki edit mode | ||
| 65 | |##enabled##|the initial state of the autosave|##false## - the user must click the checkbox to activate autosaving | ||
| 66 | |##frequency##|the interval between consecutive saves, in minutes|5 | ||
| 67 | |##showConfigurationUI##|is the UI for configuring the autosave enabled or not|true | ||
| 68 | |##disabledOpacity##|the opacity of the configuration UI (the frequency input) when the autosave is disabled, a number between 0 and 1|0.2 |
