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 15ad58751169efbe26fa877588a98e841dc61b3c..14ed6e733caf9434a6b0d5280c4741eef00aaf20 100644 (file)
--- 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 21ad0901bb7a8a6f5f2321f1410c56b26c60d2ea..8c37661d59227dc28d937849f8214e255ac32509 100644 (file)
--- 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() {}