Advanced Custom Fields: Font Awesome Field - Version 1.1.0

Version Description

  • Added support for use in repeater fields
  • Added support for use in flexible content fields
  • Added live icon preview to field creation screen
  • Fixed various bugs with Select2 initialization on dynamically added fields
Download this release

Release Info

Developer mattkeys
Plugin Icon 128x128 Advanced Custom Fields: Font Awesome Field
Version 1.1.0
Comparing to
See all releases

Code changes from version 1.0.0 to 1.1.0

Files changed (7) hide show
  1. acf-font-awesome.php +1 -1
  2. css/input.css +6 -0
  3. font-awesome-v4.php +35 -36
  4. js/create_input.js +45 -0
  5. js/edit_input.js +100 -0
  6. js/input.js +0 -51
  7. readme.txt +14 -7
acf-font-awesome.php CHANGED
@@ -2,7 +2,7 @@
2
  /*
3
  Plugin Name: Advanced Custom Fields: Font Awesome
4
  Description: Add a Font Awesome field type to Advanced Custom Fields
5
- Version: 1.0.0
6
  Author: Matt Keys
7
  Author URI: http://mattkeys.me/
8
  License: GPLv2 or later
2
  /*
3
  Plugin Name: Advanced Custom Fields: Font Awesome
4
  Description: Add a Font Awesome field type to Advanced Custom Fields
5
+ Version: 1.1.0
6
  Author: Matt Keys
7
  Author URI: http://mattkeys.me/
8
  License: GPLv2 or later
css/input.css CHANGED
@@ -1,4 +1,10 @@
1
  .select2-drop,
2
  .select2-chosen {
3
  font-family: 'FontAwesome', 'Open Sans', sans-serif;
 
 
 
 
 
 
4
  }
1
  .select2-drop,
2
  .select2-chosen {
3
  font-family: 'FontAwesome', 'Open Sans', sans-serif;
4
+ }
5
+
6
+ .fa-select2-field.font-awesome {
7
+ width: 100%;
8
+ padding: 2px;
9
+ resize: none;
10
  }
font-awesome-v4.php CHANGED
@@ -17,7 +17,6 @@ class acf_field_font_awesome extends acf_field
17
 
18
  function __construct()
19
  {
20
- // vars
21
  $this->name = 'font-awesome';
22
  $this->label = __('Font Awesome Icon');
23
  $this->category = __("Content",'acf'); // Basic, Content, Choice, etc
@@ -399,10 +398,6 @@ class acf_field_font_awesome extends acf_field
399
  )
400
  );
401
 
402
- // do not delete!
403
- parent::__construct();
404
-
405
- // settings
406
  $this->settings = array(
407
  'path' => apply_filters('acf/helpers/get_path', __FILE__),
408
  'dir' => apply_filters('acf/helpers/get_dir', __FILE__),
@@ -410,8 +405,17 @@ class acf_field_font_awesome extends acf_field
410
  );
411
 
412
  add_filter('acf/load_field', array( $this, 'maybe_enqueue_font_awesome' ) );
 
 
413
  }
414
 
 
 
 
 
 
 
 
415
  function maybe_enqueue_font_awesome( $field )
416
  {
417
  if( 'font-awesome' == $field['type'] && $field['enqueue_fa'] ) {
@@ -450,17 +454,20 @@ class acf_field_font_awesome extends acf_field
450
  <label><?php _e("Default Icon", 'acf'); ?></label>
451
  </td>
452
  <td>
453
- <?php
454
-
455
- do_action('acf/create_field', array(
456
- 'type' => 'select',
457
- 'name' => 'fields[' . $key . '][default_value]',
458
- 'value' => $field['default_value'],
459
- 'class' => 'fontawesome',
460
- 'choices' => array_merge( array( 'null' => __("Select",'acf') ), $field['choices'] )
461
- ));
462
-
463
- ?>
 
 
 
464
  </td>
465
  </tr>
466
  <tr class="field_option field_option_<?php echo $this->name; ?>">
@@ -508,7 +515,7 @@ class acf_field_font_awesome extends acf_field
508
  <tr class="field_option field_option_<?php echo $this->name; ?>">
509
  <td class="label">
510
  <label><?php _e("Enqueue FontAwesome?",'acf'); ?></label>
511
- <p class="description"><?php _e("Set to 'No' if you have already enqueued FA manually. Set to 'Yes' to enqueue FA in the footer on any pages using this field.", 'acf'); ?></p>
512
  </td>
513
  <td>
514
  <?php
@@ -525,13 +532,6 @@ class acf_field_font_awesome extends acf_field
525
  ?>
526
  </td>
527
  </tr>
528
-
529
- <script type="text/javascript">
530
- jQuery(".fontawesome").select2({
531
- width : 'resolve'
532
- });
533
- </script>
534
-
535
  <?php
536
 
537
  }
@@ -572,6 +572,7 @@ class acf_field_font_awesome extends acf_field
572
  $field['value'] = array_map('trim', $field['value']);
573
 
574
  // html
 
575
  echo '<div class="fa-live-preview"></div>';
576
  echo '<select id="' . $field['id'] . '" class="' . $field['class'] . ' fa-select2-field" name="' . $field['name'] . '" >';
577
 
@@ -592,6 +593,7 @@ class acf_field_font_awesome extends acf_field
592
  }
593
 
594
  echo '</select>';
 
595
  }
596
 
597
  function find_selected( $needle, $haystack, $type, $choices )
@@ -631,15 +633,15 @@ class acf_field_font_awesome extends acf_field
631
  {
632
  // register acf scripts
633
  wp_register_script('acf-input-font-awesome-select2', $this->settings['dir'] . 'js/select2/select2.min.js', array('acf-input'), $this->settings['version']);
634
- wp_register_script('acf-input-font-awesome', $this->settings['dir'] . 'js/input.js', array('acf-input'), $this->settings['version']);
635
  wp_register_style('acf-input-font-awesome-input', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version']);
636
  wp_register_style('acf-input-font-awesome-fa', $this->settings['dir'] . 'css/fontawesome.css', array('acf-input'), $this->settings['version']);
637
- wp_register_style('acf-input-font-awesome-select2', $this->settings['dir'] . 'css/select2.css', array('acf-input'), $this->settings['version']);
638
 
639
 
640
  // scripts
641
  wp_enqueue_script(array(
642
- 'acf-input-font-awesome',
643
  'acf-input-font-awesome-select2'
644
  ));
645
 
@@ -647,7 +649,7 @@ class acf_field_font_awesome extends acf_field
647
  wp_enqueue_style(array(
648
  'acf-input-font-awesome-input',
649
  'acf-input-font-awesome-fa',
650
- 'acf-input-font-awesome-select2'
651
  ));
652
  }
653
 
@@ -667,22 +669,23 @@ class acf_field_font_awesome extends acf_field
667
  {
668
  // register acf scripts
669
  wp_register_script('acf-input-font-awesome-select2', $this->settings['dir'] . 'js/select2/select2.min.js', array('acf-input'), $this->settings['version']);
670
- wp_register_script('acf-input-font-awesome-select2', $this->settings['dir'] . 'js/select2/select2.min.js', array('acf-input'), $this->settings['version']);
671
  wp_register_style('acf-input-font-awesome-input', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version']);
672
  wp_register_style('acf-input-font-awesome-fa', $this->settings['dir'] . 'css/fontawesome.css', array('acf-input'), $this->settings['version']);
673
- wp_register_style('acf-input-font-awesome-select2', $this->settings['dir'] . 'css/select2.css', array('acf-input'), $this->settings['version']);
674
 
675
 
676
  // scripts
677
  wp_enqueue_script(array(
678
- 'acf-input-font-awesome-select2'
 
679
  ));
680
 
681
  // styles
682
  wp_enqueue_style(array(
683
  'acf-input-font-awesome-input',
684
  'acf-input-font-awesome-fa',
685
- 'acf-input-font-awesome-select2'
686
  ));
687
  }
688
 
@@ -749,8 +752,4 @@ class acf_field_font_awesome extends acf_field
749
 
750
  }
751
 
752
-
753
- // create field
754
  new acf_field_font_awesome();
755
-
756
- ?>
17
 
18
  function __construct()
19
  {
 
20
  $this->name = 'font-awesome';
21
  $this->label = __('Font Awesome Icon');
22
  $this->category = __("Content",'acf'); // Basic, Content, Choice, etc
398
  )
399
  );
400
 
 
 
 
 
401
  $this->settings = array(
402
  'path' => apply_filters('acf/helpers/get_path', __FILE__),
403
  'dir' => apply_filters('acf/helpers/get_dir', __FILE__),
405
  );
406
 
407
  add_filter('acf/load_field', array( $this, 'maybe_enqueue_font_awesome' ) );
408
+
409
+ parent::__construct();
410
  }
411
 
412
+ /*
413
+ * maybe_enqueue_font_awesome()
414
+ *
415
+ * If Enqueue FA is set to true, enqueue it in the footer. We cannot enqueue in the header because wp_head has already been called
416
+ *
417
+ */
418
+
419
  function maybe_enqueue_font_awesome( $field )
