Browse Source
Merge pull request #106 from boyanio/master
Expose the name of the selected emoji when firing the emoji event
master
Joe Attardi
4 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with
14 additions and
7 deletions
-
index.d.ts
-
site/src/examples/custom/custom.js
-
site/src/examples/events/emoji.js
-
site/src/examples/styles/twemoji.js
-
site/src/pages/docs/events.js
-
src/index.ts
|
|
@ -12,7 +12,7 @@ declare namespace EmojiButton { |
|
|
|
showPicker(referenceEl: HTMLElement): void; |
|
|
|
togglePicker(referenceEl: HTMLElement): void; |
|
|
|
isPickerVisible(): boolean; |
|
|
|
setTheme(theme:EmojiTheme): void; |
|
|
|
setTheme(theme: EmojiTheme): void; |
|
|
|
} |
|
|
|
|
|
|
|
export interface Options { |
|
|
@ -55,6 +55,7 @@ declare namespace EmojiButton { |
|
|
|
} |
|
|
|
|
|
|
|
export interface EmojiSelection { |
|
|
|
name: string; |
|
|
|
custom?: boolean; |
|
|
|
emoji?: string; |
|
|
|
url?: string; |
|
|
|
|
|
@ -21,11 +21,11 @@ picker.on('emoji', selection => { |
|
|
|
if (selection.url) { |
|
|
|
const img = document.createElement('img'); |
|
|
|
img.src = selection.url; |
|
|
|
img.alt = selection.emoji; |
|
|
|
img.alt = selection.emoji + ' ' + selection.name; |
|
|
|
trigger.appendChild(img); |
|
|
|
} else { |
|
|
|
const span = document.createElement('span'); |
|
|
|
span.innerHTML = selection.emoji; |
|
|
|
span.innerHTML = selection.emoji + ' ' + selection.name; |
|
|
|
trigger.appendChild(span); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
const picker = new EmojiButton(); |
|
|
|
|
|
|
|
picker.on('emoji', selection => { |
|
|
|
alert(`"emoji" event fired, emoji is ${selection.emoji}`); |
|
|
|
alert(`"emoji" event fired, emoji is ${selection.emoji} with name ${selection.name}`); |
|
|
|
}); |
|
|
@ -13,7 +13,7 @@ picker.on('emoji', selection => { |
|
|
|
// Add the new image for the new Twemoji
|
|
|
|
const img = document.createElement('img'); |
|
|
|
img.src = selection.url; |
|
|
|
img.alt = selection.emoji; |
|
|
|
img.alt = selection.emoji + ' ' + selection.name; |
|
|
|
trigger.appendChild(img); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
@ -86,6 +86,9 @@ export default function Events() { |
|
|
|
This will be included for native and Twemoji emojis, but not for |
|
|
|
custom emojis. |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<code>name</code>: The name of the emoji that was selected. |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<code>url</code>: The URL of the emoji image. This will be included |
|
|
|
for Twemoji and custom emojis. |
|
|
|
|
|
@ -247,6 +247,7 @@ export class EmojiButton { |
|
|
|
if (emoji.custom) { |
|
|
|
this.publicEvents.emit(EMOJI, { |
|
|
|
url: emoji.emoji, |
|
|
|
name: emoji.name, |
|
|
|
custom: true |
|
|
|
}); |
|
|
|
} else if (this.options.style === 'twemoji') { |
|
|
@ -255,13 +256,15 @@ export class EmojiButton { |
|
|
|
callback: (icon, options) => { |
|
|
|
this.publicEvents.emit(EMOJI, { |
|
|
|
url: `${options.base}${options.size}/${icon}${options.ext}`, |
|
|
|
emoji: emoji.emoji |
|
|
|
emoji: emoji.emoji, |
|
|
|
name: emoji.name |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.publicEvents.emit(EMOJI, { |
|
|
|
emoji: emoji.emoji |
|
|
|
emoji: emoji.emoji, |
|
|
|
name: emoji.name |
|
|
|
}); |
|
|
|
} |
|
|
|
if (this.options.autoHide) { |
|
|
|