Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | 1x 1x 128x 1x 6x 1x 3x 1x 128x | import type { Html, HtmlBuilder } from 'foldkit/html'
import { Message } from '@/message'
import type { Model } from '@/model'
import * as GoTo from '../../submodels/goTo'
import * as Settings from '../../submodels/settings'
import * as Icon from '../ui/icon'
export const REPOSITORY_URL = 'https://github.com/eknowles/coordkit'
const githubLinkView = (h: HtmlBuilder<Message>): Html =>
h.a(
[
h.Href(REPOSITORY_URL),
h.Target('_blank'),
h.Rel('noopener noreferrer'),
h.AriaLabel('CoordKit source on GitHub (opens in a new tab)'),
h.Title('Source on GitHub'),
h.Class(
'shrink-0 rounded-md p-1.5 text-muted outline-hidden hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-focus 2xl:order-last',
),
],
[Icon.github(h)],
)
const toGoToMessage = (message: GoTo.Message): Message =>
Message.GotGoToMessage({ message })
const toSettingsMessage = (message: Settings.Message): Message =>
Message.GotSettingsMessage({ message })
/**
* Wide screens: one row. Narrower screens: brand, search and the icon buttons on top, then the
* overlay toggles in a strip that scrolls sideways. The two wrappers dissolve (`2xl:contents`) on
* wide screens so every control joins the single row. Compact screens add the settings button
* and, under the toggles, the settings strip; wider layouts show settings beside the map.
*/
export const view = (model: Model, h: HtmlBuilder<Message>): Html =>
h.header(
[
h.Class(
'flex shrink-0 flex-col gap-2 border-b border-line bg-panel px-3 py-2 2xl:flex-row 2xl:items-center 2xl:gap-x-3',
),
],
[
h.div(
[h.Class('flex items-center gap-2 2xl:contents')],
[
h.h1(
[h.Class('shrink-0'), h.Title('CoordKit')],
[Icon.logo(h), h.span([h.Class('sr-only')], ['CoordKit'])],
),
h.submodel({
slotId: 'go-to',
model: model.goTo,
view: GoTo.view,
toParentMessage: toGoToMessage,
}),
h.submodel({
slotId: 'locate',
model: model.goTo,
view: GoTo.locateButtonView,
toParentMessage: toGoToMessage,
}),
model.layout === 'Compact'
? h.submodel({
slotId: 'settings-button',
model: model.settings,
view: Settings.panelButtonView,
toParentMessage: toSettingsMessage,
})
: h.empty,
githubLinkView(h),
],
),
h.div(
[
h.Class(
'-mx-3 flex items-center gap-3 overflow-x-auto px-3 [scrollbar-width:none] 2xl:contents [&::-webkit-scrollbar]:hidden',
),
],
[
h.submodel({
slotId: 'overlay-toggles',
model: model.settings,
view: Settings.togglesView,
toParentMessage: toSettingsMessage,
}),
],
),
model.layout === 'Compact'
? h.submodel({
slotId: 'settings-panel',
model: model.settings,
view: Settings.compactPanelView,
toParentMessage: toSettingsMessage,
})
: h.empty,
],
)
|