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

This commit is contained in:
Mykyta Synelnikov
2024-04-17 17:55:21 +03:00
parent 9a4bf10df5
commit 595945c96e
21 changed files with 382 additions and 80 deletions
+1 -1
View File
@@ -624,7 +624,7 @@ if ( ! class_exists( 'um\admin\Admin' ) ) {
'sanitize' => 'text',
),
'_icon' => array(
'sanitize' => 'key',
'sanitize' => 'text',
),
'_css_class' => array(
'sanitize' => 'text',
+2 -1
View File
@@ -392,7 +392,8 @@ final class Enqueue extends \um\common\Enqueue {
wp_localize_script( 'um_admin_forms', 'um_forms_data', $forms_data );
wp_enqueue_script( 'um_admin_forms' );
wp_register_style( 'um_admin_forms', $css_url . 'admin/forms' . $suffix . '.css', array( 'wp-color-picker', 'um_ui', 'select2' ), UM_VERSION );
$deps = array_merge( array( 'wp-color-picker', 'um_ui', 'select2' ), self::$fonticons_handlers );
wp_register_style( 'um_admin_forms', $css_url . 'admin/forms' . $suffix . '.css', $deps, UM_VERSION );
// RTL styles.
if ( is_rtl() ) {
wp_style_add_data( 'um_admin_forms', 'rtl', true );
+67 -27
View File
@@ -541,42 +541,82 @@ if ( ! class_exists( 'um\admin\core\Admin_Forms' ) ) {
if ( empty( $field_data['id'] ) ) {
return false;
}
$html = '';
// Required modal scripts for proper functioning
UM()->admin()->enqueue()->load_modal();
$first_activation_date = get_option( 'um_first_activation_date', false );
// @todo new version
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 || UM()->options()->get( 'enable_new_fonticons' ) ) {
UM()->setup()->set_icons_options();
$id = ( ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] : '' ) . '_' . $field_data['id'];
$id_attr = ' id="' . esc_attr( $id ) . '" ';
$um_icons_list = get_option( 'um_icons_list' );
$name = $field_data['id'];
$name = ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] . '[' . $name . ']' : $name;
$name_attr = ' name="' . esc_attr( $name ) . '" ';
if ( 'row' === $this->set_field_type ) {
?>
$value = $this->get_field_value( $field_data );
$value_attr = ' value="' . esc_attr( $value ) . '" ';
<p class="_heading_text">
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>" >
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
$html = '<span class="um_admin_fonticon_wrapper"><a href="javascript:void(0);" class="button" data-modal="UM_fonticons" data-modal-size="normal" data-dynamic-content="um_admin_fonticon_selector" data-arg1="" data-arg2="" data-back="" data-icon_field="' . esc_attr( $id ) . '">' . esc_html__( 'Choose Icon', 'ultimate-member' ) . '</a>
<span class="um-admin-icon-value">';
<?php } else { ?>
if ( ! empty( $value ) ) {
$html .= '<i class="' . esc_attr( $value ) . '"></i>';
<div class="um-admin-tri">
<p>
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>">
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
</div>
<?php
}
} else {
$html .= esc_html__( 'No Icon', 'ultimate-member' );
// Required modal scripts for proper functioning
UM()->admin()->enqueue()->load_modal();
$id = ( ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] : '' ) . '_' . $field_data['id'];
$id_attr = ' id="' . esc_attr( $id ) . '" ';
$name = $field_data['id'];
$name = ! empty( $this->form_data['prefix_id'] ) ? $this->form_data['prefix_id'] . '[' . $name . ']' : $name;
$name_attr = ' name="' . esc_attr( $name ) . '" ';
$value = $this->get_field_value( $field_data );
$value_attr = ' value="' . esc_attr( $value ) . '" ';
$html = '<span class="um_admin_fonticon_wrapper"><a href="javascript:void(0);" class="button" data-modal="UM_fonticons" data-modal-size="normal" data-dynamic-content="um_admin_fonticon_selector" data-arg1="" data-arg2="" data-back="" data-icon_field="' . esc_attr( $id ) . '">' . esc_html__( 'Choose Icon', 'ultimate-member' ) . '</a>
<span class="um-admin-icon-value">';
if ( ! empty( $value ) ) {
$html .= '<i class="' . esc_attr( $value ) . '"></i>';
} else {
$html .= esc_html__( 'No Icon', 'ultimate-member' );
}
$html .= '</span><input type="hidden" ' . $name_attr . ' ' . $id_attr . ' ' . $value_attr . ' />';
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>';
}
$html .= '</span></span>';
// Required include the fonticons modal *.php file.
UM()->metabox()->init_icon = true;
}
$html .= '</span><input type="hidden" ' . $name_attr . ' ' . $id_attr . ' ' . $value_attr . ' />';
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>';
}
$html .= '</span></span>';
// Required include the fonticons modal *.php file.
UM()->metabox()->init_icon = true;
return $html;
}
+61 -21
View File
@@ -1320,6 +1320,7 @@ if ( ! class_exists( 'um\admin\core\Admin_Metabox' ) ) {
}
}
// Old interface for icon selector in UM admin forms field-type 'icon'.
if ( $this->init_icon ) {
include_once UM_PATH . 'includes/admin/templates/modal/forms/fonticons.php';
}
@@ -1554,12 +1555,50 @@ if ( ! class_exists( 'um\admin\core\Admin_Metabox' ) ) {
break;
case '_icon':
if ( 'row' === $this->set_field_type ) {
$back = 'UM_edit_row';
?>
<p class="_heading_text">
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<span class="um_admin_fonticon_wrapper">
$first_activation_date = get_option( 'um_first_activation_date', false );
// @todo new version
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 || UM()->options()->get( 'enable_new_fonticons' ) ) {
UM()->setup()->set_icons_options();
$um_icons_list = get_option( 'um_icons_list' );
if ( 'row' === $this->set_field_type ) {
?>
<p class="_heading_text">
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>" >
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
<?php } else { ?>
<div class="um-admin-tri">
<p>
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<select name="_icon" id="_icon" class="um-icon-select-field" data-placeholder="<?php esc_attr_e( 'Select Icon', 'ultimate-member' ); ?>">
<option value=""><?php esc_html_e( 'Select Icon', 'ultimate-member' ); ?></option>
<?php if ( ! empty( $this->edit_mode_value ) && array_key_exists( $this->edit_mode_value, $um_icons_list ) ) { ?>
<option value="<?php echo esc_attr( $this->edit_mode_value ); ?>" selected><?php echo esc_html( $um_icons_list[ $this->edit_mode_value ]['label'] ); ?></option>
<?php } ?>
</select>
</p>
</div>
<?php
}
} else {
if ( 'row' === $this->set_field_type ) {
$back = 'UM_edit_row';
?>
<p class="_heading_text">
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<span class="um_admin_fonticon_wrapper">
<a href="javascript:void(0);" class="button" data-modal="UM_fonticons" data-modal-size="normal" data-dynamic-content="um_admin_fonticon_selector" data-arg1="" data-arg2="" data-back="<?php echo esc_attr( $back ); ?>"><?php esc_html_e( 'Choose Icon', 'ultimate-member' ); ?></a>
<span class="um-admin-icon-value"><?php if ( ! empty( $this->edit_mode_value ) ) { ?><i class="<?php echo esc_attr( $this->edit_mode_value ); ?>"></i><?php } else { ?><?php esc_html_e( 'No Icon', 'ultimate-member' ); ?><?php } ?></span>
@@ -1572,19 +1611,19 @@ if ( ! class_exists( 'um\admin\core\Admin_Metabox' ) ) {
<span class="um-admin-icon-clear"><i class="um-icon-android-cancel"></i></span>
<?php } ?>
</span>
</p>
<?php
} else {
if ( $this->in_edit ) {
$back = 'UM_edit_field';
</p>
<?php
} else {
$back = 'UM_add_field';
}
?>
<div class="um-admin-tri">
<p>
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<span class="um_admin_fonticon_wrapper">
if ( $this->in_edit ) {
$back = 'UM_edit_field';
} else {
$back = 'UM_add_field';
}
?>
<div class="um-admin-tri">
<p>
<label for="_icon"><?php esc_html_e( 'Icon', 'ultimate-member' ); ?> <?php UM()->tooltip( __( 'Select an icon to appear in the field. Leave blank if you do not want an icon to show in the field.', 'ultimate-member' ) ); ?></label>
<span class="um_admin_fonticon_wrapper">
<a href="javascript:void(0);" class="button" data-modal="UM_fonticons" data-modal-size="normal" data-dynamic-content="um_admin_fonticon_selector" data-arg1="" data-arg2="" data-back="<?php echo esc_attr( $back ); ?>"><?php esc_html_e( 'Choose Icon', 'ultimate-member' ); ?></a>
<span class="um-admin-icon-value"><?php if ( ! empty( $this->edit_mode_value ) ) { ?><i class="<?php echo esc_attr( $this->edit_mode_value ); ?>"></i><?php } else { ?><?php esc_html_e( 'No Icon', 'ultimate-member' ) ?><?php } ?></span>
@@ -1597,9 +1636,10 @@ if ( ! class_exists( 'um\admin\core\Admin_Metabox' ) ) {
<span class="um-admin-icon-clear"><i class="um-icon-android-cancel"></i></span>
<?php } ?>
</span>
</p>
</div>
<?php
</p>
</div>
<?php
}
}
break;
@@ -1,23 +1,33 @@
<?php if ( ! defined( 'ABSPATH' ) ) {
<?php
// @todo deprecate this way to select the icon as soon as possible.
if ( ! defined( 'ABSPATH' ) ) {
exit;
} ?>
}
<div id="UM_fonticons" style="display:none">
$first_activation_date = get_option( 'um_first_activation_date', false );
// @todo new version
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 || UM()->options()->get( 'enable_new_fonticons' ) ) {
} else {
?>
<div id="UM_fonticons" style="display:none">
<div class="um-admin-modal-head">
<h3>
<?php
// translators: %s: icons nubber.
echo wp_kses( sprintf( __( 'Choose from %s available icons', 'ultimate-member' ), count( UM()->fonticons()->all ) ), UM()->get_allowed_html( 'admin_notice' ) );
?>
</h3>
</div>
<div class="um-admin-modal-body"></div>
<div class="um-admin-modal-foot">
<a href="javascript:void(0);" class="button-primary um-admin-modal-back" data-code=""><?php _e( 'Finish', 'ultimate-member' ) ?></a>
<a href="javascript:void(0);" class="button um-admin-modal-back um-admin-modal-cancel" data-action="UM_remove_modal"><?php _e( 'Cancel', 'ultimate-member' ) ?></a>
</div>
<div class="um-admin-modal-head">
<h3>
<?php
// translators: %s: icons nubber.
echo wp_kses( sprintf( __( 'Choose from %s available icons', 'ultimate-member' ), count( UM()->fonticons()->all ) ), UM()->get_allowed_html( 'admin_notice' ) );
?>
</h3>
</div>
<div class="um-admin-modal-body"></div>
<div class="um-admin-modal-foot">
<a href="javascript:void(0);" class="button-primary um-admin-modal-back" data-code=""><?php _e( 'Finish', 'ultimate-member' ) ?></a>
<a href="javascript:void(0);" class="button um-admin-modal-back um-admin-modal-cancel" data-action="UM_remove_modal"><?php _e( 'Cancel', 'ultimate-member' ) ?></a>
</div>
</div>
<?php
}
+61
View File
@@ -0,0 +1,61 @@
<?php
namespace um\ajax;
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Class Forms
*
* @package um\ajax
*/
class Forms {
/**
* Forms constructor.
*/
public function __construct() {
add_action( 'wp_ajax_um_get_icons', array( $this, 'get_icons' ) );
}
/**
* Get the list of the icons.
*/
public function get_icons() {
UM()->admin()->check_ajax_nonce();
$search_request = ! empty( $_REQUEST['search'] ) ? sanitize_text_field( $_REQUEST['search'] ) : '';
$page = ! empty( $_REQUEST['page'] ) ? absint( $_REQUEST['page'] ) : 1;
$per_page = 50;
UM()->setup()->set_icons_options();
$um_icons_list = get_option( 'um_icons_list' );
if ( ! empty( $search_request ) ) {
$um_icons_list = array_filter(
$um_icons_list,
function( $item ) use ( $search_request ) {
$result = array_filter(
$item['search'],
function( $search_item ) use ( $search_request ) {
return stripos( $search_item, $search_request ) !== false;
}
);
return count( $result ) > 0;
}
);
}
$total_count = count( $um_icons_list );
$um_icons_list = array_slice( $um_icons_list, $per_page * ( $page - 1 ), $per_page );
wp_send_json_success(
array(
'icons' => $um_icons_list,
'total_count' => $total_count,
)
);
}
}
+13
View File
@@ -20,10 +20,23 @@ if ( ! class_exists( 'um\ajax\Init' ) ) {
* @used-by \UM::includes()
*/
public function includes() {
$this->forms();
$this->pages();
$this->secure();
}
/**
* @since 2.8.6
*
* @return Forms
*/
public function forms() {
if ( empty( UM()->classes['um\ajax\forms'] ) ) {
UM()->classes['um\ajax\forms'] = new Forms();
}
return UM()->classes['um\ajax\forms'];
}
/**
* @since 2.8.3
*
+8 -1
View File
@@ -38,6 +38,13 @@ class Enqueue {
public static $fonticons_handlers = array();
/**
* FontAwesome version.
*
* @var string
*/
public static $fa_version = '6.5.2';
/**
* Enqueue constructor.
*
@@ -267,7 +274,7 @@ class Enqueue {
// @todo new version
if ( empty( $first_activation_date ) || $first_activation_date >= 1713342395 || UM()->options()->get( 'enable_new_fonticons' ) ) {
// First install set this option to true by default and use new FontAwesome icons
wp_register_style( 'um_fontawesome', $css_url . 'um-fontawesome' . $suffix . '.css', array(), '6.5.2' ); // New FontAwesome
wp_register_style( 'um_fontawesome', $css_url . 'um-fontawesome' . $suffix . '.css', array(), self::$fa_version ); // New FontAwesome
$fonticons_handlers[] = 'um_fontawesome';
}
self::$fonticons_handlers = $fonticons_handlers;
+44
View File
@@ -352,5 +352,49 @@ KEY meta_value_indx (um_value(191))
update_user_meta( $user_id, 'account_status', 'approved' );
}
}
/**
*
*/
public function set_icons_options() {
$fa_version = get_option( 'um_fa_version' );
$um_icons_list = get_option( 'um_icons_list' );
if ( empty( $um_icons_list ) || UM()->admin()->enqueue()::$fa_version !== $fa_version ) {
update_option( 'um_fa_version', UM()->admin()->enqueue()::$fa_version, false );
$common_icons = array();
$icons = file_get_contents( UM_PATH . 'assets/libs/fontawesome/metadata/icons.json' );
$icons = json_decode( $icons );
foreach ( $icons as $key => $data ) {
if ( ! isset( $data->styles ) ) {
continue;
}
foreach ( $data->styles as $style ) {
$style_class = '';
if ( 'solid' === $style ) {
$style_class = 'fas fa-';
} elseif ( 'regular' === $style ) {
$style_class = 'far fa-';
} elseif ( 'brands' === $style ) {
$style_class = 'fab fa-';
}
$label = count( $data->styles ) > 1 ? $data->label . ' (' . $style . ')' : $data->label;
$search = array_unique( array_merge( $data->search->terms, array( $key, strtolower( $data->label ) ) ) );
$common_icons[ $style_class . $key ] = array(
'label' => $label,
'search' => $search,
);
}
}
update_option( 'um_icons_list', $common_icons, false );
}
}
}
}