Before you install the extension you should consider a page of type 'SysFolder' where the data records for the chat should be placed (chat entries, rooms and sessions).
Install the extension with the extension manager. There you can configure the following fields.
Property: | Data type: | Description: | Default: |
|---|---|---|---|
pids.entries | int | This is the page id where the new entries of a chat are stored. | |
pids.rooms | int | This is the page id where the chat rooms are stored. | |
pids.sessions | int | This is the page id where the new entries of a chat are stored, if created with a chat command. | |
serverTimeOffset | string | During the chat a time is displayed. This value fixes the displayed time. Example: +1 hour | +1 hour |
emoticonsPath | string | Path to emoticons. This is prepended to the filename and can also be absolute (url). Default: typo3conf/ext/vjchat/pi1/emoticons/ | |
prototypeJSPath | string | Path to the prototype JavaScript framework from Sam Stephenson >=1.4.0. Since TYPO3 4.1 the library is located in typo3/contrib/. If you do not want that this extension includes prototype automatically just clear this field. If you are using older versions of TYPO3 you can install the extension prototypejs. When 'prototypejs' is loaded, this setting has no effect. | typo3/contrib/prototype/prototype.js |
scriptaculousJSPath | string | Path to the scriptaculous. The library is usually located in typo3/contrib/. The usage is optional (not required for the chat). If you don't want that this extension includes scriptaculous clear this field. | typo3/contrib/scriptaculous/scriptaculous.js |
showParameterDescription | If activated the 'help' command shows also a description for each parameter | 1 | |
hidePrivateRooms | boolean | Hide private rooms by default: Sets the hidden flag for new private rooms by default | 1 |
deletePrivateRoomsIfEmpty | boolean | Delete private rooms if empty: If set, private rooms are always be flagged as 'deleted' when there is no user in it. | 1 |
hideSuperusers | boolean | Hide superusers: Sets the hidden flag to a superuser when entering a chat room | 1 |
allowPrivateMessages | boolean | Private messages: Enable/disable private messages (/msg) | 1 |
allowPrivateRooms | boolean | Private rooms: Enable/disable private rooms (/newroom) | 1 |
superuserCanReadPMs | boolean | PMs for superuser: Defines if the superuser can read private messages | 1 |
moderatorsAllowSwitchRoomStatus | boolean | Change room status: Allows moderators to change the room status (/switchroomstatus hidden, private) | 0 |
autoDeleteEntries | int | Auto Delete Entries: Deletes ALL messages that are older than this value (seconds) of any room! If you are using sessions you should disable this option by setting value to 0 (otherwise entries of sessions are deleted as well) and use the command /cleanup or /cleanuproom to delete unused entries manually. | 0 |
This extension requires the prototype JavaScript framework from Sam Stephenson >=1.4.0. Since TYPO3 4.1 the library is located in typo3/contrib/. This extension includes it automatically if the path value (prototypeJSPath) is set in the Extension Manager. If you do not want that this extension includes prototype itself just clear this field. Then you could use some TypoScript to include the framework manually, e.g:
page.headerData.1002 = TEXT
page.headerData.1002.value = <script language="JavaScript" type="text/javascript" src="typo3/contrib/prototype/prototype.js"></script>
Alternatively (if you are using older versions of TYPO3) you could install the extension 'prototypejs' that is now obsolete.
This extension also uses Scriptaculous but which is optional (for some effects).
Setup a chat room by creating a new record of type “Chat room” on the page you have created before (pids.rooms).
I hope most fields of this form are self-explanatory. You have three tabs. All relevant options can be entered on the first tab 'General'. On the 'Users' tab you assign users or groups to the role they should play during the chat (users, moderators, experts, superusers). If you leave the field 'User group' empty the chat should accept all users. At the bottom there are also three textboxes where you can define (in a comma separated list) what fields of the fe_users table should be shown in the userlist or by the commands /who and /whois for each user type (users, moderators and experts). The following example shows name, email address and company:
name,email,company
Now that you have created a first chat room place the plugin on a page you want by creating a new content element of the type “Insert plugin” and choose as plugin “Chat”.
There is one tab for setting up the rooms overview and the chat window. Mainly these options just toggle the availability of data in the TypoScript configuration.
Tab General
Property: | Data type: | Description: | Default: |
|---|---|---|---|
Display | list | If you select “Rooms”, an overview of all available rooms is displayed on the first page. If you choose “Chat” the user enters directly a specific chatroom when entering the page. | Rooms |
UID of chat room | int | If you choose “Chat” you need to set this value. This ID points to the one chat room (data record of type “Chat room”). | |
Chatrooms (if empty: global or pidlist from Starting point) | list | If you choose “Rooms Overview” you can define here what rooms should be displayed. Alternatively you can define the Starting Point (a page) or plugin.tx_vjchat_pi1.pidList from where all rooms are collected. If you leave all blank all (global) chat rooms are displayed. | |
Page for popup chat window | int | This page is used for the popup-window of a chat. You have to create a new page and place the plugin there a second time. The benefit is you can define a completely different (simpler) TypoScript template. If you leave this field blank the same page as the 'mother chat' is displayed. | |
TS for this view (plugin.tx_vjchat_pi1.views.*) | string | You can define TypoScript showing the roomlist in plugin.tx_vjchat_pi1.views. Please see EXT:vjchat/ext_typoscript_setup.txt. | rooms |
Show Description | boolean | If enabled the field description is available in TypoScript setup (rooms). | 1 |
Don't show empty rooms | boolean | If enabled no empty rooms are rendered. | 0 |
Don't show closed rooms | boolean | If enabled no closed rooms are rendered. | 1 |
Don't show private rooms | boolean | If enabled no private rooms are rendered. | 1 |
Show Superusers | boolean | If enabled superusers are also part of field:allUserNicknames or field:allUserSnippets and field:superusers is available. | 0 |
Show Moderators | boolean | If enabled moderators are also part of field:allUserNicknames or field:allUserSnippets and field:moderators is available. | 1 |
Show Users | boolean | If enabled users are also part of field:allUserNicknames or field:allUserSnippets and field:users is available. | 1 |
Show Experts | boolean | If enabled experts are also part of field:allUserNicknames or field:allUserSnippets and field:experts is available. | 1 |
Show user count | boolean | If enabled the field showUserCount is true. | 1 |
Tab Chat
Property: | Data type: | Description: | Default: |
|---|---|---|---|
Messages before | int | If a user enters the chat messages can be shown that are send before. This value defines the time backwards in minutes. Note this works correct only if autoDeleteEntries (Extension Manager) has at minimum the same value. | 10 |
Refresh time if full | int | If a room is full the script checks automatically if the user can enter the chat (seconds). | 30 |
Time to get messages | int | The script requests new message after this time (seconds). | 5 |
Time to load userlist | int | The script requests a complete userlist after this time (seconds). | 15 |
Enable emoticons panel | boolean | If set the emoticon panel is rendered. | 1 |
Enable user styles | boolean | If set users can change the styles of their messages. | 1 |
Enable format panel | boolean | If set the format panel is rendered. | 1 |
Colorize nicks | boolean | If enabled each nicknames gets a randomized color. | |
Show time | boolean | If set the server time is shown. | 1 |
Show send button | boolean | If set the marker ###SEND_BUTTON### is rendered. | 0 |
Show description in chat window | boolean | If enabled the field description is available in TypoScript setup (cObjects). | 1 |
You can publish a chat session either by using the command /makesession or by a new record of type 'Chat Session' in the backend. Just enter a name and the start and end message of the session and finally select a room. After saving the session appears in the chat rooms view.
The messages that are displayed during the chat are hardcoded. (EXT:vjchat/pi1/class.tx_vjchat_chat.php:225)
HTML structure of some generated code (hardcoded)
Message | Location | Structure or Example |
|---|---|---|
Error | php | <span class="error">{message}</span> |
Message | php | <div class="tx-vjchat-message-style-{stylenumber}"> <div class="tx-vjchat-{moderator|expert|user|superuser}"><span class="tx-vjchat-time">{%H:%M:%S}: '[#id]'</span><span class="tx-vjchat-user">{username}</span>> <span class="tx-vjchat-entry">{message}</span>'</div></div> |
Hidden messages wrap | php | <div class="tx-vjchat-hidden" id="tx-vjchat-entry-{uid}">{message}</div> |
Private message wrap | <div class="tx-vjchat-private"><div class="tx-vjchat-hidden" id="tx-vjchat-entry-{uid}">...</div></div> | |
Commit, store and delete message (is appended to a hidden messages, for moderators only) | php | <div class="tx-vjchat-commit" id="tx-vjchat-entry-commitlink-{uid}"><a class="tx-vjchat-actionlink" onClick="javascript:chat_instance.commitEntry({uid});">{commit}</a> | <a class="tx-vjchat-actionlink" onClick="javascript:chat_instance.hideEntry({uid});">{hide}</a> <span id="tx-vjchat-storelink-{uid}">| <a class="tx-vjchat-actionlink" onClick="javascript:chat_instance.storeEntry({uid});">{store}</a></span></div> |
Expert messages wrap | php | <div class="tx-vjchat-expert">{message}</div> |
System messages wrap | php | <div class="tx-vjchat-system">{message}</div> |
Moderator messages wrap | php | <div class="tx-vjchat-moderator">{message}</div> |
Superuser messages wrap | php | <div class="tx-vjchat-superuser">{message}</div> |
Commands | php | see EXT:vjchat/pi1/class.tx_vjchat_chat.php:528 |
All messages wrapped | JavaScript | <div class=”tx-vjchat-entry”>{messages}</div> |
Users in userlist (useSnippets = 0) | JavaScript | <div class=”tx-vjchat-userlist”> <div class="tx-vjchat-userlist-item tx-vjchat-userlist-user"> <span style="color: {usercolor};" class="tx-vjchat-userlist-username tx-vjchat-userid-{userid} tx-vjchat-message-style-{userstyle}" id="user-{userid}">{username}</span> <span class="tx-vjchat-pm-link">{pmlink}</span> <span class="tx-vjchat-pr-link">{prlink}</span></div> </div> |
Userdetails (useSnippets = 0) | JavaScript | <div id=”tx-vjchat-user-detail” class=”tx-vjchat-user-detail-{moderator|expert|user|superuser}"> <div id="tx-vjchat-user-detail-caption">{username}</div> <div id="tx-vjchat-user-detail-body"> <p>{detail1}</p> <p>{detail2}</p> <p>{detailn}</p> </div> </div> |
Example of generated code of a private message:
<div class="tx-vjchat-entry">
<div class="tx-vjchat-message-style-0">
<div class="tx-vjchat-user">
<div class="tx-vjchat-private">
<div class="tx-vjchat-hidden" id="tx-vjchat-entry-48">
<span style="display: inline;" class="tx-vjchat-time">{time}: </span>
<span style="color: rgb(76, 76, 76);" class="tx-vjchat-user tx-vjchat-userid-12">
PM from tim to tom
</span>>
<span class="tx-vjchat-entry">Hello</span>
</div>
</div>
</div>
</div>
</div>
You may use the Web Developer Extension (View Source->Generated Source) or Firebug for Mozilla Firefox to view the generated code.
You can configure the appearances of the views with TypoScript, there is still no HTML-Template.
plugin.tx_vjchat_pi1
Property: | Data type: | Description: | Default: |
|---|---|---|---|
templateFile | string | The template for a chatroom. You should configure the chat via CSS and TypoScript rather than editing this file. Here you find just JavaScript and the <div> container for the chat. | EXT:vjchat/pi1/chat.tpl.html |
pidList | list | This can be a source for the rooms overview. | |
defaultChatpopupPid | int | If you don't set a popup pid in the configuration form of the plugin this pid would be used. | |
tooltipOffsetXY | x,y | This could be useful to move the tooltip to another position. | |
loadingMessage | cObj | This cObj is displayed when the chat loads. (marker ###LOADING_MESSAGE### in the template). | |
_CSS_DEFAULT_STYLE | string | Contains the default CSS style. If you do not want to use the default styles use the following row in your typoscript template: plugin.tx_vjchat_pi1._CSS_DEFAULT_STYLE > | see EXT:vjchat/ext_typoscript_setup.txt |
cObjects | Contains the cObjects used by views. | see EXT:vjchat/ext_typoscript_setup.txt | |
views | Contains a stdWrap for each view. | see EXT:vjchat/ext_typoscript_setup.txt | |
errorMessagesStdWrap | stdWrap | <p class="error">|</p> | |
chatPopupJSWindowParams | string | These values is passed to a new JavaScript chat window. | width=600,height=600,status=1,resizable=1,location=1 |
userlistPMContent | string /stdWrap | This is appended to the user name in the user list and results in a link to send a private message /pm. | PM |
userlistPRContent | string /stdWrap | This is appended to the user name in the user list and results in a link to create a new room /newroom. | PR |
userColors | list | Contains all available colors (e.g. '#2A8C2A') for the nicknames. | see EXT:vjchat/ext_typoscript_setup.txt |
chatbuttons | COA | These are the buttons within the 'format panel' of the chat. | see EXT:vjchat/ext_typoscript_setup.txt |
[tsref:plugin.tx_vjchat_pi1]
plugin.tx_vjchat_pi1.cObjects
There are three COAs (plugin.tx_vjchat_pi1.cObjects) defined that are used by the views (plugin.tx_vjchat_pi1.views).
Property: | Data type: | Description: | Default: |
|---|---|---|---|
room | COA | Available fields (via getText) are: All fields of an chat room means uid, fe_group, name, description, closed, showfullnames, mode, maxusercount, moderators, experts, groupaccess, sessions, bannedusers and welcomemessage. Additional fields are userCount, sessionCount, onlineExperts, onlineModerators and isFull. Example: plugin.tx_vjchat_pi1.cObjects.room { 10 = TEXT 10.value = <h2>{field:name}</h2> 10.insertData = 1 } | see EXT:vjchat/ext_typoscript_setup.txt |
roomShort | COA | Just another example configuration for the rooms overview. Which one is renderer can be selected in the configuration form of the plugin. | |
session | COA | Available fields are the fields of a chat session uid, name, description, hidden, room, startdate and enddate. One additional field is entriesCount. | |
entry | COA | Available fields are uid, username, entry and type. |
[tsref:plugin.tx_vjchat_pi1.cObjects]
plugin.tx_vjchat_pi1.views
Property: | Data type: | Description: | Default: |
|---|---|---|---|
rooms.stdWrap | stdWrap | Content of this object is an iteration of the cObject room (see above). | see EXT:vjchat/ext_typoscript_setup.txt |
roomsShort.stdWrap | stdWrap | Content of this object is an iteration of the cObject roomShort (see above). | |
sessions.stdWrap | stdWrap | Content of this object is an iteration of the cObject session (see above). | |
session.stdWrap | stdWrap | Content of this object is an iteration of the cObject entry (see above). | |
chat.stdWrap | stdWrap | Content of this object is an instance of the templateFile. |
[tsref:plugin.tx_vjchat_pi1.views]
Snippets
There is a new feature since 0.2.8. It allows you to define HTML-Snippets that are created and stored in database when the user enters a chat. Then these snippets are displayed in userlist or tooltip. This allows highest customization.
Property: | Data type: | Description: | Default: |
|---|---|---|---|
useSnippets | boolean | Enables this feature. | 1 |
userlistSnippet | COA | The fields username, image and uid are always available. All further fields of fe_users need to be set in the room's form (Show additional information about). | see EXT:vjchat/ext_typoscript_setup.txt |
tooltipSnippet | COA | The fields username, image and uid are always available. All further fields of fe_users need to be set in the room's form (Show additional information about). | see EXT:vjchat/ext_typoscript_setup.txt |
[tsref:plugin.tx_vjchat_pi1]
Example
If you use the display mode “Chat” you might want to hide the link “Leave Chat”:
plugin.tx_vjchat_pi1.views.chat.stdWrap.preCObject.3 >
plugin.tx_vjchat_pi1.messageStyles
Please have a look at the EXT:vjchat/ext_typoscript_setup.txt. There should be clear how to customize the message styles. If you make changes in this section make sure to define equivalent css with .tx-vjchat-message-style-[NUMBER].
Property: | Data type: | Description: | Default: |
|---|---|---|---|
default | COA | This is the default button for all buttons that activate a message style. | see EXT:vjchat/ext_typoscript_setup.txt |
1 | stdWrap | Overrides only the default COA for the second style. | |
2 | stdWrap | Overrides only the default COA for the third style. | |
n | stdWrap |
[tsref:plugin.tx_vjchat_pi1.messageStyles]