Skip to content

Commit a0186a1

Browse files
hqhhuanghqhhuang
authored
Navigator related changes to allow further customization (#904)
Resolves: rdar://138215815
1 parent babfd02 commit a0186a1

26 files changed

+1678
-1499
lines changed

‎src/components/AdjustableSidebarWidth.vue

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ export default {
157157
focusTrapInstance: null,
158158
mobileTopOffset: 0,
159159
topOffset: 0,
160+
scrollLockContainer: null,
160161
};
161162
},
162163
computed: {
@@ -353,18 +354,23 @@ export default {
353354
* Toggles the scroll lock on/off
354355
*/
355356
async toggleScrollLock(lock) {
356-
const scrollLockContainer = document.getElementById(this.scrollLockID);
357-
if (lock) {
358-
await this.$nextTick();
359-
scrollLock.lockScroll(scrollLockContainer);
360-
// lock focus
361-
this.focusTrapInstance.start();
362-
// hide sibling elements from VO
363-
changeElementVOVisibility.hide(this.$refs.aside);
364-
} else {
365-
scrollLock.unlockScroll(scrollLockContainer);
357+
// if applicable, turn off lock on previous container
358+
if (this.scrollLockContainer) {
359+
scrollLock.unlockScroll(this.scrollLockContainer);
366360
this.focusTrapInstance.stop();
367361
changeElementVOVisibility.show(this.$refs.aside);
362+
this.scrollLockContainer = null;
363+
}
364+
if (lock) {
365+
await this.$nextTick();
366+
this.scrollLockContainer = document.getElementById(this.scrollLockID);
367+
if (this.scrollLockContainer) {
368+
scrollLock.lockScroll(this.scrollLockContainer);
369+
// lock focus
370+
this.focusTrapInstance.start();
371+
// hide sibling elements from VO
372+
changeElementVOVisibility.hide(this.$refs.aside);
373+
}
368374
}
369375
},
370376
storeTopOffset: throttle(function storeTopOffset() {

‎src/components/DocumentationLayout.vue

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -30,46 +30,48 @@
3030
>
3131
<PortalTarget name="modal-destination" multiple />
3232
<template #aside="{ scrollLockID, breakpoint }">
33-
<NavigatorDataProvider
34-
:interface-language="interfaceLanguage"
35-
:technologyUrl="technology ? technology.url : ''"
36-
:api-changes-version="selectedAPIChangesVersion"
37-
ref="NavigatorDataProvider"
38-
>
39-
<template #default="slotProps">
40-
<div class="documentation-layout-aside">
41-
<QuickNavigationModal
42-
v-if="enableQuickNavigation"
43-
:children="slotProps.flatChildren"
44-
:showQuickNavigationModal.sync="showQuickNavigationModal"
45-
:technology="technology ? technology.title : ''"
46-
/>
47-
<transition name="delay-hiding">
48-
<Navigator
49-
v-show="sidenavVisibleOnMobile || breakpoint === BreakpointName.large"
50-
:flatChildren="slotProps.flatChildren"
51-
:parent-topic-identifiers="parentTopicIdentifiers"
52-
:technology="slotProps.technology || technology"
53-
:is-fetching="slotProps.isFetching"
54-
:error-fetching="slotProps.errorFetching"
55-
:api-changes="slotProps.apiChanges"
56-
:references="references"
57-
:navigator-references="slotProps.references"
58-
:scrollLockID="scrollLockID"
59-
:render-filter-on-top="breakpoint !== BreakpointName.large"
60-
@close="handleToggleSidenav(breakpoint)"
61-
>
62-
<template v-if="enableQuickNavigation" #filter>
63-
<QuickNavigationButton @click.native="openQuickNavigationModal" />
64-
</template>
65-
<template #navigator-head="{ className }">
66-
<slot name="nav-title" :className="className" />
67-
</template>
68-
</Navigator>
69-
</transition>
70-
</div>
71-
</template>
72-
</NavigatorDataProvider>
33+
<div class="documentation-layout-aside">
34+
<QuickNavigationModal
35+
v-if="enableQuickNavigation"
36+
:children="indexNodes"
37+
:showQuickNavigationModal.sync="showQuickNavigationModal"
38+
:technology="technology ? technology.title : ''"
39+
/>
40+
<transition name="delay-hiding">
41+
<slot
42+
name="navigator"
43+
v-bind="{
44+
scrollLockID,
45+
breakpoint,
46+
sidenavVisibleOnMobile,
47+
handleToggleSidenav,
48+
enableQuickNavigation,
49+
openQuickNavigationModal,
50+
}"
51+
>
52+
<Navigator
53+
key="base-navigator"
54+
v-show="sidenavVisibleOnMobile || breakpoint === BreakpointName.large"
55+
v-bind="{ ...navigatorProps, technologyProps }"
56+
:parent-topic-identifiers="parentTopicIdentifiers"
57+
:references="references"
58+
:scrollLockID="scrollLockID"
59+
:render-filter-on-top="breakpoint !== BreakpointName.large"
60+
@close="handleToggleSidenav(breakpoint)"
61+
>
62+
<template v-if="enableQuickNavigation" #filter>
63+
<QuickNavigationButton @click.native="openQuickNavigationModal" />
64+
</template>
65+
<template #above-navigator-head>
66+
<slot name="above-navigator-head"/>
67+
</template>
68+
<template #navigator-head="{ className }">
69+
<slot name="nav-title" :className="className" />
70+
</template>
71+
</Navigator>
72+
</slot>
73+
</transition>
74+
</div>
7375
</template>
7476
<slot name="content" />
7577
</AdjustableSidebarWidth>
@@ -80,14 +82,14 @@
8082
import { PortalTarget } from 'portal-vue';
8183
import QuickNavigationButton from 'docc-render/components/Navigator/QuickNavigationButton.vue';
8284
import QuickNavigationModal from 'docc-render/components/Navigator/QuickNavigationModal.vue';
83-
import AdjustableSidebarWidth from 'docc-render/components/AdjustableSidebarWidth.vue';
85+
import AdjustableSidebarWidth from 'theme/components/AdjustableSidebarWidth.vue';
8486
import Navigator from 'docc-render/components/Navigator.vue';
8587
import onPageLoadScrollToFragment from 'docc-render/mixins/onPageLoadScrollToFragment';
8688
import { BreakpointName } from 'docc-render/utils/breakpoints';
8789
import { storage } from 'docc-render/utils/storage';
8890
import { getSetting } from 'docc-render/utils/theme-settings';
8991
90-
import NavigatorDataProvider from 'theme/components/Navigator/NavigatorDataProvider.vue';
92+
import indexDataGetter from 'theme/mixins/indexDataGetter';
9193
import DocumentationNav from 'theme/components/DocumentationTopic/DocumentationNav.vue';
9294
9395
const NAVIGATOR_HIDDEN_ON_LARGE_KEY = 'navigator-hidden-large';
@@ -98,13 +100,12 @@ export default {
98100
components: {
99101
Navigator,
100102
AdjustableSidebarWidth,
101-
NavigatorDataProvider,
102103
Nav: DocumentationNav,
103104
QuickNavigationButton,
104105
QuickNavigationModal,
105106
PortalTarget,
106107
},
107-
mixins: [onPageLoadScrollToFragment],
108+
mixins: [onPageLoadScrollToFragment, indexDataGetter],
108109
props: {
109110
enableNavigator: Boolean,
110111
diffAvailability: {

‎src/components/DocumentationTopic.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ import { normalizeRelativePath } from 'docc-render/utils/assets';
183183
import { last } from 'docc-render/utils/arrays';
184184
185185
import AppStore from 'docc-render/stores/AppStore';
186+
import IndexStore from 'docc-render/stores/IndexStore';
186187
import Aside from 'docc-render/components/ContentNode/Aside.vue';
187188
import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue';
188189
import LanguageSwitcher from 'theme/components/DocumentationTopic/Summary/LanguageSwitcher.vue';
@@ -425,7 +426,7 @@ export default {
425426
},
426427
data() {
427428
return {
428-
appState: AppStore.state,
429+
indexState: IndexStore.state,
429430
topicState: this.store.state,
430431
declListExpanded: false, // Hide all other declarations by default
431432
};
@@ -721,7 +722,7 @@ export default {
721722
this.store.setReferences(this.references);
722723
},
723724
watch: {
724-
'appState.includedArchiveIdentifiers': function updateRefs() {
725+
'indexState.includedArchiveIdentifiers': function updateRefs() {
725726
this.store.updateReferences();
726727
},
727728
// update the references in the store, in case they update, but the component is not re-created

‎src/components/Navigator.vue

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@
2727
@close="$emit('close')"
2828
>
2929
<template #filter><slot name="filter" /></template>
30+
<template #above-navigator-head>
31+
<slot name="above-navigator-head"/>
32+
</template>
3033
<template #navigator-head>
3134
<slot name="navigator-head" className="nav-title"/>
3235
</template>
@@ -91,7 +94,7 @@ export default {
9194
type: Array,
9295
required: true,
9396
},
94-
technology: {
97+
technologyProps: {
9598
type: Object,
9699
required: false,
97100
},
@@ -153,13 +156,6 @@ export default {
153156
* The root item is always a module
154157
*/
155158
type: () => TopicTypes.module,
156-
technologyProps: ({ technology }) => (
157-
!technology ? null : {
158-
technology: technology.title,
159-
technologyPath: technology.path || technology.url,
160-
isTechnologyBeta: technology.beta,
161-
}
162-
),
163159
},
164160
};
165161
</script>

‎src/components/Navigator/NavigatorCard.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,9 @@ export default {
395395
item.updateSize();
396396
}
397397
},
398+
technology() {
399+
this.clearFilters();
400+
},
398401
},
399402
methods: {
400403
setUnlessEqual(property, data) {

‎src/components/Navigator/NavigatorDataProvider.vue

Lines changed: 0 additions & 128 deletions
This file was deleted.

0 commit comments

Comments
 (0)