{"id":71,"date":"2010-04-18T15:01:44","date_gmt":"2010-04-18T20:01:44","guid":{"rendered":"http:\/\/jamesroberts.name\/blog\/?p=71"},"modified":"2010-04-21T00:55:53","modified_gmt":"2010-04-21T05:55:53","slug":"yet-another-prototype-colorpicker","status":"publish","type":"post","link":"https:\/\/jamesroberts.name\/blog\/2010\/04\/18\/yet-another-prototype-colorpicker\/","title":{"rendered":"Yet another Prototype Colorpicker"},"content":{"rendered":"<p>And then there was another&#8230;..color&#8230;.picker&#8230;. I have been dissatisfied with all the prototype color pickers out there, so when I found this <a href=\"http:\/\/www.eyecon.ro\/colorpicker\/\" target=\"_blank\">jQuery colorpicker<\/a>, I decided to port it to prototype.  Yay!<\/p>\n<p>It has lots of options.  Examples\/Demo available <a href=\"\/project-src\/prototype-color-picker\/\">here<\/a>, download available <a href=\"\/project-src\/prototype-color-picker\/prototype_colorpicker.zip\">here<\/a>.  This color picker allows you to not only select your color, but it also enables the following features:<\/p>\n<ul>\n<li>specify a preview element<\/li>\n<li>specify an input element that&#8217;s not the actionable element (ie, you can specify an action element, like a clickable icon, and have the selected color applied to a hidden input)<\/li>\n<li>allows for target input element and preview element&#8217;s background color to be updated on change of the new color in the picker, or not (only will update on the commit of the color)<\/li>\n<li>ability to control hide color picker on commit color, or not<\/li>\n<li>ability to customize onShow, onBeforeShow, onChange, onHide, onLoad, and onSubmit functions<\/li>\n<li>HSB, RGB, and Hex numbers available<\/li>\n<li>Custom Event type on the &#8220;show color picker target&#8221;, such as onClick or onFocus<\/li>\n<li>has an &#8220;extra info&#8221; button which can allow you to put in a custom color palette, or anything else you might want to put into a color picker.  Color palette code can be found at the <a href=\"\/project-src\/prototype-color-picker\/\">demo page<\/a>.<\/li>\n<\/ul>\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tr>\n<td>Select Your Color: <\/td>\n<td>#<\/td>\n<td nowrap>\n\t\t\t<input type=\"text\" id=\"colorpicker\" name=\"color\" value=\"008a20\" size=\"6\"\/><\/td>\n<\/td>\n<td>&nbsp;<\/td>\n<td>\n<div id=\"colorpicker-preview\" style=\"width:16px;height:16px;border:1px solid #000;\"><\/div>\n<\/td>\n<\/tr>\n<\/table>\n<p><script>\n\tvar cp = new colorPicker('colorpicker',{\n\t\tcolor:'#008a20',\n\t\tpreviewElement:'colorpicker-preview',\n\t\teventName: 'focus',\n\t\tonShow:function(picker){\n\t\t\tnew Effect.Appear(picker.cp);\n\t\t\treturn false;\n\t\t},\n\t\tonHide:function(picker){\n\t\t\tnew Effect.Fade(picker.cp);\n\t\t\treturn false;\n\t\t},\n\t\torigColor:'#000000',\n\t\tlivePreview: true,\n\t\thideOnSubmit:false,\n\t\tupdateOnChange:true,\n\t\tflat: false,\n\t\thasExtraInfo:true,\n\t\textraInfo:function(picker){\n\t\t\tvar colors = $A([\n\t\t\t\t  '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',\n\t\t\t\t  '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',\n\t\t\t\t  'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',\n\t\t\t\t  'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',\n\t\t\t\t  'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'\n\t\t\t]);\t\n\t\t\tvar div = Builder.node('DIV').setStyle({padding:'10px 12px'});\n\t\t\tcolors.each(function(color){\n\t\t\t\tvar div_inner = Builder.node('DIV').setStyle({backgroundColor:'#'+color,cursor:'pointer',width:'10px',height:'10px','float':'left',border:'2px solid #'+color,margin:'1px'});\n\t\t\t\tdiv.insert(div_inner);\n\t\t\t\tdiv_inner.observe('click',function(ev){picker.setColor(color);});\n\t\t\t\tdiv_inner.observe('mouseover',function(ev){ev.element().setStyle({border:'2px solid #000'});});\n\t\t\t\tdiv_inner.observe('mouseout',function(ev){ev.element().setStyle({border:'2px solid #'+color});});\t\t\n\t\t\t});\n\t\t\tpicker.extraInfo.update(div);\n\t\t}\n\t});\n<\/script><\/p>\n<pre lang=\"javascript\">\r\n\tvar cp = new colorPicker('colorpicker',{\r\n\t\tcolor:'#008a20',\r\n\t\tpreviewElement:'colorpicker-preview',\r\n\t\teventName: 'focus',\r\n\t\tonShow:function(picker){\r\n\t\t\tnew Effect.Appear(picker.cp);\r\n\t\t\treturn false;\r\n\t\t},\r\n\t\tonHide:function(picker){\r\n\t\t\tnew Effect.Fade(picker.cp);\r\n\t\t\treturn false;\r\n\t\t},\r\n\t\torigColor:'#000000',\r\n\t\tlivePreview: true,\r\n\t\thideOnSubmit:false,\r\n\t\tupdateOnChange:true,\r\n\t\tflat: false,\r\n\t\thasExtraInfo:true,\r\n\t\textraInfo:function(picker){\r\n\t\t\tvar colors = $A([\r\n\t\t\t\t  '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',\r\n\t\t\t\t  '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',\r\n\t\t\t\t  'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',\r\n\t\t\t\t  'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',\r\n\t\t\t\t  'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'\r\n\t\t\t]);\r\n\t\t\t\r\n\t\t\tvar div = Builder.node('DIV').setStyle({padding:'10px 12px'});\r\n\t\t\tcolors.each(function(color){\r\n\t\t\t\tvar div_inner = Builder.node('DIV').setStyle({backgroundColor:'#'+color,cursor:'pointer',width:'10px',height:'10px','float':'left',border:'2px solid #'+color,margin:'1px'});\r\n\t\t\t\tdiv.insert(div_inner);\r\n\t\t\t\tdiv_inner.observe('click',function(ev){picker.setColor(color);});\r\n\t\t\t\tdiv_inner.observe('mouseover',function(ev){ev.element().setStyle({border:'2px solid #000'});});\r\n\t\t\t\tdiv_inner.observe('mouseout',function(ev){ev.element().setStyle({border:'2px solid #'+color});});\t\t\r\n\t\t\t});\r\n\t\t\tpicker.extraInfo.update(div);\r\n\t\t}\r\n\t});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>And then there was another&#8230;..color&#8230;.picker&#8230;. I have been dissatisfied with all the prototype color pickers out there, so when I found this jQuery colorpicker, I decided to port it to prototype. Yay! It has lots of options. Examples\/Demo available here, download available here. This color picker allows you to not only select your color, but [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[20,61,7],"_links":{"self":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/71"}],"collection":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":19,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/71\/revisions\/74"}],"wp:attachment":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/tags?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}