Skip to content

Instantly share code, notes, and snippets.

@dofy

dofy/emoticon-kit.html

Last active August 29, 2015 14:01
Show Gist options
  • Save dofy/baac0d1f7e50315b40ac to your computer and use it in GitHub Desktop.
Save dofy/baac0d1f7e50315b40ac to your computer and use it in GitHub Desktop.
Download ZIP
Emoticon Kit
Raw
emoticon-kit.html
<!doctype html>
<html>
<head>
<title> Emoticon Kit </title>
<meta charset="UTF-8" />
<meta name="author" content="Seven Yu" />
<meta name="keywords" content="颜文字 emoticon" />
<meta name="description" content="Emoticon Kit" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
<link rel="stylesheet" href="style.css" />
<script src="emoticon.js" ></script>
</head>
<body>
<h1 >Emoticon Kit</h1>
<p ><input id="result" type="text" /></p>
<p ><input id="create" type="button" value=" ~ ~ C.R.E.A.T.E ~ ~ " /></p>
<p class="copy" >
copyright &copy; 2012 <a href="http://phpz.org/">phpz.org</a> <br />
powered by <a href="http://twitter.com/dofy/">Dofy</a> &amp;
<a href="http://twitter.com/ag108lau/">Angela</a> <br />
┻━┻︵╰(‵□′)╯︵┻━┻ <br />
</p>
</body>
</html>
<script >
Emoticon.init('result', 'create');
</script>
Raw
emoticon.js
/**
* Emoticon Kit
* Author: Seven Yu
* Version: 2.0.1
* URL: http://labs.phpz.org/
*/
(function(win, doc){
var eyeCount, faceCount, lArmCount, rArmCount, mouseCount, plusCount,
assets = {
lEye: ['￣', '—', '＿', '﹁', '^', '~', '=', '@', '·', '‵', '>', '→',
'〒', '┬', 'T', '゜', '。', '●', '◎', '⊙', '○', '╯', '︶',
'〃', 'Φ', 'Θ', '+', 'x', '$', '≧', 'ｕ', 'Ｕ', '→', '←'],
rEye: ['￣', '—', '＿', '﹁', '^', '~', '=', '@', '·', '′', '<', '←',
'〒', '┬', 'T', '゜', '。', '●', '◎', '⊙', '○', '╰', '︶',
'〃', 'Φ', 'Θ', '+', 'x', '$', '≦', 'ｕ', 'Ｕ', '→', '←'],
lFace: ['(', '[', '{', '|'],
rFace: [')', ']', '}', '|'],
mouse: [' ', 'C', 'c', 't', '(○○)', '(工)', '-', 'ゝ', '(··)', '—', '-',
'_', '。', '，', '.', 'o', 'O', '3', 'ε', 'ｪ', 'v', 'u', '_', 'ω',
'Д', '﹏', 'ヘ', '︶', '︿', '▽', '△', '∀', '<>', '○', 'ロ', '□',
'Ｑ', '＠', '皿', '◇', '︹', '＾', '﹌', 'c', 'ｰ'],
lArm: ['╭∩╮', 'n', 'm', 'v', 'y', 'w', '<', 'o', 'O', '○', '~', '凸', 'ψ',
'=', '—', '～', '︿', 'b', 'ㄟ', '╰', '╭', '\\', '┌', '┗', '┑', '┍'],
rArm: ['╭∩╮', 'n', 'm', 'v', 'y', 'w', '>', 'o', 'O', '○', '~', '凸', 'ψ',
'=', '—', '～', '︿', 'd', 'ㄏ', '╮', '╯', '/', '┘', '┛', '┍', '┑',
'☞', 'ﾉ', 'つ', 'σ', 'ゞ', 'ﾉ', 'っ', 'づ', '彡', '↘', '↗'],
plus: ['\'\'', 'b', '||', '#', '╬', '＊', '//', ';;', '::', 'メ', '〆', 'z']
},
randInd = function(count, probability)
{
var ind = Math.floor(count / probability * Math.random());
debug([count, ind, probability]);
return ind >= count ? -1 : ind;
},
debug = function(msg)
{
console.log(msg);
},
Emoticon = {
init: function(resultId, buttonId)
{
debug('--== Hello my friend :D ==--');
var result = doc.getElementById(resultId),
button = doc.getElementById(buttonId),
clickHandler = function(evt)
{
result.value = Emoticon.create();
},
focusHandler = function(evt)
{
result.select();
};
eyeCount = assets.lEye.length;
faceCount = assets.lFace.length;
lArmCount = assets.lArm.length;
rArmCount = assets.rArm.length;
mouseCount = assets.mouse.length;
plusCount = assets.plus.length;
debug(assets.lEye.join());
debug(assets.rEye.join());
debug(assets.lArm.join());
debug(assets.rArm.join());
debug(assets.mouse.join());
debug(assets.lFace.join());
debug(assets.rFace.join());
debug(assets.plus.join());
if(window.attachEvent)
{
result.attachEvent('onclick', focusHandler);
button.attachEvent('onclick', clickHandler);
}
else
{
result.addEventListener('click', focusHandler);
button.addEventListener('click', clickHandler);
}
// first run ...
clickHandler();
},
create: function()
{
debug('--------------------------------------');
var lArm, lFace, lEye, mouse, rEye,
rFace, rArm, plus, result = [],
faceInd = randInd(faceCount, 0.7),
eyeInd = randInd(eyeCount, 1.0),
mouseInd = randInd(mouseCount, 0.6),
lArmInd = randInd(lArmCount, 0.5),
rArmInd = randInd(rArmCount, 0.5),
plusInd = randInd(plusCount, 0.3),
getItem = function (arr, ind)
{
return ind < 0 ? '' : arr[ind];
};
result.push(getItem(assets.lArm, lArmInd));
result.push(getItem(assets.lFace, faceInd));
result.push(getItem(assets.lEye, eyeInd));
result.push(getItem(assets.mouse, mouseInd));
result.push(getItem(assets.rEye, eyeInd));
result.push(getItem(assets.rFace, faceInd));
result.push(getItem(assets.plus, plusInd));
result.push(getItem(assets.rArm, rArmInd));
return result.join('');
}
};
win.Emoticon = Emoticon;
})(window, document);
Raw
style.css
body, input {
text-align: center;
font-family: "consolas";
}
input {
padding: 5px;
font-size: 20px;
}
p {
padding: 17px;
}
.copy {
margin-top: 70px;
font-size: 12px;
color: #ccc;
}
.copy a {
color: #666;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment