add an image toggler button

Author: sarahs

includes/article.html

@@ -17,6 +17,9 @@ <h1 class="border-bottom-0">{{ page.title }}</h1>
           <button class="btn-link Link--secondary js-print tooltipped tooltipped-n" aria-label="Print this article">
             {% include printer-icon %}
           </button>
+          <button class="btn-link Link--secondary js-print tooltipped tooltipped-n" aria-label="Toggle images">
+            {% include toggle-images %}
+          </button>
         </div>
       </div>
 

includes/toggle-images.html

@@ -0,0 +1,4 @@
+<button type="button" class="btn btn-outline ml-3 toggle-images" id="js-toggle-images" aria-selected="true">
+  <span id="js-hide-text">{% data ui.toggle_images.hide %}</span>
+  <span id="js-show-text">{% data ui.toggle_images.show %}</span>
+</button>

javascripts/index.js

@@ -20,6 +20,7 @@ import devToc from './dev-toc'
 import releaseNotes from './release-notes'
 import showMore from './show-more'
 import airgapLinks from './airgap-links'
+import toggleImages from './toggle-images'
 
 document.addEventListener('DOMContentLoaded', async () => {
   displayPlatformSpecificContent()
@@ -42,4 +43,5 @@ document.addEventListener('DOMContentLoaded', async () => {
   initializeEvents()
   experiment()
   helpfulness()
+  toggleImages()
 })

javascripts/toggle-images.js

@@ -0,0 +1,36 @@
+// import { sendEvent } from './events'
+
+export default function () {
+  const toggleImagesBtn = document.getElementById('js-toggle-images')
+  if (!toggleImagesBtn) return
+
+  const hideText = document.getElementById('js-hide-text')
+  const showText = document.getElementById('js-show-text')
+
+  // For localization friendliness, the button HTML includes both show and hide text.
+  // The button should say "Hide" by default, so we suppress the "Show" text here.
+  showText.style.display = 'none'
+
+  const images = document.querySelectorAll('img')
+
+  toggleImagesBtn.addEventListener('click', (e) => {
+    for (const img of images) {
+      if (img.style.display === 'none') {
+        // Show images
+        img.style.display = 'block'
+        // Say "Hide"
+        showText.style.display = 'none'
+        hideText.style.display = 'inline'
+      } else {
+        // Hide images
+        img.style.display = 'none'
+        // Say "Show"
+        showText.style.display = 'inline'
+        hideText.style.display = 'none'
+      }
+    }
+
+    // Track image toggle events
+    // sendEvent({ type: 'imageToggle' })
+  })
+}