User:Nihiltres/nothingthree

WP:03

The "nothingthree" script is Nihiltres' very own collection of little JavaScript tweaks to Wikipedia's user interface (UI). This page outlines what features it has, and how to make use of them yourself.

The script is visible at User:Nihiltres/nothingthree.js.

Compatibility

This script is tested primarily in Safari on Mac OS X. It should probably also work in Google Chrome, Firefox, and Opera (among other standards-compliant browsers). It should usually work in Internet Explorer, as well, but support for that browser should generally be considered dubious; use a better browser if possible!

Many, if not most of the functions use the jQuery library which is available through the Vector skin. While jQuery is designed to broadly support most browsers, some older browsers may have issues. See the jQuery browser compatibility page for more details.

There is no debugging on mobile platforms other than Nihiltres' iPhone, and the routine that checks if the user is on a mobile platform currently only checks for the iPhone and iPod touch. Other mobile user-agents can be added on request, and bug reports are always welcome!

How to use the script

These instructions constitute a very rough draft; please feel free to improve them.

Make sure that you are using the Vector skin. Use of the Vector skin is assumed for the script.

Go to Special:MyPage/vector.js and add the following line:

importScript("User:Nihiltres/nothingthree.js"); //change settings at [[Special:MyPage/nothingthree-config.js]]

Follow this link and edit the list of selected routines to include only the ones that you want, using the list of routines below. If you do not use Wikipedia from a mobile platform, feel free to omit that section. Once you're done, save your edit. (This step is the hard step.)
Enjoy the new features!

If you need any help, feel free to ask on Nihiltres' talk page:

How to report bugs

Please report any bugs you find. Unknown bugs can't be fixed! :)

Functional overview

The nothingthree library is divided into sections, despite the relative lack of organization. Some parts refer to others, particularly ones in nothingthree.settings or nothingthree.util. That said, there's still some attempt to keep code together in its own section. Each section will include an idea of what its functions do, examples if the function is at all ambiguous, and the canonical way to use it through nothingthree-config.js.

nothingthree.settings

This section is just a holding pen for settings that other sections might use, so that those settings can be globally available while still being corralled within the nothingthree object. There are no functions here, so this section largely omits example code. Most non-technical users will not need to tweak values in this section, with the possible exception of nothingthree.settings.specificAutoWatchNamespaces.

topsHidden
This tracks whether top edits are currently hidden, for the nothingthree.tops functionality. It is a boolean, and should almost certainly be false by default.
pageRCloaded

This (orphaned) setting for a quick history-view tool that's not currently in the library tracks whether the revisions have been loaded at least once on the current page view. It is a boolean, and should almost certainly be false by default.
specificAutoWatchNamespaces
This supplies the default namespaces for which automatic watching is enabled for the nothingthree.specificAutoWatch section. It's an array of numbers, and its default value is [1, 2, 3, 8, 9], corresponding to the Talk, User, User talk, MediaWiki, and MediaWiki talk namespaces respectively. See Wikipedia:Namespace for more namespace name–number correspondences. To change from the default, simply supply your own array of values before calling nothingthree.specificAutoWatch:
```
nothingthree.settings.specificAutoWatchNamespaces = [1, 2, 3, 8, 9];
```
monthlist

This supplies the default list of months in the year, since JavaScript doesn't include this natively. It's an array of strings. To change from the default (presumably for translation), simply supply your own array of values, as with specificAutoWatchNamespaces above. Make sure that the array always has 12 items, because scripts relying on it will assume that.

nothingthree.util

This section holds functions that are of broad general use, especially if they're expected to be used in multiple other scripts. Most aren't of use to non-technical users, and some are included purely speculatively as support for future scripts.

linkFix
This function allows the text of tabs, userlinks, and similar interface messages to be easily changed. It takes two parameters: the id of the parent element to be changed, and the target text of that object. It's fairly general, but it's not widely tested, so be careful using it to change elements that aren't tabs or userlinks. Here's an example that renames the "preferences" userlink to "options":
```
nothingthree.util.linkFix("pt-preferences", "Options");
```
isMobile
This function is outdated, but might still be mildly practical… it checks the browser useragent for the strings "iPhone", "iPod", or "Android". If the useragent contains one of those, it returns the value "true"; it otherwise returns "false". It has no parameters. Back when the collection included some functions with jQuery animations, something like this was useful to reduce the load on a phone browser:
```
if (nothingthree.util.isMobile()) {
    jQuery.fx.off = true; //disables jQuery animations
}
```
parseDate

