diff --git a/README.md b/README.md index abf0ae2..395d49b 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,11 @@ This project exists thanks to all the people who contribute. Release Notes ------------- +### 2.1.0 + + - Added ability to clear the hook storage object if it’s empty. + - Added `blur` and `focus` hook that removed `state.e` option. + ### 2.0.3 - Added `CP.state` property to set initial state globally. diff --git a/color-picker.button.html b/color-picker.button.html index da7b6c9..257c1f1 100644 --- a/color-picker.button.html +++ b/color-picker.button.html @@ -11,10 +11,14 @@ - - - diff --git a/color-picker.events.html b/color-picker.events.html new file mode 100644 index 0000000..c263112 --- /dev/null +++ b/color-picker.events.html @@ -0,0 +1,36 @@ + + + + + + Color Picker + + + +

Show and hide color picker panel with double click.

+

+ + + + diff --git a/color-picker.js b/color-picker.js index f239175..bc71202 100644 --- a/color-picker.js +++ b/color-picker.js @@ -1,6 +1,6 @@ /*! * ============================================================== - * COLOR PICKER 2.0.3 + * COLOR PICKER 2.1.0 * ============================================================== * Author: Taufik Nurrohman * License: MIT @@ -185,12 +185,11 @@ (function($$) { - $$.version = '2.0.3'; + $$.version = '2.1.0'; $$.state = { 'class': 'color-picker', 'color': HEX, - 'e': downEvents, 'parent': null }; @@ -230,8 +229,8 @@ $$ = win[name], hooks = {}, self = doc.createElement('div'), - state = Object.assign({}, $$.state, false === o || o instanceof Array ? { - 'e': o + state = Object.assign({}, $$.state, isString(o) ? { + 'color': o } : (o || {})), cn = state['class']; @@ -291,6 +290,10 @@ hooks[name].splice(i, 1); } } + // Clean-up empty hook(s) + if (0 === j) { + delete hooks[name]; + } } else { delete hooks[name]; } @@ -328,7 +331,6 @@ body = doc.body, color = value(), data = RGB2HSV(color), - events = state.e, C = self.firstChild, SV = C[children][0], H = C[children][1], @@ -359,12 +361,16 @@ } function doClick(e) { - var t = e.target, - isSource = source === closestGet(t, source); - if (isSource) { - !isVisible() && doEnter(state.parent); + if (hooks.focus) { + hookFire('focus', color); } else { - doExit(); + var t = e.target, + isSource = source === closestGet(t, source); + if (isSource) { + !isVisible() && doEnter(state.parent); + } else { + doExit(); + } } } @@ -372,7 +378,6 @@ // Refresh value data = RGB2HSV(color = value()); - events = state.e; if (!isFirst) { (to || state.parent || body).appendChild(self), ($.visible = true); @@ -442,9 +447,7 @@ ACursorSizeHeight = sizeGet(ACursor)[1]; if (isFirst) { - if (false !== events) { - eventsSet(source, events, doClick); - } + eventsSet(source, downEvents, doClick); delay(function() { hookFire('change', color); }, 1); @@ -477,9 +480,11 @@ isSelf = self === closestGet(t, self); $.current = null; if (!isSource && !isSelf) { - // Click outside the source or picker element to exit - if (isVisible() && false !== events) { - doExit(); + if (hooks.blur) { + hookFire('blur', color); + } else { + // Click outside the source or picker element to exit + isVisible() && doExit(); } } else { if (isSelf) { @@ -575,9 +580,7 @@ return $; // Already ejected } delete source[name]; - if (false !== events) { - eventsLet(source, events, doClick); - } + eventsLet(source, downEvents, doClick); return doExit(), hookFire('pop', color); }; diff --git a/color-picker.min.js b/color-picker.min.js index e696e95..307f635 100644 --- a/color-picker.min.js +++ b/color-picker.min.js @@ -1,9 +1,9 @@ /*! * ============================================================== - * COLOR PICKER 2.0.3 + * COLOR PICKER 2.1.0 * ============================================================== * Author: Taufik Nurrohman * License: MIT * -------------------------------------------------------------- */ -!function(n,t,e){function r(n){var t,e,r,i,o,u,c,f,a=+n[0],s=+n[1],l=+n[2];switch(i=Math.floor(6*a),o=6*a-i,u=l*(1-s),c=l*(1-o*s),f=l*(1-(1-o)*s),i=i||0,c=c||0,f=f||0,i%6){case 0:t=l,e=f,r=u;break;case 1:t=c,e=l,r=u;break;case 2:t=u,e=l,r=f;break;case 3:t=u,e=c,r=l;break;case 4:t=f,e=u,r=l;break;case 5:t=l,e=u,r=c}return[b(255*t),b(255*e),b(255*r),p(v(n[3])?+n[3]:1,2)]}function i(n){var t,e,r=+n[0]/255,i=+n[1]/255,o=+n[2]/255,u=Math.max(r,i,o),c=Math.min(r,i,o),f=u,a=u-c,e=0===u?0:a/u;if(u===c)t=0;else{switch(u){case r:t=(i-o)/a+(o>i?6:0);break;case i:t=(o-r)/a+2;break;case o:t=(r-i)/a+4}t/=6}return[t,e,f,v(n[3])?+n[3]:1]}function o(n,t){var e="touches",r="clientX",i="clientY",o=t[e]?t[e][0][r]:t[r],u=t[e]?t[e][0][i]:t[i],f=c(n);return[o-f[0],u-f[1]]}function u(n,t){if(n===t)return n;for(;(n=n.parentElement)&&n!==t;);return n}function c(t){var e,r,i;return t===n?(e=n.pageXOffset||x.scrollLeft,r=n.pageYOffset||x.scrollTop):(i=t.getBoundingClientRect(),e=i.left,r=i.top),[e,r]}function f(t){return t===n?[n.innerWidth,n.innerHeight]:[t.offsetWidth,t.offsetHeight]}function a(n){n&&n.preventDefault()}function s(n){return"function"==typeof n}function l(n){return"object"==typeof n}function v(n){return void 0!==n||null===n}function d(n){return"string"==typeof n}function h(n,t){return nt[1]?t[1]:n}function p(n,t){return+n.toFixed(t)}function g(n,t){return parseInt(n,t||10)}function b(n){return Math.round(n)}function m(n,t){return n.toString(t)}function k(n,t,e){for(var r=0,i=t.length;i>r;++r)n.removeEventListener(t[r],e,!1)}function y(n,t,e){for(var r=0,i=t.length;i>r;++r)n.addEventListener(t[r],e,!1)}function C(n,t,e){n.style[t]=e}var x=t.documentElement,E="HEX",H="children",M="top",w="right",L="left",O="px",j=n.setTimeout,z="instances",T=["touchstart","mousedown"],X=["touchmove","mousemove"],I=["orientationchange","resize"],N=["touchend","mouseup"];!function(n){n.version="2.0.3",n.state={"class":"color-picker",color:E,e:T,parent:null},n[z]={},n[E]=function(n){if(d(n)){var t=(n=n.trim()).length;if(4!==t&&7!==t||"#"!==n[0]){if((5===t||9===t)&&"#"===n[0]&&/^#([a-z\d]{1,2}){4}$/i.test(n))return 5===t?[g(n[1]+n[1],16),g(n[2]+n[2],16),g(n[3]+n[3],16),p(g(n[4]+n[4],16)/255,2)]:[g(n[1]+n[2],16),g(n[3]+n[4],16),g(n[5]+n[6],16),p(g(n[7]+n[8],16)/255,2)]}else if(/^#([a-z\d]{1,2}){3}$/i.test(n))return 4===t?[g(n[1]+n[1],16),g(n[2]+n[2],16),g(n[3]+n[3],16),1]:[g(n[1]+n[2],16),g(n[3]+n[4],16),g(n[5]+n[6],16),1];return[0,0,0,1]}return"#"+("000000"+m(+n[2]|+n[1]<<8|+n[0]<<16,16)).slice(-6)+(v(n[3])&&n[3]<1?m(b(255*n[3])+65536,16).substr(-2):"")},n._=n.prototype}(n[e]=function(d,p){function g(n){var t,e=D[s(D[R.color])?R.color:E];if(t=d.dataset.color)return v(n)?d.dataset.color=e(t):e(t);if(t=d.value)return v(n)?d.value=e(t):e(t);if(t=d.textContent)return v(n)?d.textContent=e(t):e(t);if(!v(n))return[0,0,0,1]}function b(n,t){if(!v(n))return F={},B;if(v(F[n]))if(v(t))for(var e=0,r=F[n].length;r>e;++e)t===F[n][e]&&F[n].splice(e,1);else delete F[n];return B}function m(n,t){return v(F[n])||(F[n]=[]),v(t)&&F[n].push(t),B}function W(n,t){if(!v(F[n]))return B;for(var e=0,r=F[n].length;r>e;++e)F[n][e].apply(B,t);return B}function Y(){return P.parentNode}function $(n){var t=n.target,e=d===u(t,d);e?!Y()&&_(R.parent):q()}function A(e,s){function p(n){lt&&D(n),vt&&F(n),dt&&S(n),Q=r(U),(lt||vt||dt)&&(W(ft||at||st?"start":"drag",Q),W("change",Q)),ft=at=st=0}function b(n){Q=r(U);var t=n.target,e=d===u(t,d),i=P===u(t,P);B.current=null,e||i?i&&(lt||vt||dt)&&W("stop",Q):Y()&&!1!==V&&q(),lt=vt=dt=0}function m(n){B.current=nt,ft=lt=1,p(n),a(n)}function E(n){B.current=tt,at=vt=1,p(n),a(n)}function H(n){B.current=et,st=dt=1,p(n),a(n)}function z(n){v(n[1])&&C(it,w,pt-mt/2-pt*+n[1]+O),v(n[2])&&C(it,M,gt-kt/2-gt*+n[2]+O),v(n[0])&&C(ot,M,yt-Ct/2-yt*+n[0]+O),v(n[3])&&C(ct,M,xt-Et/2-xt*+n[3]+O)}function D(n){var t=o(nt,n),e=h(t[0],[0,pt]),r=h(t[1],[0,gt]);U[1]=1-(pt-e)/pt,U[2]=(gt-r)/gt,Z()}function F(n){U[0]=(yt-h(o(tt,n)[1],[0,yt]))/yt,Z()}function S(n){U[3]=(xt-h(o(et,n)[1],[0,xt]))/xt,Z()}function Z(){z(U);var n=r(U),t=r([U[0],1,1]);C(rt,"backgroundColor","rgb("+t[0]+","+t[1]+","+t[2]+")"),C(ut,"backgroundImage","linear-gradient(rgb("+n[0]+","+n[1]+","+n[2]+"),transparent)")}U=i(Q=g()),V=R.e,e||((s||R.parent||K).appendChild(P),B.visible=!0),_=function(n){return A(0,n),W("enter",Q),B},q=function(){var e=Y();return e&&(e.removeChild(P),B.current=null,B.visible=!1),k(nt,T,m),k(tt,T,E),k(et,T,H),k(t,X,p),k(t,N,b),k(n,I,J),W("exit",Q),B},G=function(t){var e=f(n),r=f(x),i=e[0]-r[0],o=e[1]-x.clientHeight,u=c(n),a=c(d),s=f(P),p=s[0],g=s[1],b=a[0]+u[0],m=a[1]+u[1]+f(d)[1];if(l(t))v(t[0])&&(b=t[0]),v(t[1])&&(m=t[1]);else{var k=u[0],y=u[1],E=u[0]+e[0]-p-i,H=u[1]+e[1]-g-o;b=h(b,[k,E])>>0,m=h(m,[y,H])>>0}return C(P,L,b+O),C(P,M,m+O),W("fit",Q),B},J=function(){return G()};var ht=f(nt),pt=ht[0],gt=ht[1],bt=f(it),mt=bt[0],kt=bt[1],yt=f(tt)[1],Ct=f(ot)[1],xt=f(et)[1],Et=f(ct)[1];e?(!1!==V&&y(d,V,$),j(function(){W("change",Q)},1)):(y(nt,T,m),y(tt,T,E),y(et,T,H),y(t,X,p),y(t,N,b),y(n,I,J),G()),B.get=function(){return g()},B.set=function(n,t,e,r){return U=i([n,t,e,r]),Z(),B},Z()}if(d){var B=this,D=n[e],F={},P=t.createElement("div"),R=Object.assign({},D.state,!1===p||p instanceof Array?{e:p}:p||{}),S=R["class"];if(d[e])return B;if(!(B instanceof D))return new D(d,p);D[z][d.id||d.name||Object.keys(D[z]).length]=B,d[e]=1,B.visible=!1,P.className=S,P.innerHTML='
';var _,q,G,J,K=t.body,Q=g(),U=i(Q),V=R.e,Z=P.firstChild,nt=Z[H][0],tt=Z[H][1],et=Z[H][2],rt=nt[H][0],it=nt[H][3],ot=(tt[H][0],tt[H][1]),ut=et[H][0],ct=et[H][2],ft=0,at=0,st=0,lt=0,vt=0,dt=0;A(1),B.color=function(n,t,e,r){return D[s(D[R.color])?R.color:E]([n,t,e,r])},B.current=null,B.enter=_,B.exit=q,B.fire=W,B.fit=G,B.hooks=F,B.off=b,B.on=m,B.pop=function(){return d[e]?(delete d[e],!1!==V&&k(d,V,$),q(),W("pop",Q)):B},B.value=function(n,t,e,r){return B.set(n,t,e,r),W("change",[n,t,e,r])},B.self=P,B.source=d,B.state=R}})}(this,this.document,"CP"); +!function(n,t,e){var r,i=t.documentElement,o="HEX",c="top",u="right",a="left",f="px",s=n.setTimeout,l=["touchstart","mousedown"],d=["touchmove","mousemove"],v=["orientationchange","resize"],h=["touchend","mouseup"];function p(n){var t,e,r,i,o,c,u,a,f=+n[0],s=+n[1],l=+n[2];switch(c=l*(1-s),u=l*(1-(o=6*f-(i=Math.floor(6*f)))*s),a=l*(1-(1-o)*s),i=i||0,u=u||0,a=a||0,i%6){case 0:t=l,e=a,r=c;break;case 1:t=u,e=l,r=c;break;case 2:t=c,e=l,r=a;break;case 3:t=c,e=u,r=l;break;case 4:t=a,e=c,r=l;break;case 5:t=l,e=c,r=u}return[L(255*t),L(255*e),L(255*r),M(E(n[3])?+n[3]:1,2)]}function g(n){var t,e=+n[0]/255,r=+n[1]/255,i=+n[2]/255,o=Math.max(e,r,i),c=Math.min(e,r,i),u=o,a=o-c,f=0===o?0:a/o;if(o===c)t=0;else{switch(o){case e:t=(r-i)/a+(rt[1]?t[1]:n}function M(n,t){return+n.toFixed(t)}function w(n,t){return parseInt(n,t||10)}function L(n){return Math.round(n)}function O(n,t){return n.toString(t)}function X(n,t,e){for(var r=0,i=t.length;r
';var I,N,W,$,B=t.body,D=rn(),F=g(D),R=O.firstChild,S=R.children[0],_=R.children[1],q=R.children[2],A=S.children[0],G=S.children[3],J=(_.children[0],_.children[1]),K=q.children[0],Q=q.children[2],U=0,V=0,Z=0,nn=0,tn=0,en=0;!function r(o,x){F=g(D=rn()),o||((x||T.parent||B).appendChild(O),M.visible=!0),I=function(n){return r(0,n),on("enter",D),M},N=function(){var e=cn();return e&&(e.removeChild(O),M.current=null,M.visible=!1),X(S,l,gn),X(_,l,bn),X(q,l,mn),X(t,d,hn),X(t,h,pn),X(n,v,$),on("exit",D),M},W=function(t){var r=k(n),o=k(i),u=r[0]-o[0],s=r[1]-i.clientHeight,l=C(n),d=C(e),v=k(O),h=v[0],p=v[1],g=d[0]+l[0],b=d[1]+l[1]+k(e)[1];if("object"==typeof t)E(t[0])&&(g=t[0]),E(t[1])&&(b=t[1]);else{var m=l[0],y=l[1],x=l[0]+r[0]-h-u,P=l[1]+r[1]-p-s;g=H(g,[m,x])>>0,b=H(b,[y,P])>>0}return z(O,a,g+f),z(O,c,b+f),on("fit",D),M},$=function(){return W()};var P=k(S),w=P[0],Y=P[1],R=k(G),an=R[0],fn=R[1],sn=k(_)[1],ln=k(J)[1],dn=k(q)[1],vn=k(Q)[1];function hn(n){nn&&function(n){var t=b(S,n),e=H(t[0],[0,w]),r=H(t[1],[0,Y]);F[1]=1-(w-e)/w,F[2]=(Y-r)/Y,Cn()}(n),tn&&function(n){F[0]=(sn-H(b(_,n)[1],[0,sn]))/sn,Cn()}(n),en&&function(n){F[3]=(dn-H(b(q,n)[1],[0,dn]))/dn,Cn()}(n),D=p(F),(nn||tn||en)&&(on(U||V||Z?"start":"drag",D),on("change",D)),U=V=Z=0}function pn(n){D=p(F);var t=n.target,r=e===m(t,e),i=O===m(t,O);M.current=null,r||i?i&&(nn||tn||en)&&on("stop",D):L.blur?on("blur",D):cn()&&N(),nn=tn=en=0}function gn(n){M.current=S,U=nn=1,hn(n),y(n)}function bn(n){M.current=_,V=tn=1,hn(n),y(n)}function mn(n){M.current=q,Z=en=1,hn(n),y(n)}function Cn(){var n;E((n=F)[1])&&z(G,u,w-an/2-w*+n[1]+f),E(n[2])&&z(G,c,Y-fn/2-Y*+n[2]+f),E(n[0])&&z(J,c,sn-ln/2-sn*+n[0]+f),E(n[3])&&z(Q,c,dn-vn/2-dn*+n[3]+f);var t=p(F),e=p([F[0],1,1]);z(A,"backgroundColor","rgb("+e[0]+","+e[1]+","+e[2]+")"),z(K,"backgroundImage","linear-gradient(rgb("+t[0]+","+t[1]+","+t[2]+"),transparent)")}o?(j(e,l,un),s(function(){on("change",D)},1)):(j(S,l,gn),j(_,l,bn),j(q,l,mn),j(t,d,hn),j(t,h,pn),j(n,v,$),W()),M.get=function(){return rn()},M.set=function(n,t,e,r){return F=g([n,t,e,r]),Cn(),M},Cn()}(1),M.color=function(n,t,e,r){return w[x(w[T.color])?T.color:o]([n,t,e,r])},M.current=null,M.enter=I,M.exit=N,M.fire=on,M.fit=W,M.hooks=L,M.off=function(n,t){if(!E(n))return L={},M;if(E(L[n]))if(E(t)){for(var e=0,r=L[n].length;e diff --git a/index.html b/index.html index 83a0152..cafc626 100644 --- a/index.html +++ b/index.html @@ -66,7 +66,7 @@

Do you like this project? Please support my Mecha CMS project too. Thank you!

-

Color Picker v2.0.3

+

Color Picker v2.1.0

Color Picker is a simple JavaScript application that aims to provide custom color picker feature to the web with the most basic appearance and usability.

@@ -138,7 +138,7 @@

Examples

  • Disable Alpha Channel Support
  • Disable Native HTML5 Color Picker
  • Show and Hide Color Picker with Buttons
    • -
  • Show and Hide Color Picker with Double Click
    • +
  • Show and Hide Color Picker with Double Click
  • Add Close Button to the Color Picker
  • Static Color Picker
  • Replace Text Input with Hidden Input
    • @@ -151,18 +151,16 @@

    Examples

  • Native HTML5 Custom <color-picker> Element

    • Settings

    - 
    let picker = new CP(source, e);
    + 
    let picker = new CP(source, color);
    let picker = new CP(source, state = {
         color: 'HEX',
-        e: ['touchstart', 'mousedown'],
         parent: null
     });
    • source → The source element that holds the initial color data.
      • -
    • e → Default events to show the color picker pane.
      • +
    • color → Name of the color parser defined in the CP object.
    • state → The configuration data.
    • state.color → Name of the color parser defined in the CP object.
      • -
    • state.e → Default events to show the color picker pane.
    • state.parent → Parent element to append the color picker element (default will be appended to the <body> element).

    Methods and Properties

    @@ -290,6 +288,10 @@

    Hooks

    + + blur + Adding a blur hook will disable the default blur behavior, that is, to hide the color picker pane. + change Will be triggered on every color change. @@ -310,6 +312,10 @@

    Hooks

    fit Will be triggered when color picker pane is positioned. + + focus + Adding a focus hook will disable the default focus behavior, that is, to show the color picker pane. + pop Will be triggered after picker.pop(). diff --git a/package.json b/package.json index 2a61f13..4a1ff9e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@taufik-nurrohman/color-picker", "description": "A simple color picker plugin written in pure JavaScript, for modern browsers.", - "version": "2.0.3", + "version": "2.1.0", "main": "color-picker.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1",