Saving Selected Color in input

[varunsridharan]

Hi Again,!!

i used this library in my framework and found that it dose not support input[type=text] element.
so i created a div and was able to get it working.

and then i found i can't even link input field to this library so it can update the selected color.

so for that i created a small workaround as below

let $save_color = ( $color, $instance ) => {
	let $value = $color.toHEXA().toString();
		if( !window.wponion._.isUndefined( $instance._representation ) ) {
			switch( $instance._representation ) {
				case 'HEXA':
					$value = $color.toHEXA().toString();
					break;
				case 'RGBA':
					$value = $color.toRGBA().toString();
					break;
				case 'HSLA':
					$value = $color.toHSLA().toString();
					break;
				case 'HSVA':
					$value = $color.toHSVA().toString();
					break;
				case 'CMYK':
					$value = $color.toCMYK().toString();
					break;
			}
		}
	this.element.find( 'input.wponion-color-picker-element' ).val( $value );
};

$instance.on( 'save', $save_color );
$instance.on( 'change', $save_color );
$instance.on( 'swatchselect', $save_color );

So i would like to know if there is a chance that you could support input field or even provide a custom argument where i can link my input field to get the values updated.

[simonwep]

You can shorten you code by using template strings:

let $save_color = ($color, {_representation}) => {
    let $value = $color.toHEXA().toString();

    if (!window.wponion._.isUndefined(_representation)) {
        $value = $color[`to${_representation}`].toString();
    }

    this.element.find('input.wponion-color-picker-element').val($value);
};

$instance.on('save', $save_color);
$instance.on('change', $save_color);
$instance.on('swatchselect', $save_color);

I basically don't want to "polyfill" any native HTML5 input element, but I can add a getCurrentRepresentation function to access what the user currently use. That would simplify to current code to (change get's at least one time fired before save with the current color):

let $save_color = (color, pickr) => {
    this.element.find('input.wponion-color-picker-element')
        .val($value[`to${pickr.getCurrentRepresetation()}`].toString(0));
};

$instance.on('change', $save_color);
$instance.on('swatchselect', $save_color);

swatchselect should also fire change, but it doesn't. I'll fix that and you final could would be

$instance.on('change', (color, pickr) => {
    this.element.find('input.wponion-color-picker-element')
        .val($value[`to${pickr.getCurrentRepresetation()}`].toString(0));
});

[varunsridharan]

@simonwep you proved it again you are a super human 😄
Yea the feature idea which you said would work i think and also thanks for the short code 😄

[simonwep]

Oh lol, there is already getColorRepresentation().
But it's not mentioned in the docs whoops

[varunsridharan]

lol sorry my bad. i think i am out of energy today !!!!

[simonwep]

Haha no problem, If it isn't mentioned anywhere it does basically not exist :D

[simonwep]

I've released 1.2.2 for now, I know there's the thing with themes - I'll take care of that in the next release, I promise :)

[varunsridharan]

@simonwep sorry to bother you again

Error : https://vsp.ams3.cdn.digitaloceanspaces.com/sshots/i/2019/Jul/17/1563371916-177.gif

Code

$instance.on( 'change', ( $color, { _representation } ) => {
				let $value = $color.toHEXA().toString();

				if( !window.wponion._.isUndefined( _representation ) ) {
					$value = $color[ `to${_representation}` ].toString();
				}

				this.element.find( 'input.wponion-color-picker-element' ).val( $value );
			} );

---

$instance.on('change', (color, pickr) => {
    this.element.find('input.wponion-color-picker-element')
        .val($value[`to${pickr.getCurrentRepresetation()}`].toString(0));
});

Below error for the above code

[simonwep]

It's getColorRepresentation not getCurrentRepresentation :) The function exists but yeah, it has another name haha. It'd be

$instance.on('change', (color, pickr) => {
    this.element.find('input.wponion-color-picker-element')
        .val($value[`to${pickr.getColorRepresentation()}`].toString(0));
});

[simonwep]

The zero in toString means on which decimal place it should be rounded, safari got some serious problems with floating point color stuff so you'd need to pass a zero into it :/

[varunsridharan]

cool thanks for your faster reply and is it $value or color in the function above ?

[simonwep]

Whoops yeah it's color. The dollar sign confuses me:

$instance.on('change', (color, pickr) => {
    this.element.find('input.wponion-color-picker-element')
        .val(color[`to${pickr.getColorRepresentation()}`].toString(0));
});

[varunsridharan]

@simonwep nope your code is not working i get the below value

function(){var t=function(t,e,n){var r,o=w(t,e,n),i=o[0]/255,a=o[1]/255,c=o[2]/255;return[100*(1===(r=m(1-i,1-a,1-c))?0:(1-i-r)/(1-r)),100*(1===r?0:(1-a-r)/(1-r)),100*(1===r?0:(1-c-r)/(1-r)),100*r]}(i.h,i.s,i.v);return t.toString=o(t,function(t){return"cmyk(".concat(t[0],"%, ").concat(t[1],"%, ").concat(t[2],"%, ").concat(t[3],"%)")}),t}

[varunsridharan]

Also Note : pickr.getColorRepresentation() returns undefined if user did not select which color type they need eg( RBGA) and so on

[simonwep]

If you haven't set defaultRepresentation pickr don't automatically know's which you wanna use. It only assumes it based on default. I can change that, would be better i guess. Checkout this fiddle: https://jsfiddle.net/xoamd8ge/

[simonwep]

And I forgot you only resolve the name with the template string, It's a function so you need to call it.
Update fiddle: https://jsfiddle.net/s092ufox/
Your code:

$instance.on('change', (color, pickr) => {
    this.element.find('input.wponion-color-picker-element')
        .val(color[`to${pickr.getColorRepresentation()}`]().toString(0));
});

At the end there is color.to[RGBA|HEXA...]().toString()

[varunsridharan]

@simonwep thanks :-)

[simonwep]

I'm closing it for now, since 1.2.3 change will be fired in swatchselect :) Reopen if there are any more issues.

[sergeizhukov]

@simonwep Hi. I spent couple hours for understand that for changestop event this: color.toHEXA() doesn't work =/

[simonwep]

@sergeizhukov Whoops typo in the README. You only got the instance as argument. I've updated the README, thx :)