I have built a custom class that adds a custom font library to visual composer, and it works except that the icon selector always showing even if i change the library, as you can see in this image
, on the top there is the icon selector of flat icon library while i have selected the fontawesome library.
Note: Fontawesome's icon selector also showing in the same time
Here is the class:
<?php
if (!class_exists('Fama_VC_Fonts')) {
class Fama_VC_Fonts{
/**
* @var string
*/
public $font_library;
/**
* @var array
*/
public $fonts_list;
/**
* @var array
*/
public $fonts_lib_meta;
/**
* Class constructor
* @param array $library_data Font library data
* @return void
*/
public function __construct($library_data){
//check if visual composer is active
if(!fama_is_active_plugin('js_composer/js_composer.php')) return;
if (!is_array($library_data)) return;
if(empty($library_data['font_library']) || empty($library_data['fonts_list'])) return;
$this->font_library = $library_data['font_library'];
$this->fonts_list = $library_data['fonts_list'];
$this->fonts_lib_meta = $library_data['fonts_lib_meta'];
// In the 'Icon library' dropdown for an icon content type, add a new family of icons.
add_filter( 'vc_after_init', array($this, 'add_vc_icon_library'), 40 );
/**
* This adds a new parameter to the vc_icon content block.
*
* This parameter is an icon_picker element, that displays when flaticon is picked from the dropdown.
*/
add_filter( 'vc_after_init', array($this, 'define_vc_icon_picker'), 50 );
// Add all the icons we want to display in our font family.
add_filter( 'vc_iconpicker-type-'.$this->font_library , array($this, 'add_vc_icon_list') );
// Enqueue the CSS file so that the icons display in the backend editor.
add_action( 'vc_backend_editor_enqueue_js_css', array($this, 'enqueue_vc_icon_styles') );
// Enqueue the CSS file so that the icons display in the frontend editor.
add_action( 'vc_frontend_editor_enqueue_js_css', array($this, 'enqueue_vc_icon_styles') );
add_action( 'vc_enqueue_font_icon_element', array($this,'enqueue_vc_icon_styles_on_request'), 10 );
}
/**
* In the 'Icon library' dropdown for an icon content type, add a new family of icons.
*
* @return void
*/
public function add_vc_icon_library(){
$param = WPBMap::getParam( 'vc_icon', 'type' );
$param['value'][ __( 'Flat icon', 'js_composer' ) ] = $this->font_library;
vc_update_shortcode_param( 'vc_icon', $param );
}
/**
* This adds a new parameter to the vc_icon content block.
*
* This parameter is an icon_picker element, that displays when flaticon is picked from the dropdown.
*/
public function define_vc_icon_picker(){
$settings = array(
'type' => 'iconpicker',
'heading' => $this->fonts_lib_meta['heading'],
'param_name' => 'icon_'.$this->font_library,
'settings' => array(
'emptyIcon' => false,
'type' => $this->font_library,
'iconsPerPage' => 20,
),
'dependency' => array(
'element' => 'icon_type',
'value' => $this->font_library,
),
'weight' => '2',
'description' => $this->fonts_lib_meta['description'],
);
vc_add_param( 'vc_icon', $settings );
}
/**
* Add all the icons we want to display in our font family.
* @param array $icons
* @return array Icons array
*/
public function add_vc_icon_list($icons){
$icons = $this->fonts_list;
return $icons;
}
/**
* Enqueue font library style
* @return void
*/
public function enqueue_vc_icon_styles(){
wp_enqueue_style( $this->font_library , $this->fonts_lib_meta['fonts_css_uri'] );
}
/**
* Optional - Conditionally load CSS for your icon font as requested by modules on the live site, Only required if you aren't already loading the custom font globally
* @param string $font
* @return void
*/
public function enqueue_vc_icon_styles_on_request( $font ) {
if ( ! empty( $font ) && $this->font_library == $font ) {
wp_enqueue_style( $this->font_library , $this->fonts_lib_meta['fonts_css_uri'] );
}
}
}
}
$vc_font_lib = [
'font_library' => 'flaticon',
'fonts_list' =>
[
['flaticon-world' => 'World'],
['flaticon-gliding' => 'Gliding'],
['flaticon-tour-guide' => 'Tour guide'],
['flaticon-map-of-roads' => 'Map of roads'],
['flaticon-alarm-clock' =>'Alarm Clock'],
['flaticon-manager' =>'Manager'],
['flaticon-layers' =>'Layers'],
['flaticon-wallet' =>'Wallet'],
],
'fonts_lib_meta' => [
'heading' => __( 'Icon', 'js_composer' ),
'description' => __( 'Select flat icon ', 'js_composer' ),
'fonts_css_uri' => FMA_STYLESHEET_DIR . '/assets/css/flaticon.css',
],
];
$vc_fonts = new Fama_VC_Fonts ( $vc_font_lib);
I have figured out where the problem is. It is this line:
'element' => 'icon_type',
Which should be:
'element' => 'type',
Now only selected library is showing.