Advanced Custom Fields: Font Awesome Field - Version 1.6

Version Description

  • Misc fixes to JS to properly target ACF fields in the DOM (based on changes to the ACF structure). This should resolve issues with duplicate, or missing select2 fields when picking font awesome icons.
Download this release

Release Info

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

Code changes from version 1.5 to 1.6

Files changed (4) hide show
  1. acf-font-awesome.php +1 -1
  2. js/create_input.js +8 -10
  3. js/edit_input.js +30 -59
  4. readme.txt +8 -14
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.5
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.6
6
  Author: Matt Keys
7
  Author URI: http://mattkeys.me/
8
  License: GPLv2 or later
js/create_input.js CHANGED
@@ -4,14 +4,14 @@
4
 
5
  $(document).on( 'change', '.field_type-select select, .field_type select', function() {
6
 
7
- if( $(this).val() == 'font-awesome' ) {
8
 
9
  // ACF 5
10
- var font_awesome_form = $(this).closest( '.field-settings' );
11
 
12
  // ACF 4
13
- if ( font_awesome_form.length == 0 ) {
14
- var font_awesome_form = $(this).closest( '.field_form' );
15
  version_num = 4;
16
  }
17
 
@@ -20,7 +20,7 @@
20
 
21
  update_preview( font_awesome_select, $( font_awesome_select ).val(), version_num );
22
 
23
- if ( $('.select2-container', font_awesome_form).length == 0 ) {
24
  font_awesome_select.select2({
25
  width : '100%'
26
  });
@@ -62,12 +62,10 @@
62
 
63
  function update_preview( element, selected, version ) {
64
  if ( version == 4 ) {
65
- var parent = $(element).parent();
66
- $( '.fa-live-preview', parent ).html( '<i class="fa ' + selected + '"></i>' );
67
  } else {
68
- var parent = $(element).closest('tr');
69
- var sibling = parent.siblings('tr[data-name="fa_live_preview"]');
70
- $( 'td.acf-input', sibling ).html( '<i class="fa ' + selected + '"></i>' );
71
  }
72
  }
73
 
4
 
5
  $(document).on( 'change', '.field_type-select select, .field_type select', function() {
6
 
7
+ if ( $(this).val() == 'font-awesome' ) {
8
 
9
  // ACF 5
10
+ var font_awesome_form = $(this).closest( '.acf-field-object-font-awesome' );
11
 
12
  // ACF 4
13
+ if ( font_awesome_form.length === 0 ) {
14
+ font_awesome_form = $(this).closest( '.field_form' );
15
  version_num = 4;
16
  }
17
 
20
 
21
  update_preview( font_awesome_select, $( font_awesome_select ).val(), version_num );
22
 
23
+ if ( $('.select2-container', font_awesome_form).length === 0 ) {
24
  font_awesome_select.select2({
25
  width : '100%'
26
  });
62
 
63
  function update_preview( element, selected, version ) {
64
  if ( version == 4 ) {
65
+ $( '.fa-live-preview', $(element).parent() ).html( '<i class="fa ' + selected + '"></i>' );
 
66
  } else {
67
+ var sibling = $(element).closest('tr').siblings('tr[data-name="fa_live_preview"]');
68
+ $( 'td.acf-input', sibling ).html( '<i class="fa ' + selected + '"></i>' );
 
69
  }
70
  }
71
 
js/edit_input.js CHANGED
@@ -1,13 +1,18 @@
1
  (function($){
2
 
3
-
 
4
  function initialize_field( $el ) {
5
-
6
- fa_initialized = false;
7
 
8
  if( fa_initialized ) {
9
 
10
- var last_row = $( '.row-clone' ).prev( '.row' );
 
 
 
 
 
 
11
 
12
  $( last_row ).each( function() {
13
  $( 'select.fa-select2-field', this ).each( function() {
@@ -18,9 +23,15 @@
18
  });
19
  });
20
 
 
21
  var last_layout = $( '.acf-flexible-content .values' ).last();
22
 
23
- $( 'tbody > tr.field_type-font-awesome select.fa-select2-field', last_layout ).each( function() {
 
 
 
 
 
24
  $(this).select2({
25
  width : '100%'
26
  });
@@ -29,15 +40,7 @@
29
 
30
  } else {
31
 
32
- $( '.row' ).each( function() {
33
- $( 'select.fa-select2-field', this ).each( function() {
34
- $(this).select2({
35
- width : '100%'
36
- });
37
- update_preview( this, $(this).val() );
38
- });
39
- });
40
-
41
  $( '.acf-flexible-content .values tbody > tr.field_type-font-awesome select.fa-select2-field' ).each( function() {
42
  $(this).select2({
43
  width : '100%'
@@ -45,6 +48,7 @@
45
  update_preview( this, $(this).val() );
46
  });
47
 
 
48
  $( '.field_type-font-awesome select.fa-select2-field' ).each( function() {
49
  $(this).select2({
50
  width : '100%'
@@ -60,11 +64,11 @@
60
  });
61
 
62
  // ACF 5 Repeater Clones
63
- $( 'tr.acf-row.clone select.fa-select2-field' ).each(function() {
64
  $(this).select2( 'destroy' );
65
  });
66
 
67
- // ACF 4 Repeater Clones
68
  $( 'tr.row-clone select.fa-select2-field' ).each(function() {
69
  $(this).select2( 'destroy' );
70
  });
@@ -89,63 +93,30 @@
89
  var parent = $(element).parent();
90
  $( '.fa-live-preview', parent ).html( '<i class="fa ' + selected + '"></i>' );
91
  }
92
-
93
  if( typeof acf.add_action !== 'undefined' ) {
94
-
95
- /*
96
- * ready append (ACF5)
97
- *
98
- * These are 2 events which are fired during the page load
99
- * ready = on page load similar to $(document).ready()
100
- * append = on new DOM elements appended via repeater field
101
- *
102
- * @type event
103
- * @date 20/07/13
104
- *
105
- * @param $el (jQuery selection) the jQuery element which contains the ACF fields
106
- * @return n/a
107
- */
108
-
109
  acf.add_action('ready append', function( $el ){
110
-
111
  // search $el for fields of type 'FIELD_NAME'
112
  acf.get_fields({ type : 'font-awesome'}, $el).each(function(){
113
-
114
  initialize_field( $(this) );
115
-
116
  });
117
-
118
  });
119
-
120
-
121
  } else {
122
-
123
-
124
- /*
125
- * acf/setup_fields (ACF4)
126
- *
127
- * This event is triggered when ACF adds any new elements to the DOM.
128
- *
129
- * @type function
130
- * @since 1.0.0
131
- * @date 01/01/12
132
- *
133
- * @param event e: an event object. This can be ignored
134
- * @param Element postbox: An element which contains the new HTML
135
- *
136
- * @return n/a
137
- */
138
-
139
  $(document).live('acf/setup_fields', function(e, postbox){
140
 
141
  $(postbox).find('.field[data-field_type="font-awesome"], .sub_field[data-field_type="font-awesome"]').each(function(){
142
  initialize_field( $(this) );
143
  });
144
-
145
  });
146
-
147
-
148
- }
149
 
 
150
 
151
  })(jQuery);
1
  (function($){
2
 
3
+ var fa_initialized = false;
4
+
5
  function initialize_field( $el ) {
 
 
6
 
7
  if( fa_initialized ) {
8
 
9
+ // ACF 5
10
+ var last_row = $( '.acf-clone' ).prev( '.acf-row' );
11
+
12
+ // ACF 4
13
+ if ( last_row.length === 0 ) {
14
+ last_row = $( '.row-clone' ).prev( '.row' );
15
+ }
16
 
17
  $( last_row ).each( function() {
18
  $( 'select.fa-select2-field', this ).each( function() {
23
  });
24
  });
25
 
26
+ // ACF 5
27
  var last_layout = $( '.acf-flexible-content .values' ).last();
28
 
29
+ // ACF 4
30
+ if ( last_layout.length === 0 ) {
31
+ last_layout = $( '.acf_flexible_content .values' ).last();
32
+ }
33
+
34
+ $( '.field_type-font-awesome select.fa-select2-field', last_layout ).each( function() {
35
  $(this).select2({
36
  width : '100%'
37
  });
40
 
41
  } else {
42
 
43
+ // Initialize flexible content Font Awesome fields
 
 
 
 
 
 
 
 
44
  $( '.acf-flexible-content .values tbody > tr.field_type-font-awesome select.fa-select2-field' ).each( function() {
45
  $(this).select2({
46
  width : '100%'
48
  update_preview( this, $(this).val() );
49
  });
50
 
51
+ // Initialize basic (not repeater, not flexible content) Font Awesome fields
52
  $( '.field_type-font-awesome select.fa-select2-field' ).each( function() {
53
  $(this).select2({
54
  width : '100%'
64
  });
65
 
66
  // ACF 5 Repeater Clones
67
+ $( 'tr.acf-row.acf-clone select.fa-select2-field' ).each(function() {
68
  $(this).select2( 'destroy' );
69
  });
70
 
71
+ // ACF 4 Repeater & Flex Clones
72
  $( 'tr.row-clone select.fa-select2-field' ).each(function() {
73
  $(this).select2( 'destroy' );
74
  });
93
  var parent = $(element).parent();
94
  $( '.fa-live-preview', parent ).html( '<i class="fa ' + selected + '"></i>' );
95
  }
96
+
97
  if( typeof acf.add_action !== 'undefined' ) {
98
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  acf.add_action('ready append', function( $el ){
100
+
101
  // search $el for fields of type 'FIELD_NAME'
102
  acf.get_fields({ type : 'font-awesome'}, $el).each(function(){
103
+
104
  initialize_field( $(this) );
105
+
106
  });
107
+
108
  });
109
+
 
110
  } else {
111
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  $(document).live('acf/setup_fields', function(e, postbox){
113
 
114
  $(postbox).find('.field[data-field_type="font-awesome"], .sub_field[data-field_type="font-awesome"]').each(function(){
115
  initialize_field( $(this) );
116
  });
117
+
118
  });
 
 
 
119
 
120
+ }
121
 
122
  })(jQuery);
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: mattkeys
3
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UTNU7YJG2KVPJ
4
  Tags: Advanced Custom Fields, ACF, Font Awesome, FontAwesome
5
  Requires at least: 3.5
6
- Tested up to: 4.1
7
  Stable tag: trunk
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -40,6 +40,9 @@ This ACF field type is compatible with:
40
 
41
  == Changelog ==
42
 
 
 
 
43
  = 1.5 =
44
  * New Feature: Integrated with the [Better Font Awesome Library](https://github.com/MickeyKay/better-font-awesome-library) to automatically use the latest version of the Font Awesome icons
45
 
@@ -70,6 +73,9 @@ This ACF field type is compatible with:
70
 
71
  == Upgrade Notice ==
72
 
 
 
 
73
  = 1.5 =
74
  This plugin now integrates with the [Better Font Awesome Library](https://github.com/MickeyKay/better-font-awesome-library) to automatically use the latest version of the Font Awesome icons
75
 
@@ -77,16 +83,4 @@ This plugin now integrates with the [Better Font Awesome Library](https://github
77
  * Updated included FontAwesome to version 4.2 (40 more icons)
78
 
79
  = 1.3 =
80
- Advanced Custom Fields version 5.x support
81
-
82
- = 1.2 =
83
- Font Awesome version 4.1 support
84
-
85
- = 1.1.2 =
86
- This version fixes an error causing font preview icons to not load properly when viewing font awesome fields on taxonomy term pages.
87
-
88
- = 1.1.1 =
89
- This version fixes a JS error caused by 1.1.0 that was causing issues with conditional field select boxes.
90
-
91
- = 1.1.0 =
92
- This version adds support for use in repeater fields and flexible content fields, and also fixes some small bugs.
3
  Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=UTNU7YJG2KVPJ
4
  Tags: Advanced Custom Fields, ACF, Font Awesome, FontAwesome
5
  Requires at least: 3.5
6
+ Tested up to: 4.0
7
  Stable tag: trunk
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
40
 
41
  == Changelog ==
42
 
43
+ = 1.6 =
44
+ * Misc fixes to JS to properly target ACF fields in the DOM (based on changes to the ACF structure). This should resolve issues with duplicate, or missing select2 fields when picking font awesome icons.
45
+
46
  = 1.5 =
47
  * New Feature: Integrated with the [Better Font Awesome Library](https://github.com/MickeyKay/better-font-awesome-library) to automatically use the latest version of the Font Awesome icons
48
 
73
 
74
  == Upgrade Notice ==
75
 
76
+ = 1.6 =
77
+ Misc fixes to JS to properly target ACF fields in the DOM (based on changes to the ACF structure). This should resolve issues with duplicate, or missing select2 fields when picking font awesome icons. Note: this has been tested only on the latest versions of 4.x and 5.x, if you are not on the latest versions I suggest that you ugprade to them before updating this plugin.
78
+
79
  = 1.5 =
80
  This plugin now integrates with the [Better Font Awesome Library](https://github.com/MickeyKay/better-font-awesome-library) to automatically use the latest version of the Font Awesome icons
81
 
83
  * Updated included FontAwesome to version 4.2 (40 more icons)
84
 
85
  = 1.3 =
86
+ Advanced Custom Fields version 5.x support