(API) ChatterBox

  • plamzi
  • plamzi's Avatar Topic Author
  • Offline
  • Administrator
17 Nov 2013 19:29 #1 by plamzi
(API) ChatterBox was created by plamzi
This module creates a tabbed window ideal for capturing in-game communication channels. It also allows any other content to be docked inside one of its tabs, which makes it suitable for space-saving GUI layouts.


idThe DOM id attribute of the ChatterBox window. Defaults to '#chatter-box'.
tabsAn array of objects, each describing a tab to be added to the ChatterBox on creation. The parameters are:
  • name - The display name of the tab.
  • match - A RegExp to capture certain server input in this particular tab.
  • replace - optional string using RegExp groups to reformat the line.
  • time - If set to true, adds a timestamp before each line.
  • gag - If set to true, hides the matched text so it is only visible in the ChatterBox.
  • target - If set to the name of another tab, turns this into a hidden tab that can reformat certain lines differently and output them to an existing tab (see example).
cssA set of CSS properties to be applied to the ChatterBox window, such as default size and position.

chatterbox_readyEmitted when the ChatterBox has been instantiated. At this point, it becomes available to be referenced by Config.ChatterBox.


Config.ChatterBox.tab()After emitting 'chatterbox_ready', the plugin can be told to add a tab, with the following options:
  • id - Required. The DOM id of the new tab content window.
  • name - Required. The display name of the new tab.
  • html - The contents of the new tab.

new ChatterBox({
        id: "#chat-window",
        tabs: [ /* Initialize the ChatterBox tabs. Group comm. channels under a tab called 'chat'. */
                name: 'chat', /* the name of the tab as seen by the user */
                match: '([\r\n]+|^|<span.+?>)(.+) (whisper|offtopic|gossip|shout|guild\-say|clan\-say|private\-say|quest\-say|congrat|say|petitions|tell.*? the group)(s|)( .+|), \'(.+)\'.*?(|<\/span>).*?([\r\n]+|$)', 
                replace: '$1$2: $6$7', /* use RegExp groups from above to reformat the line to <span color>Speaker: message</span> */
                time: 1, /* insert a timestamp before each line */
                gag: 1 /* hide the line from main window after capturing it */
                name: 'tell', 
                match: '([\r\n]+|^|<span.+?>)(.+) (tell)(s|) (.+), \'(.+)\'(<\/span>)([\r\n]+|$)', 
                replace: '$1$2@$5: $6$7',
                target: 'chat'
        css: {
            width: 380,
            height: 360,
            top: 260,
            left: j(window).width() - 400, /* position window to the right of the screen */
            zIndex: 6


Event.listen('chatterbox_ready', function() {
   var help = Config.ChatterBox.tab({
       id: '#help-tab',
       name: 'help',
       text: '<iframe frameborder="0" src="http://my.gamesite.net/help.php?topic=all" style="width: 100%; height: 100%"></iframe'
The topic has been locked.