From a74bf9d19b103637d0a5cdaa8d9de6219c6d7c1d Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 1 Aug 2020 17:04:56 +0200
Subject: [PATCH] Live preview for user ranks

---
 .../files/acp/templates/userRankAdd.tpl       | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/userRankAdd.tpl b/wcfsetup/install/files/acp/templates/userRankAdd.tpl
index e30352caff..008445caf4 100644
--- a/wcfsetup/install/files/acp/templates/userRankAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/userRankAdd.tpl
@@ -1,11 +1,27 @@
 {include file='header' pageTitle='wcf.acp.user.rank.'|concat:$action}
 
 <script data-relocate="true">
-	$(function() {
-		$('#customCssClassName').click(function() {
-			$(this).parents('li').find('input[type=radio]').click();
+	(function() {
+		var previews = [];
+		elBySelAll('#labelList .jsRankPreview', undefined, function(preview) {
+			previews.push(preview);
 		});
-	});
+		
+		var input = elById('rankTitle');
+		function updatePreview() {
+			var value = input.value.trim() || '{lang}wcf.acp.user.rank.title{/lang}';
+			previews.forEach(function(preview) {
+				preview.textContent = value;
+			});
+		}
+		input.addEventListener('input', updatePreview, { passive: true });
+		
+		updatePreview();
+		
+		elById('customCssClassName').addEventListener('focus', function () {
+			elBySel('.jsCustomCssClassName').checked = true;
+		});
+	})();
 </script>
 
 <header class="contentHeader">
@@ -55,9 +71,9 @@
 				<ul id="labelList">
 					{foreach from=$availableCssClassNames item=className}
 						{if $className == 'custom'}
-							<li class="labelCustomClass"><input type="radio" name="cssClassName" value="custom"{if $cssClassName == 'custom'} checked{/if}> <span><input type="text" id="customCssClassName" name="customCssClassName" value="{$customCssClassName}" class="long"></span></li>
+							<li class="labelCustomClass"><input type="radio" name="cssClassName" class="jsCustomCssClassName" value="custom"{if $cssClassName == 'custom'} checked{/if}> <span><input type="text" id="customCssClassName" name="customCssClassName" value="{$customCssClassName}" class="long"></span></li>
 						{else}
-							<li><label><input type="radio" name="cssClassName" value="{$className}"{if $cssClassName == $className} checked{/if}> <span class="badge label{if $className != 'none'} {$className}{/if}">{lang}wcf.acp.user.rank.title{/lang}</span></label></li>
+							<li><label><input type="radio" name="cssClassName" value="{$className}"{if $cssClassName == $className} checked{/if}> <span class="badge label{if $className != 'none'} {$className}{/if} jsRankPreview">{lang}wcf.acp.user.rank.title{/lang}</span></label></li>
 						{/if}
 					{/foreach}
 				</ul>
-- 
2.20.1