[Snippet] mChat Live Character Counter Addon

[doktornotor]

Addon Name: mChat Live Character Counter Addon

Author: doktornotor

License: WTFPL v2

Addon Description: Display a real-time indication of your mChat message limit and how many characters you have remaining. You will be prevented from entering any more characters once you reach zero.

Requirements: jQuery maxlength plugin - see attachment (and installed and working mChat, duh!)

Screenshots: (DVGFX2 style)



Install Instructions:

Open: mchat.php

Find:

Code: Select all

'MCHAT_MESSAGE_LNGTH'	=> $config_mchat['max_message_lngth'],

Add after:

Code: Select all

'L_MCHAT_MESSAGE_LNGTH_EXPLAIN'	=> (intval($config_mchat['max_message_lngth'])) ? sprintf($user->lang['MCHAT_MESSAGE_LNGTH_EXPLAIN'], intval($config_mchat['max_message_lngth'])) : '',

Open: language/en/mods/mchat_lang.php

Find:

Code: Select all

'MCHAT_MESS_LONG'			=> 'Your message is too long.\nPlease limit it to %s characters',

Add after:

Code: Select all

'MCHAT_MESSAGE_LNGTH_EXPLAIN'	=> 'Characters remaining: <span class="charsLeft error"><strong>%d</strong></span>',

Open: styles/prosilver/template/overall_header.html

Find:
(Note for jQuery maniacs: This is the instance below the
<!-- IF S_MCHAT_ENABLE and (S_MCHAT_ON_INDEX or U_MCHAT) -->
line and not one of the zillions of others you might have there)

Code: Select all

<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_cookie_mini.js"></script>

Add after:

Code: Select all

<script type="text/javascript" src="{ROOT_PATH}mchat/jquery.maxlength.min.js"></script>

Open: styles/prosilver/template/mchat_body.html

Find:

Code: Select all

<input type="text" name="message" class="inputbox medium mChatText" id="mChatMessage" /><br />

In-line Find

Code: Select all

class="inputbox medium mChatText

In-line Add after

Code: Select all

<!-- IF MCHAT_MESSAGE_LNGTH neq 0 --> limited<!-- ENDIF -->

In-line Find

Code: Select all

id="mChatMessage"

In-line Add after

Code: Select all

<!-- IF MCHAT_MESSAGE_LNGTH neq 0 --> maxlength="{MCHAT_MESSAGE_LNGTH}"<!-- ENDIF -->

Find:

Code: Select all

<input id="submit_button" type="button" class="button2" onclick="mChat.add();" value="{L_MCHAT_ADD}" />

Add before:

Code: Select all

<!-- IF MCHAT_MESSAGE_LNGTH neq 0 --><p>{L_MCHAT_MESSAGE_LNGTH_EXPLAIN}&nbsp;</p><!-- ENDIF -->

Find:

Code: Select all

<!-- IF MCHAT_ALLOW_SMILES and .smiley -->

Add before:

Code: Select all

				<!-- IF MCHAT_MESSAGE_LNGTH neq 0 -->
				<script type="text/javascript">
				// <![CDATA[
					$('input.limited').maxlength({
						'feedback' : '.charsLeft',
						'useInput' : false
					});
				// ]]>
				</script>
				<!-- ENDIF -->

• Save and upload!
• Upload jquery.maxlength.min.js to mchat/ folder.
• Refresh templates and clear board cache.
• Done!

jquery.maxlength.min.js.zip

Notes:
In case you are using the textarea mChat modification, you need to figure out the exact edits yourself, basically the following changes are required:

<!-- IF MCHAT_MESSAGE_LNGTH neq 0 -->
<input type="hidden" name="maxlength" value="{MCHAT_MESSAGE_LNGTH}" />
<script type="text/javascript">
// <![CDATA[
$('textarea.limited').maxlength({
'feedback' : '.charsLeft',
'useInput' : true
});
// ]]>
</script>
<!-- ENDIF -->

plus you DO NOT need to add the following to the message textarea:
<!-- IF MCHAT_MESSAGE_LNGTH neq 0 --> maxlength="{MCHAT_MESSAGE_LNGTH}"<!-- ENDIF -->

Enjoy!

[neuropass]

lol The second picture should be deleted...