From 31a81fb446375b3f113ca2752d2a7ff83024adda Mon Sep 17 00:00:00 2001
From: nikitasinelnikov <nsinelnikov.work@gmail.com>
Date: Fri, 14 Feb 2020 16:05:54 +0200
Subject: [PATCH] - added compatibility with UM Profile Tabs;

---
 includes/admin/assets/css/um-admin-forms.css |  30 +++++
 includes/admin/assets/js/um-admin-forms.js   | 117 +++++++++++++------
 includes/admin/core/class-admin-forms.php    |  73 +++++++++++-
 3 files changed, 185 insertions(+), 35 deletions(-)

diff --git a/includes/admin/assets/css/um-admin-forms.css b/includes/admin/assets/css/um-admin-forms.css
index 7f268f00..d6bd77a3 100644
--- a/includes/admin/assets/css/um-admin-forms.css
+++ b/includes/admin/assets/css/um-admin-forms.css
@@ -367,4 +367,34 @@ textarea.um-forms-field.um-small-field {
 .um-forms-line[data-field_type="same_page_update"] th,
 .um-forms-line[data-field_type="same_page_update"] td {
     vertical-align: baseline;
+}
+
+.um-sortable-items-field .um-sortable-item {
+    cursor: move !important;
+    padding: 5px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border: 1px solid #7e8993;
+    border-radius: 4px;
+    -moz-border-radius: 4px;
+    background: #f1f1f1;
+    height: 42px;
+    line-height: 28px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.um-sortable-items-field .um-sortable-item.um-hidden-item {
+    display: none;
+}
+
+.um-sortable-items-field .um-sortable-item .um-field-icon {
+    font-size: 18px;
+    width: 20px;
+    text-align: left;
+    margin: 0 10px 0 0;
 }
\ No newline at end of file
diff --git a/includes/admin/assets/js/um-admin-forms.js b/includes/admin/assets/js/um-admin-forms.js
index a3122bdf..a611f9b1 100644
--- a/includes/admin/assets/js/um-admin-forms.js
+++ b/includes/admin/assets/js/um-admin-forms.js
@@ -149,10 +149,9 @@ jQuery(document).ready( function() {
 		update: function( event, ui ) {
 			var sortable_value = [];
 			jQuery(this).find('li').each( function() {
-				if ( jQuery(this).hasClass( 'um-hidden-item' ) ) {
-					return;
+				if ( ! jQuery(this).hasClass( 'um-hidden-item' ) ) {
+					sortable_value.push( jQuery(this).data('tab-id') );
 				}
-				sortable_value.push( jQuery(this).data('tab-id') );
 			});
 
 			jQuery(this).siblings('.um-sortable-items-value' ).val( sortable_value.join( ',' ) );
@@ -855,45 +854,95 @@ jQuery(document).ready( function() {
 			}
 
 		} else if ( condition === '~' ) {
-
-			var field_id = form_line.find( form_line.data('field_type') ).data('field_id');
+			var field_id;
 			var visible_options = [];
-			jQuery.each( condition_fields, function(i) {
-				var condition_field = condition_fields[ i ];
+			var lines_field;
 
-				var tagName = condition_field.prop("tagName").toLowerCase();
+			if ( form_line.data('field_type') === 'sortable_items' ) {
+				field_id = form_line.find( '.um-sortable-items-value' ).data('field_id');
 
-				if ( tagName === 'input' ) {
-					var input_type = condition_field.attr('type');
-					if ( input_type === 'checkbox' ) {
-						if ( value == '1' && condition_field.is(':checked') ) {
-							visible_options.push( condition_field.data( 'fill_' + field_id ) );
+				jQuery.each( condition_fields, function(i) {
+					var condition_field = condition_fields[ i ];
+
+					var tagName = condition_field.prop("tagName").toLowerCase();
+
+					if ( tagName === 'input' ) {
+						var input_type = condition_field.attr('type');
+						if ( input_type === 'checkbox' ) {
+							if ( value == '1' && condition_field.is(':checked') ) {
+								visible_options.push( condition_field.data( 'fill_' + field_id ) );
+							}
+						}
+					} else if ( tagName == 'select' ) {
+						if ( ! value && condition_field.val() ) {
+							visible_options = visible_options.concat( condition_field.val() );
+							visible_options = visible_options.filter( um_distinct );
 						}
 					}
-				} else if ( tagName == 'select' ) {
-					if ( ! value && condition_field.val() ) {
-						visible_options = visible_options.concat( condition_field.val() );
-						visible_options = visible_options.filter( um_distinct );
-					}
-				}
-			});
-
-			var lines_field = jQuery( '[data-field_id="' + field_id + '"]' );
-
-			if ( visible_options.length ) {
-				lines_field.find( 'option' ).hide();
-				jQuery.each( visible_options, function(i) {
-					lines_field.find( 'option[value="' + visible_options[ i ] + '"]' ).show();
 				});
-				if ( visible_options.indexOf( lines_field.val() ) === -1 ) {
-					lines_field.val( visible_options[0] );
-					lines_field.find( 'option' ).attr( 'selected', false ).prop( 'selected', false );
-					lines_field.find( 'option[value="' + visible_options[0] + '"]' ).attr( 'selected', true ).prop( 'selected', true );
+
+				lines_field = jQuery( '[data-field_id="' + field_id + '"]' );
+
+				if ( visible_options.length ) {
+					lines_field.siblings('.um-sortable-items-field').find('li').addClass('um-hidden-item');
+					jQuery.each( visible_options, function(i) {
+						lines_field.siblings('.um-sortable-items-field').find('li[data-tab-id="' + visible_options[ i ] + '"]').removeClass('um-hidden-item');
+					});
+
+					var sortable_value = [];
+					lines_field.siblings('.um-sortable-items-field').find('li').each( function() {
+						if ( ! jQuery(this).hasClass( 'um-hidden-item' ) ) {
+							sortable_value.push( jQuery(this).data('tab-id') );
+						}
+					});
+
+					lines_field.val( sortable_value.join( ',' ) );
+					lines_field.siblings( '.um-sortable-items-field' ).sortable( 'refresh' );
+
+					own_condition = true;
+				} else {
+					lines_field.val( null );
 				}
-				own_condition = true;
 			} else {
-				lines_field.val( null );
-				lines_field.find( 'option' ).attr( 'selected', false ).prop( 'selected', false );
+				field_id = form_line.find( form_line.data('field_type') ).data('field_id');
+
+				jQuery.each( condition_fields, function(i) {
+					var condition_field = condition_fields[ i ];
+
+					var tagName = condition_field.prop("tagName").toLowerCase();
+
+					if ( tagName === 'input' ) {
+						var input_type = condition_field.attr('type');
+						if ( input_type === 'checkbox' ) {
+							if ( value == '1' && condition_field.is(':checked') ) {
+								visible_options.push( condition_field.data( 'fill_' + field_id ) );
+							}
+						}
+					} else if ( tagName == 'select' ) {
+						if ( ! value && condition_field.val() ) {
+							visible_options = visible_options.concat( condition_field.val() );
+							visible_options = visible_options.filter( um_distinct );
+						}
+					}
+				});
+
+				lines_field = jQuery( '[data-field_id="' + field_id + '"]' );
+
+				if ( visible_options.length ) {
+					lines_field.find( 'option' ).hide();
+					jQuery.each( visible_options, function(i) {
+						lines_field.find( 'option[value="' + visible_options[ i ] + '"]' ).show();
+					});
+					if ( visible_options.indexOf( lines_field.val() ) === -1 ) {
+						lines_field.val( visible_options[0] );
+						lines_field.find( 'option' ).attr( 'selected', false ).prop( 'selected', false );
+						lines_field.find( 'option[value="' + visible_options[0] + '"]' ).attr( 'selected', true ).prop( 'selected', true );
+					}
+					own_condition = true;
+				} else {
+					lines_field.val( null );
+					lines_field.find( 'option' ).attr( 'selected', false ).prop( 'selected', false );
+				}
 			}
 
 			return ( own_condition && parent_condition );
diff --git a/includes/admin/core/class-admin-forms.php b/includes/admin/core/class-admin-forms.php
index d6034bb2..4d94b52b 100644
--- a/includes/admin/core/class-admin-forms.php
+++ b/includes/admin/core/class-admin-forms.php
@@ -534,7 +534,7 @@ if ( ! class_exists( 'um\admin\core\Admin_Forms' ) ) {
 
 			$html .= '</span><input type="hidden" ' . $name_attr . ' ' . $id_attr . ' ' . $value_attr . ' />';
 
-			if ( get_post_meta( get_the_ID(), '_um_icon', true ) ) {
+			if ( ! empty( $value ) ) {
 				$html .= '<span class="um-admin-icon-clear show"><i class="um-icon-android-cancel"></i></span>';
 			} else {
 				$html .= '<span class="um-admin-icon-clear"><i class="um-icon-android-cancel"></i></span>';
@@ -546,6 +546,77 @@ if ( ! class_exists( 'um\admin\core\Admin_Forms' ) ) {
 		}
 
 
+		/**
+		 * @param $field_data
+		 *
+		 * @return bool|string
+		 */
+		function render_sortable_items( $field_data ) {
+			if ( empty( $field_data['id'] ) ) {
+				return false;
+			}
+
+			if ( empty( $field_data['items'] ) ) {
+				return false;
+			}
+
+			$id = ( ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] : '' ) . '_' . $field_data['id'];
+			$id_attr = ' id="' . esc_attr( $id ) . '" ';
+
+			$size = ! empty( $field_data['size'] ) ? ' um-' . $field_data['size'] . '-field ' : ' um-long-field';
+
+			$name = $field_data['id'];
+			$name = ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] . '[' . $name . ']' : $name;
+			$name_attr = ' name="' . $name . '" ';
+
+			$value = $this->get_field_value( $field_data );
+			$value_attr = ' value="' . $value . '" ';
+
+			$data = array(
+				'field_id' => $field_data['id']
+			);
+
+			$data_attr = '';
+			foreach ( $data as $key => $val ) {
+				$data_attr .= ' data-' . $key . '="' . esc_attr( $val ) . '" ';
+			}
+
+			$html = '<input class="um-sortable-items-value" type="hidden" ' . $name_attr . ' ' . $id_attr . ' ' . $value_attr . ' ' . $data_attr . ' />';
+			$html .= '<ul class="um-sortable-items-field' . esc_attr( $size ) . '">';
+
+			if ( ! empty( $value ) ) {
+				$value_array = explode( ',', $value );
+				uksort( $field_data['items'], function( $a, $b ) use ( $value_array ) {
+
+					$arr_flip = array_flip( $value_array );
+
+					if ( ! isset( $arr_flip[ $b ] ) ) {
+						return 1;
+					}
+
+					if ( ! isset( $arr_flip[ $a ] ) ) {
+						return -1;
+					}
+
+					if ( $arr_flip[ $a ] == $arr_flip[ $b ] ) {
+						return 0;
+					}
+
+					return ( $arr_flip[ $a ] < $arr_flip[ $b ] ) ? -1 : 1;
+				} );
+			}
+
+			foreach ( $field_data['items'] as $tab_id => $tab_name ) {
+				$content = apply_filters( 'um_render_sortable_items_item_html', $tab_name, $tab_id, $field_data );
+				$html .= '<li data-tab-id="' . esc_attr( $tab_id ) . '" class="um-sortable-item"><span class="um-field-icon"><i class="um-faicon-sort"></i></span>' . $content . '</li>';
+			}
+
+			$html .= '</ul>';
+
+			return $html;
+		}
+
+
 		/**
 		 * @param $field_data
 		 *