yanchan09
9e04e4fd80
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
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: #275 Co-authored-by: yanchan09 <yan@omg.lol> Co-committed-by: yanchan09 <yan@omg.lol>
48 lines
1.2 KiB
Vue
48 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>
|