User talk:The Transhumanist/ViewAnnotationToggler.js

Change log

2017-01-19
- Version 0.3 – Simplified the script to wrap annotations and then hide or show them.
2016-12-11
- Version 0.2 – on/off status persists across pages.
2016-12-08
- Anchor regexes on <li> (starting only) element delimiters
- Version 0.1 – Primary functionality completed - it does as intended: switches between having and not having annotations (Turns on and off, albeit per page)
  - Clones the page's state, to restore it after annotations are removed
  - Uses regex to remove annotations
  - Uses a toggle to switch back and forth between the two states

Desired features

Improvements needed:

Have the screen stay anchored on its top entry when the toggle is used
Find/replace annotations of other formats
- regular hyphens
- em dashes
- no-break space-hyphen combos
- commas
- hanging hyphens (hyphen, with no annotation)
- parenthetic annotations?
- colons
Find/replace annotations of lead list entries (without bullets)
- Only on pages with the title "Outline of"
- Match entry that follows heading
- Match entry that follows "{{Main}}"?
Since it hides content, an indicator is needed to show when it is on/off.
Fix the conflict with sidebar toggle (it also uses hot-key Shift-Alt-a)
load mw:ResourceLoader/Modules#mediawiki.util
Test on many pages of every page type
Test on other browsers (tested on Firefox 43.0.4)
Port to GreaseMonkey
Have separate hot-keys for on and off, to be macro-friendly?
Convert annotations, and then clone? (then it will toggle with fixed format)
Feature to apply and save fixes (conversions) to wikicode (i.e., replace non-standard annotation punctuation in the page source)

Completed features

Latest comment: 8 years ago2 comments1 person in discussion

Program on/off switch

The current objective is to store global variables, and pass them on to the next page, including the current page upon refresh.

The state of the program can then be controlled from page to page, via conditionals applied upon the global variables.

Methods that persists data across a page refresh include:

iframe – ?
ajax – ?
cookies – this requires a server call, and is inefficient

localstorage

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

var annostatus = localStorage.getItem('annostatus');

Feature completed. The Transhumanist 09:06, 11 December 2016 (UTC)Reply

Went from cloning/regex-to-null to show/hide wrapper

Initially, the program toggled hide/show in a rather convoluted way: first it saved the mw-content element by cloning it. Then it deleted the annotations using regex. To get them back, it made a clone of the clone, and then replaced mw-content with the second clone. Here's that version:

https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=759842909

Then based on a suggestion by Anomie, I simplified the script to wrap each annotation in a classed span (class="anno"), and then used jQuery in the subfunctions to .hide and .show the class. Here's the simplification:

https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=760834841

It shrank by several lines of code. The Transhumanist 13:27, 19 January 2017 (UTC)Reply

Development notes

Injecting/inserting/embedding style

Scroll position

The goal here is to maintain the position of the scroll, with respect to the topmost list entry on the screen, and have the formatting change while maintaining that position.

Some potentially relevant resources:

Scroll Sneak
Can I detect the user viewable area on the browser?
How to determine if an element is visible inside the viewport
How do I check if an element is really visible with JavaScript?
From refdesk (computer):

You can get the position of an element, relative to the viewport, with code from http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element. You can then keep that element on the screen with code from http://kirbysayshi.com/2013/08/19/maintaining-scroll-position-knockoutjs-list.html. The two websearches I used to find these were https://duckduckgo.com/?q=js+get+top-left+object and https://duckduckgo.com/?q=js+scroll+element+to+viewport+position. (quote from LongHairedFop (talk) 13:53, 11 December 2016 (UTC))

About the viewport
document.elementFromPoint (gets position of topmost element in viewport)