var $currentsb;
class xoborShoutbox {
defaults = {
target: '.scndrow',
title: 'Shoutbox',
boxid: 'xShoutbox',
showinput : true,
wow: 'fadeIn',
adminview : false,
user : false,
loader: "<div class='text-center p-5'><i class='fas fa-spinner fa-spin fa-2x'></i></div>",
initOnLoad: true,
emoji : "&#128512; &#128513; &#128514; &#129315; &#128515; &#128516; &#128517; &#128518; &#128521; &#128522; &#128523; &#128526; &#128525; &#128536; &#128535; &#128537; &#128538; &#128578; &#129303; &#129321; &#129300; &#129320; &#128528; &#128529; &#128566; &#128580; &#128527; &#128547; &#128549; &#128558; &#129296; &#128559; &#128554; &#128555; &#128564; &#128524; &#128539; &#128540; &#128541; &#129316; &#128530; &#128531; &#128532; &#128533; &#128579; &#129297; &#128562; &#9785;&#65039; &#128577; &#128534; &#128542; &#128543; &#128548; &#128546; &#128557; &#128550; &#128551; &#128552; &#128553; &#129327; &#128556; &#128560; &#128561; &#129397; &#129398; &#128563; &#129322; &#128565; &#128545; &#128544; &#129324; &#128567; &#129298; &#129301; &#129314; &#129326; &#129319; &#128519; &#129312; &#129313; &#129317; &#129323; &#129325; &#129488; &#129299; &#128520; &#128127; &#128121; &#128122; &#128128; &#128123; &#128125; &#129302; &#128169; &#128570; &#128568; &#128569; &#128571; &#128572; &#128573; &#128576; &#128575; &#128574;",
};
initialized = false;
skeletons = {};
constructor(options = {}) {
$currentsb = this;
this.config = $.extend({},this.defaults,options);
this.initSkeletons();
$(this.skeletons.box).prependTo(this.config.target);
this.config.sbtitle = $('#' + this.config.boxid).find(this.config.sbtitle_selector);
this.config.sbcontent = $('#' + this.config.boxid).find(this.config.sbcontent_selector);
this.config.sbfooter = $('#' + this.config.boxid).find(this.config.sbfooter_selector);
this.config.sbinput = $('#' + this.config.boxid).find(this.config.sbinput_selector);
if (this.config.initOnLoad) {
this.init();
}
return this;
}
init() {
$currentsb.log("Init Shoutbox");
var $curboxcontent = xobor.plugin('xshoutbox').getGlob('shoutboxdata');
$currentsb.config.sbcontent.html('');
$.each($curboxcontent, function() {$currentsb.drawMessage(this);});
$currentsb.initialized = true;
/*Emoji Bindings*/
$('.xsbemoji').on('click',function(){
$currentsb.config.sbinput.val($currentsb.config.sbinput.val() + " " + $(this).text());
$currentsb.hideEmoji();
});
document.addEventListener("plugin_xshoutbox_update", $currentsb.newMessageHandler, false);
$currentsb.log("Init Shoutbox Done");
}
newMessageHandler(e){
try{
if(e.detail.data.element && e.detail.data.element.user_id != $currentsb.config.user ) $currentsb.drawMessage(e.detail.data.element);
}catch(e){}
}
drawMessage(mes) {
mes.displayTime = $currentsb.dateFormatForMessage(mes.time);
$('#'+$currentsb.config.boxid).removeClass('emptysb');
if(mes.userlink){
if(mes.usercolor){
mes.displayLink = '<a href="'+mes.userlink+'" style="color:#'+mes.usercolor+';">'+mes.username+'</a>';
}else{
mes.displayLink = '<a href="'+mes.userlink+'">'+mes.username+'</a>';
}
}else{
mes.displayLink = '<a href="javascript:void(0)">'+mes.username+'</a>';
}
if(mes.avatar){
mes.displayAvatar = '<img class="img-responsive img-circle avatar avatar_round_small ava_user_'+mes.userid+'" alt="avatar" src="'+mes.avatar+'">';
}else{
mes.displayAvatar = '<span class="img-responsive img-circle avatar avatar_round_small noimage">'+mes.username.substring(0,2)+'</span>';
}
let effectclass = ($currentsb.initialized && $currentsb.config.wow) ? "wow "+ $currentsb.config.wow : "";
effectclass = false;
let parsedMessage = $currentsb.parseEmoji(mes.message);
let delmessagespan ='';
if($currentsb.config.adminview){
delmessagespan = '<span class="clearsbmessage float-right mr-2" style="cursor:pointer;" onclick="$currentsb.clearMessage(this);"><span class="xob xob-trash-bin"></span></span>';
}else if($currentsb.config.user == mes.user_id){
delmessagespan = '<span class="clearlastsbmessage float-right mr-2" style="cursor:pointer;" onclick="$currentsb.clearLastMessage();"><span class="xob xob-trash-bin"></span></span>'
}
let userclass = "sbm_u"+mes.user_id;
let rowskeleton = `<div class="xsbMessage d-flex flex-row mb-1 ${effectclass} ${userclass}">
<div class="d-flex flex-column">
<div class="p-2">${mes.displayAvatar}</div>
</div>
<div class="speech-bubble d-flex flex-column">
<div class="p-1">${mes.displayLink} ${delmessagespan}</div>
<div class="p-1">${parsedMessage}</div>
<div class="p-1 text-right">${mes.displayTime}</div>
</div>
</div>`;
$(rowskeleton).appendTo($currentsb.config.sbcontent);
$currentsb.config.sbcontent[0].scrollTop = $currentsb.config.sbcontent[0].scrollHeight;
}
addMessage() {
if($currentsb.config.sbinput.val().trim() == ""){return;}
var data = {
message: $currentsb.config.sbinput.val()
};
$currentsb.config.sbinput.val("");
xobor.plugin("xshoutbox").call("addShoutboxEntry", data, function(res) {
if(res && res.user_id == $currentsb.config.user){
$currentsb.drawMessage(res);
}else{
}
});
}
toggleEmoji(){
if($('#xShoutbox .emoji-bubble-cont').is(':visible')){
this.hideEmoji();
}else{
this.showEmoji();
}
}
showEmoji(){
$('#xShoutbox .emoji-bubble-cont').show();
}
hideEmoji(){
$('#xShoutbox .emoji-bubble-cont').hide();
}
clearAll(){
if(!confirm("Den gesamten Inhalt der Shoutbox löschen?")){return;}
xobor.plugin('xshoutbox').setGlob('shoutboxdata',"",function(){
$('#xShoutbox .xsbMessage').remove();
$('#'+$currentsb.config.boxid).addClass('emptysb');
});
}
clearLastMessage(){
xobor.plugin("xshoutbox").call("delLastShoutboxEntry", {del:true}, function(res) {
$('.xsbMessage').eq(-1).remove();
});
}
clearMessage(el){
var totallength = $('.xsbMessage').length;
var index_to_del = $('.xsbMessage').index($(el).closest('.xsbMessage'));
var el_to_del = totallength-index_to_del;
xobor.plugin('xshoutbox').getGlob('shoutboxdata',function(res){
var arrindex = res.length - el_to_del;
if(arrindex>0){
res.splice(arrindex, 1);
}
xobor.plugin('xshoutbox').setGlob('shoutboxdata',res,function(res){});
});
$(el).closest('.xsbMessage').remove();
}
/*
HELPER FUNCTIONS
*/
dateFormatForMessage(ts){
ts = ts * 1000;
var date = new Date(ts);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if(minutes < 10){minutes = "0" + minutes;}
if(hours < 10){hours = "0" + hours;}
if(day < 10){day = "0" + day;}
if(month < 10){month = "0" + month;}
if($currentsb.isToday(date)){
return hours+':'+minutes;
}else{
return day+'.'+month+' '+hours+':'+minutes;
}
}
isToday(someDate){
var today = new Date()
return someDate.getDate() == today.getDate() &&
someDate.getMonth() == today.getMonth() &&
someDate.getFullYear() == today.getFullYear()
}
log(content) {
xobor.log.dev('Shoutbox', content);
}
getEmoji(){
var $emoji = $currentsb.config.emoji.split(" ");
var $emojidiv = "<div class='emoji-bubble shadow'>";
$.each($emoji,function(){
$emojidiv += "<span class='xsbemoji'>"+this+"</span>";
});
$emojidiv += "</div>";
return $emojidiv;
}
parseEmoji(str=""){
str = str + "";
return str.replace(/(&#\d+;){2}/g, function(match) {
var orig = match;
match = match.replace(/&#/g,'').split(';');
var binFirst = (parseInt('0x' + parseInt(match[0]).toString(16)) - 0xd800).toString(2);
var binSecond = (parseInt('0x' + parseInt(match[1]).toString(16)) - 0xdc00).toString(2);
binFirst = '0000000000'.substr(binFirst.length) + binFirst;
binSecond = '0000000000'.substr(binSecond.length) + binSecond;
var temp = ('0x' + (parseInt(binFirst + binSecond, 2).toString(16))) - (-0x10000);
if(isNaN(temp)){return orig;}
return '&#x' + temp.toString(16) + ';';
});
}
initSkeletons(){
let emojidiv = "<div class='emoji-bubble-cont '>" + $currentsb.getEmoji() + "</div>";
let clearspan = this.config.adminview ? '<span class="clearsb float-right mr-2" style="cursor:pointer;" onclick="$currentsb.clearAll();"><span class="xob xob-trash-bin"></span> leeren</span>' : '';
let togglespan = `<span class="float-right cardtoggler">
<a class="cardexpand" data-cardid="${this.config.boxid}"><span class="xob xob-angle-down xob"></span></a>
<a class="cardcompress" data-cardid="${this.config.boxid}"><span class="xob xob-angle-up xob"></span></a>
</span>`;
this.skeletons.emojidiv = emojidiv;
this.skeletons.clearspan = clearspan;
let visclass = "expanded";
try{
if(hidden_cards.length){
$.each(hidden_cards,function(){
if(this == $currentsb.config.boxid){
visclass = "compressed";
}
});
}
}catch(e){}

this.skeletons.footer = this.config.showinput ?
`<div class="card-footer text-muted text-right">
<form class="form-inline" onsubmit="$currentsb.addMessage();return false;">
<div class="input-group flex-grow-1">
<input type="text" placeholder="Neue Nachricht" class="flex-grow-1 form-control xSbNewMessage" />
<div class="input-group-append">
<span class="input-group-text" onclick="$currentsb.toggleEmoji()" style="cursor:pointer;">&#128512;</span>
</div>
<input class="form-control btn btn-primary" style="max-width: 50px;" type="button" onclick="$currentsb.addMessage()" value="OK">
</div>
</form>
${this.skeletons.emojidiv}
</div>` : '';
this.skeletons.box = `<div id="${this.config.boxid}" class="emptysb card mb-3 ${visclass}">
<div class="card-header">
<h5 class="card-title pull-left">${this.config.title}</h5>
${togglespan}${this.skeletons.clearspan}
</span>
</div>
<div class="card-body">
${this.config.loader}
</div>
<div class="card-body-addon sbemptymessage p2">
Keine Einträge
</div>
${this.skeletons.footer}
</div>`;
this.config.sbtitle_selector = '.card-header h5';
this.config.sbcontent_selector = '.card-body';
this.config.sbfooter_selector = '.card-footer';
this.config.sbinput_selector = '.xSbNewMessage';

}
}