Added generic solution for adaptive sortables

diff --git a/wcfsetup/install/files/acp/templates/categoryList.tpl b/wcfsetup/install/files/acp/templates/categoryList.tpl
index 64f16fc3cd036fc14846e504dbe754bdf328f6fb..fc73b40ca6b6994bfa8e5bff64b0e86cb5d79d8b 100644 (file)
--- a/wcfsetup/install/files/acp/templates/categoryList.tpl
+++ b/wcfsetup/install/files/acp/templates/categoryList.tpl
@@ -17,48 +17,56 @@
                                sortableNodes.each(function(index, node) {
                                        $(node).wcfIdentify();
                                });
-                               
-                               new WCF.Sortable.List('categoryList', 'wcf\\data\\category\\CategoryAction', 0{if $objectType->getProcessor()->getMaximumNestingLevel() != -1}, {
-                                       /**
-                                        * Updates the sortable nodes after a sorting is started with
-                                        * regard to their possibility to have child the currently sorted
-                                        * category as a child category.
-                                        */
-                                       start: function(event, ui) {
-                                               var sortedListItem = $(ui.item);
-                                               var itemNestingLevel = sortedListItem.find('.sortableList:has(.sortableNode)').length;
-                                               
-                                               sortableNodes.each(function(index, node) {
-                                                       node = $(node);
-                                                       
-                                                       if (node.attr('id') != sortedListItem.attr('id')) {
-                                                               if (node.parents('.sortableList').length + itemNestingLevel >= {@$objectType->getProcessor()->getMaximumNestingLevel() + 1}) {
-                                                                       node.addClass('sortableNoNesting');
-                                                               }
-                                                               else if (node.hasClass('sortableNoNesting')) {
-                                                                       node.removeClass('sortableNoNesting');
+                       
+                               require(['WoltLabSuite/Core/Ui/Sortable/List'], function (UiSortableList) {
+                                       new UiSortableList({
+                                               containerId: 'categoryList',
+                                               className: 'wcf\\data\\category\\CategoryAction',
+                                               options: {
+                                                       {if $objectType->getProcessor()->getMaximumNestingLevel() != -1}
+                                                               /**
+                                                                * Updates the sortable nodes after a sorting is started with
+                                                                * regard to their possibility to have child the currently sorted
+                                                                * category as a child category.
+                                                                */
+                                                               start: function(event, ui) {
+                                                                       var sortedListItem = $(ui.item);
+                                                                       var itemNestingLevel = sortedListItem.find('.sortableList:has(.sortableNode)').length;
+                                                                       
+                                                                       sortableNodes.each(function(index, node) {
+                                                                               node = $(node);
+                                                                               
+                                                                               if (node.attr('id') != sortedListItem.attr('id')) {
+                                                                                       if (node.parents('.sortableList').length + itemNestingLevel >= {@$objectType->getProcessor()->getMaximumNestingLevel() + 1}) {
+                                                                                               node.addClass('sortableNoNesting');
+                                                                                       }
+                                                                                       else if (node.hasClass('sortableNoNesting')) {
+                                                                                               node.removeClass('sortableNoNesting');
+                                                                                       }
+                                                                               }
+                                                                       });
+                                                               },
+                                                               
+                                                               /**
+                                                                * Updates the sortable nodes after a sorting is completed with
+                                                                * regard to their possibility to have child categories.
+                                                                */
+                                                               stop: function(event, ui) {
+                                                                       sortableNodes.each(function(index, node) {
+                                                                               node = $(node);
+                                                                               
+                                                                               if (node.parents('.sortableList').length == {@$objectType->getProcessor()->getMaximumNestingLevel() + 1}) {
+                                                                                       node.addClass('sortableNoNesting');
+                                                                               }
+                                                                               else if (node.hasClass('sortableNoNesting')) {
+                                                                                       node.removeClass('sortableNoNesting');
+                                                                               }
+                                                                       });
                                                                }
-                                                       }
-                                               });
-                                       },
-                                       
-                                       /**
-                                        * Updates the sortable nodes after a sorting is completed with
-                                        * regard to their possibility to have child categories.
-                                        */
-                                       stop: function(event, ui) {
-                                               sortableNodes.each(function(index, node) {
-                                                       node = $(node);
-                                                       
-                                                       if (node.parents('.sortableList').length == {@$objectType->getProcessor()->getMaximumNestingLevel() + 1}) {
-                                                               node.addClass('sortableNoNesting');
-                                                       }
-                                                       else if (node.hasClass('sortableNoNesting')) {
-                                                               node.removeClass('sortableNoNesting');
-                                                       }
-                                               });
-                                       }
-                               }{/if});
+                                                       {/if}
+                                               }
+                                       });
+                               });
                        {/if}
                });
        </script>
