A Pen by Isaac Dettman on CodePen.
Created
May 16, 2019 04:28
-
-
Save idettman/570a588465d03cb92feccfc671d04b2b to your computer and use it in GitHub Desktop.
eJjoqW
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="emojiDisplay" contenteditable="true"></div> | |
| <div id="emoticonSelector"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var emoji = { | |
| path: '../images/lib/smileyEx/facebook/', | |
| list: [ | |
| { | |
| code: '3:)', | |
| test: /3\:\)/g, | |
| image: 'devil.png' | |
| }, | |
| { | |
| code: 'O:)', | |
| test: /O\:\)/g, | |
| image: 'angel.png' | |
| }, | |
| { | |
| code: ':)', | |
| test: /\:\)/g, | |
| image: 'smiley-face.png' | |
| }, | |
| { | |
| code: ':D', | |
| test: /\:D/g, | |
| image: 'big-smile.png' | |
| }, | |
| { | |
| code: '>:(', | |
| test: /\>\:\(/g, | |
| image: 'grumpy.png' | |
| }, | |
| { | |
| code: ':(', | |
| test: /\:\(/g, | |
| image: 'frown.png' | |
| }, | |
| { | |
| code: ":'(", | |
| test: /\:\'\(/g, | |
| image: 'cry.png' | |
| }, | |
| { | |
| code: ':P', | |
| test: /\:P/g, | |
| image: 'tongue.png' | |
| }, | |
| { | |
| code: 'o.O', | |
| test: /o\.O/g, | |
| image: 'confused.png' | |
| }, | |
| { | |
| code: ';\)', | |
| test: /\;\\\)/g, | |
| image: 'wink.png' | |
| }, | |
| { | |
| code: '>:O', | |
| test: /\>\:O/g, | |
| image: 'angry.png' | |
| }, | |
| { | |
| code: ':O', | |
| test: /\:O/g, | |
| image: 'surprised.png' | |
| }, | |
| { | |
| code: '-_-', | |
| test: /\-\_\-/g, | |
| image: 'squinting.png' | |
| }, | |
| { | |
| code: ':*', | |
| test: /\:\*/g, | |
| image: 'kiss.png' | |
| }, | |
| { | |
| code: '<3', | |
| test: /\<3/g, | |
| image: 'heart.png' | |
| }, | |
| { | |
| code: '^_^', | |
| test: /\^\_\^/g, | |
| image: 'kiki.png' | |
| }, | |
| { | |
| code: '8-)', | |
| test: /8\-\)/g, | |
| image: 'glasses.png' | |
| }, | |
| { | |
| code: '8|', | |
| test: /8\|/g, | |
| image: 'sunglasses.png' | |
| }, | |
| { | |
| code: '(^^^)', | |
| test: /\(\^\^\^\)/g, | |
| image: 'shark.png' | |
| }, | |
| { | |
| code: ':|]', | |
| test: /\:\|\]/g, | |
| image: 'robot.gif' | |
| }, | |
| { | |
| code: ':v', | |
| test: /\:v/g, | |
| image: 'pacman.png' | |
| }, | |
| { | |
| code: ':/', | |
| test: /\:\//g, | |
| image: 'unsure.png' | |
| }, | |
| { | |
| code: ':3', | |
| test: /\:3/g, | |
| image: 'curly.png' | |
| }, | |
| { | |
| code: '(y)', | |
| test: /\(y\)/g, | |
| image: 'thumb-up.png' | |
| }, | |
| { | |
| code: ':poop:', | |
| test: /\:poop\:/g, | |
| image: 'poop.png' | |
| } | |
| ], | |
| emojiDisplay: null, | |
| emoticonSelector: null, | |
| init: function(textContainer, emoticonSelectorContainer) | |
| { | |
| this.emojiDisplay = textContainer; | |
| this.emoticonSelector = emoticonSelectorContainer; | |
| document.execCommand("enableObjectResizing", false, false); | |
| this.createEmoticonSelector(); | |
| }, | |
| createEmoticonSelector: function createEmoticonSelector() | |
| { | |
| this.list.forEach(function(element) | |
| { | |
| this.emoticonSelector.appendChild(this.createImage(this.path + element.image)); | |
| }, this); | |
| this.emoticonSelector.onclick = this.emoticonSelectorClickHandler; | |
| }, | |
| createImage: function createImage(src) | |
| { | |
| var img = document.createElement('img'); | |
| img.src = src; | |
| img.className = 'unselectable'; | |
| return img; | |
| }, | |
| emoticonSelectorClickHandler: function emoticonSelectorClickHandler(event) | |
| { | |
| var path = event.target.src.split('/'); | |
| for (var i = 0, listItem; i < emoji.list.length; i++) | |
| { | |
| listItem = emoji.list[i]; | |
| if (listItem.image === path[path.length - 1]) | |
| { | |
| var img = document.createElement('img'); | |
| img.src = emoji.path + listItem.image; | |
| img.style.userSelect = 'none'; | |
| img.style.MozUserSelect = 'none'; | |
| emoji.insertNodeOverSelection(img, emojiDisplay); | |
| } | |
| } | |
| }, | |
| parseTextEmoticons: function(text) | |
| { | |
| var textCopy = text; | |
| for (var i = 0; i < emoji.list.length; i++) | |
| { | |
| textCopy = textCopy.replace(emoji.list[i].test, '<img src="' + (emoji.path + emoji.list[i].image) + '">'); | |
| } | |
| return textCopy; | |
| }, | |
| isOrContainsNode: function isOrContainsNode(ancestor, descendant) | |
| { | |
| var node = descendant; | |
| while (node) | |
| { | |
| if (node === ancestor) | |
| { | |
| return true; | |
| } | |
| node = node.parentNode; | |
| } | |
| return false; | |
| }, | |
| insertNodeOverSelection: function insertNodeOverSelection(node, containerNode) | |
| { | |
| var sel, range, html; | |
| if (window.getSelection) | |
| { | |
| sel = window.getSelection(); | |
| if (sel.getRangeAt && sel.rangeCount) | |
| { | |
| range = sel.getRangeAt(0); | |
| if (this.isOrContainsNode(containerNode, range.commonAncestorContainer)) | |
| { | |
| range.deleteContents(); | |
| range.insertNode(node); | |
| } | |
| else | |
| { | |
| containerNode.appendChild(node); | |
| } | |
| } | |
| } | |
| else if (document.selection && document.selection.createRange) | |
| { | |
| range = document.selection.createRange(); | |
| if (this.isOrContainsNode(containerNode, range.parentElement())) | |
| { | |
| html = (node.nodeType == 3) ? node.data : node.outerHTML; | |
| range.pasteHTML(html); | |
| } | |
| else | |
| { | |
| containerNode.appendChild(node); | |
| } | |
| } | |
| } | |
| }; | |
| emoji.init(document.getElementById('emojiDisplay'), document.getElementById('emoticonSelector')); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #emojiDisplay | |
| width: 400px | |
| min-height: 100px | |
| border: 1px solid black |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment