Tagging now uses `UI/ItemList`

diff --git a/com.woltlab.wcf/templates/tagInput.tpl b/com.woltlab.wcf/templates/tagInput.tpl
index aeb8daaf842b73fc3980876b8c458b5a0b6fdc23..f6eed68baddab60a7eae29276c34476874e861f4 100644 (file)
--- a/com.woltlab.wcf/templates/tagInput.tpl
+++ b/com.woltlab.wcf/templates/tagInput.tpl
@@ -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}

diff --git a/wcfsetup/install/files/js/.buildOrder b/wcfsetup/install/files/js/.buildOrder
index 5def664595b6f7b4b59c59429d0b1b4b43a2f77d..1b4382a0a660dafc5502faa2844c9bfa7abe3786 100644 (file)
--- a/wcfsetup/install/files/js/.buildOrder
+++ b/wcfsetup/install/files/js/.buildOrder
@@ -13,6 +13,5 @@ WCF.Location
 WCF.Message
 WCF.Poll
 WCF.Search.Message
-WCF.Tagging
 WCF.User
 WCF.Moderation

diff --git a/wcfsetup/install/files/js/WCF.Tagging.js b/wcfsetup/install/files/js/WCF.Tagging.js
deleted file mode 100644 (file)
index 0384a7b..0000000
--- a/wcfsetup/install/files/js/WCF.Tagging.js
+++ /dev/null
@@ -1,185 +0,0 @@
-"use strict";
-
-/**
- * Tagging System for WCF
- * 
- * @author     Alexander Ebert
- * @copyright  2001-2015 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- */
-
-/**
- * Namespace for tagging related functions.
- */
-WCF.Tagging = {};
-
-/**
- * Editable tag list.
- * 
- * @see        WCF.EditableItemList
- */
-WCF.Tagging.TagList = WCF.EditableItemList.extend({
-       /**
-        * @see WCF.EditableItemList._className
-        */
-       _className: 'wcf\\data\\tag\\TagAction',
-       
-       /**
-        * maximum tag length
-        * @var integer
-        */
-       _maxLength: 0,
-       
-       /**
-        * @see WCF.EditableItemList.init()
-        */
-       init: function(itemListSelector, searchInputSelector, maxLength) {
-               this._allowCustomInput = true;
-               this._maxLength = maxLength;
-               
-               this._super(itemListSelector, searchInputSelector);
-               
-               this._data = [ ];
-               this._search = new WCF.Tagging.TagSearch(this._searchInput, $.proxy(this.addItem, this));
-               this._itemList.addClass('tagList');
-               $(itemListSelector).data('__api', this);
-       },
-       
-       /**
-        * @see WCF.EditableItemList._keyDown()
-        */
-       _keyDown: function(event) {
-               if (this._super(event)) {
-                       // ignore submit event
-                       if (event === null) {
-                               return true;
-                       }
-                       
-                       var $keyCode = event.which;
-                       // allow [backspace], [escape], [enter] and [delete]
-                       if ($keyCode === 8 || $keyCode === 27 || $keyCode === 13 || $keyCode === 46) {
-                               return true;
-                       }
-                       else if ($keyCode > 36 && $keyCode < 41) {
-                               // allow arrow keys (37-40)
-                               return true;
-                       }
-                       
-                       if (this._searchInput.val().length >= this._maxLength) {
-                               return false;
-                       }
-                       
-                       return true;
-               }
-               
-               return false;
-       },
-       
-       /**
-        * @see WCF.EditableItemList._submit()
-        */
-       _submit: function() {
-               this._super();
-               
-               for (var $i = 0, $length = this._data.length; $i < $length; $i++) {
-                       // deleting items leaves crappy indices
-                       if (this._data[$i]) {
-                               $('<input type="hidden" name="tags[]" />').val(this._data[$i]).appendTo(this._form);
-                       }
-               };
-       },
-       
-       /**
-        * @see WCF.EditableItemList.addItem()
-        */
-       addItem: function(data) {
-               // enforce max length by trimming values
-               if (!data.objectID && data.label.length > this._maxLength) {
-                       data.label = data.label.substr(0, this._maxLength);
-               }
-               
-               if (WCF.inArray(data.label, this._data)) {
-                       return true;
-               }
-               
-               var $listItem = $('<li class="badge tag">' + WCF.String.escapeHTML(data.label) + '</li>').data('objectID', data.objectID).data('label', data.label).appendTo(this._itemList);
-               $listItem.click($.proxy(this._click, this));
-               
-               if (this._search) {
-                       this._search.addExcludedSearchValue(data.label);
-               }
-               
-               this._addItem(data.objectID, data.label);
-               
-               return true;
-       },
-       
-       /**
-        * @see WCF.EditableItemList._addItem()
-        */
-       _addItem: function(objectID, label) {
-               this._data.push(label);
-       },
-       
-       /**
-        * @see WCF.EditableItemList.clearList()
-        */
-       clearList: function() {
-               this._super();
-               
-               this._data = [ ];
-       },
-       
-       /**
-        * Returns the current tags.
-        * 
-        * @return      array<string>
-        */
-       getTags: function() {
-               return this._data;
-       },
-       
-       /**
-        * @see WCF.EditableItemList._removeItem()
-        */
-       _removeItem: function(objectID, label) {
-               for (var $i = 0, $length = this._data.length; $i < $length; $i++) {
-                       if (this._data[$i] === label) {
-                               // don't use "delete" here since it doesn't reindex
-                               // the array
-                               this._data.splice($i, 1);
-                               return;
-                       }
-               }
-       },
-       
-       /**
-        * @see WCF.EditableItemList.load()
-        */
-       load: function(data) {
-               if (data && data.length) {
-                       for (var $i = 0, $length = data.length; $i < $length; $i++) {
-                               this.addItem({ objectID: 0, label: WCF.String.unescapeHTML(data[$i]) });
-                       }
-               }
-       }
-});
-
-/**
- * Search handler for tags.
- * 
- * @see        WCF.Search.Base
- */
-WCF.Tagging.TagSearch = WCF.Search.Base.extend({
-       /**
-        * @see WCF.Search.Base._className
-        */
-       _className: 'wcf\\data\\tag\\TagAction',
-       
-       /**
-        * @see WCF.Search.Base.init()
-        */
-       init: function(searchInput, callback, excludedSearchValues, commaSeperated) {
-               this._super(searchInput, callback, excludedSearchValues, commaSeperated, false);
-       }
-});