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

file/js/TimWolla.WCF.Chat.js

@@ -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')) {

file/js/jCounter.jQuery.js

@@ -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);

template/chat.tpl

@@ -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,18 +239,18 @@
 				</li>
 			{/section}
 			</ul>
-		<h2>{lang}wcf.chat.rooms{/lang}</h2>
+			<nav id="chatRoomList" class="sidebarMenu hidden">
-		<nav class="sidebarMenu">
+				<div>
-			<div>
+					<ul>
-				<ul>
+					{foreach from=$rooms item='roomListRoom'}
-				{foreach from=$rooms item='roomListRoom'}
+						<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
-					<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
+							<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a>
-						<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a>
+						</li>
-					</li>
+					{/foreach}
-				{/foreach}
+					</ul>
-				</ul>
+				</div>
-			</div>
+			</nav>
-		</nav>
+		</div>
 	</div>
 </aside>
 <!-- CONTENT -->{/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>
 

template/chatJavascriptInclude.tpl

@@ -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}