Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display emoji characters instead in images #130

Merged
merged 27 commits into from
Jul 10, 2015
Merged

Display emoji characters instead in images #130

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
b7bc585
Use emoji char instead of sprite
muan Mar 15, 2015
011597a
Refer to emoji using offcial names,
muan Mar 15, 2015
f2f246d
Default to AppleColorEmoji
muan Mar 15, 2015
2053956
Rearranged
muan Mar 15, 2015
5715d44
Fix tests
muan Mar 15, 2015
fc76a2e
Merge branch 'gh-pages' into nativemoji
muan Mar 20, 2015
8281fd4
added categories and sorted ALL the things
notwaldorf Apr 8, 2015
4edaeb3
Remove // comment :question:
muan Apr 9, 2015
2043bc1
Remove duplicated keyword
muan Apr 9, 2015
cd28c7f
It's keycap_ten, not ten
muan Apr 9, 2015
7005750
Add loud_sound(never here) and speaker(was here)
muan Apr 9, 2015
88a9376
Turns out there are 861
muan Apr 9, 2015
f2386c4
Add missing emoji night_with_stars
muan Apr 9, 2015
837e6e2
it's official, there are 862 emojis
muan Apr 9, 2015
22f8743
Merge branch 'notwaldorf-nativemoji' into nativemoji
muan Apr 9, 2015
26c4d5f
Merge branch 'gh-pages' into nativemoji
muan Apr 9, 2015
8f26669
Merge branch 'gh-pages' into nativemoji
muan Apr 9, 2015
2eb7515
Check if has AppleColorEmoji and show sprite emoji instead of native …
muan Jun 21, 2015
2e4360f
:bug: Wrong dir
muan Jun 21, 2015
8701603
Stop using :coffee: for stuff
muan Jun 21, 2015
cb9b2db
Rewrite search in JS
muan Jun 21, 2015
2b49022
Remove :coffee:
muan Jun 21, 2015
e7ed5a6
Merge branch 'gh-pages' into nativemoji
muan Jun 21, 2015
75b9de3
Remove unnecessary keyword
muan Jun 21, 2015
783f093
Update hasAppleColorEmoji.js
muan Jun 21, 2015
491e654
Order and categorize emojis w/ new OSX categories
muan Jul 10, 2015
ab2b8b4
User emoji.muan.co instead of muan.co/emoji
muan Jul 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 11 additions & 5 deletions _assets/stuff.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,18 @@ focusOnSearch = (e) ->

$.getJSON 'emojis.json', (emojis) ->
container = $('.emojis-container')
$.each emojis, (name, keywords) ->
container.append "<li class='result emoji-wrapper' data-clipboard-text=':#{name}:'>
<div class='emoji s_#{name.replace(/\+/,'')}' title='#{name}'>#{name}</div>
<input type='text' class='autofocus plain emoji-code' value=':#{name}:' />
<span class='keywords'>#{name} #{keywords}</span>
Object.keys(emojis).forEach( (key) ->
emoji = emojis[key]
charHTML = if emoji["char"]
"<div class='native-emoji' title='#{key}'>#{emoji["char"]}</div>"
else
"<div class='emoji s_#{key.replace(/\+/,'')}' title='#{key}'>#{key}</div>"
container.append "<li class='result emoji-wrapper' data-clipboard-text=':#{key}:'>
#{charHTML}
<input type='text' class='autofocus plain emoji-code' value=':#{key}:' />
<span class='keywords'>#{key} #{emoji["keywords"]}</span>
</li>"
)
$(document).trigger 'emoji:ready'

$(document).keydown (e) -> focusOnSearch(e)
Expand Down
17 changes: 15 additions & 2 deletions _assets/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@ ul {
font-size: 0;
}

