if (typeof window.getComputedStyle !== 'function') window.getComputedStyle=function(elmnt) {return elmnt.currentStyle;}
RegExp.rgb=new Object; RegExp.cmyk=new Object;
RegExp.rgb.noWrap= new RegExp( /^\s*([0-2]?[0-9]{1,2})\s*,\s*([0-2]?[0-9]{1,2})\s*,\s*([0-2]?[0-9]{1,2})\s*$/ )
RegExp.rgb.wrapped= new RegExp( /^\s*rgb\(\s*([0-2]?[0-9]{1,2})\s*,\s*([0-2]?[0-9]{1,2})\s*,\s*([0-2]?[0-9]{1,2})\s*\)\s*$/i )
RegExp.cmyk.noWrap= new RegExp( /^\s*([01]?[0-9]{1,2})\s*,\s*([01]?[0-9]{1,2})\s*,\s*([01]?[0-9]{1,2})\s*,\s*([01]?[0-9]{1,2})\s*$/ )
RegExp.cmyk.wrapped= new RegExp( /^\s*cmyk\(\s*([01]?[0-9]{1,2})\s*,\s*([01]?[0-9]{1,2})\s*,\s*([01]?[0-9]{1,2})\s*,\s*([01]?[0-9]{1,2})\s*\)\s*$/i )
if (typeof SoftMoon !== 'object') SoftMoon=new Object;
(function() { var exploder=(navigator) ? navigator.userAgent.match( /MSIE[ ]?([1-9][0-9]?)/i ) : false;
SoftMoon.isDOMElement=(exploder && parseInt(exploder[1]) < 9) ?
function(e) {return (typeof e == 'object' && e.nodeType==1);} //dumb-down the test for Microsoft to pass
: function(e) {return (typeof e == 'object' && e instanceof Node && e.nodeType==1);}
}()) //execute the anon. func.
// the “wrapper” should wrap 1 or more <table> tags, each <table> being a seperate picker.
// the “picker_select” should be a <select> tag to choose which picker <table> is displayed, or null to display all.
// the “action” may be a function to replace the standard “addTo” function.
SoftMoon.Picker=function(wrapper, opts) {
if (SoftMoon.isDOMElement(wrapper))
this.wrapper=wrapper;
else throw new Error("Picker wrapper must be a DOM Element Node");
if (typeof opts == 'object') {
if (opts.picker_select) { with (opts) {
if (SoftMoon.isDOMElement(picker_select) && picker_select.nodeName=='SELECT')
this.picker_select=picker_select;
else throw new Error("picker_select must be a DOM <select> Element Node"); } }
if (typeof opts.action == 'function') this.addTo=opts.action;
else if (opts.action) throw new Error("Picker action must be a function");
if (opts.targetElmnt) { with (opts) {
if (SoftMoon.isDOMElement(targetElmnt))
this.targetElmnt=targetElmnt;
else throw new Error("Picker targetElmnt must be a DOM Element Node"); } }
if (opts.swatch) { with (opts) {
if (SoftMoon.isDOMElement(swatch))
this.swatch=swatch;
else throw new Error("Picker swatch must be a DOM Element Node"); } } } }
SoftMoon.Picker.prototype.showTable=function(flag, elmnt1) {
this.wrapper.style.display=(flag) ? "block" : "none";
if (flag) this.chooseTable();
if (!flag && this.targetElmnt && this.targetElmnt.blurscript) {
// document.getElementById('tester2').style.backgroundColor='blue';
this.targetElmnt.onblur=this.targetElmnt.blurscript; this.targetElmnt.blurscript=null; }
if (elmnt1) this.targetElmnt=(flag) ? elmnt1 : null;
if (!flag) clearInterval(this.fadeout.refocus); }
SoftMoon.Picker.prototype.chooseTable=function(tblName) {
if (typeof tblName !== 'string') {
try {
tblName=this.picker_select.options[this.picker_select.selectedIndex].value; }
catch(e) {} }
var tables=this.wrapper.getElementsByTagName('table');
if (tables) for (var i=0; i<tables.length; i++) {
tables[i].style.display=( (tables[i].id===tblName || tables[i].id==='') ? 'block' : 'none' ); } }
// use this utility when you want to use the pickers with an <input> tag
SoftMoon.Picker.prototype.fadeout=function(flag) { if (this.targetElmnt==null) return;
if (flag) {
if (this.targetElmnt.blurscript) {
// document.getElementById('tester').style.backgroundColor='red';
this.targetElmnt.onblur=this.targetElmnt.blurscript; this.targetElmnt.blurscript=null; }
// document.getElementById('tester2').style.backgroundColor='cyan';
clearInterval(this.fadeout.refocus); }
else {
// document.getElementById('tester').style.backgroundColor='green';
if (this.targetElmnt.onblur) {
// document.getElementById('tester2').style.backgroundColor='orange';
this.targetElmnt.blurscript=this.targetElmnt.onblur; this.targetElmnt.onblur=null; }
clearInterval(this.fadeout.refocus);
this_instance=this;
this.fadeout.refocus=setInterval(function() {this_instance.targetElmnt.focus();}, 500); } }
// you may replace this function with your own, or simply replace this.addTo.action to retain the prefix/wrap operability.
SoftMoon.Picker.prototype.addTo=function(chosen, palette) { var rgb, cmyk, htm;
if (rgb=chosen.match( /^rgb\(([^)]+)\)/i ))
chosen=(this.addTo.useRGB ? rgb[0] : rgb[1]);
else if (rgb=chosen.match( RegExp.rgb.noWrap ))
chosen=(this.addTo.useRGB ? 'rgb(' : "") + chosen + (this.addTo.useRGB ? ')' : "")
else if (cmyk=chosen.match( /^cmyk\(([^)]+)\)/i ))
chosen=(this.addTo.useCMYK ? cmyk[0] : cmyk[1]);
else if (cmyk=chosen.match( RegExp.cmyk.noWrap ))
chosen=(this.addTo.useCMYK ? 'cmyk(' : "") + chosen + (this.addTo.useCMYK ? ')' : "")
else if (typeof palette == 'string' && palette.length>0 && palette.toUpperCase()!=='HTML')
chosen=palette+': '+chosen;
else if (htm=chosen.match( /^#?([0-9A-F]{6})$/i ))
chosen=(this.addTo.useHash ? '#' : "") + htm[1];
if (typeof this.addTo.action == 'function') return this.addTo.action(chosen, this); }
SoftMoon.Picker.prototype.addTo.action=function(chosen, this_instance) {
this_instance.targetElmnt.value=chosen;
this_instance.colorSwatch(this_instance.targetElmnt);
this_instance.targetElmnt.focus(); }
SoftMoon.Picker.prototype.addTo.useHash=false; // ¿prefix hex values with a hash like this: #FF0099 ?
SoftMoon.Picker.prototype.addTo.useRGB =false; // ¿wrap rgb values like this: rgb(255, 0, 153) ?
SoftMoon.Picker.prototype.addTo.useCMYK=false; // ¿wrap cmyk values ?
// this will read an <input> tag's value and interpret the color
// then set the background-color of it or a seperate swatch;
// text-color will then be set using “SoftMoon.makeTextReadable()”
SoftMoon.Picker.prototype.colorSwatch=function(elmnt) { var m, swatch;
switch (this.colorSwatch.showColorAs) {
case 'swatch': swatch=(elmnt.swatch || this.swatch || elmnt.nextSibling); break;
case 'background':
default: swatch=elmnt; }
if (swatch===null || swatch.nodeType!==1) return;
if (!swatch.defaultBack) {
var styles=window.getComputedStyle(swatch);
if (styles.backgroundColor=='transparent')
swatch.defaultBack='transparent';
else {
swatch.defaultBack=styles.backgroundColor.match( RegExp.rgb.wrapped );
swatch.defaultBack='#'+SoftMoon.rgb_to_hex([swatch.defaultBack[1], swatch.defaultBack[2], swatch.defaultBack[3]]); } }
if (elmnt.value.match( /^(none|blank|gap|zilch|\-|\_|\u2013|\u2014)$/i )) {
if (this.colorSwatch.toggleBorder) swatch.style.border='2px dotted '+this.colorSwatch.borderColor;
swatch.style.backgroundColor='transparent';
if (swatch.defaultColor) swatch.style.color=swatch.defaultColor;
return; }
if (this.colorSwatch.toggleBorder) swatch.style.border='1px solid '+this.colorSwatch.borderColor;
if (m=(elmnt.value.match( RegExp.rgb.noWrap ) || elmnt.value.match( RegExp.rgb.wrapped ))) {
if (m[1]<256 && m[2]<256 && m[3]<256) swatch.style.backgroundColor='#'+SoftMoon.rgb_to_hex([m[1], m[2], m[3]]);
SoftMoon.makeTextReadable(swatch);
return; }
if (m=(elmnt.value.match( RegExp.cmyk.noWrap ) || elmnt.value.match( RegExp.cmyk.wrapped ))) {
if (m[1]<101 && m[2]<101 && m[3]<101 && m[4]<101) swatch.style.backgroundColor='#'+SoftMoon.cmyk_to_hex([m[1], m[2], m[3], m[4]]);
SoftMoon.makeTextReadable(swatch);
return; }
var ccw=this.wrapper.getElementsByTagName('table');
for (var j=0; j<ccw.length; j++) { if (ccw[j].className !== 'color_chart') continue;
if (ccw[j].id.toUpperCase()==='HTML')
palette="";
else palette=ccw[j].id+": ";
var ct=ccw[j].getElementsByTagName('tbody')[0].childNodes;
for (var i=0; i<ct.length; i++) { if (ct[i].nodeType!==1 || ct[i].nodeName!=='TR') continue;
m=palette+ct[i].firstChild.nextSibling.firstChild.data;
if (elmnt.value.toLowerCase()===m.toLowerCase()) {
swatch.style.backgroundColor='#'+ct[i].firstChild.nextSibling.nextSibling.firstChild.data;
SoftMoon.makeTextReadable(swatch);
return; } } }
if (m=elmnt.value.match( /^\s*#?([0-9A-F]{6})\s*$/i )) {
swatch.style.backgroundColor='#' + m[1];
SoftMoon.makeTextReadable(swatch);
return; }
if (this.colorSwatch.toggleBorder) swatch.style.border='none';
swatch.style.backgroundColor=swatch.defaultBack;
if (swatch.defaultColor) swatch.style.color=swatch.defaultColor;
}
SoftMoon.Picker.prototype.colorSwatch.showColorAs='swatch'; // 'swatch' or 'background'
SoftMoon.Picker.prototype.colorSwatch.toggleBorder=true;
SoftMoon.Picker.prototype.colorSwatch.borderColor='#FFFFFF';
// text-color will be set to black or white depending on the brightness of the background-color.
SoftMoon.makeTextReadable=function(elmnt) {
var back=elmnt.style.backgroundColor.match( RegExp.rgb.wrapped );
if (back===null) return;
if (!elmnt.defaultColor) {
elmnt.defaultColor=window.getComputedStyle(elmnt).color.match( RegExp.rgb.wrapped );
elmnt.defaultColor='#'+SoftMoon.rgb_to_hex([elmnt.defaultColor[1], elmnt.defaultColor[2], elmnt.defaultColor[3]]); }
elmnt.style.color=( (((Number(back[1])+Number(back[2])+Number(back[3]))/3) < 128) ? '#FFFFFF' : '#000000' ); }
SoftMoon.cmyk_to_hex=function(cmyk) {
//CMYK values from 0 to 100
//RGB results from 0 to 255
//hex returned from 000000 to FFFFFF
for (var i in cmyk) {cmyk[i]/=100;}
return SoftMoon.rgb_to_hex( [
((1 - ( cmyk[0] * ( 1 - cmyk[3] ) + cmyk[3] ) ) * 255),
((1 - ( cmyk[1] * ( 1 - cmyk[3] ) + cmyk[3] ) ) * 255),
((1 - ( cmyk[2] * ( 1 - cmyk[3] ) + cmyk[3] ) ) * 255) ] ); }
SoftMoon.rgb_to_hex=function(rgb) {return SoftMoon._2hex(rgb[0])+SoftMoon._2hex(rgb[1])+SoftMoon._2hex(rgb[2]);}
SoftMoon._2hex=function(d, flag) { if (flag === undefined) flag=true;
return ((flag && Math.round(d)<16) ? "0" : "") + Math.round(d).toString(16).toUpperCase(); }
|
Download