This function's use is fairly obvious from its name: it takes the date strings that are typically used by the MediaWiki API, like "2011-04-06T22:24:52Z", and converts them to Date objects that are nicer to use in JavaScript. It takes one parameter, the input string, and outputs a Date object corresponding to the same date. It assumes throughout that the date is in UTC. If it's supplied with an improper string, it won't throw an error, but will provide an invalid Date object (that is, Date(NaN)). It currently has no use, but might see use in a future script that overhauls page histories.
stringifyDate

This function is similarly obvious: it converts a Date object back into a string. More specifically, it offers more control over the ways that JavaScript dates can be output, since JavaScript doesn't offer much in the way of automatic formatting options for dates. It takes two or three inputs: the Date object to be formatted, the preferred format as a string (currently "mdy" or "dmy"), and an optional suffix. Its output is a string containing the formatted date. The function is currently outdated, and will likely see breaking changes before broader use.

nothingthree.tabAdd

This section includes routines that add new tabs and userlinks to the interface. Although there are other functions in the library that add tabs and userlinks, this section focuses on those bits of code whose primary purpose is the addition of a tab, rather than those that add a tab simply as an easy way to activate some other functionality.

log
This function adds a userlink to Special:Log with a URL parameter specifying the user. It attempts to place itself before (i.e., adjacent to) the contributions userlink, since they're similar: contributions for edits, and Special:Log for non-edit actions. While any user might find this useful, it's particularly intended for administrators, who may log many non-edit actions in the form of deletions, protections, and blocks. It takes no parameters—the username is automatically detected—and can be activated like so:
```
nothingthree.tabAdd.log();
```
sandbox
This function adds a userlink to a personal sandbox for the user, i.e. whatever page would be reached by Special:MyPage/Sandbox. It attempts to place itself before the preferences userlink, which should ideally place it immediately following the user talkpage userlink. It takes no parameters. Here's an example of how to use it:
```
nothingthree.tabAdd.sandbox();
```
purge
This function adds a purge tab to all pages except those in the Special namespace. It takes no parameters, and attempts to place itself before the "watch" or "unwatch" tab, whichever is present. Here's how it can be used:
```
nothingthree.tabAdd.purge();
```

nothingthree.specificAutoWatch

This isolated function does something very specific, but very useful: it automatically checks the "watch this page" box when editing in particular namespaces. The function takes no parameters, but the list of namespaces in which it is activated can be changed in nothingthree.settings.specificAutoWatchNamespaces. Here's an example:

nothingthree.specificAutoWatch();

nothingthree.tabMove

These functions work primarily to move tabs, particularly in and out of Vector's drop-down menu. That being said, almost all of them offer secondary functions: the deletion function, for example, moves the tab out of the menu only if it detects a reason that the page is likely to be deleted.

core
This function is inelegant and hackish, but it does the core job of moving tabs as needed, and is used in all of the other nothingthree.tabMove functions. It takes one parameter, an object which it expects to contain three labelled inputs: the id of the item to be moved with label "id", the id of the element it should be placed before with label "followingElement", and the id of the new parent element, with label "targetParent". The latter two (followingElement and targetParent) are semi-optional; they'll fail gracefully if only one of them is provided:
- If followingElement is omitted, the item is appended to the end of the targetParent.
- If targetParent is omitted, the item assumes it's the parent of followingElement.
If the function detects that it doesn't have enough information, it ends silently. It's only really intended for moving tabs between the tab list and the drop-down menu, but it's probably suitable for some other tweaks. Here's an example of how it's used in the "protection" routine that follows:
```
//Multi-line here for readability
nothingthree.tabMove.core({
                               "id": "ca-unprotect",
                               "followingElement": "ca-history",
                               "targetParent": "p-views"
                          });
```
protection
The "protection" function moves the protection tab out of the drop-down menu if, and only if, the page is in some way protected. In addition, it modifies the title attribute of the tab's link (i.e. the tooltip) to include a description of the protection levels of the page. This second part is slightly outdated, because it doesn't account for page-creation protection, having been coded before that was implemented. This function shouldn't be used by non-administrators, since they won't have a protection tab. It's currently likely to break if used by a non-admin. Here's how to use it:
```
nothingthree.tabMove.protection();
```
deletion
This tab-moving function moves the deletion tab out of the drop-down menu in three situations: if there's a deletion template on the page, if the current page is an empty proposed deletion category, or if the current page is a red-linked redirect. In the two latter cases, the function supplies relevant deletion rationales as part of the link to delete the page; in the first case, automatic deletion rationales are already provided through a script on MediaWiki:Group-sysop.js. It takes no parameters. This function shouldn't be used by non-administrators, since they won't have a protection tab. It's currently likely to break if used by a non-admin. Here's how to use it:
```
nothingthree.tabMove.deletion();
```
watch
Many advanced users won't add pages often to their watchlists, and the use of an icon for "watch", but nothing else, is inconsistent, so this script makes the tab textual again, and moves it to the bottom of the drop-down menu. Unlike all the other functions in the tabMove section, this one doesn't use nothingthree.tabMove.core. It takes no parameters, and can be activated like this:
```
nothingthree.tabMove.deletion();
```

