How initialize colorPickers without clicking on element
Opened this issue · 7 comments
Hello!
Thank you for great job!
In my project i use yours colorPicker from jsColorPicker.min.js.
Can you tell, how initialize window.jsColorPicker.colorPickers objects without clicking on input element?
Is there some method wich need to call and how it call?
in jsColor
window.jsColorPicker = function(selectors, config) {
....
return window.jsColorPicker.colorPickers;
}
but window.jsColorPicker.colorPickers - is empty array.
How initialize colorPicker into some variable after constructing?
var colorPicker = jsColorPicker('input#' + elementId, {
customBG: '#222',
readOnly: true,
init: function(elm, colors) {
.......
}
}
Hi @Isg90 ,
you probably don't need the implementation part (so, don't use jsColorPicker.min.js). You can use colorPicker.js by its own. Just instantiate (colorPicker = new ColorPicker();) and then use colorPicker.nodes.colorPicker (which is the "div" of colorPicker) and append it to where you want it to be: document.body.appendChild(colorPicker.nodes.colorPicker);
Let me know if this helps and if this is what you need..
Cheers
Thank you. I will try your way. But can i make small changes in jsColor.js for returning colorPicker instance when appending color picker to input element? I use the same functionality of jsColor.js. But need to call setColor method later (after creation colorPicker by jsColor.js)
mb new listener in doEventListeners{} block? wich can call from javascript?
i adapted for my need. With this js when call jsColorPicker function creates ColorPicker instance. But need jquery (lazy to translate into clear js). Every created instance has own memoryColors and others.
Instance may be created like:
var color1 = jsColorPicker('input#' + elementId, { readOnly: true, // patch: false, init: function(elm, colors) { // colors is a different instance (not connected to colorPicker) elm.style.width = elementSide + 'px'; elm.style.height = elementSide - 2 + 'px'; elm.style.display = 'inline-block'; elm.style.border = '0px'; elm.style.borderRadius = elementSide/5 + 'px'; elm.style.display = 'block'; elm.style.background = cpbgc; elm.style.backgroundImage = 'url(select.png)'; elm.style.backgroundRepeat = 'no-repeat'; elm.style.backgroundSize = 'contain'; // elm.style.backgroundColor = elm.value; // elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'; }, noAlpha: true, noResize: true, memoryColors: "'rgba(82,80,151,1)','rgba(100,200,10,1)','rgba(100,0,0,1)','rgba(0,0,0,1)'", //appendTo: document.querySelector('input') });
What about of add an option "target", and an option "onClick", if target is selected, will be used to control the colorpicked activation, if onClick is set instead of handled the focus will be handled the moused down to active the color picked. It will be interesting to implement a general picker. Also one with bootstrap support. All this of-course to not need to change the code.
Maybe better a "mouseTarget" and a "focusTarget", to handled both type of events at the same time.