braadmartin / components Goto Github PK
View Code? Open in Web Editor NEWA collection of custom WordPress theme and plugin components
A collection of custom WordPress theme and plugin components
Hi there, I've incorporated your color picker into a custom theme. It's awesome!
I'm running into an issue where the styles are not updated after changing the color. It's fine after I change another customizer setting and the overall styles are updated, but the trigger doesn't seem to be firing for the Alpha Color Picker.
Any ideas? Thanks!
When changing the opacity value using the opacity slider, I noticed that the opacity changes were not taking effect until the the mouse button was released after moving the slider control. This behavior differs from the native iris color slider, which when changed, updates the Current Color preview immediately.
I found that by changing the slidechange
event to slide
on line 198 of alpha-color-picker.js, that I was able to get the opacity slider to work just like the iris's native saturation slider. I did not notice any negative side effects of this change, but definitely will let you be the judge. :-)
I had a problem with sanitizing rgba.
I found a solution on:
https://make.wordpress.org/themes/2019/12/30/new-color-alpha-package-available/
However, the new controller has some new features that may make you prefer that one altogether.
no function for sanitize?
Hi there,
Is it possible to license this project under GPL 2 or later rather than GPL 3 or later? That way GPL 2 projects can incorporate it too.
Hi Thank you for the plugin. I'm trying to use it in one of my plugins. The plugin seems to work. But theres an issue when I click on text field.
When I click on the color button, I can see a Wp Color Picker with Alpha channel.
When I click on the text field standard color picker is shown without alpha channel.
Can you please let me know what can I do get the text field to show alpha enabled color picker.
Not an issue but just wanted to say thanks ;)
Since I am needing to include several instances of the Alpha Color Picker within the same Customizer section, I need the labels to show immediately. I found the template for the WP_Customizer_Color_Picker
provides a paradigm that can easily be used here to solve this problem: https://developer.wordpress.org/reference/classes/wp_customize_color_control/
I have created a Pull-Request that makes this adjustment.
p
I am using your code in my Customizer theme and it is working with the following 2 exceptions:
To fix this at the moment I have to CTRL + F5 to see it in the preview. However, it is not changing automatically. Any suggestions?
I'm currently building this alpha-color picker into my new WordPress theme and it works fabulously except I need some serious help on sanitizing it so it can't choose HEX when the opacity is at 100%. I want RGBA always. How can I do this?
Hello Braad,
First, allow me to thank you for a really nice repo and also your community involvement. I'm stoked about your work here. Maybe at some point I can help with it!
For now though, I am having a slight issue and I'm not sure where to begin my debugging efforts. Please see the gif below:
http://www.gfycat.com/SmartLinedBorzoi
What I'm seeing is that clicking "clear" does not trigger an update. The preview does not fade and the Save & Refresh button does not appear. However, actually choosing a new color does trigger an update. I want that behavior when I click "clear".
I am not getting any console errors.
Here's how I'm implementing your work:
https://gist.github.com/scofennell/0b088740bd07478dab12
And I'm passing the following args for add_control and add_setting:
array(3) {
["label"]=>
string(15) "Body Text Color"
["section"]=>
string(14) "globals-design"
["type"]=>
string(11) "alpha-color"
}
array(3) {
["sanitize_callback"]=>
string(19) "sanitize_text_field"
["sanitize_js_callback"]=>
string(19) "sanitize_text_field"
["autoload"]=>
bool(false)
}
I see a fair amount of discussion elsewhere in your repo on similar issues, but those tickets seem to pertain to live preview. I'm not talking about live preview at all, I'm just talking about the page not updating at all, and my issue is specific to the "clear" button.
I'm going to try a reduced test case with a simpler theme, but in the meantime I'd love to hear any advice you have.
WP version: 4.4
Plugins: none
Theme: Don't even ask, it's huge and crazy
Browser: Chrome & FF Mac, likely others
Multisite install
The label should appear above the hidden control, not inside. I manage to fix this inside the javascript file, but there should be a better fix or?
/**
* Initialization trigger.
*/
jQuery( document ).ready( function( $ ) {
// Loop over each control and transform it into our color picker.
$( '.alpha-color-control' ).each( function() {
// Move title & notification into visible position
var $parent = $(this).closest('li.customize-control-alpha-color');
$parent.find('div.customize-control-notifications-container').prependTo($parent);
$parent.find('span.customize-control-title').prependTo($parent);
// Scope the vars....
I saw an issue with the color picker which will affect user with WordPress 4.9, so are you accepting pull requests? @BraadMartin
Hi, I'm trying to implement this into a theme I'm building, but I can't seem to get it to work, even with the example code you provided in the readme. All I get are plain text boxes with the color code inside and nothing happens when I click them.
I verified that the php file is getting fetched and that the css and js files are being loaded correctly. I have no errors in the console.
Hello,
First - major thanks for this!
I have run into a little issue while testing this great new RBGa control. While customizin', the target on the live preview is one color selection behind what I've set in the customizer panel. This is happening with the test code here.
The Current Color box on the RBGA customizer control updates immediately when changing colors, but the element targeted in the JS preview is one color behind. This is hard to notice when dragging the color selection circle around, but the phenomenon can easily be seen when selecting between various color presets or by single clicking different colors in the color selection area.
I'm using the following code to enqueue the JS preview:
function xxx_customizer_preview_js() {
wp_enqueue_script( 'xxx-customizer-preview', get_stylesheet_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview', 'jquery' ), '0.1.0', true );
}
add_action( 'customize_preview_init', 'xxx_customizer_preview_js' );
Here is the contents of the customizer-preview.js file:
( function( $ ) {
wp.customize( 'components_alpha_color_test_setting', function( value ) {
value.bind( function( to ) {
$( '.target-element' ).css( 'background-color', to );
} );
} );
} )( jQuery );
This is working great in a theme I am building. However when i run the theme through ThemeCheck plugin I get the following error msg:
REQUIRED: Found a Customizer setting that did not have a sanitization callback function. Every call to the add_setting() method needs to have a sanitization callback function passed.
The only setting I added was the alpha picker.
// Alpha Color Picker setting. $wp_customize->add_setting('alpha_color_setting', array( 'default' => 'rgb(0, 0, 0,)', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'NEEDS TO GO HERE', ));
Any idea how I can add the sanitize callback?
I'm using on WP 2.7.2. The error is visible in the backend (Wordpress Admin).
I don't know if error was before or after of to update WP to new version.
Basically the error on Color Object it not found:
alpha-color-picker.js?ver=4.7.2:11 Uncaught ReferenceError: Color is not defined
at alpha-color-picker.js?ver=4.7.2:11
at alpha-color-picker.js?ver=4.7.2:260
(anonymous) @ alpha-color-picker.js?ver=4.7.2:11
(anonymous) @ alpha-color-picker.js?ver=4.7.2:260
Images to show the error:
Jose Carlos Ramos Carmenates
Hello
Can you provide some help on how to enable this files?
I've tried to put in wp-content/plugins but they don't show up.
I've then tried dropping the files in wp-admin without results also.
I'm new to wordpress, can you provide a more detailed how to about this?
thank you in advance.
Hi,
thank you for the alpha-color-picker. It works fine. But for some reason I can't include the transparency-grid.png. The horizontal slider is missing. There is just the opacity number. I have all the files in the same folder and everything else is working fine.
Do you know what could be the reason?
The color picker works fine, but I get the following error:
ReferenceError: wpColorPickerL10n is not defined
The solution is to enqueue iris and wp-color-picker, then define wpColorPickerL10n as follows:
wp_enqueue_script( 'wp-color-picker', admin_url( 'js/color-picker.js' ), array('jquery-ui-widget','iris'), false, 1); $colorpicker_l10n = array( 'clear' => __( 'Clear' ), 'defaultString' => __( 'Default' ), 'pick' => __( 'Select Color' ), 'current' => __( 'Current Color' ), ); wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); wp_enqueue_script( 'alpha-color-picker', plugins_url( 'alpha-color-picker/alpha-color-picker.js', __FILE__ ), array( 'jquery', 'iris'), null, true );
And thanks for the great work on this color picker.
I followed the instructions for the alpha color picker customizer control. I downloaded a ZIP of this repo, I put the customizer/alpha-color-picker folder into the root of my theme file, and I added in the code in my functions.php file, but when I go to the Customize page on the WordPress admin screen, I don't see the color picker in the way that GIF showed it. I only see a text input.
To be absolutely fair, this does work if I change the rgba value and press "Publish", but it doesn't look like a color picker like that GIF implied it would. If you're curious to see the code I put in functions.php, here it is:
function oforib_colorCustomizer($wp_customize) {
require_once(dirname(__FILE__) . '/alpha-color-picker/alpha-color-picker.php');
$wp_customize->add_setting('oforib_transparentOverlay', array(
'default' => 'rgba(245, 83, 115, 0.9)',
'transport' => 'refresh'
));
$wp_customize->add_control(new Customize_Alpha_Color_Control($wp_customize, 'Transparent Overlay Color Control', array(
'label' => __('Transparent Overlay', 'Ofori Beauty'),
'section' => 'oforib_siteColors',
'settings' => 'oforib_transparentOverlay'
)));
}
add_action('customize_register', 'oforib_colorCustomizer');
function oforib_customizerColorsCSS() { ?>
<style type="text/css">
@media (max-width: 1000px) {
header#siteHeader nav#headerMenu {
background-color: <?php echo get_theme_mod('oforib_transparentOverlay'); ?>;
}
}
</style>
<?php }
add_action('wp_head', 'oforib_customizerColorsCSS');
Did I do something wrong, or is there something wrong with this customizer?
I'm just test driving your customizer color control components. All works fine, but I noticed that the
multi-color-picker does not close like the alpha-color-picker even after opening another control. Is that by design?
Tested on 4.2 and 4.3RC2. I can customize colors on my theme but I can't get the page "live refresh" when I change the color value (just like with the standard color picker).
Am I doing something wrong ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.