How can I re enable font colors.

25 views
Skip to first unread message

thewriti...@gmail.com

unread,
Jan 14, 2013, 3:50:57 PM1/14/13
to ajax...@googlegroups.com
I would first like to say this is awesome and I love how clean this script is but how can I re enable the font color list. I know its bugged but my users were fine with that. 

ajaximrpg

unread,
Jan 14, 2013, 6:18:28 PM1/14/13
to ajax...@googlegroups.com
Hi,

Hmm, your best bet might be to download the ajaximrpg 3.41 to re-gain the font colors.  I'll tell you why.

The "send" event sends a message from one user to another or to an entire room.

In 3.41, the "send" event contained a text message and some arguments that described whether the message was bold, italic, underline, font, size and so on.  But, since bold (italic, font color, etc) could only be on or off, the entire message was either all bold or all unbolded.  You couldn't just have one word bold and the rest normal.

In 4.00 (I think), the "send" event was changed to contain a HTML message.  By doing that, text could be sent but it could also be marked up with HTML.  This would allow a message to be styled with different characters in different styles so a single word or even a single character could be bolded (or colored).  The UI to actually do that, though, hasn't been implemented.

So, it isn't a matter of flipping a switch; the message format has changed and there are multiple changes in various places.  Even if you could add the arguments, the server is no longer listening for those styles as separate arguments; it expects them to be included in the message.

You can actually see this for yourself in the sendMessage() code for js/im.basic.js.  Revision 1 where it works:


Versus Revision 4 where it is gone and replaced with encodeURIComponent():


I'm sorry about that.  I wish that it was possible to flip on even a buggy version of font colors.  But I'm aware that people want this feature and it is sore point.

If you are a developer and want to hack in a fix, I could give you some pointers how to do that.  It might not be too hard.

Dan
----------------
Play: http://www.svexpertise.com/ajaximrpg/server 
Code: http://ajaximrpg.sourceforge.net 
Tweet: http://www.twitter.com/ajaximrpg 
Discuss: http://groups.google.com/group/ajaximrpg 
Totally free.  Totally easy.  Totally open.  Play RPGs instantly.

O'Reilly Book: Node.js for PHP Developers: Porting PHP to Node.js by Daniel Howard

thewriti...@gmail.com

unread,
Jan 14, 2013, 8:02:27 PM1/14/13
to ajax...@googlegroups.com
That would be great I have been working with this version for a good while. I might be able to tackle it I thought maybe it could be turned on when I first sent that message but as I looked i realized how much stuff you've changed lol. I saw the variables for the fonts and things still in the index but as i dug a little deeper i realized those aren't what I need now.  I do wonder if there is atleast a way to better define the messages in the rooms its bolded in the original there is no formatting in your version and in spite of myself i can seem to fix that. I am in the process of pulling the js files out of the original and comparing them to yours. 


On Monday, January 14, 2013 12:50:57 PM UTC-8, thewriti...@gmail.com wrote:

ajaximrpg

unread,
Jan 15, 2013, 12:17:33 PM1/15/13
to ajax...@googlegroups.com
One way to add font colors is to hack up the PHP format() method in ajax_act.php (in ajaximrpg 5.0).  In ajaximrpg 3.41, message formatting took several different routes through the code but, with ajaximrpg 4.0+, every message goes through the PHP format() method.  So, now, you can add formatting (and macros and hacks) to the PHP format() method and be assured that your formatting will be applied to any message.  You can see the ajax_act.php code here:

http://ajaximrpg.svn.sourceforge.net/viewvc/ajaximrpg/ajax_act.php?revision=102&view=markup

The PHP format() method is towards the very end of the file.  If you look at the existing code, it handles "slash macros" (e.g. /whisper, /name), too, so you can do things more complicated than simple formatting.  If you added a "/color=green" macro, you could hack it here.  Basically, the raw message comes in the $message argument and you return whatever HTML that you want as the return value.  If you don't want to do any formatting, you just return $message unchanged.  The PHP format() method was implemented to make these kinds of hacks possible.

One point of caution is that the PHP format() method is used for the chat log as well so it is a good idea that you create nice XHTML so the chat log won't be messed up.

About the only thing that PHP format() method can't do is do user UI.  If you want the user to press a "color" button instead of typing "/color" (or whatever), the JavaScript side will need to be changed.

I'll try to write up a post about that later today.


Dan
----------------
Play: http://www.svexpertise.com/ajaximrpg/server 
Code: http://ajaximrpg.sourceforge.net 
Tweet: http://www.twitter.com/ajaximrpg 
Discuss: http://groups.google.com/group/ajaximrpg 
Totally free.  Totally easy.  Totally open.  Play RPGs instantly.

O'Reilly Book: Node.js for PHP Developers: Porting PHP to Node.js by Daniel Howard

ajaximrpg

unread,
Jan 15, 2013, 2:41:15 PM1/15/13
to ajax...@googlegroups.com
To add UI for font color, it's a bit more complicated.  You would look at the js/chatroom.js JavaScript file:


You would modify the create() method near the top of the file to add something like the following (from ajaximrpg 3.41):

' <a href="#" class="setFontColorLink" id="' + winId + '_setFontColor" onclick="Chatroom.windows[\'' + name + '\'].toggleFontColorList();return false;" onselectstart="return false;"><div id="' + winId + '_setFontColorColor" style="width:14px;height:14px;display:block;"></div></a>'

