61 lines
3.4 KiB
HTML
61 lines
3.4 KiB
HTML
<!DOCTYPE html><html lang="en"><head><!-- Google Tag Manager--><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-568JL5K');</script><meta charset="utf-8"><title>Textcomplete</title><link rel="stylesheet" type="text/css" href="./main.css"><script src="./main.js"></script><script>var emojis = {}
|
|
/**
|
|
* @callback GitHubEmojiAPICallback
|
|
* @param {Object} resp
|
|
* @prop {Object} resp.meta
|
|
* @prop {Object} resp.data
|
|
* @see https://developer.github.com/v3/emojis/
|
|
* @example
|
|
* callback({
|
|
* "meta": {
|
|
* "Content-Type": "application/javascript; charset=utf-8",
|
|
* ...
|
|
* },
|
|
* "data": {
|
|
* "+1": "https://assets-cdn.github.com/images/icons/emoji/unicode/1f44d.png?v5",
|
|
* ...
|
|
* }
|
|
* })
|
|
*/
|
|
var GitHubEmojiAPICallback = function(resp) {
|
|
window.emojis = resp.data;
|
|
};</script><script src="https://api.github.com/emojis?callback=GitHubEmojiAPICallback"></script></head><body><div class="banner"><div class="container"><div class="header clear"><h1>Textcomplete</h1></div></div></div><div class="container"><div class="clear"><div class="col-12"><a href="https://github.com/yuku-t/textcomplete">Source code</a> <a href="https://github.com/yuku-t/textcomplete/blob/master/doc/api.md">jsdoc</a></div></div><div class="clear"><div class="col-5-desktop col-12-"><div class="editor"><textarea id="textarea1">:a</textarea></div></div><div class="col-7-desktop col-12"><pre><code class="javascript auto-eval">// Shared strategy for all demos.
|
|
window.emojiStrategy = {
|
|
id: 'emoji',
|
|
match: /(^|\s):([a-z0-9+\-\_]*)$/,
|
|
search: function (term, callback) {
|
|
callback(Object.keys(emojis).filter(function (name) {
|
|
return name.startsWith(term);
|
|
}));
|
|
},
|
|
template: function (name) {
|
|
return '<img src="' + emojis[name] + '"></img> ' + name;
|
|
},
|
|
replace: function (name) {
|
|
return '$1:' + name + ': ';
|
|
}
|
|
};
|
|
|
|
var editor = new Textarea(document.getElementById('textarea1'));
|
|
|
|
var textcomplete = new Textcomplete(editor);
|
|
textcomplete.register([emojiStrategy]);</code></pre></div></div><div class="clear"><div class="col-5-desktop col-12-"><div class="editor"><textarea id="textarea2">:a</textarea></div></div><div class="col-7-desktop col-12"><pre><code class="javascript auto-eval">var editor = new Textarea(document.getElementById('textarea2'));
|
|
var textcomplete = new Textcomplete(editor, {
|
|
dropdown: {
|
|
maxCount: 5,
|
|
placement: 'top'
|
|
}
|
|
});
|
|
textcomplete.register([emojiStrategy]);</code></pre></div></div><div class="clear"><div class="col-5-desktop col-12-"><div class="editor"><textarea id="textarea3">:a</textarea></div></div><div class="col-7-desktop col-12"><pre><code class="javascript auto-eval">var editor = new Textarea(document.getElementById('textarea3'));
|
|
var textcomplete = new Textcomplete(editor);
|
|
textcomplete.register([emojiStrategy]);
|
|
|
|
textcomplete.on('rendered', function () {
|
|
if (textcomplete.dropdown.items.length === 1) {
|
|
// Automatically select the only item.
|
|
textcomplete.dropdown.select(textcomplete.dropdown.items[0]);
|
|
} else if (textcomplete.dropdown.items.length > 1) {
|
|
// Activate the first item by default.
|
|
textcomplete.dropdown.items[0].activate();
|
|
}
|
|
});</code></pre></div></div></div></body></html> |