AJAXChat Wordpress Integration

[Doc gWorldz]

AJAXChat WordPress Integration
*I will leave this here because it is functional and has some things I left
out of the new one (hidden divs and image links). Please see gWorldz.com
<http://gworldz.com/947/ajax-chat-wordpress-integration/> for the updated
version.*

[image: ajax-wp-featured] <http://gworldz.com/?p=914>

This mod integrates AJAXChat 0.8.7 with WordPress 3.9.1 and is based on
code originally developed by Neumann Valle (utan), his integration is
available here <http://vcomputadoras.com/ajaxchat-wordpress-integration/>.

- Auto Login if already logged into WordPress.
- AJAXChat Login Form calls WP for validation.
- WP registration and remember password on AJAXChat login form displayed
with light/shadowbox effects.
- WP Nickname as AJAXChat Username.
- Staff roles based on WordPress management system.
- Chat Admin – WP users capable of installing plugins.
- Chat Moderator – WP users capable of editing WP post./li>
- Role restricted channel access using standalone custom channels.
- Uses functions already available in AJAXChat where possible and does
NOT need/use jQuery.
- Uses only AJAXChat custom integration files, no core files are
modified.

If you are adding AJAXChat to your site for the first time or have an
unmodified chat you can find an AJAXChat 0.8.7 package with the completed
mod below in the attachments section
<http://gworldz.com/914/ajaxchat-wordpress-integration/#mod-attachments>.

This mod assumes you are using a default WordPress installation located in
the top level of your domain with the AJAXChat chat directory located
inside.

- WordPress installation in public_html/ ( examplr.com )
- AJAXChat installation in public_html/chat/ ( example.com/chat/ )

If your site structure is different you may need to alter the filepaths in
the first 2 blocks, click here
<http://gworldz.com/914/ajaxchat-wordpress-integration/#common-issues> for
more information.

*FILES TO CREATE / EDIT*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / FILES / >
CHAT/css/global.css
CHAT/img/close.png
CHAT/img/light.png
CHAT/img/register.png
CHAT/img/remind.png
CHAT/img/shadow.png
CHAT/lib/custom.php
CHAT/lib/class/CustomAJAXChat.php
CHAT/lib/data/channels.php
CHAT/lib/template/loggedOut.html

*OPEN CHAT/lib/custom.php*

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
// Include custom libraries and initialization code here

