diff --git a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.js b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.js index 608d939d0ca..5789aa26ae8 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.js +++ b/src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.js @@ -1,12 +1,12 @@ -export function scrollToAnchor() { +export function scrollToAnchor() { const hash = decodeURI(location.hash) if (hash) { const anchor = hash.split('-')[0] const el = document.querySelector(anchor) if (el) { const handler = setTimeout(() => { - el.scrollIntoView({ behavior: 'smooth', block: 'start' }) clearTimeout(handler) + el.scrollIntoView({ behavior: 'smooth', block: 'start' }) }, 1000) } } diff --git a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.js b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.js index c9a462db93b..8940a99cc15 100644 --- a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.js +++ b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.js @@ -1,21 +1,19 @@ -import Data from "../../_content/BootstrapBlazor/modules/data.js" +import Data from "../../_content/BootstrapBlazor/modules/data.js" import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js" export function init(id) { - const navmenu = { - navbar: document.querySelector('.navbar-toggler'), - menu: document.querySelector('.sidebar-content') - } - Data.set(id, navmenu) + const navbar = document.querySelector('.navbar-toggler'); + const menu = document.querySelector('.sidebar-content'); + Data.set(id, { navbar, menu }); - EventHandler.on(navmenu.navbar, 'click', () => { - navmenu.menu.classList.toggle('show') + EventHandler.on(navbar, 'click', () => { + menu.classList.toggle('show') }) - EventHandler.on(navmenu.menu, 'click', '.nav-link', e => { + EventHandler.on(menu, 'click', '.nav-link', e => { const link = e.delegateTarget const url = link.getAttribute('href'); if (url !== '#') { - navmenu.menu.classList.remove('show') + menu.classList.remove('show') } }) } @@ -24,6 +22,7 @@ export function dispose(id) { const data = Data.get(id); Data.remove(id); - EventHandler.off(data.navbar, 'click'); - EventHandler.off(data.menu, 'click', '.nav-link'); + const { navbar, menu } = data; + EventHandler.off(navbar, 'click'); + EventHandler.off(menu, 'click', '.nav-link'); } diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.cs b/src/BootstrapBlazor/Components/Menu/Menu.razor.cs index 87c05ab1b9b..81ab6c1ef98 100644 --- a/src/BootstrapBlazor/Components/Menu/Menu.razor.cs +++ b/src/BootstrapBlazor/Components/Menu/Menu.razor.cs @@ -1,4 +1,4 @@ -// Licensed to the .NET Foundation under one or more agreements. +// Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the Apache 2.0 License // See the LICENSE file in the project root for more information. // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone @@ -144,11 +144,11 @@ private string GetUrl() var url = Navigator.ToBaseRelativePath(Navigator.Uri); if (url.Contains('?')) { - url = url[..url.IndexOf("?")]; + url = url[..url.IndexOf('?')]; } if (url.Contains('#')) { - url = url[..url.IndexOf("#")]; + url = url[..url.IndexOf('#')]; } return url; } diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.js b/src/BootstrapBlazor/Components/Menu/Menu.razor.js index 1f6c3ff584e..ebf8a273b68 100644 --- a/src/BootstrapBlazor/Components/Menu/Menu.razor.js +++ b/src/BootstrapBlazor/Components/Menu/Menu.razor.js @@ -1,4 +1,4 @@ -import { getTargetElement, getTransitionDelayDurationFromElement } from "../../modules/utility.js" +import { getTargetElement, getTransitionDelayDurationFromElement } from "../../modules/utility.js" import Data from "../../modules/data.js" export function init(id) { @@ -48,7 +48,7 @@ export function init(id) { } Data.set(id, menu) - scrollElementToView(menu.element) + scrollElementToView(menu) } export function update(id) { @@ -74,19 +74,24 @@ export function update(id) { } }); - scrollElementToView(menu.element) + scrollElementToView(menu) } export function scrollToView(id) { const menu = Data.get(id) if (menu) { - scrollElementToView(menu.element); + scrollElementToView(menu); } } export function dispose(id) { const menu = Data.get(id) - Data.remove(id) + Data.remove(id); + + if (menu.handler) { + clearInterval(menu.handler); + menu.handler = null; + } menu.collapses.forEach(el => { const target = getTargetElement(el) @@ -97,13 +102,23 @@ export function dispose(id) { }) } -const scrollElementToView = element => { +const scrollElementToView = menu => { + const { element } = menu; const scroll = element.hasAttribute('data-bb-scroll-view') if (scroll) { - var links = [...element.querySelectorAll('.nav-link.active')] - if (links.length > 0) { - var link = links.pop() - link.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start' }); - } + let count = 0; + menu.handler = setInterval(() => { + if (count < 3) { + var links = [...element.querySelectorAll('.nav-link.active')] + if (links.length > 0) { + clearInterval(menu.handler); + menu.handler = null; + + var link = links.pop() + link.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start' }); + } + } + count++; + }, 100); } }