// <syntaxhighlight lang="javascript">
/* anno.js: Adds a sidebar menu item and hot key to toggle annotations.
Based on: https://en.wikipedia.org/w/index.php?title=User:PleaseStand/hide-vector-sidebar.js&oldid=580854231
and https://en.wikipedia.org/wiki/User:Thespaceface/MetricFirst.js
The hot key is Shift-Alt-a.
This script works on bulleted lists, lists in which each item is preceded by a bullet.
Bulleted lists abound upon Wikipedia. They are used in stand-alone lists which are
entire articles that are lists, and they are used in embedded lists situated within articles.
Many list items have an annotation, that is, the list item is followed by a description.
These descriptions are useful, but they may obscure the items in the list that they
describe. Sometimes, it is useful to look at the bare list, without the annotations.
This script turns those descriptions on and off. It provides a tab menu command and
a hotkey for doing so.
When you don't need to see the descriptions, turn them off. When you need more detail,
hit the toggle again, and the descriptions return. The script stores its status so it
doesn't start over between pages. (When annotations are turned off, they are off for
all pages).
There is probably a much more efficient method than this. If you happen to know of one, please let me know.
(The Transhumanist)
Currently, this script applies regex upon matches within the ID element 'mw-content-text'.
It wraps the annotations in <span class="anno"> and </span>. Then it hides/shows the elements
with that class.
The current problem I'm trying to solve is this:
Hiding or showing annotations affects the position of the viewport, so unfortunately,
the reader is jolted away from what he was reading. This is bad.
I'd like the material that was in the viewport to stay there, which means the viewport
must be repositioned relative to the top of the page each time the toggle is activated.
*/
// Start off with a bodyguard function to reserve mw and $ (see Explanatory notes on talk page).
( function ( mw, $ ) {
// we can now rely on mw and $ within the safety of our “bodyguard” function, to mean
// "mediawiki" and "jQuery", respectively
// ============== ready() event listener/handler ==============
// below is jQuery short-hand for $(document).ready(function() { ... });
// it makes the rest of the script wait until the page's DOM is loaded and ready
$(function() {
// Run this script only if "Outline " is in the page title
if (document.title.indexOf("Outline ") != -1) {
// =================== Prep work =====================
var y1a; var y1b; var y1c; var y1d; var y1e; var y1f;
var y2a; var y2b; var y2c; var y2d; var y2e; var y2f;
var annoSwitch;
var cont = document.getElementById('mw-content-text');
// wrap the annotations in spans with class "anno"
cont.outerHTML = cont.outerHTML.replace(/(<li>.*?)( –.*)/g,'$1<span class="anno">$2</span>');
// ================= Core control structure =================
// Only activate on Vector skin
if ( mw.config.get( 'skin' ) === 'vector' ) {
$( function() {
// get the value of our status variable from memory
// (this tells us what mode to start in)
var annostatus = localStorage.getItem('annostatus');
// run the function corresponding to the current status
if ( annostatus === "hide" ) {
annoHide();
} else {
annoShow();
}
} );
}
}
// ======================== Subroutines ===========================
// Functions (aka subroutines) are activated only when they are called.
// Below are the functions called in the core control structure of the program above.
// They are placed here at the end of the program, so that the script's flow
// is easier to follow.
// =========== function to hide annotations =============
function annoHide() {
y1a = window.scrollY;
alert( "running annoHide. y starting value:" + y1a);
// store status so it persists across page loads
localStorage.setItem("annostatus", "hide");
// hide the annotations (hide elements with the anno class)
$( ".anno" ).hide();
y1b = window.scrollY;
alert( "y before removing menu item:" + y1b);
// now we have to update the menu item
// (referred to in this script as "annoSwitch").
// To do that, first we remove it (if it exists):
if ( annoSwitch ) {
annoSwitch.parentNode.removeChild(annoSwitch);
}
y1c = window.scrollY;
alert( "y before creating new menu item:" + y1c);
// and then we create it (or its replacement) from scratch:
annoSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Annotations \(show\)', 'ca-anno', 'Show the annotations', 'a' );
y1d = window.scrollY;
alert( "y before click handler:" + y1d);
// make the menu item clickable by binding it to a click handler
// (which activates the actions between the curly brakets when clicked):
$( annoSwitch ).click( function ( e ) {
e.preventDefault(); // prevents it from working (I don't know why we need this).
y1e = window.scrollY;
alert( "y after click in the handler:" + y1e);
annoShow();
} );
window.scrollTo(0, y);
y1f = window.scrollY;
alert( "y after scrollTo:" + y1f);
}
// =========== function to show annotations ============
function annoShow() {
y2a = window.scrollY;
alert( "running annoShow. y starting value:" + y2a);
// store status so it persists across page loads
localStorage.setItem("annostatus", "show");
// show the annotations (show elements with the anno class)
$( ".anno").show();
y2b = window.scrollY;
alert( "y before removing menu item:" + y2b);
// now we have to update the menu item
// (referred to in this script as "annoSwitch").
// To do that, first we remove it (if it exists):
if ( annoSwitch ) {
annoSwitch.parentNode.removeChild(annoSwitch);
}
y2c = window.scrollY;
alert( "y before creating new menu item:" + y2c);
// and then we create it (or its replacement) from scratch:
annoSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Annotations \(hide\)', 'ca-anno', 'Hide the annotations', 'a' );
y2d = window.scrollY;
alert( "y before click handler:" + y2d);
// make the menu item clickable by binding it to a click handler
// (which activates the actions between the curly brakets when clicked):
$( annoSwitch ).click( function ( e ) {
e.preventDefault();
y2e = window.scrollY;
alert( "y after click in the handler:" + y2e);
annoHide();
} );
window.scrollTo(0, y2a);
y2f = window.scrollY;
alert( "y after scrollTo:" + y2f);
}
} );
}( mediaWiki, jQuery ) );
// </syntaxhighlight>
