Add sortability to custom profile fields form

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());

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;
+}

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();
+		}
+	});
+});

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}}">
 

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}}"/>

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}}">
 

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>

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}}"/>