PHP Classes

File: JS_toolbucket/SoftMoon.picker_support.js

Recommend this page to a friend!
  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: 10 years ago
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(); }