Pickr template

by Simonwep

HTML

<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/classic.min.css">
<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/monolith.min.css">
<link rel="stylesheet" href="https://simonwep.github.io/pickr/dist/themes/nano.min.css">
<script src="https://simonwep.github.io/pickr/dist/pickr.es5.min.js"></script>
<body>


<div id="divpickers">
		  
</div>


<br><br><br>
<a href="#" id="add">Add a new colorpicker</a>
</body>

JavaScript

function new_row() {

  //	ADD INPUT
  
  var newInput = $('<div class="divpicker"><input type="text" class="form-control picker" value="#CCC" name="picker[]"/></div>');
  
  newInput.appendTo($("#divpickers"));
  
  //	INIT PICKR
  
  var pickerInputs = $("body").find('.picker');
  
  console.log(pickerInputs);
  
  var pickers = [];

	$.each(pickerInputs, function(idx,value){
  
  console.log($(this));
  
  pickers[idx] = Pickr.create({
		el: $(this),
		theme: 'nano', // or 'monolith', or 'nano'
		useAsButton: true,
		comparison: false,
		swatches: [
			'rgb(244, 67, 54)',
			'rgb(233, 30, 99)',
			'rgb(156, 39, 176)',
			'rgb(103, 58, 183)',
			'rgb(63, 81, 181)',
			'rgb(33, 150, 243)',
			'rgb(3, 169, 244)',
			'rgb(0, 188, 212)',
			'rgb(0, 150, 136)',
			'rgb(76, 175, 80)',
			'rgb(139, 195, 74)',
			'rgb(205, 220, 57)',
			'rgb(255, 235, 59)',
			'rgb(255, 193, 7)'
		],
		defaultRepresentation: 'HEX',
		lockOpacity: true,
		components: {

			// Main components
			preview: true,
			opacity: false,
			hue: true,

			// Input / output Options
			interaction: {
				hex: false,
				rgba: false,
				hsla: false,
				hsva: false,
				cmyk: false,
				input: true,
				clear: true,
				save: true
			}
		},
		
		strings: {
		   save: 'Salva',  // Default for save button
		   clear: 'Pulisci', // Default for clear button
		   cancel: 'Annulla' // Default for cancel button
		}
	});
  
  
  
  pickers[idx].on('show', (color, instance) => {
		instance.setColor($(instance._root.button).val(), true);
	}).on('save', (color, instance) => {
		$(instance._root.button).val(color.toHEXA().toString());
		instance.hide();
	});
  
  });
	
	

}










$(document).ready(function() {

   // ad a new picker
  
  $("#add").on("click",function(e){
  
     e.preventDefault();
  
     new_row();
  
  });
  
});