From a0991bf1074b22490975ac91a7d5999c8e33fa9a Mon Sep 17 00:00:00 2001 From: Benjamin Mack Date: Sat, 15 Nov 2014 14:42:05 +0100 Subject: [PATCH] [TASK] FlexForms: Replace scripactulous with jQuery UI Sorting of flexforms (e.g. media element) is done with scriptaculous. The jQuery UI sortable functionality is a drop-in replacement already in use for IRRE sorting. The patch replaces the scriptaculous code with jQuery UI sortable. Releases: master Resolves: #62985 Change-Id: I8655cd2cc0004dc366ebb77b31f5e686dedaf74a Reviewed-on: http://review.typo3.org/34206 Reviewed-by: Sebastian Fischer Reviewed-by: Anja Leichsenring Tested-by: Anja Leichsenring Reviewed-by: Oliver Hader Tested-by: Oliver Hader --- .../Classes/Form/Element/FlexElement.php | 2 +- .../Public/JavaScript/FormEngineFlexForm.js | 23 +++++++++++-------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/typo3/sysext/backend/Classes/Form/Element/FlexElement.php b/typo3/sysext/backend/Classes/Form/Element/FlexElement.php index eb39e83972cd..d7239cac9ac6 100644 --- a/typo3/sysext/backend/Classes/Form/Element/FlexElement.php +++ b/typo3/sysext/backend/Classes/Form/Element/FlexElement.php @@ -364,7 +364,7 @@ class FlexElement extends AbstractFormElement { if ($mayRestructureFlexforms) { $ctrlHeader .= '
' - . IconUtility::getSpriteIcon('actions-move-move', array('title' => 'Drag to Move')) + . IconUtility::getSpriteIcon('actions-move-move', array('title' => 'Drag to Move', 'class' => 't3-js-sortable-handle')) . IconUtility::getSpriteIcon('actions-edit-delete', array('title' => 'Delete', 'class' => 't3-delete')) . '
'; } diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineFlexForm.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineFlexForm.js index b7249ff9967d..abd7673ec6b0 100644 --- a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineFlexForm.js +++ b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineFlexForm.js @@ -122,19 +122,22 @@ define('TYPO3/CMS/Backend/FormEngineFlexForm', ['jquery', 'TYPO3/CMS/Backend/For }; - // Create sortables for flexform sections + /** + * Allow flexform sections to be sorted + */ TYPO3.FormEngine.FlexFormElement.prototype.createSortable = function() { var me = this; - // @todo: use something else than scriptaculous sortable - Position.includeScrollOffsets = true; - Sortable.create(me.options.flexformId, { - tag: 'div', - constraint: false, - handle: me.options.sectionHeaderSelector.replace(/\./, ''), - onChange: function() { - me.setActionStatus(); - } + require(['jquery-ui/sortable'], function () { + me.$el.sortable({ + containment: 'parent', + handle: '.t3-js-sortable-handle', + axis: 'y', + tolerance: 'pointer', + stop: function () { + me.setActionStatus(); + } + }); }); }; -- 2.20.1