fujaru / jquery-wheelcolorpicker Goto Github PK

I would like to stack them horizontally on top of each other. Is there an easy way to do this?

In updateInput, if this.input.value already holds the value you were going to set it to, don't change it needlessly.

+       if ( this.input.value != this.getValue() ) {
          this.input.value = this.getValue();
+       }

In at least some browsers (tested in Mac Safari and Chrome), setting the value of an input field repositions the insertion point to the end of the value.

Needlessly resetting the value makes it very difficult to edit the color value with the keyboard; for example, pressing the left arrow key to move the insertion point triggers an update cycle and leaves the insertion point at the end of the string again.

If you only change the value when needed, as per the above patch, keyboard editing works well.

I want to use this awesome plugin in my app. I’m using Framework7 ver 2.02 to create a hybrid mobile app. Every thing looks great except short taping the wheel for picking colors does not work. However long tap and touch move seem to work with no problem. I uploaded my code here.

If you use google chrome's Device Mode you will see it does not respond to taps. I tested it on a real device and it did not work. Why is this happening? I don't know if there an issue with Framework7 or this plugin? It worked like a charm with Jquerymobile. Any help would be appreciated.

I was very thrilled when I found this plugin.
Now I'm stuck for two days to control the width and height of wheel through JS. I can't even do it with css. It works fine with inline styling but not with css or js. Is there anything I'm doing wrong?

this is html:
<input type="text" data-wheelcolorpicker data-wcp-autoResize="false" data-wcp-cssClass="colorpicker" data-wcp-layout="block" />

this is css:

.colorpicker {
width: 500px;
height: 500px;
}

It's super simple but does not work.

im trying to remove the colorpicker slider , can i do it ?

Something like https://color.adobe.com/create that allows you to have more than one selector?

Any idea when the next release (3.0.5) will be published to npm, including #19?

On Firefox on Android, when dragging sliders, the whole page gets panned as well.

A workaround for this issue is to tap on a spot on the slider to pick a color without dragging. However this is a bit difficult to do position the slider on the topmost / bottommost of the slide with big finger.

Hi,
can you please tell me how can I implement functionality like this =>https://material.io/color/#!/?view.left=0&view.right=1&primary.color=c4e0a4&primary.text.color=d5ffca

I want to set background color of box and and auto set text according to background color automatically.
Can you please tell me is there any function of parameter in this plugin.

Thanks

There is a small area between blue and green where the picker jumps to the red area.

It is somewhere in the middle on the left side. (red square in the picture below)

The problem exists on the project page demo wheel too.

I tried it on Chrome and Safari.

