(API) ChatterBox

Start
Prev
1
Next
End

plamzi
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.

OPTIONS:

id	The DOM id attribute of the ChatterBox window. Defaults to '#chatter-box'.
tabs	An 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).
css	A set of CSS properties to be applied to the ChatterBox window, such as default size and position.

EVENTS:

chatterbox_ready

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

METHODS:

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.

INSTANTIATION EXAMPLE:

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
        }
    });

DOCKING EXAMPLE

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.

Start
Prev
1
Next
End