@@ -103,6 +111,8 @@
                                                        </span>
                                                        
                                                        <span class="statusDisplay buttons">
+                                                               <span class="icon icon16 fa-arrows sortableNodeHandle"></span>
+                                                               
                                                                {if $objectType->getProcessor()->canEditCategory()}
                                                                        <a href="{link controller=$editController application=$objectType->getProcessor()->getApplication() id=$category->categoryID title=$category->getTitle()}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
                                                                {/if}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
index 9778b8370f6d897178a0c1174465992a006b365e..4c54d03f757071a46e2037739a4701811d00d914 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
@@ -193,10 +193,11 @@ define(['Core', 'Dictionary', 'Environment'], function(Core, Dictionary, Environ
                                        // discard all setup callbacks after execution
                                        queryObject.callbacksSetup = new Dictionary();
                                }
-                               
-                               queryObject.callbacksMatch.forEach(function(callback) {
-                                       callback();
-                               });
+                               else {
+                                       queryObject.callbacksMatch.forEach(function (callback) {
+                                               callback();
+                                       });
+                               }
                        }
                        else {
                                queryObject.callbacksUnmatch.forEach(function(callback) {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js
new file mode 100644 (file)
index 0000000..3b0d9b3
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js
@@ -0,0 +1,76 @@
+/**
+ * Sortable lists with optimized handling per device sizes.
+ * 
+ * @author     Alexander Ebert
+ * @copyright  2001-2016 WoltLab GmbH
+ * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module     WoltLabSuite/Core/Ui/Sortable/List
+ */
+define(['Core', 'Ui/Screen'], function (Core, UiScreen) {
+       "use strict";
+       
+       /**
+        * @constructor
+        */
+       function UiSortableList(options) { this.init(options); }
+       UiSortableList.prototype = {
+               /**
+                * Initializes the sortable list controller.
+                * 
+                * @param       {Object}        options         initialization options for `WCF.Sortable.List`
+                */
+               init: function (options) {
+                       this._options = Core.extend({
+                               containerId: '',
+                               className: '',
+                               offset: 0,
+                               options: {},
+                               isSimpleSorting: false,
+                               additionalParameters: {}
+                       }, options);
+                       
+                       UiScreen.on('screen-sm-md', {
+                               match: this._enable.bind(this, true),
+                               unmatch: this._disable.bind(this),
+                               setup: this._enable.bind(this, true)
+                       });
+                       
+                       UiScreen.on('screen-lg', {
+                               match: this._enable.bind(this, false),
+                               unmatch: this._disable.bind(this),
+                               setup: this._enable.bind(this, false)
+                       });
+               },
+               
+               /**
+                * Enables sorting with an optional sort handle.
+                * 
+                * @param       {boolean}       hasHandle       true if sort can only be started with the sort handle
+                * @protected
+                */
+               _enable: function (hasHandle) {
+                       var options = this._options.options;
+                       if (hasHandle) options.handle = '.sortableNodeHandle';
+                       
+                       new window.WCF.Sortable.List(
+                               this._options.containerId,
+                               this._options.className,
+                               this._options.offset,
+                               options,
+                               this._options.isSimpleSorting,
+                               this._options.additionalParameters
+                       );
+               },
+               
+               /**
+                * Disables sorting for registered containers.
+                * 
+                * @protected
+                */
+               _disable: function () {
+                       window.jQuery('#' + this._options.containerId + ' .sortableList')[(this._options.isSimpleSorting ? 'sortable' : 'nestedSortable')]('destroy');
+               }
+       };
+       
+       return UiSortableList;
+});
\ No newline at end of file