*ADD AFTER*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
// ~cXc~ MOD WordPress Integration
// Initialize WordPress
if( isset( $_SERVER['DOCUMENT_ROOT'] ) ){
$file = $_SERVER['DOCUMENT_ROOT'].'/wp-config.php';
if( !file_exists( $file ) ){
exit( 'AJAXChat was not able to locate wp-config.php in your
WordPress installation, please edit lib/custom.php and add the correct path
to the $file variable.');
}
}else{
exit( 'your server could be misconfigurated , DOCUMENT_ROOT was not
available in server globals.' );
}
// require wp-config.php
require_once( $file );
// initiate $current_user var
global $current_user;
get_currentuserinfo();
// END ~cXc~ WordPress Integration

*OPENCHAT/lib/class/CustomAJAXChat.php*

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
// Returns an associative array containing userName, userID and userRole
// Returns null if login is invalid
function getValidLoginUserData() {

$customUsers = $this->getCustomUsers();

if($this->getRequestVar('password')) {
// Check if we have a valid registered user:

$userName = $this->getRequestVar('userName');
$userName = $this->convertEncoding($userName, $this->getConfig(
'contentEncoding'), $this->getConfig('sourceEncoding'));

$password = $this->getRequestVar('password');
$password = $this->convertEncoding($password, $this->getConfig(
'contentEncoding'), $this->getConfig('sourceEncoding'));

foreach($customUsers as $key=>$value) {
if(($value['userName'] == $userName) && ($value['password'] ==
$password)) {
$userData = array();
$userData['userID'] = $key;
$userData['userName'] = $this->trimUserName($value[
'userName']);
$userData['userRole'] = $value['userRole'];
return $userData;
}
}

return null;
} else {
// Guest users:
return $this->getGuestUser();
}
}

*REPLACE WITH*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
// ~cXc~ MOD WordPress Integration
function initCustomRequestVars(){
if( !$this->getRequestVar('logout') && is_user_logged_in() ) {
$this->setRequestVar('login', true);
}
}

// Replace custom template tags:
function replaceCustomTemplateTags($tag, $tagContent) {
global $user;

switch($tag) {
case 'WP_LOGIN_URL':
return '../wp-login.php';
case 'WP_REDIRECT_URL':
return 'chat/';
default:
return null;
}
}

// Returns an associative array containing userName, userID and userRole
// Returns guest login if null
function getValidLoginUserData() {
// globalize the important variables from WP
global $current_user;
// Check if we have a valid registered user:
$customUsers = $this->getCustomUsers();
if( isset( $current_user ) && is_user_logged_in() ){
$userData = array();
$userData['userID'] = $current_user->data->ID;
$userData['userName'] = $this->trimUserName( $current_user->data->display_name
);
if( current_user_can('install_plugins') ){
$userData['userRole'] = AJAX_CHAT_ADMIN;
}else if( current_user_can('edit_published_posts') ||
current_user_can('edit_posts') ){
$userData['userRole'] = AJAX_CHAT_MODERATOR;
}else{
$userData['userRole'] = AJAX_CHAT_USER;
}
return $userData;
}
if( $this->getRequestVar('password') ) {
$userName = $this->getRequestVar('userName');
$userName = $this->convertEncoding($userName, $this
->getConfig('contentEncoding'), $this->getConfig('sourceEncoding'));

$password = $this->getRequestVar('password');
$password = $this->convertEncoding($password, $this
->getConfig('contentEncoding'), $this->getConfig('sourceEncoding'));

foreach( $customUsers as $key => $value ) {
if( ($value['userName'] == $userName) && ($value[
'password'] == $password) ) {
$userData = array();
$userData['userID'] = $key;
$userData['userName'] = $this->trimUserName($value[
'userName']);

$userData['userRole'] = $value['userRole'];
return $userData;
}
}
return null;
}else{
// Guest users:
return $this->getGuestUser();
}
}
function getGuestUser() {
if(!$this->getConfig('allowGuestLogins'))
return null;

if($this->getConfig('allowGuestUserName')) {
$maxLength = $this->getConfig('userNameMaxLength')
- $this->stringLength($this->getConfig('guestUserPrefix'))
- $this->stringLength($this->getConfig('guestUserSuffix'));

$userName =$this->getRequestVar('userName');

// Trim guest userName:
$userName = $this->trimString($this->getRequestVar('userName'),
null, $maxLength, true, true);

// check if usernick choosen as guest is in the WP database..
if its is Deny access.
if( username_exists( $userName ) ){
return null;
}

// If given userName is invalid, create one:
if(!$userName) {
$userName = $this->createGuestUserName();
} else {
// Add the guest users prefix and suffix to the given
userName:
$userName = $this->getConfig('guestUserPrefix').$userName.
$this->getConfig('guestUserSuffix');
}
} else {
$userName = $this->createGuestUserName();
}

$userData = array();
$userData['userID'] = $this->createGuestUserID();
$userData['userName'] = $userName;
$userData['userRole'] = AJAX_CHAT_GUEST;
return $userData;
}
// END ~cXc~ WordPress Integration

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
}
return $this->_channels;
}

*ADD BEFORE*
< / CODE / > <http://gworldz.com/914/ajaxchat-wordpress-integration/#>

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
}
return $this->_allChannels;
}

