forked from AkkomaGang/akkoma-fe
yanchan09
9e04e4fd80
A simple virtual scroller is now used for the emoji grid. This avoids loading all emoji images at once, saving network bandwidth and reducing load on the server, while also putting less work on the browser's DOM and layout engine. Co-authored-by: yan <yan@omg.lol> Reviewed-on: AkkomaGang/akkoma-fe#275 Co-authored-by: yanchan09 <yan@omg.lol> Co-committed-by: yanchan09 <yan@omg.lol>
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<div
|
|
ref="container"
|
|
class="emoji-grid"
|
|
:class="scrolledClass"
|
|
@scroll.passive="onScroll"
|
|
>
|
|
<div
|
|
:style="{
|
|
height: `${gridHeight}px`,
|
|
}"
|
|
>
|
|
<template v-for="item in visibleItems">
|
|
<h6
|
|
v-if="'title' in item && item.title.length"
|
|
:key="'title-' + item.id"
|
|
class="emoji-group-title"
|
|
:style="{
|
|
top: item.position.y + 'px',
|
|
left: item.position.x + 'px'
|
|
}"
|
|
>
|
|
{{ item.title }}
|
|
</h6>
|
|
<span
|
|
v-else-if="'emoji' in item"
|
|
:key="'emoji-' + item.id"
|
|
class="emoji-item"
|
|
:title="item.emoji.displayText"
|
|
:style="{
|
|
top: item.position.y + 'px',
|
|
left: item.position.x + 'px'
|
|
}"
|
|
@click.stop.prevent="onEmoji(item.emoji)"
|
|
>
|
|
<span v-if="!item.emoji.imageUrl">{{ item.emoji.replacement }}</span>
|
|
<img
|
|
v-else
|
|
:src="item.emoji.imageUrl"
|
|
>
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./emoji_grid.js"></script>
|
|
<style lang="scss" src="./emoji_grid.scss"></style>
|