extensible-nav - Allow extension by other features#9832
Conversation
| .UnderlineNav-octicon { | ||
| @media (max-width: 1100px) { | ||
| /* Somewhat match the native behavior for now. `mobile-tabs` would be better */ | ||
| display: none !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
This behavior has been somewhat intentionally dropped. Really not a fan of icon-less tabs. mobile-tabs and clean-repo-tabs will be better solutions
| // Final check to avoid duplicates in any scenario. | ||
| if (elementExists('.rgh-extensible-nav')) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
I reckon Svelte's mount() should detect mounting on the same target and deduplicate/update it. Wish me luck
| $(`.rgh-extensible-nav a[href="${currentTab.href}"]`).classList.add('selected'); | ||
| const currentTab = $('nav[aria-label="Repository"] a[aria-current][data-tab-item]'); | ||
| const itemId = currentTab.getAttribute('data-tab-item')!; | ||
| selectTab(itemId); |
There was a problem hiding this comment.
The marvels of DOM soup manipulation
| init: onetime(initOnce), | ||
| }, { | ||
| asLongAs: [ | ||
| () => isReady, |
There was a problem hiding this comment.
No need to wait anymore. The stores are available immediately and any changes will be stored until needed.
| // Final check to avoid duplicates in any scenario. | ||
| if (elementExists('.rgh-extensible-nav')) { |
There was a problem hiding this comment.
Once again hoping Svelte figures this out autonomously of mounted twice on the same element (however it's still not as safe)
| const nativeTabs = writable<Tab[]>([]); | ||
| const extraTabs = writable<ExtraTab[]>([]); | ||
| const hiddenIds = writable(new Set<string>()); | ||
|
|
||
| export const selectedId = writable<string | undefined>(); | ||
|
|
||
| export const tabs = derived( | ||
| [nativeTabs, extraTabs, hiddenIds], | ||
| ([$nativeTabs, $extraTabs, $hiddenIds]) => { | ||
| const tabs = $nativeTabs.filter(({id}) => !$hiddenIds.has(id)); | ||
|
|
||
| for (const {tab, before} of $extraTabs) { | ||
| const index = before ? tabs.findIndex(({id}) => id === before) : -1; | ||
| tabs.splice(index === -1 ? tabs.length : index, 0, tab); | ||
| } | ||
|
|
||
| return tabs; | ||
| }, | ||
| ); | ||
|
|
||
| export function setNativeTabs(nativeTabsList: Tab[]): void { | ||
| nativeTabs.set(nativeTabsList); | ||
| } | ||
|
|
||
| export function addTab(tab: Tab, before?: string): void { | ||
| extraTabs.update(current => [...current, {tab, before}]); | ||
| } | ||
|
|
||
| export function hideTab(id: string): void { | ||
| hiddenIds.update(current => new Set(current).add(id)); | ||
| } | ||
|
|
||
| export function selectTab(id: string): void { | ||
| selectedId.set(id); | ||
| } |
There was a problem hiding this comment.
This is the ugly part. This isn't final, we'll have to add capabilities as required. For example there's still no way to update a counter (e.g. for bugs-tab)
|
:) 
We're not there yet, but the tab can now be added via: import BugIcon from 'octicons-plain-react/Bug';
addTab({
id: 'bugs',
href: '/bugs',
label: 'Bugs',
icon: BugIcon,
}, 'pull-requests'); |
releases-tab,bugs-tab,clean-repo-tabsbroken #8867