User:Cacycle/wikEdDiff

wikEdDiff improved diff view.

Legend (in order): deleted text, inserted text, ▶ block move mark, moved block, single character changes, highlighted moved block and ◀ block mark, and ambiguous insertion aligned to line.

wikEdDiff is a user script that provides an improved and easier to read diff view for comparing article versions on Wikipedia and other MediaWiki installations. wikEdDiff has also been integrated into wikEd, a full-featured JavaScript in-browser editor. wikEdDiff is based on the wikEd diff library. wikEdDiff is also a demo and technology preview for a possible integration of this diff style into the official Wikipedia software.

Features

• Additions, deletions, and block moves are highlighted by color in the same text
• Block moves and character differences are detected
• Unchanged regions are omitted from the output
• Highly optimized for MediaWiki source texts

Use

wikEdDiff displays the following button above the standard diff view: . After pushing this button, the program fetches the diff versions in the background using Ajax and displays an improved diff right below the button. The button state is saved and remembered. By double-clicking empty space inside the diff texts or the preview you can jump to the edit field.

Installation

Gadget

The easiest way to install wikEdDiff for logged-in users at the English Wikipedia is as a gadget. Under the Gadgets tab at Special:Preferences, select "wikEdDiff, improved diff view between article versions (not needed if wikEd is used)". Then click "Save".

Manual

The following describes a manual installation. It is not needed if the above gadget method is used.

Add the following code snippets to your User:YourUsername/common.js page. This installation code works for all MediaWiki installations. You need a user account and you have to be logged in in order to install and use wikEdDiff. After saving, you have to refresh (bypass) your browser's cache to see the changes: hold down Shift while clicking Reload (or press Ctrl-Shift-R).

• Please do not copy the complete wikEdDiff program code to your page
• Users of the in-browser editor wikEd do not need to install wikEdDiff

1. Log in under your username

2. If you are on the English Wikipedia, please click the following link to edit your User:YourUsername/common.js page: Special:Mypage/common.js, otherwise open the page by hand

3. Add the following code to that edit page:

// install [[User:Cacycle/wikEdDiff]] enhanced diff
mw.loader.load( '//wiki.riteme.site/w/index.php?title=User:Cacycle/wikEdDiff.js&action=raw&ctype=text/javascript' );

On very old non-Wikipedia wikis you might have to use the old-fashioned way instead:

// install [[User:Cacycle/wikEdDiff]] enhanced diff
( function () { var script = document.createElement( 'script' ); script.src = '//wiki.riteme.site/w/index.php?title=User:Cacycle/wikEdDiff.js&action=raw&ctype=text/javascript'; script.async = true; document.getElementsByTagName( 'head' )[ 0 ].appendChild( script ); } ) ();

If there is already code on your User:YourUsername/common.js page, please make sure not to paste the installation code inside /*...*/ comments.

4. Save the page

5. Refresh your browser's cache: hold down Shift while clicking Reload (or press Ctrl-Shift-R)

6. The wikEdDiff button should now be displayed above every standard diff display

Code

The wikEdDiff JavaScript code can be found under User:Cacycle/wikEdDiff.js. wikEdDiff is based on the wikEd diff library. If you like the way it displays diff views, please help to integrate it into the MediaWiki software by translating the diff.js library into PHP or C. A detailed documentation of the library can be found on wikEd diff and in the source code wikEd diff.js.

Customization

The diff routines as well as the wikEdDiff program are highly user-configurable. All user-configurable settings are listed at the beginning of the code (diff.js and wikEdDiff.js).

The following wikEdDiff global variables can be set on your User:YourUsername/common.js page above the loading code.

• Please see the wikEd diff library for customization of styles and colors and diff algorithm settings
• Please include window.wikEdConfig = {}; only once

diff.js library URL:

window.wikEdConfig = {};
wikEdConfig.diffScriptSrc = '//wiki.riteme.site/w/index.php?title=User:Cacycle/diff.js&action=raw&ctype=text/javascript';

wikEdDiff css rules:

window.wikEdConfig = {};
wikEd.config.diffCSS = {
	'.wikEdDiffWrapper': 'padding: 0.33em 0.5em;',
	'.wikEdDiffButtonWrapper': 'text-align: center;',
	'.wikEdDiffButtonChecked': 'padding: 0.1em 0.1em 0.2em; background: #c8c4c0; border: 1px solid; border-color: #555 #e8e8e8 #e8e8e8 #555; border-radius: 0.25em; cursor: pointer;',
	'.wikEdDiffButtonUnchecked': 'padding: 0.1em 0.1em 0.2em; background: #d8d4d0; border: 1px solid; border-color: #f0f0f0 #666 #666 #f0f0f0; border-radius: 0.25em; cursor: pointer;',
	'.wikEdDiffButtonPressed': 'padding: 0.1em 0.1em 0.2em; background: #c8c4c0; border: 1px solid; border-color: #666 #f0f0f0 #f0f0f0 #666; border-radius: 0.25em; cursor: wait;',
	'.wikEdDiffDiv': 'margin-top: 0.5em;',
	'.wikEdDiffWorking': 'background: #fcfcfc; border: 1px #bbb solid; border-radius: 0.5em; line-height: 1.6; box-shadow: 2px 2px 2px #ddd; padding: 0.5em; margin: 1em 0; text-align: center;'
};

Use local copies of images for testing (set to true in local copy of edit page):

window.wikEdConfig = {};
wikEdConfig.useLocalImages = true;

Path to local images for testing:

window.wikEdConfig = {};
wikEdConfig.imagePathLocal = 'file://D:/wikEd/images/';

Path to images:

window.wikEdConfig = {};
wikEdConfig.imagePath = '//upload.wikimedia.org/wikipedia/commons/';

Image filenames:

window.wikEdConfig = {};
wikEdConfig.image = {
	'wikEdDiff': 'c/c6/WikEdDiff.png'
};

User readable texts:

window.wikEdConfig = {};
wikEdConfig.text = {
	'wikEdDiffButtonImg alt':'wikEdDiff',
	'wikEdDiffButton title': 'Show improved diff view',
	'wikEdDiffLoading':      '...'
};

Show complete unshortened article diff text:

window.wikEdConfig = {};
wikEdConfig.fullDiff = true;

See also

• Cacycle diff, the diff library used for wikEdDiff (including diff customization colors and styles)
• wikEd, a full-featured MediaWiki-integrated text editor that adds enhanced text processing functions to edit pages. wikEd provides syntax highlighting, search and replace functions, and on-page previews. wikEdDiff has been integrated into this program.
• wikEdDiff test cases

Copyright

wikEdDiff has been released into the public domain.