The backend side of the default support tickets in WHMCS does not support RTL (right-to-left) languages. As a result, interacting with Arabic messages, for instance, can be cumbersome.
To address this issue, I wrote the following JavaScript snippet using jQuery, as it’s already integrated in WHMCS. You can test this code in your browser’s console or add it to your userscript manager (e.g., Greasemonkey browser extension).
/*
* WHMCS - RTL Support for ticket views
* version 0.1
*
*/
var isRTL = false;
// Detects if a text includes Arabic characters
function hasArabic(text){
var arabic = /[\u0600-\u06FF]/;
return arabic.test(text);
}
// Apply RTL styles to messages containing Arabic in their first paragraph
jQuery.each( jQuery(".msgwrap"), function( key, elem ) {
if(hasArabic(jQuery(elem).find("p:first-child").text())){
jQuery(elem).css({'text-align':'right', 'direction':'rtl'});
isRTL = true;
}else
isRTL = false;
});
// If the last message was RTL, set the textarea editor (Bootstrap Markdown) to RTL as well
if(isRTL)
jQuery("#replymessage").css({'text-align':'right', 'direction':'rtl'});TODO:
– The script can also suggest a signature ending depending on the language.
It can also be adopted on the customer area if your template doesn’t take that in consideration, in my case, it is defined by the class .ticket-reply:
jQuery.each( jQuery(".ticket-reply"), function( key, elem ) {
if(hasArabic(jQuery(elem).find(".message p:first-child").text())){
jQuery(elem).css({'text-align':'right', 'direction':'rtl'});
jQuery('.fa-user', this).css({'float':'right'});
jQuery('.date', this).css({'float':'left'});
}else{
jQuery(elem).css({'text-align':'left', 'direction':'ltr'});
jQuery('.fa-user', this).css({'float':'left'});
jQuery('.date', this).css({'float':'right'});
}
});
Comments