Merge pull request #2 from sharazghouri/order-setting

Sortable settings Type added

src/SettingsAPI.php

@@ -361,6 +361,7 @@ public function admin_enqueue_scripts() {
 		wp_enqueue_script( 'jquery-ui-core' );
 		wp_enqueue_script( 'jquery-ui-datepicker' );
 		wp_enqueue_script( 'jquery-ui-timepicker' );
+		wp_enqueue_script( 'jquery-ui-sortable' );
 		wp_enqueue_script( 'sbsa' );
 
 		$data = array(
@@ -996,6 +997,43 @@ public function generate_radio_field( $args ) {
 		$this->generate_description( $args['desc'] );
 	}
 
+	/**
+	 * Generate: Sortable list
+	 * @param array $args Field arguments.
+	 */
+	public function generate_sortable_list_field( $args ) {
+
+		$args['value'] = esc_html( esc_attr( $args['value'] ) );
+		$sortable_choices = $args['choices'];
+
+
+		if( ! empty( $args['value'] ) ) {
+			$sbsa_list_order = explode(",", $args['value'] );
+			$new_order = array();
+			foreach ($sbsa_list_order as $key) {
+					 if (array_key_exists($key, $sortable_choices)) {
+							 $new_order[$key] = $sortable_choices[$key];
+					 }
+			}
+			$sortable_choices = $new_order;
+
+		}
+		?>
+			<ul class="sbsa-sortable-list" id="<?php echo esc_attr( $args['id'] );?>" >
+		<?php
+		foreach ( $sortable_choices as $value => $text ) {
+			// $field_id = sprintf( '%s_list-%s', 'sbsa', $value );
+			$field_id = sprintf( '%s', $value );
+		?>
+				<li class="ui-state-default" id="<?php echo $field_id ;?>"><span class="dashicons dashicons-move
+"></span><?php esc_html_e( $text, 'sbsa')?></li>
+		<?php
+			}
+		echo	'</ul>';
+		echo sprintf( '<input type="text" name="%s" id="%s" value="%s" class="%s hidden sbsa-sortable-list-field"> ', esc_attr( $args['name'] ), esc_attr( $args['id'] ), esc_html( $args['value'] ), esc_attr( $args['class'] ) );
+		$this->generate_description( $args['desc'] );
+	}
+
 	/**
 	 * Generate: Checkbox field
 	 *
@@ -1179,33 +1217,6 @@ public function generate_icon_field( $args ) {
 		echo sprintf('<div class="sbsa-icon-output">%s</div>', $icon_output );
 
 		?>
-
-	<script type='text/javascript'>
-			jQuery( document ).ready( function( $ ) {
-				// $(document).on( 'click', '.sbsa-browse-icon', function( e ) {
-				// 	e.preventDefault();
-
-				// 	const ModelID = $(this).attr('data-model');
-
-				// 	$( `#${ModelID}` ).show();
-				// } );
-
-
-				// $( '.sbsa-modal-icon .close' ).on( 'click', function() {
-				// 	$( '.sbsa-modal-icon' ).hide();
-				// 	$( '.sbsa_search_icon' ).val( '' );
-				// 	$( '.sbsa_icon_ul li' ).show();
-				// } );
-
-				// $( window ).on( 'click', function( e ) {
-				// 	if ( e.target.classList.contains('sbsa-modal-icon') ) {
-				// 		$( '.sbsa-modal-icon' ).hide();
-				// 		$( '.sbsa_search_icon' ).val( '' );
-				// 		$( '.sbsa_icon_ul li' ).show();
-				// 	}
-				// } );
-			});
-			</script>
 		<?php
 	}
 

src/assets/css/main.css

@@ -83,12 +83,27 @@
 	color: #d63638;
 }
 
+
 @media screen and (max-width: 782px) {
 	.sbsa-settings {
 		margin-left: -10px;
 	}
 }
 
+.sbsa-sortable-list li {
+	padding: 6px 2px;
+	font-size: 18px;
+	cursor: move;
+}
+
+
+.sbsa-sortable-list li span {
+	padding: 0 3px;
+	font-size: 16px;
+	vertical-align: middle;
+}
+
+
 .sbsa-settings__header {
 	background: #fff;
 	border-bottom: 1px solid #e2e4e7;

src/assets/js/main.js

@@ -36,7 +36,7 @@
 
 			sbsa.setup_timepickers();
 			sbsa.setup_datepickers();
-
+			sbsa.setup_sortable();
 		},
 
 		/**
@@ -220,6 +220,24 @@
 			});
 		},
 
+		/**
+		 * Set up sortable
+		 */
+		setup_sortable: function() {
+			$( '.sbsa-sortable-list' ).sortable({
+				cursor: "move",
+				update: function( event, ui ) {
+
+					const SortItem = $(ui.item).parent();
+					const SortOrder = wp.hooks.applyFilters( 'sbsa_sort_list_update_value',$(SortItem ).sortable('toArray') );
+
+					$(SortItem).parent().find('.sbsa-sortable-list-field').val(SortOrder.join(','));
+					wp.hooks.doAction('sbsa_sort_list_update', SortItem, SortOrder); // use this Js Action hook to send ajax. It's totally upto you.
+
+				}
+			});
+
+		},
 		/**
 		 * Setup repeatable groups
 		 */

src/assets/vendor/jquery-ui/LICENSE.txt

@@ -0,0 +1,43 @@
+Copyright OpenJS Foundation and other contributors, https://openjsf.org/
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/jquery/jquery-ui
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+Copyright and related rights for sample code are waived via CC0. Sample
+code is defined as all source code contained within the demos directory.
+
+CC0: http://creativecommons.org/publicdomain/zero/1.0/
+
+====
+
+All files located in the node_modules and external directories are
+externally maintained libraries used by this software which have their
+own licenses; we recommend you read them, as their terms may differ from
+the terms above.