WIP: Iconpicker

inc/vendors/cmb2-plugins/custom-fields/iconpicker/assets/css/iconpicker.svg

@@ -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>

inc/vendors/cmb2-plugins/custom-fields/iconpicker/assets/js/script.js

@@ -0,0 +1,9 @@
+( function ( $ ) {
+    'use strict';
+    $( document ).ready( function () {
+        $( '.opalestate-iconpicker' ).each( function () {
+            $( this ).fontIconPicker();
+        } );
+    } );
+
+} )( jQuery );

inc/vendors/cmb2-plugins/custom-fields/iconpicker/assets/themes/grey-theme/jquery.fonticonpicker.grey.min.css

@@ -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}

inc/vendors/cmb2-plugins/custom-fields/iconpicker/iconpicker.php

@@ -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();

inc/vendors/cmb2-plugins/custom-fields/iconpicker/providers/fontawesome.php

@@ -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;
+			}
+		}
+	}
+}