*ADD BEFORE*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
// ~cXc~ MOD WordPress Integration
// ~cXc~ MOD Channel Access Restrictions Mod
$this->_allChannels = array_merge($this->_allChannels, $this
->getCustomChannels());
if($this->getUserRole() == AJAX_CHAT_MODERATOR) {
$this->_allChannels = array_merge($this->_allChannels, $this
->getStaffChannels());
}
if($this->getUserRole() == AJAX_CHAT_ADMIN) {
$this->_allChannels = array_merge($this->_allChannels, $this->getStaffChannels(),
$this->getAdminChannels());
}
// END ~cXc~ Channel Access Restrictions Mod
// END ~cXc~ WordPress Integration

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
function getCustomChannels() {
// List containing the custom channels:
$channels = null;
require(AJAX_CHAT_PATH.'lib/data/channels.php');
// Channel array structure should be:
// ChannelName => ChannelID
return array_flip($channels);
}

*ADD AFTER*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
// ~cXc~ MOD WordPress Integration
// ~cXc~ MOD Channel Access Restrictions Mod
function getStaffChannels() {
// List containing the custom channels:
$staff = null;
require(AJAX_CHAT_PATH.'lib/data/channels.php');
// Channel array structure should be:
// ChannelName => ChannelID
return array_flip($staff);
}

function getAdminChannels() {
// List containing the custom channels:
$admin = null;
require(AJAX_CHAT_PATH.'lib/data/channels.php');
// Channel array structure should be:
// ChannelName => ChannelID
return array_flip($admin);
}
// END ~cXc~ Channel Access Restrictions Mod
// END ~cXc~ WordPress Integration

*OPEN CHAT/data/channels.php*

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
?>

*ADD BEFORE*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
// ~cXc~ MOD WordPress Integration
// ~cXc~ MOD Channel Access Restrictions Mod
// List containing staff only channels:
$staff = array();

// ID's start at 100 continued from above
$staff[100] = 'Staff';

// List containing admin only channels:
$admin = array();

// ID's start at 200 continued from above
$admin[200] = 'Admin';
// END ~cXc~ Channel Access Restrictions Mod
// END ~cXc~ WordPress Integration

*OPENCHAT/lib/template/loggedOut.html*

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
document.getElementById('errorContainer').appendChild(node);