420
  {
421
  if( 'font-awesome' == $field['type'] && $field['enqueue_fa'] ) {
454
  <label><?php _e("Default Icon", 'acf'); ?></label>
455
  </td>
456
  <td>
457
+ <div class="fa-field-wrapper">
458
+ <div class="fa-live-preview"></div>
459
+ <?php
460
+
461
+ do_action('acf/create_field', array(
462
+ 'type' => 'select',
463
+ 'name' => 'fields[' . $key . '][default_value]',
464
+ 'value' => $field['default_value'],
465
+ 'class' => 'fontawesome',
466
+ 'choices' => array_merge( array( 'null' => __("Select",'acf') ), $field['choices'] )
467
+ ));
468
+
469
+ ?>
470
+ </div>
471
  </td>
472
  </tr>
473
  <tr class="field_option field_option_<?php echo $this->name; ?>">
515
  <tr class="field_option field_option_<?php echo $this->name; ?>">
516
  <td class="label">
517
  <label><?php _e("Enqueue FontAwesome?",'acf'); ?></label>
518
+ <p class="description"><?php _e("Set to 'Yes' to enqueue FA in the footer on any pages using this field.", 'acf'); ?></p>
519
  </td>
520
  <td>
521
  <?php
532
  ?>
533
  </td>
534
  </tr>
 
 
 
 
 
 
 
535
  <?php
536
 
537
  }
572
  $field['value'] = array_map('trim', $field['value']);
573
 
574
  // html
575
+ echo '<div class="fa-field-wrapper">';
576
  echo '<div class="fa-live-preview"></div>';
577
  echo '<select id="' . $field['id'] . '" class="' . $field['class'] . ' fa-select2-field" name="' . $field['name'] . '" >';
578
 
593
  }
