-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
experimental mvp
- Loading branch information
Showing
5 changed files
with
236 additions
and
2 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| <div class="lui-breadcrumb-container" bind:this="{breadcrumbContainer}"></div> | ||
|
|
||
| <script> | ||
| import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte'; | ||
| import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api'; | ||
| import { | ||
| NavigationHelpers, | ||
| RoutingHelpers, | ||
| StateHelpers, | ||
| EventListenerHelpers, | ||
| GenericHelpers | ||
| } from '../utilities/helpers'; | ||
| import { Routing } from '../services/routing'; | ||
| import { Navigation } from './services/navigation'; | ||
|
|
||
| const dispatch = createEventDispatcher(); | ||
|
|
||
| export let pathData; | ||
| let previousPathData; | ||
| let previousBreadcrumbs = {}; | ||
|
|
||
| let breadcrumbContainer; | ||
|
|
||
| let store = getContext('store'); | ||
|
|
||
| export let showBreadcrumb; | ||
| export let hideNavComponent; | ||
| export let responsiveNavSetting; | ||
| let addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs'); | ||
|
|
||
| const setNavData = async () => { | ||
| if (pathData && 0 < pathData.length) { | ||
| // const tnd = await NavigationHelpers.generateTopNavNodes(pathData); | ||
| // children = tnd.children; | ||
| // selectedNode = tnd.selectedNode; | ||
| previousPathData = pathData; | ||
| } | ||
| }; | ||
|
|
||
| const clickHandler = element => { | ||
| if (!element.last) { | ||
| handleClick(element.node); | ||
| } | ||
| }; | ||
|
|
||
| onMount(() => { | ||
| StateHelpers.doOnStoreChange(store, () => {}, ['navigation']); | ||
| }); | ||
|
|
||
| beforeUpdate(async () => { | ||
| if (pathData && (!previousPathData || previousPathData != pathData)) { | ||
| setNavData(); | ||
|
|
||
| if (pathData.length === 0) { | ||
| // data reset, just do nothing | ||
| return; | ||
| } | ||
|
|
||
| const breadcrumbConfig = LuigiConfig.getConfigValue('navigation.breadcrumbs'); | ||
| showBreadcrumb = !!breadcrumbConfig; | ||
| if (showBreadcrumb) { | ||
| // if enabled in general, check node scope | ||
| pathData.forEach(node => { | ||
| if (node.showBreadcrumbs === false) { | ||
| showBreadcrumb = false; | ||
| } else if (node.showBreadcrumbs === true) { | ||
| showBreadcrumb = true; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| if (showBreadcrumb) { | ||
| addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs'); | ||
|
|
||
| if (breadcrumbConfig.renderer) { | ||
| let items = []; | ||
| const start = breadcrumbConfig.omitRoot ? 2 : 1; | ||
|
|
||
| for (let i = start; i < pathData.length; i++) { | ||
| // First run needed for pre-render | ||
| const node = pathData[i]; | ||
| const route = RoutingHelpers.mapPathToNode(Routing.getCurrentPath(), node); | ||
| if (previousBreadcrumbs[route]) { | ||
| items.push(previousBreadcrumbs[route]); | ||
| } else if (node.label || node.titleResolver) { | ||
| document.body.classList.add('lui-breadcrumb'); | ||
| if (node.titleResolver) { | ||
| items.push({ | ||
| label: | ||
| node.titleResolver.prerenderFallback && | ||
| node.titleResolver.fallbackTitle | ||
| ? getNodeLabel(node.titleResolver.fallbackTitle) | ||
| : breadcrumbConfig.pendingItemLabel || '', | ||
| node: node, | ||
| route: route, | ||
| pending: true | ||
| }); | ||
| } else if (node.label) { | ||
| items.push({ label: getNodeLabel(node), node: node, route: route }); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (breadcrumbConfig.clearBeforeRender) { | ||
| breadcrumbContainer.innerHTML = ''; | ||
| } | ||
| breadcrumbConfig.renderer(breadcrumbContainer, items, clickHandler); | ||
| items = []; | ||
|
|
||
| for (let i = start; i < pathData.length; i++) { | ||
| const node = pathData[i]; | ||
|
|
||
| const route = RoutingHelpers.mapPathToNode(Routing.getCurrentPath(), node); | ||
|
|
||
| if (node.titleResolver) { | ||
| const data = await Navigation.extractDataFromPath(route); | ||
|
|
||
| const ctx = RoutingHelpers.substituteDynamicParamsInObject( | ||
| Object.assign({}, data.pathData.context, node.context), | ||
| data.pathData.pathParams | ||
| ); | ||
|
|
||
| try { | ||
| const headerData = await NavigationHelpers.fetchNodeTitleData(node, ctx); | ||
| items.push({ label: headerData.label, node: node, route: route }); | ||
| continue; | ||
| } catch (e) { | ||
| // | ||
| } | ||
| } | ||
|
|
||
| if (node.label) { | ||
| items.push({ label: getNodeLabel(node), node: node, route: route }); | ||
| } | ||
| } | ||
|
|
||
| if (breadcrumbConfig.clearBeforeRender) { | ||
| breadcrumbContainer.innerHTML = ''; | ||
| } | ||
| if (items.length > 1) { | ||
| items[items.length - 1].last = true; | ||
| document.body.classList.add('lui-breadcrumb'); | ||
| breadcrumbConfig.renderer(breadcrumbContainer, items, clickHandler); | ||
| } else if (breadcrumbConfig.autoHide) { | ||
| document.body.classList.remove('lui-breadcrumb'); | ||
| } | ||
| previousBreadcrumbs = {}; | ||
| items.map(item => { | ||
| previousBreadcrumbs[item.route] = item; | ||
| }); | ||
| } else { | ||
| document.body.classList.remove('lui-breadcrumb'); | ||
| console.warn('No breadcrumb container renderer specified'); | ||
| } | ||
| } else { | ||
| breadcrumbContainer.innerHTML = ''; | ||
| document.body.classList.remove('lui-breadcrumb'); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| function getNodeLabel(node) { | ||
| return LuigiI18N.getTranslation(node.label) || node.label; | ||
| } | ||
|
|
||
| export function handleClick(node) { | ||
| dispatch('handleClick', { node }); | ||
| } | ||
| </script> | ||
|
|
||
| <style type="text/scss"> | ||
| @import 'styles/variables'; | ||
| .lui-breadcrumb-container { | ||
| position: absolute; | ||
| right: 0; | ||
| top: $topNavHeight; | ||
| height: var(--luigi__breadcrumb--height); | ||
| left: 0; | ||
| display: none; | ||
| } | ||
|
|
||
| :global(.lui-breadcrumb) .lui-breadcrumb-container { | ||
| display: block; | ||
| } | ||
|
|
||
| :global(.lui-global-nav-visible) .lui-breadcrumb-container { | ||
| left: $globalNavWidth; | ||
| } | ||
| </style> |
This file contains 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