Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2025-01-09 00:20: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) { success: $.proxy(function (data, textStatus, jqXHR) {
this.getMessages(); this.getMessages();
$('#chatInput').val('').focus(); $('#chatInput').val('').focus();
$('#chatForm .counter').text(this.config.maxTextLength);
}, this), }, this),
complete: function() { complete: function() {
submitButton.removeClass('ajaxLoad'); 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($){ (function($){
$.fn.jCounter = function(jCounterID, options) { $.fn.jCounter = function(max, options) {
var jCounter = $(jCounterID); maxChars = max || 140;
var defaultClass = jCounter.attr('class'); options = $.extend({
maxChars = (options != null) ? options : 140; container: '<span></span>',
counterClass: 'counter',
countUp: false
}, options);
var timeout;
jCounterContainer = $(options.container);
this.on('keypress keydown keyup', $.proxy(function() { this.on('keypress keydown keyup', $.proxy(function() {
var length = maxChars - this.val().length; if(options.countUp) length = this.val().length;
if(length <= maxChars) color = 1; else length = maxChars - this.val().length;
if(length <= maxChars / 2) color = 2;
if(length <= maxChars / 7) color = 3; if(options.countUp) color = 1;
jCounter.text(length).addClass(defaultClass + ' color-'+color); 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)); }, this));
} }
})(jQuery); })(jQuery);

48
template/chat.tpl
View File

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