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

Revision as of 00:19, 9 July 2017

Latest revision as of 08:42, 13 March 2018

(22 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 thisthe 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() {

// ================= Coredeactivation controlfilters structure(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 y1; var y2;

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 86 ⟶ 88:

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

function annoHide() {

$(// function()store {status so it persists across page loads

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

y1 = // store status so it persists across page loadswindow.scrollY;

// alert( "vertical scroll localStorage.setItem("annostatus",position is "hide" + y1);

//Select the set of annotations that are above where the viewpoint is scrolled to

y1 = window.scrollY;

var $annos_above = alert$( "vertical scroll position is .anno").filter( + y1function();{

var rect = this.getBoundingClientRect();

if ( annoSwitchrect.bottom < 0 ) {

y1 = window.scrollY return true;

} );else {

annoShow()return false;

}

} );

//For each annotation //Selectabove the setviewport, ofget annotationsthe thatdifference arein aboveheight wherein the viewpointcontaining iselement scrolledas that annotation is tohidden

var $annos_abovescroll_amount = $(".anno").filter( function(){0;

$annos_above.each( function(){

var rect = this.getBoundingClientRect();

var height_before = if $( rectthis).bottom < 0 parent() {.outerHeight(true);

return true$(this).hide();

var height_after = } else {$(this).parent().outerHeight(true);

scroll_amount = scroll_amount + return false(height_after-height_before);

} });

} );

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

//For each annotation above the viewport, get the difference in height in the containing element as that annotation is hidden

$( ".anno" var scroll_amount = 0).hide();

$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);

} );

// window.scrollTo(0, yy1);

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

y1 = $( ".anno" )window.hide()scrollY;

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

//Scroll the window by window.scrollTo(0,the required y1);amount

y1 = window.scrollYscrollBy(0, scroll_amount);

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

// now we have //Scrollto update the window by themenu requireditem amount

// (referred to in window.scrollBy(0,this scroll_amountscript as "annoSwitch");.

// To do that, first we remove it (if it exists):

if ( annoSwitch ) } );{

annoSwitch.parentNode.removeChild(annoSwitch);

} );

// nowand then we havecreate toit update(or theits menureplacement) itemfrom scratch:

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

// (referred to in this script as "annoSwitch").

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

// To do that, first we remove it (if it exists):

if ( annoSwitch ) {

annoSwitch.parentNode.removeChild(annoSwitch);

}

// make the menu //item andclickable thenby we createbinding it (or itsto replacement)a fromclick scratch:handler

// (which activates the actions between the curly brakets when clicked):

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

$( annoSwitch ).click( function ( e ) {

e.preventDefault(); // makeprevents theany menudefault itemaction clickable-- bywe bindingwant itonly tothe afollowing action to clickrun: handler

$(this).hideannoShow();

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

} );

}

}

Line 158:

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

$( annoSwitch ).click( function ( e ) {

e.preventDefault(); // prevents any default action -- we want only the following action to run:

annoHide();

} );

Line 170:

// </syntaxhighlight>

// sample code for getting and setting viewport position:

// window.scrollTo(0, y);

// y = window.scrollY;

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

// window.scrollTo(0, y);