Skip to content

Commit bf70a00

Browse files
sarahssarahs
committed
use relevant styles from the procedural-image-wrapper
1 parent 9b8d512 commit bf70a00

2 files changed

Lines changed: 22 additions & 12 deletions

File tree

‎includes/toggle-images.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<button class="toggle-images tooltipped tooltipped-nw tooltipped-no-delay" id="js-toggle-images" style="display: none;">
2-
<span id="js-off-icon" aria-label="{% data ui.toggle_images.off %}" style="display: none;">{% octicon "eye-closed" %}</span>
3-
<span id="js-on-icon" aria-label="{% data ui.toggle_images.on %}" style="display: none;">{% octicon "eye" %}</span>
4-
<span id="js-hide-single-image" aria-label="{% data ui.toggle_images.hide_single %}" style="display: none;"></span>
5-
<span id="js-show-single-image" aria-label="{% data ui.toggle_images.show_single %}" style="display: none;"></span>
1+
<button class="toggle-images tooltipped tooltipped-nw tooltipped-no-delay" id="js-toggle-images" hidden>
2+
<span id="js-off-icon" aria-label="{% data ui.toggle_images.off %}" hidden>{% octicon "eye-closed" %}</span>
3+
<span id="js-on-icon" aria-label="{% data ui.toggle_images.on %}" hidden>{% octicon "eye" %}</span>
4+
<span id="js-hide-single-image" aria-label="{% data ui.toggle_images.hide_single %}" hidden></span>
5+
<span id="js-show-single-image" aria-label="{% data ui.toggle_images.show_single %}" hidden></span>
66
</button>

‎javascripts/toggle-images.js‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function () {
2323

2424
// The button is hidden by default so it doesn't appear on browsers with JS disabled.
2525
// If there are images on a docs page and JS is enabled, display the toggle button.
26-
toggleImagesBtn.style.display = 'block'
26+
toggleImagesBtn.removeAttribute('hidden')
2727
// Remove focus from the button after click so the tooltip does not stay displayed.
2828
toggleImagesBtn.blur()
2929

@@ -51,6 +51,7 @@ export default function () {
5151
// This mostly applies to images in ordered lists nested in spans (via lib/render-content/create-processor.js).
5252
// It will have no effect with images that are not in ordered lists.
5353
parentSpan.parentNode.replaceChild(parentButton, parentSpan)
54+
// parentSpan.appendChild()
5455

5556
// Set the relevant tooltip text, and hide the image if that is the preference.
5657
if (hideImagesPreferred) {
@@ -91,10 +92,10 @@ export default function () {
9192

9293
// Set the starting state depending on user preferences.
9394
if (hideImagesPreferred) {
94-
offIcon.style.display = 'block'
95+
offIcon.removeAttribute('hidden')
9596
toggleImagesBtn.setAttribute('aria-label', tooltipImagesOff)
9697
} else {
97-
onIcon.style.display = 'block'
98+
onIcon.removeAttribute('hidden')
9899
toggleImagesBtn.setAttribute('aria-label', tooltipImagesOn)
99100
}
100101

@@ -105,14 +106,14 @@ export default function () {
105106
toggleImagesBtn.addEventListener('click', (e) => {
106107
if (showOnNextClick) {
107108
// Button should say "Images are off" on first click (depending on prefs)
108-
offIcon.style.display = 'inline'
109-
onIcon.style.display = 'none'
109+
offIcon.removeAttribute('hidden')
110+
onIcon.setAttribute('hidden', true)
110111
toggleImagesBtn.setAttribute('aria-label', tooltipImagesOff)
111112
toggleImages(images, 'hide', tooltipShowSingle)
112113
} else {
113114
// Button should say "Images are on" on another click
114-
offIcon.style.display = 'none'
115-
onIcon.style.display = 'inline'
115+
offIcon.setAttribute('hidden', true)
116+
onIcon.removeAttribute('hidden')
116117
toggleImagesBtn.setAttribute('aria-label', tooltipImagesOn)
117118
toggleImages(images, 'show', tooltipHideSingle)
118119
}
@@ -137,12 +138,21 @@ function toggleImages (images, action, tooltipText) {
137138
function toggleImage (img, action, tooltipText) {
138139
const parentButton = img.parentNode
139140

141+
// Style the parent button and image depending on the state.
140142
if (action === 'show') {
141143
img.src = img.getAttribute('originalSrc')
144+
img.style.border = '2px solid var(--color-auto-gray-2)'
142145
parentButton.setAttribute('aria-label', tooltipText)
146+
parentButton.style.display = 'block'
147+
parentButton.style['margin-top'] = '20px'
148+
parentButton.style.padding = '10px 0'
143149
} else {
144150
if (!img.getAttribute('originalSrc')) img.setAttribute('originalSrc', img.src)
145151
img.src = placeholderImagePath
152+
img.style.border = 'none'
146153
parentButton.setAttribute('aria-label', tooltipText)
154+
parentButton.style.display = 'inline'
155+
parentButton.style['margin-top'] = '0'
156+
parentButton.style.padding = '1px 6px'
147157
}
148158
}

0 commit comments

Comments
 (0)