User:The Transhumanist/ViewAnnotationToggler.js: Difference between revisions

Revision as of 16:15, 8 July 2017

Latest revision as of 08:42, 13 March 2018

(38 intermediate revisions by the same user not shown)

Line 8:

The hot key is Shift-Alt-a.

IMPORTANT: The menu item for this script is not in the side bar menu.

This script works on bulleted lists, lists in which each item is preceded by a bullet.

It is in the more tab at the top of the page. This is because having

Bulleted lists abound upon Wikipedia. They are used in stand-alone lists which are

it in the sidebar menu interferes with the script's page scrolling adjustment.

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. There is probably a much more efficient method than the one I use below. If you happen to know of one, please let me know.

with that class.

Besides that, the script isn't finished yet. The current problem I'm trying to solve is this:

Hiding or showing annotations affects the position of the viewport, so unfortunately,

Line 38 ⟶ 23:

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.

If you have any ideas on how to fix this, I'd be most interested.

Sincerely,

The Transhumanist

Brief comments are provided within the sourcecode below. For extensive explanatory

notes on what the source code does and how it works, see the Script's workshop on

the talk page.

*/

Line 52 ⟶ 46:

$(function() {

// ============== deactivation filters (guard clauses) ==============

// End the script if "Editing " is in the page title (so it doesn't conflict with script editor)

if (document.title.indexOf("Editing ") === 0) {

// use a return statement to end the local function and hence the program's body

// important: this approach does not work outside of a function

return;

}

// =================== Prep work =====================

var yy1; var y2;

var annoSwitch;

var cont = document.getElementById('mw-content-text');

Line 59 ⟶ 62:

cont.outerHTML = cont.outerHTML.replace(/(<li>.*?)( –.*)/g,'$1<span class="anno">$2</span>');

// ================= Core control structure =================

// Only activate on Vector skin

// ================= Core control structure =================

// Only activate on Vector skin

if ( mw.config.get( 'skin' ) === 'vector' ) {

$( function() {

Line 84 ⟶ 86:

// is easier to follow.

// ============ Function to hide annotations ==============

function annoHide() {

alert( "running annoHide. y starting value:" y);

// store status so it persists across page loads

localStorage.setItem("annostatus", "hide");

y1 = window.scrollY;

// hide the annotations (hide elements with the anno class)

// 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();

y = window.scrollYscrollTo(0, y1);

y1 = window.scrollY;

// alert( "vertical scroll position is " + y1);

alert(//Scroll "ythe beforewindow removingby menuthe item:"required y);amount

window.scrollBy(0, scroll_amount);

// now we have to update the menu item

Line 103 ⟶ 129:

annoSwitch.parentNode.removeChild(annoSwitch);

}

alert( "y before creating new menu item:" y);

// and then we create it (or its replacement) from scratch:

annoSwitch = mw.util.addPortletLink( 'p-tbcactions', '#', 'Annotations \(show\)', 'ca-anno', 'Show the annotations', 'a' );

// annoSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Annotations \(show\)', 'ca-anno', 'Show the annotations', 'a' );

alert( "y before click handler:" y);

// 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 itany fromdefault workingaction (I-- don'twe knowwant whyonly wethe following action needto this).run:

annoShow();

} );

alert( "y after click handler/before window.scrollTo:" y);

window.scrollTo(0, 2500);

}

// ============ Function to show annotations ==============

function annoShow() {

alert( "running annoShow. y starting value:" y);

// store status so it persists across page loads

localStorage.setItem("annostatus", "show");

Line 131 ⟶ 149:

// show the annotations (show elements with the anno class)

$( ".anno").show();

y = window.scrollY;

alert( "y before removing menu item:" y);

// now we have to update the menu item

Line 142 ⟶ 156:

annoSwitch.parentNode.removeChild(annoSwitch);

}

alert( "y before creating new menu item:" y);

// and then we create it (or its replacement) from scratch:

annoSwitch = mw.util.addPortletLink( 'p-tbcactions', '#', 'Annotations \(hide\)', 'ca-anno', 'Hide the annotations', 'a' );

// annoSwitch = mw.util.addPortletLink( 'p-tb', '#', 'Annotations \(hide\)', 'ca-anno', 'Hide the annotations', 'a' );

alert( "y before click handler:" y);

// 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 any default action -- we want only the following action to run:

annoHide();

} );

alert( "y after click handler/before window.scrollTo:" y);

window.scrollTo(0, y);

}

} );

}( mediaWiki, jQuery ) );

// </syntaxhighlight>

// sample code for getting and setting viewport position:

// y = window.scrollY;

// alert( "vertical scroll position is " + y);

// window.scrollTo(0, y);