From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 1 Aug 2020 15:00:38 +0000 (+0200)
Subject: Modernize the JavaScript for the live preview for labels
X-Git-Tag: 5.3.0_Alpha_1~103^2~1
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0f8bae85c1a22b4d06c1fdc5a6ffab21c3ec4467;p=GitHub%2FWoltLab%2FWCF.git

Modernize the JavaScript for the live preview for labels

Inlining the JavaScript made it much easier plus prevents increasing the bundle size.
---

diff --git a/wcfsetup/install/files/acp/templates/labelAdd.tpl b/wcfsetup/install/files/acp/templates/labelAdd.tpl
index 15ad587511..14ed6e733c 100644
--- a/wcfsetup/install/files/acp/templates/labelAdd.tpl
+++ b/wcfsetup/install/files/acp/templates/labelAdd.tpl
@@ -1,18 +1,27 @@
 {include file='header' pageTitle='wcf.acp.label.'|concat:$action}
 
-<script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.Label.js?v={@LAST_UPDATE_TIME}"></script>
 <script data-relocate="true">
-	$(function() {
-		WCF.Language.addObject({
-			'wcf.acp.label.defaultValue': '{lang}wcf.acp.label.defaultValue{/lang}'
+	(function() {
+		var previews = [];
+		elBySelAll('#labelList .jsLabelPreview', undefined, function(preview) {
+			previews.push(preview);
 		});
 		
-		new WCF.Label.ACPList();
+		var input = elById('label');
+		function updatePreview() {
+			var value = input.value.trim() || '{lang}wcf.acp.label.defaultValue{/lang}';
+			previews.forEach(function(preview) {
+				preview.textContent = value;
+			});
+		}
+		input.addEventListener('input', updatePreview, { passive: true });
 		
-		$('#customCssClassName').click(function() {
-			$(this).parents('li').find('input[type=radio]').click();
+		updatePreview();
+		
+		elById('customCssClassName').addEventListener('focus', function () {
+			elBySel('.jsCustomCssClassName').checked = true;
 		});
-	});
+	})();
 </script>
 
 <header class="contentHeader">
@@ -93,9 +102,9 @@
 					<ul id="labelList" class="inlineList">
 						{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}">Label</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} jsLabelPreview">Label</span></label></li>
 							{/if}
 						{/foreach}
 					</ul>
diff --git a/wcfsetup/install/files/js/WCF.Label.js b/wcfsetup/install/files/js/WCF.Label.js
index 21ad0901bb..8c37661d59 100644
--- a/wcfsetup/install/files/js/WCF.Label.js
+++ b/wcfsetup/install/files/js/WCF.Label.js
@@ -5,60 +5,15 @@
  */
 WCF.Label = {};
 
+/** @deprecated 5.3 */
+WCF.Label.ACPList = Class.extend({
+	_labelInput: {},
+	_labelList: {},
+	init: function() {},
+	_keyPressed: function() {}
+});
+
 if (COMPILER_TARGET_DEFAULT) {
-	/**
-	 * Provides enhancements for ACP label management.
-	 */
-	WCF.Label.ACPList = Class.extend({
-		/**
-		 * input element
-		 * @var        jQuery
-		 */
-		_labelInput: null,
-		
-		/**
-		 * list of pre-defined label items
-		 * @var        array<jQuery>
-		 */
-		_labelList: [],
-		
-		/**
-		 * Initializes the ACP label list.
-		 */
-		init: function () {
-			this._labelInput = $('#label').keydown($.proxy(this._keyPressed, this)).keyup($.proxy(this._keyPressed, this)).blur($.proxy(this._keyPressed, this));
-			
-			if ($.browser.mozilla && $.browser.touch) {
-				this._labelInput.on('input', $.proxy(this._keyPressed, this));
-			}
-			
-			$('#labelList').find('input[type="radio"]').each($.proxy(function (index, input) {
-				var $input = $(input);
-				
-				// ignore custom values
-				if ($input.prop('value') !== 'custom') {
-					this._labelList.push($($input.next('span')));
-				}
-			}, this));
-			
-			if (this._labelInput[0].value.length > 0) {
-				this._keyPressed();
-			}
-		},
-		
-		/**
-		 * Renders label name as label or falls back to a default value if label is empty.
-		 */
-		_keyPressed: function () {
-			var $text = this._labelInput.prop('value');
-			if ($text === '') $text = WCF.Language.get('wcf.acp.label.defaultValue');
-			
-			for (var $i = 0, $length = this._labelList.length; $i < $length; $i++) {
-				this._labelList[$i].text($text);
-			}
-		}
-	});
-	
 	/**
 	 * Provides simple logic to inherit associations within structured lists.
 	 */
@@ -105,13 +60,6 @@ if (COMPILER_TARGET_DEFAULT) {
 	});
 }
 else {
-	WCF.Label.ACPList = Class.extend({
-		_labelInput: {},
-		_labelList: {},
-		init: function() {},
-		_keyPressed: function() {}
-	});
-	
 	WCF.Label.ACPList.Connect = Class.extend({
 		init: function() {},
 		_click: function() {}