diff --git a/includes/toggle-images.html b/includes/toggle-images.html
index d074f7cb42..79da415c49 100644
--- a/includes/toggle-images.html
+++ b/includes/toggle-images.html
@@ -1,6 +1,4 @@
diff --git a/javascripts/toggle-images.js b/javascripts/toggle-images.js
index 7aa12b0466..060628cf6c 100644
--- a/javascripts/toggle-images.js
+++ b/javascripts/toggle-images.js
@@ -8,9 +8,7 @@ const hideImagesByDefault = false
const placeholderImagePath = '/assets/images/octicons/image.svg'
/*
- * This module does two main things:
- * 1. Wraps every image in a button so they can be toggled individually.
- * 2. Adds a new icon button in the margin to toggle all images on the page.
+ * This module adds a new icon button in the margin to toggle all images on the page.
* It uses cookies to keep track of a user's selected image preference.
*/
export default function () {
@@ -29,57 +27,11 @@ export default function () {
// Look for a cookie with image visibility preference; otherwise, use the default.
const hideImagesPreferred = (Cookies.get('hideImagesPreferred') === 'true') || hideImagesByDefault
- /*
- * 1. INDIVIDUAL IMAGE HANDLING
- */
-
- // Get the aria-labels from the span elements containing the hide/show tooltips for single images.
- // (We do it this way instead of hardcoding text in JS for localization friendliness.)
- const tooltipHideSingle = document.getElementById('js-hide-single-image').getAttribute('aria-label')
- const tooltipShowSingle = document.getElementById('js-show-single-image').getAttribute('aria-label')
-
- // For every image...
- for (const img of images) {
- const parentSpan = img.parentNode
- // Create a button and add some attributes.
- const parentButton = document.createElement('button')
- parentButton.classList.add('tooltipped', 'tooltipped-nw', 'tooltipped-no-delay', 'btn-toggle-image')
- // Wrap the image in the button.
- parentButton.appendChild(img)
- // Replace the image's parent span with the new button.
- // This mostly applies to images in ordered lists nested in spans (via lib/render-content/create-processor.js).
- // It will have no effect with images that are not in ordered lists.
- parentSpan.parentNode.replaceChild(parentButton, parentSpan)
-
- // Set the relevant tooltip text, and hide the image if that is the preference.
- if (hideImagesPreferred) {
- parentButton.setAttribute('aria-label', tooltipShowSingle)
- toggleImage(img, 'hide', tooltipShowSingle)
- } else {
- parentButton.setAttribute('aria-label', tooltipHideSingle)
- }
-
- // On any individual image button click...
- parentButton.addEventListener('click', (e) => {
- // Determine current state.
- const hideOnNextClick = parentButton.getAttribute('aria-label') === tooltipShowSingle
-
- // Hide or show the image!
- if (hideOnNextClick) {
- toggleImage(img, 'show', tooltipHideSingle)
- } else {
- toggleImage(img, 'hide', tooltipShowSingle)
- }
-
- // Remove focus from the button after click so the tooltip does not stay displayed.
- parentButton.blur()
- })
+ // Hide the image if that is the preference.
+ if (hideImagesPreferred) {
+ toggleImages(images, 'hide')
}
- /*
- * 2. PAGE-WIDE TOGGLE BUTTON HANDLING
- */
-
// Get the span elements containing the off and on icons.
const offIcon = document.getElementById('js-off-icon')
const onIcon = document.getElementById('js-on-icon')
@@ -107,13 +59,13 @@ export default function () {
offIcon.removeAttribute('hidden')
onIcon.setAttribute('hidden', true)
toggleImagesBtn.setAttribute('aria-label', tooltipImagesOff)
- toggleImages(images, 'hide', tooltipShowSingle)
+ toggleImages(images, 'hide')
} else {
// Button should say "Images are on" on another click
offIcon.setAttribute('hidden', true)
onIcon.removeAttribute('hidden')
toggleImagesBtn.setAttribute('aria-label', tooltipImagesOn)
- toggleImages(images, 'show', tooltipHideSingle)
+ toggleImages(images, 'show')
}
// Remove focus from the button after click so the tooltip does not stay displayed.
@@ -130,30 +82,28 @@ export default function () {
})
}
-function toggleImages (images, action, tooltipText) {
+function toggleImages (images, action) {
for (const img of images) {
- toggleImage(img, action, tooltipText)
+ toggleImage(img, action)
}
}
-function toggleImage (img, action, tooltipText) {
- const parentButton = img.parentNode
+function toggleImage (img, action) {
+ const parentEl = img.parentNode
- // Style the parent button and image depending on the state.
+ // Style the parent element and image depending on the state.
if (action === 'show') {
img.src = img.getAttribute('originalSrc')
img.style.border = '2px solid var(--color-auto-gray-2)'
- parentButton.setAttribute('aria-label', tooltipText)
- parentButton.style.display = 'block'
- parentButton.style['margin-top'] = '20px'
- parentButton.style.padding = '10px 0'
+ parentEl.style.display = 'block'
+ parentEl.style['margin-top'] = '20px'
+ parentEl.style.padding = '10px 0'
} else {
if (!img.getAttribute('originalSrc')) img.setAttribute('originalSrc', img.src)
img.src = placeholderImagePath
img.style.border = 'none'
- parentButton.setAttribute('aria-label', tooltipText)
- parentButton.style.display = 'inline'
- parentButton.style['margin-top'] = '0'
- parentButton.style.padding = '1px 6px'
+ parentEl.style.display = 'inline'
+ parentEl.style['margin-top'] = '0'
+ parentEl.style.padding = '1px 6px'
}
}
diff --git a/stylesheets/images.scss b/stylesheets/images.scss
index f7d42b6535..1ecb764d28 100644
--- a/stylesheets/images.scss
+++ b/stylesheets/images.scss
@@ -2,6 +2,8 @@
display: block;
padding: 10px 0;
margin: 20px auto 0 auto;
+ border: none;
+ max-width: calc(100% - 32px);
}
.procedural-image-wrapper img {
@@ -10,6 +12,7 @@
width: auto;
height: auto;
max-height: 500px;
+ padding: 0;
}
// make sure images that contain emoji render at the expected size
@@ -20,21 +23,6 @@ img[src*="https://github.githubassets.com/images/icons/emoji"] {
}
.markdown-body img {
- max-height: 600px;
- padding: 0;
-}
-
-.markdown-body button.btn-toggle-image {
- border: none;
- margin-top: 20px;
- padding: 10px 0;
- max-width: calc(100% - 32px);
- background-color: transparent;
- display: block;
-}
-
-.markdown-body button.btn-toggle-image img {
- padding: 0;
max-height: 500px;
- border: 2px solid var(--color-auto-gray-2);
-}
+ padding: 0;
+}
\ No newline at end of file