*ADD AFTER*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
}
// set action post and redirect to, wordpress integration
ajaxChat_loginform();
}
// set wordpress specifics
function ajaxChat_loginform(){
var loginForm = document.getElementById('loginForm');
if( typeof loginForm === 'object' ){
loginForm.action = '[WP_LOGIN_URL/]';
loginForm.elements['redirect_to'].value = '[WP_REDIRECT_URL/]';

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
</head>

*ADD BEFORE*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
<script type="text/javascript">
// <![CDATA[
function handleLogin() {
var loginForm = document.getElementById('loginForm');
var userNameField = document.getElementById('userNameField');
var passwordField = document.getElementById('passwordField');
var channelField = document.getElementById('channelField');
var redirectField = document.getElementById('redirectField');
if(passwordField.value.length == 0) {
loginForm.setAttribute('action', '[LOGIN_URL/]');
userNameField.setAttribute('name', 'userName');
} else {
var channelRequest = 'channelName=' +
encodeURIComponent(channelField.value);
var regExp = /\?/;
if(regExp.test(redirectField.value)) {
redirectField.value += '&';
} else {
redirectField.value += '?';
}
redirectField.value += channelRequest;
}
return true;
}

function toggleContainer(containerID, hideContainerIDs) {
if(hideContainerIDs) {
for(var i=0; i<hideContainerIDs.length; i++) {
ajaxChat.showHide(hideContainerIDs<em class="bbcode-em"></em>,
'none');
}
}
ajaxChat.showHide(containerID);
if(typeof arguments.callee.styleProperty == 'undefined') {
if(typeof isIElt7 != 'undefined') {
arguments.callee.styleProperty = 'marginRight';
} else {
arguments.callee.styleProperty = 'right';
}
}
}

function heightFixing(){
var winH = 460;
if (document.body && document.body.offsetWidth) {
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement
&& document.documentElement.offsetWidth ) {
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winH = window.innerHeight;
}

document.getElementById('registerAction').setAttribute('style',
'width:400px;height:'+winH/10*8+'px');
document.getElementById('registerAction').style.height = winH/10*8+
'px';
document.getElementById('iframeRegister').setAttribute('style',
'width:400px;height:'+winH/10*8+'px');
document.getElementById('iframeRegister').style.height = winH/10*8+
'px';

document.getElementById('remindAction').setAttribute('style',
'width:400px;height:'+winH/10*6+'px');
document.getElementById('remindAction').style.height = winH/10*6+
'px';
document.getElementById('iframeRemind').setAttribute('style',
'width:400px;height:'+winH/10*6+'px');
document.getElementById('iframeRemind').style.height = winH/10*6+
'px';
}

// ]]>
</script>

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
<form id="loginForm" action="[LOGIN_URL/]" method="post" enctype=
"application/x-www-form-urlencoded">
<div id="loginFormContainer">
<input type="hidden" name="login" id="loginField" value="login"/>
<input type="hidden" name="redirect" id="redirectField" value=
"[REDIRECT_URL/]"/>
<div><label for="userNameField">[LANG]userName[/LANG]:</label><br />
<input type="text" name="userName" id="userNameField" maxlength=
"[USER_NAME_MAX_LENGTH/]"/></div>
<div><label for="passwordField">[LANG]password[/LANG]*:</label><br
/>
<input type="password" name="password" id="passwordField"/></div>
<div><label for="channelField">[LANG]channel[/LANG]:</label><br />
<select name="channelName" id="channelField"
>[CHANNEL_OPTIONS/]</select></div>
<div><label for="languageSelection">[LANG]language[/LANG]:</label><br
/>
<select id="languageSelection" name="lang" onchange=
"ajaxChat.switchLanguage(this.value);">[LANGUAGE_OPTIONS/]</select></div>
<div><input type="submit" name="submit" id="loginButton" value=
"[LANG]login[/LANG]"/></div>
<div id="loginRegisteredUsers">* [LANG]registeredUsers[/LANG]</div>
</div>
</form>

*REPLACE WITH*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
<form id="loginForm" action="" method="post" enctype=
"application/x-www-form-urlencoded" onsubmit="return handleLogin();">
<div id="loginFormContainer">
<input type="hidden" name="login" id="loginField" value="login"/>
<input type="hidden" name="redirect" id="redirectField" value=
"[REDIRECT_URL/]"/>
<div><label for="userNameField">[LANG]userName[/LANG]:</label><br />
<input type="text" name="log" id="userNameField" maxlength=
"[USER_NAME_MAX_LENGTH/]"/></div>
<div><label for="passwordField">[LANG]password[/LANG]*:</label><br
/>
<input type="password" name="pwd" id="passwordField"/></div>
<div><label><input name="rememberme" type="checkbox" id="rememberme"
value="forever" tabindex="90" /> Remember Me?</label></div>
<div><label for="channelField">[LANG]channel[/LANG]:</label><br />
<select name="channelName" id="channelField"
>[CHANNEL_OPTIONS/]</select></div>
<div><label for="languageSelection">[LANG]language[/LANG]:</label><br
/>
<select id="languageSelection" name="lang" onchange=
"ajaxChat.switchLanguage(this.value);">[LANGUAGE_OPTIONS/]</select></div>
<div><input type="submit" name="submit" id="loginButton" value=
"[LANG]login[/LANG]"/> | <a href="#" onclick="toggleContainer('wpRegister',
new Array('wpRemind'));" title="Register Now?"><img src="img/register.png"
class="register"/></a> | <a href="#" onclick="toggleContainer('wpRemind',
new Array('wpRegister'));" title="Forgot Password?"><img src=
"img/remind.png" class="remind"/></a></div>
<div><input type="hidden" name="redirect_to" value="" /></div>
<div id="loginRegisteredUsers">* [LANG]registeredUsers[/LANG]</div>
</div>
</form>

*FIND*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
<div id="copyright"><a href="https://blueimp.net/ajax/">AJAX Chat</a> © <a
href="https://blueimp.net">blueimp.net</a></div>

