From a383f893a69106c233b4ad1ffd2ce4d6981ccaa4 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 2 Oct 2016 11:43:48 +0200 Subject: [PATCH] Added generic solution for adaptive sortables --- .../files/acp/templates/categoryList.tpl | 92 ++++++++++--------- .../files/js/WoltLabSuite/Core/Ui/Screen.js | 9 +- .../js/WoltLabSuite/Core/Ui/Sortable/List.js | 76 +++++++++++++++ 3 files changed, 132 insertions(+), 45 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Sortable/List.js diff --git a/wcfsetup/install/files/acp/templates/categoryList.tpl b/wcfsetup/install/files/acp/templates/categoryList.tpl index 64f16fc3cd..fc73b40ca6 100644 --- 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} }); @@ -103,6 +111,8 @@ + + {if $objectType->getProcessor()->canEditCategory()} {/if} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js index 9778b8370f..4c54d03f75 100644 --- 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 index 0000000000..3b0d9b315d --- /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 + * @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 -- 2.20.1