mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
39 lines
2.0 KiB
TypeScript
39 lines
2.0 KiB
TypeScript
import { MAP_LAYER_SWITCHER_INSET, MAP_ROUND_CONTROL_SIZE } from './MapLayerSwitcher';
|
|
|
|
/** The card's gap to the side panels where nothing else sits at the map's edge. */
|
|
const EDGE_GAP = 16;
|
|
/** How far the card keeps from the left panel, so it ends short of the base-layer pill. */
|
|
const PILL_CLEARANCE = MAP_LAYER_SWITCHER_INSET + MAP_ROUND_CONTROL_SIZE + 8;
|
|
|
|
/**
|
|
* Where a card opened over the map sits (the place inspector, a tour's detail,
|
|
* the day panel): centred between the two side panels, at most 800 wide.
|
|
*
|
|
* On the desktop map the base-layer pill stays put in the bottom-left corner. On
|
|
* a map wide enough the centred card never reaches that corner, but on a narrower
|
|
* one (both sidebars open in a 1280 window) it ran under the pill, which then
|
|
* covered the first button of the card's footer (#2604). With `clearPill` the
|
|
* card's left edge never comes closer than the pill: a narrow card moves right of
|
|
* it and gives up the few pixels it needs, a wide map keeps it exactly centred.
|
|
* The phone shows these cards as sheets with no pill beside them, so it leaves
|
|
* `clearPill` off.
|
|
*
|
|
* `extent` is what the card is placed in: '100%' of the map, or '100vw' for the
|
|
* fixed day panel.
|
|
*
|
|
* `centre` is where the card's middle sits, measured from the map's left edge like
|
|
* the panel widths. Each card sets it as its own `left` next to translateX(-50%),
|
|
* so lint:rtl counts that physical side where the card is placed.
|
|
*/
|
|
export function centredMapCard(
|
|
leftWidth: number,
|
|
rightWidth: number,
|
|
{ extent = '100%', clearPill = false }: { extent?: string; clearPill?: boolean } = {}
|
|
): { centre: string; width: string } {
|
|
const free = `(${extent} - ${leftWidth}px - ${rightWidth}px)`;
|
|
const centre = `calc(${leftWidth}px + ${free} / 2)`;
|
|
if (!clearPill) return { centre, width: `min(800px, calc(${free} - ${2 * EDGE_GAP}px))` };
|
|
const width = `min(800px, calc(${free} - ${PILL_CLEARANCE + EDGE_GAP}px))`;
|
|
return { width, centre: `max(${centre}, calc(${leftWidth}px + ${PILL_CLEARANCE}px + ${width} / 2))` };
|
|
}
|