*ADD AFTER*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
<div id="wpRegister" style="width:100%;height:1000px;display:none;">
<div id="registerAction" style="width:400px;height:400px;">
<iframe id="iframeRegister" src="[WP_LOGIN_URL/]?action=register"
style="width:400px;height:500px;"></iframe>
<a href="#" onclick="toggleContainer('wpRegister', new
Array('wpRemind'));" title="Close">
<div class="wpClose"> </div>
</a>
</div>
</div>
<div id="wpRemind" style="width:100%;height:1000px;display:none;">
<div id="remindAction" style="width:400px;height:500px;">
<iframe id="iframeRemind" src="[WP_LOGIN_URL/]?action=lostpassword"
style="width:400px;height:500px;"></iframe>
<a href="#" onclick="toggleContainer('wpRemind', new
Array('wpRegister'));" title="Close">
<div class="wpClose"> </div>
</a>
</div>
</div>
<script type="text/javascript">heightFixing()</script>

*OPEN CHAT/css/global.css*

*ADD TO END OF FILE*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
/*************************************************
| ~cXc~ MOD = CSS Overrides & Additional Classes |
*************************************************/

#loginContent #loginFormContainer .register,
#loginContent #loginFormContainer .remind {
border:none;
height:2em;
width:2em;
padding:2px;
vertical-align:bottom;
}

#loginContent #wpRegister,
#loginContent #wpRemind {
/* White/Light div overlay mimic lightbox effect
background: transparent url('../img/light.png') center center repeat;*/
/* Black/Shadow div overlay mimic shadowbox effect */
background: transparent url('../img/shadow.png') center center repeat;
margin:0;
min-height:500px;
padding:0;
position:fixed;
top:0;
left:0;
}

#loginContent #wpRegister #registerAction,
#loginContent #wpRemind #remindAction {
border-size:0 1px 0 1px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-style:solid;
margin:-100px 0 0 -200px;
position:absolute;
top:20%;
left:50%;
z-index:99;
}

#loginContent #wpRegister #registerAction .wpClose,
#loginContent #wpRemind #remindAction .wpClose {
background: #fff url('../img/close.png') center center no-repeat;
border: 1px solid;
border-radius: 16px 16px 16px 16px;
-moz-border-radius: 16px 16px 16px 16px;
-webkit-border-radius: 16px 16px 16px 16px;
height: 32px;
width: 32px;
position:absolute;
top:-10px;
right:-10px;
z-index:999;
}

#loginContent #wpRegister #registerAction #iframeRegister,
#loginContent #wpRemind #remindAction #iframeRemind {
border-size:0 1px 0 1px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-style:solid;
padding: 0 0 -40px 0;
}

*UPLOAD*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / FILES / >
CHAT/img/close.png
CHAT/img/light.png
CHAT/img/register.png
CHAT/img/remind.png
CHAT/img/shadow.png

*END OF MOD*


The most common issues with this mod will be an incorrect filepath given in
step 1 or step 2 above. To modify your filepaths.

*OPEN CHAT/lib/custom.php*

*EDIT*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
$file = $_SERVER['DOCUMENT_ROOT'].'/wp-config.php';

The filepaths below may also require changing depending on the structure of
your site.

*OPENCHAT/lib/class/CustomAJAXChat.php*

*EDIT*
? <http://gworldz.com/914/ajaxchat-wordpress-integration/#>
< / CODE / >
case 'WP_LOGIN_URL':
return '../wp-login.php';
case 'WP_REDIRECT_URL':
return 'chat/';

- ‘WP_LOGIN_URL’ is a relative path to the AJAXChat directory
- ‘WP_REDIRECT_URL’ is the AJAXChat directory

Attachments

- [image: zip] AJAXChat-0.8.7-wordpress-images
<http://gworldz.com/wp-content/plugins/download-attachments/includes/download.php?id=920>
Includes the close.png, light.png, register.png, remind.png and
shadow.png images used for this mod.
Attachment size: 20 kB Downloads: 1
- [image: zip] AJAXChat-0.8.7-wordpress
<http://gworldz.com/wp-content/plugins/download-attachments/includes/download.php?id=921>
This is a full install of AJAXChat 0.8.7 with this mod applied.
Attachment size: 2 kB Downloads: 1