user:js/ajaxPreview

ajaxPreview
Browsers	*
Skins	*
Code	ajaxPreview.js
Updated	December 14, 2024 (2024-12-14)
Developer	AlexSm

The script adds preview and changes Ajax buttons which are:

• faster than standard buttons,
• use less traffic,
• retain the text cursor position and undo (Ctrl-Z) history.

Preview

Preview button updates content and edit summary previews and then executes global collapsing scripts.

Shift-clicking the button will update the previews of interwikis, categories and templates as well.

You still need regular non-Ajax preview if you insert <syntaxhighlight lang="xxx"> or <categorytree>.

Extra features

• "Preview" displays references when editing a section (by adding <references /> to the end of the text).
• "Preview" highlights syntax when editing .js and .css files.
• When editing an old version shift-click on "changes" will compare your text to that old version.

Installation

Add this to your common.js (or to your skin js page)

importScript('User:Js/ajaxPreview.js'); // [[user:js/ajaxPreview]]

Configuration

By default the new buttons do this:

• appear on the right from the toolbar: BIAb........................  previewchanges
• capture p and v accesskeys from the standard buttons.
• get names from the standard buttons (using last word).

This can be changed with the following parameters added to the same JS file as above.

Position:

var ajaxPreviewPos = 'left'; //buttons on the left

var ajaxPreviewPos = 'bottom'; //buttons on the bottom, replacing standard

The "old" standard buttons are then moved to the right and marked with ">": Save page Show preview> Show changes>

Accesskeys:

var ajaxPreviewKey = 'o'; //"preview" button accesskey
var ajaxDiffKey = 'b'; //"changes" button accesskey

Use empty string '' to disable accesskey.

Button text:

var ajaxPreviewButton = 'Ω'; //"preview" button text
var ajaxDiffButton = 'Δ'; //"changes" button text

Scrolling:

var ajaxPreviewScrollTop = true; //scroll to the top of preview/changes area after each update

Full update:

var ajaxPreviewFull = true; //always update interwikis, categories and templates as well

You can make the script call any custom userscripts by defining the global ajaxPreviewExec() function. For example, if you use NavPopups and want popups to appear in the Ajax-updated preview, use the following code:

// code to execute after each preview update
window.ajaxPreviewExec = function(previewArea) {
  if (window.setupTooltips) {
    setupTooltips(previewArea);
    previewArea.ranSetupTooltipsAlready = false;
  }
}

And if you want tables to be sortable and collapsible elements to work as usual in the Ajax-updated preview, use the following code:

// code to execute after each preview update
window.ajaxPreviewExec = function(previewArea) {
  mw.loader.using( [
    'jquery.tablesorter',
    'jquery.makeCollapsible'
  ], function(){
    $( 'table.sortable' ).tablesorter();
    $( '#wikiPreview .collapsible' ).makeCollapsible();
  } );
}

Similar scripts

• User:Cacycle/wikEd has similar functionality with "preview" and "changes" buttons.
• User:Anomie/ajaxpreview.js adds only "preview" button but will display all references when editing a section (even defined in other sections).
• Option "Show preview without reloading the page" in preferences does AJAX preview/changes (using standard buttons at the bottom) but it requests the whole HTML page from the server (no traffic savings there).