[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 <typo3@evoweb.de>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>
Tested-by: Oliver Hader <oliver.hader@typo3.org>

diff --git a/typo3/sysext/backend/Classes/Form/Element/FlexElement.php b/typo3/sysext/backend/Classes/Form/Element/FlexElement.php
index eb39e83..d7239ca 100644 (file)
--- 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 .= '<div class="pull-right">'
-                                                                       . 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'))
                                                                        . '</div>';
                                                        }

diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineFlexForm.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngineFlexForm.js
index b7249ff..abd7673 100644 (file)
--- 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();
+                               }
+                       });
                });
        };