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

Added a little character counter next to chatInput.

Browse Source
This commit is contained in:
max-m 2011-12-17 21:29:57 +01:00
parent decd03b079
commit 324977acf8
4 changed files with 69 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
messageTemplate: null,
init: function(roomID, messageID) {
this.bindEvents();
$('#chatInput').focus();
},
/**
@ -123,6 +124,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
if (this.loading || target.parent().hasClass('activeMenuItem')) return false;
this.loading = true;
target.parent().addClass('ajaxLoad');
}, this)
});
@ -192,18 +194,6 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
}
});
},
toggleUserMenu: function (target) {
liUserID = '#' + target.parent().parent().attr('id');
if ($(liUserID).hasClass('activeMenuItem')) {
$(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () {
$(liUserID).removeClass('activeMenuItem');
});
}
else {
$(liUserID).addClass('activeMenuItem');
$(liUserID + ' .chatUserMenu').wcfBlindIn();
}
},
toggleSidebarContent: function (target) {
if (target.parent().hasClass('active')) return;
@ -221,6 +211,18 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
$('#chatUserList').hide();
$('#chatRoomList').show();
}
},
toggleUserMenu: function (target) {
liUserID = '#' + target.parent().parent().attr('id');
if ($(liUserID).hasClass('activeMenuItem')) {
$(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () {
$(liUserID).removeClass('activeMenuItem');
});
}
else {
$(liUserID).addClass('activeMenuItem');
$(liUserID + ' .chatUserMenu').wcfBlindIn();
}
}
};
})(jQuery, document);

14
file/js/jCounter.jQuery.js Normal file
View File

@ -0,0 +1,14 @@
(function($){
$.fn.jCounter = function(jCounterID, options) {
var jCounter = $(jCounterID);
var defaultClass = jCounter.attr('class');
maxChars = (options != null) ? options : 140;
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);
}, this));
}
})(jQuery);

42
template/chat.tpl
View File

@ -75,6 +75,8 @@
#chatInput {
background-position: right center;
background-repeat: no-repeat;
position: relative;
z-index: 10;
}
#chatOptions {
@ -187,6 +189,27 @@
.hidden {
display: none;
}
.textCounter {
background: none repeat scroll 0 0 red;
margin-left: -5px;
padding: 5px;
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);
}
.textCounter.color-1 {
color: #FFFFFF;
}
.textCounter.color-2 {
color: #AF0002;
}
.textCounter.color-3 {
color: #D40D12;
}
</style>
</head>
@ -243,7 +266,8 @@
</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" required="required" placeholder="Submit with enter" />
<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>
</form>
<div id="chatControls">
@ -261,22 +285,22 @@
<ul>
<li>
<a id="chatAutoscroll" href="javascript:;" class="chatToggle balloonTooltip" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1">
<img alt="" src="{icon}enabled1{/icon}" /> <span>Scroll</span>
<img alt="" src="{icon}enabled1{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span>
</a>
</li>
<li>
<a id="chatNotify" href="javascript:;" class="chatToggle balloonTooltip" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
<img alt="" src="{icon}disabled1{/icon}" /> <span>Notify</span>
<img alt="" src="{icon}disabled1{/icon}" /> <span>{lang}wcf.chat.notify{/lang}</span>
</a>
</li>
<li>
<a id="chatClear" href="javascript:;" class="balloonTooltip" title="Clear the chat">
<img alt="" src="{icon}delete1{/icon}" /> <span>Clear</span>
<img alt="" src="{icon}delete1{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span>
</a>
</li>
<li>
<a id="chatMark" href="javascript:;" class="balloonTooltip" title="Show checkboxes">
<img alt="" src="{icon}check1{/icon}" /> <span>Mark</span>
<img alt="" src="{icon}check1{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span>
</a>
</li>
</ul>
@ -296,6 +320,14 @@
{@$message->jsonify()}
{/implode}
]);
TimWolla.WCF.Chat.config = {
reloadTime: {CHAT_RELOADTIME},
animations: {CHAT_ANIMATIONS},
maxTextLength: {CHAT_LENGTH}
}
$('#chatInput').jCounter('.textCounter', {CHAT_LENGTH});
//]]>
</script>

5
template/chatJavascriptInclude.tpl
View File

@ -1 +1,4 @@
{if $templateName == 'chat'}<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/TimWolla.WCF.Chat.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>{/if}
{if $templateName == 'chat'}
<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/TimWolla.WCF.Chat.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>
<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/jCounter.jQuery.js"></script>
{/if}