From 6e5c849400b5b1733bb2a232fac03930f937174f Mon Sep 17 00:00:00 2001 From: Dave Perrett Date: Sat, 12 Oct 2013 14:00:56 +1300 Subject: [PATCH] Add a setColor() method to select a color programatically. --- README.markdown | 7 ++++++ examples/index.html | 5 +++++ jquery.simple-color.js | 44 ++++++++++++++++++++++++++------------ jquery.simple-color.min.js | 15 +++++++------ src/jquery.simple-color.js | 42 +++++++++++++++++++++++++----------- 5 files changed, 79 insertions(+), 34 deletions(-) diff --git a/README.markdown b/README.markdown index f3f1164..2ca1aa4 100644 --- a/README.markdown +++ b/README.markdown @@ -52,6 +52,12 @@ If you wish to programatically close a color chooser, use the closeChooser() fun $('.simple_color').closeChooser(); ``` +If you wish to programatically set the color, use the setColor() function: + +```javascript +$('.simple_color').setColor('#cc3333'); +``` + Options ------- @@ -179,6 +185,7 @@ Change history * **Version 1.2.0 (2013-10-12)** : * Fix line-height bug when boxHeight option is used. * Fix color selection bug when chooser is closed without selecting a color. + * Add a setColor() method to select a color programatically. * **Version 1.1.5 (2013-10-12)** : * Add bower support. * Add displayCSS and chooserCSS options, and remove the border option. diff --git a/examples/index.html b/examples/index.html index 96fc3b1..4e7b81d 100644 --- a/examples/index.html +++ b/examples/index.html @@ -13,6 +13,10 @@ $('input').closeChooser(); }); + $('.set_color_button').click(function(event) { + $('input').setColor('#cc3333'); + }); + $('.simple_color').simpleColor(); $('.simple_color_color_code').simpleColor({ displayColorCode: true }); @@ -62,6 +66,7 @@ +

Basic

diff --git a/jquery.simple-color.js b/jquery.simple-color.js index 2957007..ef36d17 100644 --- a/jquery.simple-color.js +++ b/jquery.simple-color.js @@ -7,7 +7,7 @@ * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * - * Version: 1.2.0 (201310121342) + * Version: 1.2.0 (201310121400) */ (function($) { /** @@ -198,6 +198,7 @@ // If 'displayColorCode' is turned on, display the currently selected color code as text inside the button. if (options.displayColorCode) { + displayBox.data('displayColorCode', true); displayBox.text(this.value); displayBox.css({ 'color': options.colorCodeColor, @@ -216,7 +217,7 @@ // Makes sure the selected cell is within the current color chooser. var target = $(e.target); if (target.is('.simpleColorCell') === false || $.contains( $(event.target).closest('.simpleColorContainer')[0], target[0]) === false) { - displayBox.css('backgroundColor', displayBox.data('color')); + displayBox.css('background-color', displayBox.data('color')); if (options.displayColorCode) { displayBox.text(displayBox.data('color')); } @@ -244,14 +245,14 @@ for (var i=0; i"); cell.css({ - 'width': options.cellWidth + 'px', - 'height': options.cellHeight + 'px', - 'margin': options.cellMargin + 'px', - 'cursor': 'pointer', - 'lineHeight': options.cellHeight + 'px', - 'fontSize': '1px', - 'float': 'left', - 'backgroundColor': '#'+options.colors[i] + 'width': options.cellWidth + 'px', + 'height': options.cellHeight + 'px', + 'margin': options.cellMargin + 'px', + 'cursor': 'pointer', + 'lineHeight': options.cellHeight + 'px', + 'fontSize': '1px', + 'float': 'left', + 'background-color': '#'+options.colors[i] }); chooser.append(cell); if (options.onCellEnter || options.livePreview) { @@ -260,7 +261,7 @@ options.onCellEnter(this.id, element); } if (options.livePreview) { - displayBox.css('backgroundColor', '#' + this.id); + displayBox.css('background-color', '#' + this.id); if (options.displayColorCode) { displayBox.text('#' + this.id); } @@ -277,7 +278,7 @@ event.data.input.value = color; $(event.data.input).change(); $(event.data.displayBox).data('color', color); - event.data.displayBox.css('backgroundColor', color); + event.data.displayBox.css('background-color', color); event.data.chooser.hide(); // If 'displayColorCode' is turned on, display the currently selected color code as text inside the button. @@ -303,6 +304,7 @@ displayBox.bind('click', callbackParams, selectCallback); $(this).after(container); + $(this).data('container', container); }; this.each(buildChooser); @@ -321,8 +323,22 @@ */ $.fn.closeChooser = function() { this.each( function(index) { - var container = $(this).parent().find('div.simpleColorContainer'); - container.find('.simpleColorChooser').hide(); + $(this).data('container').find('.simpleColorChooser').hide(); + }); + + return this; + }; + + /* + * Set the color of the given color choosers. + */ + $.fn.setColor = function(color) { + this.each( function(index) { + var displayBox = $(this).data('container').find('.simpleColorDisplay'); + displayBox.css('background-color', color).data('color', color); + if (displayBox.data('displayColorCode') === true) { + displayBox.text(color); + } }); return this; diff --git a/jquery.simple-color.min.js b/jquery.simple-color.min.js index 5281999..346fdc4 100644 --- a/jquery.simple-color.min.js +++ b/jquery.simple-color.min.js @@ -7,16 +7,17 @@ * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * - * Version: 1.2.0 (201310121342) + * Version: 1.2.0 (201310121400) */ -(function(b){b.fn.simpleColor=function(a){var k=this,m=["990033","ff3366","cc0033","ff0033","ff9999","cc3366","ffccff","cc6699","993366","660033","cc3399","ff99cc","ff66cc","ff99ff","ff6699","cc0066","ff0066","ff3399","ff0099","ff33cc","ff00cc","ff66ff","ff33ff","ff00ff","cc0099","990066","cc66cc","cc33cc","cc99ff","cc66ff","cc33ff","993399","cc00cc","cc00ff","9900cc","990099","cc99cc","996699","663366","660099","9933cc","660066","9900ff","9933ff","9966cc","330033","663399","6633cc","6600cc","9966ff", +(function(b){b.fn.simpleColor=function(a){var e=this,m=["990033","ff3366","cc0033","ff0033","ff9999","cc3366","ffccff","cc6699","993366","660033","cc3399","ff99cc","ff66cc","ff99ff","ff6699","cc0066","ff0066","ff3399","ff0099","ff33cc","ff00cc","ff66ff","ff33ff","ff00ff","cc0099","990066","cc66cc","cc33cc","cc99ff","cc66ff","cc33ff","993399","cc00cc","cc00ff","9900cc","990099","cc99cc","996699","663366","660099","9933cc","660066","9900ff","9933ff","9966cc","330033","663399","6633cc","6600cc","9966ff", "330066","6600ff","6633ff","ccccff","9999ff","9999cc","6666cc","6666ff","666699","333366","333399","330099","3300cc","3300ff","3333ff","3333cc","0066ff","0033ff","3366ff","3366cc","000066","000033","0000ff","000099","0033cc","0000cc","336699","0066cc","99ccff","6699ff","003366","6699cc","006699","3399cc","0099cc","66ccff","3399ff","003399","0099ff","33ccff","00ccff","99ffff","66ffff","33ffff","00ffff","00cccc","009999","669999","99cccc","ccffff","33cccc","66cccc","339999","336666","006666","003333", "00ffcc","33ffcc","33cc99","00cc99","66ffcc","99ffcc","00ff99","339966","006633","336633","669966","66cc66","99ff99","66ff66","339933","99cc99","66ff99","33ff99","33cc66","00cc66","66cc99","009966","009933","33ff66","00ff66","ccffcc","ccff99","99ff66","99ff33","00ff33","33ff33","00cc33","33cc33","66ff33","00ff00","66cc33","006600","003300","009900","33ff00","66ff00","99ff00","66cc00","00cc00","33cc00","339900","99cc66","669933","99cc33","336600","669900","99cc00","ccff66","ccff33","ccff00","999900", "cccc00","cccc33","333300","666600","999933","cccc66","666633","999966","cccc99","ffffcc","ffff99","ffff66","ffff33","ffff00","ffcc00","ffcc66","ffcc33","cc9933","996600","cc9900","ff9900","cc6600","993300","cc6633","663300","ff9966","ff6633","ff9933","ff6600","cc3300","996633","330000","663333","996666","cc9999","993333","cc6666","ffcccc","ff3333","cc3333","ff6666","660000","990000","cc0000","ff0000","ff3300","cc9966","ffcc99","ffffff","cccccc","999999","666666","333333","000000","000000","000000", "000000","000000","000000","000000","000000","000000"];a=b.extend({defaultColor:this.attr("defaultColor")||"#FFF",cellWidth:this.attr("cellWidth")||10,cellHeight:this.attr("cellHeight")||10,cellMargin:this.attr("cellMargin")||1,boxWidth:this.attr("boxWidth")||"115px",boxHeight:this.attr("boxHeight")||"20px",columns:this.attr("columns")||16,insert:this.attr("insert")||"after",colors:this.attr("colors")||m,displayColorCode:this.attr("displayColorCode")||false,colorCodeAlign:this.attr("colorCodeAlign")|| "center",colorCodeColor:this.attr("colorCodeColor")||"#FFF",onSelect:null,onCellEnter:null,onClose:null,livePreview:false},a||{});a.totalWidth=a.columns*(a.cellWidth+2*a.cellMargin);a.chooserCSS=b.extend({border:"1px solid #000",margin:"0 0 0 5px",width:a.totalWidth,height:a.totalHeight,top:0,left:a.boxWidth,position:"absolute","background-color":"#fff"},a.chooserCSS||{});a.displayCSS=b.extend({"background-color":a.defaultColor,border:"1px solid #000",width:a.boxWidth,height:a.boxHeight,"line-height":a.boxHeight+ -"px",cursor:"pointer"},a.displayCSS||{});this.hide();if(navigator.userAgent.indexOf("MSIE")!=-1)a.totalWidth+=2;a.totalHeight=Math.ceil(a.colors.length/a.columns)*(a.cellHeight+2*a.cellMargin);b.simpleColorOptions=a;this.each(function(){a=b.simpleColorOptions;var e=b("
");e.css("position","relative");var l=this.value&&this.value!=""?this.value:a.defaultColor,c=b("
");c.css(b.extend(a.displayCSS,{"background-color":l}));c.data("color", -l);e.append(c);if(a.displayColorCode){c.text(this.value);c.css({color:a.colorCodeColor,textAlign:a.colorCodeAlign})}c.bind("click",{input:this,container:e,displayBox:c},function(f){b("html").bind("click.simpleColorDisplay",function(d){b("html").unbind("click.simpleColorDisplay");b(".simpleColorChooser").hide();d=b(d.target);if(d.is(".simpleColorCell")===false||b.contains(b(f.target).closest(".simpleColorContainer")[0],d[0])===false){c.css("backgroundColor",c.data("color"));a.displayColorCode&&c.text(c.data("color"))}a.onClose&& -a.onClose(k)});if(f.data.container.chooser)f.data.container.chooser.toggle();else{var g=b("
");g.css(a.chooserCSS);f.data.container.chooser=g;f.data.container.append(g);for(var h=0;h");i.css({width:a.cellWidth+"px",height:a.cellHeight+"px",margin:a.cellMargin+"px",cursor:"pointer",lineHeight:a.cellHeight+"px",fontSize:"1px","float":"left",backgroundColor:"#"+a.colors[h]});g.append(i); -if(a.onCellEnter||a.livePreview)i.bind("mouseenter",function(){a.onCellEnter&&a.onCellEnter(this.id,k);if(a.livePreview){c.css("backgroundColor","#"+this.id);a.displayColorCode&&c.text("#"+this.id)}});i.bind("click",{input:f.data.input,chooser:g,displayBox:c},function(d){var j="#"+this.id;d.data.input.value=j;b(d.data.input).change();b(d.data.displayBox).data("color",j);d.data.displayBox.css("backgroundColor",j);d.data.chooser.hide();a.displayColorCode&&d.data.displayBox.text(j);a.onSelect&&a.onSelect(this.id, -k)})}}});b(this).after(e)});b(".simpleColorDisplay").each(function(){b(this).click(function(e){e.stopPropagation()})});return this};b.fn.closeChooser=function(){this.each(function(){b(this).parent().find("div.simpleColorContainer").find(".simpleColorChooser").hide()});return this}})(jQuery); +"px",cursor:"pointer"},a.displayCSS||{});this.hide();if(navigator.userAgent.indexOf("MSIE")!=-1)a.totalWidth+=2;a.totalHeight=Math.ceil(a.colors.length/a.columns)*(a.cellHeight+2*a.cellMargin);b.simpleColorOptions=a;this.each(function(){a=b.simpleColorOptions;var f=b("
");f.css("position","relative");var l=this.value&&this.value!=""?this.value:a.defaultColor,c=b("
");c.css(b.extend(a.displayCSS,{"background-color":l}));c.data("color", +l);f.append(c);if(a.displayColorCode){c.data("displayColorCode",true);c.text(this.value);c.css({color:a.colorCodeColor,textAlign:a.colorCodeAlign})}c.bind("click",{input:this,container:f,displayBox:c},function(g){b("html").bind("click.simpleColorDisplay",function(d){b("html").unbind("click.simpleColorDisplay");b(".simpleColorChooser").hide();d=b(d.target);if(d.is(".simpleColorCell")===false||b.contains(b(g.target).closest(".simpleColorContainer")[0],d[0])===false){c.css("background-color",c.data("color")); +a.displayColorCode&&c.text(c.data("color"))}a.onClose&&a.onClose(e)});if(g.data.container.chooser)g.data.container.chooser.toggle();else{var h=b("
");h.css(a.chooserCSS);g.data.container.chooser=h;g.data.container.append(h);for(var i=0;i");j.css({width:a.cellWidth+"px",height:a.cellHeight+"px",margin:a.cellMargin+"px",cursor:"pointer",lineHeight:a.cellHeight+"px",fontSize:"1px","float":"left", +"background-color":"#"+a.colors[i]});h.append(j);if(a.onCellEnter||a.livePreview)j.bind("mouseenter",function(){a.onCellEnter&&a.onCellEnter(this.id,e);if(a.livePreview){c.css("background-color","#"+this.id);a.displayColorCode&&c.text("#"+this.id)}});j.bind("click",{input:g.data.input,chooser:h,displayBox:c},function(d){var k="#"+this.id;d.data.input.value=k;b(d.data.input).change();b(d.data.displayBox).data("color",k);d.data.displayBox.css("background-color",k);d.data.chooser.hide();a.displayColorCode&& +d.data.displayBox.text(k);a.onSelect&&a.onSelect(this.id,e)})}}});b(this).after(f);b(this).data("container",f)});b(".simpleColorDisplay").each(function(){b(this).click(function(f){f.stopPropagation()})});return this};b.fn.closeChooser=function(){this.each(function(){b(this).data("container").find(".simpleColorChooser").hide()});return this};b.fn.setColor=function(a){this.each(function(){var e=b(this).data("container").find(".simpleColorDisplay");e.css("background-color",a).data("color",a);e.data("displayColorCode")=== +true&&e.text(a)});return this}})(jQuery); diff --git a/src/jquery.simple-color.js b/src/jquery.simple-color.js index 8184e94..0bd642a 100644 --- a/src/jquery.simple-color.js +++ b/src/jquery.simple-color.js @@ -198,6 +198,7 @@ // If 'displayColorCode' is turned on, display the currently selected color code as text inside the button. if (options.displayColorCode) { + displayBox.data('displayColorCode', true); displayBox.text(this.value); displayBox.css({ 'color': options.colorCodeColor, @@ -216,7 +217,7 @@ // Makes sure the selected cell is within the current color chooser. var target = $(e.target); if (target.is('.simpleColorCell') === false || $.contains( $(event.target).closest('.simpleColorContainer')[0], target[0]) === false) { - displayBox.css('backgroundColor', displayBox.data('color')); + displayBox.css('background-color', displayBox.data('color')); if (options.displayColorCode) { displayBox.text(displayBox.data('color')); } @@ -244,14 +245,14 @@ for (var i=0; i"); cell.css({ - 'width': options.cellWidth + 'px', - 'height': options.cellHeight + 'px', - 'margin': options.cellMargin + 'px', - 'cursor': 'pointer', - 'lineHeight': options.cellHeight + 'px', - 'fontSize': '1px', - 'float': 'left', - 'backgroundColor': '#'+options.colors[i] + 'width': options.cellWidth + 'px', + 'height': options.cellHeight + 'px', + 'margin': options.cellMargin + 'px', + 'cursor': 'pointer', + 'lineHeight': options.cellHeight + 'px', + 'fontSize': '1px', + 'float': 'left', + 'background-color': '#'+options.colors[i] }); chooser.append(cell); if (options.onCellEnter || options.livePreview) { @@ -260,7 +261,7 @@ options.onCellEnter(this.id, element); } if (options.livePreview) { - displayBox.css('backgroundColor', '#' + this.id); + displayBox.css('background-color', '#' + this.id); if (options.displayColorCode) { displayBox.text('#' + this.id); } @@ -277,7 +278,7 @@ event.data.input.value = color; $(event.data.input).change(); $(event.data.displayBox).data('color', color); - event.data.displayBox.css('backgroundColor', color); + event.data.displayBox.css('background-color', color); event.data.chooser.hide(); // If 'displayColorCode' is turned on, display the currently selected color code as text inside the button. @@ -303,6 +304,7 @@ displayBox.bind('click', callbackParams, selectCallback); $(this).after(container); + $(this).data('container', container); }; this.each(buildChooser); @@ -321,8 +323,22 @@ */ $.fn.closeChooser = function() { this.each( function(index) { - var container = $(this).parent().find('div.simpleColorContainer'); - container.find('.simpleColorChooser').hide(); + $(this).data('container').find('.simpleColorChooser').hide(); + }); + + return this; + }; + + /* + * Set the color of the given color choosers. + */ + $.fn.setColor = function(color) { + this.each( function(index) { + var displayBox = $(this).data('container').find('.simpleColorDisplay'); + displayBox.css('background-color', color).data('color', color); + if (displayBox.data('displayColorCode') === true) { + displayBox.text(color); + } }); return this;