yuku-t/textcomplete

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');
    meta(charset="utf-8")
    title Textcomplete
    link(rel='stylesheet' type='text/css' href='./main.css')
    script(src='./main.js')
    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(src='https://api.github.com/emojis?callback=GitHubEmojiAPICallback')
  body
    .banner
      .container
        .header.clear
          h1
            | Textcomplete
    .container
      .clear
        .col-12
          a(href='https://github.com/yuku-t/textcomplete') Source code
          |  
          a(href='https://github.com/yuku-t/textcomplete/blob/master/doc/api.md') jsdoc
      .clear
        .col-5-desktop.col-12-
          .editor
            textarea#textarea1.
              :a
        .col-7-desktop.col-12
          pre
            code.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]);
      .clear
        .col-5-desktop.col-12-
          .editor
            textarea#textarea2.
              :a
        .col-7-desktop.col-12
          pre
            code.javascript.auto-eval.
              var editor = new Textarea(document.getElementById('textarea2'));
              var textcomplete = new Textcomplete(editor, {
                dropdown: {
                  maxCount: 5,
                  placement: 'top'
                }
              });
              textcomplete.register([emojiStrategy]);
      .clear
        .col-5-desktop.col-12-
          .editor
            textarea#textarea3.
              :a
        .col-7-desktop.col-12
          pre
            code.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();
                }
              });