Make use of WCF.Template (JavaScript)

file/js/be.bastelstu.Chat.litcoffee

@@ -84,7 +84,7 @@ exposed by a function if necessary.
 Initialize **Tims Chat**. Bind needed DOM events and initialize data structures.
 
 		initialized = false
-		init = (roomID, config, titleTemplate, messageTemplate, userTemplate, userMenuTemplate) ->
+		init = (roomID, config, titleTemplate, messageTemplate, userTemplate, userMenuTemplate, userInviteDialogTemplate) ->
 			return false if initialized
 			initialized = true
 			
@@ -95,6 +95,17 @@ Initialize **Tims Chat**. Bind needed DOM events and initialize data structures.
 			v.messageTemplate = messageTemplate
 			v.userTemplate = userTemplate
 			v.userMenuTemplate = userMenuTemplate
+			v.userInviteDialogTemplate = userInviteDialogTemplate
+			v.userInviteDialogUserListEntryTemplate = new WCF.Template """
+				<dl>
+					<dt></dt>
+					<dd>
+						<label>
+							<input type="checkbox" id="userInviteDialogUserID-{$user.objectID}" value="{$user.objectID}" checked="checked" /> {$user.label}
+						</label>
+					</dd>
+				</dl>
+			"""
 			
 			console.log 'Initializing'
 
@@ -246,7 +257,7 @@ The the word the caret is in will be passed to `autocomplete` and replaced if a
 						toComplete = autocomplete.value.substring lastSpace + 1
 						nextSpace = toComplete.indexOf ' '
 						if nextSpace is -1
-							afterComplete = '';
+							afterComplete = ''
 						else
 							afterComplete = toComplete.substring nextSpace + 1
 							toComplete = toComplete.substring 0, nextSpace
@@ -361,12 +372,47 @@ Show invite dialog.
 						data:
 							actionName: 'prepareInvite'
 							className: 'chat\\data\\user\\UserAction'
-						showLoadingOverlay: true
-						suppressErrors: false
 						success: (data) ->
 							$('<div id="timsChatInviteDialog"></div>').appendTo 'body' unless $.wcfIsset 'timsChatInviteDialog'
 							
-							$('#timsChatInviteDialog').html(data.returnValues.template).wcfDialog
+							timsChatInviteDialog = $ '#timsChatInviteDialog'
+							
+							# Remove old event listeners
+							do timsChatInviteDialog.find('#userInviteDialogUsernameInput').off().remove
+							
+							timsChatInviteDialog.html v.userInviteDialogTemplate.fetch
+								users: data.returnValues.users
+								
+							new WCF.Search.User '#userInviteDialogUsernameInput', (user) ->
+								if $.wcfIsset "userInviteDialogUserID-#{user.objectID}"
+									$("#userInviteDialogUserID-#{user.objectID}").prop 'checked', true
+								else
+									$('#userInviteDialogUserList').append v.userInviteDialogUserListEntryTemplate.fetch
+										user: user
+										
+								$('#userInviteDialogUsernameInput').val ""
+							, false, [ WCF.User.username ], false
+							
+							$('#userInviteDialogFormSubmit').on 'click', (event) ->
+								checked = $ '#userInviteDialogUserList input[type=checkbox]:checked, #userInviteDialogFollowingList input[type=checkbox]:checked'
+								inviteUserList = [ ]
+								
+								checked.each (k, v) -> inviteUserList.push do $(v).val
+								
+								if inviteUserList.length
+									new WCF.Action.Proxy
+										autoSend: true
+										data:
+											actionName: 'invite'
+											className: 'chat\\data\\user\\UserAction'
+											parameters:
+												recipients: inviteUserList
+										success: (data) ->
+											do new WCF.System.Notification(WCF.Language.get 'wcf.global.success').show
+											
+								$('#timsChatInviteDialog').wcfDialog 'close'
+								
+							timsChatInviteDialog.wcfDialog
 								title: WCF.Language.get 'chat.global.invite'
 								
 

file/lib/data/user/UserAction.class.php

@@ -33,12 +33,16 @@ public function prepareInvite() {
 		$followingList->readObjects();
 		$users = $followingList->getObjects();
 		
-		WCF::getTPL()->assign(array(
+		$json = array();
-			'users' => $users
+		foreach ($users as $user) {
-		));
+			$json[] = array(
+				'userID' => $user->userID,
+				'username' => $user->username
+			);
+		}
 		
 		return array(
-			'template' => WCF::getTPL()->fetch('userInviteDialog', 'chat')
+			'users' => $json
 		);
 	}
 	

template/chat.tpl

