wdt-emoji-bundle
Version:
Slack like emoji selector with apple, twitter, google, emojione, facebook, messenger and custom emoji support.
263 lines (223 loc) • 11.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>wdt-emoji-bundle Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="../wdt-emoji-bundle.css"/>
<script type="text/javascript" src="../emoji.min.js"></script>
<script type="text/javascript" src="../wdt-emoji-bundle.js"></script>
<style type="text/css">
body {
font-family: 'Open Sans', sans-serif;
overflow-y: scroll;
}
label {
font-weight: bold;
}
.label-block {
display: block;
text-align: center;
}
#fullname-output,
#comment-output,
#contenteditable-output,
#contenteditable2-output {
min-height: 43px;
padding: 10px;
background-color: rgba(255, 255, 0, 0.14);
}
#head-title .emoji-outer {
width: 64px;
height: 64px;
}
.form-control {
padding-right: 27px;
}
div.form-control {
height: auto;
}
.todo-list li {
line-height: 26px;
}
.bottom-text .emoji-sizer {
width: 14px;
height: 14px;
}
.mobile-notice {
background: #ffff00;
padding: 10px;
border-radius: 20px
}
.set-changers {
margin: 20px 0;
}
h4 {
line-height: 1.5em;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-6 col-md-push-3 col-xs-12" style="padding-top: 10px">
<h2 id="head-title" class="header text-center">wdt-emoji-bundle <br><br> :lollipop:</h2>
<h4 class="text-center">Slack like emoji picker with <br> <strong>apple</strong>, <strong>twitter</strong>, <strong>google</strong>, <strong>emojione</strong>, <strong>facebook</strong>, <strong>messenger</strong> <br> support.</h4>
<p class="text-center visible-xs visible-sm hidden-md hidden-lg mobile-notice">
<strong> Preferably emoji bundle's pickers disabled for small screens. <br> You can use your native keyboard's picker.</strong>
</p>
<div class="text-center set-changers">
<label>Change emoji set</label>
<div>
<a class="btn btn-default change-emoji-type" data-emoji-type="apple" href="#apple">Apple</a>
<a class="btn btn-default change-emoji-type" data-emoji-type="google" href="#google">Google</a>
<a class="btn btn-default change-emoji-type" data-emoji-type="twitter" href="#twitter">Twitter</a>
<a class="btn btn-default change-emoji-type" data-emoji-type="emojione" href="#emojione">Emojione</a>
<a class="btn btn-default change-emoji-type" data-emoji-type="facebook" href="#facebook">Facebook</a>
<a class="btn btn-default change-emoji-type" data-emoji-type="messenger" href="#messenger">Messenger</a>
</div>
</div>
<form>
<div class="form-group">
<label>input::text</label>
<input id="fullname" type="text" value=";) Hey! check :heart_eyes: this. :dog: :cat: :hamster: " class="form-control wdt-emoji-bundle-enabled wdt-emoji-open-on-colon">
</div>
<div class="form-group">
<label class="label-block">↓</label>
<div id="fullname-output"></div>
</div>
<hr>
<div class="form-group">
<label>textarea</label>
<textarea id="comment" name="comment" class="form-control wdt-emoji-bundle-enabled wdt-emoji-open-on-colon" rows="3">;) Hey! check :heart_eyes: this. :dog: :cat: :hamster: </textarea>
</div>
<div class="form-group">
<label class="label-block">↓</label>
<div id="comment-output"></div>
</div>
<hr>
<div class="form-group">
<label>div::contenteditable</label>
<div id="contenteditable" class="form-control wdt-emoji-bundle-enabled" contentEditable="true">;) <strong>Hey!</strong> check :heart_eyes: this. :dog: :cat: :hamster:</div>
</div>
<div class="form-group">
<label class="label-block">↓</label>
<div id="contenteditable-output"></div>
</div>
<hr>
<div class="form-group">
<label>input::text w/ Open on colon</label>
<input id="open-on-colon" type="text" value="Start typing and type sm after semicolon :" class="form-control wdt-emoji-bundle-enabled wdt-emoji-open-on-colon">
</div>
<hr>
<div class="form-group">
<label>TODO:</label>
<div>
<ul class="todo-list">
<li>Better documentation. :neutral_face:</li>
<li>Responsive Improvements. :wink:</li>
<li>Better popup positioning :+1:</li>
<li>Open on colon support for contenteditables :candy:</li>
<li>Frequently used emoji list with localstorage and/or API. :robot_face:</li>
<li>Provide more events; open, close, pickeropen, pickerclose etc. :tada: </li>
<li>Custom emoji support. :wine_glass:</li>
<li>Skin color support for apple/ios. :lion_face:</li>
<li>Better contenteditable support, WYSIWYG? :nerd_face:</li>
<li>Check browser compatibilities. :joystick:</li>
</ul>
</div>
</div>
<div class="form-group text-center bottom-text">
<br>
<p>I :heart: opensource.</p>
</div>
</form>
</div>
</div>
</div>
<div class="wdt-emoji-popup">
<a href="#" class="wdt-emoji-popup-mobile-closer"> × </a>
<div class="wdt-emoji-menu-content">
<div id="wdt-emoji-menu-header">
<a class="wdt-emoji-tab active" data-group-name="Recent"></a>
<a class="wdt-emoji-tab" data-group-name="People"></a>
<a class="wdt-emoji-tab" data-group-name="Nature"></a>
<a class="wdt-emoji-tab" data-group-name="Foods"></a>
<a class="wdt-emoji-tab" data-group-name="Activity"></a>
<a class="wdt-emoji-tab" data-group-name="Places"></a>
<a class="wdt-emoji-tab" data-group-name="Objects"></a>
<a class="wdt-emoji-tab" data-group-name="Symbols"></a>
<a class="wdt-emoji-tab" data-group-name="Flags"></a>
<a class="wdt-emoji-tab" data-group-name="Custom"></a>
</div>
<div class="wdt-emoji-scroll-wrapper">
<div id="wdt-emoji-menu-items">
<input id="wdt-emoji-search" type="text" placeholder="Search">
<h3 id="wdt-emoji-search-result-title">Search Results</h3>
<div class="wdt-emoji-sections"></div>
<div id="wdt-emoji-no-result">No emoji found</div>
</div>
</div>
<div id="wdt-emoji-footer">
<div id="wdt-emoji-preview">
<span id="wdt-emoji-preview-img"></span>
<div id="wdt-emoji-preview-text">
<span id="wdt-emoji-preview-name"></span><br>
<span id="wdt-emoji-preview-aliases"></span>
</div>
</div>
<div id="wdt-emoji-preview-bundle">
<span>WDT Emoji Bundle</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function () {
wdtEmojiBundle.defaults.emojiSheets = {
'apple' : '../sheets/sheet_apple_64_indexed_128.png',
'google' : '../sheets/sheet_google_64_indexed_128.png',
'twitter' : '../sheets/sheet_twitter_64_indexed_128.png',
'emojione' : '../sheets/sheet_emojione_64_indexed_128.png',
'facebook' : '../sheets/sheet_facebook_64_indexed_128.png',
'messenger': '../sheets/sheet_messenger_64_indexed_128.png'
};
wdtEmojiBundle.init('.wdt-emoji-bundle-enabled');
wdtEmojiBundle.on('afterSelect', function (a, b) {
console.log('afterSelect', a, b);
});
var typeChangers = document.querySelectorAll('.change-emoji-type');
for (var i = 0; i < typeChangers.length; i++) {
typeChangers[i].addEventListener('click', function () {
wdtEmojiBundle.changeType(this.dataset.emojiType);
return false;
});
}
var ev = document.createEvent('Event');
ev.initEvent('input', true, true);
// ------------------------------------------------------
document.getElementById('fullname').addEventListener('input', function () {
document.getElementById('fullname-output').innerHTML = wdtEmojiBundle.render(this.value);
});
document.getElementById('fullname').dispatchEvent(ev);
// ------------------------------------------------------
// ------------------------------------------------------
document.getElementById('comment').addEventListener('input', function () {
document.getElementById('comment-output').innerHTML = wdtEmojiBundle.render(this.value);
});
document.getElementById('comment').dispatchEvent(ev);
// ------------------------------------------------------
document.getElementById('contenteditable').addEventListener('input', function () {
document.getElementById('contenteditable-output').innerHTML = wdtEmojiBundle.render(this.innerHTML);
});
document.getElementById('contenteditable').dispatchEvent(ev);
document.getElementById('head-title').innerHTML = wdtEmojiBundle.render(document.getElementById('head-title').innerHTML);
document.querySelector('.todo-list').innerHTML = wdtEmojiBundle.render(document.querySelector('.todo-list').innerHTML);
document.querySelector('.bottom-text').innerHTML = wdtEmojiBundle.render(document.querySelector('.bottom-text').innerHTML);
})();
</script>
</body>
</html>