From 34537619f1e3f05328ec97c71c77ec0f5bc47eb1 Mon Sep 17 00:00:00 2001 From: Peter O Date: Wed, 16 Oct 2013 01:38:03 -0400 Subject: [PATCH] Replace the color picker. Work in progress. --- js/controller/PaletteController.js | 19 +- js/lib/cbox.js | 1550 ++++++++++++++++++++++++++++ js/lib/objlib.js | 763 ++++++++++++++ piskel-script-list.js | 4 +- 4 files changed, 2327 insertions(+), 9 deletions(-) create mode 100644 js/lib/cbox.js create mode 100644 js/lib/objlib.js diff --git a/js/controller/PaletteController.js b/js/controller/PaletteController.js index 48b2a141..822709f9 100644 --- a/js/controller/PaletteController.js +++ b/js/controller/PaletteController.js @@ -21,14 +21,17 @@ // Initialize colorpickers: var colorPicker = $('#color-picker'); colorPicker.val(Constants.DEFAULT_PEN_COLOR); - colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); - - var secondaryColorPicker = $('#secondary-color-picker'); secondaryColorPicker.val(Constants.TRANSPARENT_COLOR); - secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); - - window.jscolor.install(); + PDColorPicker.setColorPicker(colorPicker[0], { usealpha: true, nobutton: true}); + PDColorPicker.setColorPicker(secondaryColorPicker[0],{ usealpha: true, nobutton: true}); + var thisObj=this; + PDColorPicker.getColorChangeEvent().add(function(c,element){ + var isPrimary=element.id==="color-picker"; + thisObj.onPickerChange_({target:element,data:{ + isPrimary: isPrimary + }},isPrimary); + }) }; /** @@ -71,10 +74,10 @@ // The colorpicker can't be set to a transparent state. // We set its background to white and insert the // string "TRANSPARENT" to mimic this state: - colorPicker[0].color.fromString("#fff"); + colorPicker[0].style.backgroundColor="#fff"; colorPicker.val(Constants.TRANSPARENT_COLOR); } else { - colorPicker[0].color.fromString(color); + colorPicker[0].style.backgroundColor=color; } }; })(); diff --git a/js/lib/cbox.js b/js/lib/cbox.js new file mode 100644 index 00000000..f1b6f1aa --- /dev/null +++ b/js/lib/cbox.js @@ -0,0 +1,1550 @@ +/* This file is in the public domain. Peter O., 2012-2013. http://upokecenter.dreamhosters.com + Public domain dedication: http://creativecommons.org/publicdomain/zero/1.0/ */ + +/* global getComputedValue, getWidth, getHeight, getPageX, + getPageY, setPageX, setPageY, setWidth, setHeight, rgbToColor, + colorToRgba, subclass, colorToRgb, rgbToColorHtml, removeListener, + addListener, addReadyListener, rgbaToColorRgba, rgbaToColorArgb, + rgbToColorDisplay, colorRgbaToRgba, colorArgbToRgba, isRgbDark, + MethodBinder, eventDetails, + rgbToColorRgba, rgbToColorArgb */ +(function(window,rootobj){ + "use strict"; +var doNothingURL="javascript:void(null)"; + var removeFilter=function(o,filter){ + if("filter" in o.style){ + var fs=(o.style.filter||""); + if(fs==="none")return; + fs=(getComputedValue(o,"filter")||""); + if(fs==="none"||fs==="")return; + var ftmp=fs; + var ff=[]; + filter=filter.toLowerCase(); + while(ftmp.length>0){ + var e=(/^(\s*([^\(\s\,]+)\s*(\([^\)]+\))?\s*)/).exec(ftmp); + if(e){ + var filtername=e[2]; + var filterparams=(e[3]||""); + var lcfiltername=e[2].toLowerCase(); + if(lcfiltername!==filter && lcfiltername!=="progid:dximagetransform.microsoft."+filter){ + ff[ff.length]=filtername+filterparams; + } + ftmp=ftmp.substr(e[1].length); + } else break; + } + var newfs=ff.join(" "); + if(newfs.length===0)newfs="none"; + if(fs!==newfs)o.style.filter=newfs; + } + }; + var fakeMultiGradient=function(o,colors){ + if(colors.length===2)return applyCssGradient(o,colors); + var nodes=o.getElementsByTagName("div"); + var i; + if(nodes.length===colors.length-1){ + for(i=0;i255 ? 255 : d)); + return hx.charAt((c>>4)&15)+hx.charAt(c&15); + }; + var ss="#"+tohex(s[3])+tohex(s[0])+tohex(s[1])+tohex(s[2]); + var es="#"+tohex(e[3])+tohex(e[0])+tohex(e[1])+tohex(e[2]); + if((""+o.style.zoom)==="")o.style.zoom="1"; + removeFilter(o,"gradient"); + var filter=(o.style.filter||""); + if(filter!=="" && filter!=="none")filter+=","; else filter=""; + filter+="progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='"+ss+"',EndColorStr='"+es+"')"; + o.style.filter=filter; + return true; + } else if("filters" in o){ + return fakeMultiGradient(o,colors) ; + } + return false; +} ; +var ColorSpace=subclass(Object,{ + initialize:function(info,usealpha){ + this.usealpha=usealpha; + this.info=info; + var faster=(navigator.userAgent.indexOf("Gecko/")>=0); + faster=true; + this.maxWidth=(faster ? 36 : 60); + this.maxHeight=(faster ? 36 : 60); + this.areas=[]; + this.emptyArea=[0,0,0,0]; + this.swatchWidth=Math.floor(this.maxWidth*1/3); + this.matrixWidth=Math.floor(this.maxWidth*(this.usealpha ? 80 : 85)/100); + this.matrixHeight=Math.floor(this.maxHeight*80/100); + this.setupdimensions(); + this.areacache=[]; + }, +fromrgbcolor:function(c){ + var ret=(typeof this.info.fromrgbcolor!=="undefined" && this.info.fromrgbcolor) ? + this.info.fromrgbcolor(c) : [0,0,0]; + if(ret===c){ ret=[c[0],c[1],c[2]];} + ret[3]=((c[3]===null || typeof c[3]==="undefined")) ? 255 : c[3]; + return ret; +}, +torgbcolor:function(c){ + var ret=this.info.torgbcolor(c); + if(ret===c){ ret=[c[0],c[1],c[2]];} + ret[3]=((c[3]===null || typeof c[3]==="undefined")) ? 255 : c[3]; + return ret; +}, +dimensions:function(){ + return [this.maxWidth,this.maxHeight]; +}, +areadimensions:function(area){ + var a=this.areas[area]; + if(!a)return this.emptyArea; + return a; +}, +setupdimensions:function(){ + if(!(typeof this.info.fromrgbcolor!=="undefined" && this.info.fromrgbcolor)){ + if(!this.usealpha)this.areas[1]=[0,0,this.maxWidth,this.matrixHeight]; + else this.areas[1]=[0,0,this.matrixWidth+ + Math.floor((this.maxWidth-this.matrixWidth)/2),this.matrixHeight]; + // side bar + this.areas[2]=[0,0,0,0]; + // alpha bar + if(this.usealpha)this.areas[6]=[this.matrixWidth+ + Math.floor((this.maxWidth-this.matrixWidth)/2),0, + Math.floor((this.maxWidth-this.matrixWidth)/2), + this.matrixHeight]; + } else { + // color matrix + this.areas[1]=[0,0,this.matrixWidth,this.matrixHeight]; + // side bar + if(this.usealpha)this.areas[2]=[this.matrixWidth,0, + Math.floor((this.maxWidth-this.matrixWidth)/2), + this.matrixHeight]; + else this.areas[2]=[this.matrixWidth,0, + this.maxWidth-this.matrixWidth, + this.matrixHeight]; + // alpha bar + if(this.usealpha)this.areas[6]=[this.matrixWidth+ + Math.floor((this.maxWidth-this.matrixWidth)/2),0, + Math.floor((this.maxWidth-this.matrixWidth)/2), + this.matrixHeight]; + } + // swatch + this.areas[3]=[0,this.matrixHeight,this.swatchWidth, + this.maxHeight-this.matrixHeight] ; + // color value + this.areas[4]=[this.swatchWidth, + this.matrixHeight, + this.maxWidth-this.swatchWidth, + Math.floor((this.maxHeight-this.matrixHeight)/2)] ; + // reset link + this.areas[5]=[this.swatchWidth, + this.matrixHeight+Math.floor((this.maxHeight-this.matrixHeight)/2), + this.maxWidth-this.swatchWidth, + Math.floor((this.maxHeight-this.matrixHeight)/2)] ; +}, +confinetoarea:function(area,xy){ + var nxy=[xy[0],xy[1]]; + var dims=this.areadimensions(area); + if(nxy[0]dims[0]+dims[2]-1)nxy[0]=dims[0]+dims[2]-1; + if(nxy[1]dims[1]+dims[3]-1)nxy[1]=dims[1]+dims[3]-1; + return nxy; +}, +getarea:function(x,y){ + var unrounded=(Math.round(x)===x && Math.round(y)===y); + if(unrounded){ + var ret=this.areacache[y*this.maxWidth+x]; + if((ret!==null && typeof ret!=="undefined"))return ret; + } + for(var i=1;i=dims[0] && x=dims[1] && y=area[0] && x<(area[0]+area[2]) && + y>=area[1] && y<(area[1]+area[3])){ + var h=((x-area[0])*info.maxes[ci0])/(area[2]-1); + var s=((y-area[1])*info.maxes[ci1])/(area[3]-1); + if(info.reversed[ci0])h=info.maxes[ci0]-h; + if(info.reversed[ci1])s=info.maxes[ci1]-s; + ret[ci0]=h; + ret[ci1]=s; + return ret; + } + var lum; + area=this.areas[2];// side + if(x>=area[0] && x<(area[0]+area[2]) && + y>=area[1] && y<(area[1]+area[3])){ + lum=((y-area[1])*info.maxes[ci2]/(area[3]-1)); + if(info.reversed[ci2])lum=info.maxes[ci2]-lum; + ret[ci2]=lum; + return ret; + } + area=this.areadimensions(6) ;// alpha side + if(x>=area[0] && x<(area[0]+area[2]) && + y>=area[1] && y<(area[1]+area[3])){ + lum=((y-area[1])*255.0/(area[3]-1)); + ret[3]=255-lum; + return ret; + } + return ret; +} +}); + +//////////////// + + var _namedColorsDatalist=[]; +var namedColorsDatalist=function(){ + if(_namedColorsDatalist.length>0) + return _namedColorsDatalist; + colorToRgba.setUpNamedColors();var b=_namedColorsDatalist; + var datalist=document.createElement("datalist"); + for(var o in colorToRgba.namedColors){ + var v=colorToRgba.namedColors[o]; + if(typeof v==="string"){ + var op=document.createElement("option"); + op.value=o; datalist.appendChild(op); + if(o.indexOf("gray")>=0){ + var o2=o.replace("gray","grey"); + op=document.createElement("option"); + op.value=o2; datalist.appendChild(op); + } + } + } + var datalistid=""; var dlid=0; + do{ + datalistid="datalist-colorpicker"+dlid; dlid+=1; + }while(document.getElementById(datalistid)); + datalist.id=datalistid; + document.body.appendChild(datalist); + _namedColorsDatalist=datalistid; + return _namedColorsDatalist; +}; + + var _namedColorsDatalist2=null; + var namedColorsDatalist2=function(){ + if((_namedColorsDatalist2!==null && typeof _namedColorsDatalist2!=="undefined"))return _namedColorsDatalist2; + colorToRgba.setUpNamedColors();var colors=[]; + var i,d; + var exists=false; + for(var o in colorToRgba.namedColors){ + var v=colorToRgba.namedColors[o]; + if(typeof v==="string" && o.indexOf("grey")<0){ + exists=false; + var c=rootobj.HueLumSat.fromrgbcolor(colorToRgb(v)); + for(i=0;i0 && !(new RegExp("^(?:"+a+")$").test(inp.value))){ + window.alert("Please match the requested format: "+inp.title);inval=true; + } + if(inval){ + inp.focus(); + e=eventDetails(e); + e.preventDefault(); + return false; + } + } + return false; + }; + +var namedPattern=null; +var setPatternAndTitle=function(thisInput,usealpha){ + if(thisInput.getAttribute("rgbahex")!=="0")return; + if(thisInput.tagName.toLowerCase()==="input" && thisInput.type==="text"){ + var numberOrPercent="\\s*-?(\\d+|\\d+(\\.\\d+)?%)\\s*"; + var number="\\s*-?\\d+(\\.\\d+)?\\s*"; + var percent="\\s*-?\\d+(\\.\\d+)?%\\s*"; + var datalistid=("list" in thisInput) ? namedColorsDatalist() : ""; + thisInput.setAttribute("list",datalistid); + if(!namedPattern)namedPattern=colorToRgba.namedColorsPattern(); + var pattern=namedPattern; + var patternother="|#[A-Fa-f0-9]{6,6}|#[A-Fa-f0-9]{3,3}"+ + "|rgb\\("+numberOrPercent+","+numberOrPercent+","+numberOrPercent+"\\)"+ + "|hsl\\("+number+","+percent+","+percent+"\\)"; + if(usealpha){ + patternother+="|rgba\\("+numberOrPercent+","+numberOrPercent+","+numberOrPercent+","+number+"\\)"+ + "|hsla\\("+number+","+percent+","+percent+","+number+"\\)"; + } + if(thisInput.getAttribute("rgbahex")!=="0"){ + patternother+="|[A-Fa-f0-9]{8,8}"; + } + if(usealpha){ + patternother+="|[Tt][Rr][Aa][Nn][Ss][Pp][Aa][Rr][Ee][Nn][Tt]" + } + pattern+=patternother; + if(window.opera && supportsPattern()){ + // In Opera, use a faster pattern while focused, because Opera seems to verify the + // pattern for every suggestion + var patternstart="[Yy][Ee][Ll][Ll][Oo][Ww](?:[Gg][Rr][Ee][Ee][Nn])?|[A-Wa-w][A-Za-z]{1,19}"; + addListener(thisInput,"focus",function(){ this.setAttribute("pattern",patternstart+patternother) ; }); + addListener(thisInput,"blur",function(){ this.setAttribute("pattern",pattern) ; }); + } + var n=window.navigator; + var lang=(("userLanguage" in n) ? n.userLanguage : (("language" in n) ? n.language : "")); + if((lang==="en" || lang.indexOf("en-")===0)){ + if(usealpha){ + thisInput.setAttribute("title","Enter an RGB/RGBA color, color name, or HSL/HSLA color "+ + "[ ex.: #FF8020 or rgb(200,0,0) or rgba(200,0,0,0.5) or royalblue or hsl(200,100%,50%) or hsla(200,100%,50%,0.5) ]."); + } else { + thisInput.setAttribute("title","Enter an RGB color, color name, or HSL color [ "+ + "ex.: #FF8020 or rgb(200,0,0) or royalblue or hsl(200,100%,50%) ]."); + } + } + thisInput.setAttribute("pattern","("+pattern+")"); + if(!supportsPattern()){ + // Fallback for browsers without "pattern" support + if(thisInput.form){ + removeListener(thisInput.form,"submit",validatePattern); + addListener(thisInput.form,"submit",validatePattern); + } + } + } +}; + +//////////////// +var MyColorPicker=subclass(Object,{ +initialize:function(info,parent,startingvalue,usealpha){ + var w=window; + this.binder=new MethodBinder(this); + this.isoriginal=(info===rootobj.HueSatVal); + this.ishueslider=(info===rootobj.HueSatVal || info===rootobj.HueLumSat); + // TODO: check for data URL support + if(ieversionorbelow(6))this.isoriginal=false; + else if(!(navigator.userAgent.indexOf("MSIE ")>=0 || + navigator.userAgent.indexOf("like Mac OS X")>=0 || + navigator.userAgent.indexOf("like Gecko")>=0 || + navigator.userAgent.indexOf("Opera/")>=0 || + navigator.userAgent.indexOf("AppleWebKit/")>=0 || + navigator.userAgent.indexOf("Gecko/")>=0))this.isoriginal=false; + this.faster=(navigator.userAgent.indexOf("Gecko/")>=0); + this.faster=true; + this.pixelHeight=(this.faster ? 5 : 3); + this.pixelWidth=(this.faster ? 5 : 3); + this.p=parent; + this.origvalue=[startingvalue[0], + startingvalue[1], + startingvalue[2], + ((startingvalue[3]===null || typeof startingvalue[3]==="undefined") || !usealpha) ? 255 : startingvalue[3]] ; + this.info=info; + this.usealpha=usealpha; + this.colorspace=new ColorSpace(info,usealpha); + this.overalldims=this.colorspace.dimensions(); + this.current=this.colorspace.fromrgbcolor(this.origvalue); + var changed=false; + var pagex=0; + var pagey=0; + this.origPageX=getPageX(this.p); + this.origPageY=getPageY(this.p); + this.divs=[]; + this.divstyles=[]; + this.areacache=[]; + this.handleclick=false; + var pxheight=this.pixelHeight+"px"; + var pxwidth=this.pixelWidth+"px"; + this.p=parent; + this.padding=4; + this.pwidth=(this.padding*2)+(this.overalldims[0]*this.pixelWidth); + this.pheight=(this.padding*2)+(this.overalldims[1]*this.pixelHeight); + this.bgcolors=[]; + this.adjustPos(); + this.startx=(this.p.style.position==="absolute") ? 0 : getPageX(this.p); + this.starty=(this.p.style.position==="absolute") ? 0 : getPageY(this.p); + this.endx=this.startx+this.pwidth; + this.endy=this.starty+this.pheight; + this.p.style.border="1px solid black"; + this.p.style.zIndex=1000; + try { this.p.style.borderRadius=this.padding+"px" ; }catch(ex){} + this.p.style.backgroundColor="white"; + this.p.style.width=this.pwidth+"px"; + this.p.style.height=this.pheight+"px"; + var tbl=null; + tbl=document.createElement("div"); + tbl.style.margin=this.padding+"px"; + tbl.style.padding="0px"; + tbl.style.color="transparent"; + tbl.style.fontSize="1px"; + var ihtml=""; + var areadims=this.colorspace.areadimensions(1); + var area1pure=[areadims[0]+areadims[2]-1,areadims[1]]; + var y,x; + for(y=0;y"; + } + ihtml+=""; + } + ihtml+="
"; + this.p.appendChild(tbl); + // for performance reasons, get pageX and pageY before setting the HTML + this.pagex=getPageX(tbl); + this.pagey=getPageY(tbl); + tbl.innerHTML=ihtml; + tbl=tbl.getElementsByTagName("table")[0]; + var i=0; + for(y=0;y"; + } else { + this.colorbg.style.display="none"; + this.overlay.style.display="none"; + } + var dims=this.colorspace.areadimensions(4); + this.hexvalue.style.height=(dims[3]*this.pixelHeight)+"px"; + this.resetdiv=document.createElement("div"); + this.resetdiv.style.position="absolute"; + dims=this.colorspace.areadimensions(5); + this.resetdiv.style.height=(dims[3]*this.pixelHeight)+"px"; + this.resetlink=document.createElement("a"); + this.resetlink.setAttribute("href",doNothingURL); + this.resetlink.innerHTML="Reset"; + this.resetdiv.appendChild(this.resetlink); + this.p.appendChild(this.swatchbg); + this.p.appendChild(this.colorbg); + this.p.appendChild(this.hueslider); + this.p.appendChild(this.overlay); + this.p.appendChild(this.resetdiv); + this.p.appendChild(this.hexvalue); + this.cursors=[]; + for(i=0;i<3;i++){ + this.cursors[i]=document.createElement("div"); + this.cursors[i].style.position="absolute"; + this.cursors[i].style.cursor="crosshair"; + this.cursors[i].style.backgroundColor="transparent"; + this.cursors[i].style.padding="2px 2px 2px 2px"; + this.cursors[i].style.border=(i===0) ? "2px dotted black" : "2px solid black"; + this.cursors[i].style.fontSize="1px" ; // needed for quirks mode + this.p.appendChild(this.cursors[i]); + } + if(!this.usealpha)this.cursors[2].style.display="none"; + this.currentArea=0; + this.adjustPos(); + this.pagex=getPageX(tbl) ; // get page X again since table's x may have changed + this.startx=(this.p.style.position==="absolute") ? 0 : getPageX(this.p); + this.starty=(this.p.style.position==="absolute") ? 0 : getPageY(this.p); + this.endx=this.startx+this.pwidth; + this.endy=this.starty+this.pheight; + this.readjustpos(this.current); + this.focusedCursor=0; + this.setValueText(rgbToColorDisplay(this.origvalue)); + addListener(this.resetlink,"click",this.binder.bind(this.resetLinkClick)); + addListener(window,"resize",this.binder.bind(this.windowResize)); + addListener(document,"keydown",this.binder.bind(this.documentKeyDown)); + addListener(document,"mousedown",this.binder.bind(this.documentMouseDown)); + addListener(document,"mouseup",this.binder.bind(this.documentMouseUp)); + addListener(document,"mousemove",this.binder.bind(this.documentMouseMove)); + addListener(document,"touchstart",this.binder.bind(this.documentMouseDown)); + addListener(document,"touchend",this.binder.bind(this.documentMouseUp)); + addListener(document,"touchmove",this.binder.bind(this.documentMouseMove)); +}, +documentKeyDown:function(e){ + e=eventDetails(e); + var key=e.key(); + if(key===9){ // tab + this.focusedCursor++; + var m=("focus" in this.resetlink) ? 3 : 2; + var choices=((this.usealpha) ? m+1 : m); + this.focusedCursor%=choices; + for(var i=0;i<3;i++){ + this.cursors[i].style.borderStyle=(i===this.focusedCursor) ? "dotted" : "solid"; + } + if("focus" in this.resetlink){ + if(this.focusedCursor===choices-1)this.resetlink.focus(); + else this.resetlink.blur(); + } + e.preventDefault(); + return false; + } + var focusedArea=[1,2,6][this.focusedCursor]; + var curpos=this.colorspace.colortopos(this.current); + var dimsmatrix=this.colorspace.areadimensions(focusedArea) ;// matrix dimensions + var xy=[dimsmatrix[0]+curpos[0],dimsmatrix[1]+curpos[1]]; + if(focusedArea===2){ + xy=[dimsmatrix[0],dimsmatrix[1]+curpos[2]]; + } + if(focusedArea===6){ + xy=[dimsmatrix[0],dimsmatrix[1]+curpos[3]]; + } + if(key===37){ // left + xy[0]-=1; + } else if(key===38){ //up + xy[1]-=1; + } else if(key===39){ //right + xy[0]+=1; + } else if(key===40){ //down + xy[1]+=1; + } + if(key>=37 && key<=40){ + xy=this.colorspace.confinetoarea(focusedArea,xy); + var oldcurrentarea=this.currentArea; + this.respondToMouseDown(e,xy,focusedArea); + this.currentArea=oldcurrentarea; + return false; + } + return true; +}, +updateHueSlider:function(o,current){ + var areadims=this.colorspace.areadimensions(2); + var huecolors=[ + rgbToColorHtml(this.colorspace.getcolor(areadims[0],areadims[1],current)), + rgbToColorHtml(this.colorspace.getcolor(areadims[0],areadims[1]+Math.floor((areadims[3]-1)*1/6),current)), + rgbToColorHtml(this.colorspace.getcolor(areadims[0],areadims[1]+Math.floor((areadims[3]-1)*2/6),current)), + rgbToColorHtml(this.colorspace.getcolor(areadims[0],areadims[1]+Math.floor((areadims[3]-1)*3/6),current)), + rgbToColorHtml(this.colorspace.getcolor(areadims[0],areadims[1]+Math.floor((areadims[3]-1)*4/6),current)), + rgbToColorHtml(this.colorspace.getcolor(areadims[0],areadims[1]+Math.floor((areadims[3]-1)*5/6),current)), + rgbToColorHtml(this.colorspace.getcolor(areadims[0],areadims[1]+areadims[3]-1,current)) + ]; + return applyCssGradient(this.hueslider,huecolors); +}, +adjustPos:function(){ + if(this.p.style.position==="absolute"){ + var viewport=getViewport(); + var height=getHeight(this.p); + var clw=Math.min(viewport.width-getWidth(this.p),this.origPageX); + setPageX(this.p,clw); + if(this.origPageY+height>viewport.top+viewport.height){ + setPageY(this.p,this.origPageY-20-height); + } else { + setPageY(this.p,this.origPageY); + } + this.pagex=getPageX(this.tbl) ;// get page X again since table's x may have changed + this.pagey=getPageY(this.tbl) ;// get page Y again since table's y may have changed + }}, +windowResize:function(){ + this.adjustPos(); + if(this.p.style.position!=="absolute"){ + this.startx=getPageX(this.p); + this.starty=getPageY(this.p); + } else { + this.startx=0; + this.starty=0; + } + this.endx=this.startx+this.pwidth; + this.endy=this.starty+this.pheight; + this.readjustpos(this.current); +}, +setValueText:function(text){ + var size=100; + var hexarea=this.colorspace.areadimensions(4); + do { + this.hexvalue.style.fontSize=size+"%"; + this.hexvalue.innerHTML=text; + size-=10; + } while(size>=50 && (text.length>=8 && (getWidth(this.hexvalue)>(hexarea[2]*this.pixelWidth)))); +}, +isdifferentcolor:function(c1,c2){ + for(var i=0;i=getPageX(o) && cy>=getPageY(o) && + cx vmax) vmax=g; + if (b > vmax) vmax=b; + var vmin=r; + if (g255 ? 255 : lt)),0]; + } + var vd=(vmax-vmin); + var divisor=(lt<=127.5)?vadd:510-vadd; + var s=((vd*255)/divisor); + var h=0; + var hvd=vd/2; + if (r === vmax){ + h=(((vmax-b)*60)+hvd)/vd; + h-=(((vmax-g)*60)+hvd)/vd; + } else if (b === vmax){ + h=240+(((vmax-g)*60)+hvd)/vd ; + h-=(((vmax-r)*60)+hvd)/vd ; + } else { + h=120+(((vmax-r)*60)+hvd)/vd; + h-=(((vmax-b)*60)+hvd)/vd; + } + if(h<0||h>=360)h=(((h%360)+360)%360); + return [h,(lt<0 ? 0 : (lt>255 ? 255 : lt)),(s<0 ? 0 : (s>255 ? 255 : s))]; + }, + torgbcolor:function(hls){ + var hueval=hls[0]*1.0;//[0-360) + var lum=hls[1]*1.0;//[0-255] + var sat=hls[2]*1.0;//[0-255] + lum=(lum<0 ? 0 : (lum>255 ? 255 : lum)); + sat=(sat<0 ? 0 : (sat>255 ? 255 : sat)); + if(sat===0){ + return [lum,lum,lum]; + } + var b=0; + if (lum<=127.5){ + b=(lum*(255.0+sat))/255.0; + } else { + b=lum*sat; + b=b/255.0; + b=lum+sat-b; + } + var a=(lum*2)-b; + var r,g,bl; + if(hueval<0||hueval>=360)hueval=(((hueval%360)+360)%360); + var hue=hueval+120; + if(hue>=360)hue-=360; + if (hue<60) r=(a+(b-a)*hue/60); + else if (hue<180) r=b; + else if (hue<240) r=(a+(b-a)*(240-hue)/60); + else r=a; + hue=hueval; + if (hue<60) g=(a+(b-a)*hue/60); + else if (hue<180) g=b; + else if (hue<240) g=(a+(b-a)*(240-hue)/60); + else g=a; + hue=hueval-120; + if(hue<0)hue+=360; + if (hue<60) bl=(a+(b-a)*hue/60); + else if (hue<180) bl=b; + else if (hue<240) bl=(a+(b-a)*(240-hue)/60); + else bl=a; + return [(r<0 ? 0 : (r>255 ? 255 : r)), + (g<0 ? 0 : (g>255 ? 255 : g)), + (bl<0 ? 0 : (bl>255 ? 255 : bl))]; + }, + maxes:[360,255,255], // Hue, Lum, Sat + reversed:[true,false,false], // Hue, Lum, Sat + indexes:[1,2,0] // SatxLum, and Hue on the side +}; +rootobj.HueSatVal={ + fromrgbcolor:function(rgb){ + var r=rgb[0]/255.0; + var g=rgb[1]/255.0; + var b=rgb[2]/255.0; + var max=r; + if (g > max) max=g; + if (b > max) max=b; + var min=r; + if (g1 ? 1 : max)); + return [0, 0, v*255.0]; + } + var s=((max - min)/max)*255.0; + var h; + if (r === max){ + h=(g - b)/(max - min)*60; + } else if (g === max){ + h=(2+(b - r)/(max - min))*60; + } else { + h=(4+(r - g)/(max - min))*60; + } + if (h<0||h>=360)h=(((h%360)+360)%360); + v=max*255.0; + return [ + (h<0 ? 0 : (h>360 ? 360 : h)), + (s<0 ? 0 : (s>255 ? 255 : s)), + (v<0 ? 0 : (v>255 ? 255 : v))]; +}, +torgbcolor:function(hsv){ + var hue=hsv[0]; + var sat=hsv[1]; + var val=hsv[2]; + if(hue<0||hue>=360)hue=(((hue%360)+360)%360); + sat/=255.0; + val/=255.0; + var hi=Math.floor(hue/60); + var f=(hue/60)-hi; + var c=val*(1-sat); + var a=val*(1-sat*f); + var e=val*(1-sat*(1- f)); + var r, g, b; + if (hi ===0){ + r=val;g=e;b=c; + } else if (hi === 1){ + r=a;g=val;b=c; + } else if (hi === 2){ + r=c;g=val;b=e; + } else if (hi === 3){ + r=c;g=a;b=val; + } else if (hi === 4){ + r=e;g=c;b=val; + } else { + r=val;g=c;b=a; + } + r*=255;g*=255;b*=255; + return [ + (r<0 ? 0 : (r>255 ? 255 : r)), + (g<0 ? 0 : (g>255 ? 255 : g)), + (b<0 ? 0 : (b>255 ? 255 : b))]; +}, +maxes:[360,255,255], + reversed:[true,false,true], + indexes:[1,2,0] + }; +})(window,window.PDColorPicker={}); +///////////////////////////////////////// \ No newline at end of file diff --git a/js/lib/objlib.js b/js/lib/objlib.js new file mode 100644 index 00000000..d4a67c17 --- /dev/null +++ b/js/lib/objlib.js @@ -0,0 +1,763 @@ +/* This file is in the public domain. Peter O., 2012-2013. http://upokecenter.dreamhosters.com + Public domain dedication: http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Calculates the actual style of an HTML element. +// getComputedValue(elem,prop) +// elem - An HTML element. +// prop - A CSS property (such as 'background-color') +function getComputedValue(elem,prop){ // expects syntax like 'background-color' + "use strict"; +if(!elem)return null; + if(!("gcs" in getComputedValue) && document.defaultView && document.defaultView.getComputedStyle){ + // expects syntax like 'background-color' + // cache value, since function may be slow if called many times + getComputedValue.gcs=document.defaultView; + } else if(!("gcs" in getComputedValue) && window.getComputedStyle){ + // expects syntax like 'background-color' + getComputedValue.gcs=window; + } else if(!("gcs" in getComputedValue)){ + getComputedValue.gcs=null; + } + if("gcs" in getComputedValue && (typeof getComputedValue.gcs!=="undefined" && getComputedValue.gcs!==null)) + return getComputedValue.gcs.getComputedStyle(elem,null).getPropertyValue(prop); + if(elem){ + try { + if("currentStyle" in elem){ + // expects syntax like 'backgroundColor' + if(prop==="float"){ + prop=("cssFloat" in elem.currentStyle) ? "cssFloat" : "styleFloat"; + } else { + prop=prop.replace(/-([a-z])/g,function(a,b){return b.toUpperCase();}); + } + return elem.currentStyle[prop]; + } + } catch(ex){} + // Just get regular style + if("style" in elem){ + // expects syntax like 'backgroundColor' + if(prop==="float"){ + prop=("cssFloat" in elem.style) ? "cssFloat" : "styleFloat"; + } else { + prop=prop.replace(/-([a-z])/g,function(a,b){return b.toUpperCase();}); + } + return elem.style[prop]; + } + } + return(null); +} + +function getHeight(o) { + "use strict"; +if(!o)return 0; + if(document.layers)return ((o.height)?o.height:o.clip.height); + var x=( + (window.opera&&typeof o.style.pixelHeight!=="undefined")? + o.style.pixelHeight: + o.offsetHeight + ); + if(x===0){ + x=parseFloat(getComputedValue(o,"height")); + if(isNaN(x))x=0; + } + return x; +} +function setHeight(o,h) { + "use strict"; +if(!o)return 0;if(o.clip) + o.clip.height=h; + else if(window.opera && typeof o.style.pixelHeight !== "undefined") + o.style.pixelHeight=h; + else + o.style.height=h+"px"; +} +function getWidth(o) { + "use strict"; +if(!o)return 0; + if(document.layers)return ((o.width)?o.width:o.clip.width); + var x=(window.opera && typeof o.style.pixelWidth!=="undefined")? + o.style.pixelWidth: + o.offsetWidth; + if(x===0){ + x=parseFloat(getComputedValue(o,"width")); + if(isNaN(x))x=0; + } + return x; +} +function setWidth(o,w) { + "use strict"; +if(!o)return 0;if(o.clip) + o.clip.width=w; + else if(window.opera && typeof o.style.pixelWidth !== "undefined") + o.style.pixelWidth=w; + else + o.style.width=w+"px"; +} +function setPageX(e,x){ + "use strict"; +if(!e||isNaN(x))return; + var estyle=e.style; + if (estyle){ + if("left" in estyle)estyle.left=x+"px"; + else if("pixelLeft" in estyle)estyle.pixelLeft=x+"px"; + } else if(typeof e.left!=="undefined") { + e.left=x; + } +} + +function setPageY(e,x){ + "use strict"; +if(!e||isNaN(x))return; + var estyle=e.style; + if (estyle){ + if("top" in estyle)estyle.top=x+"px"; + else if("pixelTop" in estyle)estyle.pixelTop=x+"px"; + } else if(typeof e.top!=="undefined") { + e.top=x; + } +} + +function getPageX(o) { + "use strict"; +var x=0; + if(!o)return 0; + if(document.layers) + x=o.pageX; + else { + while(o!==null && typeof o!=="undefined") { + if(typeof o.offsetLeft!=="undefined") + x+=o.offsetLeft; + o=o.offsetParent; + } + } + return x; +} +function getPageY(o) { + "use strict"; +var x=0; + if(!o)return 0; + if(document.layers) + x=o.pageY; + else { + while(o!==null && typeof o!=="undefined") { + if(typeof o.offsetTop!=="undefined") + x+=o.offsetTop; + o=o.offsetParent; + } + } + return x; +} + +function addListener(o,e,f){ + "use strict"; +if(!o)return; + if(e==="mousewheel" && !("onmousewheel" in document)) + e="DOMMouseScroll"; + if(typeof o.addEventListener!=="undefined") + o.addEventListener(e,f,false); + else if(typeof o.attachEvent!=="undefined") + o.attachEvent("on"+e,addListener.bind(o,"on"+e,f)); +} +addListener.bind=function(o,e,f){ "use strict"; +return f;}; +function removeListener(o,e,f){ + "use strict"; +if(!o)return; + if(e==="mousewheel" && navigator.userAgent.indexOf("Gecko/")>=0) + e="DOMMouseScroll"; + try { + if(o.removeEventListener){ + o.removeEventListener(e,f,false); + return; + } + else if(o.detachEvent){ + o.detachEvent("on"+e,addListener.bind(o,"on"+e,f)); + return; + } + } catch(ex){ + return; + } +} + + + +// Gets the visible rectangle of a Web page +function getViewport(){ + "use strict"; + var ret={left:0, top:0, width:0, height:0}; + var d=document; + var db=document.body||null; + var dde=document.documentElement||null; + var win=("parentWindow" in d) ? d.parentWindow : window; + // exclude scrollbars, so check these items in order; + // check document.body, then document.documentElement + if(db && "clientWidth" in db){ + ret.width=db.clientWidth; + } else if(dde && "clientWidth" in dde){ + ret.width=dde.clientWidth; + } else if(db && "scrollWidth" in db){ + ret.width=db.scrollWidth; + } else if(dde && "scrollWidth" in dde){ + ret.width=dde.scrollWidth; + } else if(win && "innerWidth" in win){ + ret.width=win.innerWidth; + } else if(db && "offsetWidth" in db){ + ret.width=db.offsetWidth; + } else if(dde && "offsetWidth" in dde){ + ret.width=dde.offsetWidth; + } else if(d.width){ + ret.width=d.width; + } + // exclude scrollbars, so check these items in order; + // document.documentElement.clientHeight contains + // the best estimate of the viewport height + if(dde && "clientHeight" in dde){ + ret.height=dde.clientHeight; + } else if(db && "clientHeight" in db){ + // the following may overestimate the height + ret.height=db.clientHeight; + } else if(win && "innerHeight" in win){ + ret.height=win.innerHeight; + } else if(db && "offsetHeight" in db){ + ret.height=db.offsetHeight; + } else if(dde && "offsetHeight" in dde){ + ret.height=dde.offsetHeight; + } else if(db && "scrollHeight" in db){ + ret.height=db.scrollHeight; + } else if(dde && "scrollHeight" in dde){ + ret.height=dde.scrollHeight; + } else if(d.height){ + ret.height=d.height + } +if(dde&&dde.scrollTop) + ret.top=dde.scrollTop; + else if(db&&db.scrollTop) + ret.top=db.scrollTop; + else if(window.pageYOffset) + ret.top=window.pageYOffset; + else if(window.scrollY) + ret.top=window.scrollY; +if(dde&&dde.scrollLeft) + ret.left=dde.scrollLeft; + else if(db&&db.scrollLeft) + ret.left=db.scrollLeft; + else if(window.pageXOffset) + ret.left=window.pageXOffset; + else if(window.scrollX) + ret.left=window.scrollX; + return ret; +} + +// Allows the definition of classes. +// 'otherClass' specifies the class's superclass +// (top level classes should specify Object as the superclass). +// 'newMembers' identifies the class's member methods. +// The method 'initialize' in 'newMembers' specifies the object's +// constructor. Members with the same name in the subclass +// are overridden. +function subclass(otherClass,newMembers){ + "use strict"; +var func=function(){ + // call the initialize method (constructor) + this.initialize.apply(this,arguments); + }; + // Existing members + for(var i in otherClass.prototype){ + func.prototype[i]=otherClass.prototype[i]; + } + // Overridden or new members + for(var j in newMembers){ + func.prototype[j]=newMembers[j]; + } + // Add empty initialize if doesn't exist + if(!func.prototype.initialize){ + func.prototype.initialize=function(){}; + } + func.prototype.constructor=func; + return func; +} + +// A class that binds a method to a specific instance of +// an object. The bound method is unique to that instance +// and multiple calls to the 'bind' method passing the same +// method will return the same bound method each time. +// _obj_ refers to the object to bind methods to. Example: +// Bound methods and method binders hold a reference to +// the object. +/* +function MyClass(name){ + // Create a method binder for this instance + this.binder=new MethodBinder(this); + this.name=name; + this.intervalMethod=function(){ + // Use the name passed to this object + alert("Hello "+this.name); + } + // Display message in 3 seconds. Note that the + // intervalMethod is now bound to this instance + setTimeout(this.binder.bind(this.intervalMethod),3000); +} +*/ +function MethodBinder(obj){ + "use strict"; +this.methods={}; + this.obj=obj; + // Returns a method in which the method's arguments + // are called for a specific instance of an object. + this.bind=function(method){ + if(this.methods[method]){ + return this.methods[method]; + } else { + var thisObject=this.obj; + var m=function(){ + var args=[]; + for(var i=0;i0){ + readyCheck = setInterval(function(){ + if (document.readyState==="complete"||document.readyState==="loaded"){ + clearInterval(readyCheck); + readyCheck = null; + }},10); + } else if(("attachEvent" in document) && window===top){ + readyCheck = setInterval(function(){ + if(!isDomContent){ + try { document.body.doScroll("left"); isDomContent=true;} catch(ex){return; } + } + if (isDomContent){ + clearInterval(readyCheck); + readyCheck = null; + func(); + } + },10); + } else { + addListener(window,"load",func); + } +}; +})(window); + +//////////////////////////////// + +function hlsToRgb(hls) { + "use strict"; +var hueval=hls[0]*1.0;//[0-360) + var lum=hls[1]*1.0;//[0-255] + var sat=hls[2]*1.0;//[0-255] + lum=(lum<0 ? 0 : (lum>255 ? 255 : lum)); + sat=(sat<0 ? 0 : (sat>255 ? 255 : sat)); + if(sat===0){ + return [lum,lum,lum]; + } + var b=0; + if (lum<=127.5){ + b=(lum*(255.0+sat))/255.0; + } else { + b=lum*sat; + b=b/255.0; + b=lum+sat-b; + } + var a=(lum*2)-b; + var r,g,bl; + if(hueval<0||hueval>=360)hueval=(((hueval%360)+360)%360); + var hue=hueval+120; + if(hue>=360)hue-=360; + if (hue<60) r=(a+(b-a)*hue/60); + else if (hue<180) r=b; + else if (hue<240) r=(a+(b-a)*(240-hue)/60); + else r=a; + hue=hueval; + if (hue<60) g=(a+(b-a)*hue/60); + else if (hue<180) g=b; + else if (hue<240) g=(a+(b-a)*(240-hue)/60); + else g=a; + hue=hueval-120; + if(hue<0)hue+=360; + if (hue<60) bl=(a+(b-a)*hue/60); + else if (hue<180) bl=b; + else if (hue<240) bl=(a+(b-a)*(240-hue)/60); + else bl=a; + return [(r<0 ? 0 : (r>255 ? 255 : r)), + (g<0 ? 0 : (g>255 ? 255 : g)), + (bl<0 ? 0 : (bl>255 ? 255 : bl))]; +} + + +/* This file is in the public domain. Peter O., 2012. http://upokecenter.dreamhosters.com + Public domain dedication: http://creativecommons.org/publicdomain/zero/1.0/ */ +// Converts a representation of a color to its RGB form +// Returns a 4-item array containing the intensity of red, +// green, blue, and alpha (each from 0-255) +// Returns null if the color can't be converted +function colorToRgba(x){ + "use strict"; +var e=null; + if(!x)return null; + var b,c,r1,r2,r3,r4,rgb; + if((e=(/^#([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})$/.exec(x)))!==null){ + return [parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16),255]; + } else if((e=(/^rgb\(\s*([\+\-]?\d+(?:\.\d+)?%)\s*,\s*([\+\-]?\d+(?:\.\d+)?%)\s*,\s*([\+\-]?\d+(?:\.\d+)?%)\s*\)$/.exec(x)))!==null){ + r1=((c=parseFloat(e[1]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r2=((c=parseFloat(e[2]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r3=((c=parseFloat(e[3]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + return [r1,r2,r3,255]; + } else if((e=(/^rgb\(\s*([\+\-]?\d+)\s*,\s*([\+\-]?\d+)\s*,\s*([\+\-]?\d+)\s*\)$/.exec(x)))!==null){ + r1=((c=parseInt(e[1],10))<0 ? 0 : (c>255 ? 255 : c)); + r2=((c=parseInt(e[2],10))<0 ? 0 : (c>255 ? 255 : c)); + r3=((c=parseInt(e[3],10))<0 ? 0 : (c>255 ? 255 : c)); + return [r1,r2,r3,255]; + } else if((e=(/^rgba\(\s*([\+\-]?\d+(?:\.\d+)?%)\s*,\s*([\+\-]?\d+(?:\.\d+)?%)\s*,\s*([\+\-]?\d+(?:\.\d+)?%)\s*,\s*([\+\-]?\d+(?:\.\d+)?)\s*\)$/.exec(x)))!==null){ + r1=((c=parseFloat(e[1]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r2=((c=parseFloat(e[2]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r3=((c=parseFloat(e[3]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r4=((c=parseFloat(e[4]))<0 ? 0 : (c>1 ? 1 : c))*255; + return [r1,r2,r3,r4]; + } else if((e=(/^rgba\(\s*([\+\-]?\d+)\s*,\s*([\+\-]?\d+)\s*,\s*([\+\-]?\d+)\s*,\s*([\+\-]?\d+(?:\.\d+)?)\s*\)$/.exec(x)))!==null){ + r1=((c=parseInt(e[1],10))<0 ? 0 : (c>255 ? 255 : c)); + r2=((c=parseInt(e[2],10))<0 ? 0 : (c>255 ? 255 : c)); + r3=((c=parseInt(e[3],10))<0 ? 0 : (c>255 ? 255 : c)); + r4=((c=parseFloat(e[4]))<0 ? 0 : (c>1 ? 1 : c))*255; + return [r1,r2,r3,r4]; + } else if((e=(/^#([A-Fa-f0-9]{1})([A-Fa-f0-9]{1})([A-Fa-f0-9]{1})$/.exec(x)))!==null){ + var a=parseInt(e[1],16); b=parseInt(e[2],16); c=parseInt(e[3],16); + return [a+(a<<4),b+(b<<4),c+(c<<4),255]; + } else if((e=(/^hsl\(\s*([\+\-]?\d+(?:\.\d+)?)\s*,\s*([\+\-]?\d+(?:\.\d+)?)%\s*,\s*([\+\-]?\d+(?:\.\d+)?)%\s*\)$/.exec(x)))!==null){ + r1=parseFloat(e[1]); + if(r1<0||r1>=360)r1=(((r1%360)+360)%360); + r2=((c=parseFloat(e[3]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r3=((c=parseFloat(e[2]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + rgb=hlsToRgb([r1,r2,r3]); + return [rgb[0],rgb[1],rgb[2],255]; + } else if((e=(/^hsla\(\s*([\+\-]?\d+(?:\.\d+)?)\s*,\s*([\+\-]?\d+(?:\.\d+)?)%\s*,\s*([\+\-]?\d+(?:\.\d+)?)%\s*,\s*([\+\-]?\d+(?:\.\d+)?)\s*\)$/.exec(x)))!==null){ + r1=parseFloat(e[1]); + if(r1<0||r1>=360)r1=(((r1%360)+360)%360); + r2=((c=parseFloat(e[3]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r3=((c=parseFloat(e[2]))<0 ? 0 : (c>100 ? 100 : c))*255/100; + r4=((c=parseFloat(e[4]))<0 ? 0 : (c>1 ? 1 : c))*255; + rgb=hlsToRgb([r1,r2,r3]); + return [rgb[0],rgb[1],rgb[2],r4]; + } else { + colorToRgba.setUpNamedColors(); + x=x.toLowerCase(); + if(x.indexOf("grey")>=0)x=x.replace("grey","gray");// support "grey" variants + var ret=colorToRgba.namedColors[x]; + if(typeof ret==="string")return colorToRgba(ret); + if(x==="transparent")return [0,0,0,0]; + return null; + } +} + +colorToRgba.setUpNamedColors=function(){ + "use strict"; +if(!colorToRgba.namedColors){ + var nc=("aliceblue,f0f8ff,antiquewhite,faebd7,aqua,00ffff,aquamarine,7fffd4,azure,f0ffff,beige,f5f5dc,bisque,ffe4c4,black,000000,blanchedalmond,ffebcd,blue,0000ff,"+ +"blueviolet,8a2be2,brown,a52a2a,burlywood,deb887,cadetblue,5f9ea0,chartreuse,7fff00,chocolate,d2691e,coral,ff7f50,cornflowerblue,6495ed,cornsilk,fff8dc,"+ +"crimson,dc143c,cyan,00ffff,darkblue,00008b,darkcyan,008b8b,darkgoldenrod,b8860b,darkgray,a9a9a9,darkgreen,006400,darkkhaki,bdb76b,darkmagenta,8b008b,"+ +"darkolivegreen,556b2f,darkorange,ff8c00,darkorchid,9932cc,darkred,8b0000,darksalmon,e9967a,darkseagreen,8fbc8f,darkslateblue,483d8b,darkslategray,2f4f4f,"+ +"darkturquoise,00ced1,darkviolet,9400d3,deeppink,ff1493,deepskyblue,00bfff,dimgray,696969,dodgerblue,1e90ff,firebrick,b22222,floralwhite,fffaf0,forestgreen,"+ +"228b22,fuchsia,ff00ff,gainsboro,dcdcdc,ghostwhite,f8f8ff,gold,ffd700,goldenrod,daa520,gray,808080,green,008000,greenyellow,adff2f,honeydew,f0fff0,hotpink,"+ +"ff69b4,indianred,cd5c5c,indigo,4b0082,ivory,fffff0,khaki,f0e68c,lavender,e6e6fa,lavenderblush,fff0f5,lawngreen,7cfc00,lemonchiffon,fffacd,lightblue,add8e6,"+ +"lightcoral,f08080,lightcyan,e0ffff,lightgoldenrodyellow,fafad2,lightgray,d3d3d3,lightgreen,90ee90,lightpink,ffb6c1,lightsalmon,ffa07a,lightseagreen,20b2aa,"+ +"lightskyblue,87cefa,lightslategray,778899,lightsteelblue,b0c4de,lightyellow,ffffe0,lime,00ff00,limegreen,32cd32,linen,faf0e6,magenta,ff00ff,maroon,800000,"+ +"mediumaquamarine,66cdaa,mediumblue,0000cd,mediumorchid,ba55d3,mediumpurple,9370d8,mediumseagreen,3cb371,mediumslateblue,7b68ee,mediumspringgreen,"+ +"00fa9a,mediumturquoise,48d1cc,mediumvioletred,c71585,midnightblue,191970,mintcream,f5fffa,mistyrose,ffe4e1,moccasin,ffe4b5,navajowhite,ffdead,navy,"+ +"000080,oldlace,fdf5e6,olive,808000,olivedrab,6b8e23,orange,ffa500,orangered,ff4500,orchid,da70d6,palegoldenrod,eee8aa,palegreen,98fb98,paleturquoise,"+ +"afeeee,palevioletred,d87093,papayawhip,ffefd5,peachpuff,ffdab9,peru,cd853f,pink,ffc0cb,plum,dda0dd,powderblue,b0e0e6,purple,800080,red,ff0000,rosybrown,"+ +"bc8f8f,royalblue,4169e1,saddlebrown,8b4513,salmon,fa8072,sandybrown,f4a460,seagreen,2e8b57,seashell,fff5ee,sienna,a0522d,silver,c0c0c0,skyblue,87ceeb,"+ +"slateblue,6a5acd,slategray,708090,snow,fffafa,springgreen,00ff7f,steelblue,4682b4,tan,d2b48c,teal,008080,thistle,d8bfd8,tomato,ff6347,turquoise,40e0d0,violet,"+ +"ee82ee,wheat,f5deb3,white,ffffff,whitesmoke,f5f5f5,yellow,ffff00,yellowgreen,9acd32").split(","); + colorToRgba.namedColors={}; + for(var i=0;i3 && (x[3]===255 || (x[3]===null || typeof x[3]==="undefined"))) || x.length===3){ + return "rgb("+Math.round(x[0])+", "+Math.round(x[1])+", "+Math.round(x[2])+")"; + } else { + var prec=Math.round((x[3]/255.0) * Math.pow(10, 2)) / Math.pow(10, 2); + return "rgba("+Math.round(x[0])+", "+Math.round(x[1])+", "+Math.round(x[2])+", "+prec+")" ; + } +} + +function colorRgbaToRgba(value){ + "use strict"; +var e; +if((e=(/^([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})$/.exec(value)))!==null){ + return [parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16),parseInt(e[4],16)]; + } + return colorToRgba(value); +} + +function colorArgbToRgba(value){ + "use strict"; +var e; +if((e=(/^([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})([A-Fa-f0-9]{2})$/.exec(value)))!==null){ + return [parseInt(e[2],16),parseInt(e[3],16),parseInt(e[4],16),parseInt(e[1],16)]; + } + return colorToRgba(value); +} + + +function rgbToColorRgba(r,g,b,a){ + "use strict"; +if(!rgbToColorRgba.table){ + rgbToColorRgba.table=[]; + for(var i=0;i<256;i++){ + var y=i.toString(16).toLowerCase(); + rgbToColorRgba.table[i]=(y.length===1) ? "0"+y : y; + } + } + var c; + var tbl=rgbToColorRgba.table; + if((r!==null && typeof r!=="undefined") && (g===null || typeof g==="undefined") && (b===null || typeof b==="undefined")){ + a=((r[3]===null || typeof r[3]==="undefined")) ? 255 : r[3]; + return tbl[((c=Math.round(r[0]))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(r[1]))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(r[2]))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(a))<0 ? 0 : (c>255 ? 255 : c))]; + } else { + if((a===null || typeof a==="undefined"))a=255; + return tbl[((c=Math.round(r))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(g))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(b))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(a))<0 ? 0 : (c>255 ? 255 : c))]; + } +} + +function rgbToColorArgb(r,g,b,a){ + "use strict"; +if((r!==null && typeof r!=="undefined") && (g===null || typeof g==="undefined") && (b===null || typeof b==="undefined")){ + return rgbToColorRgba(r[3],r[0],r[1],r[2]); + } else { + return rgbToColorRgba(a,r,g,b); + } +} + +function rgbToColorHtml(r,g,b){ + "use strict"; +if(!rgbToColorRgba.table){ + rgbToColorRgba.table=[]; + for(var i=0;i<256;i++){ + var y=i.toString(16).toLowerCase(); + rgbToColorRgba.table[i]=(y.length===1) ? "0"+y : y; + } + } + var c; + var tbl=rgbToColorRgba.table; + if((r!==null && typeof r!=="undefined") && (g===null || typeof g==="undefined") && (b===null || typeof b==="undefined")){ + return "#"+tbl[((c=Math.round(r[0]))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(r[1]))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(r[2]))<0 ? 0 : (c>255 ? 255 : c))]; + } else { + return "#"+tbl[((c=Math.round(r))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(g))<0 ? 0 : (c>255 ? 255 : c))]+ + tbl[((c=Math.round(b))<0 ? 0 : (c>255 ? 255 : c))]; + } +} + +function isRgbDark(rgb){ + "use strict"; +return((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000<=127.5; +} + + + +colorToRgba.namedColorsPattern=function(){ + "use strict"; +colorToRgba.setUpNamedColors();var b=[]; + for(var o in colorToRgba.namedColors){ + var v=colorToRgba.namedColors[o]; + if(typeof v==="string"){ + b[b.length]=o;if(o.indexOf("gray")>=0)b[b.length]=o.replace("gray","grey"); + } + } + // for IE10 compatibility, sort by descending length + b.sort(function(x,y){ return (y.length-x.length);}); + var ret=""; + for(var i=0;i0)ret+="|"; + for(var j=0;j=0)x=x.replace("grey","gray");// support "grey" variants + var ret=colorToRgba.namedColors[x]; + if(typeof ret==="string")return colorToRgba(ret); + for(var i=(x.charAt(0)==="#") ? 1 : 0;i=0x30 && c<=0x39)hex=c-0x30; + if(c>=0x61 && c<=0x66)hex=c-0x61+10; + arr[arr.length]=hex; + } + var sublength=Math.floor((arr.length+2)/3); + while(arr.length2){ + if(arr[offset]===0 && arr[sublength+offset]===0 && + arr[sublength*2+offset]===0){ + currlength--; offset++; + } else break; + } + return [ + arr[offset]*16+arr[offset+1], + arr[sublength+offset]*16+arr[sublength+offset+1], + arr[sublength*2+offset]*16+arr[sublength*2+offset+1], + 255 + ]; +} + +function rgbToColorDisplay(rgb){ + "use strict"; +if(rgb.length===3 || (rgb.length>3 && ((rgb[3]===null || typeof rgb[3]==="undefined") || rgb[3]===255))){ + return rgbToColorHtml(rgb); + } else { + return rgbToColor(rgb).replace(/\s+/g,""); + } +} \ No newline at end of file diff --git a/piskel-script-list.js b/piskel-script-list.js index a35ebdcf..bc9f4b71 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -19,7 +19,9 @@ exports.scripts = [ "js/utils/Serializer.js", "js/utils/Template.js", "js/utils/UserSettings.js", - "js/lib/jsColor_1_4_0/jscolor.js", + + "js/lib/objlib.js", + "js/lib/cbox.js", // Application libraries--> "js/rendering/DrawingLoop.js",