|
| 1 | +import Cookies from 'components/lib/cookies' |
| 2 | + |
| 3 | +enum annotationMode { |
| 4 | + Beside = '#annotation-beside', |
| 5 | + Inline = '#annotation-inline', |
| 6 | +} |
| 7 | + |
| 8 | +/** |
| 9 | + * Validates if a given mode is one of expected annotation modes. If no acceptable mode is found, a default mode is returned.. Optionally, returns a default mode. |
| 10 | + * @param mode The mode to validate, ideally "#annotation-beside" or "#annotation-inline" |
| 11 | + * @param leaveNull Alters the return value of this function. If false, the function will return the mode that was passed in or, in the case of null, the default mode. If true, the function will return null instead of using the default mode. |
| 12 | + * @returns The validated mode, or null if leaveNull is true and no valid mode is found. |
| 13 | + */ |
| 14 | +function validateMode(mode?: string, leaveNull?: boolean) { |
| 15 | + if (mode === annotationMode.Beside || mode === annotationMode.Inline || (!mode && leaveNull)) |
| 16 | + return mode |
| 17 | + else { |
| 18 | + if (leaveNull) { |
| 19 | + console.warn(`Leaving null.`) |
| 20 | + return |
| 21 | + } |
| 22 | + |
| 23 | + // default to beside |
| 24 | + return annotationMode.Beside |
| 25 | + } |
| 26 | +} |
| 27 | + |
| 28 | +export default function toggleAnnotation() { |
| 29 | + const subNavElements = Array.from(document.querySelectorAll('a.subnav-item')) |
| 30 | + if (!subNavElements.length) return |
| 31 | + |
| 32 | + const cookie = validateMode(Cookies.get('annotate-mode')) // will default to beside |
| 33 | + displayAnnotationMode(setActive(subNavElements, cookie), subNavElements, cookie) |
| 34 | + |
| 35 | + // this loop adds event listeners for both the annotation buttons |
| 36 | + for (const subnav of subNavElements) { |
| 37 | + subnav.addEventListener('click', (evt) => { |
| 38 | + evt.preventDefault() |
| 39 | + |
| 40 | + // returns either: |
| 41 | + // 1. if href is correct, the href that was passed in |
| 42 | + // 2. if href is missing, null |
| 43 | + const validMode = validateMode(subnav.getAttribute('href')!) |
| 44 | + |
| 45 | + Cookies.set('annotate-mode', validMode!) |
| 46 | + |
| 47 | + getActive(subNavElements).removeAttribute('aria-current') |
| 48 | + setActive(subNavElements, validMode) |
| 49 | + displayAnnotationMode(subnav, subNavElements, validMode) |
| 50 | + }) |
| 51 | + } |
| 52 | +} |
| 53 | + |
| 54 | +// returns the active element via its aria-current attribute, errors if it can't find it |
| 55 | +function getActive(subnavItems: Array<Element>) { |
| 56 | + const currentlyActive = subnavItems.find((el) => el.ariaCurrent === 'true') |
| 57 | + |
| 58 | + if (!currentlyActive) setActive(subnavItems) |
| 59 | + |
| 60 | + return currentlyActive! |
| 61 | +} |
| 62 | + |
| 63 | +// sets the active element's aria-current, if no targetMode is set we default to "Beside", errors if it can't set either Beside or the passed in targetMode |
| 64 | +function setActive(subNavElements: Array<Element>, targetMode?: string) { |
| 65 | + targetMode = validateMode(targetMode) |
| 66 | + const targetActiveElement = subNavElements.find((el) => el.getAttribute('href') === targetMode) |
| 67 | + |
| 68 | + if (!targetActiveElement) { |
| 69 | + throw new Error('No subnav item is active for code annotation.') |
| 70 | + } |
| 71 | + |
| 72 | + targetActiveElement.ariaCurrent = 'true' |
| 73 | + |
| 74 | + return targetActiveElement |
| 75 | +} |
| 76 | + |
| 77 | +// displays the chosen annotation mode |
| 78 | +function displayAnnotationMode( |
| 79 | + activeElement: Element, |
| 80 | + subNavItems: Array<Element>, |
| 81 | + targetMode?: string |
| 82 | +) { |
| 83 | + if (!targetMode || targetMode === annotationMode.Beside) |
| 84 | + activeElement.closest('.annotate')?.classList.replace('inline', 'beside') |
| 85 | + else if (targetMode === annotationMode.Inline) |
| 86 | + activeElement.closest('.annotate')?.classList.replace('beside', 'inline') |
| 87 | + else throw new Error('Invalid target mode set for annotation.') |
| 88 | + |
| 89 | + setActive(subNavItems, targetMode) |
| 90 | +} |
0 commit comments