Reformat code with standardjs
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
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:
parent
ec1cc90c93
commit
8f48564f50
1 changed files with 62 additions and 54 deletions
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue