pax_global_header00006660000000000000000000000064120256115660014516gustar00rootroot0000000000000052 comment=41625be8534ec945d7a4f82b73a17685d58a8f31 jquery-minicolors-1.2.1/000077500000000000000000000000001202561156600152125ustar00rootroot00000000000000jquery-minicolors-1.2.1/.gitignore000066400000000000000000000000121202561156600171730ustar00rootroot00000000000000.DS_Store jquery-minicolors-1.2.1/images/000077500000000000000000000000001202561156600164575ustar00rootroot00000000000000jquery-minicolors-1.2.1/images/colors.png000066400000000000000000000312551202561156600204740ustar00rootroot00000000000000PNG  IHDR`2tEXtSoftwareAdobe ImageReadyqe<2OIDATx}ˮ$ɍ%v׫[5n0v=F? vbm4 zeT34Z[ȺC)mvn:T)vX)f{Yz#'?}+odr9l{o9N5u\z>q{~^y8n_=nN?~޿ofO7t*tW3ٶ랻O>{fOi<>{h 0)c{<wm޿ "o@ }}Vk_E5 WPm_1ٷT4n1ײ܏ŀ|~i@7}zmoO-ݻw /(7>E.:eOb@1Hv! 8{=ϼo;u~ >Wkk@<}T/~;1Rf ˛04Ӂo\v'1$@gt"kX'w_!Ѡ_Չw{mo״tf;n{혍4js 'Ongo݁ѝk=m;_7vþ>Rrg/Tu~`7^'iIjdHҗuCa QW?E|bv +RF[ z^n#--~<(κQo./ tOԞx|f xy|љbL z|}< re3}9cm g_?dOA%2|ztC;3R0*8&z[q_߃S z;[ߨNn[<{-Еmz;gY> _G_y "`HQ nf`%!ʈl`#>28/>#ح߃OCm 9TbGR{3q ׯ vc}KX-5hճw|}*eg_SޞI#E3[Q _Ъu: Lo~$ $C=P*$%,0۷dRw0p.1*3F/^cqu vF[V[n߀޼ݷX7WϿT/ހ &vٸN_>xQ|q2O_ٗ{?я2,7 2;RYMc(2btƂ3iW˽]v56jyrf8j/on6R)w/ߔ7 W RNmu۽X7_ ']> ՙKptGܽD<lߌWtPbG]<㛷 ses-UYǯpFJP+Y@$GqԞ}3oyZC<@-,P,[}{m,svZZ|>Rș6JXs۾VmўljT"D:^hzm;x[ {#3hPu*Q{ٱ۠UxLIAw\A4~m6Sڽg-mMliɭ N}6Z= de2\s)5w=YAd!h=YbJ`TLՂ=jdq (0 *ɛil3+tdi0-x`YP{p\tqZo6 N ) \@v+mP},D\M nA4ZO7w^`:eWJ4I5fW@?+kF @W4Ez2 dG<"=x-[+gZNo 9펠vj;-k@^T+HM(PwkDݗӏ[!tyXREf&(aYS4jifYn?pwA^4x)YhS>ݾ2k׬#EZb "g;U$3/NP)녳U~Yo @ap8{ kؑEFMmb7 KmV ׫W;sܞǖ0^PG5Z,1 \wj<lven#~T^JrYi΃ڔ؇P@U Au4Q Po qPƵwb_7)VTӨ:ɻW9i㛭?l7GV?脇}1gFG~e# pG?܃mRi5.CFc<<6ie| թRRNiT Nfi9Q'|W=|!T[5son]9rjpRѠgG^Tu8!`"k !AdJ8>ʖkF4z4mV ǯOT%lD!GݻB6_Z0kPY)D)v+*Pe-F=c0d]Fu氟̛]Ŗ[15^]YQ` Or4^=9~A G l2 yA;2No5+HM2DTgז,8?uv^xPuH}?HHl&\Z 27^mJ%L[:רZ{lTjldA!sTuZ}~{ݍ <(wXՔ$K3i :*tfX܆e<0ݾ0JD'-)7ξ9y-I@kKVp[o az1jTXdua=9u)}XWDw_&CPq&yjeĀtJ۸2J2jitҗ&S{i'׬j m|FJuxڌ+m\Y )75mC*X  i58u4h7ߔKRAj5 W:;e}5Z%eY]HXvSo_vP֫Vt׬쌖0YqttDhVvTk Y;{-װz<>b;)0cUF%Lٱ/յr8<k؎?OUuY3>3zaו$p*bX$Po4z!Y@ںm҆فظc/M01rG˷!iQν?MFqdʮ66۬,AI峇݇|ȝk]Te oFC'yTmJ֨9rUUƯJx;Io! 8`H 3=TRRޒ:lq|)k-9K{ZaZOu4[?Lb:XG9ڋLp|&SvHԀCV42msכI6s2Ӿ/Xc7~g01؅RV?$iPɦt)*ILA] 9QdH9S[m @y pda eJ{HI?Nry9:bu8 v򗿔}T 0ʂ4)q!-$ٮ+,V٨:`=0:VjYrmbu/ܚ:ւ+|ϧQ2y~>2OTR < =Fx(ar&(X0c@ot|+00 d5} xy]ZA=,`<FP<^;mbJiG4,*&q W3jl2ErنY=;&.W;cb-NTX(nyw"N(dm&a"a8DB"5ŵӫ3r,`pXlb=oWW>%үr_y=J\9ɫ"?Jh9% !`Jgp;Yq&H@2߇: d`qb ʗ]Ru4X-i+pGǕ՚(o4qR#ʝ_lHl2 xY1 Tl27m$(e/1S/=$8G&eJVIGvF`Hfb2B!J(ʔ^Ptr@[Cdw7bAX;raV_tlA[PItyOqeQ5Q2v/#+h\([f(I0abyT '(sV!Nyyea* ^:[p u@f=//'dT((3L<[L*9.u[2;; &6 `Qaq&+ |HQr^`^̙ZVJ5#8!eg^+L.k}3o *1Ż4kq\u+>`Qp+$;Օ8Rbl ۺk@MO! }HdI)?ْ6MuJ?Ltٌ)2hKiy{  K!! gv^ܮkBBQzer_?jU&׬_:~˒F^ݓ-[f6)ՠ /BZFz |0с}?[\{!Z ł R'ص9T5:{v?S&^A}'KqFI*, k$Px#1}<ɢB:ݟgBjՑc$ܺ1ϣNT(6 nW΂ !G6m0)6.!f 4jș5YaKțJ4`+j۷&{Y(6=g!˲,udOZ8! |f3+px+–ZAr=~"rTw^ ,:vTlxC@gQk2qE5HC5Y jJĊ)fOo9){gx|2wГjnc)"DY(0njTKgQyQb0SuZ=~6Ō ʝ=_-#$30zglp:3i®r2 y%lڎ^] 3XDdnRd=W%b4f ^|G2-7ș[[5ɩ$ʈmȶ1g_.3=$ܮhrݡykҊc08]yl,,$[ B*,1:bZGr'p|$"jy&ǿ'-0Fo/'|-kF#3وMg+&sNJ"r{կA R!2f)[ShRgy|@vJCb>6Kt Ԅidi'Ss%4Su$UDA/ڌ= S"00/NrNu,N&!K[7țݞx#NuAuȣ3eJHA$h u=`Nb59&QYuHșKԦ$yWu"N׻AJQr2_^WJTS`;.Gzd")NĪL7+W8-,hVg }uBuq Qq20Kxdg,PYdĬpuW!݋]x?]LB@_jQZ9mRȈq}A <jicz%2NԠcz IƆ[:Z*U ?7H Jɸs3RGq QK+o3 GpAZ2uNVu@@+%QwP^B$?bIyu% 9fX|NＧ^ت:Г*UӘxtrB]\}KPEi3AuPc2pK?yܫ rro N7w:6h#(44T$اlB;Gt1x9ѝ=]`-S[<A{z|f R!PJB>Pk>6fRC/OZHPC+ױRrF?'G5̭&'q| @Ig zѺhpJu,5Kk,2{*]hV f<>[y 肣 \U'3Sq E`{^[률P <>tw?*V|^\QzoѢ UPP2M%J\AkK!;sz$id)5f>n! 2|[ݓUE]rᕜ/|f;ǛR(`V=e&0 NmT? |+znB )7[]^A\ /WyǟMB1@O[5X%S@A\qFliCML6g$%WQ 9NM-tZPTr6 և 0>F `sܩ0 LIz(x[2Us6wlMz[*nj~zAAv t~F C5A8~J|#pg@U|}q|A +F:ǂ(53HZr8~"0lVչްȖ2sZq=f|ed)Npxk6ݰξTnH VD1Jx`4a'5GLf%S4Fr L䉨׊Lq{ƨoMd9A(һ~j5?#O#=20h-,Hl%IQ뽱kb48xvQ!K((M%h 2A5rOFgQodFE]4ľτ ++g"-!%!18|;jCDԝJuOf}uӨ`p;);6E{XֳEb EˇF>J#ԑ9G#;"b8vHuXɆCY:޺WXAvrD!1X ̠ͼPa R2ýP6jxiM<)iX@|(=m鳸{;i9C\7殈BcfZ-sLqTCL!Kvԙ 1h벍  A:r8)o \g۴x4ȫTlrx2;N6CuVS)y/>RO89:pMУ)U"\ɪ#.0++`Ҽ[ʋ ƠG{, 7('_xsAu; O!i]Lrx*& fLek31 \3Fuzɸ.JJG0νu U<91>ZQ"n%O!`HPwzm`u;틌yu<6Wg*rh[(Vg:JY<7?15 ?3}%K{jAd )_3r@5{lM3?Sdm2/Aڽu|uȈ8Y8.,:I:t2~KENIegM= fmyˠwNTyJ*:C đWz >'=fQzy&Jh 6O%f3WǓ8Kq} x|d9?b`Pe U%ʶ ictf;=Oɟ +_^>x2560 >n.V0|[#*>AK[|Yx@ڋx}!8 $x}Vw'C+sD{DuD3 IHB3RlG 0xmU_l4f#0>NU̫ 1jA-wdWq5fW:GwzIS_SW6#:I0,ږ!dz4 ko`ϹpOoy`g}}^8{\)P@x'Ae.Y>(ӝ$m%s S&֣A2985ͤΛCy R) )]/ tgS2Fq6dF7TC vA<ve[3*E>Q;i/9^1i0LBFGtDJ=4)Uktt@doKg@0$ J5 OߏDek~HbFv`H 8 /Tx94i% ۊ'^G% a垨d@;c i'auy@aD _qsMrhgvziΝ(xJOqWtڴg5{2`J?sҒaOPDu`ր!I m%7`W}=-! ާg] w<5"a p/rɫC&ε:?*I4{Jy`I]ׇ%F{p|^ En70/jHjm^!}u&9d(O@uEd;XCxx!\# 䐝4x|Tq̨=l>BlN8 *c<38oăG=YvW9] :杖Y.I_yOP̤IFa9iG Gm>my! o1N<o$}u<18=,5, .Ij7J"AϟboNv&˃y ePI}\(p3G02Ќ]c1 _q~3<7 6a.d] |i8 n߶rAHn?'{~I$9 sQ˲N9Duފ?|m G (#`3ÕCO]}fɬBN#;:^}:ߚW} +=|ge@;࢝R:a!;\fhm~n2cϧlw3llf46s.3nkgN` IGA[OHIo}>^>o4 Tv\GչAd4oy>Ԍ7{;ݭoů/(:~ oCʲDqBp8-9_Y1WSI4HHrc2&+3aq*gʀgzanK(dHOřy:7?w`0k=]c<&h=Q z4gDKL IONC''?, Pol3?7<ɹ ~ XXIENDB`jquery-minicolors-1.2.1/images/trigger.png000066400000000000000000000013021202561156600206240ustar00rootroot00000000000000PNG  IHDR,e~tEXtSoftwareAdobe ImageReadyqe<dIDATxڼϪ@OX+.ݺ,|+} }W.܋ .Z Wʽьwa&QSLr0qs81:W"zxt{Sa3n?Φv;%6paz&yE廔N}A@1LNV*qЁ r4&xV9@T$a.@:V!  u I ӮCMx< 8`广,j0z i6p5שhDJLIZ Zò uh^Qm3RfngvkϫjlZC jQuery miniColors

jQuery miniColors

A compact color selector for input elements.

Default

Black theme (set class="black" on the input)

Preset HEX value (set value attribute for preset)

With Opacity (set data-opacity attribute for preset)

Attached to a hidden input

Absolutely positioned in upper-right corner

Absolutely positioned in bottom-left corner

Absolutely positioned in bottom-right corner

Select an action to apply to all of the controls on this page:



jquery-minicolors-1.2.1/jquery.miniColors.css000066400000000000000000000042641202561156600213660ustar00rootroot00000000000000INPUT.miniColors { margin-right: 4px; } .miniColors-selector { position: absolute; width: 175px; height: 150px; background: white; border: solid 1px #bababa; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25); box-shadow: 0 0 6px rgba(0, 0, 0, .25); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 5px; z-index: 999999; } .miniColors.opacity.miniColors-selector { width: 200px; } .miniColors-selector.black { background: black; border-color: black; } .miniColors-colors { position: absolute; top: 5px; left: 5px; width: 150px; height: 150px; background: url(images/colors.png) -40px 0 no-repeat; cursor: crosshair; } .miniColors.opacity .miniColors-colors { left: 30px; } .miniColors-hues { position: absolute; top: 5px; left: 160px; width: 20px; height: 150px; background: url(images/colors.png) 0 0 no-repeat; cursor: crosshair; } .miniColors.opacity .miniColors-hues { left: 185px; } .miniColors-opacity { position: absolute; top: 5px; left: 5px; width: 20px; height: 150px; background: url(images/colors.png) -20px 0 no-repeat; cursor: crosshair; } .miniColors-colorPicker { position: absolute; width: 11px; height: 11px; border: 1px solid black; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; } .miniColors-colorPicker-inner { position: absolute; top: 0; left: 0; width: 7px; height: 7px; border: 2px solid white; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; } .miniColors-huePicker, .miniColors-opacityPicker { position: absolute; left: -2px; width: 22px; height: 2px; border: 1px solid black; background: white; margin-top: -1px; border-radius: 2px; } .miniColors-trigger, .miniColors-triggerWrap { width: 22px; height: 22px; display: inline-block; } .miniColors-triggerWrap { background: url(images/trigger.png) -22px 0 no-repeat; } .miniColors-triggerWrap.disabled { filter: alpha(opacity=50); opacity: .5; } .miniColors-trigger { vertical-align: middle; outline: none; background: url(images/trigger.png) 0 0 no-repeat; } .miniColors-triggerWrap.disabled .miniColors-trigger { cursor: default; }jquery-minicolors-1.2.1/jquery.miniColors.js000066400000000000000000000506621202561156600212150ustar00rootroot00000000000000/* * jQuery miniColors: A small color selector * * Copyright 2012 Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/) * * Dual licensed under the MIT or GPL Version 2 licenses * */ if(jQuery) (function($) { $.extend($.fn, { miniColors: function(o, data) { var create = function(input, o, data) { // // Creates a new instance of the miniColors selector // // Determine initial color (defaults to white) var color = expandHex(input.val()) || 'ffffff', hsb = hex2hsb(color), rgb = hsb2rgb(hsb), alpha = parseFloat(input.attr('data-opacity')).toFixed(2); if( alpha > 1 ) alpha = 1; if( alpha < 0 ) alpha = 0; // Create trigger var trigger = $(''); trigger.insertAfter(input); trigger.wrap(''); if( o.opacity ) { trigger.css('backgroundColor', 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + alpha + ')'); } // Set input data and update attributes input .addClass('miniColors') .data('original-maxlength', input.attr('maxlength') || null) .data('original-autocomplete', input.attr('autocomplete') || null) .data('letterCase', o.letterCase === 'uppercase' ? 'uppercase' : 'lowercase') .data('opacity', o.opacity ? true : false) .data('alpha', alpha) .data('trigger', trigger) .data('hsb', hsb) .data('change', o.change ? o.change : null) .data('close', o.close ? o.close : null) .data('open', o.open ? o.open : null) .attr('maxlength', 7) .attr('autocomplete', 'off') .val('#' + convertCase(color, o.letterCase)); // Handle options if( o.readonly || input.prop('readonly') ) input.prop('readonly', true); if( o.disabled || input.prop('disabled') ) disable(input); // Show selector when trigger is clicked trigger.on('click.miniColors', function(event) { event.preventDefault(); if( input.val() === '' ) input.val('#'); show(input); }); // Show selector when input receives focus input.on('focus.miniColors', function(event) { if( input.val() === '' ) input.val('#'); show(input); }); // Hide on blur input.on('blur.miniColors', function(event) { var hex = expandHex( hsb2hex(input.data('hsb')) ); input.val( hex ? '#' + convertCase(hex, input.data('letterCase')) : '' ); }); // Hide when tabbing out of the input input.on('keydown.miniColors', function(event) { if( event.keyCode === 9 ) hide(input); }); // Update when color is typed in input.on('keyup.miniColors', function(event) { setColorFromInput(input); }); // Handle pasting input.on('paste.miniColors', function(event) { // Short pause to wait for paste to complete setTimeout( function() { setColorFromInput(input); }, 5); }); }; var destroy = function(input) { // // Destroys an active instance of the miniColors selector // hide(); input = $(input); // Restore to original state input.data('trigger').parent().remove(); input .attr('autocomplete', input.data('original-autocomplete')) .attr('maxlength', input.data('original-maxlength')) .removeData() .removeClass('miniColors') .off('.miniColors'); $(document).off('.miniColors'); }; var enable = function(input) { // // Enables the input control and the selector // input .prop('disabled', false) .data('trigger').parent().removeClass('disabled'); }; var disable = function(input) { // // Disables the input control and the selector // hide(input); input .prop('disabled', true) .data('trigger').parent().addClass('disabled'); }; var show = function(input) { // // Shows the miniColors selector // if( input.prop('disabled') ) return false; // Hide all other instances hide(); // Generate the selector var selector = $('
'); selector .append('
') .append('
') .css('display', 'none') .addClass( input.attr('class') ); // Opacity if( input.data('opacity') ) { selector .addClass('opacity') .prepend('
'); } // Set background for colors var hsb = input.data('hsb'); selector .find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 })).end() .find('.miniColors-opacity').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: hsb.s, b: hsb.b })).end(); // Set colorPicker position var colorPosition = input.data('colorPosition'); if( !colorPosition ) colorPosition = getColorPositionFromHSB(hsb); selector.find('.miniColors-colorPicker') .css('top', colorPosition.y + 'px') .css('left', colorPosition.x + 'px'); // Set huePicker position var huePosition = input.data('huePosition'); if( !huePosition ) huePosition = getHuePositionFromHSB(hsb); selector.find('.miniColors-huePicker').css('top', huePosition + 'px'); // Set opacity position var opacityPosition = input.data('opacityPosition'); if( !opacityPosition ) opacityPosition = getOpacityPositionFromAlpha(input.attr('data-opacity')); selector.find('.miniColors-opacityPicker').css('top', opacityPosition + 'px'); // Set input data input .data('selector', selector) .data('huePicker', selector.find('.miniColors-huePicker')) .data('opacityPicker', selector.find('.miniColors-opacityPicker')) .data('colorPicker', selector.find('.miniColors-colorPicker')) .data('mousebutton', 0); $('BODY').append(selector); // Position the selector var trigger = input.data('trigger'), hidden = !input.is(':visible'), top = hidden ? trigger.offset().top + trigger.outerHeight() : input.offset().top + input.outerHeight(), left = hidden ? trigger.offset().left : input.offset().left, selectorWidth = selector.outerWidth(), selectorHeight = selector.outerHeight(), triggerWidth = trigger.outerWidth(), triggerHeight = trigger.outerHeight(), windowHeight = $(window).height(), windowWidth = $(window).width(), scrollTop = $(window).scrollTop(), scrollLeft = $(window).scrollLeft(); // Adjust based on viewport if( (top + selectorHeight) > windowHeight + scrollTop ) top = top - selectorHeight - triggerHeight; if( (left + selectorWidth) > windowWidth + scrollLeft ) left = left - selectorWidth + triggerWidth; // Set position and show selector.css({ top: top, left: left }).fadeIn(100); // Prevent text selection in IE selector.on('selectstart', function() { return false; }); // Hide on resize (IE7/8 trigger this when any element is resized...) if( !$.browser.msie || ($.browser.msie && $.browser.version >= 9) ) { $(window).on('resize.miniColors', function(event) { hide(input); }); } $(document) .on('mousedown.miniColors touchstart.miniColors', function(event) { input.data('mousebutton', 1); var testSubject = $(event.target).parents().andSelf(); if( testSubject.hasClass('miniColors-colors') ) { event.preventDefault(); input.data('moving', 'colors'); moveColor(input, event); } if( testSubject.hasClass('miniColors-hues') ) { event.preventDefault(); input.data('moving', 'hues'); moveHue(input, event); } if( testSubject.hasClass('miniColors-opacity') ) { event.preventDefault(); input.data('moving', 'opacity'); moveOpacity(input, event); } if( testSubject.hasClass('miniColors-selector') ) { event.preventDefault(); return; } if( testSubject.hasClass('miniColors') ) return; hide(input); }) .on('mouseup.miniColors touchend.miniColors', function(event) { event.preventDefault(); input.data('mousebutton', 0).removeData('moving'); }) .on('mousemove.miniColors touchmove.miniColors', function(event) { event.preventDefault(); if( input.data('mousebutton') === 1 ) { if( input.data('moving') === 'colors' ) moveColor(input, event); if( input.data('moving') === 'hues' ) moveHue(input, event); if( input.data('moving') === 'opacity' ) moveOpacity(input, event); } }); // Fire open callback if( input.data('open') ) { input.data('open').call(input.get(0), '#' + hsb2hex(hsb), $.extend(hsb2rgb(hsb), { a: parseFloat(input.attr('data-opacity')) })); } }; var hide = function(input) { // // Hides one or more miniColors selectors // // Hide all other instances if input isn't specified if( !input ) input = $('.miniColors'); input.each( function() { var selector = $(this).data('selector'); $(this).removeData('selector'); $(selector).fadeOut(100, function() { // Fire close callback if( input.data('close') ) { var hsb = input.data('hsb'), hex = hsb2hex(hsb); input.data('close').call(input.get(0), '#' + hex, $.extend(hsb2rgb(hsb), { a: parseFloat(input.attr('data-opacity')) })); } $(this).remove(); }); }); $(document).off('.miniColors'); }; var moveColor = function(input, event) { var colorPicker = input.data('colorPicker'); colorPicker.hide(); var position = { x: event.pageX, y: event.pageY }; // Touch support if( event.originalEvent.changedTouches ) { position.x = event.originalEvent.changedTouches[0].pageX; position.y = event.originalEvent.changedTouches[0].pageY; } position.x = position.x - input.data('selector').find('.miniColors-colors').offset().left - 6; position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 6; if( position.x <= -5 ) position.x = -5; if( position.x >= 144 ) position.x = 144; if( position.y <= -5 ) position.y = -5; if( position.y >= 144 ) position.y = 144; input.data('colorPosition', position); colorPicker.css('left', position.x).css('top', position.y).show(); // Calculate saturation var s = Math.round((position.x + 5) * 0.67); if( s < 0 ) s = 0; if( s > 100 ) s = 100; // Calculate brightness var b = 100 - Math.round((position.y + 5) * 0.67); if( b < 0 ) b = 0; if( b > 100 ) b = 100; // Update HSB values var hsb = input.data('hsb'); hsb.s = s; hsb.b = b; // Set color setColor(input, hsb, true); }; var moveHue = function(input, event) { var huePicker = input.data('huePicker'); huePicker.hide(); var position = event.pageY; // Touch support if( event.originalEvent.changedTouches ) { position = event.originalEvent.changedTouches[0].pageY; } position = position - input.data('selector').find('.miniColors-colors').offset().top - 1; if( position <= -1 ) position = -1; if( position >= 149 ) position = 149; input.data('huePosition', position); huePicker.css('top', position).show(); // Calculate hue var h = Math.round((150 - position - 1) * 2.4); if( h < 0 ) h = 0; if( h > 360 ) h = 360; // Update HSB values var hsb = input.data('hsb'); hsb.h = h; // Set color setColor(input, hsb, true); }; var moveOpacity = function(input, event) { var opacityPicker = input.data('opacityPicker'); opacityPicker.hide(); var position = event.pageY; // Touch support if( event.originalEvent.changedTouches ) { position = event.originalEvent.changedTouches[0].pageY; } position = position - input.data('selector').find('.miniColors-colors').offset().top - 1; if( position <= -1 ) position = -1; if( position >= 149 ) position = 149; input.data('opacityPosition', position); opacityPicker.css('top', position).show(); // Calculate opacity var alpha = parseFloat((150 - position - 1) / 150).toFixed(2); if( alpha < 0 ) alpha = 0; if( alpha > 1 ) alpha = 1; // Update opacity input .data('alpha', alpha) .attr('data-opacity', alpha); // Set color setColor(input, input.data('hsb'), true); }; var setColor = function(input, hsb, updateInput) { input.data('hsb', hsb); var hex = hsb2hex(hsb), selector = $(input.data('selector')); if( updateInput ) input.val( '#' + convertCase(hex, input.data('letterCase')) ); selector .find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 })).end() .find('.miniColors-opacity').css('backgroundColor', '#' + hex).end(); var rgb = hsb2rgb(hsb); // Set background color (also fallback for non RGBA browsers) input.data('trigger').css('backgroundColor', '#' + hex); // Set background color + opacity if( input.data('opacity') ) { input.data('trigger').css('backgroundColor', 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + input.attr('data-opacity') + ')'); } // Fire change callback if( input.data('change') ) { if( (hex + ',' + input.attr('data-opacity')) === input.data('lastChange') ) return; input.data('change').call(input.get(0), '#' + hex, $.extend(hsb2rgb(hsb), { a: parseFloat(input.attr('data-opacity')) })); input.data('lastChange', hex + ',' + input.attr('data-opacity')); } }; var setColorFromInput = function(input) { input.val('#' + cleanHex(input.val())); var hex = expandHex(input.val()); if( !hex ) return false; // Get HSB equivalent var hsb = hex2hsb(hex); // Set colorPicker position var colorPosition = getColorPositionFromHSB(hsb); var colorPicker = $(input.data('colorPicker')); colorPicker.css('top', colorPosition.y + 'px').css('left', colorPosition.x + 'px'); input.data('colorPosition', colorPosition); // Set huePosition position var huePosition = getHuePositionFromHSB(hsb); var huePicker = $(input.data('huePicker')); huePicker.css('top', huePosition + 'px'); input.data('huePosition', huePosition); // Set opacity position var opacityPosition = getOpacityPositionFromAlpha(input.attr('data-opacity')); var opacityPicker = $(input.data('opacityPicker')); opacityPicker.css('top', opacityPosition + 'px'); input.data('opacityPosition', opacityPosition); setColor(input, hsb); return true; }; var convertCase = function(string, letterCase) { if( letterCase === 'uppercase' ) { return string.toUpperCase(); } else { return string.toLowerCase(); } }; var getColorPositionFromHSB = function(hsb) { var x = Math.ceil(hsb.s / 0.67); if( x < 0 ) x = 0; if( x > 150 ) x = 150; var y = 150 - Math.ceil(hsb.b / 0.67); if( y < 0 ) y = 0; if( y > 150 ) y = 150; return { x: x - 5, y: y - 5 }; }; var getHuePositionFromHSB = function(hsb) { var y = 150 - (hsb.h / 2.4); if( y < 0 ) h = 0; if( y > 150 ) h = 150; return y; }; var getOpacityPositionFromAlpha = function(alpha) { var y = 150 * alpha; if( y < 0 ) y = 0; if( y > 150 ) y = 150; return 150 - y; }; var cleanHex = function(hex) { return hex.replace(/[^A-F0-9]/ig, ''); }; var expandHex = function(hex) { hex = cleanHex(hex); if( !hex ) return null; if( hex.length === 3 ) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; return hex.length === 6 ? hex : null; }; var hsb2rgb = function(hsb) { var rgb = {}; var h = Math.round(hsb.h); var s = Math.round(hsb.s*255/100); var v = Math.round(hsb.b*255/100); if(s === 0) { rgb.r = rgb.g = rgb.b = v; } else { var t1 = v; var t2 = (255 - s) * v / 255; var t3 = (t1 - t2) * (h % 60) / 60; if( h === 360 ) h = 0; if( h < 60 ) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; } else if( h < 120 ) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; } else if( h < 180 ) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; } else if( h < 240 ) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; } else if( h < 300 ) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; } else if( h < 360 ) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; } else { rgb.r = 0; rgb.g = 0; rgb.b = 0; } } return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) }; }; var rgb2hex = function(rgb) { var hex = [ rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16) ]; $.each(hex, function(nr, val) { if (val.length === 1) hex[nr] = '0' + val; }); return hex.join(''); }; var hex2rgb = function(hex) { hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); return { r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF) }; }; var rgb2hsb = function(rgb) { var hsb = { h: 0, s: 0, b: 0 }; var min = Math.min(rgb.r, rgb.g, rgb.b); var max = Math.max(rgb.r, rgb.g, rgb.b); var delta = max - min; hsb.b = max; hsb.s = max !== 0 ? 255 * delta / max : 0; if( hsb.s !== 0 ) { if( rgb.r === max ) { hsb.h = (rgb.g - rgb.b) / delta; } else if( rgb.g === max ) { hsb.h = 2 + (rgb.b - rgb.r) / delta; } else { hsb.h = 4 + (rgb.r - rgb.g) / delta; } } else { hsb.h = -1; } hsb.h *= 60; if( hsb.h < 0 ) { hsb.h += 360; } hsb.s *= 100/255; hsb.b *= 100/255; return hsb; }; var hex2hsb = function(hex) { var hsb = rgb2hsb(hex2rgb(hex)); // Zero out hue marker for black, white, and grays (saturation === 0) if( hsb.s === 0 ) hsb.h = 360; return hsb; }; var hsb2hex = function(hsb) { return rgb2hex(hsb2rgb(hsb)); }; // Handle calls to $([selector]).miniColors() switch(o) { case 'readonly': $(this).each( function() { if( !$(this).hasClass('miniColors') ) return; $(this).prop('readonly', data); }); return $(this); case 'disabled': $(this).each( function() { if( !$(this).hasClass('miniColors') ) return; if( data ) { disable($(this)); } else { enable($(this)); } }); return $(this); case 'value': // Getter if( data === undefined ) { if( !$(this).hasClass('miniColors') ) return; var input = $(this), hex = expandHex(input.val()); return hex ? '#' + convertCase(hex, input.data('letterCase')) : null; } // Setter $(this).each( function() { if( !$(this).hasClass('miniColors') ) return; $(this).val(data); setColorFromInput($(this)); }); return $(this); case 'opacity': // Getter if( data === undefined ) { if( !$(this).hasClass('miniColors') ) return; if( $(this).data('opacity') ) { return parseFloat($(this).attr('data-opacity')); } else { return null; } } // Setter $(this).each( function() { if( !$(this).hasClass('miniColors') ) return; if( data < 0 ) data = 0; if( data > 1 ) data = 1; $(this).attr('data-opacity', data).data('alpha', data); setColorFromInput($(this)); }); return $(this); case 'destroy': $(this).each( function() { if( !$(this).hasClass('miniColors') ) return; destroy($(this)); }); return $(this); default: if( !o ) o = {}; $(this).each( function() { // Must be called on an input element if( $(this)[0].tagName.toLowerCase() !== 'input' ) return; // If a trigger is present, the control was already created if( $(this).data('trigger') ) return; // Create the control create($(this), o, data); }); return $(this); } } }); })(jQuery);jquery-minicolors-1.2.1/jquery.miniColors.min.js000066400000000000000000000330561202561156600217750ustar00rootroot00000000000000/* * jQuery miniColors: A small color selector * * Copyright 2012 Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/) * * Dual licensed under the MIT or GPL Version 2 licenses * */ if(jQuery)(function($){$.extend($.fn,{miniColors:function(o,data){var create=function(input,o,data){var color=expandHex(input.val())||'ffffff',hsb=hex2hsb(color),rgb=hsb2rgb(hsb),alpha=parseFloat(input.attr('data-opacity')).toFixed(2);if(alpha>1)alpha=1;if(alpha<0)alpha=0;var trigger=$('');trigger.insertAfter(input);trigger.wrap('');if(o.opacity){trigger.css('backgroundColor','rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+alpha+')')}input.addClass('miniColors').data('original-maxlength',input.attr('maxlength')||null).data('original-autocomplete',input.attr('autocomplete')||null).data('letterCase',o.letterCase==='uppercase'?'uppercase':'lowercase').data('opacity',o.opacity?true:false).data('alpha',alpha).data('trigger',trigger).data('hsb',hsb).data('change',o.change?o.change:null).data('close',o.close?o.close:null).data('open',o.open?o.open:null).attr('maxlength',7).attr('autocomplete','off').val('#'+convertCase(color,o.letterCase));if(o.readonly||input.prop('readonly'))input.prop('readonly',true);if(o.disabled||input.prop('disabled'))disable(input);trigger.on('click.miniColors',function(event){event.preventDefault();if(input.val()==='')input.val('#');show(input)});input.on('focus.miniColors',function(event){if(input.val()==='')input.val('#');show(input)});input.on('blur.miniColors',function(event){var hex=expandHex(hsb2hex(input.data('hsb')));input.val(hex?'#'+convertCase(hex,input.data('letterCase')):'')});input.on('keydown.miniColors',function(event){if(event.keyCode===9)hide(input)});input.on('keyup.miniColors',function(event){setColorFromInput(input)});input.on('paste.miniColors',function(event){setTimeout(function(){setColorFromInput(input)},5)})};var destroy=function(input){hide();input=$(input);input.data('trigger').parent().remove();input.attr('autocomplete',input.data('original-autocomplete')).attr('maxlength',input.data('original-maxlength')).removeData().removeClass('miniColors').off('.miniColors');$(document).off('.miniColors')};var enable=function(input){input.prop('disabled',false).data('trigger').parent().removeClass('disabled')};var disable=function(input){hide(input);input.prop('disabled',true).data('trigger').parent().addClass('disabled')};var show=function(input){if(input.prop('disabled'))return false;hide();var selector=$('
');selector.append('
').append('
').css('display','none').addClass(input.attr('class'));if(input.data('opacity')){selector.addClass('opacity').prepend('
')}var hsb=input.data('hsb');selector.find('.miniColors-colors').css('backgroundColor','#'+hsb2hex({h:hsb.h,s:100,b:100})).end().find('.miniColors-opacity').css('backgroundColor','#'+hsb2hex({h:hsb.h,s:hsb.s,b:hsb.b})).end();var colorPosition=input.data('colorPosition');if(!colorPosition)colorPosition=getColorPositionFromHSB(hsb);selector.find('.miniColors-colorPicker').css('top',colorPosition.y+'px').css('left',colorPosition.x+'px');var huePosition=input.data('huePosition');if(!huePosition)huePosition=getHuePositionFromHSB(hsb);selector.find('.miniColors-huePicker').css('top',huePosition+'px');var opacityPosition=input.data('opacityPosition');if(!opacityPosition)opacityPosition=getOpacityPositionFromAlpha(input.attr('data-opacity'));selector.find('.miniColors-opacityPicker').css('top',opacityPosition+'px');input.data('selector',selector).data('huePicker',selector.find('.miniColors-huePicker')).data('opacityPicker',selector.find('.miniColors-opacityPicker')).data('colorPicker',selector.find('.miniColors-colorPicker')).data('mousebutton',0);$('BODY').append(selector);var trigger=input.data('trigger'),hidden=!input.is(':visible'),top=hidden?trigger.offset().top+trigger.outerHeight():input.offset().top+input.outerHeight(),left=hidden?trigger.offset().left:input.offset().left,selectorWidth=selector.outerWidth(),selectorHeight=selector.outerHeight(),triggerWidth=trigger.outerWidth(),triggerHeight=trigger.outerHeight(),windowHeight=$(window).height(),windowWidth=$(window).width(),scrollTop=$(window).scrollTop(),scrollLeft=$(window).scrollLeft();if((top+selectorHeight)>windowHeight+scrollTop)top=top-selectorHeight-triggerHeight;if((left+selectorWidth)>windowWidth+scrollLeft)left=left-selectorWidth+triggerWidth;selector.css({top:top,left:left}).fadeIn(100);selector.on('selectstart',function(){return false});if(!$.browser.msie||($.browser.msie&&$.browser.version>=9)){$(window).on('resize.miniColors',function(event){hide(input)})}$(document).on('mousedown.miniColors touchstart.miniColors',function(event){input.data('mousebutton',1);var testSubject=$(event.target).parents().andSelf();if(testSubject.hasClass('miniColors-colors')){event.preventDefault();input.data('moving','colors');moveColor(input,event)}if(testSubject.hasClass('miniColors-hues')){event.preventDefault();input.data('moving','hues');moveHue(input,event)}if(testSubject.hasClass('miniColors-opacity')){event.preventDefault();input.data('moving','opacity');moveOpacity(input,event)}if(testSubject.hasClass('miniColors-selector')){event.preventDefault();return}if(testSubject.hasClass('miniColors'))return;hide(input)}).on('mouseup.miniColors touchend.miniColors',function(event){event.preventDefault();input.data('mousebutton',0).removeData('moving')}).on('mousemove.miniColors touchmove.miniColors',function(event){event.preventDefault();if(input.data('mousebutton')===1){if(input.data('moving')==='colors')moveColor(input,event);if(input.data('moving')==='hues')moveHue(input,event);if(input.data('moving')==='opacity')moveOpacity(input,event)}});if(input.data('open')){input.data('open').call(input.get(0),'#'+hsb2hex(hsb),$.extend(hsb2rgb(hsb),{a:parseFloat(input.attr('data-opacity'))}))}};var hide=function(input){if(!input)input=$('.miniColors');input.each(function(){var selector=$(this).data('selector');$(this).removeData('selector');$(selector).fadeOut(100,function(){if(input.data('close')){var hsb=input.data('hsb'),hex=hsb2hex(hsb);input.data('close').call(input.get(0),'#'+hex,$.extend(hsb2rgb(hsb),{a:parseFloat(input.attr('data-opacity'))}))}$(this).remove()})});$(document).off('.miniColors')};var moveColor=function(input,event){var colorPicker=input.data('colorPicker');colorPicker.hide();var position={x:event.pageX,y:event.pageY};if(event.originalEvent.changedTouches){position.x=event.originalEvent.changedTouches[0].pageX;position.y=event.originalEvent.changedTouches[0].pageY}position.x=position.x-input.data('selector').find('.miniColors-colors').offset().left-6;position.y=position.y-input.data('selector').find('.miniColors-colors').offset().top-6;if(position.x<=-5)position.x=-5;if(position.x>=144)position.x=144;if(position.y<=-5)position.y=-5;if(position.y>=144)position.y=144;input.data('colorPosition',position);colorPicker.css('left',position.x).css('top',position.y).show();var s=Math.round((position.x+5)*0.67);if(s<0)s=0;if(s>100)s=100;var b=100-Math.round((position.y+5)*0.67);if(b<0)b=0;if(b>100)b=100;var hsb=input.data('hsb');hsb.s=s;hsb.b=b;setColor(input,hsb,true)};var moveHue=function(input,event){var huePicker=input.data('huePicker');huePicker.hide();var position=event.pageY;if(event.originalEvent.changedTouches){position=event.originalEvent.changedTouches[0].pageY}position=position-input.data('selector').find('.miniColors-colors').offset().top-1;if(position<=-1)position=-1;if(position>=149)position=149;input.data('huePosition',position);huePicker.css('top',position).show();var h=Math.round((150-position-1)*2.4);if(h<0)h=0;if(h>360)h=360;var hsb=input.data('hsb');hsb.h=h;setColor(input,hsb,true)};var moveOpacity=function(input,event){var opacityPicker=input.data('opacityPicker');opacityPicker.hide();var position=event.pageY;if(event.originalEvent.changedTouches){position=event.originalEvent.changedTouches[0].pageY}position=position-input.data('selector').find('.miniColors-colors').offset().top-1;if(position<=-1)position=-1;if(position>=149)position=149;input.data('opacityPosition',position);opacityPicker.css('top',position).show();var alpha=parseFloat((150-position-1)/150).toFixed(2);if(alpha<0)alpha=0;if(alpha>1)alpha=1;input.data('alpha',alpha).attr('data-opacity',alpha);setColor(input,input.data('hsb'),true)};var setColor=function(input,hsb,updateInput){input.data('hsb',hsb);var hex=hsb2hex(hsb),selector=$(input.data('selector'));if(updateInput)input.val('#'+convertCase(hex,input.data('letterCase')));selector.find('.miniColors-colors').css('backgroundColor','#'+hsb2hex({h:hsb.h,s:100,b:100})).end().find('.miniColors-opacity').css('backgroundColor','#'+hex).end();var rgb=hsb2rgb(hsb);input.data('trigger').css('backgroundColor','#'+hex);if(input.data('opacity')){input.data('trigger').css('backgroundColor','rgba('+rgb.r+', '+rgb.g+', '+rgb.b+', '+input.attr('data-opacity')+')')}if(input.data('change')){if((hex+','+input.attr('data-opacity'))===input.data('lastChange'))return;input.data('change').call(input.get(0),'#'+hex,$.extend(hsb2rgb(hsb),{a:parseFloat(input.attr('data-opacity'))}));input.data('lastChange',hex+','+input.attr('data-opacity'))}};var setColorFromInput=function(input){input.val('#'+cleanHex(input.val()));var hex=expandHex(input.val());if(!hex)return false;var hsb=hex2hsb(hex);var colorPosition=getColorPositionFromHSB(hsb);var colorPicker=$(input.data('colorPicker'));colorPicker.css('top',colorPosition.y+'px').css('left',colorPosition.x+'px');input.data('colorPosition',colorPosition);var huePosition=getHuePositionFromHSB(hsb);var huePicker=$(input.data('huePicker'));huePicker.css('top',huePosition+'px');input.data('huePosition',huePosition);var opacityPosition=getOpacityPositionFromAlpha(input.attr('data-opacity'));var opacityPicker=$(input.data('opacityPicker'));opacityPicker.css('top',opacityPosition+'px');input.data('opacityPosition',opacityPosition);setColor(input,hsb);return true};var convertCase=function(string,letterCase){if(letterCase==='uppercase'){return string.toUpperCase()}else{return string.toLowerCase()}};var getColorPositionFromHSB=function(hsb){var x=Math.ceil(hsb.s/0.67);if(x<0)x=0;if(x>150)x=150;var y=150-Math.ceil(hsb.b/0.67);if(y<0)y=0;if(y>150)y=150;return{x:x-5,y:y-5}};var getHuePositionFromHSB=function(hsb){var y=150-(hsb.h/2.4);if(y<0)h=0;if(y>150)h=150;return y};var getOpacityPositionFromAlpha=function(alpha){var y=150*alpha;if(y<0)y=0;if(y>150)y=150;return 150-y};var cleanHex=function(hex){return hex.replace(/[^A-F0-9]/ig,'')};var expandHex=function(hex){hex=cleanHex(hex);if(!hex)return null;if(hex.length===3)hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];return hex.length===6?hex:null};var hsb2rgb=function(hsb){var rgb={};var h=Math.round(hsb.h);var s=Math.round(hsb.s*255/100);var v=Math.round(hsb.b*255/100);if(s===0){rgb.r=rgb.g=rgb.b=v}else{var t1=v;var t2=(255-s)*v/255;var t3=(t1-t2)*(h%60)/60;if(h===360)h=0;if(h<60){rgb.r=t1;rgb.b=t2;rgb.g=t2+t3}else if(h<120){rgb.g=t1;rgb.b=t2;rgb.r=t1-t3}else if(h<180){rgb.g=t1;rgb.r=t2;rgb.b=t2+t3}else if(h<240){rgb.b=t1;rgb.r=t2;rgb.g=t1-t3}else if(h<300){rgb.b=t1;rgb.g=t2;rgb.r=t2+t3}else if(h<360){rgb.r=t1;rgb.g=t2;rgb.b=t1-t3}else{rgb.r=0;rgb.g=0;rgb.b=0}}return{r:Math.round(rgb.r),g:Math.round(rgb.g),b:Math.round(rgb.b)}};var rgb2hex=function(rgb){var hex=[rgb.r.toString(16),rgb.g.toString(16),rgb.b.toString(16)];$.each(hex,function(nr,val){if(val.length===1)hex[nr]='0'+val});return hex.join('')};var hex2rgb=function(hex){hex=parseInt(((hex.indexOf('#')>-1)?hex.substring(1):hex),16);return{r:hex>>16,g:(hex&0x00FF00)>>8,b:(hex&0x0000FF)}};var rgb2hsb=function(rgb){var hsb={h:0,s:0,b:0};var min=Math.min(rgb.r,rgb.g,rgb.b);var max=Math.max(rgb.r,rgb.g,rgb.b);var delta=max-min;hsb.b=max;hsb.s=max!==0?255*delta/max:0;if(hsb.s!==0){if(rgb.r===max){hsb.h=(rgb.g-rgb.b)/delta}else if(rgb.g===max){hsb.h=2+(rgb.b-rgb.r)/delta}else{hsb.h=4+(rgb.r-rgb.g)/delta}}else{hsb.h=-1}hsb.h*=60;if(hsb.h<0){hsb.h+=360}hsb.s*=100/255;hsb.b*=100/255;return hsb};var hex2hsb=function(hex){var hsb=rgb2hsb(hex2rgb(hex));if(hsb.s===0)hsb.h=360;return hsb};var hsb2hex=function(hsb){return rgb2hex(hsb2rgb(hsb))};switch(o){case'readonly':$(this).each(function(){if(!$(this).hasClass('miniColors'))return;$(this).prop('readonly',data)});return $(this);case'disabled':$(this).each(function(){if(!$(this).hasClass('miniColors'))return;if(data){disable($(this))}else{enable($(this))}});return $(this);case'value':if(data===undefined){if(!$(this).hasClass('miniColors'))return;var input=$(this),hex=expandHex(input.val());return hex?'#'+convertCase(hex,input.data('letterCase')):null}$(this).each(function(){if(!$(this).hasClass('miniColors'))return;$(this).val(data);setColorFromInput($(this))});return $(this);case'opacity':if(data===undefined){if(!$(this).hasClass('miniColors'))return;if($(this).data('opacity')){return parseFloat($(this).attr('data-opacity'))}else{return null}}$(this).each(function(){if(!$(this).hasClass('miniColors'))return;if(data<0)data=0;if(data>1)data=1;$(this).attr('data-opacity',data).data('alpha',data);setColorFromInput($(this))});return $(this);case'destroy':$(this).each(function(){if(!$(this).hasClass('miniColors'))return;destroy($(this))});return $(this);default:if(!o)o={};$(this).each(function(){if($(this)[0].tagName.toLowerCase()!=='input')return;if($(this).data('trigger'))return;create($(this),o,data)});return $(this)}}})})(jQuery);jquery-minicolors-1.2.1/readme.md000066400000000000000000000055221202561156600167750ustar00rootroot00000000000000# jQuery miniColors: A small color selector _Copyright 2012 Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/)_ _Dual licensed under the MIT / GPLv2 licenses_ ## Demo http://labs.abeautifulsite.net/jquery-miniColors/ ## Usage 1. Link to jQuery: `` 2. Link to miniColors: `` 3. Include miniColors stylesheet: `` 4. Apply $([selector]).miniColors() to one or more INPUT elements ## Options * __disabled__ _[true,false]_ - Disables the control on init * __readonly__ _[true,false]_ - Makes the control read-only on init * __opacity__ _[true, false]_ - Enables/disables the opacity slider ## Specify options on creation: $([selector]).miniColors({ optionName: value, optionName: value, ... }); __Preset color:__ __Preset color and opacity:__ ## Methods Methods are called using this syntax: $([selector]).miniColors('methodName', [value]); ### Available Methods * __letterCase__ _[uppercase|lowercase|null]_ - forces the hex value into upper or lowercase * __disabled__ _[true|false]_ - sets the disabled status * __readonly__ _[true|false]_ - sets the readonly status * __opacity__ _(none)_ - gets the opacity level (0-1) * __opacity__ _(0-1)_ - sets the opacity level * __value__ _(none)_ - gets the current value; guaranteed to return a valid hex color * __value__ _[hex value]_ - sets the control's value * __destroy__ _(none)_ ## Events * __change__*(hex, rgb)* - called when the color value changes * __open__*(hex, rgb)* - called when the color picker is opened * __close__*(hex, rgb)* - called when the color picker is hidden * In all callbacks, `this` refers to the original input element. * `hex` is the hex color code of the selected color * `rgb` is an object containing red, green, and blue values; if opacity is enabled, it will also contain an alpha value (rgb.a) ### Examples // Get hex color code on change $([selector]).miniColors({ change: function(hex, rgb) { console.log(hex); } }); // Get RGBA values on change $([selector]).miniColors({ opacity: true, change: function(hex, rgba) { console.log('rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')'); } }); ## Known Issues * IE7/8 do not show opacity in the trigger since it uses RGBA ## Attribution * The color picker icon is based on an icon from the amazing Fugue icon set: http://p.yusukekamiyamane.com/ * The gradient image, the hue image, and the math functions are courtesy of the eyecon.co jQuery color picker: http://www.eyecon.ro/colorpicker/