colorPicker How initialize colorPickers without clicking on element

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?

Dec 21 '16 21:12 Isg90

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) { ....... } }

Dec 21 '16 22:12 Isg90

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

Dec 22 '16 18:12 PitPik

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)

Dec 23 '16 09:12 Isg90

mb new listener in doEventListeners{} block? wich can call from javascript?

Dec 24 '16 16:12 Isg90

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') });

jsColor.txt

Dec 25 '16 12:12 Isg90

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.

Aug 25 '17 06:08 ghost

Maybe better a "mouseTarget" and a "focusTarget", to handled both type of events at the same time.

Aug 25 '17 06:08 ghost