PaiGramTeam/luoxu-api-pub
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/luoxu-api-pub.git synced 2024-11-29 02:37:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor completion list fixes

Browse Source 
* hide after click
* update width on resizing
This commit is contained in:
lilydjwg 2021-10-12 19:59:57 +08:00
parent 1879828e71
commit 1b842ab3b5
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/Name.svelte
View File

@ -12,8 +12,7 @@
let url = getContext('LUOXU_URL') let url = getContext('LUOXU_URL')
let input let input
let ul let ul
let has_focus = false let should_hide = false
let has_mouse = false
let abort = new AbortController() let abort = new AbortController()
@ -23,6 +22,11 @@
ul.style.width = `${rect.width - 2}px` ul.style.width = `${rect.width - 2}px`
}) })
function update_list_width() {
const rect = input.getBoundingClientRect()
ul.style.width = `${rect.width - 2}px`
}
function may_complete() { function may_complete() {
if(to) { if(to) {
clearTimeout(to) clearTimeout(to)
@ -62,8 +66,10 @@
if(el.tagName != 'LI') { if(el.tagName != 'LI') {
return return
} }
selected_idx = el.dataset.idx selected_idx = el.dataset.idx|0
select_confirmed() select_confirmed()
input.focus()
should_hide = true
} }
function select_confirmed() { function select_confirmed() {
@ -73,9 +79,12 @@
} }
function update_value() { function update_value() {
if(!selected) {
return
}
if(input.value) { if(input.value) {
input.value = selected_name input.value = selected_name
}else if(selected != null){ }else{
selected = null selected = null
selected_name = '' selected_name = ''
} }
@ -112,16 +121,23 @@
// TODO: NOT operator // TODO: NOT operator
</script> </script>
<div on:mouseenter={() => has_mouse=true} on:mouseleave={() => has_mouse=false}> <div>
<input bind:this={input} type="text" on:input={may_complete} on:focus={() => has_focus=true} on:blur={() => {has_focus=false;update_value()}} on:keydown={select_by_key}/> <input bind:this={input} type="text"
on:input={() => {should_hide=false;may_complete()}}
on:focus={() => should_hide=false}
on:blur={() => {setTimeout(() => should_hide=true, 100);update_value}}
on:keydown={select_by_key}
/>
<img class="selected-avatar" alt="" src="{url}/avatar/{selected?selected:'nobody'}.jpg"/> <img class="selected-avatar" alt="" src="{url}/avatar/{selected?selected:'nobody'}.jpg"/>
<ul bind:this={ul} on:click={select_by_click} class:hidden={names.length === 0 || (!has_focus && !has_mouse)}> <ul bind:this={ul} on:click={select_by_click} class:hidden={names.length === 0 || should_hide}>
{#each names as name, i (name)} {#each names as name, i (name)}
<li data-idx={i} class:selected={i===selected_idx} title={name[1]}><img src="{url}/avatar/{name[0]}.jpg" alt="avatar"/>{name[1]}</li> <li data-idx={i} class:selected={i===selected_idx} title={name[1]}><img src="{url}/avatar/{name[0]}.jpg" alt="avatar"/>{name[1]}</li>
{/each} {/each}
</ul> </ul>
</div> </div>
<svelte:window on:resize={update_list_width}/>
<style> <style>
div { div {
position: relative; position: relative;