spamhater-grav / picka

Font Icon Picker plugin for jQuery

Picka

Font Icon Picker plugin for jQuery

A lightweight font icon picker simple and straightforward. Created specially for WordPress admin environments but can be used anywhere.

Demo http://demo.queryloop.com/picka/

The demo uses icons from FontAwesome http://fontawesome.io/icons/ and Genericons http://genericons.com/ but can be extended to support any icon set.

Usage

HTML

<!-- A wrapper for the icon picker launcher buttons, preview and field -->
<div class="icon-picker" data-pickerid="unique_id">
	<!-- A field to save the selected icon. -->
	<input type="hidden" value="" name="unique_id"/>
</div>

<div class="genericon-set icon-set">
	<ul>
		<!-- data code and class used when saving the icon -->
		<li data-code="f100" data-class="genericon genericon-standard" class="genericon genericon-standard"></li>
		<li data-code="f101" data-class="genericon genericon-aside" class="genericon genericon-aside"></li>
		<li data-code="f102" data-class="genericon genericon-image" class="genericon genericon-image"></li>
		
		<!-- ..the rest of the icon set using a similar markup... -->
	</ul>
</div>

<div class="fa-set icon-set">
	<ul>
		<li data-code="f042" data-class="fa fa-adjust" class="fa fa-adjust"></li>
		<li data-code="f170" data-class="fa fa-adn" class="fa fa-adn"></li>
		<li data-code="f037" data-class="fa fa-align-center" class="fa fa-align-center"></li>
		
		<!-- ..the rest of the icon set using a similar markup... -->
	</ul>
</div>

JavaScript

jQuery(document).ready(function($){

	$('.icon-picker').qlIconPicker({
		'mode'       : 'dialog',// show overlay 'dialog' panel or slide down 'inline' panel
		'closeOnPick': true,    // whether to close panel after picking or 'no'
		'save'       : 'class', // save icon 'class' or 'code' in the input field
		'size'       : '',      // class to be added to icon panel, 'large' is supported.
		'classes'    : {        // extra classes:
			'launcher' : '',             // for launcher buttons. In WP Admin, use 'button'.
			'clear'    : 'remove-times', // for button that removes preview and clears field. In WP Admin, use 'dashicons dashicons-no-alt'.
			'highlight': '',             // when highlighting an icon. In WP Admin, use 'wp-ui-highlight'.
			'close'    : ''              // for close button. In WP Admin, use 'wp-ui-highlight'.
		},
		'iconSets' : {               // used to specify which launchers will be created
			'genericon' : 'Genericon', // create a launcher to pick genericon icons
			'fa' : 'FontAwesome'       // create a launcher to pick fontawesome icons
		}
	});
	
});

You can also specify the icon sets to use and the launcher buttons to create as JSON object in a HTML data attribute:

<div class="icon-picker" data-pickerid="gi" data-iconsets='{"genericon":"Pick Genericon"}'>
	<input type="hidden" value="" name="unique_id"/>
</div>

this is useful for WordPress translation

$picker = '<div class="icon-picker" data-pickerid="' . esc_attr( $field['id'] ) . '" data-iconsets=\'' . esc_attr('{"genericon":"' . __( 'Pick Genericon', 'yourtextdomain' ) . '"}') . '\'>';

	$picker  .= '<input type="hidden" value="' . $value . '" name="' . esc_attr( $field['id'] ) . '" />';

$picker .= '</div>';

but you can also use wp_localize_script() and pass the labels in an object when calling the plugin in JavaScript.

For more initialization and usage examples see the demo link.

Events

'iconpickershow.queryloop': triggered when the icon list is shown. Receives the display mode as parameter.

'iconselected.queryloop': triggered when an icon is picked. Receives the icon class or code according to the selected saving mode as parameter

'iconpickerclose.queryloop': triggered when the icon list is closed. Receives the display mode as parameter.

To subscribe to the events, use

(function($){

	$body.on('iconselected.queryloop', function(e, icon){
		console.log('Icon selected: ' + icon);
	});
	$body.on('iconpickershow.queryloop', function(e, mode){
		console.log('Icon picker launched in mode ' + mode);
	});
	$body.on('iconpickerclose.queryloop', function(e, mode){
		console.log('Icon picker in mode ' + mode + ' was closed.');
	});
	
})(jQuery);