name = 'extended-color-picker'; $this->label = __("RGBA Color Picker",'acf-extended-color-picker'); $this->category = 'jquery'; $this->defaults = array( 'default_value' => '', ); $this->settings = array( 'version' => '1.0.0', 'url' => plugin_dir_url( __DIR__ ), 'palettes' => apply_filters( "acf/rgba_color_picker/palette", true ) ); // do not delete! parent::__construct(); } /* * input_admin_enqueue_scripts * * description * * @type function * @date 16/12/2015 * @since 5.3.2 * * @param $post_id (int) * @return $post_id (int) */ function input_admin_enqueue_scripts() { // globals global $wp_scripts, $wp_styles; // register if not already (on front end) // http://wordpress.stackexchange.com/questions/82718/how-do-i-implement-the-wordpress-iris-picker-into-my-plugin-on-the-front-end if( !isset($wp_scripts->registered['iris']) ) { // styles wp_register_style('wp-color-picker', admin_url('css/color-picker.css'), array(), '', true); // scripts wp_register_script('iris', admin_url('js/iris.min.js'), array('jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch'), '1.0.7', true); wp_register_script('wp-color-picker', admin_url('js/color-picker.min.js'), array('iris'), '', true); // localize wp_localize_script('wp-color-picker', 'wpColorPickerL10n', array( 'clear' => __('Clear', 'acf' ), 'defaultString' => __('Default', 'acf' ), 'pick' => __('Select Color', 'acf' ), 'current' => __('Current Color', 'acf' ) )); } $url = $this->settings['url']; $version = $this->settings['version']; // Add the Alpha Color Picker JS wp_enqueue_script( 'wp-color-picker-alpha', "{$url}/assets/js/wp-color-picker-alpha.min.js", array( 'wp-color-picker' ), '1.2.2', true ); // register Extended Color Picker CSS wp_register_style( 'acf-rgba-color-picker-style', "{$url}assets/css/acf-rgba-color-picker.css", false, $version); // register Extended Color Picker JS wp_register_script( 'acf-rgba-color-picker-script', "{$url}/assets/js/acf-rgba-color-picker.js", array('wp-color-picker-alpha'), $version, true ); // set 'palette' wp_localize_script('acf-rgba-color-picker-script', 'rgbaColorPicker', array( 'palette' => $this->settings['palettes'] )); // enqueue styles & scripts wp_enqueue_style('wp-color-picker'); wp_enqueue_style('acf-rgba-color-picker-style'); wp_enqueue_script('wp-color-picker'); wp_enqueue_script('acf-rgba-color-picker-script'); } /* * render_field() * * Create the HTML interface for your field * * @param $field - an array holding all the field's data * * @type action * @since 3.6 * @date 23/01/13 */ function render_field( $field ) { // vars $text = acf_get_sub_array( $field, array('id', 'class', 'name', 'value') ); $hidden = acf_get_sub_array( $field, array('name', 'class', 'value') ); if ( $field['hide_palette'] == 1 ) { $palettes = 'no-palette'; } else { $palettes = $field['color_palette']; } $text['class'] = 'valuetarget'; $hidden['class'] = 'hiddentarget'; // render ?>
data-alpha ="true" />
__('Default Value','acf'), 'instructions' => '', 'type' => 'text', 'name' => 'default_value', 'placeholder' => '#FFFFFF' )); if ( is_string($this->settings['palettes']) || $this->settings['palettes'] == true ) { // color palette acf_render_field_setting( $field, array( 'label' => __('Color Palette','acf-extended-color-picker'), 'instructions' => __('Enter color codes separated by semicolons. You can use HEX or RGBA color codes and can also mix them (e.g. #2ecc71; rgba(50,40,30,0.5).','acf-extended-color-picker'), 'type' => 'text', 'name' => 'color_palette' )); // hide palette acf_render_field_setting( $field, array( 'label' => __('Hide Color Palette','acf-extended-color-picker'), 'instructions' => __('Don\'t show a color palette in the color picker','acf-extended-color-picker'), 'type' => 'true_false', 'name' => 'hide_palette', 'ui' => 1, )); } } } // initialize acf_register_field_type( new acf_field_extended_color_picker() ); endif; // class_exists check ?>