Wiki source code of Autosave widget
Version 1.1 by Sergiu Dumitriu on 2012/11/21
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{info}}This is a Javascript widget bundled by default with the XWiki platform.{{/info}} | ||
| 2 | |||
| 3 | The //Autosave widget// enables periodical automatic saving of a document. This widget is not mature enough yet, so by default it is enabled only in wiki mode, but it is possible to manually enable it in an application using its JS API. | ||
| 4 | |||
| 5 | Currently **WYSIWYG fields aren't supported** by the widget, but all the other form controls will be saved. | ||
| 6 | |||
| 7 | == Usage == | ||
| 8 | |||
| 9 | === As a wiki user === | ||
| 10 | |||
| 11 | The widget is enabled by default in wiki mode, although the autosave is not active. As a user, just check the //Autosave// checkbox next to the action buttons, at the bottom of the editing area. You can optionally change the autosave interval by entering the desired number of minutes in the input following the checkbox. | ||
| 12 | |||
| 13 | [[image:autosave.png||class="screenshot"]] | ||
| 14 | |||
| 15 | === As a developer === | ||
| 16 | |||
| 17 | {{warning}}This API is available since XWiki 4.4 Milestone 1{{/warning}} | ||
| 18 | |||
| 19 | To enable the autosave widget in an application, you can include the ##js/xwiki/editors/autosave.js## script in the sheet, along with a custom [[JSX>>DevGuide.SkinExtensionsTutorial]] that initializes the widget. | ||
| 20 | |||
| 21 | In the sheet: | ||
| 22 | |||
| 23 | {{code language="none"}} | ||
| 24 | {{velocity}} | ||
| 25 | $xwiki.jsfx.use('js/xwiki/actionbuttons/actionButtons.js', true)## | ||
| 26 | $xwiki.jsfx.use('js/xwiki/editors/autosave.js')## | ||
| 27 | ## If you don't want to show the UI, then don't include the CSS file | ||
| 28 | $xwiki.ssfx.use('js/xwiki/editors/autosave.css')## | ||
| 29 | ## Use to the correct name of the sheet, or the document where the JSX is located, if not in the sheet | ||
| 30 | $xwiki.jsx.use('MyApplication.MyApplicationSheet')## | ||
| 31 | {{/velocity}} | ||
| 32 | {{/code}} | ||
| 33 | |||
| 34 | {{warning}}The widget depends on the ##actionbuttons.js## script, so make sure you pull that script as well **before** pulling ##autosave.js##. Even though ##actionbuttons.js## is already pulled when generating the action buttons, the call is made after the sheet content has been executed.{{/warning}} | ||
| 35 | |||
| 36 | In the JSX object: | ||
| 37 | |||
| 38 | {{code language="javascript"}} | ||
| 39 | document.observe('xwiki:dom:loaded', function() { | ||
| 40 | new XWiki.editors.AutoSave({ | ||
| 41 | form : 'inline', | ||
| 42 | enabled: true, | ||
| 43 | frequency: 1, | ||
| 44 | showConfigurationUI: false | ||
| 45 | }); | ||
| 46 | }); | ||
| 47 | {{/code}} | ||
| 48 | |||
| 49 | === Parameters === | ||
| 50 | |||
| 51 | The constructor accepts a map of parameters as its only argument, with the following property keys known (all are optional): | ||
| 52 | |||
| 53 | |=Parameter|=Description|=Default value | ||
| 54 | |##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 | ||
| 55 | |##enabled##|the initial state of the autosave|##false## - the user must click the checkbox to activate autosaving | ||
| 56 | |##frequency##|the interval between consecutive saves, in minutes|5 | ||
| 57 | |##showConfigurationUI##|is the UI for configuring the autosave enabled or not|true | ||
| 58 | |##disabledOpacity##|the opacity of the configuration UI (the frequency input) when the autosave is disabled, a number between 0 and 1|0.2 |
