Added proper support for font size and color
[GitHub/WoltLab/WCF.git] / com.woltlab.wcf / templates / tagInput.tpl
index aeb8daaf842b73fc3980876b8c458b5a0b6fdc23..5efb00b8589ea455ac7614b2c18d675a8c8bd10b 100644 (file)
@@ -2,21 +2,24 @@
        <dl class="jsOnly">
                <dt><label for="tagSearchInput{if $tagInputSuffix|isset}{@$tagInputSuffix}{/if}">{lang}wcf.tagging.tags{/lang}</label></dt>
                <dd>
-                       <div id="tagList{if $tagInputSuffix|isset}{@$tagInputSuffix}{/if}" class="editableItemList"></div>
                        <input id="tagSearchInput{if $tagInputSuffix|isset}{@$tagInputSuffix}{/if}" type="text" value="" class="long" />
                        <small>{lang}wcf.tagging.tags.description{/lang}</small>
                </dd>
        </dl>
        
        <script data-relocate="true">
-               //<![CDATA[
-               $(function() {
-                       var $tagList = new WCF.Tagging.TagList('#tagList{if $tagInputSuffix|isset}{@$tagInputSuffix}{/if}', '#tagSearchInput{if $tagInputSuffix|isset}{@$tagInputSuffix}{/if}', {@TAGGING_MAX_TAG_LENGTH});
-                       
-                       {if $tags|isset && $tags|count}
-                               $tagList.load([ {implode from=$tags item=tag}'{$tag|encodeJS}'{/implode} ]);
-                       {/if}
+               require(['WoltLab/WCF/Ui/ItemList'], function(UiItemList) {
+                       UiItemList.init(
+                               'tagSearchInput{if $tagInputSuffix|isset}{@$tagInputSuffix}{/if}',
+                               [{if $tags|isset && $tags|count}{implode from=$tags item=tag}'{$tag|encodeJS}'{/implode}{/if}],
+                               {
+                                       ajax: {
+                                               className: 'wcf\\data\\tag\\TagAction'
+                                       },
+                                       maxLength: {@TAGGING_MAX_TAG_LENGTH},
+                                       submitFieldName: 'tags[]'
+                               }
+                       );
                });
-               //]]>
        </script>
 {/if}