This commit is contained in:
guava
2016-12-15 13:40:07 +01:00
commit ee4dd89693
95 changed files with 7368 additions and 0 deletions

View File

@@ -0,0 +1,102 @@
body
{
background-color: transparent;
margin: 0px;
}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none; /* hii */
}
#chat
{
position: absolute;
top: 30px;
left: 30px;
padding: 7px;
width: 30%;
font-size: 20px;
font-family: "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", Arial, sans-serif;
color: #fff;
overflow: hidden;
text-shadow: 0px 0px 1px #333;
}
input.fake
{
position: absolute;
top: -10000px;
left: -10000px;
}
#chatInputHas
{
display: none;
}
#chatInputHas strong
{
display: inline-block;
vertical-align: middle;
text-transform: uppercase;
height: 29px;
line-height: 26px;
}
#chatInput
{
background-color: transparent;
border: none;
outline: none !important;
padding: 3px;
display: inline-block;
vertical-align: middle;
margin: 0px;
color: #fff;
text-shadow: 0px 0px 1px #333;
font: inherit;
white-space: pre;
overflow: hidden;
}
#chatInput > div:first-child
{
display: inline-block;
vertical-align: middle;
height: 23px;
line-height: 20px;
}
#chatInput .caret
{
display: inline-block;
min-width: 1px;
height: 22px;
margin-left: 1px;
vertical-align: bottom;
background-color: #fff;
box-shadow: 0px 0px 1px #333;
color: white;
}
#chatBuffer
{
height: 240px;
overflow: hidden;
}
.color-1{color: #ff4444;}
.color-2{color: #99cc00;}
.color-3{color: #ffbb33;}
.color-4{color: #0099cc;}
.color-5{color: #33b5e5;}
.color-6{color: #aa66cc;}
.color-8{color: #cc0000;}
.color-9{color: #cc0000;}

View File

@@ -0,0 +1,20 @@
<html>
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="jquery.faketextbox.js" type="text/javascript"></script>
<script src="chat.js" type="text/javascript"></script>
<link href="chat.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="chat">
<div id="chatBuffer">
<ul>
</ul>
</div>
<div id="chatInputHas">
<strong>Chat</strong>
<div id="chatInput" />
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,166 @@
function colorize(string)
{
var newString = '';
var inSpan = false;
for (i = 0; i < string.length; i++)
{
if (string[i] == '^')
{
if (string[i + 1] == '7' || string[i + 1] == '0')
{
if (inSpan)
{
newString += '</span>';
inSpan = false;
}
i += 2;
}
else if (string[i + 1] >= '0' && string[i + 1] <= '9')
{
if (inSpan)
{
newString += '</span>';
}
i += 2;
newString += '<span class="color-' + string[i - 1] + '">';
inSpan = true;
}
}
newString += string[i];
}
if (inSpan)
{
newString += '</span>';
}
return newString;
}
$(function()
{
var chatHideTimeout;
var inputShown = false;
function startHideChat()
{
if (chatHideTimeout)
{
clearTimeout(chatHideTimeout);
}
if (inputShown)
{
return;
}
chatHideTimeout = setTimeout(function()
{
if (inputShown)
{
return;
}
$('#chat').animate({ opacity: 0 }, 300);
}, 7000);
}
handleResult = function(elem, wasEnter)
{
inputShown = false;
$('#chatInputHas').hide();
startHideChat();
var obj = {};
if (wasEnter)
{
obj = { message: $(elem).val() };
}
$(elem).val('');
$.post('http://chat/chatResult', JSON.stringify(obj), function(data)
{
console.log(data);
});
};
$('#chatInput').fakeTextbox(); // //
$('#chatInput')[0].onPress(function(e)
{
if (e.which == 13)
{
handleResult(this, true);
}
});
$(document).keyup(function(e)
{
if (e.keyCode == 27)
{
handleResult($('#chatInput')[0].getTextBox(), false);
}
});
$(document).keypress(function(e)
{
if (e.keyCode == 9)
{
e.preventDefault();
return false;
}
});
window.addEventListener('message', function(event)
{
var item = event.data;
if (item.meta && item.meta == 'openChatBox')
{
inputShown = true;
$('#chat').css('opacity', '1');
$('#chatInputHas').show();
$('#chatInput')[0].doFocus();
return;
}
// TODO: use some templating stuff for this
var colorR = parseInt(item.color[0]);
var colorG = parseInt(item.color[1]);
var colorB = parseInt(item.color[2]);
var name = item.name.replace('<', '&lt;');
var message = item.message.replace('<', '&lt;');
message = colorize(message);
var buf = $('#chatBuffer');
var nameStr = '';
if (name != '')
{
nameStr = '<strong style="color: rgb(' + colorR + ', ' + colorG + ', ' + colorB + ')">' + name + ': </strong>';
}
buf.find('ul').append('<li>' + nameStr + message + '</li>');
buf.scrollTop(buf[0].scrollHeight - buf.height());
$('#chat').css('opacity', '1');
startHideChat();
}, false);
});

View File

@@ -0,0 +1,103 @@
(function ($) {
$.fn.fakeTextbox = function () {
return this.each(function () {
var $me = $(this),
cursorTimer,
$tb = $('<input type="text" class="fake" />');
if ($me.data('ftbftw')) {
console.log('already initialized');
return;
}
$me.data('ftbftw', 1);
$tb.insertAfter($me);
function appendCaret(toHere, position, selStart, selEnd) {
if (position === selStart) {
toHere += "</div><div class='caret'>";
}
if (position === selEnd) {
toHere += "</div><div>";
}
return toHere;
}
function syncTextbox() {
var tbVal = $tb.val().replace('<', '&lt;');
var tbLen = tbVal.length;
var selStart = $tb.get(0).selectionStart;
var selEnd = $tb.get(0).selectionEnd;
var newOut = '<div>';
for (var i = 0; i < tbLen; i++) {
newOut = appendCaret(newOut, i, selStart, selEnd);
newOut += tbVal[i];
}
$me.html(colorize(appendCaret(newOut, i, selStart, selEnd) + '</div>'));
if (selStart != selEnd) {
$('.caret', $me).addClass('selection');
}
}
$me.click(function () {
$tb.focus();
});
$tb.bind("change keypress keyup", function()
{
setTimeout(syncTextbox, 1); //
})
.blur(function () {
clearInterval(cursorTimer);
cursorTimer = null;
var $cursor = $('.caret', $me);
$cursor.css({
visibility: 'visible'
});
$me.removeClass('focused');
}).focus(function () {
if (!cursorTimer) {
$me.addClass('focused');
cursorTimer = window.setInterval(function () {
var $cursor = $('.caret', $me);
if ($cursor.hasClass('selection') || $cursor.css('visibility') === 'hidden') {
$cursor.css({
visibility: 'visible'
});
} else {
$cursor.css({
visibility: 'hidden'
});
}
}, 500);
}
});
this.doFocus = function()
{
$tb.focus();
};
this.onPress = function(f)
{
$tb.bind('keypress', f);
};
this.getTextBox = function()
{
return $tb;
};
syncTextbox();
if ($me.hasClass('initFocus')) {
$tb.focus();
}
});
};
}(jQuery));