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

Merge branch 'master' of github.com:wbbaddons/Tims-Chat

Browse Source
This commit is contained in:
Tim Düsterhus 2012-03-11 18:20:01 +01:00
commit b3907daf8f
3 changed files with 60 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
file/js/jCounter.jQuery.coffee
View File

@ -10,16 +10,23 @@
$.fn.jCounter = (container, options) ->
options = $.extend
max: 0
counterClass: 'jsCounter'
counterClass: 'jCounter'
countUp: false
cssFile: 'wcf/style/jCounter.css'
width: '100%'
, options
if this.attr('maxlength')
max = this.attr('maxlength')
else max = options.max
if $('#jCounterCSS').length == 0
$('head').append('<link id="jCounterCSS" rel="stylesheet" type="text/css" href="' + options.cssFile + '" >')
if !container
this.wrap('<div class="jsCounterContainer"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
if !this.hasClass('jCounterInput')
this.addClass('jCounterInput')
this.wrap('<div class="jCounterContainer" style="width: ' + options.width + '"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
jCounterContainer = $(this).parent().children('.' + options.counterClass)
else
if typeof container is 'object'
@ -33,7 +40,14 @@
else
length = max - this.val().length
if options.countUp
if options.countUp && max > 0
if length < max / 2
color = 1
else if length >= max / 2 and length <= max / 1.2
color = 2
else
color = 3
else if options.countUp
color = 1
else
if length > max / 2

42
file/style/jCounter.scss Normal file
View File

@ -0,0 +1,42 @@
.jCounterContainer {
display: table;
> div {
display: table-row;
}
}
.jCounterInput {
height: 16px;
width: 100%;
position: relative;
z-index: 9999;
box-sizing: content-box !important;
}
.jCounterInput, .jCounter {
display: table-cell;
}
.jCounter {
text-align: center;
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;
border: 1px solid rgba(255, 255, 255, 0.3);
width: 30px;
&.color-1 {
color: #FFFFFF;
}
&.color-2 {
color: rgba(255,255,255,0.5);
}
&.color-3 {
color: #D40D12;
}
}

48
template/chat.tpl
View File

@ -40,52 +40,6 @@
.ajaxLoad {
background-image: url({icon size='S'}spinner1{/icon});
}
/*
* jCounter CSS
*
* TODO: Seperate jCounter completely from Tims-Chat
*/
.jsCounterContainer {
display: table;
}
.jsCounterContainer > div {
display: table-row;
}
.jsCounterInput {
height: 16px;
box-sizing: content-box !important;
}
.jsCounterInput, .jsCounter {
display: table-cell;
}
.jsCounterInput, .jsCounterContainer {
width: 100%;
}
.jsCounter {
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;
border: 1px solid rgba(255, 255, 255, 0.3);
width: 30px;
}
.jsCounter.color-1 {
color: #FFFFFF;
}
.jsCounter.color-2 {
color: rgba(255,255,255,0.5);
}
.jsCounter.color-3 {
color: #D40D12;
}
</style>
</head>
@ -103,7 +57,7 @@
</div>
<form id="timsChatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
<input type="text" id="timsChatInput" class="inputText long jsCounterInput" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
<input type="text" id="timsChatInput" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
</form>
<div id="timsChatControls" class="wcf-box wcf-marginTop">