AB test!

sarahs · sarahs · commit 297cf047f9fd · 2021-04-27T12:56:14.000-04:00
diff --git a/javascripts/experiment.js b/javascripts/experiment.js
@@ -1,5 +1,6 @@
 import murmur from 'imurmurhash'
 import { getUserEventsId, sendEvent } from './events'
+import toggleImages from './toggle-images'
 // import h from './hyperscript'
 
 const TREATMENT = 'TREATMENT'
@@ -20,11 +21,21 @@ export function sendSuccess (test) {
   })
 }
 
+function applyTreatment (toggleButton) {
+  // Treatment-specific options.
+  const hideImagesByDefault = true
+  const focusButtonByDefault = true
+
+  toggleImages(hideImagesByDefault, focusButtonByDefault)
+}
+
 export default function () {
   // *** Example test code ***
-  // const testName = '$test-name$'
-  // const xbucket = bucket(testName)
-  // const x = document.querySelector(...)
-  // x.addEventListener('click', () => { sendSuccess(testName) })
-  // if (xbucket === TREATMENT) applyTreatment(x)
+  const testName = 'toggle-images'
+  const xbucket = bucket(testName)
+  const x = document.getElementById('js-toggle-images')
+  if (!x) return
+
+  x.addEventListener('click', () => { sendSuccess(testName) })
+  if (xbucket === TREATMENT) applyTreatment(x)
 }
diff --git a/javascripts/index.js b/javascripts/index.js
@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   airgapLinks()
   releaseNotes()
   initializeEvents()
-  experiment()
   helpfulness()
   toggleImages()
+  experiment()
 })
diff --git a/javascripts/toggle-images.js b/javascripts/toggle-images.js
@@ -1,8 +1,6 @@
 // import { sendEvent } from './events'
 import Cookies from 'js-cookie'
 
-// Determines whether images are hidden or displayed on first visit.
-const hideImagesByDefault = false
 
 // Set the image placeholder icon here.
 const placeholderImagePath = '/assets/images/octicons/image.svg'
@@ -11,7 +9,7 @@ const placeholderImagePath = '/assets/images/octicons/image.svg'
  * 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 () {
+export default function (hideImagesByDefault = false, focusButtonByDefault = false) {
   const toggleImagesBtn = document.getElementById('js-toggle-images')
   if (!toggleImagesBtn) return
 
@@ -25,7 +23,7 @@ export default function () {
   toggleImagesBtn.removeAttribute('hidden')
 
   // Look for a cookie with image visibility preference; otherwise, use the default.
-  const hideImagesPreferred = (Cookies.get('hideImagesPreferred') === 'true') || hideImagesByDefault
+  const hideImagesPreferred = hideImagesByDefault || (Cookies.get('hideImagesPreferred') === 'true')
 
   // Hide the images if that is the preference.
   if (hideImagesPreferred) {
@@ -42,10 +40,17 @@ export default function () {
 
   // Set the starting state depending on user preferences.
   if (hideImagesPreferred) {
+    onIcon.setAttribute('hidden', true)
     offIcon.removeAttribute('hidden')
     toggleImagesBtn.setAttribute('aria-label', tooltipImagesOff)
+    // Show the tooltip if images are hidden by default to help users see the toggle button.
+    // Downside: the button will begin with focus whenever the user goes to a new page.
+    if (focusButtonByDefault) {
+      toggleImagesBtn.focus({ preventScroll: true })
+    }
   } else {
     onIcon.removeAttribute('hidden')
+    offIcon.setAttribute('hidden', true)
     toggleImagesBtn.setAttribute('aria-label', tooltipImagesOn)
   }
 
