Skip to content

Commit 3c4da18

Browse files
bennadelbennadel
committed
Add emoji glphy rendering from hex code points demo.
1 parent d16f614 commit 3c4da18

6 files changed

Lines changed: 11046 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Rending Emoji Glyphs Using Hexadecimal CodePoints In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/emoji-glyph-from-hex/)
1314
* [Animating The Content Property Using CSS Keyframes Animation](https://bennadel.github.io/JavaScript-Demos/demos/animate-content-css/)
1415
* [TimeMachine-Inspired Progress Indicator Using CSS Keyframes Animation](https://bennadel.github.io/JavaScript-Demos/demos/timemachine-bar-css/)
1516
* [Calculating Derived Datasets Using Objects As Indexes In AngularJS 1.2.22](https://bennadel.github.io/JavaScript-Demos/demos/derived-data-objects-angularjs/)

‎demos/emoji-glyph-from-hex/demo.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
2+
body {
3+
font-family: sans-serif ;
4+
font-size: 18px ;
5+
line-height: 1.4 ;
6+
}
7+
8+
textarea[ id = "text" ] {
9+
display: block ;
10+
font-size: 26px ;
11+
height: 70px ;
12+
padding: 20px 20px 20px 20px ;
13+
width: 630px ;
14+
}
15+
16+
ul[ id = "emoji" ] {
17+
display: flex ;
18+
flex-wrap: wrap ;
19+
list-style-type: none ;
20+
margin: 20px 0px 20px 0px ;
21+
padding: 0px 0px 0px 0px ;
22+
}
23+
24+
ul[ id = "emoji" ] li {
25+
flex: 0 0 ;
26+
margin: 3px 3px 3px 3px ;
27+
padding: 0px 0px 0px 0px ;
28+
}
29+
30+
ul[ id = "emoji" ] a {
31+
background-color: #fafafa ;
32+
border: 1px solid #333333 ;
33+
border-radius: 3px 3px 3px 3px ;
34+
color: 121212 ;
35+
cursor: pointer ;
36+
display: block ;
37+
padding: 3px 10px 3px 10px ;
38+
user-select: none ;
39+
-moz-user-select: none ;
40+
-webkit-user-select: none ;
41+
white-space: nowrap ;
42+
}
43+
44+
ul[ id = "emoji" ] a[ data-hex *= " " ] {
45+
font-weight: bold ;
46+
}
47+
48+
ul[ id = "emoji" ] a:hover {
49+
background-color: #eaeaea ;
50+
color: #000000 ;
51+
}

‎demos/emoji-glyph-from-hex/index.htm‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
Rending Emoji Glyphs Using Hexadecimal CodePoints In JavaScript
7+
</title>
8+
9+
<link rel="stylesheet" type="text/css" href="./demo.css" />
10+
</head>
11+
<body>
12+
13+
<h1>
14+
Rending Emoji Glyphs Using Hexadecimal CodePoints In JavaScript
15+
</h1>
16+
17+
<textarea id="text"></textarea>
18+
19+
<ul id="emoji">
20+
<li><a data-hex="1F600">grinning face</a></li>
21+
<li><a data-hex="1F603">grinning face with big eyes</a></li>
22+
<li><a data-hex="1F604">grinning face with smiling eyes</a></li>
23+
<li><a data-hex="1F601">beaming face with smiling eyes</a></li>
24+
<li><a data-hex="1F606">grinning squinting face</a></li>
25+
<li><a data-hex="1F605">grinning face with sweat</a></li>
26+
<li><a data-hex="1F923">rolling on the floor laughing</a></li>
27+
<li><a data-hex="1F602">face with tears of joy</a></li>
28+
<li><a data-hex="1F642">slightly smiling face</a></li>
29+
<li><a data-hex="1F643">upside-down face</a></li>
30+
<li><a data-hex="1F609">winking face</a></li>
31+
<li><a data-hex="1F60A">smiling face with smiling eyes</a></li>
32+
<li><a data-hex="1F607">smiling face with halo</a></li>
33+
<li><a data-hex="263A FE0F">smiling face</a></li>
34+
<li><a data-hex="1F62E 200D 1F4A8">face exhaling</a></li>
35+
<li><a data-hex="1F635 200D 1F4AB">face with spiral eyes</a></li>
36+
<li><a data-hex="1F615">confused face</a></li>
37+
<li><a data-hex="1F61F">worried face</a></li>
38+
<li><a data-hex="1F641">slightly frowning face</a></li>
39+
<li><a data-hex="2639 FE0F">frowning face</a></li>
40+
<li><a data-hex="1F62E">face with open mouth</a></li>
41+
<li><a data-hex="1F62F">hushed face</a></li>
42+
<li><a data-hex="1F632">astonished face</a></li>
43+
<li><a data-hex="1F633">flushed face</a></li>
44+
<li><a data-hex="1F97A">pleading face</a></li>
45+
<li><a data-hex="1F626">frowning face with open mouth</a></li>
46+
<li><a data-hex="1F627">anguished face</a></li>
47+
<li><a data-hex="1F628">fearful face</a></li>
48+
<li><a data-hex="1F630">anxious face with sweat</a></li>
49+
<li><a data-hex="1F625">sad but relieved face</a></li>
50+
<li><a data-hex="1F622">crying face</a></li>
51+
<li><a data-hex="1F62D">loudly crying face</a></li>
52+
<li><a data-hex="1F631">face screaming in fear</a></li>
53+
<li><a data-hex="1F616">confounded face</a></li>
54+
<li><a data-hex="1F623">persevering face</a></li>
55+
<li><a data-hex="1F61E">disappointed face</a></li>
56+
<li><a data-hex="1F613">downcast face with sweat</a></li>
57+
<li><a data-hex="1F629">weary face</a></li>
58+
<li><a data-hex="1F62B">tired face</a></li>
59+
<li><a data-hex="1F971">yawning face</a></li>
60+
</ul>
61+
62+
<script type="text/javascript" src="../../vendor/jquery/3.6.0/jquery-3.6.0.min.js"></script>
63+
<script type="text/javascript">
64+
65+
var textarea = $( "#text" );
66+
67+
// Delegate all click events on our special anchor tags.
68+
var emoji = $( "#emoji" )
69+
.on( "click", "a[ data-hex ]", handleClick )
70+
;
71+
72+
// I handle the click on the emoji labels. Each click will place the
73+
// corresponding emoji character at the end of the textarea input.
74+
function handleClick( event ) {
75+
76+
// Each emoji link contains a data attribute with hexadecimal code-points. In
77+
// order to generate our emoji strings, we need to map those hexadecimal
78+
// values onto decimal values.
79+
var hexPoints = $( event.target )
80+
.data( "hex" )
81+
.split( " " )
82+
;
83+
var codePoints = hexPoints.map(
84+
function operator( hex ) {
85+
86+
return( parseInt( hex, 16 ) );
87+
88+
}
89+
);
90+
91+
// Now that we have our code-points, we can generate the emoji glyph using
92+
// the .fromCodePoint() function.
93+
// --
94+
// CAUTION: IE11 does not have .fromCodePoint() method.
95+
var emojiGlyph = String.fromCodePoint.apply( null, codePoints );
96+
97+
textarea.val( textarea.val() + emojiGlyph + " " );
98+
99+
console.group( "Emoji Operation" );
100+
console.log( "Hex Points:", hexPoints )
101+
console.log( "Code Points:", codePoints );
102+
console.log( "Emoji Glyph:", emojiGlyph );
103+
console.groupEnd();
104+
105+
}
106+
107+
</script>
108+
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)