| @@ -12,15 +12,20 @@ | ||
| 12 | 12 | //Hide all cloud messages - this is a bit of a hack, but it works make better **TODO** |
| 13 | 13 | document.querySelectorAll('.cloud-message').forEach(element => { |
| 14 | 14 | element.classList.add('hidden') |
| 15 | 15 | }) |
| 16 | + | |
| 17 | + if ('version-switch' !== section) { | |
| 18 | + document.getElementById('version-switch-warning')?.classList.add('hidden') | |
| 19 | + } | |
| 16 | 20 | } |
| 17 | 21 | |
| 18 | -// Refresh the editor preview if we're viewing the editor section. | |
| 19 | -const refreshEditorPreview = (section: string) => { | |
| 20 | - if ('editor' === section) { | |
| 21 | - window.code_snippets_editor_preview?.codemirror.refresh() | |
| 22 | - } | |
| 22 | +// Refresh the editor preview whenever tabs change. CodeMirror measures itself | |
| 23 | +// as zero-height while its container is hidden, so it has to be told to | |
| 24 | +// remeasure once the section holding it becomes visible. Keying this to a | |
| 25 | +// specific section name meant the preview rendered blank if that name changed. | |
| 26 | +const refreshEditorPreview = () => { | |
| 27 | + window.code_snippets_editor_preview?.codemirror.refresh() | |
| 23 | 28 | } |
| 24 | 29 | |
| 25 | 30 | // Update the http referer value so that any redirections lead back to this tab. |
| 26 | 31 | const updateHttpReferer = (section: string) => { |
| @@ -33,8 +38,28 @@ | ||
| 33 | 38 | const newReferer = httpReferer.value.replace(/(?<base>[&?]section=)[^&]+/, `$1${section}`) |
| 34 | 39 | httpReferer.value = newReferer + (newReferer === httpReferer.value ? `§ion=${section}` : '') |
| 35 | 40 | } |
| 36 | 41 | |
| 42 | +const setupHorizontalOverflow = (tabs: HTMLElement) => { | |
| 43 | + const wrapper = tabs.closest<HTMLElement>('.snippet-type-nav-wrapper') | |
| 44 | + if (!wrapper) { | |
| 45 | + return | |
| 46 | + } | |
| 47 | + | |
| 48 | + const updateFades = () => { | |
| 49 | + const remainingScroll = tabs.scrollWidth - tabs.clientWidth - tabs.scrollLeft | |
| 50 | + wrapper.classList.toggle('has-scroll-start', 1 < tabs.scrollLeft) | |
| 51 | + wrapper.classList.toggle('has-scroll-end', 1 < remainingScroll) | |
| 52 | + } | |
| 53 | + | |
| 54 | + tabs.addEventListener('scroll', updateFades, { passive: true }) | |
| 55 | + | |
| 56 | + const observer = new ResizeObserver(updateFades) | |
| 57 | + observer.observe(tabs) | |
| 58 | + observer.observe(tabs.firstElementChild ?? tabs) | |
| 59 | + updateFades() | |
| 60 | +} | |
| 61 | + | |
| 37 | 62 | export const handleSettingsTabs = () => { |
| 38 | 63 | const tabsWrapper = document.getElementById('settings-sections-tabs') |
| 39 | 64 | if (!tabsWrapper) { |
| 40 | 65 | console.error('Could not find snippets tabs') |
| @@ -40,19 +65,23 @@ | ||
| 40 | 65 | console.error('Could not find snippets tabs') |
| 41 | 66 | return |
| 42 | 67 | } |
| 43 | 68 | |
| 69 | + setupHorizontalOverflow(tabsWrapper) | |
| 70 | + | |
| 44 | 71 | const tabs = tabsWrapper.querySelectorAll('.snippet-type-link') |
| 45 | 72 | |
| 46 | 73 | for (const tab of tabs) { |
| 47 | 74 | tab.addEventListener('click', event => { |
| 48 | - event.preventDefault() | |
| 49 | 75 | const section = tab.getAttribute('data-section') |
| 50 | 76 | |
| 51 | - if (section) { | |
| 52 | - selectTab(tabsWrapper, tab, section) | |
| 53 | - refreshEditorPreview(section) | |
| 54 | - updateHttpReferer(section) | |
| 77 | + if (!section || !document.querySelector(`.settings-section.${section}-settings`)) { | |
| 78 | + return | |
| 55 | 79 | } |
| 80 | + | |
| 81 | + event.preventDefault() | |
| 82 | + selectTab(tabsWrapper, tab, section) | |
| 83 | + refreshEditorPreview() | |
| 84 | + updateHttpReferer(section) | |
| 56 | 85 | }) |
| 57 | 86 | } |
| 58 | 87 | } |
