| 1 | {{/* docs-jumpto — the keyboard jump-to palette's markup and styles, |
| 2 | shared by the list and a document because Control-K should work |
| 3 | from both. Rendered on every signed-in page; hidden until opened. |
| 4 | |
| 5 | Every string here is resolved from the catalog server-side |
| 6 | (render.go's docs.jumpto.*) and read back out of the DOM by |
| 7 | fixtures/jump-to.mjs — the bundle carries no copy of its own to |
| 8 | keep in sync by hand, the same rule the editor's save-status |
| 9 | indicator and the formatting bar already follow. |
| 10 | |
| 11 | The field is a combobox controlling a listbox, and the module |
| 12 | implements that contract: Down/Up move, Enter opens, Escape |
| 13 | closes and returns focus, aria-activedescendant names the current |
| 14 | option. A role written without its behaviour is worse than no |
| 15 | role, because the person acts on it — see fixtures/jump-to.mjs's |
| 16 | own header for where that was learned. |
| 17 | |
| 18 | hidden, not display:none in a class: fixtures/jump-to.mjs toggles |
| 19 | the property, and [hidden] is what a screen reader honours |
| 20 | without the stylesheet having loaded. */}} |
| 21 | {{define "docs-jumpto"}}<style> |
| 22 | [docs-jumpto] { |
| 23 | position: fixed; |
| 24 | inset: 0; |
| 25 | z-index: 20; |
| 26 | display: flex; |
| 27 | justify-content: center; |
| 28 | align-items: flex-start; |
| 29 | padding-block-start: 12vh; |
| 30 | padding-inline: var(--rst-sp-4); |
| 31 | background: var(--rst-overlay); |
| 32 | } |
| 33 | [docs-jumpto][hidden] { |
| 34 | display: none; |
| 35 | } |
| 36 | [docs-jumpto-panel] { |
| 37 | inline-size: min(100%, 34rem); |
| 38 | max-block-size: 70vh; |
| 39 | display: flex; |
| 40 | flex-direction: column; |
| 41 | overflow: hidden; |
| 42 | /* A float: the suite's one floating radius (estilo menu.css). */ |
| 43 | border-radius: var(--estilo-float-radius); |
| 44 | background: var(--rst-surface); |
| 45 | box-shadow: var(--rst-shadow-pop); |
| 46 | } |
| 47 | [docs-jumpto-head] { |
| 48 | display: flex; |
| 49 | align-items: center; |
| 50 | gap: var(--rst-sp-2); |
| 51 | padding: var(--rst-sp-3); |
| 52 | border-block-end: 1px solid var(--rst-line); |
| 53 | } |
| 54 | [docs-jumpto-input] { |
| 55 | flex: 1; |
| 56 | min-block-size: 32px; |
| 57 | padding: 0 var(--rst-sp-2); |
| 58 | border: 1px solid var(--rst-line); |
| 59 | border-radius: var(--rst-radius-sm); |
| 60 | background: var(--rst-bg); |
| 61 | color: var(--rst-text); |
| 62 | font: inherit; |
| 63 | } |
| 64 | /* `font: inherit` here outweighs tokens.css's bare `input`, whose |
| 65 | coarse-pointer rule lifts fields to 16px so iOS does not zoom on tap |
| 66 | (TestNoZoomOnTap). Same rule, at this weight. */ |
| 67 | @media (pointer: coarse) { |
| 68 | [docs-jumpto-input] { |
| 69 | font-size: max(1rem, 1em); |
| 70 | } |
| 71 | } |
| 72 | [docs-jumpto-list] { |
| 73 | margin: 0; |
| 74 | padding: var(--rst-sp-1); |
| 75 | overflow-y: auto; |
| 76 | list-style: none; |
| 77 | } |
| 78 | [docs-jumpto-list] li { |
| 79 | display: flex; |
| 80 | justify-content: space-between; |
| 81 | gap: var(--rst-sp-3); |
| 82 | padding: var(--rst-sp-2) var(--rst-sp-3); |
| 83 | border-radius: var(--rst-radius-sm); |
| 84 | cursor: pointer; |
| 85 | } |
| 86 | /* aria-selected is the state, and background alone would be colour |
| 87 | carrying meaning on its own (§10.3) — the weight changes too. */ |
| 88 | /* Hover matches the selected row's background, so a pointer and the |
| 89 | arrow keys point at a row the same way; only the selected row takes |
| 90 | the weight and colour that carry the state. */ |
| 91 | [docs-jumpto-list] li:hover { |
| 92 | background: var(--rst-accent-soft); |
| 93 | } |
| 94 | [docs-jumpto-list] li[aria-selected="true"] { |
| 95 | background: var(--rst-accent-soft); |
| 96 | color: var(--rst-accent); |
| 97 | font-weight: 600; |
| 98 | } |
| 99 | [docs-jumpto-when] { |
| 100 | color: var(--rst-text-muted); |
| 101 | font-size: var(--rst-fs-sm); |
| 102 | font-weight: 400; |
| 103 | white-space: nowrap; |
| 104 | } |
| 105 | [docs-jumpto-status] { |
| 106 | padding: var(--rst-sp-3); |
| 107 | color: var(--rst-text-muted); |
| 108 | font-size: var(--rst-fs-sm); |
| 109 | } |
| 110 | [docs-jumpto-hint] { |
| 111 | padding: var(--rst-sp-2) var(--rst-sp-3); |
| 112 | border-block-start: 1px solid var(--rst-line); |
| 113 | color: var(--rst-text-faint); |
| 114 | font-size: var(--rst-fs-xs); |
| 115 | } |
| 116 | </style> |
| 117 | <div docs-jumpto role="dialog" aria-modal="true" aria-label="{{.JumpTo.Label}}" hidden> |
| 118 | <div docs-jumpto-panel> |
| 119 | <div docs-jumpto-head> |
| 120 | <input docs-jumpto-input type="text" role="combobox" aria-expanded="false" |
| 121 | aria-controls="docs-jumpto-list" aria-autocomplete="list" autocomplete="off" |
| 122 | placeholder="{{.JumpTo.Placeholder}}" aria-label="{{.JumpTo.Placeholder}}"> |
| 123 | <button docs-jumpto-close rst-btn="ghost" type="button">{{.JumpTo.Close}}</button> |
| 124 | </div> |
| 125 | <ul docs-jumpto-list id="docs-jumpto-list" role="listbox" aria-label="{{.JumpTo.Label}}"></ul> |
| 126 | {{/* role="status" so a result count or a failure is announced |
| 127 | without stealing focus from the field being typed into. */}} |
| 128 | <p docs-jumpto-status role="status" aria-live="polite" hidden |
| 129 | data-partial="{{.JumpTo.Partial}}" data-empty="{{.JumpTo.Empty}}" data-failed="{{.JumpTo.Failed}}"></p> |
| 130 | <p docs-jumpto-hint>{{.JumpTo.Hint}}</p> |
| 131 | </div> |
| 132 | </div> |
| 133 | <script type="module" defer src="{{.JumpToScript}}"></script>{{end}} |
| 134 | |
amadan