@@ -42,10 +42,12 @@ export default function () {
4242 const parentSpan = img . parentNode
4343 // Create a button and add some attributes.
4444 const parentButton = document . createElement ( 'button' )
45- parentButton . classList . add ( 'tooltipped' , 'tooltipped-nw' , 'btn-toggle-image' )
45+ parentButton . classList . add ( 'tooltipped' , 'tooltipped-nw' , 'tooltipped-no-delay' , ' btn-toggle-image')
4646 // Wrap the image in the button.
4747 parentButton . appendChild ( img )
4848 // Replace the image's parent span with the new button.
49+ // This mostly applies to images in ordered lists nested in spans (via lib/render-content/create-processor.js).
50+ // It will have no effect with images that are not in ordered lists.
4951 parentSpan . parentNode . replaceChild ( parentButton , parentSpan )
5052
5153 // Set the relevant tooltip text, and hide the image if that is the preference.
@@ -75,21 +77,21 @@ export default function () {
7577
7678 /* 2. PAGE-WIDE TOGGLE BUTTON HANDLING */
7779
78- // Get the span elements containing the hide and show icons.
79- const hideIcon = document . getElementById ( 'js-hide -icon' )
80- const showIcon = document . getElementById ( 'js-show -icon' )
80+ // Get the span elements containing the off and on icons.
81+ const offIcon = document . getElementById ( 'js-off -icon' )
82+ const onIcon = document . getElementById ( 'js-on -icon' )
8183
8284 // Get the aria-labels from the span elements for the tooltips.
83- const tooltipHideAll = hideIcon . getAttribute ( 'aria-label' )
84- const tooltipShowAll = showIcon . getAttribute ( 'aria-label' )
85+ const tooltipImagesOff = offIcon . getAttribute ( 'aria-label' )
86+ const tooltipImagesOn = onIcon . getAttribute ( 'aria-label' )
8587
8688 // Set the starting state depending on user preferences.
8789 if ( hideImagesPreferred ) {
88- showIcon . style . display = 'block'
89- toggleImagesBtn . setAttribute ( 'aria-label' , tooltipShowAll )
90+ offIcon . style . display = 'block'
91+ toggleImagesBtn . setAttribute ( 'aria-label' , tooltipImagesOff )
9092 } else {
91- hideIcon . style . display = 'block'
92- toggleImagesBtn . setAttribute ( 'aria-label' , tooltipHideAll )
93+ onIcon . style . display = 'block'
94+ toggleImagesBtn . setAttribute ( 'aria-label' , tooltipImagesOn )
9395 }
9496
9597 // If images are hidden by default, showOnNextClick should be false.
@@ -98,16 +100,16 @@ export default function () {
98100
99101 toggleImagesBtn . addEventListener ( 'click' , ( e ) => {
100102 if ( showOnNextClick ) {
101- // Button should say "Show " on first click
102- showIcon . style . display = 'inline'
103- hideIcon . style . display = 'none'
104- toggleImagesBtn . setAttribute ( 'aria-label' , tooltipShowAll )
103+ // Button should say "Images are off " on first click (depending on prefs)
104+ offIcon . style . display = 'inline'
105+ onIcon . style . display = 'none'
106+ toggleImagesBtn . setAttribute ( 'aria-label' , tooltipImagesOff )
105107 toggleImages ( images , 'hide' , tooltipShowSingle )
106108 } else {
107- // Button should say "Hide " on another click
108- showIcon . style . display = 'none'
109- hideIcon . style . display = 'inline'
110- toggleImagesBtn . setAttribute ( 'aria-label' , tooltipHideAll )
109+ // Button should say "Images are on " on another click
110+ offIcon . style . display = 'none'
111+ onIcon . style . display = 'inline'
112+ toggleImagesBtn . setAttribute ( 'aria-label' , tooltipImagesOn )
111113 toggleImages ( images , 'show' , tooltipHideSingle )
112114 }
113115
0 commit comments