sib-mention-autocomplete.js

/**
 * Custom mention autocomplete list.
 */
converse.plugins.add('sib-mention-autocomplete', {
  overrides: {
    ChatRoom: {
      /**
       * Get all known nicknames from the occupants of the room.
       * Move the `all` mention at the bottom.
       *
       * @returns {*}
       */
      getAllKnownNicknames() {
        const nicknames = [...new Set(this.occupants.map(o => o.get('nick')).filter(n => n))];

        if (nicknames.indexOf('all') >= 0) {
          return nicknames.filter(n => n !== 'all').concat(['all']);
        }

        return nicknames;
      },
    },
    ChatRoomView: {
      /**
       * Disable sort so the `all` mention stays at the bottom.
       */
      initMentionAutoComplete() {
        this.__super__.initMentionAutoComplete.apply(this, arguments);
        this.mention_auto_complete.sort = false;
      },

      /**
       * Show a custom icon for `all`
       * Render the full name on top of the nickname
       *
       * @param text
       * @param input
       * @returns {HTMLLIElement}
       */
      getAutoCompleteListItem(text, input) {
        const _converse = this.__super__._converse;
        const { api } = _converse;

        input = input.trim();
        const element = document.createElement('li');
        element.setAttribute('aria-selected', 'false');

        const is_mention_all = text.toString() === 'all';
        let vcard = null;

        // Get the vcard for the current user
        if (_converse.vcards && !is_mention_all) {
          vcard = _converse.vcards.findWhere({
            'nickname': text,
          });
        }

        // Update the `@all` mention with a custom label
        // Update the label with the user full name if available
        if (is_mention_all) {
          text.title = 'Notifier tous les utilisateurs du cercle';
          if(window.orbit) {
              text.title = window.orbit.intl.t("chat.notifyall") || 'Notifier tous les utilisateurs du cercle'
          }
        } else if (vcard && vcard.get('fullname')) {
          text.title = vcard.get('fullname') || text.toString();
        } else {
          text.title = text.toString();
        }

        // Update mention item with the avatar
        if (api.settings.get('muc_mention_autocomplete_show_avatar')) {

          const ALL_IMAGE_TYPE = 'image/png';
          const ALL_IMAGE = 'iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/Tih9UFOwg4pChdrJQVMRRq1CECqFWaNXB5NIvaNKQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIm5uToouU+L+k0CLWg+N+vLv3uHsHCPUy06xADNB020wl4mImuyp2vyKAQfQihojMLGNOkpLoOL7u4ePrXZRndT735+hXcxYDfCLxLDNMm3iDeHrTNjjvE4dYUVaJz4nHTbog8SPXFY/fOBdcFnhmyEyn5olDxGKhjZU2ZkVTI54iDquaTvlCxmOV8xZnrVxlzXvyFwZz+soy12mOIoFFLEGCCAVVlFCGjSitOikWUrQf7+Afcf0SuRRylcDIsYAKNMiuH/wPfndr5ScnvKRgHOh6cZyPMaB7F2jUHOf72HEaJ4D/GbjSW/5KHZj5JL3W0sJHwMA2cHHd0pQ94HIHGH4yZFN2JT9NIZ8H3s/om7LA0C3Qt+b11tzH6QOQpq6SN8DBIRApUPZ6h3f3tPf275lmfz+L0XKxj98XuQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UEEAkzFM6kWwwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACSUlEQVRYw+3Xz0sUYRjA8e/Mjs6s6+iuq64/0mzTJLQIy0DqokQRUVfp4jE6B9VBCLtF/0MEdapDknjwYJeIsLykUbaU+WNd21zW/TG6zu7M7HQQBCkQ0132MM/x4eXhw/s+7/PyCoTHbUooREosHJADckAO6EDFDAvsg81Z6TAgykqSI0+mkFdT2C4R7UwzvwZ7MKuVfdcSDvx02DbeqSVMr8LGyQYEK0/txBy+dz/5MXKVvCwVZ4dcmzn8kyHcywkMv4d4f8e2zyUSu9aFEk6izqySOt9a+B5SIilODI8jGnni/R1kG1SOPX6D9+PSzhrD60bS9OL0UNOzaSJDvaR7WgDYoJH06WbaH06QOtuC7RIRbLAFoTi3TFlJonU37coZtR5MVaZsPQNAeUwjV19ZGnNISut4vq2hH60pDshyl1H2j/6QNnNYlTJNz6dJ9bVhqnJxQFtBPxXfY7sxmg7CNta9uI4lS4i6URxQfKCDwOgsrkxuJ9fw8hPJvjYA5h9cQdRNOu+N4Z8MIVj5woIy7XUYXje+t/MAyFGN6qlF4pc6ATBVhdWhXuaHL6N+idL89EOBQLaN9/0CnffHMGo8JC4GAcgGVGI3ujk+MkH968+IORNscC8nyAT9lK9tHP7TIW4ZBB9NYlWUE73Zw1ar7++mTukEXs1QNRth4c4AntBvlHCS9LlWtFONhwuqnItSN/6VhbsDe64NjM5iSyJr17sLN6mzgSqUSJKuWy/2PllJJHz7wn/NMMH5KDogB+SAHJAD2l/8AVdEzx8qjlPAAAAAAElFTkSuQmCC';

          const img = document.createElement('img');
          let dataUri = 'data:' + _converse.DEFAULT_IMAGE_TYPE + ';base64,' + _converse.DEFAULT_IMAGE;

          if (vcard) {
            dataUri = 'data:' + vcard.get('image_type') + ';base64,' + vcard.get('image');
          }

          if (is_mention_all) {
            dataUri = 'data:' + ALL_IMAGE_TYPE + ';base64,' + ALL_IMAGE;
          }

          img.setAttribute('src', dataUri);
          img.setAttribute('width', '32');
          img.setAttribute('height', '32');
          img.setAttribute('class', 'avatar avatar-autocomplete');
          element.appendChild(img);
        }

        const label = document.createElement('span');
        label.appendChild(document.createTextNode(text.title));

        const val = document.createElement('small');
        val.appendChild(document.createTextNode('@'));

        const regex = new RegExp('(' + input + ')', 'ig');
        const parts = input ? text.split(regex) : [text];

        parts.forEach(txt => {
          if (input && txt.match(regex)) {
            const match = document.createElement('mark');
            match.textContent = txt;
            val.appendChild(match);
          } else {
            val.appendChild(document.createTextNode(txt));
          }
        });

        label.appendChild(val);
        element.appendChild(label);

        return element;
      },
    },
  },
});