User:V111P/js/Smart Linking

Smart Linking is a tool for linking articles and previewing the linked pages while source-editing Wikipedia/MediaWiki articles.

To use it (after installing it), position the cursor anywhere within or just after the second closing bracket of a link and press the Smart Linking button, or select an existing link (with or without its square brackets) or select unlinked text you want to make a link from, and press the Smart Linking Button. Smart Linking's display with the linked article's content (or the message "Non-existing page" if there is no such article) will appear above the textarea.

You can learn how to use most of the features by hovering with the mouse pointer over the various icons and links and reading the tooltips. Some less obvious things you need to know are:

The links within Smart Linking's display can lead you to other articles, but keep in mind that visiting other articles will change the address of the link in the textarea where you last left the cursor before pressing the SmartLinking button. You can use the back link (<<) to get back to the article you want to link to.
You can resize the display to make it display more than a single line at a time in two ways:
- temporarily - by double clicking anywhere within the display or by dragging the bottom edge of the display (The second way doesn't always work in Internet Explorer). This way of resizing hides part of the textarea under the display. Double clicking the display while it is temporarily expanded collapses it back and returns focus to the textarea.
- semi-permanently (until you leave the page) - by dragging the resize handle on the right of the display. This method moves the textarea down.
You can set the size of the display by editing your common.js file. How to do this will be explained later.
Sometimes after you click the Smart Linking button the keyboard focus is left within the display (For example after a redirect the focus in on the Back link to allow for an easy cancellation of the redirecting). You can press Esc or ` (grave accent) to return the focus to the textarea (Escape won't work in Google Chrome).
Keyboard navigation within the Smart Linking display is possible - use Tab, Shift+Tab, Enter. With Esc or ` you can return to the textarea. With ^ or Shift+Esc you can remove the Smart Linking's display, ! acts like double click (described above).
Internet Explorer - There are several problems that I noticed with (version 10 of) this browser:
- Usually when you click a link you will notice the entire page flashing (scrolling to a different position and back again).
- Sometimes you can't resize the display by dragging the bottom edge - the handle is not there (sometimes you can find it only at the right side of the display).
- The menu at the bottom right () disappears

More documentation will appear here soon.

Menus/Icons

(<<) - Back to the previous article
- Open the article in a new window/tab
- Edit the article/section in a new window/tab
- Scroll to the table of contents at the bottom. The same icon at the ToC means: Show/hide the section links.
- Scroll to the table of contents at the bottom, hide the section links from it
- Scroll back to the top
- Return the focus to the textarea
- Open a menu with several other icons
- Open this help page in a new window/tab
- Close the display
- Attention! (This image is not a button, it signals a non-existing page, a disambiguation page, or an error.)

Installation

For the English Wikipedia, add this code to your common.js file:

if ( $.inArray( mw.config.get( 'wgAction' ), ['edit', 'submit'] ) > -1 ) {
	$.ajax({ // [[User:V111P/js/Smart Linking]]
		url: '/w/index.php?title=User:V111P/js/smartLinkingLoader.js'
			+ '&action=raw&ctype=text/javascript&smaxage=0&maxage=0',
		dataType: 'script',
		cache: true
	});
}

You should move all your JavaScript code that you need only when editing wiki pages before the last closing } in the code above. That way they won't be loaded when you are reading articles.

For other Wikipedias you can simply add //en.wikipedia.org at the beginning of the URL in the code above. However, Smart Linking won't be able to detect your other-meaning and main-article templates. I'll explain how to fix that later.

For developers

If you would like to experiment and improve Smart Linking, I am ready to explain any and all parts of it - just ask.

Smart Linking is using several main components:

smartLinking.js is the main file
wikiParserV.js is a collection of useful functions
msgDisplay.js is the script that deals with Smart Linking's display
valSel.js is the script which provides an easy cross-browser methods for manipulating the textarea content
addToolbarButtons.js is a short script that adds the toolbar button
smartLinkingLoader.js is a very short script which loads addToolbarButton.js and adds the button. By loading this file, instead of directly smartLinking.js, the user doesn't have to download the entire program before actually pressing the Smart Linking button for the first time, which is a good thing if he/she is not using it every time when opening an article for editing.

valSel.js and addToolbarButtons.js are completely documented and ready for use in other applications.