build and preRender bug

[huye]

add in line 18:
_toggle,
insert in line 200:
if(_toggle == toggled){ return } _toggle = toggled;
replace in line 312:
var value = extractValue(this), mode = value.split('('), $elm = findElement($(this));
to:
var $elm = findElement($(this)), value = extractValue($elm), mode = value.split('(');

[huye]

The information above is used to solve two problems, one is that ColorPicker continues to response to clicking action after it is closed and the other is that system fails to initialize background color after providing doRender.

[PitPik]

Hi @huye ,
thanks for your participation,
Maybe you need to get the newest version. I fixed the continuous click action earlier in line 118:

} else if (_colorPicker.$trigger) {

Your second concern about 'initialize background color after providing doRender'... I don't quite know what the problem is and... extractValue is destined to take a DOMElement and not a jQuery object.

Can you explain your problem more precisely?
Cheers
Peter

[huye]

Reproduce code:

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js">&lt;/script>
<script src="http://www.dematte.at/tinyColorPicker/jqColorPicker.min.js">&lt;/script>

<label class="color">
<input name="fore" class="no-alpha border-color" value="#ff0000">Text
</label>
<script>
var color;
$('.color').colorPicker({
opacity: false,
doRender: "input",
renderCallback: function(pick, toggled){
if(true === toggled){
color = pick.val()
}else if(false === toggled){
if(color != pick.val()){
color = pick.val();
// xxx
}
}else{
// xxx
}
}
})
</script>

[kai101]

have problem with continuous click ealier, the new version has fix the issue.

[PitPik]

Hi @huye ,
I think I can see the problem now:
You provide colorPicker to the <label class="color"> and not to the <input ...>. $('.color').colorPicker() is getting your label... This is also the reason why you needed to add doRender: "input" to your options. Doing so, you'll get the input from your renderCallback: function(pick, toggled) callback, but the initial value is still taken from the <label class="color"> and your label doesn't have a value.
The solution(s) would be: either put an initial value on your label or put the color class to your <input class="no-alpha border-color color"> or use color picker with another selector as $('.border-color').colorPicker(...)

[huye]

I hope to be able to trigger the render event when you click on the label.

[PitPik]

@huye
What's wrong with the following?

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.dematte.at/tinyColorPicker/jqColorPicker.min.js"></script>
<label class="">
    <span style="display: block">Text</span>
    <input name="fore" class="no-alpha border-color color" value="#FF0000">
</label>
<script>
$('.color').colorPicker({
    opacity: false
});
</script>

You can click on the label and still be able to open the picker... which also triggers the renderCallback