forked from CCBlueX/LiquidBounce
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
354 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<script lang="ts"> | ||
import {REST_BASE} from "../../../../integration/host"; | ||
import {createEventDispatcher} from "svelte"; | ||
const dispatch = createEventDispatcher<{ | ||
toggle: { identifier: string, enabled: boolean } | ||
}>(); | ||
export let identifier: string; | ||
export let name: string; | ||
export let enabled: boolean; | ||
</script> | ||
|
||
<!-- svelte-ignore a11y-no-static-element-interactions --> | ||
<!-- svelte-ignore a11y-click-events-have-key-events --> | ||
<div class="item" on:click={() => dispatch("toggle", {enabled: !enabled, identifier})}> | ||
<img class="icon" src="{REST_BASE}/api/v1/client/resource/itemTexture?id={identifier}" alt={identifier}/> | ||
<div class="name">{name}</div> | ||
<div class="tick"> | ||
{#if enabled} | ||
<img src="img/clickgui/icon-tick-checked.svg" alt="enabled"> | ||
{:else} | ||
<img src="img/clickgui/icon-tick.svg" alt="disabled"> | ||
{/if} | ||
</div> | ||
</div> | ||
|
||
<style lang="scss"> | ||
@import "../../../../colors.scss"; | ||
.item { | ||
display: grid; | ||
grid-template-columns: max-content 1fr max-content; | ||
align-items: center; | ||
column-gap: 5px; | ||
cursor: pointer; | ||
margin: 2px 5px 2px 0; | ||
} | ||
.icon { | ||
height: 25px; | ||
width: 25px; | ||
} | ||
.name { | ||
font-size: 12px; | ||
color: $clickgui-text-color; | ||
text-overflow: ellipsis; | ||
white-space: nowrap; | ||
overflow: hidden; | ||
} | ||
</style> |
93 changes: 93 additions & 0 deletions
93
src-theme/src/routes/clickgui/setting/items/ItemSetting.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
<script lang="ts"> | ||
import {createEventDispatcher, onMount} from "svelte"; | ||
import type {ItemsSetting, ModuleSetting} from "../../../../integration/types"; | ||
import {getRegistries} from "../../../../integration/rest"; | ||
import Item from "./Item.svelte"; | ||
import VirtualList from "./VirtualList.svelte"; | ||
import {convertToSpacedString, spaceSeperatedNames} from "../../../../theme/theme_config"; | ||
export let setting: ModuleSetting; | ||
const cSetting = setting as ItemsSetting; | ||
interface Item { | ||
name: string; | ||
identifier: string; | ||
} | ||
const dispatch = createEventDispatcher(); | ||
let items: Item[] = []; | ||
let renderedItems: Item[] = items; | ||
let searchQuery = ""; | ||
$: { | ||
let filteredItems = items; | ||
if (searchQuery) { | ||
filteredItems = filteredItems.filter(b => b.name.toLowerCase().includes(searchQuery.toLowerCase())); | ||
} | ||
renderedItems = filteredItems; | ||
} | ||
onMount(async () => { | ||
let i = (await getRegistries()).items; | ||
if (i !== undefined) { | ||
items = i.sort((a, b) => a.identifier.localeCompare(b.identifier)); | ||
} | ||
}); | ||
function handleItemToggle(e: CustomEvent<{ identifier: string, enabled: boolean }>) { | ||
console.log(e); | ||
if (e.detail.enabled) { | ||
cSetting.value = [...cSetting.value, e.detail.identifier]; | ||
} else { | ||
cSetting.value = cSetting.value.filter(b => b !== e.detail.identifier); | ||
} | ||
setting = { ...cSetting }; | ||
dispatch("change"); | ||
} | ||
</script> | ||
|
||
<div class="setting"> | ||
<div class="name">{$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}</div> | ||
<input type="text" placeholder="Search" class="search-input" bind:value={searchQuery} spellcheck="false"> | ||
<div class="results"> | ||
<VirtualList items={renderedItems} let:item> | ||
<Item identifier={item.identifier} name={item.name} enabled={cSetting.value.includes(item.identifier)} on:toggle={handleItemToggle}/> | ||
</VirtualList> | ||
</div> | ||
</div> | ||
|
||
<style lang="scss"> | ||
@import "../../../../colors.scss"; | ||
.setting { | ||
padding: 7px 0; | ||
} | ||
.results { | ||
height: 200px; | ||
overflow-y: auto; | ||
overflow-x: hidden; | ||
} | ||
.name { | ||
color: $clickgui-text-color; | ||
font-size: 12px; | ||
font-weight: 500; | ||
margin-bottom: 5px; | ||
} | ||
.search-input { | ||
width: 100%; | ||
border: none; | ||
border-bottom: solid 1px $accent-color; | ||
font-family: "Inter", sans-serif; | ||
font-size: 12px; | ||
padding: 5px; | ||
color: $clickgui-text-color; | ||
margin-bottom: 5px; | ||
background-color: rgba($clickgui-base-color, .36); | ||
} | ||
</style> |
137 changes: 137 additions & 0 deletions
137
src-theme/src/routes/clickgui/setting/items/VirtualList.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
<!-- Adapted from https://github.com/sveltejs/svelte-virtual-list --> | ||
<script lang="js"> | ||
import {onMount, tick} from 'svelte'; | ||
// props | ||
export let items; | ||
export let height = '100%'; | ||
export let itemHeight = undefined; | ||
// read-only, but visible to consumers via bind:start | ||
export let start = 0; | ||
export let end = 0; | ||
// local state | ||
let height_map = []; | ||
let rows; | ||
let viewport; | ||
let contents; | ||
let viewport_height = 0; | ||
let visible; | ||
let mounted; | ||
let top = 0; | ||
let bottom = 0; | ||
let average_height; | ||
$: visible = items.slice(start, end).map((data, i) => { | ||
return { index: i + start, data }; | ||
}); | ||
// whenever `items` changes, invalidate the current heightmap | ||
$: if (mounted) refresh(items, viewport_height, itemHeight); | ||
async function refresh(items, viewport_height, itemHeight) { | ||
const { scrollTop } = viewport; | ||
await tick(); // wait until the DOM is up to date | ||
let content_height = top - scrollTop; | ||
let i = start; | ||
while (content_height < viewport_height && i < items.length) { | ||
let row = rows[i - start]; | ||
if (!row) { | ||
end = i + 1; | ||
await tick(); // render the newly visible row | ||
row = rows[i - start]; | ||
} | ||
const row_height = height_map[i] = itemHeight || row.offsetHeight; | ||
content_height += row_height; | ||
i += 1; | ||
} | ||
end = i; | ||
const remaining = items.length - end; | ||
average_height = (top + content_height) / end; | ||
bottom = remaining * average_height; | ||
height_map.length = items.length; | ||
setTimeout(() => { | ||
viewport.scrollTop = 0; | ||
}, 100); | ||
} | ||
async function handle_scroll() { | ||
const { scrollTop } = viewport; | ||
const old_start = start; | ||
for (let v = 0; v < rows.length; v += 1) { | ||
height_map[start + v] = itemHeight || rows[v].offsetHeight; | ||
} | ||
let i = 0; | ||
let y = 0; | ||
while (i < items.length) { | ||
const row_height = height_map[i] || average_height; | ||
if (y + row_height > scrollTop) { | ||
start = i; | ||
top = y; | ||
break; | ||
} | ||
y += row_height; | ||
i += 1; | ||
} | ||
while (i < items.length) { | ||
y += height_map[i] || average_height; | ||
i += 1; | ||
if (y > scrollTop + viewport_height) break; | ||
} | ||
end = i; | ||
const remaining = items.length - end; | ||
average_height = y / end; | ||
while (i < items.length) height_map[i++] = average_height; | ||
bottom = remaining * average_height; | ||
// prevent jumping if we scrolled up into unknown territory | ||
if (start < old_start) { | ||
await tick(); | ||
let expected_height = 0; | ||
let actual_height = 0; | ||
for (let i = start; i < old_start; i +=1) { | ||
if (rows[i - start]) { | ||
expected_height += height_map[i]; | ||
actual_height += itemHeight || rows[i - start].offsetHeight; | ||
} | ||
} | ||
const d = actual_height - expected_height; | ||
viewport.scrollTo(0, scrollTop + d); | ||
} | ||
// TODO if we overestimated the space these | ||
// rows would occupy we may need to add some | ||
// more. maybe we can just call handle_scroll again? | ||
} | ||
// trigger initial refresh | ||
onMount(() => { | ||
rows = contents.getElementsByTagName('svelte-virtual-list-row'); | ||
mounted = true; | ||
}); | ||
</script> | ||
|
||
<style> | ||
svelte-virtual-list-viewport { | ||
position: relative; | ||
overflow-y: auto; | ||
-webkit-overflow-scrolling:touch; | ||
display: block; | ||
} | ||
svelte-virtual-list-contents, svelte-virtual-list-row { | ||
display: block; | ||
} | ||
svelte-virtual-list-row { | ||
overflow: hidden; | ||
} | ||
</style> | ||
|
||
<svelte-virtual-list-viewport | ||
bind:this={viewport} | ||
bind:offsetHeight={viewport_height} | ||
on:scroll={handle_scroll} | ||
style="height: {height};" | ||
> | ||
<svelte-virtual-list-contents | ||
bind:this={contents} | ||
style="padding-top: {top}px; padding-bottom: {bottom}px;" | ||
> | ||
{#each visible as row (row.index)} | ||
<svelte-virtual-list-row> | ||
<slot item={row.data}>Missing template</slot> | ||
</svelte-virtual-list-row> | ||
{/each} | ||
</svelte-virtual-list-contents> | ||
</svelte-virtual-list-viewport> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.