// <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() {
// =================== Prep work =====================
var y1; var y2;
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 at the end of the program, so that the script's flow
// is easier to follow.
// ============ Function to hide annotations ==============
function annoHide() {
// store status so it persists across page loads
localStorage.setItem("annostatus", "hide");
y1 = window.scrollY;
alert( "vertical scroll position is " + y1);
//Select the set of annotations that are above where the viewpoint is scrolled to
var $annos_above = $(".anno").filter( function(){
var rect = this.getBoundingClientRect();
if ( rect.bottom < 0 ) {
return true;
} else {
return false;
}
} );
//For each annotation above the viewport, get the difference in height in the containing element as that annotation is hidden
var scroll_amount = 0;
$annos_above.each( function(){
var height_before = $(this).parent().outerHeight(true);
$(this).hide();
var height_after = $(this).parent().outerHeight(true);
scroll_amount = scroll_amount + (height_after-height_before);
} );
//Hide the remaining annotations (hide elements with the anno class)
$( ".anno" ).hide();
window.scrollTo(0, y1);
y1 = window.scrollY;
alert( "vertical scroll position is " + y1);
//Scroll the window by the required amount
window.scrollBy(0, scroll_amount);
// 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);
}
// and then we create it (or its replacement) from scratch:
annoSwitch = mw.util.addPortletLink( 'p-cactions', '#', 'Annotations \(show\)', '', 'Show annotations', 'a' );
// annoSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Annotations \(show\)', 'ca-anno', 'Show the annotations', 'a' );
// 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).
annoShow();
} );
}
// ============ Function to show annotations ==============
function annoShow() {
// store status so it persists across page loads
localStorage.setItem("annostatus", "show");
// show the annotations (show elements with the anno class)
$( ".anno").show();
// 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);
}
// and then we create it (or its replacement) from scratch:
annoSwitch = mw.util.addPortletLink( 'p-cactions', '#', 'Annotations \(hide\)', '', 'Hide annotations', 'a' );
// annoSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Annotations \(hide\)', 'ca-anno', 'Hide the annotations', 'a' );
$( annoSwitch ).click( function ( e ) {
e.preventDefault();
annoHide();
} );
}
} );
}( mediaWiki, jQuery ) );
// </syntaxhighlight>
// window.scrollTo(0, y);
// y = window.scrollY;
// alert( "vertical scroll position is " + y);
