# Popover: Local market switch
On entering the site, a popover anchored to the globe icon in the header suggests switching to the user's local market for correct content and pricing. It is shown on load and can be dismissed via an outside click or the Escape key.
- **Type:** Pattern
- **Components:** [`p-button`](../../../components/p-button/p-button.md), [`p-button-pure`](../../../components/p-button-pure/p-button-pure.md), [`p-crest`](../../../components/p-crest/p-crest.md), [`p-drilldown`](../../../components/p-drilldown/p-drilldown.md), [`p-heading`](../../../components/p-heading/p-heading.md), [`p-link-pure`](../../../components/p-link-pure/p-link-pure.md), [`p-popover`](../../../components/p-popover/p-popover.md), [`p-sheet`](../../../components/p-sheet/p-sheet.md), [`p-tag`](../../../components/p-tag/p-tag.md), [`p-text`](../../../components/p-text/p-text.md), [`p-wordmark`](../../../components/p-wordmark/p-wordmark.md)
- **Conventions and stylesheet:** shared by all examples, see [examples.md](../../../examples.md)
## Markup
```html
Local Market
Do you want to switch to your local market for correct content and pricing?
Dismiss market popover
Go to Local Market
International
User
Welcome, John Doe
```
## Script
```js
// DO NOT USE IN PRODUCTION!
// EXAMPLE CODE FOR DEMONSTRATION PURPOSE ONLY.
// Behaviour of the header navigation: the menu button opens the drilldown, and the drilldown reports the level
// the user drilled into.
const navButton = document.getElementById('nav-button');
const navDrilldown = document.getElementById('nav-drilldown');
navButton.addEventListener('click', () => {
navDrilldown.open = true;
});
// Closing is requested by the component (Escape, the close button, a click on the backdrop) – the open state is
// owned by the page, so it has to be written back.
navDrilldown.addEventListener('dismiss', (e) => {
e.target.open = false;
});
navDrilldown.addEventListener('update', (e) => {
e.target.activeIdentifier = e.detail.activeIdentifier;
});
// Behaviour of the hero video: a pause control that follows the actual state of the video.
const video = document.getElementById('hero-video');
const pauseButton = document.getElementById('pause-button');
// The button hides its label, so its text content is its accessible name – it has to follow the actual state of
// the video, not the last click. Deriving it from the media events also covers autoplay being refused by the
// browser.
const syncPauseButton = () => {
pauseButton.textContent = video.paused ? 'Play Video' : 'Pause Video';
pauseButton.icon = video.paused ? 'play' : 'pause';
};
video.addEventListener('play', syncPauseButton);
video.addEventListener('pause', syncPauseButton);
pauseButton.addEventListener('click', () => {
video[video.paused ? 'play' : 'pause']();
});
// WCAG 2.2: an animation that starts on its own must be stoppable – and it must not start at all when the
// operating system was asked for reduced motion.
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
video.autoplay = false;
video.pause();
}
syncPauseButton();
// Behaviour of the popover pattern: which of the two disclosures of the header is open, and in which container.
//
// The navigation and the hero video bring their own behaviour, rendered by the partials they are built from. Only
// what is specific to this pattern is written here.
//
// Both popovers and the sheet are used in *controlled* mode: "open" is set from here, so the page always knows
// which one is showing and can mirror it onto the "aria-expanded" of the trigger. In uncontrolled mode the
// component owns that state and the page could not keep the two triggers mutually exclusive.
const marketPopover = document.getElementById('market-popover');
const marketButton = document.getElementById('market-button');
const marketDismiss = document.getElementById('market-dismiss');
const profilePopover = document.getElementById('profile-popover');
const profileSheet = document.getElementById('profile-sheet');
const profileButton = document.getElementById('profile-button');
// A panel anchored to a header icon has no room below "s", so the profile menu is a sheet there and a popover
// above.
const desktopQuery = window.matchMedia('(min-width: 480px)');
// Keeps a trigger's "aria-expanded" in sync with the disclosure it controls. "hide-label" only hides the label
// visually, so the button keeps its accessible name and only the state has to be announced.
const setExpanded = (button, isExpanded) => {
button.aria = { 'aria-expanded': isExpanded };
};
/** The profile menu, in whichever container the current viewport calls for. Closing covers both. */
const setProfileOpen = (isOpen) => {
const useSheet = isOpen && !desktopQuery.matches;
profilePopover.open = isOpen && !useSheet;
profileSheet.open = useSheet;
setExpanded(profileButton, isOpen);
};
const setMarketOpen = (isOpen) => {
marketPopover.open = isOpen;
setExpanded(marketButton, isOpen);
};
// The market switch is the message the page offers on load; the profile menu waits to be asked for.
setMarketOpen(true);
setProfileOpen(false);
marketButton.addEventListener('click', () => {
const isOpen = !marketPopover.open;
setProfileOpen(false);
setMarketOpen(isOpen);
});
marketDismiss.addEventListener('click', (e) => {
setMarketOpen(false);
// Return focus to the trigger for keyboard activation only: pressing Enter/Space synthesizes a click with
// "detail" 0, while pointer clicks report "detail >= 1". Without it the dismissed panel takes the focused
// button with it and the next Tab restarts at the top of the page.
if (e.detail === 0) {
marketButton.focus();
}
});
profileButton.addEventListener('click', () => {
const isOpen = !(profilePopover.open || profileSheet.open);
setMarketOpen(false);
setProfileOpen(isOpen);
});
// Escape, a click outside or focus leaving the panel request a close in controlled mode – the components restore
// focus to the trigger themselves, so only the state has to be written back.
marketPopover.addEventListener('dismiss', () => setMarketOpen(false));
profilePopover.addEventListener('dismiss', () => setProfileOpen(false));
profileSheet.addEventListener('dismiss', () => setProfileOpen(false));
// Crossing the breakpoint moves an open profile menu into the other container instead of closing it.
desktopQuery.addEventListener('change', () => setProfileOpen(profilePopover.open || profileSheet.open));
```