From a0991bf1074b22490975ac91a7d5999c8e33fa9a Mon Sep 17 00:00:00 2001
From: Benjamin Mack <benni@typo3.org>
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 <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>
---
 .../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 .= '<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 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