Skip to content
This repository has been archived by the owner on Apr 8, 2022. It is now read-only.

Commit

Permalink
added support for custom picker size and custom picker class. fixes #84
Browse files Browse the repository at this point in the history
  • Loading branch information
Javi Aguilar committed May 20, 2015
1 parent c9c5717 commit 0a6a7ce
Show file tree
Hide file tree
Showing 10 changed files with 179 additions and 10 deletions.
6 changes: 6 additions & 0 deletions dist/css/bootstrap-colorpicker.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@
background-image: url("../img/bootstrap-colorpicker/alpha.png");
}

.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha {
background-size: contain;
}

.colorpicker {
top: 0;
left: 0;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap-colorpicker.min.css
View file

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

9 changes: 7 additions & 2 deletions dist/js/bootstrap-colorpicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -595,12 +595,14 @@
'<div class="colorpicker-hue"><i></i></div>' +
'<div class="colorpicker-alpha"><i></i></div>' +
'<div class="colorpicker-color"><div /></div>' +
'</div>'
'</div>',
align: 'right',
customClass: null
};

var Colorpicker = function(element, options) {
this.element = $(element).addClass('colorpicker-element');
this.options = $.extend({}, defaults, this.element.data(), options);
this.options = $.extend(true, {}, defaults, this.element.data(), options);
this.component = this.options.component;
this.component = (this.component !== false) ? this.element.find(this.component) : false;
if (this.component && (this.component.length === 0)) {
Expand All @@ -621,6 +623,9 @@

// Setup picker
this.picker = $(this.options.template);
if (this.options.customClass) {
this.picker.addClass(this.options.customClass);
}
if (this.options.inline) {
this.picker.addClass('colorpicker-inline colorpicker-visible');
} else {
Expand Down
2 changes: 1 addition & 1 deletion dist/js/bootstrap-colorpicker.min.js
View file

Large diffs are not rendered by default.

71 changes: 69 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,12 @@ <h2>Examples</h2>

<p>Transparent color support:</p>
<div class="well">
<input type="text" data-format="hex" class="form-control demo demo-auto" id="demo_transparent" value="transparent">
<input type="text" data-format="hex" class="form-control demo demo-auto" id="demo_transparent" value="transparent" />
</div>

<p>Horizonal mode:</p>
<div class="well">
<input type="text" class="form-control demo" data-horizontal="true" id="demo_forceformat" value="#8fff00">
<input type="text" class="form-control demo" data-horizontal="true" id="demo_forceformat" value="#8fff00" />
</div>

<p>Inline mode:</p>
Expand All @@ -127,6 +127,67 @@ <h2>Examples</h2>
<div class="demo demo-auto inl-bl" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div>
</div>

<p>Custom widget size:</p>
<div class="well">
<style>
.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}

.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}

.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
height: 30px;
}
</style>
<input type="text" class="form-control demo" id="demo_size" value="#ffaa00" />
<pre class="markup">
&lt;input type="text" id="demo_size" value="#ffaa00" /&gt;

&lt;style&gt;
.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div{
height: 30px;
}
&lt;/style&gt;

&lt;script&gt;
$(function(){
$('#demo_size').colorpicker({
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});
});
&lt;/script&gt;
</pre>
</div>

<p>Enabled / disabled</p>
<div class="well">
<div id="demo_endis" class="input-group demo demo-auto colorpicker-component">
Expand Down Expand Up @@ -253,6 +314,12 @@ <h3>Options</h3>
<td>'right'</td>
<td>By default, the colorpicker is aligned to the right of the input. If you need to switch it to the left, set align to 'left'.</td>
</tr>
<tr>
<td>customClass</td>
<td>string</td>
<td>null</td>
<td>Adds this class to the colorpicker widget.</td>
</tr>
</tbody>
</table>

Expand Down
6 changes: 6 additions & 0 deletions src/docs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,12 @@ <h3>Options</h3>
<td>'right'</td>
<td>By default, the colorpicker is aligned to the right of the input. If you need to switch it to the left, set align to 'left'.</td>
</tr>
<tr>
<td>customClass</td>
<td>string</td>
<td>null</td>
<td>Adds this class to the colorpicker widget.</td>
</tr>
</tbody>
</table>

Expand Down
63 changes: 61 additions & 2 deletions src/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ <h2>Examples</h2>

<p>Transparent color support:</p>
<div class="well">
<input type="text" data-format="hex" class="form-control demo demo-auto" id="demo_transparent" value="transparent" >
<input type="text" data-format="hex" class="form-control demo demo-auto" id="demo_transparent" value="transparent" />
</div>

<p>Horizonal mode:</p>
<div class="well">
<input type="text" class="form-control demo" data-horizontal="true" id="demo_forceformat" value="#8fff00" >
<input type="text" class="form-control demo" data-horizontal="true" id="demo_forceformat" value="#8fff00" />
</div>

<p>Inline mode:</p>
Expand All @@ -53,6 +53,65 @@ <h2>Examples</h2>
<div class="demo demo-auto inl-bl" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div>
</div>

<p>Custom widget size:</p>
<div class="well">
<style>
.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div{
height: 30px;
}
</style>
<input type="text" class="form-control demo" id="demo_size" value="#ffaa00" />
<pre class="markup">
&lt;input type="text" id="demo_size" value="#ffaa00" /&gt;

&lt;style&gt;
.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div{
height: 30px;
}
&lt;/style&gt;

&lt;script&gt;
$(function(){
$('#demo_size').colorpicker({
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});
});
&lt;/script&gt;
</pre>
</div>

<p>Enabled / disabled</p>
<div class="well">
<div id="demo_endis" class="input-group demo demo-auto colorpicker-component">
Expand Down
9 changes: 7 additions & 2 deletions src/js/colorpicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,14 @@
'<div class="colorpicker-hue"><i></i></div>' +
'<div class="colorpicker-alpha"><i></i></div>' +
'<div class="colorpicker-color"><div /></div>' +
'</div>'
'</div>',
align: 'right',
customClass: null
};

var Colorpicker = function(element, options) {
this.element = $(element).addClass('colorpicker-element');
this.options = $.extend({}, defaults, this.element.data(), options);
this.options = $.extend(true, {}, defaults, this.element.data(), options);
this.component = this.options.component;
this.component = (this.component !== false) ? this.element.find(this.component) : false;
if (this.component && (this.component.length === 0)) {
Expand All @@ -101,6 +103,9 @@

// Setup picker
this.picker = $(this.options.template);
if (this.options.customClass) {
this.picker.addClass(this.options.customClass);
}
if (this.options.inline) {
this.picker.addClass('colorpicker-inline colorpicker-visible');
} else {
Expand Down
16 changes: 16 additions & 0 deletions src/js/docs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,22 @@ $(function() {

$('.demo-auto').colorpicker();

$('#demo_size').colorpicker({
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});

// Disabled / enabled triggers
$(".disable-button").click(function(e) {
e.preventDefault();
Expand Down
5 changes: 5 additions & 0 deletions src/less/colorpicker.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,11 @@
.bgImg('alpha.png');
display: none;
}
.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha{
background-size: contain;
}
.colorpicker {
*zoom: 1;
top: 0;
Expand Down

0 comments on commit 0a6a7ce

Please sign in to comment.