206 lines
7.1 KiB
HTML
206 lines
7.1 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
|
||
|
|
<title>At.js</title>
|
||
|
|
<link rel="stylesheet" href="dist/css/jquery.atwho.css" />
|
||
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
|
||
|
|
<script type="text/javascript" src="https://ichord.github.io/Caret.js/src/jquery.caret.js"></script>
|
||
|
|
<!-- <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script> -->
|
||
|
|
<!-- <script type="text/javascript" src="bower_components/Caret.js/dist/jquery.caret.js"></script> -->
|
||
|
|
<script type="text/javascript" src="dist/js/jquery.atwho.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function(){
|
||
|
|
$.fn.atwho.debug = true
|
||
|
|
var emojis = [
|
||
|
|
"smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
|
||
|
|
"a", "ab", "airplane", "alien", "ambulance", "angel", "anger", "angry",
|
||
|
|
"arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
|
||
|
|
"arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right",
|
||
|
|
"art", "astonished", "atm", "b", "baby", "baby_chick", "baby_symbol",
|
||
|
|
"balloon", "bamboo", "bank", "barber", "baseball", "basketball", "bath",
|
||
|
|
"bear", "beer", "beers", "beginner", "bell", "bento", "bike", "bikini",
|
||
|
|
"bird", "birthday", "black_square", "blue_car", "blue_heart", "blush",
|
||
|
|
"boar", "boat", "bomb", "book", "boot", "bouquet", "bow", "bowtie",
|
||
|
|
"boy", "bread", "briefcase", "broken_heart", "bug", "bulb",
|
||
|
|
"person_with_blond_hair", "phone", "pig", "pill", "pisces", "plus1",
|
||
|
|
"point_down", "point_left", "point_right", "point_up", "point_up_2",
|
||
|
|
"police_car", "poop", "post_office", "postbox", "pray", "princess",
|
||
|
|
"punch", "purple_heart", "question", "rabbit", "racehorse", "radio",
|
||
|
|
"up", "us", "v", "vhs", "vibration_mode", "virgo", "vs", "walking",
|
||
|
|
"warning", "watermelon", "wave", "wc", "wedding", "whale", "wheelchair",
|
||
|
|
"white_square", "wind_chime", "wink", "wink2", "wolf", "woman",
|
||
|
|
"womans_hat", "womens", "x", "yellow_heart", "zap", "zzz", "+1",
|
||
|
|
"-1"
|
||
|
|
]
|
||
|
|
var jeremy = decodeURI("J%C3%A9r%C3%A9my") // Jérémy
|
||
|
|
var names = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","你好","你你你", jeremy, "가"];
|
||
|
|
|
||
|
|
var names = $.map(names,function(value,i) {
|
||
|
|
return {'id':i,'name':value,'email':value+"@email.com"};
|
||
|
|
});
|
||
|
|
var emojis = $.map(emojis, function(value, i) {return {key: value, name:value}});
|
||
|
|
|
||
|
|
var at_config = {
|
||
|
|
at: "@",
|
||
|
|
data: names,
|
||
|
|
headerTpl: '<div class="atwho-header">Member List<small>↑ ↓ </small></div>',
|
||
|
|
insertTpl: '${name}',
|
||
|
|
displayTpl: "<li>${name} <small>${email}</small></li>",
|
||
|
|
limit: 200
|
||
|
|
}
|
||
|
|
var emoji_config = {
|
||
|
|
at: ":",
|
||
|
|
data: emojis,
|
||
|
|
displayTpl: "<li>${name} <img src='https://assets-cdn.github.com/images/icons/emoji/${key}.png' height='20' width='20' /></li>",
|
||
|
|
insertTpl: ':${key}:',
|
||
|
|
delay: 400
|
||
|
|
}
|
||
|
|
$inputor = $('#inputor').atwho(at_config).atwho(emoji_config);
|
||
|
|
$inputor.caret('pos', 47);
|
||
|
|
$inputor.focus().atwho('run');
|
||
|
|
|
||
|
|
emoji_config.insertTpl = "<img src='https://assets-cdn.github.com/images/icons/emoji/${name}.png' height='20' width='20' />"
|
||
|
|
$('#editable').atwho(at_config).atwho(emoji_config);
|
||
|
|
|
||
|
|
ifr = $('#iframe1')[0]
|
||
|
|
doc = ifr.contentDocument || iframe.contentWindow.document
|
||
|
|
if ((ifrBody = doc.body) == null) {
|
||
|
|
// For IE
|
||
|
|
doc.write("<body></body>")
|
||
|
|
ifrBody = doc.body
|
||
|
|
}
|
||
|
|
ifrBody.contentEditable = true
|
||
|
|
ifrBody.id = 'ifrBody'
|
||
|
|
ifrBody.innerHTML = 'For <strong>WYSIWYG</strong> which using <strong>iframe</strong> such as <strong>ckeditor</strong>'
|
||
|
|
$(ifrBody).atwho('setIframe', ifr).atwho(at_config)
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<!--link href='http://fonts.googleapis.com/css?family=Dosis:400,700|Bubblegum+Sans|Overlock:400,900|PT+Sans:400,700|PT+Sans+Narrow:400,700|Magra|Asap:400,700|Share:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' -->
|
||
|
|
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
html, body {
|
||
|
|
background:#F9F9F9;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
font: 14px/1.6 "Lucida Grande", "Helvetica", sans-serif;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
h1,h2,h3,h4 {
|
||
|
|
font-family: 'PT Sans', sans-serif;
|
||
|
|
line-height: 40px;
|
||
|
|
color: inherit;
|
||
|
|
font-weight: bold;
|
||
|
|
margin: 10px 0;
|
||
|
|
text-rendering: optimizelegibility;
|
||
|
|
}
|
||
|
|
h2,h3 {
|
||
|
|
color: gray;
|
||
|
|
}
|
||
|
|
strong {
|
||
|
|
color: #424242;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #4183C4;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
.wrapper {
|
||
|
|
width: 750px;
|
||
|
|
padding: 20px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
header {
|
||
|
|
margin-top:70px;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
}
|
||
|
|
header h1 {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 75px;
|
||
|
|
}
|
||
|
|
h1 i {
|
||
|
|
color: rgb(182, 180, 180);
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inputor {
|
||
|
|
height: 160px;
|
||
|
|
width: 90%;
|
||
|
|
border: 1px solid #dadada;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 5px 8px;
|
||
|
|
outline: 0 none;
|
||
|
|
margin: 10px 0;
|
||
|
|
background: white;
|
||
|
|
font-size: inherit;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
.inputor:focus {
|
||
|
|
border: 1px solid rgb(6, 150, 247);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.doc {
|
||
|
|
list-style:none;
|
||
|
|
}
|
||
|
|
ul.doc li {
|
||
|
|
display:inline-block;
|
||
|
|
margin: 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
margin: 30px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.github {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container wrapper">
|
||
|
|
<!-- <a id="github" href="https://github.com/ichord/At.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:999" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> -->
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>At<i>.js</i></h1>
|
||
|
|
</header>
|
||
|
|
<div id="main">
|
||
|
|
<div>
|
||
|
|
<textarea id="inputor" class="inputor">At.js, a github-like autocomplete library :s</textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="editable" class="inputor" contentEditable="true">
|
||
|
|
<p>
|
||
|
|
<b>And!!</b> it support <b style="font-size: 20px">ContentEditable</b> mode too!!
|
||
|
|
<img src="https://assets-cdn.github.com/images/icons/emoji/smile.png" height="20" width="20">
|
||
|
|
<img src="https://assets-cdn.github.com/images/icons/emoji/smiley.png" height="20" width="20">
|
||
|
|
<img src="https://assets-cdn.github.com/images/icons/emoji/coffee.png" height="20" width="20">
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<b>Try here now!</b><img src="https://assets-cdn.github.com/images/icons/emoji/point_right.png" height="20" width="20">
|
||
|
|
<b>:h</b>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inputor" style="overflow: hidden">
|
||
|
|
<iframe src="" id="iframe1" style="width: 100%; height: 100%; border: 0px;"></iframe>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<h2>
|
||
|
|
-> <a class="github" href="https://github.com/ichord/At.js">Fork me on GitHub!</a>
|
||
|
|
</h2>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|