Login   Register  
PHP Classes
elePHPant
Icontem

File: JS_toolbucket/SoftMoon.picker_support.js

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Joseph  >  Rainbow Maker  >  JS_toolbucket/SoftMoon.picker_support.js  >  Download  
File: JS_toolbucket/SoftMoon.picker_support.js
Role: Auxiliary data
Content type: text/plain
Description: HTML form input picker support with color-picker functionality
Class: Rainbow Maker
Create transparent gradient images
Author: By
Last change: better support for legacy versions of Internet Exploder
Date: 2012-03-04 14:18
Size: 10,039 bytes
 

Contents

Class file image Download
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 &lt;select&gt; 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();  }