📄 rmp-icon.js

/**
 * This file contains the script to handle the icon wizard and its operations.
 *
 * @version 4.0.0
 */
jQuery(document).ready(function() {

	var RMP_Icon = {
		iconSelect: '#rmp-icon-dialog-select',
		iconContainer: '.rmp-menu-icons-dialog',
		clearSelector: '#rmp-icon-dialog-clear',
		closeSelector: '.rmp-menu-icons-dialog .rmp-dialog-header button.close',
		clear: function() {
			var self = this;
			jQuery(self.clearSelector).on('click', function() {
				jQuery(self.iconContainer).find('input').prop('checked', false);
			});
		},
		closeDialog: function() {
			var self = this;
			jQuery(self.closeSelector).on('click', function() {
				jQuery(self.iconContainer).hide();
			});
		},
		openDialog: function(iconChooser) {
			var self = this;
			jQuery(iconChooser).on('click', function(e) {
				e.stopPropagation();
				jQuery(self.iconContainer).show();
				jQuery(self.iconSelect).attr('data-click', jQuery(e.target).attr('id'));
			});
		},
		getIconElementWrap: function(icon_class) {
			if (icon_class.includes('material-icons')) {
				icon_class = icon_class.replace('material-icons', '');
				return '<span class="rmp-font-icon material-icons">' + icon_class + '</span>';
			}
			return '<span class="rmp-font-icon ' + icon_class + ' "></span>';
		},
		removeIcon: function(iconChooser) {
			jQuery(iconChooser).on('click', '.rmp-icon-picker-trash', function(e) {
				e.preventDefault();
				e.stopPropagation();
				jQuery(this).parent('.rmp-icon-picker').siblings('input.rmp-icon-hidden-input').val('');
				jQuery(this).siblings('.rmp-font-icon').remove();
				jQuery(this).parent('.rmp-icon-picker').removeAttr('data-icon');
				jQuery(this).remove();

				if (!jQuery('#rmp-editor-main').find('#rmp-menu-update-notification').length) {
					jQuery('#rmp-editor-main').prepend(
						'<div id="rmp-menu-update-notification" class="rmp-order-item rmp-order-item-description">' +
							'<span> <span class="rmp-font-icon dashicons dashicons-warning "></span> Update Required </span>' +
							'<a href="javascript:void(0)" id="rmp-menu-quick-update-button">UPDATE</a>' +
						'</div>'
					);
				}
			});
		},
		getIcon: function() {
			var self = this;
			jQuery(document).on('click', this.iconSelect, function() {
				let icon_class = jQuery(self.iconContainer).find('input:checked').val();
				let clicker = '#' + jQuery(self.iconSelect).attr('data-click');
				let icon_wrap = self.getIconElementWrap(icon_class);
				jQuery(clicker).find('.rmp-font-icon').remove();
				jQuery(clicker).prev('input.rmp-icon-hidden-input').val(icon_wrap);
				jQuery(clicker).append(icon_wrap);
				jQuery(clicker).attr('data-icon', true);

				jQuery(clicker).find('.rmp-icon-picker-trash').remove();
				jQuery(clicker).append('<i class="rmp-icon-picker-trash dashicons dashicons-trash" aria-hidden="true"></i>');

				jQuery(self.iconSelect).removeAttr('data-click');
				jQuery(self.closeSelector).click();
				jQuery(clicker).prev('input').first().focus();
			});
		},
		init: function(iconChooser) {
			this.openDialog(iconChooser);
			this.removeIcon(iconChooser);
			this.getIcon();
			this.clear();
			this.closeDialog();

			jQuery('#rmp-icon-search').on('keyup', _.debounce(this.searchIcon, 500));

			jQuery('#rmp-icon-search').on('keyup', function() {
				var query_string = this.value.toLocaleLowerCase();
				if (query_string.length) {
					if (!jQuery('#rmp-icon-search-typing-message').length) {
						jQuery(this).after('<span id="rmp-icon-search-typing-message"> Waiting for more keystrokes... </span>');
					} else {
						jQuery('#rmp-icon-search-typing-message').html('Waiting for more keystrokes...');
						jQuery('#rmp-icon-search-typing-message').show();
					}
				}
			});
		},
		searchIcon: function(e) {
			jQuery('#rmp-icon-search-typing-message').html('Please wait moment..');
			var query_string = this.value.toLocaleLowerCase();
			var activeTab = jQuery('.rmp-menu-icons-dialog').find('.nav-tab-active');
			if (!activeTab.length) {
				activeTab = jQuery('.rmp-menu-icons-dialog').find('.nav-tab').first();
			}
			let icon_container = activeTab.attr('href');
			var icon_selector = jQuery(icon_container + ' .font-icon');
			var is_exist = false;
			icon_selector.each(function() {
				var icon_label = jQuery(this).children('input').val().toLocaleLowerCase();
				if (icon_label.includes(query_string)) {
					jQuery(this).show();
					is_exist = true;
				} else {
					jQuery(this).hide();
				}
				if (is_exist) {
					jQuery('#rmp-icon-search-typing-message').html('Done, Check results..');
				} else {
					jQuery('#rmp-icon-search-typing-message').html('Sorry, Not found..');
				}
			});
		}
	};

	RMP_Icon.init('.rmp-icon-picker');
});