Merge branch 'acf-5-6-compat'

Author: MaximeCulea

.gitignore

@@ -20,6 +20,7 @@ local.properties
 nbproject/
 node_modules/*
 premium/node_modules/*
+package-lock.json
 
 ############
 ## OSes

README.md

@@ -1,47 +1,51 @@
 # Advanced Custom Fields: SVG #
 
-## Description ##
+This enhance [Advanced Custom Field](https://www.advancedcustomfields.com/pro/) plugin by adding a custom field.
 
-This enhance ACF with a field icons. Add a field type selector to include your great font icon and returns class icon.
-One activated you'll be able to use a custom ACF field type which is an icon selector
+This ACF field is a select2 field in order to include your great fonts. It will allow you to select icons and then return the corresponding class icon.
 
-## Important to know ##
+## Compatibility
 
-In case you want to include this small plugin to your project running composer you can add this line to your composer.json :
+This ACF field type is compatible with:
+* ACF 5.0.0 and up, that means the pro version.
+* ACF 4 (not supported).
 
-```json
-  "repositories": [
-    {
-      "type": "vcs",
-      "url": "https://github.com/BeAPI/acf-svg-icon"
-    }
-  ]
-```
+## Installation
 
-then run the command :
+### via Composer
 
-```shell
-composer require bea/acf-svg-icon
-```
+1. Add a line to your repositories array: `{ "type": "git", "url": "https://github.com/strickdj/acf-field-address" }`
+2. Add a line to your require block: `"strickdj/acf-address": "dev-master"`
+3. Run: `composer update
+
+### Manual
+
+1. Copy the plugin folder into your plugins folder.
+2. Activate the plugin via the plugins admin page.
+3. Create a new field via ACF and select the SVG Icon selector.
 
-## Tips ##
+## How to ##
 
 ### Using this with your own svg file in your own theme ###
 
 ```php
 add_filter( 'acf_svg_icon_filepath', 'bea_svg_icon_filepath' );
 function bea_svg_icon_filepath( $filepath ) {
-	if ( is_file( get_stylesheet_directory() . '/assets/icons/icons.svg' ) ) {
-		$filepath = get_stylesheet_directory() . '/assets/icons/icons.svg';
-
-	}
-
-	return $filepath;
+    if ( is_file( get_stylesheet_directory() . '/assets/icons/icons.svg' ) ) {
+        $filepath = get_stylesheet_directory() . '/assets/icons/icons.svg';
+    }
+    return $filepath;
 }
 ```
 
 ## Changelog ##
 
-### 1.0.1
-* 11 May 2017
+### 1.2.0 - 27 July 2017
+* Add compatibility for ACF 5.6.0 and more versions
+* Still keep compatibility for ACF 5.6.0 and lower versions
+* Add some custom CSS for a more beautiful admin UI
+* Now displaying the icon name, not anymore like a slug
+* Improve readme
+
+### 1.0.1 - 11 May 2017
 * Initial

acf-svg-icon.php

@@ -1,11 +1,11 @@
 <?php
 /*
  Plugin Name: Advanced Custom Fields: SVG Icon
- Version: 1.0.1
+ Version: 1.2.0
  Plugin URI: http://www.beapi.fr
- Description: Add svg icon selector
+ Description: Add an ACF SVG icon selector.
  Author: BE API Technical team
- Author URI: http://www.beapi.fr
+ Author URI: https://www.beapi.fr
  Domain Path: languages
  Text Domain: acf-svg-icon
 
@@ -32,7 +32,7 @@
 	die();
 }
 
-define( 'ACF_SVG_ICON_VER', '1.0.1' );
+define( 'ACF_SVG_ICON_VER', '1.2.0' );
 define( 'ACF_SVG_ICON_URL', plugin_dir_url( __FILE__ ) );
 define( 'ACF_SVG_ICON_DIR', plugin_dir_path( __FILE__ ) );
 
@@ -59,21 +59,30 @@ function __construct() {
 	 * @since 1.0.0
 	 */
 	public static function load_translation() {
-		load_plugin_textdomain(
-			'acf-svg-icon',
-			false,
-			dirname( plugin_basename( __FILE__ ) ) . '/languages'
-		);
+		load_plugin_textdomain( 'acf-svg-icon', false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
 	}
 
 	/**
-	 * Register SVG icon field for ACF v5.
+	 * Register SVG icon field for ACF v5 or v5.6 depending on ACF version.
 	 *
 	 * @since 1.0.0
 	 */
 	public static function register_field_v5() {
-		include_once( ACF_SVG_ICON_DIR . 'fields/field-v5.php' );
-		new acf_field_svg_icon();
+		// Check ACF version to load the 5.6+ field or the 5+ field version
+		$acf     = new acf();
+		$version = version_compare( $acf->version, '5.6.O', '>=' ) ? 56 : 5;
+
+		// Include the corresponding files
+		include_once( sprintf( '%sfields/acf-base.php', ACF_SVG_ICON_DIR ) );
+		include_once( sprintf( '%sfields/acf-%s.php', ACF_SVG_ICON_DIR, $version ) );
+
+		/**
+		 * Instantiate the corresponding class
+		 * @see acf_field_svg_icon_56
+		 * @see acf_field_svg_icon_5
+		 */
+		$klass = sprintf( 'acf_field_svg_icon_%s', $version );
+		new $klass();
 	}
 }
 

assets/css/style.css

@@ -2,12 +2,18 @@
     width:40px;
     height:40px;
     margin-right: 10px;
+    vertical-align: middle;
 }
