Permalink
Browse files

Added color picker files

  • Loading branch information...
0 parents commit c78d7a7753f5158ddd09ed8f8c52c280499a9bbc @laktek committed Oct 27, 2008
Showing with 248 additions and 0 deletions.
  1. BIN arrow.png
  2. +27 −0 colorPicker.css
  3. BIN color_picker.zip
  4. +67 −0 demo.html
  5. +154 −0 jquery.colorPicker.js
  6. BIN screenshot.png
BIN arrow.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 colorPicker.css
@@ -0,0 +1,27 @@
+div.color_picker {
+ height: 16px;
+ width: 16px;
+ padding: 0 !important;
+ border: 1px solid #ccc;
+ background: url(arrow.png) no-repeat top right;
+ cursor: pointer;
+}
+
+div#_color_selector {
+ width: 110px;
+ position: absolute;
+ border: 1px solid #598FEF;
+ background-color: #EFEFEF;
+ padding: 2px;
+}
+ div#_color_selector label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; float: left; }
+ div#_color_selector input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
+
+div._color_swatch {
+ height: 12px;
+ width: 12px;
+ border: 1px solid #000;
+ margin: 2px;
+ float: left;
+ cursor: pointer;
+}
BIN color_picker.zip
Binary file not shown.
67 demo.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+<title>Really Simple Color Picker</title>
+
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
+
+<script type="text/javascript">
+ //Run the code when document ready
+ $(function() {
+ $('#color1').colorPicker();
+ $('#color2').colorPicker();
+ $('#color3').colorPicker();
+ });
+</script>
+
+<style type="text/css">
+/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
+/* General styles */
+body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
+h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
+p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
+
+/* Form styles */
+div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
+
+p.legend { margin-bottom: 1em; }
+p.legend em { color: #C00; font-style: normal; }
+
+div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
+
+div.form-container div.controlset label,
+div.form-container div.controlset input,
+div.form-container div.controlset div { display: inline; float: left; }
+
+div.form-container div.controlset label { width: 100px;}
+</style>
+<link rel="stylesheet" href="colorPicker.css" type="text/css" />
+</head>
+
+<body>
+
+<div id="wrapper">
+
+ <h2>Really Simple Color Picker (jQuery)</h2>
+
+
+
+ <p>More information about this can be found in <a href="http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/" title="Nidahas: Forms markup and CSS - Revisited">this blog article</a>.</p>
+ <div class="form-container">
+ <form action="#" method="post">
+ <fieldset>
+ <div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
+ <div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
+ <div class="controlset"><label for="color3">Color 3</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
+ </fieldset>
+ </form>
+</div>
+
+</body>
+
+</html>
+
154 jquery.colorPicker.js
@@ -0,0 +1,154 @@
+/**
+ * Really Simple Color Picker in jQuery
+ *
+ * Copyright (c) 2008 Lakshan Perera (www.laktek.com)
+ * Licensed under the MIT (MIT-LICENSE.txt) licenses.
+ *
+ */
+
+(function($){
+ $.fn.colorPicker = function(){
+ if(this.length > 0) buildSelector();
+ return this.each(function(i) { buildPicker(this)});
+ };
+
+ var selectorOwner;
+ var selectorShowing = false;
+
+ buildPicker = function(element){
+ //build color picker
+ control = $("<div class='color_picker'></div>")
+ control.css('background-color', $(element).val());
+
+ //bind click event to color picker
+ control.bind("click", toggleSelector);
+
+ //add the color picker section
+ $(element).before(control);
+
+ //hide the input box
+ $(element).hide();
+ };
+
+ buildSelector = function(){
+ selector = $("<div id='_color_selector'></div>");
+
+ //add color pallete
+ $.each($.fn.colorPicker.defaultColors, function(i){
+ swatch = $("<div class='_color_swatch'></div>");
+ swatch.css("background-color", "#" + this);
+ swatch.bind("click", function(e){ changeColor($(this).css("background-color")) });
+ swatch.bind("mouseover", function(e){
+ $(this).css("border-color", "#598FEF");
+ $("input#_color_value").val(toHex($(this).css("background-color")));
+ });
+ swatch.bind("mouseout", function(e){
+ $(this).css("border-color", "#000");
+ $("input#_color_value").val(toHex($(selectorOwner).css("background-color")));
+ });
+
+ swatch.appendTo(selector);
+ });
+
+ //add HEX value field
+ hex_field = $("<label for='_color_value'>Hex</label><input type='text' size='8' id='_color_value'/>");
+ hex_field.bind("keydown", function(event){
+ if(event.keyCode == 13) {changeColor($(this).val());}
+ if(event.keyCode == 27) {toggleSelector()}
+ });
+
+ $("<div class='_color_custom'></div>").append(hex_field).appendTo(selector);
+
+ $("body").append(selector);
+ selector.hide();
+ };
+
+ checkMouse = function(event){
+ //check the click was on selector itself or on selectorOwner
+ var selector = "div#_color_selector";
+ var selectorParent = $(event.target).parents(selector).length;
+ if(event.target == $(selector)[0] || event.target == selectorOwner || selectorParent > 0) return
+
+ hideSelector();
+ }
+
+ hideSelector = function(){
+ var selector = $("div#_color_selector");
+
+ $(document).unbind("mousedown", checkMouse);
+ selector.hide();
+ selectorShowing = false
+ }
+
+ showSelector = function(){
+ var selector = $("div#_color_selector");
+
+ selector.css({
+ top: $(selectorOwner).offset().top + ($(selectorOwner).outerHeight()),
+ left: $(selectorOwner).offset().left
+ });
+ hexColor = $(selectorOwner).next("input").val();
+ $("input#_color_value").val(hexColor);
+ selector.show();
+
+ //bind close event handler
+ $(document).bind("mousedown", checkMouse);
+ selectorShowing = true
+ }
+
+ toggleSelector = function(event){
+ selectorOwner = this;
+ selectorShowing ? hideSelector() : showSelector();
+ }
+
+ changeColor = function(value){
+ if(selectedValue = toHex(value)){
+ $(selectorOwner).css("background-color", selectedValue);
+ $(selectorOwner).next("input").val(selectedValue);
+
+ //close the selector
+ hideSelector();
+ }
+ };
+
+ //converts RGB string to HEX - inspired by http://code.google.com/p/jquery-color-utils
+ toHex = function(color){
+ //valid HEX code is entered
+ if(color.match(/[0-9a-fA-F]{3}$/) || color.match(/[0-9a-fA-F]{6}$/)){
+ color = (color.charAt(0) == "#") ? color : ("#" + color);
+ }
+ //rgb color value is entered (by selecting a swatch)
+ else if(color.match(/^rgb\(([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5]),[ ]{0,1}([0-9]|[1-9][0-9]|[1][0-9]{2}|[2][0-4][0-9]|[2][5][0-5])\)$/)){
+ var c = ([parseInt(RegExp.$1),parseInt(RegExp.$2),parseInt(RegExp.$3)]);
+
+ var pad = function(str){
+ if(str.length < 2){
+ for(var i = 0,len = 2 - str.length ; i<len ; i++){
+ str = '0'+str;
+ }
+ }
+ return str;
+ }
+
+ if(c.length == 3){
+ var r = pad(c[0].toString(16)),g = pad(c[1].toString(16)),b= pad(c[2].toString(16));
+ color = '#' + r + g + b;
+ }
+ }
+ else color = false;
+
+ return color
+ }
+
+
+ //public methods
+ $.fn.colorPicker.addColors = function(colorArray){
+ $.fn.colorPicker.defaultColors = $.fn.colorPicker.defaultColors.concat(colorArray);
+ };
+
+ $.fn.colorPicker.defaultColors =
+ [ '000000', '993300','333300', '000080', '333399', '333333', '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99', 'FFFF99' , 'CCFFFF', '99CCFF', 'FFFFFF'];
+
+})(jQuery);
+
+
BIN screenshot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c78d7a7

Please sign in to comment.