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

Revision as of 05:19, 7 January 2018

Latest revision as of 14:21, 8 May 2022

(13 intermediate revisions by 2 users not shown)

Line 1:

{{User:The Transhumanist/Workshop boilerplate/Lead hatnote}}

: ''This is the RedlinksRemover.js support page. Please post discussion threads below the section titled '''[[#Discussions|Discussions]]'''. Thank you. By the way, the various scripts I have written are listed at the bottom of the page.''<ref>{{User:The Transhumanist/Scripts navfooter|state=expanded}}</ref>

: '''''(ScriptThis script is operational: its main features work; it is under further development)'''''

AnnotationToggler = Annotation Toggler. It adds a tab menu item to toggle list item (LI) annotations.

Line 10:

== Description / instruction manual ==

: '''''(ScriptThis script is operational: its main features work; it is under further development)'''''

AnnotationToggler = Annotation TogglerViewAnnotationToggler. Itjs: adds a tab menu item and hot key to turn list item annotations off and on, across all pages..

The hot key is {{keypress|Shift-|Alt-|a}}.

This script works on the list items in bulleted lists, lists in which each item is

Line 31:

hit the toggle again, and the descriptions return. The script stores its status so it

doesn't start over between pages &mdash; when annotations are turned off, they are off for

all pages until you turn them back on again.

{{User:The Transhumanist/Workshop boilerplate/Install}}

== Explanatory notes (source code walk-through) ==

{{User:The Transhumanist/Workshop boilerplate/Explanatory notes}} <!--includes h2 heading-->

This section explains the source code, in detail.

You can only use so many comments in the source code before you start to choke or bury the programming itself. So, I've put short summaries in the source code, and have provided in-depth explanations here. My intention is twofold:

# to thoroughly document the script so that even relatively new JavaScript beginners can understand what it does.

# to refresh my memory of exactly how the script works, in case I don't look at the source code (or any JavaScript) for weeks or months.

The explanatory notes include examples, and links to relevant documentation pages, tutorials, etc.

In addition to some standard [[JavaScript]] code, this script also relies heavily on the [[jQuery]] library.

If you have any questions, feel free to ask me ''[[#Discussions|at the bottom of this page under '''Discussions''']]''. Trying to answer them will help me learn JavaScript better.

=== General approach ===

Line 342 ⟶ 332:

General usage:

<syntaxhighlight lang="javascript">

<code>mw.util.addPortletLink( 'portletId', 'href', 'text [', 'id [', 'tooltip [', 'accesskey [', 'nextnode ]]]] ');</code>

</syntaxhighlight>

It's components:

<code>mw.util.addPortletLink( portletId, href, text [, id [, tooltip [, accesskey [, nextnode ]]]] );</code>

* <code>mw.util.addPortletLink</code>: the ResourceLoader module to add links to the portlets.

* <code>portletId</code>: portlet id— the section where the new menu item is to be placed. Valid values:

** <code>p-navigation</code>: Navigation section in left sidebar

** <code>p-interaction</code>: Interaction section in left sidebar

** <code>p-tb</code>: Toolbox section in left sidebar

** <code>coll-print_export</code>: Print/export section in left sidebar

** <code>p-personal</code> Personal toolbar at the top of the page

** <code>p-views</code> Upper right tabs in Vector only (read, edit, history, watch, etc.)

** <code>p-cactions</code> Drop-down menu containing move, etc. (in Vector); subject/talk links and action links in other skins

* <code>href</code>: Link to the Wikipedia or external page

* <code>text</code>: Text that displays

* <code>id</code>: HTML id (optional)

* <code>tooltip</code>: Tooltip to display on mouseover (optional)

* <code>accesskey</code>: Shortcut key press (optional)

* <code>nextnode</code>: Existing portlet link to place the new portlet link before (optional)

The optional fields must be included in the above order. To skip a field without changing it, use the value <var>null</var>.

* portletID = ID of the menu you want to add the menu item to

* href =

* text = the name of the menu item as it is to appear in the menu

* ID = element ID

* tooltip = the tip that shows up when you hover the mouse cursor over the menu item

* accesskey = the name of the hot key (without the Shift-alt)

* nextnode =

''For the documentation on this function, see https://www.mediawiki.org/wiki/ResourceLoader/Modules#addPortletLink'' and [[Help:Customizing toolbars]].

'''Important:''' It won't do anything until you bind it to a click handler (see below).

Line 376 ⟶ 378:

== Change log ==

* 2017-07-07

** Version 0.4 &ndash; [https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=789519032 ready to embark on fixing the viewport]

* 2017-07-06

** Moved the functions to the end of the script to make it easier to follow; marked the sections clearly

* 2017-07-05

** Added document ready function, so the script waits until the DOM is loaded before running

** Changed menu items to "Annotations (show)" and "Annotations (hide)"

* 2017-01-19

** Version 0.3 &ndash; [https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=760834841 Simplified the script to wrap annotations and then hide or show them].

* 2016-12-11

** Version 0.2 &ndash; [https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=754184988 on/off status persists across pages].

* 2016-12-08

** Anchor regexes on <nowiki><li></nowiki> (starting only) element delimiters

Line 393 ⟶ 384:

*** Uses regex to remove annotations

*** Uses a toggle to switch back and forth between the two states

* 2016-12-11

** Version 0.2 &ndash; [https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=754184988 on/off status persists across pages].

* 2017-01-19

** Version 0.3 &ndash; [https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=760834841 Simplified the script to wrap annotations and then hide or show them].

* 2017-07-05

** Added document ready function, so the script waits until the DOM is loaded before running

** Changed menu items to "Annotations (show)" and "Annotations (hide)"

* 2017-07-06

** Moved the functions to the end of the script to make it easier to follow; marked the sections clearly

* 2017-07-07

** Version 0.4 &ndash; [https://en.wikipedia.org/w/index.php?title=User:The_Transhumanist/anno.js&oldid=789519032 ready to embark on fixing the viewport]

* 2018-02-23

** Changed name to ViewAnnotationToggler.js

** removed activation filter so it works on all pages

* 2018-03-13

** Script editor wouldn't work while ViewAnnotationToggler was running, so added a deactivation filter so that this script doesn't run on edit pages.

== Task list ==

=== BugsBug reports ===

=== Desired/completed features ===

Line 776 ⟶ 783:

Post new discussion threads below.

== The Bug Report ==

Hi, {{ping|The Transhumanist}}. I've discovered an unintended side-effect caused by a line of code in your script, or should I say ''the'' line of code.

<syntaxhighlight lang="JavaScript>

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

</syntaxhighlight>

This code strips action handlers from DOM elements which are descendants of <code>mw-content-text</code>. This notably affects 'buttons', such as the 'show/hide' button in the following templates:

{{collapse top}}

Peekaboo.

{{collapse bottom}}

{{Fragaria|state=expanded}}

You ''might'' be able to prevent this by iterating through <code>&lt;li&gt;</code> elements, like so:

<syntaxhighlight lang="JavaScript">

$("#mw-content-text li").each(function()

{

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

});

</syntaxhighlight>

Let me know if this helps! Regards, <span style="font-family:Times New Roman">[[User:Guywan|''GUYWAN'']] ( [[User talk:Guywan|''t'']] &middot; [[Special:Contributions/Guywan|''c'']] )</span> 12:20, 6 June 2019 (UTC)