This collection of functions allows the left-hand sidebar, which advanced users often don't need, to be collapsed off-screen, on demand. It comes in three parts: a function that toggles the sidebar, a function that adds a tab for said toggling, and a function that re-collapses the sidebar on new pages or tabs if its most recent state was collapsed. This function should work on most browsers, but modern browsers will benefit from CSS3 animations, supplied from nothingthree.css, to slide the sidebar in and out. If the re-collapsing feature is desirable, this is how to activate the feature:

nothingthree.sidebar.toggleTab();
nothingthree.sidebar.remember();

If the re-collapsing isn't wanted, this will suffice:

nothingthree.sidebar.toggleTab();

Here are details on each of the three functions:

toggle

This function does the core job of the section. It toggles a class on the appropriate elements to restyle them and thus move them off the screen or otherwise adjust them for the new layout. It also sets a cookie to reflect the current state of collapse that can be read across pages. It's not necessary to use this function directly, because it's called by the next one.
toggleTab

This function does the most visible job of its group, by creating a tab for the user to control the functionality. It places a new tab in the drop-down menu, or outside it (using nothingthree.tabMove.core) if in the Special namespace. Clicking on the tab activates nothingthree.sidebar.toggle.
remember

This simple function simply toggles the state from the default (expanded) if the cookie is currently set to collapsed. This means that opening a new page or tab, while the sidebar is collapsed, will attempt to collapse the sidebar on that new page/tab.

nothingthree.tops

This section adds a tab to contributions pages which, when clicked, applies CSS that fades out edits that are "(top)", or the most recent contributions to the page. This makes it easy to see which pages have been modified since that user last edited them. There are four functions: one that fades those edits, one that restores them, one that gathers the hide and show functions into a toggle function, and one that adds a tab so that the user can access the function. Only the last function needs to be activated by end-users:

nothingthree.tops.toggleTab();

Descriptions of the individual functions follow:

hide

This function hides the (top) edits and sets nothingthree.settings.topsHidden to "true". It takes no parameters.
show

This function restores all lines affected by nothingthree.tops.hide, sets nothingthree.settings.topsHidden to "false", and takes no parameters.
toggle

This function combines the hide and show functions into a toggle function, using nothingthree.settings.topsHidden to decide which function to use. It takes no parameters.
toggleTab

This function adds a tab that allows the user to run the toggle function. The tab is placed only on Special:Contributions pages.

nothingthree.monoedit

This section adds a button to the WikiEditor interface that allows the editing field to be toggled to a monospace font. It assumes that the user, like Nihiltres, has changed their vector.css to cause edit fields to use a proportional font instead. This functionality is accomplished by adding a CSS class, meaning end-users could reverse the functionality by overriding the default "monoedit" class from nothingthree.css so that for them, it displays in their choice of font(s). The button-adding functionality is somewhat experimental, so the button may move if and when the code's refined. Additionally, the functions don't account for custom editing interfaces like the code editors for CSS and JavaScript pages, but shouldn't affect them. End-users need only call the function that adds the button:

nothingthree.monoedit.toggleButton();

Descriptions of the individual functions follow:

toggle

This function toggles the "monoedit" class on the edit field, and takes no parameters.
toggleButton

This function adds a button to the WikiEditor toolbar that activates the toggle function. It's currently added to the main "insert" group despite this being wrong. It uses a generic "M" icon from Wikimedia Commons to mean "monospace".

Activator

At the end of the library, two main things happen:

The nothingthree.css stylesheet is loaded
The user-specific nothingthree-config.js script is loaded. Users should place their snippets that activate parts of this script on their nothingthree-config pages.