FANDOM


Chat-js is a library for FANDOM Chat that abstracts common code patterns in scripts:

  • asynchronous events for chat mainRoom availability
  • UI utilities - put your buttons in one responsive area!
  • mediawiki.api is exposed (allowing use of mw.Api in chat)

Usage

Importing the script

To use Chat-js, you need to import it into your script. You can listen for the dev.chat event using mw.hook.

// register the hook before the import to avoid race conditions
mw.hook('dev.chat').add(function (chat) {
    // chat is a shortcut to window.dev.chat
});
importArticle({ type: 'script', article: 'u:dev:MediaWiki:Chat-js.js' });

Using the library

The library dispatches the following MediaWiki hooks:

dev.chat
Fires when the Chat-js library has initialised.
Passes window.dev.chat as an argument.
dev.chat.socket
Fires when Chat establishes a socket connection and events are available.
Passes window.mainRoom, window.dev.chat as arguments.
dev.chat.render
Fires after full render of the Chat view. Chat equivalent of $.ready.
Note: Chat and user model data is only available after this hook has fired.
Passes window.mainRoom, window.dev.chat as arguments.

Library utilities

The chat object has the following methods/members:

Property path Type Description
chat.socket boolean mainRoom availability
chat.render boolean Completion of Chat initial DOM render.
chat.toolbar DOM node Responsive WDS button group.
chat.stylesheet DOM node Chat-js stylesheet
chat.Button Constructor
Chat button constructor. Use with 'dev.chat' hook ONLY!
Accepts opts object as only argument:
  • opts.name - script name (required)
  • opts.attr - extension attributes and jQuery methods (optional)
Returns opts with button element in opts.el.
chat.buttons Method
Query for existing Chat-js buttons by script name. Use with 'dev.chat.render' hook ONLY!
Accepts name as only argument.
Return DOM node list for all scripts when there is no argument.
Or an object with .exists boolean & .el element when name is a existing button name.
chat.inlineAlert Method
Adds an inline alert to chat. Use with 'dev.chat.render' hook ONLY!
Accepts the following arguments:
  • text (string) - text-value (can be multi-line).
  • roomId (?string|number) - optional target room ID for private chat (or 'main').
Returns array of created chat models (can be empty).

Code examples

Default styling can be deactivated like so:

mw.hook('dev.chat').add(function(chat) {
    chat.stylesheet.disabled = true;
});

New buttons can be generated like so:

mw.hook('dev.chat').add(function(chat) {
    return new chat.Button({
        name: 'MessageBlocker',
        attr: {
            'class': 'mb-button',
            text: 'MB',
            click: mb.modal
    });
});

Script buttons can be moved like so:

mw.hook('dev.chat.render').add(function(mainRoom, chat) {
    var button = chat.buttons('EmoticonsWindow');
    if (button.exists) {
        $('.Write .message').append(button.el);
    }
});

Code summary

// Create a button to toggle self-visibility in main user list.
mw.hook('dev.chat').then(function(chat) {
    return new chat.Button({
        name: 'Chat-js',
        attr: {
            text: 'Self'
            click: function() {
                var el = mainRoom.userMain.view.el; 
                if (!el.style.length) {
                    el.style = 'display: none;'
                } else {
                    el.removeAttribute('style');
                }
            }
        }
    });
});
// Unhide yourself when Chat has rendered.
mw.hook('dev.chat.render').add(function(mainRoom) {
    mainRoom.userMain.view.el.removeAttr('style');
});
/**
 * Note that this is equivalent to:
 *  mw.hook('dev.chat.socket').add(function(mainRoom) {
 *      mainRoom.socket.bind('initial', function() {
 *          mainRoom.userMain.view.el.removeAttr('style');
 *      });
 *  });
 */
importArticle({ type: 'script', article: 'u:dev:MediaWiki:Chat-js.js' });