MediaWiki

User:PerfektesChaos/js/paneMarker

< User:PerfektesChaos | js

JavaScript gadget to emphasize browser windows or tabs currently used for input activities. Your valuable wiki contribution will be lost if you forget to save that, or may have been blocked unnoticed due to edit conflict or filter while you jumped to another task.

Multitasking genius? Ever lost in lots of panes and/or windows? The paneMarker (not painMaker) will help power users to keep survey over dozens of pages. First of all the tab favicon of important page activities should be shown with red background.

If not yet provided by project the page name may be presented in leading position of window title, if desired. Then it could be identified better in taskbar and tab list. Special activities can be marked by symbols. Note that the headline on the page itself is never affected.

Usage

edit
  • If your project has registered this as a gadget, just activate on your Preferences page.
  • Otherwise include the following lines into your common.js or skin dependant like vector.js:
mw.loader.load("https://www.mediawiki.org/w/index.php?title=User:PerfektesChaos/js/paneMarker/r.js&action=raw&bcache=1&maxage=604800&ctype=text/javascript",
               "text/javascript");
  • If you are blocking scripts from sites other than your local Wiki you might need to put www.mediawiki.org on the whitelist.
  • The gadget works also with non-WMF sites using MediaWiki 1.18 or higher. You may want to provide your own icon definitions.
  • The script may be loaded by anonymous users, e.g. via greasemonkey.

Effects

edit

Red icon

edit
 
example

If your current activity has been rated as vulnerable (like editing or creating a page or section, or uploading) an attempt is made to display an appropriate icon with red background. However, it depends on browser implementation whether this change becomes visible.

Browser versions
Browser    
Firefox … 18 …
Internet Explorer not recommended (until 9?)
Opera 11, 12
Google Chrome 19
Safari 5?
Konqueror
  • Some browsers might refuse icon exchange since current domain could be wikipedia.org, but alternative icon comes from upload.wikimedia.org which may be regarded as security leak.
  • If the browser is given a choice between several icon formats the browser will decide on the appropriate image.

See Image gallery.

Internet Explorer

edit

IE 7, 8 and probably 9 shows some strange behaviour:

  • Obviously there is just one favicon administrated per domain. If the favicon of one document and the connected tab changes (to red), all tabs of the same domain may switch the same way. This is not what we need.
  • IE is rather reluctant to update the favicon according to modified definition.
  • Even worse: If something unexpected happens to the favicon, IE starts seaching the second level domain and accesses the /favicon.ico which is assigned now. If the expected favicon has been of the third level domain like a black globe of test.wikipedia.org IE shifts to wikipedia.org and shows the "W".

If an IE until version 9 is detected the automatic favicon exchange is dropped and an "*" is shown for projects with leading page name.

General appearance

edit

Short title

edit

If not yet common in project the page name may be used as abbreviated window title, if .opt.leave configured by user. You are not annoyed by leading “Pages that link to” consuming the entire visible width. The document area is not changed.

Changing project icon

edit

All Wikipedia projects use the same W as icon. Developers would be overburdened to design distinctive favicons for nearly 300 sites. If you are frequently logged into another Wikipedia, working simultaneously on pages with nearly the same name, you might equip your common.js there with W is that one is spanish, or W if english or french. See collection for examples ready to go, e.g.  .

Distinguishing mark

edit

On some project sites the name of the current page is leading the document title, therefore the beginning of the name is visible in tab bar and (for separated windows) also in the taskbar — at least for the current window on tabbed pane.

However you don’t know which action is taken right now with this page, since that is described at the end of the title text. To give you an idea whether it is more than only a view, the following characters might be displayed between tab icon and generic document title:

* Vulnerable action, like editing
By default not active; hope for red icon.
Workaround if some of your browser versions won’t change the icon.
Δ Diff
Consider '±' if not displayed by your browser
↓ History
Consider '^' if not displayed by your browser
→ Links
Special page: "Whatlinkshere".
Consider '>' if not displayed by your browser
  • The feature is activated automatically if your site is known to display page name first, then activity.
  • Appearance is subject to full customization.

Page shortcut

edit

If a shortcut is found on page it will be used as window title. This behviour can be switched off.

Namespace shortcut

edit

If you are neither in main (article) space nor on a special page and no page shortcut was detected, the configuration is searched for a namespace shortcut. If found, that one will be used in document title. Now you might get an idea which page is covered below a tab — when all you have read before was “Wikipedia talk:…” you might prefer “WT:”.

Customization

edit

You may adapt appearance and behaviour to your specific needs.

Quick interactive configuration

edit

Users (even anonymous) may configure all features using a form when opening Special:Blankpage.

When reloading a page the preferences declared here come into effect. This dynamic assignment overrides the static setting by application object.

These user preferences are not visible to other users.

Even anonymous users may store preferences in their local browser profile.

Application object and API

edit

The standard behaviour can be defined via JavaScript definition. This is also available to anonymous users.

Insert the following statement into your standard user script like common.js (best before mw.loader.load, if any): 

if ( typeof mw.libs.paneMarker !== "object" ) {
   mw.libs.paneMarker  =  {};
}
mw.libs.paneMarker.opt  =  { key1: value1,
                             key2: value2   // etc.
                           };
Key Value Meaning
Red background icon
appleIcon
  • URL String
  • false
 Alternative red apple-touch-icon, or disabled
faviconICO Alternative red favicon in .ICO format, or disabled
faviconPNG Alternative red favicon in .PNG format, or disabled
lazy true Always keep standard icon
General appearance
favicon URL String Alternative default favicon.
MIME type is derived from file extension if .png or .ico or .gif.
leave true Create window titles as short as possible; leading page name may be in use already
Distinguishing mark
chars
  • true
  • false
 General activation (true) or deactivation for this project. However, explicit definition of single mark characters will be in effect anyway.
charDiff
  • false
  • 'String'
  • Unicode
 Marker for diffpages
charHistory Marker for history pages
charLinks Marker for “Whatlinkshere”
charVitally Marker for important pages
lowChar true Use ANSI characters
rightleft true Force rightmost position on page with right-to-left scripting. However, document title is supposed to be already defined as RTL and should not need that.
shortcut false Deactivate Shortcut as window title (false)
API
.fresh() Restart the entire gadget
Dependency: mediawiki.util
.favicon() Trigger red icon on current window/tab.
  • true – Red icon (standard)
  • false – .opt.favicon (if defined)

Example: 

if ( typeof mw.libs.paneMarker !== "object" ) {
   mw.libs.paneMarker  =  {};
}
mw.libs.paneMarker.opt  =  { charVitally: '!!!',
                             charDiff:    '±'
                           };

Note: Customization may be ignored if not put into a standard user script, since other scripts are loaded later and paneMarker has no knowledge about, won’t wait for them.

Codes

edit
Source code
ResourceLoader
  • ext.gadget.paneMarker for Extension:Gadgets
  • Dependencies: user, user.options, mediawiki.util, jquery.client
Namespaces (any)
mw.libs paneMarker
Cookies Anonymous users only:
mw.hook
  • paneMarker.ready
    When code has been loaded.
    Tells implementation metadata.
MediaWiki
  • 1.26 (mw.storage) options for anonymous users
  • 1.23 for registered users

Other languages

edit

This gadget is prepared for multilingual support.

  • If you like a version in your own language, please forward translations to me:
    • This documentation page.
    • The code itself is working without human language items.
    • However, you might want specific support for your project (label arrangement, other icons, default behaviour).
Retrieved from "https://www.mediawiki.org/w/index.php?title=User:PerfektesChaos/js/paneMarker&oldid=6860797"