594
 
595
  echo '</select>';
596
+ echo '</div>';
597
  }
598
 
599
  function find_selected( $needle, $haystack, $type, $choices )
633
  {
634
  // register acf scripts
635
  wp_register_script('acf-input-font-awesome-select2', $this->settings['dir'] . 'js/select2/select2.min.js', array('acf-input'), $this->settings['version']);
636
+ wp_register_script('acf-input-font-awesome-edit-input', $this->settings['dir'] . 'js/edit_input.js', array('acf-input'), $this->settings['version']);
637
  wp_register_style('acf-input-font-awesome-input', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version']);
638
  wp_register_style('acf-input-font-awesome-fa', $this->settings['dir'] . 'css/fontawesome.css', array('acf-input'), $this->settings['version']);
639
+ wp_register_style('acf-input-font-awesome-select2-css', $this->settings['dir'] . 'css/select2.css', array('acf-input'), $this->settings['version']);
640
 
641
 
642
  // scripts
643
  wp_enqueue_script(array(
644
+ 'acf-input-font-awesome-edit-input',
645
  'acf-input-font-awesome-select2'
646
  ));
647
 
649
  wp_enqueue_style(array(
650
  'acf-input-font-awesome-input',
651
  'acf-input-font-awesome-fa',
652
+ 'acf-input-font-awesome-select2-css'
653
  ));
654
  }
655
 
669
  {
670
  // register acf scripts
671
  wp_register_script('acf-input-font-awesome-select2', $this->settings['dir'] . 'js/select2/select2.min.js', array('acf-input'), $this->settings['version']);
672
+ wp_register_script('acf-input-font-awesome-create-input', $this->settings['dir'] . 'js/create_input.js', array('acf-input'), $this->settings['version']);
673
  wp_register_style('acf-input-font-awesome-input', $this->settings['dir'] . 'css/input.css', array('acf-input'), $this->settings['version']);
674
  wp_register_style('acf-input-font-awesome-fa', $this->settings['dir'] . 'css/fontawesome.css', array('acf-input'), $this->settings['version']);
675
+ wp_register_style('acf-input-font-awesome-select2-css', $this->settings['dir'] . 'css/select2.css', array('acf-input'), $this->settings['version']);
676
 
677
 
678
  // scripts
679
  wp_enqueue_script(array(
680
+ 'acf-input-font-awesome-select2',
681
+ 'acf-input-font-awesome-create-input'
682
  ));
683
 
684
  // styles
685
  wp_enqueue_style(array(
686
  'acf-input-font-awesome-input',
687
  'acf-input-font-awesome-fa',
688
+ 'acf-input-font-awesome-select2-css'
689
  ));
690
  }
691
 
752
 
753
  }
