dRawrpalette

Simple color picker with a focus on good ux for the average user, that works on android, ios, and desktop. to be bundled with drawr.

download View on github

Example 1

			//Code for Example 1

			html

			<input type="text" id ="picker" />
			
			js

			$("#picker").drawrpalette();

Example 2 (inside modal)

No code, since it's exactly the same.

Example 3 (events,preset value,inline styles and classes,destroy)

			//Code for Example 3

			html

			<input type="text" id ="picker" value="#770033" />
			
			js

			function debug(test){
				$("#debuglog").html($("#debuglog").html() + test + "
");
				$("#debuglog")[0].scrollTop = $("#debuglog")[0].scrollHeight;
			}

			$("#picker").drawrpalette().on("preview.drawrpalette",function(event,hexcolor){
				debug("preview: " + hexcolor);
			}).on("cancel.drawrpalette",function(event,hexcolor){
				debug("cancel: " + hexcolor);
			}).on("choose.drawrpalette",function(event,hexcolor){
				debug("choose: " + hexcolor);
			}).on("open.drawrpalette",function(){
				debug("open");
			}).on("close.drawrpalette",function(){
				debug("close");
			});

			//to destroy and restore original input:

			$("#picker").drawrpalette("destroy");

Features

Simple but intuitive UI
Android/iOS/Desktop support
events

Methods ($("picker").drawrpalette(methodname,param))

destroy (restores the original input)
set (sets a hex color)

Events

preview.drawrpalette (while picking a color)
cancel.drawrpalette (dialog closed or cancel pressed)
choose.drawrpalette (a color was picked)
open.drawrpalette (the dialog is opened)
close.drawrpalette (the dialog is closed)

This project is maintained by Lieuwe Prins