Skip to content

Commit

Permalink
Add a setColor() method to select a color programatically.
Browse files Browse the repository at this point in the history
  • Loading branch information
@recurser
recurser committed Oct 12, 2013
1 parent b663c85 commit 6e5c849
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 34 deletions.
7 changes: 7 additions & 0 deletions README.markdown
View file
Expand Up @@ -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
-------

Expand Down Expand Up @@ -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.
Expand Down
5 changes: 5 additions & 0 deletions examples/index.html
View file
Expand Up @@ -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 });
Expand Down Expand Up @@ -62,6 +66,7 @@

<body>
<button class='close_button'>Close all color choosers</button>
<button class='set_color_button'>Set all to red</button>

<h3>Basic</h3>
<input class='simple_color' value='#cc3333'/>
Expand Down
44 changes: 30 additions & 14 deletions jquery.simple-color.js
View file
Expand Up @@ -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($) {
/**
Expand Down Expand Up @@ -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,
Expand All @@ -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'));
}
Expand Down Expand Up @@ -244,14 +245,14 @@
for (var i=0; i<options.colors.length; i++) {
var cell = $("<div class='simpleColorCell' id='" + options.colors[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) {
Expand All @@ -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);
}
Expand All @@ -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.
Expand All @@ -303,6 +304,7 @@
displayBox.bind('click', callbackParams, selectCallback);

$(this).after(container);
$(this).data('container', container);
};

this.each(buildChooser);
Expand All @@ -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;
Expand Down
15 changes: 8 additions & 7 deletions jquery.simple-color.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 29 additions & 13 deletions src/jquery.simple-color.js
View file
Expand Up @@ -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,
Expand All @@ -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'));
}
Expand Down Expand Up @@ -244,14 +245,14 @@
for (var i=0; i<options.colors.length; i++) {
var cell = $("<div class='simpleColorCell' id='" + options.colors[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) {
Expand All @@ -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);
}
Expand All @@ -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.
Expand All @@ -303,6 +304,7 @@
displayBox.bind('click', callbackParams, selectCallback);

$(this).after(container);
$(this).data('container', container);
};

this.each(buildChooser);
Expand All @@ -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;
Expand Down

0 comments on commit 6e5c849

Please sign in to comment.