Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-10-31 14:10:08 +00:00
Code Issues Releases Wiki Activity

Changed counter a bit.

Browse Source
This commit is contained in:
max-m 2011-12-18 15:46:16 +01:00
parent 9f563de4e8
commit 9001c668ea
3 changed files with 66 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
file/js/TimWolla.WCF.Chat.js
View File

@ -188,6 +188,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
success: $.proxy(function (data, textStatus, jqXHR) {
this.getMessages();
$('#chatInput').val('').focus();
$('#chatForm .counter').text(this.config.maxTextLength);
}, this),
complete: function() {
submitButton.removeClass('ajaxLoad');

39
file/js/jCounter.jQuery.js
View File

@ -1,14 +1,35 @@
/**
* jCounter - a simple character counter
*
* @author Maximilian Mader
* @copyright 2011 Maximilian Mader
* @license Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
* @package jQuery.jCounter
*/
(function($){
$.fn.jCounter = function(jCounterID, options) {
var jCounter = $(jCounterID);
var defaultClass = jCounter.attr('class');
maxChars = (options != null) ? options : 140;
$.fn.jCounter = function(max, options) {
maxChars = max || 140;
options = $.extend({
container: '<span></span>',
counterClass: 'counter',
countUp: false
}, options);
var timeout;
jCounterContainer = $(options.container);
this.on('keypress keydown keyup', $.proxy(function() {
var length = maxChars - this.val().length;
if(length <= maxChars) color = 1;
if(length <= maxChars / 2) color = 2;
if(length <= maxChars / 7) color = 3;
jCounter.text(length).addClass(defaultClass + ' color-'+color);
if(options.countUp) length = this.val().length;
else length = maxChars - this.val().length;
if(options.countUp) color = 1;
else {
if (length > maxChars / 2) color = 1;
else if (length <= maxChars / 2 && length >= maxChars / 6) color = 2;
else color = 3;
}
jCounterContainer.text(length).attr('class', '').addClass(options.counterClass + ' color-'+color);
}, this));
}
})(jQuery);

48
template/chat.tpl
View File

@ -190,24 +190,43 @@
display: none;
}
.textCounter {
background: none repeat scroll 0 0 red;
margin-left: -5px;
padding: 5px;
.counterContainer {
display: table;
}
.counterContainer > div {
display: table-row;
}
.counterInput {
height: 16px;
}
.counterInput, .counter {
display: table-cell;
}
.counterInput, .counterContainer {
width: 100%;
}
.counter {
background-color: rgba(0, 0, 0, 0.7);
padding: 0 5px 0 10px;
position: relative;
z-index: 0 !important;
border-radius: 0px 5px 5px 0px;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.3);
width: 30px;
}
.textCounter.color-1 {
.counter.color-1 {
color: #FFFFFF;
}
.textCounter.color-2 {
color: #AF0002;
.counter.color-2 {
color: rgba(255,255,255,0.5);
}
.textCounter.color-3 {
.counter.color-3 {
color: #D40D12;
}
</style>
@ -255,7 +274,7 @@
</aside>
<!-- CONTENT -->{/capture}
{capture assign='header'}{include file='header' sandbox=false}{/capture}
{assign var='header' value='class="main"'|str_replace:'class="main right"':$header}
{assign var='header' value='class="main"'|str_replace:'class="main left"':$header}
{assign var='header' value='<!-- CONTENT -->'|str_replace:$sidebar:$header}
{@$header}
@ -266,8 +285,10 @@
</div>
<form id="chatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
<input type="text" id="chatInput" class="inputText long" name="text" autocomplete="off" maxlength="{CHAT_LENGTH}" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
<span class="textCounter color-1">{CHAT_LENGTH}</span>
<div class="counterContainer"><div>
<input type="text" id="chatInput" class="inputText long counterInput" name="text" autocomplete="off" maxlength="{CHAT_LENGTH}" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
<div class="counter color-1">{CHAT_LENGTH}</div>
</div></div>
</form>
<div id="chatControls">
@ -327,7 +348,8 @@
maxTextLength: {CHAT_LENGTH}
}
$('#chatInput').jCounter('.textCounter', {CHAT_LENGTH});
$('#chatInput').jCounter($('#chatInput').attr('maxlength'), { container: '.counter' });
$('#sidebar').wcfSidebar();
//]]>
</script>