From cc007f715d8ee7b25feae428d16823abe1850c2b Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Sat, 18 Jan 2020 10:43:28 -0500
Subject: [PATCH] Add sortability to custom profile fields form

---
 src/Module/Settings/Profile/Index.php         |  4 +++
 view/global.css                               | 34 +++++++++++++++++++
 view/js/module/settings/profile/index.js      | 13 +++++++
 .../templates/settings/profile/field/edit.tpl |  4 +--
 view/templates/settings/profile/index.tpl     |  2 ++
 .../templates/settings/profile/field/edit.tpl |  4 +--
 .../frio/templates/settings/profile/index.tpl |  2 ++
 .../vier/templates/settings/profile/index.tpl |  2 ++
 8 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 view/js/module/settings/profile/index.js

diff --git a/src/Module/Settings/Profile/Index.php b/src/Module/Settings/Profile/Index.php
index 778f7c09c7..d719afeacf 100644
--- a/src/Module/Settings/Profile/Index.php
+++ b/src/Module/Settings/Profile/Index.php
@@ -7,6 +7,7 @@ use Friendica\Core\Hook;
 use Friendica\Core\Protocol;
 use Friendica\Core\Renderer;
 use Friendica\Core\Session;
+use Friendica\Core\Theme;
 use Friendica\Core\Worker;
 use Friendica\Database\DBA;
 use Friendica\DI;
@@ -162,6 +163,9 @@ class Index extends BaseSettingsModule
 
 		$a = DI::app();
 
+		DI::page()->registerFooterScript('view/asset/es-jquery-sortable/source/js/jquery-sortable-min.js');
+		DI::page()->registerFooterScript(Theme::getPathForFile('js/module/settings/profile/index.js'));
+
 		$custom_fields = [];
 
 		$profileFields = DI::profileField()->selectByUserId(local_user());
diff --git a/view/global.css b/view/global.css
index 0eaf4482dc..bf4c21314d 100644
--- a/view/global.css
+++ b/view/global.css
@@ -639,3 +639,37 @@ span.emoji.mastodon img {
     display: none;
   }
 }
+
+/* Profile Settings Custom Fields */
+body.dragging, body.dragging * {
+	cursor: ns-resize !important;
+}
+
+.dragged {
+	position: absolute;
+	opacity: 0.5;
+	z-index: 2000;
+}
+
+#profile-custom-fields > fieldset > legend {
+	cursor: ns-resize;
+}
+
+#profile-custom-fields div.placeholder {
+	position: relative;
+	margin: 0;
+	padding: 0;
+	border-top: 1px dotted black;
+}
+#profile-custom-fields div.placeholder:before {
+	position: absolute;
+	content: "";
+	width: 0;
+	height: 0;
+	margin-top: -7px;
+	left: -7px;
+	top: -1px;
+	border: 7px solid transparent;
+	border-left-color: black;
+	border-right: none;
+}
diff --git a/view/js/module/settings/profile/index.js b/view/js/module/settings/profile/index.js
new file mode 100644
index 0000000000..1177e51ae7
--- /dev/null
+++ b/view/js/module/settings/profile/index.js
@@ -0,0 +1,13 @@
+$(function () {
+	$("#profile-custom-fields").sortable({
+		containerSelector: 'div#profile-custom-fields',
+		handle: 'legend',
+		itemSelector: 'fieldset',
+		placeholder: '<div class="placeholder"></div>',
+		onDrag: function($item, position, _super, event) {
+			delete position['left'];
+			$item.css(position);
+			event.preventDefault();
+		}
+	});
+});
diff --git a/view/templates/settings/profile/field/edit.tpl b/view/templates/settings/profile/field/edit.tpl
index 6254119f32..cff432709e 100644
--- a/view/templates/settings/profile/field/edit.tpl
+++ b/view/templates/settings/profile/field/edit.tpl
@@ -1,5 +1,5 @@
-<fieldset>
-	<legend>{{$profile_field.legend}}</legend>
+<fieldset data-id="{{$profile_field.id}}">
+	<legend>&#8801; {{$profile_field.legend}}</legend>
 
 	<input type="hidden" name="profile_field_order[]" value="{{$profile_field.id}}">
 
diff --git a/view/templates/settings/profile/index.tpl b/view/templates/settings/profile/index.tpl
index 979dfcc9ef..70db8a3d4b 100644
--- a/view/templates/settings/profile/index.tpl
+++ b/view/templates/settings/profile/index.tpl
@@ -99,9 +99,11 @@
 
 		<h3>{{$lbl_custom_fields_section}}</h3>
 
+		<div id="profile-custom-fields">
 		{{foreach $custom_fields as $custom_field}}
 			{{include file="settings/profile/field/edit.tpl" profile_field=$custom_field}}
 		{{/foreach}}
+		</div>
 
 		<div class="profile-edit-submit-wrapper">
 			<input type="submit" name="submit" class="profile-edit-submit-button" value="{{$submit}}"/>
diff --git a/view/theme/frio/templates/settings/profile/field/edit.tpl b/view/theme/frio/templates/settings/profile/field/edit.tpl
index cbfb55d3be..f28e559f5e 100644
--- a/view/theme/frio/templates/settings/profile/field/edit.tpl
+++ b/view/theme/frio/templates/settings/profile/field/edit.tpl
@@ -1,5 +1,5 @@
-<fieldset>
-	<legend>{{$profile_field.legend}}</legend>
+<fieldset data-id="{{$profile_field.id}}">
+	<legend>&#8801; {{$profile_field.legend}}</legend>
 
 	<input type="hidden" name="profile_field_order[]" value="{{$profile_field.id}}">
 
diff --git a/view/theme/frio/templates/settings/profile/index.tpl b/view/theme/frio/templates/settings/profile/index.tpl
index 57f8845b66..7afe11996e 100644
--- a/view/theme/frio/templates/settings/profile/index.tpl
+++ b/view/theme/frio/templates/settings/profile/index.tpl
@@ -157,9 +157,11 @@
 				</div>
 				<div id="custom-fields-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="custom-fields">
 					<div class="section-content-tools-wrapper">
+						<div id="profile-custom-fields">
 						{{foreach $custom_fields as $custom_field}}
 							{{include file="settings/profile/field/edit.tpl" profile_field=$custom_field}}
 						{{/foreach}}
+						</div>
 
 						<div class="form-group pull-right">
 							<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
diff --git a/view/theme/vier/templates/settings/profile/index.tpl b/view/theme/vier/templates/settings/profile/index.tpl
index 5d7a94c0a1..8ca6e0f885 100644
--- a/view/theme/vier/templates/settings/profile/index.tpl
+++ b/view/theme/vier/templates/settings/profile/index.tpl
@@ -150,9 +150,11 @@
 		<div class="toggle-section js-toggle-section">
 			<a class="section-caption js-section-toggler" href="javascript:;">{{$lbl_custom_fields_section}} &raquo;</a>
 			<div class="js-section toggle-section-content hidden">
+				<div id="profile-custom-fields">
 				{{foreach $custom_fields as $custom_field}}
 					{{include file="settings/profile/field/edit.tpl" profile_field=$custom_field}}
 				{{/foreach}}
+				</div>
 
 				<div class="profile-edit-submit-wrapper">
 					<input type="submit" name="submit" class="profile-edit-submit-button" value="{{$submit}}"/>