+
 .acf_svg__icon.small {
     width: 25px;
-    height: 25px;
+    height: 19px;
     margin-right: 10px;
     margin-top: 3px;
     float: left;
+    size: 2px;
+}
 
+.acf_svg__span {
+    font-size: 1.2em;
 }

assets/css/style.min.css

@@ -0,0 +1,57 @@
+(function ($) {
+    function initialize_field($field) {
+        var input = $field.find('.acf-input input');
+        var allowClear = $(input).attr('data-allow-clear') || 0;
+        var opts = {
+            dropdownCssClass: "bigdrop widefat",
+            dropdownAutoWidth: true,
+            formatResult: svg_icon_format,
+            formatSelection: svg_icon_format_small,
+            data: {results: svg_icon_format_data},
+            allowClear: 1 == allowClear
+        };
+
+        input.select2(opts);
+
+        /**
+         * Format the content in select 2 for the selected item
+         *
+         * @param css
+         * @returns {string}
+         */
+        function svg_icon_format(css) {
+            return '<svg class="acf_svg__icon icon ' + css.id + '" aria-hidden="true" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + css.id + '"></use> </svg>' + css.text;
+        }
+
+        /**
+         * Format the content in select 2 for the dropdown list
+         *
+         * @param css
+         * @returns {string}
+         */
+        function svg_icon_format_small(css) {
+            return '<svg class="acf_svg__icon small icon ' + css.id + '" aria-hidden="true" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + css.id + '"></use> </svg>' + css.text;
+        }
+
+    }
+
+    /*
+     *  ready append (ACF5)
+     *
+     *  These are 2 events which are fired during the page load
+     *  ready = on page load similar to jQuery(document).ready()
+     *  append = on new DOM elements appended via repeater field
+     *
+     *  @type	event
+     *  @date	20/07/13
+     *
+     *  @param	jQueryel (jQuery selection) the jQuery element which contains the ACF fields
+     *  @return	n/a
+     */
+    acf.add_action('ready append', function (jQueryel) {
+        // search jQueryel for fields of type 'FIELD_NAME'
+        acf.get_fields({type: 'svg_icon'}, jQueryel).each(function () {
+            initialize_field($(this));
+        });
+    });
+})(jQuery);

assets/js/input-5.js

@@ -0,0 +1,58 @@
+(function ($) {
+    function initialize_field($field) {
+        var input = $field.find('.acf-input input');
+        var allowClear = $(input).attr('data-allow-clear') || 0;
+        var opts = {
+            dropdownCssClass: "bigdrop widefat",
+            dropdownAutoWidth: true,
+            templateResult: bea_svg_format,
+            templateSelection: bea_svg_format_small,
+            data: svg_icon_format_data,
+            allowClear: 1 == allowClear,
+        };
+
+        input.select2(opts);
+
+        /**
+         * Format the content in select 2 for the selected item
+         *
+         * @param css
+         * @returns {string}
+         */
+        function bea_svg_format(css) {
+            if (!css.id) { return css.text; }
+            return $('<span class="acf_svg__span"><svg class="acf_svg__icon icon ' + css.id + '" aria-hidden="true" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + css.id + '"></use></svg>' + css.text + '</span>');
+        };
+
+        /**
+         * Format the content in select 2 for the dropdown list
+         *
+         * @param css
+         * @returns {string}
+         */
+        function bea_svg_format_small(css) {
+            if (!css.id) { return css.text; }
+            return $('<span class="acf_svg__span"><svg class="acf_svg__icon small icon ' + css.id + '" aria-hidden="true" role="img"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#' + css.id + '"></use></svg>' + css.text + '</span>');
+        };
+    }
+
+    /*
+     *  ready append (ACF5)
+     *
+     *  These are 2 events which are fired during the page load
+     *  ready = on page load similar to jQuery(document).ready()
+     *  append = on new DOM elements appended via repeater field
+     *
+     *  @type	event
+     *  @date	20/07/13
+     *
+     *  @param	jQueryel (jQuery selection) the jQuery element which contains the ACF fields
+     *  @return	n/a
+     */
+    acf.add_action('ready append', function (jQueryel) {
+        // search jQueryel for fields of type 'FIELD_NAME'
+        acf.get_fields({type: 'svg_icon'}, jQueryel).each(function () {
+            initialize_field($(this));
+        });
+    });
+})(jQuery);

assets/js/input.min.js renamed to assets/js/input-5.min.js

@@ -1,6 +1,6 @@
 {
   "name": "bea/acf-svg-icon",
-  "description": "Add ACF SVG selector",
+  "description": "Add ACF field for selecting SVG icons.",
   "minimum-stability": "stable",
   "license": "GPL-2.0",
   "authors": [

assets/js/input-56.js

@@ -0,0 +1,29 @@
+<?php class acf_field_svg_icon_5 extends acf_field_svg_icon {
+
+	function __construct() {
+		// do not delete!
+		parent::__construct();
+	}
+
+	/**
+	 * Enqueue assets for the SVG icon field in admin
+	 *
+	 * @since 1.0.0
+	 */
+	function input_admin_enqueue_scripts() {
+		// The suffix.
+		$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG === true ? '' : '.min';
+
+		// Scripts.
+		wp_register_script( 'acf-input-svg-icon', ACF_SVG_ICON_URL . 'assets/js/input-5' . $suffix . '.js', array(
+			'jquery',
+			'select2',
+			'acf-input'
+		), ACF_SVG_ICON_VER );
+
+		// Enqueuing.
+		wp_enqueue_script( 'acf-input-svg-icon' );
+
+		parent::input_admin_enqueue_scripts();
+	}
+}