fix(iframe-drawer): prevent top content from covering issues (#1249)

Co-authored-by: Hakadao <a578457889743@gmail.com>
This commit is contained in:
star knight
2025-01-19 23:25:30 +08:00
committed by GitHub
parent 1131120240
commit aa3a78173f
5 changed files with 62 additions and 18 deletions

View File

@@ -9,7 +9,7 @@ import { AppPage } from '~/enums/appEnums'
import { settings } from '~/logic'
import { type DockItem, useMainStore } from '~/stores/mainStore'
import { useSettingsStore } from '~/stores/settingsStore'
import { isHomePage, isInIframe, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
import { isHomePage, isInIframe, isVideoOrBangumiPage, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
import emitter from '~/utils/mitt'
import { setupNecessarySettingsWatchers } from './necessarySettingsWatchers'
@@ -93,6 +93,24 @@ const showBewlyPage = computed((): boolean => {
return isHomePage() && !settings.value.useOriginalBilibiliHomepage
})
const showTopBar = computed((): boolean => {
// When using the open in drawer feature, the iframe inside the page will hide the top bar
if (isVideoOrBangumiPage() && isInIframe())
return false
// When the user switches to the original Bilibili page, BewlyBewly will only show the top bar inside the iframe.
// This helps prevent the outside top bar from covering the contents.
// reference: https://github.com/BewlyBewly/BewlyBewly/issues/1235
// when using original bilibili homepage, show top bar
return settings.value.useOriginalBilibiliHomepage
// when on home page and not using original bilibili page, show top bar
|| (isHomePage() && !settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage.value) && !isInIframe())
// when in iframe and using original bilibili page, show top bar
|| (settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage.value) && isInIframe())
// when not on home page, show top bar
|| !isHomePage()
})
const isFirstTimeActivatedPageChange = ref<boolean>(true)
watch(
@@ -319,19 +337,7 @@ provide<BewlyAppProvider>('BEWLY_APP', {
<!-- TopBar -->
<div
v-if="
// When the user switches to the original Bilibili page, BewlyBewly will only show the top bar inside the iframe.
// This helps prevent the outside top bar from covering the contents.
// reference: https://github.com/BewlyBewly/BewlyBewly/issues/1235
// when using original bilibili homepage, show top bar
settings.useOriginalBilibiliHomepage
// when on home page and not using original bilibili page, show top bar
|| (isHomePage() && !settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage) && !isInIframe())
// when in iframe and using original bilibili page, show top bar
|| (settingsStore.getDockItemIsUseOriginalBiliPage(activatedPage) && isInIframe())
// when not on home page, show top bar
|| !isHomePage()"
v-if="showTopBar"
m-auto max-w="$bew-page-max-width"
>
<BewlyOrBiliTopBarSwitcher v-if="settings.showBewlyOrBiliTopBarSwitcher" />