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

Revision as of 02:18, 28 October 2017

Latest revision as of 14:21, 8 May 2022

(18 intermediate revisions by 2 users not shown)

Line 1:

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

: ''I'm using this page as a workspace. The talk page portion of it starts at [[#Discussions]], below.''

: '''''This script is operational: its main features work; it is under further development'''''

AnnotationToggler = Annotation Toggler. It adds a sidebar menu item and hot key to toggle list item (LI) annotations.

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

= Script's workshop =

Line 8 ⟶ 10:

== Description / instruction manual ==

: '''''This script is operational: its main features work; it is under further development'''''

''(This script is only partially functional at this time. It successfully toggles list item annotations on/off (show/hide). But the viewport jumps around relative to the text which is annoying. If you know how to fix this, please let me know.)''

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 29 ⟶ 31:

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 until you turn them back on again.

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

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.

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

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

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

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 340 ⟶ 332:

General usage:

<syntaxhighlight lang="javascript">

mw.util.addPortletLink( 'portletId', 'href', 'text', 'id', 'tooltip', 'accesskey', 'nextnode');

</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 374 ⟶ 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 391 ⟶ 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 ==

=== Bug reports ===

=== Desired/completed features ===

: ''Completed features are marked with {{done}}''

== Desired features ==

Improvements needed:

Line 459 ⟶ 475:

** The topic?

** The bullet?

== Completed features ==

=== Program on/off switch ===

Line 492 ⟶ 506:

== Development notes ==

=== Trycatch needed, and more ===

:The Transhumanist, where you use local storage.getItem() or setItem() you should always wrap that in try catch, as it can fail at any moment (even if you checked previously). This can be due to the browser running out of storage space for the ___domain, or because the browser is running in privacy mode or with an ad blocker extensions or something. Also, your new RegExp() calls should be lifted outside of the for loops, so that they aren't continuously recreated. For wpTextbox1.value, realise that sometimes the content might be managed by an editor (The syntaxhighlighting beta does this for instance). We use the [https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/jquery/jquery.textSelection.js jquery.textSelection plugin] to abstract way from these differences. Don't check document.title, check mw.config.get( 'wgTitle' ) or mw.config.get( 'wgPageName' ). And when you use mw.util.addPortlink, you have to ensure that the mediawiki.util plugin is loaded already, which you can do by using [https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.loader mw.loader.using]. —[[User:TheDJ|Th<span style="color: green">e</span>DJ]] ([[User talk:TheDJ|talk]] • [[Special:Contributions/TheDJ|contribs]]) 14:47, 27 October 2017 (UTC)

Line 769 ⟶ 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)