Updated to Svelte 4.2.9, Frontend: Optimised pill to not bind mouseover and other functions for unused tooltips. Removed unused function in +page.svelte.

This commit is contained in:
Yohan Boujon 2024-02-01 17:20:32 +01:00
parent 7f9cee5798
commit 0ec0999130
4 changed files with 77 additions and 59 deletions

View file

@ -19,7 +19,7 @@
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4", "@sveltejs/kit": "^1.20.4",
"autoprefixer": "10.4.16", "autoprefixer": "10.4.16",
"svelte": "^4.0.5", "svelte": "^4.2.9",
"vite": "^4.4.2" "vite": "^4.4.2"
} }
}, },
@ -668,9 +668,9 @@
} }
}, },
"node_modules/axobject-query": { "node_modules/axobject-query": {
"version": "3.2.1", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
"integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==", "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"dequal": "^2.0.3" "dequal": "^2.0.3"
@ -1326,17 +1326,18 @@
} }
}, },
"node_modules/svelte": { "node_modules/svelte": {
"version": "4.2.5", "version": "4.2.9",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.5.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.9.tgz",
"integrity": "sha512-P9YPKsGkNdw4OJbtpd1uzimQHPj7Ai2sPcOHmmD6VgkFhFDmcYevQi7vE4cQ1g8/Vs64aL2TwMoCNFAzv7TPaQ==", "integrity": "sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@ampproject/remapping": "^2.2.1", "@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15", "@jridgewell/sourcemap-codec": "^1.4.15",
"@jridgewell/trace-mapping": "^0.3.18", "@jridgewell/trace-mapping": "^0.3.18",
"@types/estree": "^1.0.1",
"acorn": "^8.9.0", "acorn": "^8.9.0",
"aria-query": "^5.3.0", "aria-query": "^5.3.0",
"axobject-query": "^3.2.1", "axobject-query": "^4.0.0",
"code-red": "^1.0.3", "code-red": "^1.0.3",
"css-tree": "^2.3.1", "css-tree": "^2.3.1",
"estree-walker": "^3.0.3", "estree-walker": "^3.0.3",
@ -1444,9 +1445,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.5.0", "version": "4.5.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
"integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",

View file

@ -11,7 +11,7 @@
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4", "@sveltejs/kit": "^1.20.4",
"autoprefixer": "10.4.16", "autoprefixer": "10.4.16",
"svelte": "^4.0.5", "svelte": "^4.2.9",
"vite": "^4.4.2" "vite": "^4.4.2"
}, },
"type": "module", "type": "module",

View file

@ -72,13 +72,16 @@
afterUpdate(async () => { afterUpdate(async () => {
// 16 = arrow size + something // 16 = arrow size + something
if (show_tooltip && tooltip_data.length > 0) {
offsetUp = main_pill.offsetTop - pill_tooltip.offsetHeight - 16; offsetUp = main_pill.offsetTop - pill_tooltip.offsetHeight - 16;
}
}); });
</script> </script>
<svelte:window bind:innerWidth bind:scrollY/> <svelte:window bind:innerWidth bind:scrollY />
<div {#if show_tooltip && tooltip_data.length > 0}
<div
class={white ? "pill-container pill-white" : "pill-container pill-black"} class={white ? "pill-container pill-white" : "pill-container pill-black"}
{style} {style}
on:focus={() => true} on:focus={() => true}
@ -87,7 +90,7 @@
role="link" role="link"
tabindex="0" tabindex="0"
bind:this={main_pill} bind:this={main_pill}
> >
{#if show_tooltip === true} {#if show_tooltip === true}
<div class="pill-arrow pill-arrow-up" bind:this={pill_arrowup} /> <div class="pill-arrow pill-arrow-up" bind:this={pill_arrowup} />
<div class="pill-arrow pill-arrow-down" bind:this={pill_arrowdown} /> <div class="pill-arrow pill-arrow-down" bind:this={pill_arrowdown} />
@ -117,4 +120,22 @@
<SvgIcon type="mdi" path={icon} size="20" /> <SvgIcon type="mdi" path={icon} size="20" />
{/if} {/if}
<p>{name}</p> <p>{name}</p>
</div> </div>
{:else}
<div
class={white ? "pill-container pill-white" : "pill-container pill-black"}
{style}
>
{#if type_icon === "simpleicons"}
<img
height="20"
width="20"
src="https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/{icon}.svg"
alt={name}
/>
{:else}
<SvgIcon type="mdi" path={icon} size="20" />
{/if}
<p>{name}</p>
</div>
{/if}

View file

@ -76,9 +76,6 @@
// Mobile check // Mobile check
$: innerWidth = 0; $: innerWidth = 0;
function mobileCheck() {
//console.log(innerWidth);
}
</script> </script>
<svelte:window <svelte:window
@ -86,7 +83,6 @@
bind:innerHeight bind:innerHeight
bind:innerWidth bind:innerWidth
on:scroll={sidebarScrollingHandler} on:scroll={sidebarScrollingHandler}
on:resize={mobileCheck}
/> />
{#if data.status == 0} {#if data.status == 0}