Version 2.0.0-RC6

styles/Subway/template/event/dmzx_mchat_messages_define_icons.html

@@ -0,0 +1 @@
+<!-- DEFINE $MCHAT_USE_WHITE_MESSAGE_ICONS = SOP_SKDARK_SW or FALSE -->

styles/Subway/template/event/overall_header_head_append.html

@@ -0,0 +1,2 @@
+<!-- INCLUDECSS @dmzx_mchat/mchat.css -->
+<!-- INCLUDECSS @dmzx_mchat/mchat_custom.css -->

styles/Subway/template/mchat_navlink.html

@@ -0,0 +1 @@
+<li class="li-mchat"><a href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link-title"><i class="icon-mchat"></i><span class="mchat-nav-link">{MCHAT_TITLE}</span></a></li>

styles/Subway/theme/mchat_custom.css

@@ -0,0 +1,16 @@
+/**
+ *
+ * @package phpBB Extension - mChat
+ * @copyright (c) 2016 dmzx - http://www.dmzx-web.net
+ * @copyright (c) 2016 kasimi
+ * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
+ *
+ */
+
+.icon-mchat {
+    background: none;
+}
+
+.icon-mchat:before, #mChat + .inner li.header dt:before {
+    content: '\e0e6';
+}

styles/all/template/javascript/jquery.auto-grow-input.js

@@ -1,47 +0,0 @@
-/*
-	jQuery autoGrowInput v1.0.3
-	Copyright (c) 2014 Simon Steinberger / Pixabay
-	Based on stackoverflow.com/questions/931207 (James Padolsey)
-	GitHub: https://github.com/Pixabay/jQuery-autoGrowInput
-	License: http://www.opensource.org/licenses/mit-license.php
-*/
-
-(function($){
-	var event = 'oninput' in document.createElement('input') ? 'input' : 'keydown';
-
-	$.fn.autoGrowInput = function(options){
-		var o = $.extend({ maxWidth: 500, minWidth: 20, comfortZone: 0 }, options);
-
-		this.each(function(){
-			var input = $(this),
-				val = ' ',
-				comfortZone = (options && 'comfortZone' in options) ? o.comfortZone : parseInt(input.css('fontSize')),
-				span = $('<span/>').css({
-					position: 'absolute',
-					top: -9999,
-					left: -9999,
-					width: 'auto',
-					fontSize: input.css('fontSize'),
-					fontFamily: input.css('fontFamily'),
-					fontWeight: input.css('fontWeight'),
-					letterSpacing: input.css('letterSpacing'),
-					textTransform: input.css('textTransform'),
-					whiteSpace: 'nowrap',
-					ariaHidden: true
-				}).appendTo('body'),
-				check = function(e){
-					if (val === (val = input.val()) && e.type !== 'autogrow') return;
-					if (!val) val = input.attr('placeholder') || '';
-					span.html(val.replace(/&/g, '&amp;').replace(/\s/g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
-					var newWidth = span.width() + comfortZone, mw = typeof(o.maxWidth) == "function" ? o.maxWidth() : o.maxWidth;
-					if (newWidth > mw) newWidth = mw;
-					else if (newWidth < o.minWidth) newWidth = o.minWidth;
-					if (newWidth != input.width()) input.width(newWidth);
-				};
-			input.on(event+'.autogrow autogrow', check);
-			// init on page load
-			check();
-		});
-		return this;
-	}
-}(jQuery));

styles/all/template/javascript/jquery.autogrow-textarea.js

@@ -0,0 +1,211 @@
+// Based off https://code.google.com/p/gaequery/source/browse/trunk/src/static/scripts/jquery.autogrow-textarea.js?r=2
+// Modified by David Beck
+// Mofified by kasimi (c) 2016
+
+( function( factory ) {
+	// UMD wrapper
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( [ 'jquery' ], factory );
+	} else if ( typeof exports !== 'undefined' ) {
+		// Node/CommonJS
+		module.exports = factory( require( 'jquery' ) );
+	} else {
+		// Browser globals
+		factory( jQuery );
+	}
+}( function( $ ) {
+
+	/*
+	 * Auto-growing textareas; technique ripped from Facebook
+	 */
+	$.fn.autogrow = function(options) {
+
+		options = $.extend( {
+			vertical: true,
+			horizontal: false,
+			characterSlop: 0
+		}, options);
+
+		this.filter('textarea,input').each(function() {
+
+			var $this		= $(this),
+				borderBox	= $this.css( 'box-sizing' ) === 'border-box',
+				// minHeight	= borderBox ? $this.outerHeight() : $this.height(),
+				maxHeight	= $this.attr( "maxHeight" ),
+				minWidth	= typeof( $this.attr( "minWidth" ) ) == "undefined" ? 0 : $this.attr( "minWidth" );
+
+			if( typeof( maxHeight ) == "undefined" ) maxHeight = 1000000;
+
+			var shadow = $('<div class="autogrow-shadow"></div>').css( {
+				position:	'absolute',
+				top:		-10000,
+				left:		-10000,
+				fontSize:	$this.css('fontSize'),
+				fontFamily: $this.css('fontFamily'),
+				fontWeight: $this.css('fontWeight'),
+				lineHeight: $this.css('lineHeight'),
+				paddingLeft:	$this.css('paddingLeft'),
+				paddingRight:	$this.css('paddingRight'),
+				paddingTop:	$this.css('paddingTop'),
+				paddingBottom:	$this.css('paddingBottom'),
+				borderTop:	$this.css('borderTop'),
+				borderBottom:	$this.css('borderBottom'),
+				borderLeft:	$this.css('borderLeft'),
+				borderRight:	$this.css('borderRight'),
+				whiteSpace: 'pre-wrap',
+				resize:	 'none'
+			} ).appendTo(document.body);
+
+			shadow.html( 'a' );
+			var characterWidth = shadow.width();
+			shadow.html( '' );
+			var isTextarea = $this.is('textarea');
+
+			var update = function( val ) {
+
+				var times = function(string, number) {
+					for (var i = 0, r = ''; i < number; i ++) r += string;
+					return r;
+				};
+
+				if( typeof val === 'undefined' ) val = this.value;
+				if( val === '' && $(this).attr("placeholder") ) val = $(this).attr("placeholder");
+
+				if( options.vertical )
+					val = val.replace(/&/g, '&amp;')
+						.replace(/</g, '&lt;')
+						.replace(/>/g, '&gt;')
+						.replace(/\n$/, '<br/>&nbsp;')
+						.replace(/\n/g, '<br/>')
+						.replace(/ {2,}/g, function(space) { return times('&nbsp;', space.length -1) + ' '; });
+				else
+					val = escapeHtml( val );
+
+				//if( options.horizontal )
+				//	val = $.trim( val );
+
+				// if( $(this).prop( 'tagName' ).toUpperCase() === 'INPUT' )
+				//	shadow.text(val).css( "width", "auto" );
+				// else
+				shadow.html( val ).css( "width", "auto" ); // need to use html here otherwise no way to count spaces (with html we can use &nbsp;)
+
+				if( options.horizontal )
+				{
+					var slopWidth = options.characterSlop * characterWidth + 2;
+
+					var newWidth = Math.max( shadow.width() + slopWidth, minWidth );
+					var maxWidth = options.maxWidth;
+					//if( typeof( maxWidth ) === "undefined" ) maxWidth = $this.parent().width() - 12; // not sure why we were doing this but seems like a bad idea. doesn't work with inline-block parents for one thing, since it is the text area that should be "pushing" them to be wider
+					if( maxWidth ) newWidth = Math.min( newWidth, maxWidth );
+					// Take scrollbar into account
+					if (isTextarea && shadow.get(0).scrollHeight > shadow.height()) {
+						newWidth += 20;
+					}
+					$(this).css( "width", newWidth );
+				}
+
+				if( options.vertical )
+				{
+					var shadowWidth = $(this).width();
+					if( ! borderBox ) shadowWidth = shadowWidth - parseInt($this.css('paddingLeft'),10) - parseInt($this.css('paddingRight'),10);
+					shadow.css( "width", shadowWidth );
+					var shadowHeight = borderBox ? shadow.outerHeight() : shadow.height();
+
+					$(this).css( "height", "auto" );
+					minHeight = borderBox ? $this.outerHeight() : $this.height();
+
+					var newHeight = Math.min( Math.max( shadowHeight, minHeight ), maxHeight );
+					$(this).css( "height", newHeight );
+					$(this).css( "overflow", newHeight == maxHeight ? "auto" : "hidden" );
+				}
+			};
+
+			$(this)
+				.change(function(){update.call( this );return true;})
+				.keyup(function(){update.call( this );return true;})
+				.keypress(function( event ) {
+					if( event.ctrlKey || event.metaKey ) return;
+
+					var val = this.value;
+					var caretInfo = _getCaretInfo( this );
+
+					var typedChar = event.which === 13 ? "\n" : String.fromCharCode( event.which );
+					var valAfterKeypress = val.slice( 0, caretInfo.start ) + typedChar + val.slice( caretInfo.end );
+					update.call( this, valAfterKeypress );
+					return true;
+				})
+				.bind( "update.autogrow", function(){ update.apply(this); } )
+				.bind( "remove.autogrow", function() {
+					shadow.remove();
+				} );
+
+			update.apply(this);
+
+		});
+
+		return this;
+	};
+
+	// comes from https://github.com/madapaja/jquery.selection/blob/master/src/jquery.selection.js
+	var _getCaretInfo = function(element){
+		var res = {
+			text: '',
+			start: 0,
+			end: 0
+		};
+
+		if (!element.value) {
+			/* no value or empty string */
+			return res;
+		}
+
+		try {
+			if (window.getSelection) {
+				/* except IE */
+				res.start = element.selectionStart;
+				res.end = element.selectionEnd;
+				res.text = element.value.slice(res.start, res.end);
+			} else if (doc.selection) {
+				/* for IE */
+				element.focus();
+
+				var range = doc.selection.createRange(),
+					range2 = doc.body.createTextRange();
+
+				res.text = range.text;
+
+				try {
+					range2.moveToElementText(element);
+					range2.setEndPoint('StartToStart', range);
+				} catch (e) {
+					range2 = element.createTextRange();
+					range2.setEndPoint('StartToStart', range);
+				}
+
+				res.start = element.value.length - range2.text.length;
+				res.end = res.start + range.text.length;
+			}
+		} catch (e) {
+			/* give up */
+		}
+
+		return res;
+	};
+
+	var entityMap = {
+		"&": "&amp;",
+		"<": "&lt;",
+		">": "&gt;",
+		'"': '&quot;',
+		"'": '&#39;',
+		"/": '&#x2F;',
+		" ": '&nbsp;'
+	};
+
+	function escapeHtml(string) {
+		return String(string).replace(/[&<>"'\/\ ]/g, function (s) {
+			return entityMap[s];
+		 } );
+	}
+} ) );

styles/all/template/javascript/js.cookie-2.0.4.min.js

@@ -1,2 +0,0 @@
-/*! js-cookie v2.0.4 | MIT */
-!function(a){if("function"==typeof define&&define.amd)define(a);else if("object"==typeof exports)module.exports=a();else{var b=window.Cookies,c=window.Cookies=a();c.noConflict=function(){return window.Cookies=b,c}}}(function(){function a(){for(var a=0,b={};a<arguments.length;a++){var c=arguments[a];for(var d in c)b[d]=c[d]}return b}function b(c){function d(b,e,f){var g;if(arguments.length>1){if(f=a({path:"/"},d.defaults,f),"number"==typeof f.expires){var h=new Date;h.setMilliseconds(h.getMilliseconds()+864e5*f.expires),f.expires=h}try{g=JSON.stringify(e),/^[\{\[]/.test(g)&&(e=g)}catch(i){}return e=encodeURIComponent(String(e)),e=e.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),b=encodeURIComponent(String(b)),b=b.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent),b=b.replace(/[\(\)]/g,escape),document.cookie=[b,"=",e,f.expires&&"; expires="+f.expires.toUTCString(),f.path&&"; path="+f.path,f.domain&&"; domain="+f.domain,f.secure?"; secure":""].join("")}b||(g={});for(var j=document.cookie?document.cookie.split("; "):[],k=/(%[0-9A-Z]{2})+/g,l=0;l<j.length;l++){var m=j[l].split("="),n=m[0].replace(k,decodeURIComponent),o=m.slice(1).join("=");'"'===o.charAt(0)&&(o=o.slice(1,-1));try{if(o=c&&c(o,n)||o.replace(k,decodeURIComponent),this.json)try{o=JSON.parse(o)}catch(i){}if(b===n){g=o;break}b||(g[n]=o)}catch(i){}}return g}return d.get=d.set=d,d.getJSON=function(){return d.apply({json:!0},[].slice.call(arguments))},d.defaults={},d.remove=function(b,c){d(b,"",a(c,{expires:-1}))},d.withConverter=b,d}return b()});

styles/all/template/javascript/mchat.js

@@ -28,95 +28,172 @@ if (!Array.prototype.min) {
 	};
 }
 