.emoji {
.emoji,
.native-emoji {
position: absolute;
margin-top: -3px;
}
Expand Down Expand Up @@ -192,13 +193,25 @@ ul, li {
}

.alert { font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: none; position: fixed; margin: auto; left: 50%; width: 200px; margin-left: -100px; top: 10px; background: rgba(10,50,90,0.7); color: #fff; font-weight: bold; padding: 7px; text-align: center; border-radius: 5px; }

.native-emoji,
.emoji {
@include inline-block;
cursor: pointer;
}

.native-emoji {
font-size: 19px;
padding: 10px 2px;
font-family: AppleColorEmoji;
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had to add this because some are not being rendered as colored emoji. For example: ☺️
but seems that obviously it won't work on windows and others, will probably need to test it out and find a solution for each OS :/

}

.emoji {
text-indent: -9999px;
overflow: hidden;
@include transform(scale(0.8));
cursor: pointer;
}

[data-clipboard-text] { cursor: pointer; }

.no-results {
Expand Down
4,324 changes: 3,440 additions & 884 deletions emojis.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@
<a href="#photo" class="mojigroup button small">
<div class="emoji s_tokyo_tower" title="photo"></div>
</a>
<a href="#ghonly" class="mojigroup button small">
<div class="emoji s_octocat" title="ghonly"></div>
<a href="#custom_" class="mojigroup button small">
<div class="emoji s_octocat" title="custom_"></div>
</a>
</header>

Expand Down
7 changes: 5 additions & 2 deletions javascripts/stuff.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 12 additions & 3 deletions stylesheets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,8 @@ ul {
white-space: nowrap; }
.emoji-wrapper .keywords {
font-size: 0; }
.emoji-wrapper .emoji {
.emoji-wrapper .emoji,
.emoji-wrapper .native-emoji {
position: absolute;
margin-top: -3px; }
.emoji-wrapper input {
Expand Down Expand Up @@ -210,20 +211,28 @@ ul, li {
text-align: center;
border-radius: 5px; }

.native-emoji,
.emoji {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
cursor: pointer; }

.native-emoji {
font-size: 19px;
padding: 10px 2px;
font-family: AppleColorEmoji; }

.emoji {
text-indent: -9999px;
overflow: hidden;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
cursor: pointer; }
transform: scale(0.8); }

[data-clipboard-text] {
cursor: pointer; }
Expand Down
24 changes: 9 additions & 15 deletions test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
var fs = require('fs')
var rawData = fs.read('emojis.json').toString()
var keys = rawData.match(/"(.+)":/g).map(function(key){return key.replace(/"|:/g,'')})
var buildFailed = false
var passed = function() { console.log("\x1B[92mPASSED\x1B[0m\n") }
var failed = function() {
Expand All @@ -22,6 +21,7 @@ console.log("\nTEST: Correct JSON format")

try {
var data = JSON.parse(fs.read('emojis.json'))
var keys = Object.keys(data)
passed()
} catch(e) {
console.log('Invalid JSON format. See the CONTRIBUTING doc for reference.')
Expand All @@ -32,8 +32,8 @@ try {
//
console.log("TEST: Correct number of emojis")

if(keys.length !== 884) {
console.log("There are 884 emojis, but emojis.json has " + keys.length + " entries.")
if(keys.length !== 860) {
console.log("There are 860 emojis, but emojis.json has " + keys.length + " entries.")
failed()
} else {
passed()
Expand Down Expand Up @@ -69,13 +69,13 @@ var unnecessities = []
var unnecessitiesInKeywords = []

keys.forEach(function(key) {
data[key].forEach(function(keyword) {
data[key]["keywords"].forEach(function(keyword) {
if(key.match(keyword)) {
unnecessities.push([key, keyword])
}

var otherKeywords = data[key].slice()
otherKeywords.splice(data[key].indexOf(keyword), 1)
var otherKeywords = data[key]["keywords"].slice()
otherKeywords.splice(data[key]["keywords"].indexOf(keyword), 1)
otherKeywords.forEach(function(otherKeyword) {
if(otherKeyword.match(keyword)) {
unnecessitiesInKeywords.push([otherKeyword, keyword, key])
Expand All @@ -102,18 +102,12 @@ console.log("TEST: Line format")

var offenses = []
var lines = rawData.replace(/^{\n([\s\S]*)\n}\n$/, '$1').split("\n")
var baseRegex = '^ "[\\w+-]+": \\["[\\w- ]+"(, "[\\w- ]+")*\\]'
var baseRegex = '^ "keywords": \\["[\\w- ]+"(, "[\\w- ]+")*\\]'
var contentRegex = new RegExp(baseRegex + ',$')
var lastLineRegex = new RegExp(baseRegex + '$')
lines.forEach(function(line, index) {
if(index === lines.length - 1) {
if(!line.match(lastLineRegex)) {
offenses.push(index + 2)
}
} else {
if(!line.match(contentRegex)) {
offenses.push(index + 2)
}
if(line.match(/keywords/) && !line.match(contentRegex)) {
offenses.push(index + 2)
}
})

Expand Down