85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<template>
|
|
|
|
<div id='CONTAINER' class='message'>
|
|
|
|
<div v-for='(msg, id) in gstore.notif.inbox.data' :class="msg[0] == gstore.server.session.name ? 'me' : ''" :data-noauthor='id == 0 || gstore.notif.inbox.data[id-1][0] != gstore.notif.inbox.data[id][0] ? "1" : "0"'>
|
|
<span class='author' v-text='msg[0]' v-if='id == 0 || gstore.notif.inbox.data[id-1][0] != msg[0]'></span>
|
|
<span class='content' v-html='bbcode(msg[1])'></span>
|
|
</div>
|
|
|
|
<div class='end-pad'></div> <!-- End Spacing -->
|
|
|
|
<form class='msg-input' @submit.prevent='new_message'>
|
|
<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg.inbox' :class='gstore.msg_pending.inbox ? "loading" : ""'>
|
|
<button></button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CONTAINER_INBOX',
|
|
data(){ return { gstore: gstore.data }; },
|
|
methods: {
|
|
new_message(msg){
|
|
|
|
// {1} Send message //
|
|
this.gstore.func.sendMessage(this.gstore.new_msg.inbox, wsc_chat);
|
|
|
|
// {2} Empty input //
|
|
this.gstore.new_msg.inbox = '';
|
|
},
|
|
bbcode: function(msg){
|
|
|
|
/* (1) Escape HTML
|
|
---------------------------------------------------------*/
|
|
msg = msg.replace(/&/g, '&');
|
|
msg = msg.replace(/</g, '<');
|
|
msg = msg.replace(/>/g, '>');
|
|
|
|
|
|
/* (2) Manage text format
|
|
---------------------------------------------------------*/
|
|
/* (1) Manage bold */
|
|
msg = msg.replace(/\*([^\*]+)\*/g, "<b>$1</b>");
|
|
|
|
/* (2) italic */
|
|
msg = msg.replace(/_([^_]+)_/g, "<i>$1</i>");
|
|
|
|
/* (3) underline */
|
|
msg = msg.replace(/\[([^\]]+)\]/g, "<ins>$1</ins>");
|
|
|
|
/* (4) Code */
|
|
msg = msg.replace(/`([^`]+)`/g, "<span class='code'>$1</span>");
|
|
|
|
|
|
/* (3) Manage emojis
|
|
---------------------------------------------------------*/
|
|
/* (1) Smileys */
|
|
msg = msg.replace(/:D/g, "<span class='utf8'>😃</span>");
|
|
msg = msg.replace(/:\)/g, "<span class='utf8'>🙂</span>");
|
|
msg = msg.replace(/:B/g, "<span class='utf8'>😎</span>");
|
|
msg = msg.replace(/:3/g, "<span class='utf8'>😗</span>");
|
|
msg = msg.replace(/;\)/g, "<span class='utf8'>😉</span>");
|
|
msg = msg.replace(/:P/g, "<span class='utf8'>😋</span>");
|
|
msg = msg.replace(/;P/g, "<span class='utf8'>😜</span>");
|
|
msg = msg.replace(/xD/g, "<span class='utf8'>😆</span>");
|
|
msg = msg.replace(/:O/ig, "<span class='utf8'>😲</span>");
|
|
msg = msg.replace(/:S/g, "<span class='utf8'>😖</span>");
|
|
msg = msg.replace(/\^\^/g, "<span class='utf8'>😊</span>");
|
|
|
|
/* (2) Emojis */
|
|
msg = msg.replace(/:poop:/g, "<span class='utf8 br'>💩</span>");
|
|
msg = msg.replace(/:fuck:/g, "<span class='utf8'>🖕</span>");
|
|
msg = msg.replace(/\+1/g, "<span class='utf8 bl'>👍</span>");
|
|
msg = msg.replace(/-1/g, "<span class='utf8 bl'>👎</span>");
|
|
|
|
return msg;
|
|
}
|
|
}
|
|
}
|
|
</script> |