diff --git a/javascripts/experiment.js b/javascripts/experiment.js index 9a090665bb..fed4befb5c 100644 --- 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,23 @@ export function sendSuccess (test) { }) } -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) +function applyTreatment () { + // Treatment-specific options. + const hideImagesByDefault = true + const focusButtonByDefault = true + + // Run toggleImages a second time on each page, but with treatment defaults. + toggleImages(hideImagesByDefault, focusButtonByDefault) +} + +export default function () { + const testName = 'toggle-images' + const xbucket = bucket(testName) + + const toggleImagesBtn = document.getElementById('js-toggle-images') + if (!toggleImagesBtn) return + + toggleImagesBtn.addEventListener('click', () => { sendSuccess(testName) }) + + if (xbucket === TREATMENT) applyTreatment() } diff --git a/javascripts/index.js b/javascripts/index.js index d0ef8efce6..2a53cc4e34 100644 --- 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 index 2c40d505b7..b47d6d72c3 100644 --- a/javascripts/toggle-images.js +++ b/javascripts/toggle-images.js @@ -1,9 +1,5 @@ -// 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 +7,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 +21,9 @@ 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 = Cookies.get('hideImagesPreferred') === 'false' + ? false + : Cookies.get('hideImagesPreferred') === 'true' || hideImagesByDefault // Hide the images if that is the preference. if (hideImagesPreferred) { @@ -42,10 +40,18 @@ 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) } @@ -69,16 +75,14 @@ export default function () { } // Remove focus from the button after click so the tooltip does not stay displayed. - toggleImagesBtn.blur() + // Use settimeout to work around Firefox-specific issue. + setTimeout(() => { toggleImagesBtn.blur() }, 100) // Save this preference as a cookie. - Cookies.set('hideImagesPreferred', showOnNextClick) + Cookies.set('hideImagesPreferred', showOnNextClick, { sameSite: 'strict', secure: true }) // Toggle the action on every click. showOnNextClick = !showOnNextClick - - // TODO Track image toggle events - // sendEvent({ type: 'imageToggle' }) }) }