With the current default UI (color wheel + value slider), it is hard to choose pure white color (#ffffff).

Possible workarounds:

• Use RGB sliders

<input data-wheelcolorpicker data-wcp-sliders="rgbp" type="text">

• Display Saturation slider

<input data-wheelcolorpicker data-wcp-sliders="wsvp" type="text">

There are a few enhancements that comes to my mind which could make it easier for selecting white:

1. Introduce "Lightness" slider
2. Add cursor snap to center of the wheel, and probably make the core radius wider by a few pixels.
3. Add predefined color palette
4. Integrate "Saturation" and "Hue" triangle within color wheel, similar to color wheel implementation on GNOME color picker.

no. 2 seems the most feasible one as it requires minimal change to the UI.

I'm making an application that requires an ajax request to figure out how many colorpickers (multiple .wheel in #wheels) I need. For that reason I'm using this eventhandler for sliderdown:

$(document).on('sliderdown', '#wheels .wheel', function(e) { ... });

I just noticed that clicking the handle/cursor of a slider (the wheel is unaffected) doesn't execute the handler.

I 'fixed' it by using these beautiful lines of jquery:

$(document).on('mousedown', '#wheels .jQWCP-scursor', function(e) {
    $(e.target).parents(".jQWCP-wWidget").children(".wheel").first().trigger('sliderdown');
});

Hi,

I am trying to embed the plugin inline but am getting a strange layout. I have set layout to block, autoResize to true, and type to text. For some reason I can't get it took like the demo website.

I am using bootstrap 3 and designing templates in pug.

Testing on my iPad in Safari with iOS 11.3, dragging the indicator on the dial causes the whole page to scroll which makes it quite hard to select a colour.

I can only move the dot up/down when hitting the top and bottom of the page.

Left/right is fine as there is no overflow that way.

Tapping to move the dot works fine. May be worth looking at the Spectrum colour picker as it works extremely well on iOS.

Hi Fajar,

I did this but on document ,ready i get RGB values as (for testing) alert.

On change doesnt work now, am i missing something / doing something wrong?

Thanx!

html
head
title>Colorpicker</title
link type="text/css" rel="stylesheet" href="css/wheelcolorpicker.css" /
script type="text/javascript" src="jquery-1.7.1.min.js"></script
script type="text/javascript" src="jquery.wheelcolorpicker.js"></script
script type="text/javascript"
$(function() {
$('.colorpicker').wheelColorPicker({ layout: 'block', live: false, sliders: "wrgb", format: "rgb" });
});

$('#trigger').bind( "click", function() {

alert( $( this ).text() );

});

$('.colorpicker').change(function() {

alert (color.r);
alert (color.g);
alert (color.b);

});

$('#trigger').change(function() {

alert (color.r);
alert (color.g);
alert (color.b);

});

// Wrap everyting in this READY directive
$(document).ready(function () {

var color = $('#trigger').wheelColorPicker('getColor');

alert (color.r);
alert (color.g);
alert (color.b);

}); /* End document.ready */

/script
/head
body
input type="text" class="colorpicker" id="trigger" /

I don't need the sliders as I'm happy with a range of colours going through to white. Apologies if I missed something in th demo and docs but is there a way to have the wheel only and not see ANY sliders?

HI,

Can you please tell me how can I get the light and dark version of picked color like this:
https://material.io/color/#!/?view.left=0&view.right=1&primary.color=e09351

The comments and code suggest that one can pass mobile: false to the initialization options to turn off the jQWCP-mobile layout.

However, the code never actually checks options.mobile and setting that value has no effect.

You can work around the problem by setting options.mobileWidth to a very small number.

The code could check for this by modifying line 1203 as follows:

-        if(window.innerWidth <= options.mobileWidth && options.layout != 'block') {
+        if(window.innerWidth <= options.mobileWidth && options.layout != 'block' && options.mobile) {

Hello Fujaru,

Thanx for this wonderfull colorpicker!

However i have some issue's figuring out how to use the onInputChange or any other event handlers, i want to get the RGB values when a input is changed to send them to a webservice.

Do you have some additional information / html file where you use some of the options mentioned in the documentation?

Thanx!

Erwin van der Zwart
Netherlands

var relX = (e.pageX - ($control.get(0).getBoundingClientRect().left - g_Origin.left) - ($control.width() / 2)) / ($control.width() / 2);
var relY = - (e.pageY - ($control.get(0).getBoundingClientRect().top - g_Origin.top) - ($control.height() / 2)) / ($control.height() / 2);
// Hue is calculated from the angle of the cursor. 0deg is set to the right, and increase counter-clockwise.
var hue = Math.atan( relY / relX ) / ( 2 * Math.PI );

I try to fix it by changing last line to

var hue = null;
if(relX == 0 && relY > 0) {
    hue = 0.25;
} else if (relX == 0 && relY < 0) {
    hue = - 0.25;
} else {
    hue = Math.atan( relY / relX ) / ( 2 * Math.PI );
}

Hello there! Really nice Plugin!!

There's a major issue in the current release. When you move any of the sliders, then you stop moving it, (mouseUp) the sliders don't stop moving.

I then checked the older version, dated back to 2013.12.18, and there isn't an error there. Source.

Here's a JSFiddle with the current version, and it has the error. The console says:
"Uncaught TypeError: Cannot read property 'blur' of undefined"

CSS supports alpha values as part of hexadecimal color codes.

For example, #ffffff80 and #fff8 are both valid representations of 50%-transparent gray.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

It would be great if the library was able to parse and generate these natively via an extension to strToColor and colorToStr.

I really love this color picker however the drag/tap does not work on iPad and android devices I've tested so far. Does anyone have the same issue?

Right now, the color picker has fixed size and slider placements. With the plan for mobile-friendly color picker, the needs to be adaptable with mobile screen's resolution.

With the current layout, on responsive website, the color picker might exceed page browser width when viewed on mobile browser. Meanwhile, on websites without responsive design, users have to zoom and pan to move the sliders.

An alternative mobile friendly layout would be good. Perhaps a popup dialog style on the center of the screen, or a keyboard popup style on appearing on the bottom of the screen. Either way, it should also come with an option to automatically switch layout between popup or dropdown depending on the screen size, instead of forcing to use one layout.

As referenced in issue #28 , the wheel + sliders cause the page to scroll on iOS safari. That issue makes the claim that it was fixed with iOS updates, but that is not the case. I am on iOS 11.4.

I have tried many things including disabling scrolling on the page as a whole to no avail. It seems to me that this is an issue with the wheel itself.

Any help is appreciated!

I am using the RGB mode to get three values. The values do not represent colors, they actually represent a directed vector, I want to use the widget for Pan/Tilt/Zoom.

Is there a way to disable the part that draw the colors on the screen?

Thanks,

Terry

This issue is specific to IE. After changing color from color picker input "onchnage" event is not firing. I debug this issue and found that "instance.lastValue" is showing the old value . it's updating with new value so that $input.trigger('change'); is not firing.

Hi there, brilliant plugin. Just wondering, can't figure it out. If there a way to clear the input field and colour picker to nothing ready for people to repick. Setting value and colour to empty doesn't seem to do it.

$('#Picker').val('');
$('#Picker').wheelColorPicker('setValue', '');

I need it to revert back to a blank input, but with the picker ready to go, and reset. Thanks.

Hello,

Thank you for this plugin.
I noticed a bug leading to the picker popup not disappearing when clicking on the page.
This bug also causes the popup to not appear under certain circumstances.

To reproduce:

• pop up the picker by clicking on its associated input
• click anywhere on the picker but not on a control (that is, click on the grey area but not on the wheel nor sliders)
• click anywhere on the page but not on the popup
• the popup doesn't disappear
• to force it to disappear, click on another input to make another popup appear
• the first popup now never appear, even when clicking on its associated input

This bug is present in all browsers.

It seems to be located in the 'WCP.Handler.html_mouseup' function: you shouldn't exit the function when no control is active. If no control is active, then you should make all popups disappear.

When used with jQuery of version 3.0.0 and above, wheelcolorpicker doesn't work on mobile devices (touch screens):

• when clicked (tapped), both sliders and wheel indicators are updated (color of H, S and other sliders changes), but actual "output" color is not changed
• when dragged, color is set to #00ff00 regardless of actual touch position

Wheelcolorpicker works fine on desktop or on mobile device with jQuery 2.2.4.

First of all, thank you for this wonderful colour picker, it is the best one i found online, and i tried a lot of them.

I have a question though, i am not sure if this is a bug or expected behaviour. When you type in the input field that is connected to the colour picker, the change event is not fired, but changes are visible in the colour picker itself.

Steps to reproduce:

• Go to the example page - http://files.jar2.net/jquery/wheelcolorpicker/example-v3/example.html
• Go to the 'Events' section
• Start typing a value in the input field (for example ff0000)
• During the typing, you see the colour in the colour picker change, but the 'Input events' is stuck at 'Focused'
• It will only show 'Changed' when you click outside of the input field (triggering a blur)

Is there any way to make the change event trigger while typing?

CSS allows for the specification of colors as three hexadecimal digits; #39C is identical to #3399CC.

It would be great if the library was able to parse these natively via an extension to strToColor.