@@ -52,6 +52,7 @@
 						{capture assign='messageTemplate'}{include application='chat' file='message'}{/capture}
 						{capture assign='userTemplate'}{include application='chat' file='userListUser'}{/capture}
 						{capture assign='userMenuTemplate'}{include application='chat' file='userListUserMenu'}{/capture}
+						{capture assign='userInviteDialogTemplate'}{include application='chat' file='userInviteDialog'}{/capture}
 						
 						var config = {
 							reloadTime: {@CHAT_RELOADTIME},
@@ -68,7 +69,8 @@
 							new WCF.Template('{literal}{if $newMessageCount}({#$newMessageCount}) {/if}{$title} - {/literal}{"chat.global.title"|language|encodeJS} - {PAGE_TITLE|language|encodeJS}'),
 							new WCF.Template('{@$messageTemplate|encodeJS}'),
 							new WCF.Template('{@$userTemplate|encodeJS}'),
-							new WCF.Template('{@$userMenuTemplate|encodeJS}')
+							new WCF.Template('{@$userMenuTemplate|encodeJS}'),
+							new WCF.Template('{@$userInviteDialogTemplate|encodeJS}')
 						);
 						
 						{event name='afterInit'}

template/userInviteDialog.tpl

@@ -1,29 +1,28 @@
+{literal}
 	<div id="userInviteDialogContainer">
 		<fieldset>
 			<legend>{lang}wcf.user.access.following{/lang}</legend>
 			
-		{if $users|count === 0}
+			{if $users.length === 0}
-			<p class="noFollowing">{lang}chat.global.invite.noFollowing{/lang}</p>
+				<p class="info">{lang}chat.global.invite.noFollowing{/lang}</p>
-		{/if}
+			{else}
-		
+				<div id="userInviteDialogFollowingList">
-		<div id="userInviteDialogUserlist">
 					<dl>
-				{foreach from=$users item=$user}
+						{foreach from=$users item="user"}
 							<dt></dt>
-					<dd><label><input type="checkbox" id="userInviteDialogUserID-{$user->userID}" data-user-id="{$user->userID}" /> {$user->username}</label></dd>
+							<dd><label><input type="checkbox" id="userInviteDialogUserID-{$user.userID}" value="{$user.userID}" /> {$user.username}</label></dd>
 						{/foreach}
 					</dl>
 				</div>
-		
+			{/if}
-		<div class="formSubmit">
-			<input id="userInviteDialogFormSubmit" type="submit" value="{lang}wcf.global.button.submit{/lang}" />
-		</div>
 		</fieldset>
 		
 		<fieldset>
 			<legend>{lang}chat.user.search{/lang}</legend>
 			
-		<dl>
+			<div id="userInviteDialogUserList"></div>
+			
+			<dl class="marginTop">
 				<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
 				<dd>
 					<span>
@@ -31,56 +30,10 @@
 					</span>
 				</dd>
 			</dl>
+			
+			<div class="formSubmit">
+				<input id="userInviteDialogFormSubmit" type="submit" value="{lang}wcf.global.button.submit{/lang}" />
+			</div>
 		</fieldset>
 	</div>
-
+{/literal}
-<script>
-	(function() {
-		new WCF.Search.User('#userInviteDialogUsernameInput', function(user) {
-			if (!$.wcfIsset('userInviteDialogUserID-' + user.objectID)) {
-				$('.noFollowing').hide();
-				
-				$('#userInviteDialogUserlist').append('<dl>\
-					<dt></dt>\
-					<dd>\
-						<label>\
-							<input type="checkbox" id="userInviteDialogUserID-' + user.objectID + '" data-user-id="' + user.objectID + '" checked="checked" /> ' + user.label + '\
-						</label>\
-					</dd>\
-				</dl>');
-			}
-			else {
-				$('#userInviteDialogUserID-' + user.objectID).prop('checked', true);
-			}
-			
-			$('#userInviteDialogUsernameInput').val('');
-		}, false, ['{$__wcf->getUser()->username|encodeJS}'], false);
-		
-		$('#userInviteDialogFormSubmit').on('click', function(event) {
-			var checked = $('#userInviteDialogUserlist input[type=checkbox]:checked');
-			var userList = [];
-			
-			checked.each(function(k, v) {
-				userList.push($(v).data('userID'));
-			});
-			
-			if (userList.length) {
-				new WCF.Action.Proxy({
-					autoSend: true,
-					data: {
-						actionName: 'invite',
-						className: 'chat\\data\\user\\UserAction',
-						parameters: {
-							recipients: userList
-						}
-					},
-					success: function (data) {
-						new WCF.System.Notification('{lang}wcf.global.success{/lang}').show();
-					}
-				});
-			}
-			
-			$('#timsChatInviteDialog').wcfDialog('close');
-		});
-	})();
-</script>