-if (!String.prototype.format) {
-	String.prototype.format = function() {
-		var str = this.toString();
-		if (!arguments.length) {
-			return str;
-		}
-		var type = typeof arguments[0];
-		var args = 'string' == type || 'number' == type ? arguments : arguments[0];
-		jQuery.each(args, function(arg, value) {
-			str = str.replace(RegExp('\\{' + arg + '\\}', 'gi'), value);
-		});
+Array.prototype.removeValue = function(value) {
+	var index = -1;
+	var elementsRemoved = 0;
+	while ((index = this.indexOf(value)) !== -1) {
+		this.splice(index, 1);
+		elementsRemoved++;
+	}
+	return elementsRemoved;
+};
+
+String.prototype.format = function() {
+	var str = this.toString();
+	if (!arguments.length) {
 		return str;
 	}
-}
+	var type = typeof arguments[0];
+	var args = 'string' == type || 'number' == type ? arguments : arguments[0];
+	for (var arg in args) {
+		if (args.hasOwnProperty(arg)) {
+			str = str.replace(new RegExp("\\{" + arg + "\\}", "gi"), args[arg]);
+		}
+	}
+	return str;
+};
+
+String.prototype.replaceMany = function() {
+	var result = this;
+	var args = arguments[0];
+	for (var arg in args) {
+		if (args.hasOwnProperty(arg)) {
+			result = result.replace(new RegExp(RegExp.escape(arg), "g"), args[arg]);
+		}
+	}
+	return result;
+};
+
+RegExp.escape = function(s) {
+	return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+};
 
 jQuery.fn.reverse = function(reverse) {
 	return reverse === 'undefined' || reverse ? jQuery(this.toArray().reverse()) : this;
 };
 
 jQuery(function($) {
-	var ajaxRequest = function(mode, sendHiddenFields, data) {
-		var deferred = $.Deferred();
-		if (sendHiddenFields) {
-			$.extend(data, mChat.hiddenFields);
-		}
-		$.ajax({
-			url: mChat.actionUrls[mode],
-			timeout: Math.min(mChat.refreshTime, 10000),
-			type: 'POST',
-			dataType: 'json',
-			data: data
-		}).done(function(json, status, xhr) {
-			if (json[mode]) {
-				deferred.resolve(json, status, xhr);
-			} else {
-				deferred.reject(xhr, status, xhr.responseJSON ? 'session' : 'unexpected format');
-			}
-		}).fail(function(xhr, status, error) {
-			deferred.reject(xhr, status, error);
-		});
-		return deferred.promise().fail(function(xhr, textStatus, errorThrown) {
-			mChat.sound('error');
-			mChat.cached('status-load', 'status-ok', 'status-paused').hide();
-			mChat.cached('status-error').show();
-			if (errorThrown == 'session') {
-				mChat.endSession(true);
-				alert(mChat.sessOut);
-			} else if (xhr.status == 400) {
-				mChat.resetSession();
-				alert(mChat.flood);
-			} else if (xhr.status == 403) {
-				mChat.endSession(true);
-				alert(mChat.noAccess);
-			} else if (xhr.status == 413) {
-				mChat.resetSession();
-				alert(mChat.mssgLngthLong);
-			} else if (xhr.status == 501) {
-				mChat.resetSession();
-				alert(mChat.noMessageInput);
-			} else if (typeof console !== 'undefined' && console.log) {
-				console.log('AJAX error. status: ' + textStatus + ', message: ' + errorThrown);
-			}
-		});
-	};
+
+	"use strict";
 
 	$.extend(mChat, {
+		ajaxRequest: function(mode, sendHiddenFields, data) {
+			var deferred = $.Deferred();
+			if (sendHiddenFields) {
+				$.extend(data, mChat.hiddenFields);
+			}
+			$(mChat).trigger('mchat_send_request_before', [mode, data]);
+			$.ajax({
+				url: mChat.actionUrls[mode],
+				timeout: Math.min(mChat.refreshTime, 10000),
+				type: 'POST',
+				dataType: 'json',
+				data: data
+			}).done(function(json, status, xhr) {
+				var data = {
+					mode: mode,
+					json: json,
+					status: status,
+					xhr: xhr,
+					handle: true
+				};
+				$(mChat).trigger('mchat_ajax_done_before', [data]);
+				if (data.handle) {
+					if (json[mode]) {
+						deferred.resolve(data.json, data.status, data.xhr);
+					} else {
+						deferred.reject(data.xhr, data.status, mChat.lang.parserErr);
+					}
+				}
+			}).fail(function(xhr, status, error) {
+				deferred.reject(xhr, status, error);
+			});
+			return deferred.promise().fail(function(xhr, textStatus, errorThrown) {
+				if (mChat.pageIsUnloading) {
+					return;
+				}
+				if (typeof console !== 'undefined' && console.log) {
+					console.log('AJAX error. status: ' + textStatus + ', message: ' + errorThrown + ' (' + xhr.responseText + ')');
+				}
+				var data = {
+					mode: mode,
+					xhr: xhr,
+					textStatus: textStatus,
+					errorThrown: errorThrown,
+					updateSession: function(xhr) {
+						if (xhr.status == 403) {
+							mChat.endSession(true);
+						} else if (xhr.status == 400) {
+							mChat.resetSession();
+						}
+					}
+				};
+				$(mChat).trigger('mchat_ajax_fail_before', [data]);
+				mChat.sound('error');
+				mChat.cached('status-load', 'status-ok', 'status-paused').hide();
+				mChat.cached('status-error').show();
+				var responseText;
+				try {
+					responseText = xhr.responseJSON.message || errorThrown;
+				} catch (e) {
+					responseText = errorThrown;
+				}
+				phpbb.alert(mChat.lang.err, responseText);
+				data.updateSession(data.xhr);
+			});
+		},
 		sound: function(file) {
-			if (!mChat.pageIsUnloading && !Cookies.get('mchat_no_sound')) {
-				var audio = mChat.cached('sound-' + file).get(0);
-				if (audio.duration) {
-					audio.pause();
-					audio.currentTime = 0;
-					audio.play();
+			if (!mChat.pageIsUnloading && !localStorage.getItem(mChat.cookie + 'mchat_no_sound')) {
+				var data = {
+					audio: mChat.cached('sound-' + file).get(0),
+					file: file,
+					play: true
+				};
+				$(mChat).trigger('mchat_sound_before', [data]);
+				if (data.play && data.audio.duration) {
+					data.audio.pause();
+					data.audio.currentTime = 0;
+					data.audio.play();
 				}
 			}
 		},
-		notice: function() {
-			if (!document.hasFocus()) {
-				$.titleAlert(mChat.newMessageAlert, {interval: 1000});
+		titleAlert: function() {
+			var data = {
+				doAlert: !document.hasFocus(),
+				interval: 1000
+			};
+			$(mChat).trigger('mchat_titlealert_before', [data]);
+			if (data.doAlert) {
+				$.titleAlert(mChat.lang.newMessageAlert, data);
 			}
 		},
 		toggle: function(name) {
 			var $elem = mChat.cached(name);
-			$elem.stop().slideToggle(function() {
-				var cookieName = 'mchat_show_' + name;
+			$elem.stop().slideToggle('fast', function() {
 				if ($elem.is(':visible')) {
-					Cookies.set(cookieName, 'yes');
+					localStorage.setItem(mChat.cookie + 'mchat_show_' + name, 'yes');
 				} else {
-					Cookies.remove(cookieName);
+					localStorage.removeItem(mChat.cookie + 'mchat_show_' + name);
+				}
+			});
+		},
+		confirm: function(data) {
+			var $confirmFields = data.container.find('.mchat-confirm-fields');
+			$confirmFields.children().hide();
+			var fields = data.fields($confirmFields);
+			$.each(fields, function() {
+				$(this).show();
+			});
+			setTimeout(function() {
+				var $input = $confirmFields.find(':input:visible:enabled:first');
+				if ($input.length) {
+					var value = $input.val();
+					$input.focus().val('').val(value);
+				}
+			}, 1);
+			phpbb.confirm(data.container.show(), function() {
+				if (typeof data.confirm === 'function') {
+					data.confirm.apply(this, fields);
 				}
 			});
 		},
@@ -124,23 +201,34 @@ jQuery(function($) {
 			if (mChat.cached('add').prop('disabled')) {
 				return;
 			}
-			var messageLength = mChat.inputMessageLength();
+			var messageLength = mChat.cached('input').val().length;
 			if (!messageLength) {
-				alert(mChat.noMessageInput);
+				phpbb.alert(mChat.lang.err, mChat.lang.noMessageInput);
 				return;
 			}
 			if (mChat.mssgLngth && messageLength > mChat.mssgLngth) {
-				alert(mChat.mssgLngthLong);
+				phpbb.alert(mChat.lang.err, mChat.lang.mssgLngthLong);
 				return;
 			}
 			mChat.cached('add').prop('disabled', true);
 			mChat.pauseSession();
-			mChat.lastInputValue = mChat.cached('input').val();
-			mChat.cached('input').val('').keyup().trigger('autogrow');
-			mChat.refresh(mChat.lastInputValue).done(function() {
+			var originalInputValue = mChat.cached('input').val();
+			var inputValue = originalInputValue;
+			var color = localStorage.getItem(mChat.cookie + 'mchat_color');
+			if (color && inputValue.indexOf('[color=') === -1) {
+				inputValue = '[color=#' + color + '] ' + inputValue + ' [/color]';
+			}
+			mChat.cached('input').val('');
+			if (mChat.showCharCount) {
+				mChat.updateCharCount();
+			}
+			mChat.refresh(inputValue).done(function() {
 				mChat.resetSession();
 			}).fail(function() {
-				mChat.cached('input').val(mChat.lastInputValue).keyup().trigger('autogrow');
+				mChat.cached('input').val(originalInputValue);
+				if (mChat.showCharCount) {
+					mChat.updateCharCount();
+				}
 			}).always(function() {
 				mChat.cached('add').prop('disabled', false);
 				setTimeout(function() {
@@ -149,90 +237,65 @@ jQuery(function($) {
 			});
 		},
 		edit: function() {
-			var $container = $(this).closest('.mchat-message');
-			var $message = mChat.cached('confirm').find('textarea').show().val($container.data('mchat-message'));
-			mChat.cached('confirm').find('p').text(mChat.editInfo);
-			phpbb.confirm(mChat.cached('confirm'), function() {
-				ajaxRequest('edit', true, {
-					message_id: $container.data('mchat-id'),
-					message: $message.val(),
-					archive: mChat.archivePage ? 1 : 0
-				}).done(function(json) {
-					mChat.updateMessages($(json.edit));
-					mChat.resetSession();
-				});
+			var $message = $(this).closest('.mchat-message');
+			mChat.confirm({
+				container: mChat.cached('confirm'),
+				fields: function($container) {
+					return [
+						$container.find('p').text(mChat.lang.editInfo),
+						$container.find('textarea').val($message.data('mchat-message'))
+					];
+				},
+				confirm: function($p, $textarea) {
+					mChat.ajaxRequest('edit', true, {
+						message_id: $message.data('mchat-id'),
+						message: $textarea.val(),
+						archive: mChat.archivePage ? 1 : 0
+					}).done(function(json) {
+						mChat.updateMessages($(json.edit));
+						mChat.resetSession();
+					});
+				}
 			});
 		},
 		del: function() {
-			var $container = $(this).closest('.mchat-message');
-			mChat.cached('confirm').find('textarea').hide();
-			mChat.cached('confirm').find('p').text(mChat.delConfirm);
-			phpbb.confirm(mChat.cached('confirm'), function() {
-				var delId = $container.data('mchat-id');
-				ajaxRequest('del', true, {
-					message_id: delId
-				}).done(function() {
-					mChat.removeMessages([delId]);
-					mChat.resetSession();
-				});
+			var delId = $(this).closest('.mchat-message').data('mchat-id');
+			mChat.confirm({
+				container: mChat.cached('confirm'),
+				fields: function($container) {
+					return [
+						$container.find('p').text(mChat.lang.delConfirm)
+					];
+				},
+				confirm: function($p) {
+					mChat.ajaxRequest('del', true, {
+						message_id: delId
+					}).done(function() {
+						mChat.removeMessages([delId]);
+						mChat.resetSession();
+					});
+				}
 			});
 		},
 		refresh: function(message) {
 			if (mChat.isPaused && !message) {
 				return false;
 			}
-			var $messages = mChat.cached('messages').children();
 			var data = {
-				message_last_id: mChat.messageIds.length ? mChat.messageIds.max() : 0
+				last: mChat.messageIds.length ? mChat.messageIds.max() : 0
 			};
 			if (message) {
 				data.message = message;
 			}
 			if (mChat.liveUpdates) {
-				data.message_first_id = mChat.messageIds.length ? mChat.messageIds.min() : 0;
-				data.message_edits = {};
-				var now = Math.floor(Date.now() / 1000);
-				$.each($messages, function() {
-					var $message = $(this);
-					var editTime = $message.data('mchat-edit-time');
-					if (editTime && (!mChat.editDeleteLimit || $message.data('mchat-message-time') >= now - mChat.editDeleteLimit / 1000)) {
-						data.message_edits[$message.data('mchat-id')] = editTime;
-					}
-				});
+				data.log = mChat.logId;
 			}
 			mChat.cached('status-ok', 'status-error', 'status-paused').hide();
 			mChat.cached('status-load').show();
-			return ajaxRequest(message ? 'add' : 'refresh', !!message, data).done(function(json) {
+			return mChat.ajaxRequest(message ? 'add' : 'refresh', !!message, data).done(function(json) {
+				$(mChat).trigger('mchat_response_handle_data_before', [json]);
 				if (json.add) {
-					var $html = $(json.add);
-					$('.mchat-no-messages').remove();
-					$html.reverse(mChat.messageTop).hide().each(function(i) {
-						var $message = $(this);
-						if ($.inArray($message.data('mchat-id'), mChat.messageIds) !== -1) {
-							return;
-						}
-						mChat.messageIds.push($message.data('mchat-id'));
-						setTimeout(function() {
-							if (mChat.messageTop) {
-								mChat.cached('messages').prepend($message);
-							} else {
-								mChat.cached('messages').append($message);
-							}
-							$message.css('opacity', 0).slideDown().animate({opacity: 1}, {queue: false});
-							mChat.cached('messages').animate({scrollTop: mChat.messageTop ? 0 : mChat.cached('messages')[0].scrollHeight});
-						}, i * 400);
-						if (mChat.editDeleteLimit && $message.data('mchat-edit-delete-limit') && $message.find('[data-mchat-action="edit"], [data-mchat-action="del"]').length > 0) {
-							var id = $message.prop('id');
-							setTimeout(function() {
-								$('#' + id).find('[data-mchat-action="edit"], [data-mchat-action="del"]').fadeOut(function() {
-									$(this).closest('li').remove();
-								});
-							}, mChat.editDeleteLimit);
-						}
-						mChat.startRelativeTimeUpdate($message);
-					});
-					mChat.sound('add');
-					mChat.notice();
+					mChat.addMessages($(json.add));
 				}
 				if (json.edit) {
 					mChat.updateMessages($(json.edit));
@@ -241,12 +304,16 @@ jQuery(function($) {
 					mChat.removeMessages(json.del);
 				}
 				if (json.whois) {
-					mChat.whois();
+					mChat.handleWhoisResponse(json);
+				}
+				if (json.log) {
+					mChat.logId = json.log;
 				}
 				if (mChat.refreshInterval) {
 					mChat.cached('status-load', 'status-error', 'status-paused').hide();
 					mChat.cached('status-ok').show();
 				}
+				$(mChat).trigger('mchat_response_handle_data_after', [json]);
 			});
 		},
 		whois: function() {
@@ -254,51 +321,133 @@ jQuery(function($) {
 				mChat.cached('refresh-pending').show();
 				mChat.cached('refresh-explain').hide();
 			}
-			ajaxRequest('whois', false, {}).done(function(json) {
-				var $whois = $(json.whois);
-				var $userlist = $whois.find('#mchat-userlist');
-				if (Cookies.get('mchat_show_userlist')) {
-					$userlist.show();
+			mChat.ajaxRequest('whois', false, {}).done(mChat.handleWhoisResponse);
+		},
+		handleWhoisResponse: function(json) {
+			var $whois = $(json.whois);
+			var $userlist = $whois.find('#mchat-userlist');
+			if (localStorage.getItem(mChat.cookie + 'mchat_show_userlist')) {
+				$userlist.show();
+			}
+			mChat.cached('whois').replaceWith($whois);
+			mChat.cache.whois = $whois;
+			mChat.cache.userlist = $userlist;
+			if (mChat.customPage) {
+				mChat.cached('refresh-pending').hide();
+				mChat.cached('refresh-explain').show();
+			}
+			if (json.navlink) {
+				$('.mchat-nav-link').html(json.navlink);
+			}
+			if (json.navlink_title) {
+				$('.mchat-nav-link-title').prop('title', json.navlink_title);
+			}
+		},
+		addMessages: function($messages) {
+			var playSound = true;
+			mChat.cached('messages').find('.mchat-no-messages').remove();
+			$messages.reverse(mChat.messageTop).hide().each(function(i) {
+				var $message = $(this);
+				var data = {
+					message: $message,
+					delay: mChat.refreshInterval ? 400 : 0,
+					abort: $.inArray($message.data('mchat-id'), mChat.messageIds) !== -1,
+					playSound: playSound
+				};
+				$(mChat).trigger('mchat_add_message_before', [data]);
+				if (data.abort) {
+					return;
 				}
-				mChat.cached('whois').replaceWith($whois);
-				mChat.cache.whois = $whois;
-				mChat.cache.userlist = $userlist;
-				if (mChat.customPage) {
-					mChat.cached('refresh-pending').hide();
-					mChat.cached('refresh-explain').show();
+				if (data.playSound) {
+					mChat.sound('add');
+					mChat.titleAlert();
+					playSound = false;
 				}
+				mChat.messageIds.push($message.data('mchat-id'));
+				setTimeout(function() {
+					var $container = mChat.cached('messages');
+					var data = {
+						container: $container,
+						message: $message,
+						add: function() {
+							if (mChat.messageTop) {
+								this.container.prepend(this.message);
+							} else {
+								this.container.append(this.message);
+							}
+						},
+						show: function() {
+							var scrollTop, scrollHeight = mChat.messageTop ? 0 : $container.get(0).scrollHeight;
+							if (mChat.messageTop && (scrollTop = this.container.scrollTop()) > 0) {
+								this.message.show();
+								this.container.scrollTop(scrollTop + this.message.outerHeight());
+							} else {
+								this.message.css('opacity', 0).slideDown('fast').animate({opacity: 1}, {duration: 'fast', queue: false});
+							}
+							if (!mChat.messageTop && this.container.scrollTop() >= scrollHeight - this.container.height()) {
+								this.container.animate({
+									scrollTop: scrollHeight,
+									easing: 'swing',
+									duration: 'slow'
+								});
+							}
+						}
+					};
+					$(mChat).trigger('mchat_add_message_animate_before', [data]);
+					data.add();
+					data.show();
+				}, i * data.delay);
+				if (mChat.editDeleteLimit && $message.data('mchat-edit-delete-limit') && $message.find('[data-mchat-action="edit"], [data-mchat-action="del"]').length > 0) {
+					var id = $message.prop('id');
+					setTimeout(function() {
+						$('#' + id).find('[data-mchat-action="edit"], [data-mchat-action="del"]').fadeOut(function() {
+							$(this).closest('li').remove();
+						});
+					}, mChat.editDeleteLimit);
+				}
+				mChat.startRelativeTimeUpdate($message);
 			});
 		},
 		updateMessages: function($messages) {
-			var soundPlayed = false;
+			var playSound = true;
 			$messages.each(function() {
 				var $newMessage = $(this);
-				var $oldMessage = $('#mchat-message-' + $newMessage.data('mchat-id'));
-				mChat.stopRelativeTimeUpdate($oldMessage);
-				mChat.startRelativeTimeUpdate($newMessage);
-				$oldMessage.fadeOut(function() {
-					$oldMessage.replaceWith($newMessage.hide().fadeIn());
+				var data = {
+					newMessage: $newMessage,
+					oldMessage: $('#mchat-message-' + $newMessage.data('mchat-id')),
+					playSound: playSound
+				};
+				$(mChat).trigger('mchat_edit_message_before', [data]);
+				mChat.stopRelativeTimeUpdate(data.oldMessage);
+				mChat.startRelativeTimeUpdate(data.newMessage);
+				data.oldMessage.fadeOut(function() {
+					data.oldMessage.replaceWith(data.newMessage.hide().fadeIn());
 				});
-				if (!soundPlayed) {
-					soundPlayed = true;
+				if (data.playSound) {
 					mChat.sound('edit');
+					playSound = false;
 				}
 			});
 		},
 		removeMessages: function(ids) {
-			var soundPlayed = false;
+			var playSound = true;
 			$.each(ids, function(i, id) {
-				var index = 0;
-				while ((index = $.inArray(id, mChat.messageIds, index)) !== -1) {
-					mChat.messageIds.splice(index, 1);
-					var $message = $('#mchat-message-' + id);
-					mChat.stopRelativeTimeUpdate($message);
-					$message.fadeOut(function() {
-						$message.remove();
-					});
-					if (!soundPlayed) {
-						soundPlayed = true;
+				if (mChat.messageIds.removeValue(id)) {
+					var data = {
+						id: id,
+						message: $('#mchat-message-' + id),
+						playSound: playSound
+					};
+					$(mChat).trigger('mchat_delete_message_before', [data]);
+					mChat.stopRelativeTimeUpdate(data.message);
+					(function($message) {
+						$message.fadeOut(function() {
+							$message.remove();
+						});
+					})(data.message);
+					if (data.playSound) {
 						mChat.sound('del');
+						playSound = false;
 					}
 				}
 			});
@@ -318,7 +467,7 @@ jQuery(function($) {
 		},
 		relativeTimeUpdate: function($time) {
 			var minutesAgo = $time.data('mchat-minutes-ago') + 1;
-			var langMinutesAgo = mChat.minutesAgo[minutesAgo];
+			var langMinutesAgo = mChat.lang.minutesAgo[minutesAgo];
 			if (langMinutesAgo) {
 				$time.text(langMinutesAgo).data('mchat-minutes-ago', minutesAgo);
 			} else {
@@ -335,14 +484,14 @@ jQuery(function($) {
 		},
 		countDown: function() {
 			mChat.sessionTime -= 1;
-			mChat.cached('session').html(mChat.sessEnds.format({timeleft: mChat.timeLeft(mChat.sessionTime)}));
+			mChat.cached('session').html(mChat.lang.sessEnds.format({timeleft: mChat.timeLeft(mChat.sessionTime)}));
 			if (mChat.sessionTime < 1) {
 				mChat.endSession();
 			}
 		},
 		pauseSession: function() {
 			clearInterval(mChat.refreshInterval);
-			if (mChat.userTimeout) {
+			if (mChat.timeout) {
 				clearInterval(mChat.sessionCountdown);
 			}
 			if (mChat.whoisRefresh) {
@@ -353,10 +502,10 @@ jQuery(function($) {
 			if (!mChat.archivePage) {
 				clearInterval(mChat.refreshInterval);
 				mChat.refreshInterval = setInterval(mChat.refresh, mChat.refreshTime);
-				if (mChat.userTimeout) {
-					mChat.sessionTime = mChat.userTimeout / 1000;
+				if (mChat.timeout) {
+					mChat.sessionTime = mChat.timeout / 1000;
 					clearInterval(mChat.sessionCountdown);
-					mChat.cached('session').html(mChat.sessEnds.format({timeleft: mChat.timeLeft(mChat.sessionTime)}));
+					mChat.cached('session').html(mChat.lang.sessEnds.format({timeleft: mChat.timeLeft(mChat.sessionTime)}));
 					mChat.sessionCountdown = setInterval(mChat.countDown, 1000);
 				}
 				if (mChat.whoisRefresh) {
@@ -365,15 +514,15 @@ jQuery(function($) {
 				}
 				mChat.cached('status-ok').show();
 				mChat.cached('status-load', 'status-error', 'status-paused').hide();
-				mChat.cached('refresh-text').html(mChat.refreshYes);
+				mChat.cached('refresh-text').html(mChat.lang.refreshYes);
 			}
 		},
 		endSession: function(skipUpdateWhois) {
 			clearInterval(mChat.refreshInterval);
 			mChat.refreshInterval = false;
-			if (mChat.userTimeout) {
+			if (mChat.timeout) {
 				clearInterval(mChat.sessionCountdown);
-				mChat.cached('session').html(mChat.sessOut);
+				mChat.cached('session').html(mChat.lang.sessOut);
 			}
 			if (mChat.whoisRefresh) {
 				clearInterval(mChat.whoisInterval);
@@ -383,23 +532,31 @@ jQuery(function($) {
 			}
 			mChat.cached('status-load', 'status-ok', 'status-error').hide();
 			mChat.cached('status-paused').show();
-			mChat.cached('refresh-text').html(mChat.refreshNo);
+			mChat.cached('refresh-text').html(mChat.lang.refreshNo);
 		},
 		pauseStart: function() {
 			mChat.isPaused = true;
-			mChat.cached('refresh-text').html(mChat.refreshNo);
+			mChat.cached('refresh-text').html(mChat.lang.refreshNo);
 			mChat.cached('status-load', 'status-ok', 'status-error').hide();
 			mChat.cached('status-paused').show();
 		},
 		pauseEnd: function() {
-			mChat.cached('refresh-text').html(mChat.refreshYes);
+			mChat.cached('refresh-text').html(mChat.lang.refreshYes);
 			mChat.cached('status-load', 'status-error', 'status-paused').hide();
 			mChat.cached('status-ok').show();
 			mChat.isPaused = false;
 		},
+		updateCharCount: function() {
+			var count = mChat.cached('input').val().length;
+			var charCount = mChat.lang.charCount.format({current: count, max: mChat.mssgLngth});
+			var $elem = mChat.cached('character-count').html(charCount).toggleClass('hidden', count === 0);
+			if (mChat.mssgLngth) {
+				$elem.toggleClass('error', count > mChat.mssgLngth);
+			}
+		},
 		mention: function() {
 			var $container = $(this).closest('.mchat-message');
-			var username = mChat.entityDecode($container.data('mchat-username'));
+			var username = $container.data('mchat-username');
 			var usercolor = $container.data('mchat-usercolor');
 			if (usercolor) {
 				username = '[b][color=' + usercolor + ']' + username + '[/color][/b]';
@@ -410,32 +567,19 @@ jQuery(function($) {
 		},
 		quote: function() {
 			var $container = $(this).closest('.mchat-message');
-			var username = mChat.entityDecode($container.data('mchat-username'));
-			var quote = mChat.entityDecode($container.data('mchat-message'));
+			var username = $container.data('mchat-username');
+			var quote = $container.data('mchat-message');
 			insert_text('[quote="' + username + '"] ' + quote + '[/quote]');
 		},
 		like: function() {
 			var $container = $(this).closest('.mchat-message');
-			var username = mChat.entityDecode($container.data('mchat-username'));
-			var quote = mChat.entityDecode($container.data('mchat-message'));
-			insert_text(mChat.likes + '[quote="' + username + '"] ' + quote + '[/quote]');
+			var username = $container.data('mchat-username');
+			var quote = $container.data('mchat-message');
+			insert_text('[i]' + mChat.lang.likes + '[/i][quote="' + username + '"] ' + quote + '[/quote]');
 		},
 		ip: function() {
 			popup(this.href, 750, 500);
 		},
-		entityDecode: function(text) {
-			var s = decodeURIComponent(text.toString().replace(/\+/g, ' '));
-			s = s.replace(/&lt;/g, '<');
-			s = s.replace(/&gt;/g, '>');
-			s = s.replace(/&#58;/g, ':');
-			s = s.replace(/&#46;/g, '.');
-			s = s.replace(/&amp;/g, '&');
-			s = s.replace(/&quot;/g, "'");
-			return s;
-		},
-		inputMessageLength: function() {
-			return $.trim(mChat.cached('input').val()).replace(/\[\/?[^\[\]]+\]/g, '').length;
-		},
 		cached: function() {
 			return $($.map(arguments, function(name) {
 				if (!mChat.cache[name]) {
@@ -449,8 +593,6 @@ jQuery(function($) {
 	});
 
 	mChat.cache = {};
-	mChat.cached('confirm').detach().show();
-
 	mChat.messageIds = mChat.cached('messages').children().map(function() {
 		return $(this).data('mchat-id');
 	}).get();
@@ -469,44 +611,43 @@ jQuery(function($) {
 			mChat.cached('messages').animate({scrollTop: mChat.cached('messages')[0].scrollHeight, easing: 'swing', duration: 'slow'});
 		}
 
-		if (!mChat.cached('user-sound').prop('checked')) {
-			Cookies.set('mchat_no_sound', 'yes');
-		}
-
-		mChat.cached('user-sound').prop('checked', mChat.playSound && !Cookies.get('mchat_no_sound')).change(function() {
+		mChat.cached('user-sound').prop('checked', mChat.playSound && !localStorage.getItem(mChat.cookie + 'mchat_no_sound')).change(function() {
 			if (this.checked) {
-				Cookies.remove('mchat_no_sound');
+				localStorage.removeItem(mChat.cookie + 'mchat_no_sound');
 			} else {
-				Cookies.set('mchat_no_sound', 'yes');
+				localStorage.setItem(mChat.cookie + 'mchat_no_sound', 'yes');
 			}
-		});
+		}).change();
 
 		$.each(mChat.removeBBCodes.split('|'), function(i, bbcode) {
-			$('#format-buttons .bbcode-' + bbcode).remove();
+			var bbCodeClass = '.bbcode-' + bbcode.replaceMany({
+				'=': '-',
+				'*': 'asterisk'
+			});
+			$('#format-buttons').find(bbCodeClass).remove();
 		});
 
 		var $colourPalette = $('#colour_palette');
 		$colourPalette.appendTo($colourPalette.parent()).wrap('<div id="mchat-colour"></div>').show();
-		$('#bbpalette,#abbc3_bbpalette').prop('onclick', null).attr('data-mchat-toggle', 'colour');
+		$('#bbpalette,#abbc3_bbpalette,#color_wheel').prop('onclick', null).attr('data-mchat-toggle', 'colour');
 
 		$.each(['userlist', 'smilies', 'bbcodes', 'colour'], function(i, elem) {
-			if (Cookies.get('mchat_show_' + elem)) {
+			if (localStorage.getItem(mChat.cookie + 'mchat_show_' + elem)) {
 				mChat.cached(elem).toggle();
 			}
 		});
 
-		if (mChat.cached('input').is('input')) {
-			mChat.cached('form').keypress(function(e) {
-				if (e.which == 13) {
-					mChat.add();
-					e.preventDefault();
-					e.stopImmediatePropagation();
-				}
-			});
-		}
+		mChat.isTextarea = mChat.cached('input').is('textarea');
+		mChat.cached('form').submit(function(e){
+			e.preventDefault();
+		}).keypress(function(e) {
+			if ((e.which == 10 || e.which == 13) && (!mChat.isTextarea || e.ctrlKey || e.metaKey) && mChat.cached('input').is(e.target)) {
+				mChat.add();
+			}
+		});
 
 		if (mChat.pause) {
-			mChat.cached('form').keyup(function(e) {
+			mChat.cached('form').on('input', function() {
 				if (mChat.refreshInterval !== false) {
 					var val = mChat.cached('input').val();
 					if (mChat.isPaused && val === '') {
@@ -519,21 +660,12 @@ jQuery(function($) {
 		}
 
 		if (mChat.showCharCount) {
-			mChat.cached('form').keyup(function(e) {
-				var count = mChat.inputMessageLength();
-				var $elem = mChat.cached('character-count');
-				$elem.html(mChat.charCount.format({current: count, max: mChat.mssgLngth})).css('visibility', count > 0 ? 'visible' : 'hidden');
-				if (mChat.mssgLngth) {
-					$elem.toggleClass('error', count > mChat.mssgLngth);
-				}
-			});
+			mChat.cached('form').on('input', mChat.updateCharCount);
 		}
 
-		mChat.cached('form').one('keypress', function() {
-			mChat.cached('input').autoGrowInput({
-				minWidth: mChat.cached('input').width(),
-				maxWidth: mChat.cached('form').width() - (mChat.cached('input').outerWidth(true) - mChat.cached('input').width())
-			});
+		mChat.cached('input').autogrow({
+			vertical: false,
+			horizontal: true
 		});
 	}
 
@@ -543,13 +675,34 @@ jQuery(function($) {
 		mChat.pageIsUnloading = true;
 	});
 
+	mChat.cached('colour').find('.colour-palette').on('click', 'a', function(e) {
+		if (e.ctrlKey || e.metaKey) {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			var $this = $(this);
+			var newColor = $this.data('color');
+			if (localStorage.getItem(mChat.cookie + 'mchat_color') === newColor) {
+				localStorage.removeItem(mChat.cookie + 'mchat_color');
+			} else {
+				localStorage.setItem(mChat.cookie + 'mchat_color', newColor);
+				mChat.cached('colour').find('.colour-palette a').removeClass('remember-color');
+			}
+			$this.toggleClass('remember-color');
+		}
+	});
+
+	var color = localStorage.getItem(mChat.cookie + 'mchat_color');
+	if (color) {
+		mChat.cached('colour').find('.colour-palette a[data-color="' + color + '"]').addClass('remember-color');
+	}
+
 	$('#phpbb').on('click', '[data-mchat-action]', function(e) {
+		e.preventDefault();
 		var action = $(this).data('mchat-action');
 		mChat[action].call(this);
-		e.preventDefault();
 	}).on('click', '[data-mchat-toggle]', function(e) {
+		e.preventDefault();
 		var elem = $(this).data('mchat-toggle');
 		mChat.toggle(elem);
-		e.preventDefault();
 	});
 });

styles/all/template/mchat_script_data.html

@@ -1,3 +1,11 @@
+<!-- IF MCHAT_IS_ARCHIVE_PAGE or not (MCHAT_ALLOW_USE and S_BBCODE_ALLOWED) -->
+	<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js -->
+<!-- ENDIF -->
+
+<!-- INCLUDEJS javascript/jquery.autogrow-textarea.js -->
+<!-- INCLUDEJS javascript/jquery.titlealert.min.js -->
+<!-- INCLUDEJS javascript/mchat.js -->
+
 <script type="text/javascript">
 	// <![CDATA[
 	var form_name = 'postform';
@@ -9,6 +17,8 @@
 			{mchaturl.ACTION}: '{mchaturl.URL}'<!-- IF not mchaturl.IS_LAST -->,<!-- ENDIF -->
 			<!-- END mchaturl -->
 		},
+		page			: '{MCHAT_PAGE}',
+		cookie			: '{A_COOKIE_NAME}',
 		customPage		: <!-- IF MCHAT_IS_CUSTOM_PAGE -->true<!-- ELSE -->false<!-- ENDIF -->,
 		archivePage		: <!-- IF MCHAT_IS_ARCHIVE_PAGE -->true<!-- ELSE -->false<!-- ENDIF -->,
 		pause			: <!-- IF MCHAT_PAUSE_ON_INPUT -->true<!-- ELSE -->false<!-- ENDIF -->,
@@ -22,31 +32,33 @@
 		// Limits & timeouts
 		refreshTime		: {MCHAT_REFRESH_JS},
 		whoisRefresh	: {MCHAT_WHOIS_REFRESH},
-		userTimeout		: {MCHAT_USER_TIMEOUT},
+		timeout			: {MCHAT_TIMEOUT},
 		mssgLngth		: {MCHAT_MESSAGE_LNGTH},
 		editDeleteLimit	: {MCHAT_EDIT_DELETE_LIMIT},
+		logId			: {MCHAT_LOG_ID},
 		removeBBCodes	: '{A_MCHAT_DISALLOWED_BBCODES}',
 
 		// Language
-		minutesAgo		: {
-			<!-- BEGIN mchattime -->
-			{mchattime.KEY}: '{mchattime.A_LANG}'<!-- IF not mchattime.IS_LAST -->,<!-- ENDIF -->
-			<!-- END mchattime -->
-		},
-		newMessageAlert	: '{LA_MCHAT_NEW_CHAT}',
-		noMessageInput	: '{LA_MCHAT_NOMESSAGEINPUT}',
-		noMessages		: '{LA_MCHAT_NOMESSAGE}',
-		editInfo		: '{LA_MCHAT_EDITINFO}',
-		noAccess		: '{LA_NO_AUTH_OPERATION}',
-		flood			: '{LA_MCHAT_FLOOD}',
-		delConfirm		: '{LA_MCHAT_DELCONFIRM}',
-		sessOut			: '{LA_MCHAT_SESSION_OUT}',
-		sessEnds		: '{LA_MCHAT_SESSION_ENDS_JS}',
-		refreshYes		: '{A_MCHAT_REFRESH_YES}',
-		refreshNo		: '{LA_MCHAT_REFRESH_NO}',
-		charCount		: '<!-- IF MCHAT_MESSAGE_LNGTH -->{LA_MCHAT_CHARACTER_COUNT_LIMIT}<!-- ELSE -->{LA_MCHAT_CHARACTER_COUNT}<!-- ENDIF -->',
-		mssgLngthLong	: '{A_MCHAT_MESS_LONG}',
-		likes			: '{LA_MCHAT_LIKES}'
+		lang: {
+			minutesAgo		: {
+				<!-- BEGIN mchattime -->
+				{mchattime.KEY}: '{mchattime.A_LANG}'<!-- IF not mchattime.IS_LAST -->,<!-- ENDIF -->
+				<!-- END mchattime -->
+			},
+			err				: '{LA_ERROR}',
+			parserErr		: '{LA_AJAX_ERROR_TEXT_PARSERERROR}',
+			newMessageAlert	: '{LA_MCHAT_NEW_CHAT}',
+			noMessageInput	: '{LA_MCHAT_NOMESSAGEINPUT}',
+			editInfo		: '{LA_MCHAT_EDITINFO}',
+			delConfirm		: '{LA_MCHAT_DELCONFIRM}',
+			sessOut			: '{LA_MCHAT_SESSION_OUT}',
+			sessEnds		: '{LA_MCHAT_SESSION_ENDS_JS}',
+			refreshYes		: '{A_MCHAT_REFRESH_YES}',
+			refreshNo		: '{LA_MCHAT_REFRESH_NO}',
+			charCount		: '<!-- IF MCHAT_MESSAGE_LNGTH -->{LA_MCHAT_CHARACTER_COUNT_LIMIT}<!-- ELSE -->{LA_MCHAT_CHARACTER_COUNT}<!-- ENDIF -->',
+			mssgLngthLong	: '{A_MCHAT_MESS_LONG}',
+			likes			: '{LA_MCHAT_LIKES}'
+		}
 	};
 // ]]>
 </script>

styles/basic/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">{L_MCHAT_TITLE}</a></li>
+<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link mchat-nav-link-title" role="menuitem">{MCHAT_TITLE}</a></li>

styles/basic/theme/mchat_custom.css

@@ -8,32 +8,32 @@
  */
 
 .icon-mchat {
-    position: relative;
+	position: relative;
 }
 
 .icon-mchat:after {
-    content: '\f086';
-    font-family: 'FontAwesome';
-    width: 18px;
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    height: 14px;
-    margin-top: -7px;
-    font-size: 12px;
-    line-height: 14px;
-    vertical-align: baseline;
-    font-weight: normal;
-    font-style: normal;
-    text-transform: none;
-    text-indent: 0;
-    pointer-events: none;
+	content: '\f086';
+	font-family: 'FontAwesome';
+	width: 18px;
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 0;
+	height: 14px;
+	margin-top: -7px;
+	font-size: 12px;
+	line-height: 14px;
+	vertical-align: baseline;
+	font-weight: normal;
+	font-style: normal;
+	text-transform: none;
+	text-indent: 0;
+	pointer-events: none;
 }
 
 .navbar .nav-tabs .mchat .nav-link {
 	position: relative;
-    text-indent: 999px;
+	text-indent: 999px;
 	width: 15px;
 	padding: 0 8px;
 	overflow: hidden;
@@ -41,7 +41,7 @@
 
 .navbar .nav-tabs .mchat .nav-link:after {
 	content: '\f086';
-    font-family: 'FontAwesome';
+	font-family: 'FontAwesome';
 	position: absolute;
 	top: 50%;
 	margin-top: -7.5px;
@@ -51,18 +51,18 @@
 	font-weight: normal;
 	font-style: normal;
 	text-indent: 0;
-    text-align: center;
+	text-align: center;
 	font-size: 15px;
 	left:8px
 }
 
 .rtl .navbar .nav-tabs .mchat .nav-link {
-    padding-left: 12px;
+	padding-left: 12px;
 	padding-right: 30px;
 }
 
 .rtl .navbar .nav-tabs .mchat .nav-link:after {
-    left: auto;
+	left: auto;
 	right: 8px;
 }
 

styles/black/template/event/dmzx_mchat_messages_define_icons.html

@@ -0,0 +1 @@
+<!-- DEFINE $MCHAT_USE_WHITE_MESSAGE_ICONS = TRUE -->

styles/black/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">{L_MCHAT_TITLE}</a></li>
+<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link mchat-nav-link-title" role="menuitem">{MCHAT_TITLE}</a></li>

styles/black/theme/mchat_custom.css

@@ -65,7 +65,3 @@
 	left: auto;
 	right: 8px;
 }
-
-.mchat-button:before {
-	background-image: url("./images/message_icons.png");
-}

styles/canvas/template/event/overall_footer_after.html

@@ -0,0 +1,3 @@
+<!-- IF MCHAT_ALLOW_USE -->
+	<script>$.sceditor = false;</script>
+<!-- ENDIF -->

styles/canvas/template/event/overall_header_head_append.html

@@ -0,0 +1,2 @@
+<!-- INCLUDECSS @dmzx_mchat/mchat.css -->
+<!-- INCLUDECSS @dmzx_mchat/mchat_custom.css -->

styles/canvas/theme/mchat_custom.css

@@ -0,0 +1,28 @@
+/**
+ *
+ * @package phpBB Extension - mChat
+ * @copyright (c) 2016 dmzx - http://www.dmzx-web.net
+ * @copyright (c) 2016 kasimi
+ * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
+ *
+ */
+
+ul#mchat-messages.topiclist li {
+	padding: 0;
+}
+
+.mchat-text {
+	font-size: 1.1em;
+}
+
+ul.mchat-buttons > li {
+	background: none !important;
+}
+
+#mchat-panel.cp-mini .button2 {
+	float: none;
+}
+
+#mchat-panel #st_editor_buttons {
+	display: block !important;
+}

styles/elegance/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">{L_MCHAT_TITLE}</a></li>
+<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link mchat-nav-link-title" role="menuitem">{MCHAT_TITLE}</a></li>

styles/latte/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">{L_MCHAT_TITLE}</a></li>
+<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link mchat-nav-link-title" role="menuitem">{MCHAT_TITLE}</a></li>

styles/metro_blue/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="small-icon icon-mchat" data-last-responsive="true"><a href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem"><span>{L_MCHAT_TITLE}</span></a></li>
+<li class="small-icon icon-mchat" data-last-responsive="true"><a href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link-title" role="menuitem"><span class="mchat-nav-link">{MCHAT_TITLE}</span></a></li>

styles/pbtech/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="small-icon icon-mchat"><a href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">{L_MCHAT_TITLE}</a></li>
+<li class="small-icon icon-mchat"><a href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link mchat-nav-link-title" role="menuitem">{MCHAT_TITLE}</a></li>

styles/pbtech/theme/mchat_custom.css

@@ -12,7 +12,7 @@
 	font-family: 'FontAwesome';
 }
 
-#mchat-panel.cp-mini {
+#mchat-body .cp-mini {
 	background-color: #E5E4E3;
 }
 

styles/pbwow3/template/event/dmzx_mchat_messages_define_icons.html

@@ -0,0 +1 @@
+<!-- DEFINE $MCHAT_USE_WHITE_MESSAGE_ICONS = TRUE -->

styles/pbwow3/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="small-icon icon-mchat"><a href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">{L_MCHAT_TITLE}</a></li>
+<li class="small-icon icon-mchat"><a href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link mchat-nav-link-title" role="menuitem">{MCHAT_TITLE}</a></li>

styles/pbwow3/theme/mchat_custom.css

@@ -20,7 +20,3 @@
 	content: '';
 	margin-right: 0;
 }
-
-.mchat-button:before {
-	background-image: url("./images/message_icons.png");
-}

styles/prosilver/template/event/dmzx_mchat_custom_include.html

@@ -0,0 +1,3 @@
+<!-- IF MCHAT_CUSTOM_INCLUDE -->
+	<!-- INCLUDE mchat_body.html -->
+<!-- ENDIF -->

styles/prosilver/template/event/dmzx_mchat_messages_define_icons.html

@@ -0,0 +1 @@
+<!-- DEFINE $MCHAT_USE_WHITE_MESSAGE_ICONS = FALSE -->

styles/prosilver/template/event/index_body_block_online_append.html

@@ -3,5 +3,5 @@
 	</div>
 	<div class="stat-block online-list mchat-stats-index">
 		<h3><a href="<!-- IF MCHAT_CUSTOM_PAGE and not MCHAT_INDEX -->{U_MCHAT}<!-- ENDIF -->#mChat">{L_MCHAT_WHO_IS_CHATTING}</a></h3>
-		<p>{MCHAT_USERS_COUNT} {MCHAT_ONLINE_EXPLAIN}<br />{MCHAT_USERS_LIST}
+		<p>{MCHAT_USERS_TOTAL} {MCHAT_ONLINE_EXPLAIN}<br />{MCHAT_USERS_LIST}
 <!-- ENDIF -->

styles/prosilver/template/event/overall_footer_copyright_append.html

@@ -1,3 +1,4 @@
 <!-- IF MCHAT_IS_INDEX or MCHAT_IS_ARCHIVE_PAGE or MCHAT_IS_CUSTOM_PAGE -->
-	<div>{MCHAT_DISPLAY_NAME} &copy; {L_POST_BY_AUTHOR} {MCHAT_AUTHOR_HOMEPAGES}</div>
+	<br />
+	<span>{MCHAT_DISPLAY_NAME} &copy; {L_POST_BY_AUTHOR} {MCHAT_AUTHOR_HOMEPAGES}</span>
 <!-- ENDIF -->

styles/prosilver/template/event/overall_header_navigation_append.html

@@ -1,3 +1,3 @@
-<!-- IF MCHAT_CUSTOM_PAGE and MCHAT_NAVBAR_LINK and MCHAT_ALLOW_VIEW -->
+<!-- IF MCHAT_CUSTOM_PAGE and MCHAT_NAVBAR_LINK -->
 	<!-- INCLUDE mchat_navlink.html -->
 <!-- ENDIF -->

styles/prosilver/template/mchat_body.html

@@ -2,16 +2,11 @@
 	<!-- INCLUDE overall_header.html -->
 <!-- ENDIF -->
 
-<!-- IF MCHAT_IS_ARCHIVE_PAGE or not (MCHAT_ALLOW_USE and S_BBCODE_ALLOWED) -->
-	<!-- INCLUDEJS {T_ASSETS_PATH}/javascript/editor.js -->
-<!-- ENDIF -->
-<!-- INCLUDEJS javascript/jquery.auto-grow-input.js -->
-<!-- INCLUDEJS javascript/jquery.titlealert.min.js -->
-<!-- INCLUDEJS javascript/js.cookie-2.0.4.min.js -->
-<!-- INCLUDEJS javascript/mchat.js -->
+<!-- INCLUDE mchat_script_data.html -->
 
 <!-- IF MCHAT_IS_ARCHIVE_PAGE and (.pagination or MCHAT_TOTAL_MESSAGES) -->
 <div class="action-bar bar-top">
+	<!-- EVENT dmzx_mchat_action_bar_top_before -->
 	<div class="pagination">
 		{MCHAT_TOTAL_MESSAGES}
 		<!-- IF .pagination -->
@@ -20,16 +15,17 @@
 			&bull; {PAGE_NUMBER}
 		<!-- ENDIF -->
 	</div>
+	<!-- EVENT dmzx_mchat_action_bar_top_after -->
 </div>
 <!-- ENDIF -->
 
-<!-- EVENT dmzx_mchat_body_before -->
+<!-- EVENT dmzx_mchat_before -->
 
 <!-- IF MCHAT_IS_COLLAPSIBLE -->
 	<a class="category<!-- IF S_MCHAT_HIDDEN --> hidden-category<!-- ENDIF --> mchat-category"></a>
 <!-- ENDIF -->
 
-<div class="forabg">
+<div class="forabg mchat-wrapper">
 	<a id="mChat"></a>
 	<div class="inner">
 		<ul class="topiclist">
@@ -46,9 +42,9 @@
 			</li>
 		</ul>
 
-		<div id="mchat-body" class="postbody<!-- IF MCHAT_IS_COLLAPSIBLE --> collapsible<!-- ENDIF -->">
-			<!-- INCLUDE mchat_script_data.html -->
+		<!-- EVENT dmzx_mchat_body_before -->
 
+		<div id="mchat-body"<!-- IF MCHAT_IS_COLLAPSIBLE --> class="collapsible"<!-- ENDIF -->>
 			<!-- IF not MCHAT_SOUND_DISABLED -->
 				<audio id="mchat-sound-add" class="hidden" src="{EXT_URL}sounds/add.mp3" preload="auto"></audio>
 				<audio id="mchat-sound-edit" class="hidden" src="{EXT_URL}sounds/edit.mp3" preload="auto"></audio>
@@ -58,8 +54,10 @@
 
 			<div id="mchat-confirm" class="hidden">
 				<h3>{L_CONFIRM}</h3>
-				<p></p>
-				<textarea></textarea>
+				<div class="mchat-confirm-fields">
+					<p></p>
+					<textarea></textarea>
+				</div>
 				<fieldset class="submit-buttons">
 					<input type="button" name="confirm" value="{L_MCHAT_OK}" class="button2" />&nbsp;
 					<input type="button" name="cancel" value="{L_CANCEL}" class="button2" />
@@ -73,6 +71,8 @@
 					</ul>
 				<!-- ENDIF -->
 
+				<!-- EVENT dmzx_mchat_messages_container_before -->
+
 				<ul id="mchat-messages" class="topiclist forums"<!-- IF not MCHAT_IS_ARCHIVE_PAGE --> style="height:<!-- IF MCHAT_IS_CUSTOM_PAGE -->{MCHAT_CUSTOM_HEIGHT}<!-- ELSE -->{MCHAT_INDEX_HEIGHT}<!-- ENDIF -->px"<!-- ENDIF -->>
 					<!-- IF .mchatrow -->
 						<!-- INCLUDE mchat_messages.html -->
@@ -80,15 +80,22 @@
 						<li class="row mchat-static mchat-no-messages">{L_MCHAT_NOMESSAGE}</li>
 					<!-- ENDIF -->
 				</ul>
+
+				<!-- EVENT dmzx_mchat_messages_container_after -->
 			</div>
 
 			<!-- INCLUDE mchat_panel.html -->
 		</div>
+
+		<!-- EVENT dmzx_mchat_body_after -->
 	</div>
 </div>
 
+<!-- EVENT dmzx_mchat_after -->
+
 <!-- IF MCHAT_IS_ARCHIVE_PAGE -->
 <div class="action-bar bottom">
+	<!-- EVENT dmzx_mchat_action_bar_bottom_before -->
 	<div class="pagination">
 		{MCHAT_TOTAL_MESSAGES}
 		<!-- IF .pagination -->
@@ -97,6 +104,7 @@
 			&bull; {PAGE_NUMBER}
 		<!-- ENDIF -->
 	</div>
+	<!-- EVENT dmzx_mchat_action_bar_top_after -->
 </div>
 <!-- ENDIF -->
 

styles/prosilver/template/mchat_header.html

@@ -1,4 +1,4 @@
 <dl class="row-item">
 	<dt><!-- IF MCHAT_IS_ARCHIVE_PAGE -->{L_MCHAT_ARCHIVE_PAGE}<!-- ELSEIF MCHAT_CUSTOM_PAGE --><a href="{U_MCHAT_CUSTOM_PAGE}" title="{L_MCHAT_TITLE}">{L_MCHAT_TITLE}</a><!-- ELSE -->{L_MCHAT_TITLE}<!-- ENDIF --></dt>
-	<dd style="border:none">&nbsp;</dd>
+	<dd></dd>
 </dl>

styles/prosilver/template/mchat_messages.html

@@ -1,5 +1,8 @@
+<!-- EVENT dmzx_mchat_messages_before -->
+<!-- EVENT dmzx_mchat_messages_define_icons -->
+
 <!-- BEGIN mchatrow -->
-<li id="mchat-message-{mchatrow.MCHAT_MESSAGE_ID}" class="row mchat-message" data-mchat-id="{mchatrow.MCHAT_MESSAGE_ID}" data-mchat-username="{mchatrow.MCHAT_USERNAME}"<!-- IF mchatrow.MCHAT_USERNAME_COLOR --> data-mchat-usercolor="{mchatrow.MCHAT_USERNAME_COLOR}"<!-- ENDIF --> data-mchat-message="{mchatrow.MCHAT_MESSAGE_EDIT}" data-mchat-message-time="{mchatrow.MCHAT_MESSAGE_TIME}" data-mchat-edit-time="{mchatrow.MCHAT_EDIT_TIME}"<!-- IF MCHAT_EDIT_DELETE_LIMIT and not MCHAT_EDIT_DELETE_IGNORE and (mchatrow.MCHAT_ALLOW_EDIT or mchatrow.MCHAT_ALLOW_DEL) --> data-mchat-edit-delete-limit="1"<!-- ENDIF -->>
+<li id="mchat-message-{mchatrow.MCHAT_MESSAGE_ID}" class="row mchat-message<!-- IF mchatrow.MCHAT_IS_NOTIFICATION --> mchat-notification-message<!-- ENDIF -->" data-mchat-id="{mchatrow.MCHAT_MESSAGE_ID}" data-mchat-username="{mchatrow.MCHAT_USERNAME}"<!-- IF mchatrow.MCHAT_USERNAME_COLOR --> data-mchat-usercolor="{mchatrow.MCHAT_USERNAME_COLOR}"<!-- ENDIF --> data-mchat-message="{mchatrow.MCHAT_MESSAGE_EDIT}" data-mchat-message-time="{mchatrow.MCHAT_MESSAGE_TIME}"<!-- IF MCHAT_EDIT_DELETE_LIMIT and not MCHAT_EDIT_DELETE_IGNORE and (mchatrow.MCHAT_ALLOW_EDIT or mchatrow.MCHAT_ALLOW_DEL) --> data-mchat-edit-delete-limit="1"<!-- ENDIF --> <!-- EVENT dmzx_mchat_message_attributes -->>
 	<!-- IF S_MCHAT_AVATARS -->
 	<div class="mchat-avatar">
 		<!-- IF mchatrow.U_VIEWPROFILE --><a href="{mchatrow.U_VIEWPROFILE}" title="{L_READ_PROFILE}"><!-- ENDIF -->
@@ -14,3 +17,5 @@
 	</div>
 </li>
 <!-- END mchatrow -->
+
+<!-- EVENT dmzx_mchat_messages_after -->

styles/prosilver/template/mchat_messages_icons.html

@@ -1,20 +1,20 @@
 <!-- IF not S_IS_BOT -->
-	<!-- DEFINE $MCHAT_ALLOW_MENTION = not mchatrow.MCHAT_IS_POSTER and not MCHAT_IS_ARCHIVE_PAGE -->
-	<!-- DEFINE $MCHAT_ALLOW_QUOTE = MCHAT_ALLOW_QUOTE and not MCHAT_IS_ARCHIVE_PAGE and not mchatrow.MCHAT_IS_POSTER -->
-	<!-- DEFINE $MCHAT_ALLOW_LIKE = MCHAT_ALLOW_LIKE and not MCHAT_IS_ARCHIVE_PAGE and not mchatrow.MCHAT_IS_POSTER -->
+	<!-- DEFINE $MCHAT_ALLOW_MENTION = MCHAT_ALLOW_USE and not mchatrow.MCHAT_IS_POSTER and not MCHAT_IS_ARCHIVE_PAGE -->
+	<!-- DEFINE $MCHAT_ALLOW_QUOTE = MCHAT_ALLOW_USE and S_BBCODE_ALLOWED and MCHAT_ALLOW_QUOTE and not MCHAT_IS_ARCHIVE_PAGE -->
+	<!-- DEFINE $MCHAT_ALLOW_LIKE = MCHAT_ALLOW_USE and S_BBCODE_ALLOWED and MCHAT_ALLOW_LIKE and not MCHAT_IS_ARCHIVE_PAGE and not mchatrow.MCHAT_IS_POSTER -->
 	<!-- DEFINE $MCHAT_ALLOW_PM = MCHAT_ALLOW_PM and mchatrow.MCHAT_PM and mchatrow.U_VIEWPROFILE -->
-	<!-- DEFINE $MCHAT_ALLOW_EDIT = mchatrow.MCHAT_ALLOW_EDIT -->
+	<!-- DEFINE $MCHAT_ALLOW_EDIT = mchatrow.MCHAT_ALLOW_EDIT and not mchatrow.MCHAT_IS_NOTIFICATION -->
 	<!-- DEFINE $MCHAT_ALLOW_DEL = mchatrow.MCHAT_ALLOW_DEL -->
 	<!-- IF $MCHAT_ALLOW_MENTION or $MCHAT_ALLOW_QUOTE or $MCHAT_ALLOW_LIKE or $MCHAT_ALLOW_PM or MCHAT_ALLOW_IP or MCHAT_ALLOW_PERMISSIONS or $MCHAT_ALLOW_EDIT or $MCHAT_ALLOW_DEL -->
-		<ul class="mchat-buttons">
-			<!-- IF $MCHAT_ALLOW_MENTION --><li><a href="#" title="{L_MCHAT_RESPOND}" data-mchat-action="mention"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-mention<!-- ELSEIF IS_PHPBB32 -->fa fa-at<!-- ENDIF -->"><span>{L_MCHAT_RESPOND}</span></i></a></li><!-- ENDIF -->
-			<!-- IF $MCHAT_ALLOW_QUOTE --><li><a href="#" title="{L_REPLY_WITH_QUOTE}" data-mchat-action="quote"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-quote<!-- ELSEIF IS_PHPBB32 -->fa fa-quote-left<!-- ENDIF -->"><span>{L_REPLY_WITH_QUOTE}</span></i></a></li><!-- ENDIF -->
-			<!-- IF $MCHAT_ALLOW_LIKE --><li><a href="#" title="{L_MCHAT_LIKE}" data-mchat-action="like"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-like<!-- ELSEIF IS_PHPBB32 -->fa fa-thumbs-o-up<!-- ENDIF -->"><span>{L_MCHAT_LIKE}</span></i></a></li><!-- ENDIF -->
-			<!-- IF $MCHAT_ALLOW_PM --><li><a href="{mchatrow.MCHAT_PM}" title="{L_MCHAT_SEND_PM}"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-pm<!-- ELSEIF IS_PHPBB32 -->fa fa-envelope-o<!-- ENDIF -->"><span>{L_MCHAT_SEND_PM}</span></i></a></li><!-- ENDIF -->
-			<!-- IF MCHAT_ALLOW_IP --><li><a href="{mchatrow.MCHAT_U_IP}" title="{mchatrow.MCHAT_WHOIS_USER}" data-mchat-action="ip"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-ip<!-- ELSEIF IS_PHPBB32 -->fa fa-wifi<!-- ENDIF -->"><span>{mchatrow.MCHAT_WHOIS_USER}</span></i></a></li><!-- ENDIF -->
-			<!-- IF MCHAT_ALLOW_PERMISSIONS --><li><a href="{mchatrow.MCHAT_U_PERMISSIONS}" title="{L_MCHAT_PERMISSIONS}"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-permissions<!-- ELSEIF IS_PHPBB32 -->fa fa-exclamation-triangle<!-- ENDIF -->"><span>{L_MCHAT_PERMISSIONS}</span></i></a></li><!-- ENDIF -->
-			<!-- IF $MCHAT_ALLOW_EDIT --><li><a href="#" title="{L_MCHAT_EDIT}"data-mchat-action="edit"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-edit<!-- ELSEIF IS_PHPBB32 -->fa fa-pencil<!-- ENDIF -->"><span>{L_MCHAT_EDIT}</span></i></a></li><!-- ENDIF -->
-			<!-- IF $MCHAT_ALLOW_DEL --><li><a href="#" title="{L_DELETE}" data-mchat-action="del"><i class="mchat-button <!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-delete<!-- ELSEIF IS_PHPBB32 -->fa fa-trash-o<!-- ENDIF -->"><span>{L_DELETE}</span></i></a></li><!-- ENDIF -->
+		<ul class="mchat-buttons <!-- IF $MCHAT_USE_WHITE_MESSAGE_ICONS -->mchat-icons-white<!-- ELSE -->mchat-icons-black<!-- ENDIF -->">
+			<!-- IF $MCHAT_ALLOW_MENTION --><li><a href="#" title="{L_MCHAT_RESPOND}" data-mchat-action="mention"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-mention<!-- ELSEIF IS_PHPBB32 -->fa fa-at<!-- ENDIF -->"><span>{L_MCHAT_RESPOND}</span></i></a></li><!-- ENDIF -->
+			<!-- IF $MCHAT_ALLOW_QUOTE --><li><a href="#" title="{L_REPLY_WITH_QUOTE}" data-mchat-action="quote"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-quote<!-- ELSEIF IS_PHPBB32 -->fa fa-quote-left<!-- ENDIF -->"><span>{L_REPLY_WITH_QUOTE}</span></i></a></li><!-- ENDIF -->
+			<!-- IF $MCHAT_ALLOW_LIKE --><li><a href="#" title="{L_MCHAT_LIKE}" data-mchat-action="like"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-like<!-- ELSEIF IS_PHPBB32 -->fa fa-thumbs-o-up<!-- ENDIF -->"><span>{L_MCHAT_LIKE}</span></i></a></li><!-- ENDIF -->
+			<!-- IF $MCHAT_ALLOW_PM --><li><a href="{mchatrow.MCHAT_PM}" title="{L_MCHAT_SEND_PM}"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-pm<!-- ELSEIF IS_PHPBB32 -->fa fa-envelope-o<!-- ENDIF -->"><span>{L_MCHAT_SEND_PM}</span></i></a></li><!-- ENDIF -->
+			<!-- IF MCHAT_ALLOW_IP --><li><a href="{mchatrow.MCHAT_U_IP}" title="{mchatrow.MCHAT_WHOIS_USER}" data-mchat-action="ip"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-ip<!-- ELSEIF IS_PHPBB32 -->fa fa-wifi<!-- ENDIF -->"><span>{mchatrow.MCHAT_WHOIS_USER}</span></i></a></li><!-- ENDIF -->
+			<!-- IF MCHAT_ALLOW_PERMISSIONS --><li><a href="{mchatrow.MCHAT_U_PERMISSIONS}" title="{L_MCHAT_PERMISSIONS}"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-permissions<!-- ELSEIF IS_PHPBB32 -->fa fa-exclamation-triangle<!-- ENDIF -->"><span>{L_MCHAT_PERMISSIONS}</span></i></a></li><!-- ENDIF -->
+			<!-- IF $MCHAT_ALLOW_EDIT --><li><a href="#" title="{L_MCHAT_EDIT}" data-mchat-action="edit"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-edit<!-- ELSEIF IS_PHPBB32 -->fa fa-pencil<!-- ENDIF -->"><span>{L_MCHAT_EDIT}</span></i></a></li><!-- ENDIF -->
+			<!-- IF $MCHAT_ALLOW_DEL --><li><a href="#" title="{L_DELETE}" data-mchat-action="del"><i class="<!-- IF IS_PHPBB31 -->mchat-icon mchat-icon-delete<!-- ELSEIF IS_PHPBB32 -->fa fa-trash-o<!-- ENDIF -->"><span>{L_DELETE}</span></i></a></li><!-- ENDIF -->
 		</ul>
 	<!-- ENDIF -->
 <!-- ENDIF -->

styles/prosilver/template/mchat_navlink.html

@@ -1,5 +1,5 @@
 <li <!-- IF IS_PHPBB31 -->class="small-icon icon-mchat"<!-- ELSEIF IS_PHPBB32 -->data-last-responsive="true"<!-- ENDIF -->>
-	<a href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">
-		<i<!-- IF IS_PHPBB32 --> class="icon fa fa-weixin"<!-- ENDIF --> aria-hidden="true"></i><span>{L_MCHAT_TITLE}</span>
+	<a href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" class="mchat-nav-link-title" role="menuitem">
+		<i<!-- IF IS_PHPBB32 --> class="icon fa fa-weixin"<!-- ENDIF --> aria-hidden="true"></i><span class="mchat-nav-link">{MCHAT_TITLE}</span>
 	</a>
 </li>

styles/prosilver/template/mchat_panel.html

@@ -4,7 +4,7 @@
 	<!-- ENDIF -->
 
 	<!-- IF MCHAT_CHARACTER_COUNT and not MCHAT_IS_ARCHIVE_PAGE -->
-		<div id="mchat-character-count">{MCHAT_CHARACTER_COUNT}</div>
+		<div id="mchat-character-count" class="hidden">{MCHAT_CHARACTER_COUNT}</div>
 	<!-- ENDIF -->
 
 	<form id="mchat-form" name="postform" action="{U_MCHAT_CUSTOM_PAGE}" method="POST">
@@ -15,29 +15,31 @@
 				<!-- IF MCHAT_INPUT_AREA -->
 					<input id="mchat-input" type="text" name="message" class="inputbox medium" autocomplete="off" />
 				<!-- ELSE -->
-					<textarea id="mchat-input" name="message" class="inputbox no-auto-resize" cols="32" rows="5"></textarea>
+					<textarea id="mchat-input" name="message" class="inputbox no-auto-resize"></textarea>
 				<!-- ENDIF -->
 			<!-- ENDIF -->
-			<!-- EVENT dmzx_mchat_buttons_before -->
+			<!-- EVENT dmzx_mchat_buttons_container_before -->
 			<div id="mchat-buttons">
+				<!-- EVENT dmzx_mchat_buttons_before -->
 				<!-- IF MCHAT_ALLOW_USE -->
-					<input id="mchat-add" type="button" class="button2" data-mchat-action="add" value="{L_MCHAT_ADD}" />
+					<input id="mchat-add" class="<!-- IF IS_PHPBB31 -->button2<!-- ELSEIF IS_PHPBB32 -->button<!-- ENDIF -->" type="button" data-mchat-action="add" value="{L_MCHAT_ADD}" />
 					<!-- IF MCHAT_ALLOW_SMILES and .smiley -->
-						<input type="button" class="button2" data-mchat-toggle="smilies" value="{L_MCHAT_SMILES}" />
+						<input type="button" class="<!-- IF IS_PHPBB31 -->button2<!-- ELSEIF IS_PHPBB32 -->button<!-- ENDIF -->" data-mchat-toggle="smilies" value="{L_MCHAT_SMILES}" />
 					<!-- ENDIF -->
 					<!-- IF S_BBCODE_ALLOWED -->
-						<input type="button" class="button2" data-mchat-toggle="bbcodes" value="{L_MCHAT_BBCODES}" />
+						<input type="button" class="<!-- IF IS_PHPBB31 -->button2<!-- ELSEIF IS_PHPBB32 -->button<!-- ENDIF -->" data-mchat-toggle="bbcodes" value="{L_MCHAT_BBCODES}" />
 					<!-- ENDIF -->
 					<!-- IF MCHAT_RULES -->
-						<input type="button" class="button2" onclick="popup('{U_MCHAT_RULES}', 450, 275); return false;" value="{L_MCHAT_RULES}" />
+						<input type="button" class="<!-- IF IS_PHPBB31 -->button2<!-- ELSEIF IS_PHPBB32 -->button<!-- ENDIF -->" onclick="popup('{U_MCHAT_RULES}', 450, 275); return false;" value="{L_MCHAT_RULES}" />
 					<!-- ENDIF -->
 				<!-- ENDIF -->
 				<!-- EVENT dmzx_mchat_buttons_mid -->
 				<!-- IF MCHAT_ARCHIVE -->
-					<input type="button" class="button2" onclick="window.location.href = '{U_MCHAT_ARCHIVE_URL}';" value="{L_MCHAT_ARCHIVE}" />
+					<input type="button" class="<!-- IF IS_PHPBB31 -->button2<!-- ELSEIF IS_PHPBB32 -->button<!-- ENDIF -->" onclick="window.location.href = '{U_MCHAT_ARCHIVE_URL}';" value="{L_MCHAT_ARCHIVE}" />
 				<!-- ENDIF -->
 				<!-- EVENT dmzx_mchat_buttons_after -->
 			</div>
+			<!-- EVENT dmzx_mchat_buttons_container_after -->
 			<!-- IF MCHAT_ALLOW_USE and S_BBCODE_ALLOWED -->
 				<div id="mchat-bbcodes">
 					<!-- INCLUDE posting_buttons.html -->
@@ -55,16 +57,20 @@
 			<!-- ENDIF -->
 			<!-- EVENT dmzx_mchat_body_smiley_after -->
 			<div id="mchat-status">
-				<div id="mchat-status-icons">
-					<i id="mchat-status-load" class="<!-- IF IS_PHPBB31 -->mchat-status-load<!-- ELSEIF IS_PHPBB32 -->fa fa-refresh fa-spin icon icon-blue<!-- ENDIF -->" title="{L_LOADING}"></i>
-					<i id="mchat-status-ok" class="<!-- IF IS_PHPBB31 -->mchat-status-ok<!-- ELSEIF IS_PHPBB32 -->fa fa-check icon icon-green<!-- ENDIF -->" title="{L_MCHAT_OK}"></i>
-					<i id="mchat-status-paused" class="<!-- IF IS_PHPBB31 -->mchat-status-paused<!-- ELSEIF IS_PHPBB32 -->fa fa-pause icon icon-orange<!-- ENDIF -->" title="{L_MCHAT_PAUSE}"></i>
-					<i id="mchat-status-error" class="<!-- IF IS_PHPBB31 -->mchat-status-error<!-- ELSEIF IS_PHPBB32 -->fa fa-times icon icon-red<!-- ENDIF -->" title="{L_ERROR}"></i>
-				</div>
-				<span id="mchat-refresh-text">{MCHAT_REFRESH_YES}</span>
-				<!-- IF MCHAT_USER_TIMEOUT --> &bull; <span id="mchat-session">{MCHAT_SESSION_TIMELEFT}</span><!-- ENDIF -->
-				<!-- IF not MCHAT_SOUND_DISABLED --> &bull; <label for="mchat-user-sound">{L_MCHAT_USESOUND} <input type="checkbox" id="mchat-user-sound"<!-- IF MCHAT_SOUND --> checked="checked"<!-- ENDIF --> /></label><!-- ENDIF -->
-				<span class="mchat-copyright" title="{MCHAT_AUTHOR_NAMES}">&copy;</span>
+				<ul class="mchat-footer">
+					<li>
+						<span id="mchat-status-icons">
+							<i id="mchat-status-load" class="<!-- IF IS_PHPBB31 -->mchat-status-load<!-- ELSEIF IS_PHPBB32 -->fa fa-refresh fa-spin icon icon-blue<!-- ENDIF -->" title="{L_LOADING}"></i>
+							<i id="mchat-status-ok" class="<!-- IF IS_PHPBB31 -->mchat-status-ok<!-- ELSEIF IS_PHPBB32 -->fa fa-check icon icon-green<!-- ENDIF -->" title="{L_MCHAT_OK}"></i>
+							<i id="mchat-status-paused" class="<!-- IF IS_PHPBB31 -->mchat-status-paused<!-- ELSEIF IS_PHPBB32 -->fa fa-pause icon icon-orange<!-- ENDIF -->" title="{L_MCHAT_PAUSE}"></i>
+							<i id="mchat-status-error" class="<!-- IF IS_PHPBB31 -->mchat-status-error<!-- ELSEIF IS_PHPBB32 -->fa fa-times icon icon-red<!-- ENDIF -->" title="{L_ERROR}"></i>
+						</span>
+						<span id="mchat-refresh-text">{MCHAT_REFRESH_YES}</span>
+					</li>
+					<!-- IF MCHAT_TIMEOUT --><li><span id="mchat-session">{MCHAT_SESSION_TIMELEFT}</span></li><!-- ENDIF -->
+					<!-- IF not MCHAT_SOUND_DISABLED --><li><label for="mchat-user-sound">{L_MCHAT_USESOUND} <input type="checkbox" id="mchat-user-sound"<!-- IF MCHAT_SOUND --> checked="checked"<!-- ENDIF --> /></label></li><!-- ENDIF -->
+					<li><span class="mchat-copyright" title="{MCHAT_AUTHOR_NAMES}">&copy;</span></li>
+				</ul>
 			</div>
 		<!-- ENDIF -->
 	</form>

styles/prosilver/template/mchat_whois.html

@@ -1,9 +1,9 @@
 <div id="mchat-whois">
 	<span title="{MCHAT_ONLINE_EXPLAIN}">
 		<!-- IF MCHAT_USERS_LIST -->
-			<a href="#" data-mchat-toggle="userlist">{MCHAT_USERS_COUNT}</a>
+			<a href="#" data-mchat-toggle="userlist">{MCHAT_USERS_TOTAL}</a>
 		<!-- ELSE -->
-			{MCHAT_USERS_COUNT}
+			{MCHAT_USERS_TOTAL}
 		<!-- ENDIF -->
 	</span>
 	<div id="mchat-userlist" class="hidden">{MCHAT_USERS_LIST}</div>

styles/prosilver/theme/mchat.css

@@ -16,6 +16,11 @@
 	width: 0;
 }
 
+#mchat-body {
+	overflow: hidden;
+	width: 100%;
+}
+
 .icon-mchat {
 	background-image: url("./images/icon_mchat.png");
 }
@@ -24,10 +29,6 @@
 	display: none;
 }
 
-#mchat-body {
-	width: 100% !important;
-}
-
 #mchat-confirm textarea {
 	width: 100%;
 	height: 100px;
@@ -35,7 +36,6 @@
 
 #mchat-messages {
 	overflow: auto;
-	width: 100%;
 }
 
 .mchat-message-wrapper {
@@ -59,8 +59,17 @@
 
 @media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
 
+	#mchat-body {
+		overflow: visible;
+	}
+
 	.mchat-buttons > li {
-		padding: 0 8px !important;
+		padding: 0 6px !important;
+	}
+
+	#mchat-input {
+		width: 95% !important;
+		margin: 5px 0 !important;
 	}
 
 }
@@ -69,38 +78,34 @@
 	display: block;
 }
 
-.mchat-message .mchat-buttons li {
+.mchat-wrapper .mchat-buttons li {
 	opacity: .3;
 }
 
-.mchat-message:hover .mchat-buttons li {
+.mchat-wrapper li:hover .mchat-buttons li {
 	opacity: .6;
 }
 
-.mchat-message .mchat-buttons li:hover {
+.mchat-wrapper li:hover .mchat-buttons li:hover {
 	opacity: 1;
 }
 
-.mchat-buttons {
+.mchat-wrapper .mchat-buttons {
 	float: right;
 	list-style: none;
 	margin-top: 1px;
 }
 
-.mchat-message-wrapper .mchat-buttons > li {
+.mchat-wrapper .mchat-buttons > li {
 	float: left;
 	margin: 0 3px;
 }
 
-.mchat-button {
-	margin-left: 3px;
-}
-
-.mchat-button.fa {
+.mchat-wrapper .mchat-buttons .fa {
 	font-size: 12pt;
 }
 
-.mchat-button span {
+.mchat-wrapper .mchat-buttons span {
 	display: block;
 	height: 0;
 	overflow: hidden;
@@ -108,9 +113,16 @@
 	width: 1px;
 }
 
+.mchat-icons-black .mchat-icon:before {
+	background-image: url("./images/message_icons_black.png");
+}
+
+.mchat-icons-white .mchat-icon:before {
+	background-image: url("./images/message_icons_white.png");
+}
+
 .mchat-icon:before {
 	content: '';
-	background-image: url("./images/message_icons.png");
 	background-repeat: no-repeat;
 	width: 16px;
 	height: 16px;
@@ -118,14 +130,14 @@
 	float: right;
 }
 
-.mchat-icon-mention:before      { background-position: -2px -2px; }
-.mchat-icon-edit:before         { background-position: -22px -2px; }
-.mchat-icon-pm:before           { background-position: -42px -2px; }
-.mchat-icon-quote:before        { background-position: -62px -2px; }
-.mchat-icon-like:before         { background-position: -82px -2px; }
-.mchat-icon-delete:before       { background-position: -102px -2px; }
-.mchat-icon-permissions:before  { background-position: -122px -2px; }
-.mchat-icon-ip:before           { background-position: -142px -2px; }
+.mchat-icon-mention:before		{ background-position: -2px -2px; }
+.mchat-icon-edit:before			{ background-position: -22px -2px; }
+.mchat-icon-pm:before			{ background-position: -42px -2px; }
+.mchat-icon-quote:before		{ background-position: -62px -2px; }
+.mchat-icon-like:before			{ background-position: -82px -2px; }
+.mchat-icon-delete:before		{ background-position: -102px -2px; }
+.mchat-icon-permissions:before	{ background-position: -122px -2px; }
+.mchat-icon-ip:before			{ background-position: -142px -2px; }
 
 .mchat-text {
 	clear: both;
@@ -134,6 +146,10 @@
 	font-size: 1.2em;
 }
 
+.mchat-notification-message .mchat-text {
+	font-style: italic;
+}
+
 .mchat-text strong {
 	font-weight: bold !important;
 }
@@ -160,12 +176,8 @@
 	list-style-type: circle;
 }
 
-.mchat-text blockquote {
-	margin-bottom: 5px;
-}
-
 .mchat-text blockquote, .mchat-text .codebox, .mchat-text ul, .mchat-text ol {
-	margin-top: 5px;
+	margin-bottom: 5px;
 	margin-left: 1em;
 }
 
@@ -185,10 +197,13 @@
 
 #mchat-character-count {
 	float: right;
-	visibility: hidden;
 	padding: 5px 0 0;
 }
 
+#mchat-character-count.hidden {
+	visibility: hidden;
+}
+
 #mchat-panel {
 	text-align: center;
 	max-height: initial;
@@ -205,11 +220,17 @@
 #mchat-input {
 	cursor: text;
 	width: 50%;
+	min-width: 50%;
+	max-width: 90%;
 	font-size: 1.1em;
 	padding: 5px 5px 4px;
 	margin: 5px 20px;
 }
 
+textarea#mchat-input {
+	height: 8em;
+}
+
 #mchat-buttons {
 	padding-bottom: 5px;
 }
@@ -231,6 +252,10 @@
 	margin: 0 auto 5px;
 }
 
+#mchat-bbcodes #colour_palette td a.remember-color {
+	box-shadow: 0 0 0 1px #F00;
+}
+
 #mchat-smilies {
 	padding: 0;
 }
@@ -288,6 +313,20 @@
 	background-image: url("./images/paused.gif");
 }
 
+.mchat-footer li {
+	display: inline;
+	padding-left: .1em;
+	white-space: nowrap;
+}
+
+.mchat-footer li:before {
+	content: '\2022\A';
+}
+
+.mchat-footer li:first-child:before, .mchat-footer li:last-child:before {
+	content: '';
+}
+
 #mchat-legend {
 	clear: both;
 }
@@ -342,5 +381,5 @@
 }
 
 .hidden-category + .forabg #mchat-body .topiclist.forums {
-    display: block;
+	display: block;
 }

styles/simplicity/template/mchat_navlink.html

@@ -1 +1 @@
-<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link" href="{U_MCHAT}" title="{L_MCHAT_TITLE}" role="menuitem">{L_MCHAT_TITLE}</a></li>
+<li class="tab mchat" data-select-match="mchat" data-responsive-class="tab small-icon icon-mchat"><a class="nav-link mchat-nav-link mchat-nav-link-title" href="{U_MCHAT}" title="{MCHAT_TITLE_HINT}" role="menuitem">{MCHAT_TITLE}</a></li>