754
 
 
 
755
  new acf_field_font_awesome();
 
 
js/create_input.js ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ (function($){
2
+
3
+ $(document).on( 'change', '.field_type select', function() {
4
+
5
+ if( $(this).val() == 'font-awesome' ) {
6
+ var font_awesome_form = $(this).closest( '.field_form' );
7
+ var font_awesome_select = $( 'select.fontawesome', font_awesome_form );
8
+ setTimeout(function() {
9
+ $( 'select.fontawesome', font_awesome_form ).select2({
10
+ width : '100%'
11
+ });
12
+ update_preview( font_awesome_select, $( font_awesome_select ).val() );
13
+ }, 1000);
14
+ }
15
+
16
+ });
17
+
18
+ $(document).on( 'acf/field_form-open', function( e, field ) {
19
+
20
+ element = $( 'select.fontawesome', field );
21
+
22
+ $( element ).select2({
23
+ width : '100%'
24
+ });
25
+ update_preview( element, $(element).val() );
26
+ });
27
+
28
+ $(document).on( 'select2-selecting', 'select.fontawesome', function( object ) {
29
+ update_preview( this, object.val );
30
+ });
31
+
32
+ $(document).on( 'select2-highlight', 'select.fontawesome', function( object ) {
33
+ update_preview( this, object.val );
34
+ });
35
+
36
+ $(document).on( 'select2-close', 'select.fontawesome', function( object ) {
37
+ update_preview( this, $(this).val() );
38
+ });
39
+
40
+ function update_preview( element, selected ) {
41
+ var parent = $(element).parent();
42
+ $( '.fa-live-preview', parent ).html( '<i class="fa ' + selected + '"></i>' );
43
+ }
44
+
45
+ })(jQuery);
js/edit_input.js ADDED
@@ -0,0 +1,100 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ (function($){
2
+
3
+ /*
4
+ * acf/setup_fields
5
+ *
6
+ * This event is triggered when ACF adds any new elements to the DOM.
7
+ *
8
+ * @type function
9
+ * @since 1.0.0
10
+ * @date 01/01/12
11
+ *
12
+ * @param event e: an event object. This can be ignored
13
+ * @param Element postbox: An element which contains the new HTML
14
+ *
15
+ * @return N/A
16
+ */
17
+
18
+ fa_initialized = false;
19
+
20
+ $(document).on( 'acf/setup_fields', function( e, postbox ) {
21
+
22
+ if( $( '.fa-field-wrapper', postbox ).length > 0 ) {
23
+
24
+ if( fa_initialized ) {
25
+
26
+ var last_row = $( '.row-clone' ).prev( '.row' );
27
+
28
+ $( last_row ).each( function() {
29
+ $( 'select.fa-select2-field', this ).each( function() {
30
+ $(this).select2({
31
+ width : '100%'
32
+ });
33
+ update_preview( this, $(this).val() );
34
+ });
35
+ });
36
+
37
+ var last_layout = $( '.acf-flexible-content .values' ).last();
38
+
39
+ $( 'tbody > tr.field_type-font-awesome select.fa-select2-field', last_layout ).each( function() {
40
+ $(this).select2({
41
+ width : '100%'
42
+ });
43
+ update_preview( this, $(this).val() );
44
+ });
45
+
46
+ } else {
47
+
48
+ $( '.row' ).each( function() {
49
+ $( 'select.fa-select2-field', this ).each( function() {
50
+ $(this).select2({
51
+ width : '100%'
52
+ });
53
+ update_preview( this, $(this).val() );
54
+ });
55
+ });
56
+
57
+ $( '.acf-flexible-content .values tbody > tr.field_type-font-awesome select.fa-select2-field' ).each( function() {
58
+ $(this).select2({
59
+ width : '100%'
60
+ });
61
+ update_preview( this, $(this).val() );
62
+ });
63
+
64
+ $( 'div.field_type-font-awesome select.fa-select2-field' ).each( function() {
65
+ $(this).select2({
66
+ width : '100%'
67
+ });
68
+ update_preview( this, $(this).val() );
69
+ });
70
+
71
+ }
72
+
73
+ $( 'tr.row-clone select.fa-select2-field' ).each(function() {
74
+ $(this).select2( 'destroy' );
75
+ });
76
+
77
+ $( 'select.fa-select2-field' ).on( 'select2-selecting', function( object ) {
78
+ update_preview( this, object.val );
79
+ });
80
+
81
+ $( 'select.fa-select2-field' ).on( 'select2-highlight', function( object ) {
82
+ update_preview( this, object.val );
83
+ });
84
+
85
+ $( 'select.fa-select2-field' ).on( 'select2-close', function( object ) {
86
+ update_preview( this, $(this).val() );
87
+ });
88
+
89
+ fa_initialized = true;
90
+
91
+ }
92
+
93
+ });
94
+
95
+ function update_preview( element, selected ) {
96
+ var parent = $(element).parent();
97
+ $( '.fa-live-preview', parent ).html( '<i class="fa ' + selected + '"></i>' );
98
+ }
99
+
100
+ })(jQuery);
js/input.js DELETED
@@ -1,51 +0,0 @@
1
- (function($){
2
-
3
-
4
- /*
5
- * acf/setup_fields
6
- *
7
- * This event is triggered when ACF adds any new elements to the DOM.
8
- *
9
- * @type function
10
- * @since 1.0.0
11
- * @date 01/01/12
12
- *
13
- * @param event e: an event object. This can be ignored
14
- * @param Element postbox: An element which contains the new HTML
15
- *
16
- * @return N/A
17
- */
18
-
19
- $(document).live('acf/setup_fields', function(e, postbox){
20
-
21
- $(postbox).find('.font-awesome').each(function(){
22
-
23
- $(".fa-select2-field").select2({
24
- width : 'resolve'
25
- });
26
-
27
- $('.fa-select2-field').on( 'select2-selecting', function( object ) {
28
- update_preview( this, object.val );
29
- });
30
-
31
- $('.fa-select2-field').each(function(index, el) {
32
- update_preview( this, $(this).val() );
33
- });
34
-
35
- $('.fa-select2-field').on( 'select2-highlight', function( object ) {
36
- update_preview( this, object.val );
37
- });
38
-
39
- $('.fa-select2-field').on( 'select2-close', function( object ) {
40
- update_preview( this, $(this).val() );
41
- });
42
-
43
- function update_preview( element, selected ) {
44
- $(element).prevAll('.fa-live-preview').html( '<i class="fa ' + selected + '"></i>' );
45
- }
46
-
47
- });
48
-
49
- });
50
-
51
- })(jQuery);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
readme.txt CHANGED
@@ -1,4 +1,4 @@
1
- === Advanced Custom Fields: Font Awesome ===
2
  Contributors: mattkeys
