- changed form builder > icon field to new dropdown type;

assets/js/admin/builder.js

@@ -188,6 +188,7 @@ wp.hooks.addAction( 'um_admin_modal_success_result', 'um_admin_builder', functio
 
 	UM.admin.colorPicker.init();
 	UM.common.datetimePicker.init();
+	UM.admin.iconSelector.init();
 });
 
 wp.hooks.addAction( 'um_admin_modal_resize', 'um_admin_builder', function() {

assets/js/admin/common.js

@@ -33,10 +33,78 @@ UM.admin = {
 				$colorPicker.wpColorPicker();
 			}
 		}
+	},
+	iconSelector: {
+		init: function () {
+			let $iconSelector = jQuery('.um-icon-select-field');
+			if ( $iconSelector.length ) {
+
+				function iformat( icon ) {
+					let originalOption = icon.element;
+					if ( 'undefined' !== typeof originalOption ) {
+						return jQuery('<span><i class="' + jQuery( originalOption ).val() + '"></i> ' + icon.text + '</span>');
+					} else {
+						return jQuery('<span><i class="' + icon.id + '"></i> ' + icon.text + '</span>');
+					}
+				}
+
+				let select2_atts = {
+					ajax: {
+						url: wp.ajax.settings.url,
+						dataType: 'json',
+						delay: 250, // delay in ms while typing when to perform a AJAX search
+						data: function( params ) {
+							return {
+								search: params.term, // search query
+								action: 'um_get_icons', // AJAX action for admin-ajax.php
+								page: params.page || 1, // infinite scroll pagination
+								nonce: um_admin_scripts.nonce
+							};
+						},
+						processResults: function( response, params ) {
+							params.page = params.page || 1;
+							var options = [];
+
+							if ( response.data.icons ) {
+								// data is the array of arrays, and each of them contains ID and the Label of the option
+								jQuery.each( response.data.icons, function( index, text ) {
+									options.push( { id: index, text: text.label } );
+								});
+							}
+
+							return {
+								results: options,
+								pagination: {
+									more: ( params.page * 50 ) < response.data.total_count
+								}
+							};
+						},
+						cache: true
+					},
+					minimumInputLength: 0, // the minimum of symbols to input before perform a search
+					allowClear: true,
+					width: "100%",
+					allowHtml: true,
+					templateSelection: iformat,
+					templateResult: iformat,
+					dropdownCssClass: 'um-select2-icon-dropdown',
+					containerCssClass : 'um-select2-icon-container'
+				};
+
+				if ( $iconSelector.parents('.um-admin-tri').length ) {
+					select2_atts.dropdownParent = $iconSelector.parents('.um-admin-tri');
+				} else if ( $iconSelector.parents('._heading_text').length ) {
+					select2_atts.dropdownParent = $iconSelector.parents('._heading_text');
+				}
+
+				$iconSelector.select2( select2_atts );
+			}
+		}
 	}
 }
 
 jQuery(document).ready(function() {
 	UM.admin.tooltip.init();
 	UM.admin.colorPicker.init();
+	UM.admin.iconSelector.init();
 });

assets/js/admin/common.min.js

@@ -1 +1 @@
-"object"!=typeof window.UM&&(window.UM={}),"object"!=typeof window.UM.admin&&(window.UM.admin={}),UM.admin={tooltip:{all:null,init:function(){var o=jQuery(".um_tooltip");0<o.length&&(UM.admin.tooltip.all=o.tooltip({tooltipClass:"um_tooltip",content:function(){return jQuery(this).attr("title")}}))},close:function(){null!==UM.admin.tooltip.all&&0<UM.admin.tooltip.all&&"function"==typeof UM.admin.tooltip.all.tooltip&&UM.admin.tooltip.all.tooltip("close")}},colorPicker:{init:function(){var o=jQuery(".um-admin-colorpicker");o.length&&o.wpColorPicker()}}},jQuery(document).ready(function(){UM.admin.tooltip.init(),UM.admin.colorPicker.init()});
+"object"!=typeof window.UM&&(window.UM={}),"object"!=typeof window.UM.admin&&(window.UM.admin={}),UM.admin={tooltip:{all:null,init:function(){var t=jQuery(".um_tooltip");0<t.length&&(UM.admin.tooltip.all=t.tooltip({tooltipClass:"um_tooltip",content:function(){return jQuery(this).attr("title")}}))},close:function(){null!==UM.admin.tooltip.all&&0<UM.admin.tooltip.all&&"function"==typeof UM.admin.tooltip.all.tooltip&&UM.admin.tooltip.all.tooltip("close")}},colorPicker:{init:function(){var t=jQuery(".um-admin-colorpicker");t.length&&t.wpColorPicker()}},iconSelector:{init:function(){var t,n=jQuery(".um-icon-select-field");function e(t){var n=t.element;return void 0!==n?jQuery('<span><i class="'+jQuery(n).val()+'"></i> '+t.text+"</span>"):jQuery('<span><i class="'+t.id+'"></i> '+t.text+"</span>")}n.length&&(t={ajax:{url:wp.ajax.settings.url,dataType:"json",delay:250,data:function(t){return{search:t.term,action:"um_get_icons",page:t.page||1,nonce:um_admin_scripts.nonce}},processResults:function(t,n){n.page=n.page||1;var e=[];return t.data.icons&&jQuery.each(t.data.icons,function(t,n){e.push({id:t,text:n.label})}),{results:e,pagination:{more:50*n.page<t.data.total_count}}},cache:!0},minimumInputLength:0,allowClear:!0,width:"100%",allowHtml:!0,templateSelection:e,templateResult:e,dropdownCssClass:"um-select2-icon-dropdown",containerCssClass:"um-select2-icon-container"},n.parents(".um-admin-tri").length?t.dropdownParent=n.parents(".um-admin-tri"):n.parents("._heading_text").length&&(t.dropdownParent=n.parents("._heading_text")),n.select2(t))}}},jQuery(document).ready(function(){UM.admin.tooltip.init(),UM.admin.colorPicker.init(),UM.admin.iconSelector.init()});

assets/js/admin/modal.js

@@ -30,7 +30,12 @@ UM.admin.modal = {
 		UM.common.tipsy.hide();
 
 		jQuery('body').removeClass('um-admin-modal-open');
-		jQuery('.um-admin-modal div[id^="UM_"]').hide().appendTo('body');
+
+		let $modalBlock = jQuery('.um-admin-modal div[id^="UM_"]');
+		let $modalInner = $modalBlock.find( '.um-admin-modal-body.um-admin-metabox' );
+		$modalInner.html('').attr('data-select2-id', null);
+		$modalBlock.hide().appendTo('body');
+
 		jQuery('.um-admin-modal,.um-admin-overlay').remove();
 	},
 	resize: function () {