[Need Help] How to use color picker on module configuration page

[silenco]

Hello

 

I'm new newbie developer on prestashop modules and i'm currently working on one module for which i need color picker functionality to change colors on table rows.

 

is there documentation how to use colorpicker ( i googled for mcolorpicker but all is outdated, and even i didn't find them in google cache )

 

My question is:

How to use built in color picker in prestashop ( i use this in module configuration page ) i.e. i want to change background and font color in table rows on module configuration page

 

i use prestashop version 1.5.6.2.

 

thanks in advance

 

Sven

 

 

[PascalVG]

Maybe you can use this jQuery colorpicker. Info on how to implement available, so that may help:

http://www.eyecon.ro/colorpicker/

 

My 2 cents,

pascal.

[silenco]

thanks for reply i'll try this

[vekia]

check how im doing this in my modules, for example, in european union cookie law module

it's free module, you can download it and check my way to achieve it

 

im using external simple jscolor library

[silenco]

Thanks all for reply

 

I solved this with builtin color picker simple javascript and hidden inputs

 

i bind "colorpicked" function to each color selector ( colorpicker input field )

 

 

so i'll mark this question as solved

[vekia]

thank you for information how you did that

any chance to see this workaround somewhere?

[silenco]

thank you for information how you did that

any chance to see this workaround somewhere?

yes no problem at all

 

here is rough sample of code

 

 in tpl file i add this

<form ....>
	<label class="t" for="HeadBgColor"> Color 1 </label>
	<input type="color" class="colorSelector" id="HeadBgColor" name="color_1_config" value="#{$mod_config.head_bg_color}" data-hex="true" />
	<p class="clear">{l s='Color preferences 1'}</p>

	<label class="t" for="HeadFontColor"> Color 2 </label>
	<input type="color" class="colorSelector" name="color_2_config" id="HeadFontColor" value="#{$mod_config.head_font_color}" data-hex="true" />
	<p class="clear">{l s='Color preferences 2'}</p>

	<label class="t" for="RowBgColor"> Color 3 </label>
	<input type="color" class="colorSelector" name="color_3_config" id="RowBgColor" value="#{$mod_config.row_bg_color}" data-hex="true" />
	<p class="clear">{l s='Color preferences 3'}</p>

	<label class="t" for="RowFontColor"> Color 4 </label>
	<input type="color" class="colorSelector" name="color_4_config" id="RowFontColor" value="#{$mod_config.row_font_color}" data-hex="true" />
	<p class="clear">{l s='Color preferences 3'}</p>
</form>

<script type="text/javascript">
//<![CDATA[
	$(document).ready(function() {
		if ($(".colorSelector").length > 0){
			$(".colorSelector").each(function () {
				var elementName = $(this).attr("name");
				$(this).bind("colorpicked", function () {
					changeColor(elementName,$(this).val());      
				});
			});//end each
		}// end if 
	  
		function changeColor(elId,color){
			var classSel = "."+elId;
			$("input[name="+elId +"]").val(color);
                        // this part is for realtime preview code which is not here 
			if (elId.indexOf("_config") >= 0) {
				var bgColorId = elId.replace("_config","");  // on preview i have same class as color input name but without _config trailer
				var bgSelector = "."+bgColorId;
				var bgColor = $(bgSelector).css("background-color");	
						
				var styles = {
					backgroundColor : bgColor,
					color: color
				};
				$(bgSelector).css(styles);
			} else {
				$(classSel).css("backgroundColor", color);
			}
		}
	});
//]]>
</script>

Like i said this is rough sample and need to be adopted to your needs, also i have simple realtime preview so that user can see in realtime when he pick color

 

since i didn't that so good in javascript i belive that this can be written maybe simplier but this, however since work for me i'm satisfied

 

and before i came to this i play with this approach on js.bin

since this most of part my code you can see here in action

here is link

http://jsbin.com/rabelada/63/

 

 

if you have any question let me know

Edited March 20, 2014 by silenco (see edit history)