You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.8 KiB
130 lines
2.8 KiB
tag app-home
|
|
|
|
def mount
|
|
$home-input.focus!
|
|
api.#home_input = $home-input
|
|
api.#link_input = $link-input-url
|
|
|
|
def blur
|
|
setTimeout(&, 100) do
|
|
if document.activeElement != $link-input-url and document.activeElement != $link-input-title
|
|
$home-input.focus!
|
|
|
|
def edd_link
|
|
let title = $link-input-title.value
|
|
let url = $link-input-url.value
|
|
|
|
if !title
|
|
$link-input-title.focus!
|
|
elif !url
|
|
$link-input-url.focus!
|
|
else
|
|
if api.selected_link.title != title
|
|
delete Links[api.selected_link.title]
|
|
Links[title] =? url
|
|
storage.set 'links', Links
|
|
api.refresh_links!
|
|
api.select_link(title)
|
|
$home-input.focus!
|
|
|
|
def delete_link
|
|
delete Links[$link-input-title.value]
|
|
storage.set 'links', Links
|
|
api.refresh_links!
|
|
$home-input.focus!
|
|
|
|
def handle_click_copy s
|
|
try
|
|
await window.navigator.clipboard.writeText(s)
|
|
state.query = ''
|
|
api.sort_links!
|
|
|
|
def handle_input
|
|
api.set_link_selection_index 0
|
|
api.sort_links!
|
|
|
|
<self>
|
|
css w:100% d:flex fld:column ofy:hidden gap:20px
|
|
<.header>
|
|
css
|
|
d:hcl filter:grayscale(80%)
|
|
> input
|
|
h:34px px:20px
|
|
fs:14px
|
|
bd:1px solid $input-bc
|
|
outline:none rd:5px
|
|
bg:$input-bg c:$text-c
|
|
caret-color:$input-caret-c
|
|
<[c:$button-c] @click=delete_link!> "⨯"
|
|
<input$link-input-title[ml:17px bdr:0 rdr:0]
|
|
disabled=state.loading
|
|
@blur=blur
|
|
placeholder="title"
|
|
@keydown.enter.stop=edd_link!
|
|
value=api.selected_link.title
|
|
>
|
|
<input$link-input-url[bdl:0 rdl:0 w:380px]
|
|
disabled=state.loading
|
|
@blur=blur
|
|
placeholder="url"
|
|
@keydown.enter.stop=edd_link!
|
|
value=api.selected_link.url
|
|
>
|
|
|
|
<.header>
|
|
css
|
|
d:hflex
|
|
|
|
.side
|
|
c:$button-c fs:15px d:box e:300ms
|
|
|
|
>
|
|
w:15px d:flex
|
|
|
|
.left
|
|
pr:15px
|
|
jc:left
|
|
|
|
.right
|
|
pl:15px
|
|
jc:right
|
|
|
|
<.side.left @click=(state.view = 'settings')>
|
|
<svg src="../assets/settings.svg">
|
|
|
|
<input$home-input
|
|
autofocus
|
|
bind=state.query
|
|
@input=handle_input
|
|
@cut=api.handle_cut
|
|
disabled=state.loading
|
|
@blur=blur
|
|
>
|
|
css h:50px px:20px fl:1
|
|
fs:20px ta:center
|
|
bd:1px solid $input-bc
|
|
outline:none rd:5px
|
|
bg:$input-bg c:$text-c
|
|
caret-color:$input-caret-c
|
|
|
|
<.side.right@click=handle_click_copy(api.math_result or 0)>
|
|
<$math>
|
|
css d:box fs:17px min-width:min-content
|
|
"{Math.round(api.math_result * 100)/100}"
|
|
|
|
css e:200ms eaf:circ-out
|
|
max-width:{$math.offsetWidth or 30}px
|
|
min-width:{$math.offsetWidth}px
|
|
|
|
if state.loaded
|
|
<div ease>
|
|
css e:400ms of:hidden
|
|
@off o:0
|
|
|
|
if state.active_bang or (state.sorted_links.length < 1 and state.links.length)
|
|
<app-bang>
|
|
else
|
|
<app-links>
|
|
if !state.links.length
|
|
<h3[ta:center c:$button-c] @click=$link-input-url.focus!> "Add first link"
|
|
|
|
|