mirror of
https://github.com/wbbaddons/Tims-Chat.git
synced 2024-12-22 21:40:08 +00:00
Merge branch 'chatTplRedesign' of github.com:wbbaddons/Tims-Chat into chatTplRedesign
This commit is contained in:
Tim Düsterhus
commit
9f563de4e8
@ -16,6 +16,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
|
||||
messageTemplate: null,
|
||||
init: function(roomID, messageID) {
|
||||
this.bindEvents();
|
||||
|
||||
$('#chatInput').focus();
|
||||
},
|
||||
/**
|
||||
@ -30,6 +31,11 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
|
||||
// return false;
|
||||
// });
|
||||
|
||||
$('.chatSidebarTabs li').click($.proxy(function (event) {
|
||||
event.preventDefault();
|
||||
this.toggleSidebarContent($(event.target));
|
||||
}, this));
|
||||
|
||||
$('.chatRoom').click($.proxy(function (event) {
|
||||
if (typeof window.history.replaceState != 'undefined') {
|
||||
event.preventDefault();
|
||||
@ -118,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)
|
||||
});
|
||||
@ -187,6 +194,24 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
|
||||
}
|
||||
});
|
||||
},
|
||||
toggleSidebarContent: function (target) {
|
||||
if (target.parent().hasClass('active')) return;
|
||||
|
||||
if (target.parent().attr('id') == "toggleUsers") {
|
||||
$('#toggleUsers').addClass('active');
|
||||
$('#toggleRooms').removeClass('active');
|
||||
|
||||
$('#chatRoomList').hide();
|
||||
$('#chatUserList').show();
|
||||
}
|
||||
else if (target.parent().attr('id') == "toggleRooms") {
|
||||
$('#toggleRooms').addClass('active');
|
||||
$('#toggleUsers').removeClass('active');
|
||||
|
||||
$('#chatUserList').hide();
|
||||
$('#chatRoomList').show();
|
||||
}
|
||||
},
|
||||
toggleUserMenu: function (target) {
|
||||
liUserID = '#' + target.parent().parent().attr('id');
|
||||
if ($(liUserID).hasClass('activeMenuItem')) {
|
||||
|
||||
14
file/js/jCounter.jQuery.js
Normal file
14
file/js/jCounter.jQuery.js
Normal 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);
|
||||
@ -18,6 +18,14 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
margin-bottom: -20px !important;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
/*height: 450px;*/
|
||||
}
|
||||
|
||||
aside {
|
||||
overflow: auto;
|
||||
padding: 0 1px 0 0;
|
||||
@ -64,6 +72,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#chatInput {
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#chatOptions {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -130,15 +145,87 @@
|
||||
.bgFix {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chatSidebarTabs {
|
||||
height: 30px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.chatSidebarTabs ul li {
|
||||
width: 50%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #BBCCDD;
|
||||
}
|
||||
|
||||
.chatSidebarTabs ul li a {
|
||||
padding: 7px 0px 0px 0px;
|
||||
color: #666666;
|
||||
height: 23px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.chatSidebarTabs ul li:first-child a {
|
||||
border-right: 1px solid #BBCCDD;
|
||||
}
|
||||
|
||||
.chatSidebarTabs ul li.active a {
|
||||
font-size: 130%;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
#chatRoomList {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#sidebarContainer {
|
||||
overflow-y: auto;
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<body id="tpl{$templateName|ucfirst}">
|
||||
{capture assign='sidebar'}<aside class="sidebar">
|
||||
<div id="sidebar">
|
||||
<h2>{lang}wcf.chat.users{/lang}</h2>
|
||||
<nav class="chatSidebarTabs">
|
||||
<ul>
|
||||
<li id="toggleUsers" class="active"><a href="javascript:;" title="{lang}wcf.chat.users{/lang}">{lang}wcf.chat.users{/lang}</a></li>
|
||||
<li id="toggleRooms"><a href="javascript:;" title="{lang}wcf.chat.rooms{/lang}">{lang}wcf.chat.rooms{/lang}</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="sidebarContainer">
|
||||
<ul id="chatUserList">
|
||||
{section name=user start=1 loop=11}
|
||||
{section name=user start=1 loop=26}
|
||||
<li id="user-{$user}" class="chatUser">
|
||||
<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>
|
||||
<ul class="chatUserMenu">
|
||||
@ -152,8 +239,7 @@
|
||||
</li>
|
||||
{/section}
|
||||
</ul>
|
||||
<h2>{lang}wcf.chat.rooms{/lang}</h2>
|
||||
<nav class="sidebarMenu">
|
||||
<nav id="chatRoomList" class="sidebarMenu hidden">
|
||||
<div>
|
||||
<ul>
|
||||
{foreach from=$rooms item='roomListRoom'}
|
||||
@ -165,6 +251,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- CONTENT -->{/capture}
|
||||
{capture assign='header'}{include file='header' sandbox=false}{/capture}
|
||||
@ -179,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">
|
||||
@ -197,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>
|
||||
@ -232,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>
|
||||
|
||||
|
||||
@ -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}
|
||||
Loading…
Reference in New Issue
Block a user