From 4e084f311eda34590c026dd67825b310ff366348 Mon Sep 17 00:00:00 2001 From: Dominik Schmidt Date: Thu, 13 Oct 2022 15:44:30 +0200 Subject: [PATCH] Announce document title changes handled by apps ... and not the runtime --- .../unreleased/change-drive-aliases-in-urls | 1 + .../appDefaults/useDocumentTitle.ts | 21 ++++++++-- .../web-pkg/src/composables/eventBus/index.ts | 0 .../src/composables/eventBus/useEventBus.ts | 5 +++ packages/web-runtime/src/App.vue | 39 +++++++++++-------- 5 files changed, 46 insertions(+), 20 deletions(-) create mode 100644 packages/web-pkg/src/composables/eventBus/index.ts create mode 100644 packages/web-pkg/src/composables/eventBus/useEventBus.ts diff --git a/changelog/unreleased/change-drive-aliases-in-urls b/changelog/unreleased/change-drive-aliases-in-urls index 762a3114a79..10fa41b0bce 100644 --- a/changelog/unreleased/change-drive-aliases-in-urls +++ b/changelog/unreleased/change-drive-aliases-in-urls @@ -7,3 +7,4 @@ BREAKING CHANGE for developers: the appDefaults composables from web-pkg now wor https://github.com/owncloud/web/issues/6648 https://github.com/owncloud/web/pull/7430 +https://github.com/owncloud/web/pull/7791 diff --git a/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts b/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts index 86bd38132a4..464f32d54c4 100755 --- a/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts +++ b/packages/web-pkg/src/composables/appDefaults/useDocumentTitle.ts @@ -1,25 +1,38 @@ import { watch, Ref, unref } from '@vue/composition-api' import { useStore } from '../store' import { Store } from 'vuex' +import { useEventBus } from '../eventBus/useEventBus' +import { EventBus } from '../../services' interface DocumentTitleOptions { document: Document titleSegments: Ref store?: Store + eventBus?: EventBus } -export function useDocumentTitle({ document, titleSegments, store }: DocumentTitleOptions): void { +export function useDocumentTitle({ + document, + titleSegments, + store, + eventBus +}: DocumentTitleOptions): void { store = store || useStore() + eventBus = eventBus || useEventBus() watch( titleSegments, (newTitleSegments) => { const titleSegments = unref(newTitleSegments) - // TODO: announce navigation + const glue = ' - ' + const generalName = store.getters['configuration'].currentTheme.general.name + const payload = { + shortDocumentTitle: titleSegments.join(glue), + fullDocumentTitle: [...titleSegments, generalName].join(glue) + } - titleSegments.push(store.getters['configuration'].currentTheme.general.name) - document.title = titleSegments.join(' - ') + eventBus.publish('runtime.documentTitle.changed', payload) }, { immediate: true } ) diff --git a/packages/web-pkg/src/composables/eventBus/index.ts b/packages/web-pkg/src/composables/eventBus/index.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/web-pkg/src/composables/eventBus/useEventBus.ts b/packages/web-pkg/src/composables/eventBus/useEventBus.ts new file mode 100644 index 00000000000..d92424f8a28 --- /dev/null +++ b/packages/web-pkg/src/composables/eventBus/useEventBus.ts @@ -0,0 +1,5 @@ +import { eventBus } from '../../services' + +export const useEventBus = () => { + return eventBus +} diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue index 10a39e034ba..adaf7941e5d 100644 --- a/packages/web-runtime/src/App.vue +++ b/packages/web-runtime/src/App.vue @@ -51,6 +51,7 @@ import { getBackendVersion, getWebVersion } from './container/versions' import { defineComponent } from '@vue/composition-api' import { isPublicLinkContext, isUserContext, isAuthenticationRequired } from './router' import { additionalTranslations } from './helpers/additionalTranslations' // eslint-disable-line +import { eventBus } from 'web-pkg/src/services' export default defineComponent({ components: { @@ -100,12 +101,13 @@ export default defineComponent({ $route: { immediate: true, handler: function (to) { - const title = this.extractPageTitleFromRoute(to) - if (!title) { + const extracted = this.extractPageTitleFromRoute(to) + if (!extracted) { return } - this.announceRouteChange(to) - document.title = title + const { shortDocumentTitle, fullDocumentTitle } = extracted + this.announceRouteChange(shortDocumentTitle) + document.title = fullDocumentTitle } }, capabilities: { @@ -145,7 +147,15 @@ export default defineComponent({ } } }, - + mounted() { + eventBus.subscribe( + 'runtime.documentTitle.changed', + ({ shortDocumentTitle, fullDocumentTitle }) => { + document.title = fullDocumentTitle + this.announceRouteChange(shortDocumentTitle) + } + ) + }, destroyed() { if (this.$_notificationsInterval) { clearInterval(this.$_notificationsInterval) @@ -183,26 +193,23 @@ export default defineComponent({ }) }, - announceRouteChange(route) { - const pageTitle = this.extractPageTitleFromRoute(route, false) + announceRouteChange(pageTitle) { const translated = this.$gettext('Navigated to %{ pageTitle }') this.announcement = this.$gettextInterpolate(translated, { pageTitle }) }, - extractPageTitleFromRoute(route, includeGeneralName = true) { - const titleSegments = [] + extractPageTitleFromRoute(route) { const routeTitle = route.meta.title ? this.$gettext(route.meta.title) : undefined if (!routeTitle) { return } - - titleSegments.push(routeTitle) - - if (includeGeneralName) { - titleSegments.push(this.configuration.currentTheme.general.name) + const glue = ' - ' + const titleSegments = [routeTitle] + const generalName = this.configuration.currentTheme.general.name + return { + shortDocumentTitle: titleSegments.join(glue), + fullDocumentTitle: [...titleSegments, generalName].join(glue) } - - return titleSegments.join(' - ') } } })