WIP: Iconpicker

2019-09-26 13:28:57 +07:00
parent e008043173
commit 986fe8e02b
34 changed files with 249 additions and 300 deletions
@@ -60,14 +60,19 @@ class Opalestate_Taxonomy_Amenities {

 	public function taxonomy_metaboxes() {
 		$prefix = 'opalestate_amt_';
-		/**
-		 * Metabox to add fields to categories and tags
-		 */
+
 		$cmb_term = new_cmb2_box( [
 			'id'           => $prefix . 'edit',
-			'title'        => esc_html__( 'Type Metabox', 'opalestate-pro' ), // Doesn't output for term boxes
-			'object_types' => [ 'term' ], // Tells CMB2 to use term_meta vs post_meta
-			'taxonomies'   => [ 'opalestate_amenities' ], // Tells CMB2 which taxonomies should have these fields
+			'title'        => esc_html__( 'Type Metabox', 'opalestate-pro' ),
+			'object_types' => [ 'term' ],
+			'taxonomies'   => [ 'opalestate_amenities' ],
+		] );
+
+		$cmb_term->add_field( [
+			'name'         => esc_html__( 'Icon', 'opalestate-pro' ),
+			'desc'         => esc_html__( 'Select an icon.', 'opalestate-pro' ),
+			'id'           => $prefix . 'icon',
+			'type'         => 'opal_iconpicker',
 		] );

 		$cmb_term->add_field( [
@@ -1,2 +0,0 @@
-.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;line-break:auto;line-height:1.428571429;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;font-size:14px;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;box-shadow:0 5px 10px rgba(0,0,0,.2)}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{margin:0;padding:8px 14px;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{border-width:10px;content:""}.popover.top>.arrow{left:50%;margin-left:-11px;border-bottom-width:0;border-top-color:#999;border-top-color:rgba(0,0,0,.25);bottom:-11px}.popover.top>.arrow:after{content:" ";bottom:1px;margin-left:-10px;border-bottom-width:0;border-top-color:#fff}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-left-width:0;border-right-color:#999;border-right-color:rgba(0,0,0,.25)}.popover.right>.arrow:after{content:" ";left:1px;bottom:-10px;border-left-width:0;border-right-color:#fff}.popover.bottom>.arrow{left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25);top:-11px}.popover.bottom>.arrow:after{content:" ";top:1px;margin-left:-10px;border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{content:" ";right:1px;border-right-width:0;border-left-color:#fff;bottom:-10px}
-/*# sourceMappingURL=popover-dee30a8acd.css.map */
@@ -1,3 +0,0 @@
-.cmb2-wrap .iconpicker * {
-    box-sizing: content-box !important;
-}
@@ -1,7 +0,0 @@
-
-jQuery(document).ready(function($) {
-  'use strict';
-  $('.fontawesome-icon-select').iconpicker({
-    hideOnSelect: true
-  });
-}); // End Ready
@@ -1,73 +0,0 @@
-<?php
-/**
- * Class KS_FontAwesome_IconPicker
- */
-class KS_FontAwesome_IconPicker {
-
-    /**
-     * Current version number
-     */
-    const VERSION = '1.0.0';
-
-    /**
-     * Initialize the plugin by hooking into CMB2
-     */
-    public function __construct() {
-        add_action( 'cmb2_render_fontawesome_icon', array( $this, 'render' ), 10, 5 );
-        add_action( 'cmb2_sanitize_fontawesome_icon', array( $this, 'sanitize' ), 10, 2 );
-    }
-
-    /**
-     * Add a CMB custom field to allow for the selection FontAwesome Icon
-     */
-    public function render( $field, $escaped_value, $object_id, $object_type, $field_type ) {
-        $this->setup_admin_scripts();
-
-    	echo $field_type->input( array( 'type' => 'text', 'class' => 'fontawesome-icon-select regular-text' ) );
-    }
-
-    /**
-     * Sanitize icon class name
-     */
-   public function sanitize( $sanitized_val, $val ) {
-        if ( ! empty( $val ) ) {
-            return  sanitize_html_class( $val );
-        }
-        return $sanitized_val;
-    }
-
-    /**
-     * Enqueue admin scripts for our font-awesome picker field type
-     */
-    protected function setup_admin_scripts() {
-        $dir = trailingslashit( dirname( __FILE__ ) );
-
-        if ( 'WIN' === strtoupper( substr( PHP_OS, 0, 3 ) ) ) {
-            // Windows
-            $content_dir = str_replace( '/', DIRECTORY_SEPARATOR, WP_CONTENT_DIR );
-            $content_url = str_replace( $content_dir, WP_CONTENT_URL, $dir );
-            $url = str_replace( DIRECTORY_SEPARATOR, '/', $content_url );
-        }
-        else {
-            $url = str_replace(
-                array( WP_CONTENT_DIR, WP_PLUGIN_DIR ),
-                array( WP_CONTENT_URL, WP_PLUGIN_URL ),
-                $dir
-            );
-        }
-
-        $url = set_url_scheme( $url );
-
-        $requirements = array(
-            'jquery',
-        );
-
-    	wp_enqueue_script( 'cmb2-fontawesome-picker', $url . 'assets/js/fontawesome-iconpicker.min.js', array('jquery'), self::VERSION, true );
-        wp_enqueue_script( 'cmb2-fontawesome-picker-init', $url . 'assets/js/fontawesome-picker-init.js', array('cmb2-fontawesome-picker'), self::VERSION, true );
-    	 
-        wp_enqueue_style( 'bootstrap-popovers', $url . 'assets/css/bootstrap-popovers.css', array('cmb2-fontawesome-css'), self::VERSION );
-        wp_enqueue_style( 'cmb2-fontawesome-picker', $url . 'assets/css/fontawesome-iconpicker.min.css', array('bootstrap-popovers'), self::VERSION );
-        wp_enqueue_style( 'cmb2-fontawesome-picker-fixes', $url . 'assets/css/cmb2-fixes.css', array('cmb2-fontawesome-picker'), self::VERSION );
-    }
-}
-new KS_FontAwesome_IconPicker();
@@ -1,18 +0,0 @@
-@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss';
-@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_mixins.scss';
-
-// Contextual backgrounds
-// For now we'll leave these alongside the text classes until v4 when we can
-// safely shift things around (per SemVer rules).
-.bg-primary {
-  // Given the contrast here, this is the only class to have its color inverted
-  // automatically.
-  color: #fff;
-}
-@include bg-variant('.bg-primary', $brand-primary);
-@include bg-variant('.bg-success', $state-success-bg);
-@include bg-variant('.bg-info', $state-info-bg);
-@include bg-variant('.bg-warning', $state-warning-bg);
-@include bg-variant('.bg-danger', $state-danger-bg);
-
-@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_popovers.scss';
@@ -1,95 +0,0 @@
-<?php
-/**
- * Opalestate_Field_Iconpicker
- *
- * @package    opalestate
- * @author     Opal  Team <info@wpopal.com >
- */
-
-if ( ! defined( 'ABSPATH' ) ) {
-	exit; // Exit if accessed directly
-}
-
-class Opalestate_Field_Iconpicker {
-
-	/**
-	 * Current version number
-	 */
-	const VERSION = '1.0.0';
-
-	/**
-	 * Initialize the plugin by hooking into CMB2
-	 */
-	public static function init() {
-		add_filter( 'cmb2_render_opal_iconpicker', [ __CLASS__, 'render_iconpicker' ], 10, 5 );
-		add_filter( 'cmb2_sanitize_opal_iconpicker', [ __CLASS__, 'sanitize_map' ], 10, 4 );
-	}
-
-	/**
-	 * Render field
-	 */
-	public static function render_iconpicker( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ) {
-		self::setup_admin_scripts();
-
-		$users = $field->value;
-
-		echo '<div class="opalestate-add-user-field ' . apply_filters( 'opalestate_row_container_class', 'row opal-row' ) . '"> '; ?>
-        <div class="col-lg-12">
-            <h5 class=""><?php esc_html_e( 'As an author, you can add other users to your agency.', 'opalestate-pro' ); ?></h5>
-            <div>
-                <p><?php esc_html_e( 'Add someone to your agency, please enter extractly username in below input:', 'opalestate-pro' ); ?></p>
-
-                <div class="<?php echo apply_filters( 'opalestate_row_container_class', 'row opal-row' ); ?>">
-
-                    <div class="col-lg-8"><input class="regular-text opalestate-adduser-search" name="opalestate_adduser_search" id="opalestate_adduser_search" value="" type="text"></div>
-                    <div class="col-lg-4"><input name="search" class="button button-primary button-large pull-left" id="publish" value="<?php esc_html_e( 'add', 'opalestate-pro' ); ?>" type="button">
-                    </div>
-                </div>
-                <div class="clear clearfix"></div>
-            </div>
-            <div class="adduser-team">
-				<?php if ( $users ): $users = array_unique( $users ); ?>
-					<?php foreach ( $users as $user_id ): $user = get_user_by( 'id', $user_id );
-						$user = $user->data ?>
-                        <div class="user-team">
-                            <input type="hidden" name="<?php echo $field->args( '_name' ) ?>[]" value="<?php echo $user_id; ?>">
-                            <div>
-                                <img src="<?php echo get_avatar_url( $user_id ); ?>">
-                                <a href="<?php get_author_posts_url( $user_id ); ?>" target="_blank"> <?php echo $user->user_login; ?> </a></div>
-                            <div><span class="remove-user" data-alert="<?php esc_html_e( 'Are you sure to delete this', 'opalestate-pro' ); ?>"><?php esc_html_e( 'Remove',
-										'opalestate-pro' ); ?></span></div>
-                        </div>
-					<?php endforeach; ?>
-
-				<?php endif; ?>
-            </div>
-        </div>
-
-        <script type="text/html" id="tmpl-adduser-team-template">
-            <div class="user-team">
-                <input type="hidden" name="<?php echo $field->args( '_name' ) ?>[]" value="{{{data.ID}}}">
-                <div><img src="{{{data.avatar}}}"> <a href="{{{data.author_link}}}" target="_blank"> {{{data.user_login}}} </a></div>
-                <div><span class="remove-user" data-alert="<?php esc_html_e( 'Are you sure to delete this', 'opalestate-pro' ); ?>"><?php esc_html_e( 'Remove', 'opalestate-pro' ); ?></span></div>
-            </div>
-        </script>
-
-		<?php echo '</div>';
-	}
-
-	/**
-	 * Optionally save the latitude/longitude values into two custom fields
-	 */
-	public static function sanitize_map( $override_value, $value, $object_id, $field_args ) {
-		return $value;
-	}
-
-	/**
-	 * Enqueue scripts and styles
-	 */
-	public static function setup_admin_scripts() {
-		wp_enqueue_script( 'opalestate-adduser', plugins_url( 'assets/script.js', __FILE__ ), [], self::VERSION );
-		wp_enqueue_style( 'opalestate-adduser', plugins_url( 'assets/style.css', __FILE__ ), [], self::VERSION );
-	}
-}
-
-Opalestate_Field_Iconpicker::init();
@@ -1,49 +0,0 @@
-(function( $ ) {
-	'use strict';
-	$( document ).ready( function() {
- 
-
-		$( ".adduser-team" ).delegate( ".remove-user", "click", function() {
-			if( confirm( $(this).data('alert') ) ){
-				$(this).parents( '.user-team' ).remove();
-			}
-		});
-
-		$( '.opalestate-add-user-field' ).each( function() {
-			var $this = $(this);
-			$('.button', this).click( function () {
- 
-
-				var user_search = $( '.opalestate-adduser-search', $(this).parent().parent() ).val();
- 
-
-		        $('.opalestate-ajax').show();
-
-		        var data = {
-		            action: 'opalestate_ajax_search_username',
-		            user_name: user_search,
-		           
-		        };
-
- 
-
-		        $.ajax({
-		            type: "POST",
-		            data: data,
-		            dataType: "json",
-		            url: ajaxurl,
-		            success: function ( response ) {
-		           		if( response.status == true ){ 
-		           			var template = wp.template( 'adduser-team-template' );  
-							$('.adduser-team', $this  ).append( template(  response.user   ) );
-		           		}else {
-		           			alert( response.message );
-		           		}
-		            }
-		        });
-
-			} );
-		} );	
-	} );
-		
-})( jQuery );	
@@ -1,29 +0,0 @@
-.adduser-team{
-	width: 80%;
-}
-.user-team{
-	padding: 12px 10px;
-	display: block;
-	border-bottom: solid 1px #f3f3f3	
-}
-.user-team > div{ 
-	display: inline-block;
-	width: 33%;
-
-}
-
-.user-team > div img{
-	width: 30px;
-	height: 30px;
-	border: solid 3px #CCC;
-	border-radius: 50%;
-	float: left;
-	margin-right: 6px;
-}
-
-.remove-user {
-	cursor: pointer;
-}
-.remove-user:hover {
-	color: red;
-}
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
+<defs>
+<font id="iconpicker" horiz-adv-x="1000" >
+<font-face font-family="iconpicker" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="spin3" unicode="&#xe815;" d="m494 850c-266 0-483-210-494-472c-1-19 13-20 13-20l84 0c16 0 19 10 19 18c10 199 176 358 378 358c107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18c-10-199-176-358-377-358c-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148c265 0 482 210 493 473c1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xe812;" d="m643 386q0 103-74 176t-176 74t-177-74t-73-176t73-177t177-73t176 73t74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69q-80 0-153 31t-125 84t-84 125t-31 153t31 152t84 126t125 84t153 31t152-31t126-84t84-126t31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
+<glyph glyph-name="cancel" unicode="&#xe814;" d="m724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165l-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164l-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164l164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164l164-164q15-15 15-38z" horiz-adv-x="785.7" />
+<glyph glyph-name="block" unicode="&#xe84e;" d="m732 352q0 90-48 164l-421-420q76-50 166-50q62 0 118 25t96 65t65 97t24 119z m-557-167l421 421q-75 50-167 50q-83 0-153-40t-110-112t-41-152q0-91 50-167z m682 167q0-88-34-168t-91-137t-137-92t-166-34t-167 34t-137 92t-91 137t-34 168t34 167t91 137t137 91t167 34t166-34t137-91t91-137t34-167z" horiz-adv-x="857.1" />
+<glyph glyph-name="down-dir" unicode="&#xe800;" d="m571 457q0-14-10-25l-250-250q-11-11-25-11t-25 11l-250 250q-11 11-11 25t11 25t25 11h500q14 0 25-11t10-25z" horiz-adv-x="571.4" />
+<glyph glyph-name="up-dir" unicode="&#xe813;" d="m571 171q0-14-10-25t-25-10h-500q-15 0-25 10t-11 25t11 26l250 250q10 10 25 10t25-10l250-250q10-11 10-26z" horiz-adv-x="571.4" />
+<glyph glyph-name="left-dir" unicode="&#xe801;" d="m357 600v-500q0-14-10-25t-26-11t-25 11l-250 250q-10 11-10 25t10 25l250 250q11 11 25 11t26-11t10-25z" horiz-adv-x="357.1" />
+<glyph glyph-name="right-dir" unicode="&#xe802;" d="m321 350q0-14-10-25l-250-250q-11-11-25-11t-25 11t-11 25v500q0 15 11 25t25 11t25-11l250-250q10-10 10-25z" horiz-adv-x="357.1" />
+</font>
+</defs>
+</svg>
@@ -0,0 +1,9 @@
+( function ( $ ) {
+    'use strict';
+    $( document ).ready( function () {
+        $( '.opalestate-iconpicker' ).each( function () {
+            $( this ).fontIconPicker();
+        } );
+    } );
+
+} )( jQuery );
@@ -0,0 +1,2 @@
+/* Grey Theme file for fontIconPicker {@link https://github.com/micc83/fontIconPicker} */
+.fip-grey.icons-selector{font-size:16px}.fip-grey.icons-selector .selector{border:1px solid #EDEDED;background-color:#fff}.fip-grey.icons-selector .selector-button{background-color:#F4F4F4;border-left:1px solid #E1E1E1}.fip-grey.icons-selector .selector-button:hover{background-color:#f1f1f1}.fip-grey.icons-selector .selector-button:hover i{color:#999}.fip-grey.icons-selector .selector-button i{color:#aaa;text-shadow:0 1px 0 #FFF}.fip-grey.icons-selector .selected-icon i{color:#404040}.fip-grey.icons-selector .selector-popup{-moz-box-shadow:0 1px 1px rgba(0,0,0,.04);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.04);box-shadow:0 1px 1px rgba(0,0,0,.04);border:1px solid #E5E5E5}.fip-grey.icons-selector .selector-category select,.fip-grey.icons-selector .selector-search input[type=text]{border:1px solid #EDEDED;color:#404040;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;outline:0}.fip-grey.icons-selector input::-webkit-input-placeholder{color:#ddd}.fip-grey.icons-selector input:-moz-placeholder{color:#ddd}.fip-grey.icons-selector input::-moz-placeholder{color:#ddd}.fip-grey.icons-selector input:-ms-input-placeholder{color:#ddd!important}.fip-grey.icons-selector .selector-search i{color:#eee}.fip-grey.icons-selector .fip-icons-container{background-color:#fff;border:1px solid #EDEDED}.fip-grey.icons-selector .fip-icons-container .loading{color:#eee}.fip-grey.icons-selector .fip-box{border:1px solid #EFEFEF}.fip-grey.icons-selector .fip-box:hover{background-color:#f6f6f6}.fip-grey.icons-selector .selector-footer,.fip-grey.icons-selector .selector-footer i{color:#ddd}.fip-grey.icons-selector .selector-arrows i:hover{color:#777}.fip-grey.icons-selector span.current-icon,.fip-grey.icons-selector span.current-icon:hover{background-color:#2EA2CC;color:#fff;border:1px solid #298CBA}.fip-grey.icons-selector .icons-picker-error i:before{color:#eee}
@@ -0,0 +1,76 @@
+<?php
+/**
+ * Opalestate_Field_Iconpicker
+ *
+ * @package    opalestate
+ * @author     Opal  Team <info@wpopal.com >
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly
+}
+
+class Opalestate_Field_Iconpicker {
+
+	/**
+	 * Current version number
+	 */
+	const VERSION = '1.0.0';
+
+	/**
+	 * Initialize the plugin by hooking into CMB2
+	 */
+	public static function init() {
+		// $icons           = new Fontawesome();
+		// $this->icon_data = $icons->get_icons();
+
+		add_filter( 'cmb2_render_opal_iconpicker', [ __CLASS__, 'render_iconpicker' ], 10, 5 );
+		add_filter( 'cmb2_sanitize_opal_iconpicker', [ __CLASS__, 'sanitize_icon' ], 10, 4 );
+	}
+
+	/**
+	 * Render field.
+	 */
+	public static function render_iconpicker( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ) {
+		self::setup_admin_scripts();
+
+		$users = $field->value;
+
+		// $output = sprintf(
+		// 	'<select id="%1$s" class="%2$s" name="%3$s">',
+		// 	sanitize_key( $this->form->form_id . $args['id'] ),
+		// 	esc_attr( $args['class'] ),
+		// 	esc_attr( $args['id'] )
+		// );
+		//
+		// foreach ( $this->icon_data as $icon_item ) {
+		// 	$full_icon_class = $icon_item['prefix'] . ' ' . $icon_item['class'];
+		// 	$output          .= '<option value="' . $full_icon_class . '" ' . selected( $full_icon_class, $value, false ) . '>' . esc_html( $icon_item['class'] ) . '</option>';
+		// }
+		//
+		// $output .= '</select>';
+		//
+		// echo $output;
+	}
+
+	/**
+	 * Sanitize data.
+	 */
+	public static function sanitize_icon( $override_value, $value, $object_id, $field_args ) {
+		return $value;
+	}
+
+	/**
+	 * Enqueue scripts and styles.
+	 */
+	public static function setup_admin_scripts() {
+		// Iconpicker.
+		wp_register_style( 'fonticonpicker', plugins_url( 'assets/css/jquery.fonticonpicker.min.css', __FILE__ ), [], self::VERSION );
+		wp_register_style( 'fonticonpicker-grey-theme', plugins_url( 'assets/themes/grey-theme/jquery.fonticonpicker.grey.min.css', __FILE__ ), [], self::VERSION );
+
+		wp_enqueue_style( 'fonticonpicker' );
+		wp_enqueue_style( 'fonticonpicker-grey-theme' );
+	}
+}
+
+Opalestate_Field_Iconpicker::init();
@@ -0,0 +1,101 @@
+<?php
+// Exit if accessed directly
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Fontawesome
+ *
+ * A helper class for outputting common HTML elements, such as product drop downs
+ */
+class Opalestate_Iconpicker_Fontawesome {
+
+	const BRANDS_URL = OPALESTATE_PLUGIN_URL . 'assets/3rd/font-awesome/webfonts/fa-brands-400.svg';
+	const SOLID_URL = OPALESTATE_PLUGIN_URL . 'assets/3rd/font-awesome/webfonts/fa-solid-900.svg';
+	const REGULAR_URL = OPALESTATE_PLUGIN_URL . 'assets/3rd/font-awesome/webfonts/fa-regular-400.svg';
+
+	/**
+	 * @var array
+	 */
+	private $icons = [];
+
+	/**
+	 * Fontawesome constructor.
+	 */
+	public function __construct() {
+		$this->get_solid_icons();
+		$this->get_regular_icons();
+		$this->get_brands_icons();
+	}
+
+	/**
+	 * Gets all icons.
+	 *
+	 * @return array
+	 */
+	public function get_icons() {
+		return $this->icons;
+	}
+
+	/**
+	 * Gets data.
+	 *
+	 * @param $path
+	 * @return mixed
+	 */
+	public function get_data( $path ) {
+		$svg = wp_remote_get( $path );
+		$svg = wp_remote_retrieve_body( $svg );
+
+		preg_match_all( '/glyph-name="(.*?)"/', $svg, $data, PREG_SET_ORDER );
+
+		return $data;
+	}
+
+	/**
+	 * Gets solid icons.
+	 */
+	public function get_solid_icons() {
+		$data = $this->get_data( static::SOLID_URL );
+		if ( $data ) {
+			foreach ( $data as $match ) {
+				$item           = [];
+				$item['class']  = 'fa-' . $match[1];
+				$item['prefix'] = 'fas';
+				$this->icons[]  = $item;
+			}
+		}
+	}
+
+	/**
+	 * Gets regular icons.
+	 */
+	public function get_regular_icons() {
+		$data = $this->get_data( static::REGULAR_URL );
+		if ( $data ) {
+			foreach ( $data as $match ) {
+				$item           = [];
+				$item['class']  = 'fa-' . $match[1];
+				$item['prefix'] = 'far';
+				$this->icons[]  = $item;
+			}
+		}
+	}
+
+	/**
+	 * Gets brands icons.
+	 */
+	public function get_brands_icons() {
+		$data = $this->get_data( static::BRANDS_URL );
+
+		if ( $data ) {
+			foreach ( $data as $match ) {
+				$item           = [];
+				$item['class']  = 'fa-' . $match[1];
+				$item['prefix'] = 'fab';
+				$this->icons[]  = $item;
+			}
+		}
+	}
+}
@@ -26,14 +26,20 @@ if ( file_exists( WP_PLUGIN_DIR . '/cmb2/init.php' ) ) {
 }

 function opalestate_load_cmb2_files() {
-	if ( file_exists( OPALESTATE_CMB2_DIR . 'cmb2/custom-fields/map/map.php' ) ) {
-		require_once OPALESTATE_CMB2_DIR . 'cmb2/custom-fields/map/map.php';
-		require_once OPALESTATE_CMB2_DIR . 'cmb2/custom-fields/user/user.php';
+	if ( file_exists( OPALESTATE_CMB2_DIR . 'custom-fields/map/map.php' ) ) {
+		require_once OPALESTATE_CMB2_DIR . 'custom-fields/map/map.php';
+	}
+
+	if ( file_exists( OPALESTATE_CMB2_DIR . 'custom-fields/user/user.php' ) ) {
+		require_once OPALESTATE_CMB2_DIR . 'custom-fields/user/user.php';
+	}
+
+	if ( file_exists( OPALESTATE_CMB2_DIR . 'custom-fields/iconpicker/iconpicker.php' ) ) {
+		require_once OPALESTATE_CMB2_DIR . 'custom-fields/iconpicker/iconpicker.php';
 	}

 	require_once OPALESTATE_CMB2_DIR . 'cmb2-tabs/plugin.php';
 	require_once OPALESTATE_CMB2_DIR . 'CMB2-Switch-Button/cmb2-switch-button.php';
-	require_once OPALESTATE_CMB2_DIR . 'cmb2-fontawesome-icon-picker/cmb2-fontawesome-picker.php';
 	require_once OPALESTATE_CMB2_DIR . 'uploader/uploader.php';
 }

@@ -11,6 +11,7 @@ License URI: http://www.gnu.org/licenses/gpl-3.0.html
 Opal Real Estate Plugin is an ideal solution and brilliant choice for you to set up a professional estate website

 == Description ==
+[Live Demos](http://demo2.themelexus.com/housey/) | [Documentation](https://wpopal-2.gitbook.io/housey/) | [Free Theme](http://demo2.themelexus.com/latehome_free/) | [Extensions](https://wordpress.org/plugins/tags/opalestate_addon/)

 Whether you want to create a website for your real estate business and you are meeting difficulties to pick a suitable real estate plugin to install in your property site. Opal Estate Pro plugin will
 be your best choice to help you control your site in a perfect way.
@@ -25,6 +26,11 @@ The plugin will not make you disappointed with ease of use, friendly & flexible

 * Please keep contact us at help@wpopal.com to send us your website, we will publish it our showcase

+= Add-ons for Opal Estate Pro =
+* Please visit and download [all add-ons](https://wordpress.org/plugins/tags/opalestate_addon/ "Opal Estate Pro add-ons") for Opal Estate Pro, they are free 100%*
+ 1. *[ Opal Membership](https://wordpress.org/plugins/opal-membership/ "Opal Membership")*
+ 2. *[ Opal Estate Packages](https://wordpress.org/plugins/opal-estate-packages/ "Opal Estate Packages")*
+
 = More Information =

 * For help use [ticksy.com](https://wpopal.ticksy.com/) or create issues on [Github](https://github.com/wpopal/opal-estate-pro/)