This would be inserted around the line (from ajaximrpg 5.0) that looks like:

html += '<a href="#" class="insertEmoticonLink" id="'+winId+'_insertEmoticon" onclick="Chatroom.windows[\''+winName+'\'].toggleEmoticonList();return false;" onselectstart="return false;"><img src="themes/'+theme+'/emoticons/mini_smile.gif" width="14" height="14" style="border:0;" /></a>\r\n';

You would modify the old line to be similar to the emoticon line because they do sort of the same thing.  That should make a button for the font color and allow you to access the original font color popup which you can use as a UI.

The font color pop up box calls the setFontColor() in js/im.basic.js when a font is selected:


You would replace the following code in setFontColor():

sendBox.setStyle({color: color});

with actual HTML like:

sendBox.innerHTML = '<span style="color:green;">'+sendBox.innerHTML+'</span>';

If you were ambitious, you could do text selection detection on sendBox and modify the innerHTML to only change the words that were selected.

Whatever is in the sendBox, the user should be able to press Enter and it will be sent to everybody, including the <span> tags.

That's sort of the broad strokes.  You may have some hassle with getting a parent tag instead of the tag itself or that the <span> tag might get stripped out somewhere along the line (like in ajax_act.php).

Let me know if you have more questions, need more help or want more detail.

If you do come up with some code to share, please let me know.  I'd like to get the feature working again and I'm willing to integrate it into the main code.

Dan
----------------
Play: http://www.svexpertise.com/ajaximrpg/server 
Code: http://ajaximrpg.sourceforge.net 
Tweet: http://www.twitter.com/ajaximrpg 
Discuss: http://groups.google.com/group/ajaximrpg 
Totally free.  Totally easy.  Totally open.  Play RPGs instantly.

O'Reilly Book: Node.js for PHP Developers: Porting PHP to Node.js by Daniel Howard

On Monday, January 14, 2013 5:02:27 PM UTC-8, thewriti...@gmail.com wrote:

thewriti...@gmail.com

unread,
Jan 16, 2013, 12:56:23 AM1/16/13
to ajax...@googlegroups.com
Ok so you have given me a lot to actually work with and I am going to mess with this on my days off but I have a bit more of a pressing issue and a question if you have time. I am running a stock ajax im build for my current uses and working on my ajaximrpg build on a test site in the original I am getting underlined text in chrome for every messages any idea why? Also i am looking at your initial work on the ajaxim files that updates it to current specs or any of the js files compatible with the original or will I have to do my own mods to get it working on the current nod.js version?  I am taring into both as I would like to contribute to both projects and maybe eventually start my own. 


On Monday, January 14, 2013 12:50:57 PM UTC-8, thewriti...@gmail.com wrote:

ajaximrpg

unread,
Jan 16, 2013, 2:15:49 PM1/16/13
to ajax...@googlegroups.com
I reproduced the "underline" bug on Ajax IM 3.41.  In the create() method in js/chat.js, there is a line that sets (and, in Chrome, tries and fails to set) sendBox.style.textDecoration equal to "none:

sendBox.setStyle({top: (this.windows[name].getSize().height - 45) + 'px', left: '2px', width: (this.windows[name].getSize().width - 175) + 'px', fontWeight: '400', fontStyle: 'normal', textDecoration: 'none'});

If you do alert(sendBox.style.textDecoration) right after this line, the value is "initial" on Chrome but is "none" on other browsers.

Later, when the send() method in js/im.js gets the value, it gets "initial" instead of "none" and assumes that underline is turned on.

var isUnderline = (sendBox.style.textDecoration == 'none'? 'false' : 'true');  // textDecoration = initial on Chrome

The workaround is to look for the "initial" value, too:

var isUnderline = (sendBox.style.textDecoration == 'none' || sendBox.style.textDecoration == 'initial'? 'false' : 'true');

Unfortunately, the "underline" button is broken on Chrome.  The reason for that will take more digging.

The Ajax IM 4.00 Node.js version threw away all the code, including the UI, and wrote a new Facebook-style UI and Node.js (instead of PHP) backend.  There is no code in common between Ajax IM 3.41 and Ajax IM 4.00.

The ajaximrpg 5.00 version is a continuation on Ajax IM 3.41.  There is code in common between Ajax IM 3.41 and ajaximrpg 5.0.

The ajaximrpg 5.10 version will rewrite the PHP backend to run on Node.js.  So, ajaximrpg 5.10 will run on PHP or Node.js.

In the farther future, I plan to modify Ajax IM 4.00 and ajaximrpg 5.10 so they share a common API.  At that point, you could mix-and-match Ajax IM and ajaximrpg with PHP and Node.js.

You are welcome to try to fit the Ajax IM 3.41 UI to the Ajax IM 4.00 Node.js backend but that will be a very difficult task.  The Ajax IM 3.41 PHP backend has a different purpose, different APIs, different features and even different techniques than the Ajax IM 4.00 Node.js backend.

Dan
----------------
Play: http://www.svexpertise.com/ajaximrpg/server 
Code: http://ajaximrpg.sourceforge.net 
Tweet: http://www.twitter.com/ajaximrpg 
Discuss: http://groups.google.com/group/ajaximrpg 
Totally free.  Totally easy.  Totally open.  Play RPGs instantly.

O'Reilly Book: Node.js for PHP Developers: Porting PHP to Node.js by Daniel Howard

Reply all
Reply to author
Forward
0 new messages