search.ftd

-- import: fastn/processors as pr



-- ds.page:
full-width: true
sidebar: false

-- ftd.text: 🔙 (Go Back)
$on-click$: $go-back()
role: $inherited.types.body-regular
color: $inherited.colors.text


-- ds.h1: Search


-- search-ui:
-- display-search-result:

-- end: ds.page





-- integer len: $length(a = $uis)










-- component search-ui:

-- ftd.column:
width: fill-container
spacing.fixed.px: 10



-- ftd.row:
role: $inherited.types.fine-print
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 7

-- ftd.text: 🔍
align-self: center

-- ftd.text-input:
value: $search
placeholder: Enter search query...
$on-input$: $ftd.set-string($a = $search, v = $VALUE)
$on-input$: $update-search-result($a = $search, s = $sitemap, $uis = $uis)
role: $inherited.types.fine-print
background.solid: $inherited.colors.background.step-2
color: $inherited.colors.text
width: fill-container
border-radius.px: 4
padding-vertical.px: 7
padding-horizontal.px: 12
$on-global-key[esc]$: $go-back()
$on-global-key[down]$: $increment($a=$selected, n=$len)
$on-global-key[up]$: $decrement($a=$selected, n=$len)
$on-global-key[j]$: $increment($a=$selected, n=$len)
$on-global-key[k]$: $decrement($a=$selected, n=$len)
$on-global-key[Enter]$: $go-to-url(a=$selected, l=$uis)

-- end: ftd.row

-- ftd.row:
align-self: end
role: $inherited.types.fine-print
color: $inherited.colors.text
spacing.fixed.px: 2
if: { len > 0 }

-- ftd.text: Showing:
-- ftd.integer: $len

-- end: ftd.row

-- end: ftd.column

-- end: search-ui











-- component display-search-result:

-- ftd.column:
width: fill-container
spacing.fixed.px: 10

-- display-search-item: $ui
idx: $idx
for: ui, idx in $uis

-- end: ftd.column

-- end: display-search-result



-- integer $selected: 0


-- component display-search-item:
caption text-link ui:
integer idx:


-- ftd.column:
width: fill-container
padding-horizontal.px: 10
link: $display-search-item.ui.url
border-width.px: 1
border-radius.px: 4
border-color: $inherited.colors.border
background.solid if { display-search-item.idx == selected }: $inherited.colors.background.step-2
padding-bottom.px: 7

-- ds.h2: $display-search-item.ui.title
if: { display-search-item.ui.title != NULL }

-- ftd.text: $display-search-item.ui.url
role: $inherited.types.fine-print
color: $inherited.colors.cta-primary.base
padding-bottom.px: 7

-- ftd.text: $display-search-item.ui.description
role: $inherited.types.copy-regular
color: $inherited.colors.text
if: { display-search-item.ui.description != NULL }
line-clamp: 3


-- end: ftd.column

-- end: display-search-item






-- pr.sitemap-data sitemap:
$processor$: pr.full-sitemap




-- string $search: Home ;; todo: use ftd.empty




-- text-link list $uis:



-- record text-link:
optional caption title:
string url:
optional string description:



-- void update-search-result(a,s,uis):
string $a:
pr.sitemap-data s:
text-link list $uis:
js: [$assets.files.search.js]

findNow(a, s, uis, 10)






-- void go-back():

goBack()







-- integer length(a):
text-link list a:

len(a)




-- void increment(a,n):
integer $a:
integer n:

a = (a + 1) % n




-- void decrement(a,n):
integer $a:
integer n:
js: [$assets.files.search.js]

clampDecrement(a,n)




-- void go-to-url(a,l):
integer a:
text-link list l:


goToUrl(a, l)