Reformat code with standardjs
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful

Reformat code with standardjs as the majority of files seem to follow
that.
This commit is contained in:
yan 2023-01-30 22:38:36 +02:00
parent ec1cc90c93
commit 8f48564f50

View file

@ -1,6 +1,6 @@
const EMOJI_SIZE = 32 + 8; const EMOJI_SIZE = 32 + 8
const GROUP_TITLE_HEIGHT = 24; const GROUP_TITLE_HEIGHT = 24
const BUFFER_SIZE = 3*EMOJI_SIZE; const BUFFER_SIZE = 3 * EMOJI_SIZE
const EmojiGrid = { const EmojiGrid = {
props: { props: {
@ -9,108 +9,116 @@ const EmojiGrid = {
type: Array type: Array
} }
}, },
data() { data () {
return { return {
containerWidth: 0, containerWidth: 0,
containerHeight: 0, containerHeight: 0,
scrollPos: 0, scrollPos: 0,
resizeObserver: null, resizeObserver: null
} }
}, },
mounted() { mounted () {
const rect = this.$refs.container.getBoundingClientRect(); const rect = this.$refs.container.getBoundingClientRect()
this.containerWidth = rect.width; this.containerWidth = rect.width
this.containerHeight = rect.height; this.containerHeight = rect.height
this.resizeObserver = new ResizeObserver((entries) => { this.resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) { for (const entry of entries) {
this.containerWidth = entry.contentRect.width; this.containerWidth = entry.contentRect.width
this.containerHeight = entry.contentRect.height; this.containerHeight = entry.contentRect.height
} }
}) })
this.resizeObserver.observe(this.$refs.container); this.resizeObserver.observe(this.$refs.container)
}, },
beforeUnmount() { beforeUnmount () {
this.resizeObserver.disconnect(); this.resizeObserver.disconnect()
this.resizeObserver = null; this.resizeObserver = null
}, },
watch: { watch: {
groups() { groups () {
// Scroll to top when grid content changes // Scroll to top when grid content changes
if (this.$refs.container) { if (this.$refs.container) {
this.$refs.container.scrollTo(0, 0); this.$refs.container.scrollTo(0, 0)
} }
}, },
activeGroup(group) { activeGroup (group) {
this.$emit('activeGroup', group); this.$emit('activeGroup', group)
} }
}, },
methods: { methods: {
onScroll() { onScroll () {
this.scrollPos = this.$refs.container.scrollTop this.scrollPos = this.$refs.container.scrollTop
}, },
onEmoji(emoji) { onEmoji (emoji) {
this.$emit('emoji', emoji) this.$emit('emoji', emoji)
}, },
scrollToItem(itemId) { scrollToItem (itemId) {
const container = this.$refs.container; const container = this.$refs.container
if (!container) return; if (!container) return
for (const item of this.itemList) { for (const item of this.itemList) {
if (item.id === itemId) { if (item.id === itemId) {
container.scrollTo(0, item.position.y); container.scrollTo(0, item.position.y)
return; return
} }
} }
} }
}, },
computed: { computed: {
// Total height of scroller content // Total height of scroller content
gridHeight() { gridHeight () {
if (this.itemList.length == 0) return 0; if (this.itemList.length === 0) return 0
const lastItem = this.itemList[this.itemList.length - 1]; const lastItem = this.itemList[this.itemList.length - 1]
return lastItem.position.y + ('title' in lastItem ? GROUP_TITLE_HEIGHT : EMOJI_SIZE) return (
lastItem.position.y +
('title' in lastItem ? GROUP_TITLE_HEIGHT : EMOJI_SIZE)
)
}, },
activeGroup() { activeGroup () {
const items = this.itemList; const items = this.itemList
for (let i = items.length - 1; i >= 0; i--) { for (let i = items.length - 1; i >= 0; i--) {
const item = items[i]; const item = items[i]
if ('title' in item && item.position.y <= this.scrollPos) { if ('title' in item && item.position.y <= this.scrollPos) {
return item.id; return item.id
} }
} }
return null; return null
}, },
itemList() { itemList () {
const items = []; const items = []
let x = 0, y = 0; let x = 0
let y = 0
for (const group of this.groups) { for (const group of this.groups) {
items.push({ position: {x, y}, id: group.id, title: group.text }); items.push({ position: { x, y }, id: group.id, title: group.text })
if (group.text.length) { if (group.text.length) {
y += GROUP_TITLE_HEIGHT; y += GROUP_TITLE_HEIGHT
} }
for (const emoji of group.emojis) { for (const emoji of group.emojis) {
items.push({ position: {x, y}, id: `${group.id}-${emoji.displayText}`, emoji }) items.push({
x += EMOJI_SIZE; position: { x, y },
id: `${group.id}-${emoji.displayText}`,
emoji
})
x += EMOJI_SIZE
if (x + EMOJI_SIZE > this.containerWidth) { if (x + EMOJI_SIZE > this.containerWidth) {
y += EMOJI_SIZE; y += EMOJI_SIZE
x = 0; x = 0
} }
} }
if (x > 0) { if (x > 0) {
y += EMOJI_SIZE; y += EMOJI_SIZE
x = 0; x = 0
} }
} }
return items; return items
}, },
visibleItems() { visibleItems () {
const startPos = this.scrollPos - BUFFER_SIZE; const startPos = this.scrollPos - BUFFER_SIZE
const endPos = this.scrollPos + this.containerHeight + BUFFER_SIZE; const endPos = this.scrollPos + this.containerHeight + BUFFER_SIZE
return this.itemList.filter(i => { return this.itemList.filter((i) => {
return i.position.y >= startPos && i.position.y < endPos; return i.position.y >= startPos && i.position.y < endPos
}); })
}, },
scrolledClass() { scrolledClass () {
if (this.scrollPos <= 5) { if (this.scrollPos <= 5) {
return 'scrolled-top' return 'scrolled-top'
} else if (this.scrollPos >= this.gridHeight - this.containerHeight - 5) { } else if (this.scrollPos >= this.gridHeight - this.containerHeight - 5) {