treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify emojis `background-size` and `background-position`

release
Etienne Lemay 2016-07-06 11:25:13 -04:00
parent bcb4e204bc
commit f202a0282e
1 changed files with 5 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/emoji.js
View File

@ -1,8 +1,7 @@
import React from 'react' import React from 'react'
import data from '../../data' import data from '../../data'
const SHEET_SIZE = 2624 const SHEET_COLUMNS = 41
const EMOJI_SIZE = 64
const SKINS = [ const SKINS = [
'1F3FA', '1F3FB', '1F3FC', '1F3FA', '1F3FB', '1F3FC',
'1F3FD', '1F3FE', '1F3FF', '1F3FD', '1F3FE', '1F3FF',
@ -54,20 +53,11 @@ export default class Emoji extends React.Component {
return emojiData return emojiData
} }
getSheetSize() {
var { size } = this.props,
sheetSize = SHEET_SIZE * size / EMOJI_SIZE
return `${sheetSize}px ${sheetSize}px`
}
getPosition(emojiData) { getPosition(emojiData) {
var { size } = this.props, var { sheet_x, sheet_y } = emojiData,
{ sheet_x, sheet_y } = emojiData, multiply = 100 / (SHEET_COLUMNS - 1)
x = sheet_x * size,
y = sheet_y * size
return `-${x}px -${y}px` return `${multiply * sheet_x}% ${multiply * sheet_y}%`
} }
getNative(emojiData) { getNative(emojiData) {
@ -117,7 +107,7 @@ export default class Emoji extends React.Component {
height: size, height: size,
display: 'inline-block', display: 'inline-block',
backgroundImage: `url(${sheetURL})`, backgroundImage: `url(${sheetURL})`,
backgroundSize: this.getSheetSize(), backgroundSize: `${100 * SHEET_COLUMNS}%`,
backgroundPosition: this.getPosition(emojiData), backgroundPosition: this.getPosition(emojiData),
}}> }}>
</span> </span>