From effa634c2207f4114af9b41d15b6cfc2c3aa35e1 Mon Sep 17 00:00:00 2001 From: alexist-ong Date: Wed, 27 Mar 2019 09:52:09 +0800 Subject: [PATCH 1/5] Extend existing color picker to support alpha --- includes/class-options-framework-admin.php | 10 ++++++- includes/class-options-sanitization.php | 35 ++++++++++++++++++++-- js/wp-color-picker-alpha.min.js | 11 +++++++ 3 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 js/wp-color-picker-alpha.min.js diff --git a/includes/class-options-framework-admin.php b/includes/class-options-framework-admin.php index a9ada83..1e316d6 100644 --- a/includes/class-options-framework-admin.php +++ b/includes/class-options-framework-admin.php @@ -200,12 +200,20 @@ function enqueue_admin_scripts( $hook ) { if ( $this->options_screen != $hook ) { return; } + + // Enqueue alpha color picker + wp_enqueue_script( + 'wp-color-picker-alpha', + plugin_dir_url( dirname(__FILE__) ) . 'js/wp-color-picker-alpha.min.js', + array( 'wp-color-picker' ), + Options_Framework::VERSION + ); // Enqueue custom option panel JS wp_enqueue_script( 'options-custom', plugin_dir_url( dirname(__FILE__) ) . 'js/options-custom.js', - array( 'jquery','wp-color-picker' ), + array( 'jquery','wp-color-picker-alpha' ), Options_Framework::VERSION ); diff --git a/includes/class-options-sanitization.php b/includes/class-options-sanitization.php index 49d7266..95c0895 100644 --- a/includes/class-options-sanitization.php +++ b/includes/class-options-sanitization.php @@ -187,7 +187,7 @@ function of_sanitize_background( $input ) { 'attachment' => 'scroll' ) ); - $output['color'] = apply_filters( 'of_sanitize_hex', $input['color'] ); + $output['color'] = apply_filters( 'of_sanitize_color', $input['color'] ); $output['image'] = apply_filters( 'of_sanitize_upload', $input['image'] ); $output['repeat'] = apply_filters( 'of_background_repeat', $input['repeat'] ); $output['position'] = apply_filters( 'of_background_position', $input['position'] ); @@ -366,7 +366,26 @@ function of_sanitize_hex( $hex, $default = '' ) { } return $default; } -add_filter( 'of_sanitize_color', 'of_sanitize_hex' ); +add_filter( 'of_sanitize_hex', 'of_sanitize_hex' ); + +/** + * Sanitize a color + * + * @param string Color in hexadecimal, rgba, or rgba notation. "#" may or may not be prepended to the hexadecimal + * @param string The value that this function should return if it cannot be recognized as a color. + * @return string + */ + +function of_sanitize_color( $color, $default = '' ) { + if ( of_validate_hex( $color ) ) { + return $color; + } + elseif ( of_validate_rgba_hsla( $color ) ) { + return $color; + } + return $default; +} +add_filter( 'of_sanitize_color', 'of_sanitize_color' ); /** * Get recognized font sizes. @@ -450,3 +469,15 @@ function of_validate_hex( $hex ) { return true; } } + +/** + * Is a given string a color formatted in rgb(a) or hsl(a) notation? + * + * @param string Color in rgb(a) or hsl(a) notation. + * @return bool + */ +function of_validate_rgba_hsla ( $color ) { + $color = trim( $color ); + + return preg_match( '/^(rgb|hsl)a?\((-?\d+%?(deg|rad|grad|turn)?[,\s]+){2,3}[\s\/]*[\d\.]+%?\)$/i', $color ); +} diff --git a/js/wp-color-picker-alpha.min.js b/js/wp-color-picker-alpha.min.js new file mode 100644 index 0000000..21fe8c4 --- /dev/null +++ b/js/wp-color-picker-alpha.min.js @@ -0,0 +1,11 @@ +/**! + * wp-color-picker-alpha + * + * Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker + * Only run in input and is defined data alpha in true + * + * Version: 2.1.3 + * https://github.com/kallookoo/wp-color-picker-alpha + * Licensed under the GPLv2 license. + */ +!function(t){if(!t.wp.wpColorPicker.prototype._hasAlpha){var o="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==",r='
',e='
',a='',i=void 0!==wpColorPickerL10n.current;if(i)var n='';else{n='';var l="",s=''}Color.fn.toString=function(){if(this._alpha<1)return this.toCSS("rgba",this._alpha).replace(/\s+/g,"");var t=parseInt(this._color,10).toString(16);return this.error?"":(t.length<6&&(t=("00000"+t).substr(-6)),"#"+t)},t.widget("wp.wpColorPicker",t.wp.wpColorPicker,{_hasAlpha:!0,_create:function(){if(t.support.iris){var p=this,c=p.element;if(t.extend(p.options,c.data()),"hue"===p.options.type)return p._createHueOnly();p.close=t.proxy(p.close,p),p.initialValue=c.val(),c.addClass("wp-color-picker"),i?(c.hide().wrap(e),p.wrap=c.parent(),p.toggler=t(n).insertBefore(c).css({backgroundColor:p.initialValue}).attr("title",wpColorPickerL10n.pick).attr("data-current",wpColorPickerL10n.current),p.pickerContainer=t(r).insertAfter(c),p.button=t(a).addClass("hidden")):(c.parent("label").length||(c.wrap(l),p.wrappingLabelText=t(s).insertBefore(c).text(wpColorPickerL10n.defaultLabel)),p.wrappingLabel=c.parent(),p.wrappingLabel.wrap(e),p.wrap=p.wrappingLabel.parent(),p.toggler=t(n).insertBefore(p.wrappingLabel).css({backgroundColor:p.initialValue}),p.toggler.find(".wp-color-result-text").text(wpColorPickerL10n.pick),p.pickerContainer=t(r).insertAfter(p.wrappingLabel),p.button=t(a)),p.options.defaultColor?(p.button.addClass("wp-picker-default").val(wpColorPickerL10n.defaultString),i||p.button.attr("aria-label",wpColorPickerL10n.defaultAriaLabel)):(p.button.addClass("wp-picker-clear").val(wpColorPickerL10n.clear),i||p.button.attr("aria-label",wpColorPickerL10n.clearAriaLabel)),i?c.wrap('').after(p.button):(p.wrappingLabel.wrap('