Skip to content
This repository was archived by the owner on Aug 3, 2023. It is now read-only.

Commit 58baffa

Browse files
ruibabyruibaby
committed
Fixed emoji picker style error.
1 parent 06393f3 commit 58baffa

21 files changed

+18069
-2002
lines changed

‎dist/halo-comment.js

+1,678-1,988
Large diffs are not rendered by default.

‎dist/halo-comment.js.map

-1
This file was deleted.

‎dist/halo-comment.min.js

+4-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/halo-comment.min.js.map

-1
This file was deleted.

‎package.json

-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@
2727
"marked": "^0.6.2",
2828
"md5": "^2.2.1",
2929
"nprogress": "^0.2.0",
30-
"simplemde": "^1.11.2",
31-
"v-emoji-picker": "^1.1.5",
3230
"vue": "^2.6.10"
3331
},
3432
"devDependencies": {

‎src/components/CommentEditor.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
:pack="pack"
1313
@select="selectEmoji"
1414
v-show="emojiDialogVisible"
15-
labelSearch="搜索"
15+
labelSearch="搜索表情"
1616
/>
1717
</div>
1818
<div class="comment-poster-container active">
@@ -111,8 +111,8 @@
111111

112112
<script>
113113
import md5 from 'md5'
114-
import VEmojiPicker from 'v-emoji-picker'
115-
import packData from 'v-emoji-picker/data/emojis.json'
114+
import VEmojiPicker from './EmojiPicker/VEmojiPicker'
115+
import emojiData from './EmojiPicker/data/emojis.json'
116116
import { isEmpty } from '../utils/util'
117117
import commentApi from '../apis/comment'
118118
@@ -148,7 +148,7 @@ export default {
148148
},
149149
data() {
150150
return {
151-
pack: packData,
151+
pack: emojiData,
152152
emojiDialogVisible: false,
153153
comment: {
154154
author: null,

‎src/components/EmojiPicker/Categories.vue

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
based on https://github.com/joaoeudes7/V-Emoji-Picker
3+
*/
4+
<template>
5+
<div id="Categories">
6+
<div
7+
:class="['category', { active: index === active }]"
8+
v-for="(categorie, index) in categories"
9+
:key="index"
10+
@click="onSelect(index)"
11+
>
12+
<VSvg :name="categorie.icon" />
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import VSvg from './VSvg'
19+
20+
export default {
21+
name: 'Categories',
22+
components: {
23+
VSvg
24+
},
25+
data: () => ({
26+
categories: [
27+
{ name: 'Frequenty', icon: 'frequenty' },
28+
{ name: 'Peoples', icon: 'peoples' },
29+
{ name: 'Nature', icon: 'nature' },
30+
{ name: 'Foods', icon: 'foods' },
31+
{ name: 'Activity', icon: 'activity' },
32+
{ name: 'Objects', icon: 'objects' },
33+
{ name: 'Places', icon: 'places' },
34+
{ name: 'Symbols', icon: 'symbols' },
35+
{ name: 'Flags', icon: 'flags' }
36+
],
37+
active: 1
38+
}),
39+
methods: {
40+
onSelect(index) {
41+
this.active = index
42+
43+
const _category = this.categories[index]
44+
this.$emit('select', _category)
45+
}
46+
}
47+
}
48+
</script>
49+
50+
<style>
51+
</style>

‎src/components/EmojiPicker/Emoji.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
based on https://github.com/joaoeudes7/V-Emoji-Picker
3+
*/
4+
<template>
5+
<span
6+
class="emoji"
7+
v-html="data"
8+
/>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'Emoji',
14+
props: {
15+
data: { type: String }
16+
}
17+
}
18+
</script>
19+
20+
<style></style>

‎src/components/EmojiPicker/EmojiList.vue

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/**
2+
based on https://github.com/joaoeudes7/V-Emoji-Picker
3+
*/
4+
<template>
5+
<div id="Emojis">
6+
<div
7+
ref="container-emoji"
8+
class="container-emoji"
9+
>
10+
<template v-if="continuousList">
11+
<div
12+
class="category-line"
13+
v-for="(category, category_name) in dataFilteredByCategory"
14+
:key="category_name"
15+
>
16+
<div
17+
v-show="category.length"
18+
class="category-title"
19+
:ref="category_name"
20+
>
21+
{{ category_name }}
22+
</div>
23+
<div
24+
v-if="category.length"
25+
class="grid-emojis"
26+
:style="gridDynamic"
27+
>
28+
<Emoji
29+
v-for="(emoji, index_e) in category"
30+
:key="`${category_name}-${index_e}`"
31+
:data="emoji['emoji']"
32+
@click.native="onSelect(emoji)"
33+
/>
34+
</div>
35+
</div>
36+
</template>
37+
<div
38+
v-else
39+
class="grid-emojis"
40+
:style="gridDynamic"
41+
>
42+
<Emoji
43+
v-for="(emoji, index) in dataFiltered"
44+
:key="index"
45+
:data="emoji['emoji']"
46+
@click.native="onSelect(emoji)"
47+
/>
48+
</div>
49+
</div>
50+
</div>
51+
</template>
52+
53+
<script>
54+
import Emoji from './Emoji'
55+
56+
export default {
57+
name: 'EmojiList',
58+
components: {
59+
Emoji
60+
},
61+
props: {
62+
data: { type: Object, required: true },
63+
emojisByRow: { type: Number, required: true },
64+
filter: { type: String },
65+
continuousList: { type: Boolean },
66+
category: { type: String }
67+
},
68+
methods: {
69+
onSelect(emoji) {
70+
this.$emit('select', emoji)
71+
}
72+
},
73+
computed: {
74+
gridDynamic() {
75+
const percent = 100 / this.emojisByRow
76+
return {
77+
gridTemplateColumns: `repeat(${this.emojisByRow}, ${percent}%)`
78+
}
79+
},
80+
dataFiltered() {
81+
let data = this.data[this.category]
82+
const searchValue = this.filter.trim()
83+
84+
if (searchValue) {
85+
data = data.filter(item => item.aliases.some(alias => alias.includes(searchValue.toLowerCase())))
86+
}
87+
88+
return data
89+
},
90+
dataFilteredByCategory() {
91+
let _data = Object.assign({}, this.data)
92+
const searchValue = this.filter.trim()
93+
94+
if (searchValue) {
95+
this.categories.forEach(category => {
96+
_data[category] = this.data[category].filter(item =>
97+
item.aliases.some(alias => alias.includes(searchValue.toLowerCase()))
98+
)
99+
})
100+
}
101+
102+
return _data
103+
},
104+
categories() {
105+
return Object.keys(this.data)
106+
}
107+
},
108+
watch: {
109+
data() {
110+
this.$refs['container-emoji'].scrollTop = 0
111+
},
112+
category(new_category) {
113+
if (this.continuousList) {
114+
const firstItemCategory = this.$refs[new_category][0]
115+
const scrollTop = firstItemCategory.offsetTop - 80
116+
117+
this.$refs['container-emoji'].scrollTop = scrollTop
118+
}
119+
}
120+
}
121+
}
122+
</script>
123+
124+
<style>
125+
</style>

‎src/components/EmojiPicker/Helper.vue

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
based on https://github.com/joaoeudes7/V-Emoji-Picker
3+
*/
4+
<template>
5+
<div id="Helper"></div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: "Helper"
11+
};
12+
</script>

‎src/components/EmojiPicker/InputSearch.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
based on https://github.com/joaoeudes7/V-Emoji-Picker
3+
*/
4+
<template>
5+
<div id="InputSearch">
6+
<div class="container-search">
7+
<input
8+
type="text"
9+
:value="value"
10+
@keyup="onKeyUp($event)"
11+
:placeholder="placeholder"
12+
/>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
name: 'InputSearch',
20+
props: {
21+
value: { type: String, required: true },
22+
placeholder: { type: String, required: true }
23+
},
24+
methods: {
25+
// Emit value of v-model
26+
onKeyUp(event) {
27+
this.$emit('input', event.target.value)
28+
}
29+
}
30+
}
31+
</script>
32+
33+
<style>
34+
</style>

‎src/components/EmojiPicker/VEmojiPicker.vue

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/**
2+
based on https://github.com/joaoeudes7/V-Emoji-Picker
3+
*/
4+
<template>
5+
<div id="EmojiPicker">
6+
<Categories
7+
v-if="showCategory"
8+
@select="onChangeCategory($event)"
9+
/>
10+
<InputSearch
11+
v-if="showSearch"
12+
v-model="filterEmoji"
13+
:placeholder="labelSearch"
14+
/>
15+
<EmojiList
16+
:data="emojis"
17+
:category="category"
18+
:filter="filterEmoji"
19+
:emojisByRow="emojisByRow"
20+
:continuousList="continuousList"
21+
@select="onSelectEmoji($event)"
22+
/>
23+
</div>
24+
</template>
25+
26+
<script>
27+
import Categories from './Categories'
28+
import EmojiList from './EmojiList'
29+
import InputSearch from './InputSearch'
30+
31+
export default {
32+
name: 'VEmojiPicker',
33+
props: {
34+
pack: { type: Array, required: true },
35+
labelSearch: { type: String, default: 'Pesquisar...' },
36+
showCategory: { type: Boolean, default: true },
37+
emojisByRow: { type: Number, default: 5 },
38+
showSearch: { type: Boolean, default: () => true },
39+
continuousList: { type: Boolean, default: () => false }
40+
},
41+
components: {
42+
Categories,
43+
EmojiList,
44+
InputSearch
45+
},
46+
data: () => ({
47+
mapEmojis: {},
48+
category: 'Peoples',
49+
filterEmoji: ''
50+
}),
51+
created() {
52+
this.mapperData(this.pack)
53+
},
54+
methods: {
55+
onChangeCategory(category) {
56+
this.category = category.name
57+
this.$emit('changeCategory', this.category)
58+
},
59+
onSelectEmoji(emoji) {
60+
this.updateFrequenty(emoji)
61+
this.$emit('select', emoji)
62+
},
63+
updateFrequenty(emoji) {
64+
this.mapEmojis['Frequenty'] = [...new Set([...this.mapEmojis['Frequenty'], emoji])]
65+
},
66+
mapperData(dataEmojis) {
67+
this.$set(this.mapEmojis, 'Frequenty', [])
68+
69+
dataEmojis.forEach(emoji => {
70+
const _category = emoji['category']
71+
72+
if (!this.mapEmojis[_category]) {
73+
this.$set(this.mapEmojis, _category, [emoji])
74+
} else {
75+
this.mapEmojis[_category].push(emoji)
76+
}
77+
})
78+
}
79+
},
80+
beforeDestroy() {
81+
delete this.mapEmojis
82+
},
83+
computed: {
84+
emojis() {
85+
return this.mapEmojis
86+
}
87+
}
88+
}
89+
</script>
90+
91+
<style>
92+
</style>

0 commit comments

Comments
 (0)