Merge the Posterverse shell's view address (shareable pages P1)

This commit is contained in:
Doxa Maps 2026-10-03 05:27:33 +00:00
commit 7d7ae092b3

View file

@ -74,6 +74,7 @@ import BackToTopButton from '@map/components/BackToTopButton.vue'
import ShellLanguageMenu from '@map/components/ShellLanguageMenu.vue'
import { saveLocale } from '@map/layouts/app-wrapper-material/languages.js'
import { loadScriptOnce, whenTagDefined } from '@map/utils/embedScript.js'
import { readViewKeys, writeViewKeys, onAddressChange, urlOwnerOf } from '@map/composables/useViewAddress.js'
import { translate, LOCALES } from './src/strings.js'
import { SECTIONS, TABS, resolveTabs } from './src/tabs.js'
@ -226,11 +227,22 @@ export default defineComponent({
mounted() {
this.watchHostLang()
// Paint the rail at once; the manifest completes the rows in the background and re-drives the mount.
this.select(this.initialIndex())
// First paint is a REPLACE, so a reload or a shared link keeps the tab without adding a Back step. If the
// address names a tab that only arrives with the manifest (a provisional row), write nothing yet: writing
// tab 0 here would overwrite the link, and applyManifest's own first-paint replace writes the honoured tab.
const want = this.requestedTab()
const known = !want || this.tabs.some((t) => t.id === want)
this.select(this.initialIndex(), { firstPaint: true, fromHistory: !known })
// Back / Forward re-apply the tab from the address and never write (writing would lose Forward).
this._offAddress = onAddressChange(({ tab }) => {
const i = this.tabs.findIndex((t) => t.id === tab)
this.select(i >= 0 ? i : 0, { fromHistory: true })
})
this.loadManifest()
},
beforeUnmount() {
if (this._langObs) { this._langObs.disconnect(); this._langObs = null }
if (this._offAddress) { this._offAddress(); this._offAddress = null }
},
methods: {
tr(key, params) { return translate(this.uiLocale, key, params) },
@ -250,8 +262,11 @@ export default defineComponent({
},
requestedTab() {
let q = ''
try { q = new URLSearchParams(location.search).get('tab') || '' } catch { /* non-browser */ }
return String(this.tab || this.cfg.tab || q || '').trim()
try { q = readViewKeys(location.search).tab } catch { /* non-browser */ }
// On a page whose address this shell owns, the URL (a reload, a shared link) beats a baked cfg.tab, or the
// first-paint replace would overwrite the link with the default. Elsewhere the host's config leads.
const order = urlOwnerOf(this.cfg) ? [this.tab, q, this.cfg.tab] : [this.tab, this.cfg.tab, q]
return String(order.find((v) => v) || '').trim()
},
initialIndex() {
const i = this.tabs.findIndex((t) => t.id === this.requestedTab())
@ -306,7 +321,7 @@ export default defineComponent({
const w = !this._honouredTab && want ? this.tabs.findIndex((t) => t.id === want) : -1
const i = this.tabs.findIndex((t) => t.id === activeId)
this._honouredTab = true
this.select(w >= 0 ? w : (i >= 0 ? i : 0))
this.select(w >= 0 ? w : (i >= 0 ? i : 0), { firstPaint: true })
},
onSelect(key) {
const i = this.tabs.findIndex((t) => t.id === key)
@ -322,7 +337,10 @@ export default defineComponent({
if (this.base) return this.base.replace(/\/+$/, '') + '/' + r
return '../' + r
},
select(i) {
// The tab is written to the address by the ONE owner (urlOwner in profile-config: 'app' on our own pages,
// 'host' when a host's router writes, absent on a partner's page = read only). A reader's choice is a push;
// first paint is a replace; Back / Forward never write.
select(i, { fromHistory = false, firstPaint = false } = {}) {
const prevIndex = this.activeIndex
this.activeIndex = i
// Release the outgoing heavy pane first, so at most one live map context exists at a time.
@ -334,6 +352,7 @@ export default defineComponent({
if (!t) return
// Tell the host which plugin is showing (CustomEvent 'tab-change', detail[0] = { id, label }).
if (prevIndex !== i || !this._announced) { this._announced = true; this.$emit('tab-change', { id: t.id, label: this.tabLabel(t) }) }
if (!fromHistory) writeViewKeys({ tab: t.id }, { owner: urlOwnerOf(this.cfg), push: !firstPaint, el: this.$el })
if (!t.scriptUrl) return // applyManifest selects again once the manifest lands
// A heavy tab's slot exists only after its v-if subtree renders, so mount on the next tick.
if (!t.mounted) this.$nextTick(() => { if (this.activeIndex === i) this.mountElement(i) })