/**
* ColorPicker
* https://github.com/foo123/ColorPicker
* @version 2.2.2
*
* adapted from:
* http://www.eyecon.ro/colorpicker/
* Color Picker by Stefan Petre www.eyecon.ro (MIT and GPL)
**/
!function(e,t){"use strict";"object"==typeof exports?module.exports=t():"function"==typeof define&&define.amd?define(function(e){return t()}):e.ColorPicker=t()}("undefined"!=typeof self?self:this,function(e){"use strict";var o=Object.prototype.hasOwnProperty,j="getAttribute",t=Object.prototype.toString,z=Math.min,B=Math.max,M=Math.round,a=Math.floor,c=/^\s+|\s+$/g,n=String.prototype.trim?function(e){return e.trim()}:function(e){return e.replace(c,"")},r=/\s*,\s*/g,W=0;function u(e){return"[object Array]"===t.call(e)}function Y(e){return document.getElementById(e)}function X(e,t){return e.classList?e.classList.contains(t):-1!==(" "+e.className+" ").indexOf(" "+t+" ")}function G(e,t){X(e,t)||(e.classList?e.classList.add(t):e.className=""===e.className?t:e.className+" "+t)}function R(e,t){e.classList?e.classList.remove(t):e.className=n((" "+e.className+" ").replace(" "+t+" "," "))}function $(e,t,c){e.attachEvent?e.attachEvent("on"+t,c):e.addEventListener(t,c,!1)}function F(e,t,c){e.detachEvent?e.detachEvent("on"+t,c):e.removeEventListener(t,c,!1)}function i(e,t,c){var o;document.createEvent?((o=document.createEvent("HTMLEvents")).initEvent(t,!0,!1),null!=c&&(o.data=c),e.dispatchEvent(o)):document.createEventObject&&(o=document.createEventObject(),null!=c&&(o.data=c),e.fireEvent("on"+t,o))}function V(o,e,n,t){function c(e){for(var t=!1,c=e.target||e.srcElement;c&&!(t=X(c,o));)c=c.parentElement;t&&n.call(c,e)}return $(t||document,e,c),c}function l(e){var t=0,c=0,o=e[0],n=e[1],r=e[2],i=z(o,n,r),e=B(o,n,r),i=e-i,l=e,t=0!=(c=0!=e?255*i/e:0)?o===e?(n-r)/i:n===e?2+(r-o)/i:4+(o-n)/i:-1;return(t*=60)<0&&(t+=360),c*=100/255,l*=100/255,[M(t),M(c),M(l)]}function s(e){var t,c,o,n=M(e[0]),r=M(255*e[1]/100),i=M(255*e[2]/100);return 0===r?t=c=o=i:(i=n%60*((e=i)-(r=(255-r)*i/255))/60,360==n&&(n=0),n<60?(t=e,c=(o=r)+i):n<120?(o=r,t=(c=e)-i):n<180?(c=e,o=(t=r)+i):n<240?(t=r,c=(o=e)-i):n<300?(o=e,t=(c=r)+i):o=n<360?(c=r,(t=e)-i):c=t=0),[M(t),M(c),M(o)]}function d(e){e=[e[0].toString(16),e[1].toString(16),e[2].toString(16)];return 1===e[0].length&&(e[0]="0"+e[0]),1===e[1].length&&(e[1]="0"+e[1]),1===e[2].length&&(e[2]="0"+e[2]),e[0]+e[1]+e[2]}function q(e){var t=6-(e="#"===e.charAt(0)?e.slice(1):e).length;return 0<t&&(e=3==t?e.charAt(0)+e.charAt(0)+e.charAt(1)+e.charAt(1)+e.charAt(2)+e.charAt(2):new Array(1+t).join("0")+e),e}function p(e,t){e.substr&&(e=e.slice(t?5:4,-1).split(r).map(n));t=t?Q.opacity(e[3]):null;return[Q.hsb[0](e[0]),Q.hsb[1](e[1]),Q.hsb[2](e[2]),t]}function h(e,t){e.substr&&(e=e.slice(t?5:4,-1).split(r).map(n));t=t?Q.opacity(e[3]):null;return[Q.rgb[0](e[0]),Q.rgb[1](e[1]),Q.rgb[2](e[2]),t]}function J(e){return parseInt(e,10)||0}function f(t,c,o){return"function"==typeof o?function(e){return e=o(e),c<e?c:e<t?t:e}:function(e){return c<e?c:e<t?t:e}}function K(e){var t=e.getBoundingClientRect(),c=document.body,o=window,n=c.clientTop||0,r=c.clientLeft||0,i=o.pageYOffset||c.scrollTop,c=o.pageXOffset||c.scrollLeft;return{top:t.top+i-n,left:t.left+c-r,width:e.offsetWidth,height:e.offsetHeight}}var v,Q={opacity:function(e){return(e=a(100*(parseFloat(e,10)||0))/100)<0?0:1<e?1:e},hsb:[f(0,360,J),f(0,100,J),f(0,100,J)],rgb:[f(0,255,J),f(0,255,J),f(0,255,J)]},m={hex:(v=/^[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]$/i,function(e){return v.test(e)})};function U(e,t,c){var o,n,r,i,l=!0;if(Q[t])if(u(o=Q[t]))for(r=0,i=o.length;r<i;r++)c[r]=o[r](c[r]);else c=o(c);if(m[t]){if(u(n=m[t])){for(r=0,i=n.length;r<i;r++)if(!n[r](c[r])){l=!1;break}}else n(c)||(l=!1);l&&(e[t]=c)}return l}function Z(e,t,c){var o,n=!1;return null!=c&&(e.opacity=Q.opacity(c),n=!0),t&&(u(t)?(3<t.length&&(c=t[3],t=t.slice(0,3)),U(e,"rgb",t)&&(null!=c&&(e.opacity=Q.opacity(c)),te(e,"rgb"),n=!0)):t.substr&&("rgba"===t.slice(0,4)?(o=h(t,!0),e.rgb=[o[0],o[1],o[2]],e.opacity=Q.opacity(o[3]),te(e,"rgb"),n=!0):"rgb"===t.slice(0,3)?(o=h(t),e.rgb=[o[0],o[1],o[2]],te(e,"rgb"),n=!0):"hsla"===t.slice(0,4)?(o=p(t,!0),e.hsb=[o[0],o[1],o[2]],e.opacity=Q.opacity(o[3]),te(e,"hsb"),n=!0):"hsl"===t.slice(0,3)?(o=p(t),e.hsb=[o[0],o[1],o[2]],te(e,"hsb"),n=!0):U(e,"hex",q(t))&&(te(e,"hex"),n=!0))),n}function ee(e,t){return"rgba"===t?"rgba("+e.rgb[0]+","+e.rgb[1]+","+e.rgb[2]+","+e.opacity+")":"rgb"===t?"rgb("+e.rgb[0]+","+e.rgb[1]+","+e.rgb[2]+")":"hsla"===t?"hsla("+e.hsb[0]+","+e.hsb[1]+"%,"+e.hsb[2]+"%,"+e.opacity+")":"hsl"===t?"hsl("+e.hsb[0]+","+e.hsb[1]+"%,"+e.hsb[2]+"%)":"#"+e.hex}function te(e,t){"hsb"===t?(e.rgb=s(e.hsb),e.hex=d(e.rgb)):"rgb"===t?(e.hsb=l(e.rgb),e.hex=d(e.rgb)):"hex"===t&&(e.rgb=(t=e.hex,[(t=parseInt(t,16))>>16&255,t>>8&255,255&t]),e.hsb=l(e.rgb))}function ce(e,t,c){var o=e.rgb,n=e.hsb,r=e.opacity,i=e.hex,l="rgba("+o[0]+","+o[1]+","+o[2]+","+r+")",e="rgb("+s([n[0],100,100]).join(",")+")";t.opacity.value=a(100*r),t.indic_opac.style.left=String(z(150,B(0,150-150*r)))+"px",t.hsb[0].value=n[0],t.hsb[1].value=n[1],t.hsb[2].value=n[2],t.rgb[0].value=o[0],t.rgb[1].value=o[1],t.rgb[2].value=o[2],t.hex.value=i,t.hue.style.backgroundColor=e,t.indic_sb.style.top=String(150*(100-n[2])/100)+"px",t.indic_sb.style.left=String(150*n[1]/100)+"px",t.indic_hue.style.top=String(148-148*n[0]/360)+"px",t.color_new.style.backgroundColor=l,c&&(t.color_current.style.backgroundColor=l)}function oe(e,t,c,o,n){var r=t===c;t&&(t.selectedColor=o,t.style.backgroundColor=o,r&&(c.value=o),n&&i(t,n),r&&"change"!==n&&i(c,"change",{firedBy:e})),c&&!r&&(c.value=o,i(c,"change",{firedBy:e}))}function b(){}function ne(e){return function(e,t){for(var c in t)o.call(t,c)&&(e[c]=t[c]);return e}({input:null,selector:null,format:"rgba",color:"ffffff",opacity:1,changeEvent:"colorchange",bindEvent:"click",onSelect:b,onBeforeShow:b,onShow:b,onHide:b,livePreview:!0},e||{})}function re(r,i){var e,t,l,c,a,u,o,n,s,d,p,h,f,v,m,b,g,_,k,y,x,w,E,T=this,S=0,C=0,D=0,H=0,L=null,N=null,O=null,A=[];if(!(T instanceof re))return new re(r,i);_=function(e){if(27===e.keyCode)return g(!0)},g=function e(t){var c=!0===t||(t.target||t.srcElement);X(l,"colorpicker-visible")&&(!0===c||c!==r&&!function(e,t,c){if(t){if(e===t)return 1;if(e.contains)return e.contains(t);if(e.compareDocumentPosition)return 16&e.compareDocumentPosition(t);for(var o=t.parentNode;o;){if(o===e)return 1;if(o===c)break;o=o.parentNode}}}(l,c,l))?(R(l,"colorpicker-visible"),F(document,"keyup",_),F(document,"mousedown",e),F(document,"touchstart",e),N&&r!==N&&(F(N,"blur",e),N.blur()),i.onHide(T)):X(l,"colorpicker-visible")&&("mousedown"!==t.type&&"touchstart"!==t.type||!N||r===N||F(N,"blur",e))},b=function(e){var t,c,o,n;return X(l,"colorpicker-visible")||(i.onBeforeShow(T),t=K(e.target||e.srcElement),n="CSS1Compat"==document.compatMode,c={l:window.pageXOffset||(n?document.documentElement:document.body).scrollLeft||0,t:window.pageYOffset||(n?document.documentElement:document.body).scrollTop||0,w:window.innerWidth||(n?document.documentElement:document.body).clientWidth,h:window.innerHeight||(n?document.documentElement:document.body).clientHeight},o=t.top+t.height,n=t.left,c.t+c.h<o+re.HEIGHT&&(o-=t.height+re.HEIGHT),o<c.t&&(o=c.t),c.l+c.w<n+re.WIDTH&&(n-=re.WIDTH),n<c.l&&(n=c.l),l.style.left=String(n)+"px",l.style.top=String(o)+"px",G(l,"colorpicker-visible"),$(document,"keyup",_),$(document,"mousedown",g),$(document,"touchstart",g),N&&r!==N&&"focus"===e.type&&$(N,"blur",g),i.onShow(T)),!1},c=function(e){var t,c,o,n;S||(e.preventDefault(),c=(t=(e.target||e.srcElement).parentNode).children[0],n="opacity"===(o=t[j]("data-field"))?o:o.slice(0,3),O={el:t,field:c,type:o,key:n,index:"opacity"===o?null:J(o.slice(-1)),max:"opacity"===o?100:"hsb.0"===o?360:"hsb"===n?100:255,val:J(c.value),y:(e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e).pageY},G(t,"colorpicker_slider"),c.focus(),S=1,$(document,"mouseup",u),$(document,"mousemove",a),$(document,"touchend",u),$(document,"touchcancel",u),$(document,"touchmove",a))},a=function(e){e.preventDefault();var t=O.key,c=O.index,e=(e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e).pageY;return"opacity"===t?k[t]=Q[t](B(0,z(O.max,J(O.val+e-O.y)))/100):k[t][c]=B(0,z(O.max,J(O.val+e-O.y))),i.livePreview&&(te(k,t),ce(k,y)),!1},u=function(e){return e.preventDefault(),F(document,"mouseup",u),F(document,"mousemove",a),F(document,"touchend",u),F(document,"touchcancel",u),F(document,"touchmove",a),te(k,O.key),ce(k,y),R(O.el,"colorpicker_slider"),O.field.focus(),S=0,O=null,!1},o=function(e){C||(e.preventDefault(),e=e.target||e.srcElement,O={y:K(e).top},C=1,$(document,"mouseup",s),$(document,"mousemove",n),$(document,"touchend",s),$(document,"touchcancel",s),$(document,"touchmove",n))},n=function(e){e.preventDefault();e=(e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e).pageY;return k.hsb[0]=M(360*(148-B(0,z(148,e-O.y)))/148),i.livePreview&&(te(k,"hsb"),ce(k,y)),!1},s=function(e){return e.preventDefault(),F(document,"mouseup",s),F(document,"mousemove",n),F(document,"touchend",s),F(document,"touchcancel",s),F(document,"touchmove",n),te(k,"hsb"),ce(k,y),C=0,O=null,!1},d=function(e){D||(e.preventDefault(),e=e.target||e.srcElement,O={x:K(e).left},D=1,$(document,"mouseup",h),$(document,"mousemove",p),$(document,"touchend",h),$(document,"touchcancel",h),$(document,"touchmove",p))},p=function(e){e.preventDefault();e=(e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e).pageX;return k.opacity=Q.opacity((150-B(0,z(150,e-O.x)))/150),i.livePreview&&ce(k,y),!1},h=function(e){return e.preventDefault(),F(document,"mouseup",h),F(document,"mousemove",p),F(document,"touchend",h),F(document,"touchcancel",h),F(document,"touchmove",p),te(k,"opacity"),ce(k,y),D=0,O=null,!1},f=function(e){H||(e.preventDefault(),e=e.target||e.srcElement,O=K(e),H=1,$(document,"mouseup",m),$(document,"mousemove",v),$(document,"touchend",m),$(document,"touchcancel",m),$(document,"touchmove",v))},v=function(e){e.preventDefault();var t=(e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e).pageX,e=(e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:e).pageY;return k.hsb[1]=M(100*B(0,z(150,t-O.left))/150),k.hsb[2]=M(100*(150-B(0,z(150,e-O.top)))/150),i.livePreview&&(te(k,"hsb"),ce(k,y)),!1},m=function(e){return e.preventDefault(),F(document,"mouseup",m),F(document,"mousemove",v),F(document,"touchend",m),F(document,"touchcancel",m),F(document,"touchmove",v),te(k,"hsb"),ce(k,y),H=0,O=null,!1},E=function(e){!N||e.data&&T===e.data.firedBy||!Z(k,N.value)||(ce(k,y,!0),oe(T,L,null,ee(k,x),w))},T.dispose=function(){T.ui=null,X(l,"colorpicker-flat")||F(r,i.bindEvent,b);for(var e=0;e<A.length;e++)F(A[e].el,A[e].event,A[e].handler);A=[],l.parentNode&&l.parentNode.removeChild(l),N&&r!==N&&(F(N,"focus",b),F(N,"blur",g),F(N,"change",E))},T.setColor=function(e,t){Z(k,e,t)&&(ce(k,y,!0),oe(T,L,N,ee(k,x),!1))},T.getColor=function(e){return ee(k,e||x)},T.value=function(e,t){if(!arguments.length)return ee(k,x);Z(k,e,t)&&(ce(k,y,!0),oe(T,L,N,ee(k,x),!1))},i=ne(i),x=r[j]("data-color-format")||i.format||"rgba",w=r[j]("data-color-change")||i.changeEvent,L=r[j]("data-color-selector")?Y(r[j]("data-color-selector")):i.selector||(X(r,"colorpicker-selector")?r:null),N=r[j]("data-color-input")?Y(r[j]("data-color-input")):i.input||("input"===(r.tagName||"").toLowerCase()?r:null),t=i.id||"colorpicker_ui_"+ ++W;var I,P=document.createElement("div");P.innerHTML='<div id="'+(I=t)+'" class="colorpicker"> <div id="'+I+'_satur_bright" class="colorpicker_satur_bright"><div id="'+I+'_satur_bright_indic"></div></div> <div id="'+I+'_hue" class="colorpicker_hue"><div id="'+I+'_hue_indic" class="colorpicker_indic"></div></div> <div id="'+I+'_opacitys" class="colorpicker_opacity"><div id="'+I+'_opacity_indic" class="colorpicker_indic"></div><div class="colorpicker_opacity_transparent"></div></div> <div class="colorpicker_new_color colorpicker_transparent"> <button id="'+I+'_new_color" class="colorpicker_color colorpicker_save"></button> </div> <div class="colorpicker_current_color colorpicker_transparent"> <button id="'+I+'_current_color" class="colorpicker_color colorpicker_restore"></button> </div> <div class="colorpicker_field" data-field="opacity"> <input id="'+I+'_opacity" class="colorpicker_field_input" type="text" maxlength="3" size="3" value=""/><span class="colorpicker_increment"></span> <div class="colorpicker_field_back"></div> </div> <div class="colorpicker_field" data-field="hex"> <input id="'+I+'_hex" class="colorpicker_field_input" type="text" maxlength="6" size="6" value=""/> <div class="colorpicker_field_back"></div> </div> <div class="colorpicker_field" data-field="rgb.0"> <input id="'+I+'_rgb_0" class="colorpicker_field_input" type="text" maxlength="3" size="3" value=""/><span class="colorpicker_increment"></span> <div class="colorpicker_field_back"></div> </div> <div class="colorpicker_field" data-field="rgb.1"> <input id="'+I+'_rgb_1" class="colorpicker_field_input" type="text" maxlength="3" size="3" value=""/><span class="colorpicker_increment"></span> <div class="colorpicker_field_back"></div> </div> <div class="colorpicker_field" data-field="rgb.2"> <input id="'+I+'_rgb_2" class="colorpicker_field_input" type="text" maxlength="3" size="3" value=""/><span class="colorpicker_increment"></span> <div class="colorpicker_field_back"></div> </div> <div class="colorpicker_field" data-field="hsb.0"> <input id="'+I+'_hsb_0" class="colorpicker_field_input" type="text" maxlength="3" size="3" value=""/><span class="colorpicker_increment"></span> <div class="colorpicker_field_back"></div> </div> <div class="colorpicker_field" data-field="hsb.1"> <input id="'+I+'_hsb_1" class="colorpicker_field_input" type="text" maxlength="3" size="3" value=""/><span class="colorpicker_increment"></span> <div class="colorpicker_field_back"></div> </div> <div class="colorpicker_field" data-field="hsb.2"> <input id="'+I+'_hsb_2" class="colorpicker_field_input" type="text" maxlength="3" size="3" value=""/><span class="colorpicker_increment"></span> <div class="colorpicker_field_back"></div> </div> <button id="'+I+'_submit" class="colorpicker_submit colorpicker_save"></button> </div>',P.style.display="none",document.body.appendChild(P),l=Y(t),k={opacity:1,hsb:[0,0,0],rgb:[0,0,0],hex:"000000"},(y={opacity:Y(t+"_opacity"),hsb:[Y(t+"_hsb_0"),Y(t+"_hsb_1"),Y(t+"_hsb_2")],rgb:[Y(t+"_rgb_0"),Y(t+"_rgb_1"),Y(t+"_rgb_2")],hex:Y(t+"_hex"),hue:Y(t+"_satur_bright"),indic_opac:Y(t+"_opacity_indic"),indic_hue:Y(t+"_hue_indic"),indic_sb:Y(t+"_satur_bright_indic"),color_new:Y(t+"_new_color"),color_current:Y(t+"_current_color")}).indic_opac.style.left="0px",y.indic_hue.style.top="0px",y.indic_sb.style.left="0px",y.indic_sb.style.top="0px",A.push({el:l,event:"touchstart",handler:V("colorpicker_satur_bright","touchstart",f,l)}),A.push({el:l,event:"touchstart",handler:V("colorpicker_hue","touchstart",o,l)}),A.push({el:l,event:"touchstart",handler:V("colorpicker_opacity","touchstart",d,l)}),A.push({el:l,event:"touchstart",handler:V("colorpicker_increment","touchstart",c,l)}),A.push({el:l,event:"mousedown",handler:V("colorpicker_satur_bright","mousedown",f,l)}),A.push({el:l,event:"mousedown",handler:V("colorpicker_hue","mousedown",o,l)}),A.push({el:l,event:"mousedown",handler:V("colorpicker_opacity","mousedown",d,l)}),A.push({el:l,event:"mousedown",handler:V("colorpicker_increment","mousedown",c,l)}),A.push({el:l,event:"change",handler:V("colorpicker_field_input","change",function(){var e=this.parentNode[j]("data-field"),t="opacity"===e||"hex"===e?e:e.slice(0,3),e="opacity"===e||"hex"===e?null:J(e.slice(-1));"opacity"===t?k[t]=Q[t](J(this.value)/100):"hex"===t?U(k,"hex",q(this.value)):k[t][e]=Q[t][e](this.value),i.livePreview&&(te(k,t),ce(k,y))},l)}),A.push({el:l,event:"click",handler:V("colorpicker_save","click",function(){e=k.rgb.slice().concat(k.opacity),ce(k,y,!0),oe(T,L,N,ee(k,x),w),i.onSelect(T),g&&g(!0)},l)}),A.push({el:l,event:"click",handler:V("colorpicker_restore","click",function(){k.rgb=e.slice(0,3),k.opacity=e[3],te(k,"rgb"),ce(k,y)},l)}),T.ui=l,Z(k,r[j]("data-color")||i.color,r[j]("data-opacity")||i.opacity),e=k.rgb.slice().concat(k.opacity),ce(k,y,!0),X(r,"colorpicker-flat")?(G(l,"colorpicker-flat"),l.style.display="block",r.appendChild(l)):(document.body.appendChild(l),$(r,i.bindEvent,b),oe(T,L,N,ee(k,x)),N&&r!==N&&($(N,"focus",b),$(N,"change",E))),document.body.removeChild(P),P=null,X(r,"colorpicker-light")&&G(l,"colorpicker-light"),X(r,"colorpicker-dark")&&G(l,"colorpicker-dark"),X(r,"colorpicker-transition-fade")&&G(l,"colorpicker-transition-fade"),X(r,"colorpicker-transition-slide")&&G(l,"colorpicker-transition-slide")}return re.VERSION="2.2.2",re.WIDTH=343,re.HEIGHT=195,re});
|
Download