3
  Tags: Advanced Custom Fields, ACF, Font Awesome, FontAwesome
4
  Requires at least: 3.5
@@ -14,7 +14,7 @@ Adds a new 'Font Awesome Icon' field to the popular Advanced Custom Fields plugi
14
  Add a [Font Awesome](http://fontawesome.io/) icon field type to Advanced Custom Fields.
15
 
16
  * Optionally set a default icon
17
- * Returns Icon Element, or Icon Class, or Object include class, element, and unicode value
18
  * Optionally enqueues Font Awesome in footer
19
 
20
  = Compatibility =
@@ -44,12 +44,19 @@ function my_register_fields()
44
  }
45
  `
46
 
47
- == Screenshots ==
48
-
49
- 1. Set a default icon, and choose how you want icon data to be returned.
50
- 2. Searchable list of all icons, including large live preview
51
-
52
  == Changelog ==
53
 
 
 
 
 
 
 
54
  = 1.0.0 =
55
  * Initial Release.
 
 
 
 
 
 
1
+ === Advanced Custom Fields: Font Awesome Field ===
2
  Contributors: mattkeys
3
  Tags: Advanced Custom Fields, ACF, Font Awesome, FontAwesome
4
  Requires at least: 3.5
14
  Add a [Font Awesome](http://fontawesome.io/) icon field type to Advanced Custom Fields.
15
 
16
  * Optionally set a default icon
17
+ * Returns Icon Element, or Icon Class, or an Object including the class, element, and unicode value
18
  * Optionally enqueues Font Awesome in footer
19
 
20
  = Compatibility =
44
  }
45
  `
46
 
 
 
 
 
 
47
  == Changelog ==
48
 
49
+ = 1.1.0 =
50
+ * Added support for use in repeater fields
51
+ * Added support for use in flexible content fields
52
+ * Added live icon preview to field creation screen
53
+ * Fixed various bugs with Select2 initialization on dynamically added fields
54
+
55
  = 1.0.0 =
56
  * Initial Release.
57
+
58
+ == Upgrade Notice ==
59
+
60
+ = 1.1.0 =
61
+ This version adds support for use in repeater fields and flexible content fields, and also fixes some small bugs.
62
+