Created
March 11, 2017 15:59
-
-
Save frippz/87f9616499e365dd8a073b3e068d6963 to your computer and use it in GitHub Desktop.
Toggle dyslexic mode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Toggle dyslexic mode | |
| */ | |
| function dyslexicMode() { | |
| // Place button inside role="banner" | |
| var toggleContainer = document.querySelector('[role="banner"] .landmark-content'); | |
| // Create toggle button | |
| toggleContainer.insertAdjacentHTML('beforeend', '<button type="button" class="toggle-dyslexic-mode" data-text-original="Enable dyslexic mode" data-text-swap="Disable dyslexic mode">Enable dyslexic mode</button>'); | |
| // Cache button selector | |
| var dyslexicButton = document.querySelector('.toggle-dyslexic-mode'); | |
| // Function to toggle class and swap text on button | |
| function toggleDyslexicMode() { | |
| // Toggle the clas on <body> | |
| document.body.classList.toggle('dyslexic-mode'); | |
| // Swap text on <button> | |
| if (dyslexicButton.getAttribute('data-text-swap') === dyslexicButton.innerHTML) { | |
| dyslexicButton.innerHTML = dyslexicButton.getAttribute('data-text-original'); | |
| } else { | |
| dyslexicButton.setAttribute('data-text-original', dyslexicButton.innerHTML); | |
| dyslexicButton.innerHTML = dyslexicButton.getAttribute('data-text-swap'); | |
| } | |
| } | |
| // Swap class & text on click | |
| dyslexicButton.addEventListener('click', toggleDyslexicMode, false); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment