Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Removed trailing whitespace

  • Loading branch information...
commit 22a37f5c8e6c369de3c9e805b3c8126b36764681 1 parent c4060b4
@claviska authored
Showing with 221 additions and 221 deletions.
  1. +83 −83 index.html
  2. +1 −1  jquery.minicolors.css
  3. +137 −137 jquery.minicolors.js
View
166 index.html
@@ -3,18 +3,18 @@
<head>
<title>jQuery MiniColors</title>
<meta charset="utf-8">
-
+
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-
+
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
-
+
<!-- MiniColors -->
<script src="jquery.minicolors.js"></script>
<link rel="stylesheet" href="jquery.minicolors.css">
-
+
<style>
dl {
margin: 20px 0;
@@ -46,18 +46,18 @@
color: #aaa;
}
</style>
-
+
<script>
$(document).ready( function() {
-
+
$('.demo').each( function() {
//
// Dear reader, it's actually very easy to initialize MiniColors. For example:
//
// $(selector).minicolors();
//
- // The way I've done it below is just for the demo, so don't get confused
- // by it. Also, data- attributes aren't supported at this time...they're
+ // The way I've done it below is just for the demo, so don't get confused
+ // by it. Also, data- attributes aren't supported at this time...they're
// only used for this demo.
//
$(this).minicolors({
@@ -76,16 +76,16 @@
},
theme: 'bootstrap'
});
-
+
});
-
+
});
</script>
</head>
<body>
<div class="row" style="margin: 40px 40px;">
<div class="col-12">
-
+
<!-- Intro -->
<div id="intro" class="jumbotron">
<h1>jQuery MiniColors 2.1</h1>
@@ -97,7 +97,7 @@
originally developed for <a href="http://www.surrealcms.com/">Surreal CMS</a>.
</p>
</div>
-
+
<!-- Contents -->
<h2 id="contents">Contents</h2>
<ul>
@@ -113,17 +113,17 @@ <h2 id="contents">Contents</h2>
</li>
<li><a href="#license">License</a></li>
</ul>
-
+
<!-- Download -->
<h2 id="download">Download</h2>
<p>
- This project is on GitHub. Feel free to post bug reports, feature requests, and code
+ This project is on GitHub. Feel free to post bug reports, feature requests, and code
improvements on the official project page.
</p>
<p>
<a href="https://github.com/claviska/jquery-minicolors" class="btn btn-success">Download on GitHub</a>
</p>
-
+
<!-- Demos -->
<h2 id="demos">Demos</h2>
<p>
@@ -133,13 +133,13 @@ <h2 id="demos">Demos</h2>
<p>
<a href="without-bootstrap.html" class="btn btn-primary">View Demo Without Bootstrap</a>
</p>
-
+
<!-- Control types -->
<h3>Control Types</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
-
+
<div class="form-group">
<label for="hue-demo">Hue (default)</label>
<input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
@@ -149,7 +149,7 @@ <h2 id="demos">Demos</h2>
<input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
</div>
</div>
-
+
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="brightness-demo">Brightness</label>
@@ -162,7 +162,7 @@ <h2 id="demos">Demos</h2>
</div>
</div>
</div>
-
+
<!-- Input modes -->
<h3>Input Modes</h3>
<div class="well">
@@ -188,12 +188,12 @@ <h2 id="demos">Demos</h2>
</div>
</div>
</div>
-
+
<!-- Positions -->
<h3>Positions</h3>
<div class="well">
<p>
- Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
+ Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
left</code>, and <code>top right</code>.
</p>
<div class="row">
@@ -221,7 +221,7 @@ <h2 id="demos">Demos</h2>
</div>
</div>
</div>
-
+
<!-- and more -->
<h3>&hellip;and more!</h3>
<div class="well">
@@ -232,7 +232,7 @@ <h2 id="demos">Demos</h2>
<br>
<input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8">
<span class="help-block">
- Opacity can be assigned by including the <code>data-opacity</code> attribute
+ Opacity can be assigned by including the <code>data-opacity</code> attribute
or by setting the <code>opacity</code> option to <code>true</code>.
</span>
</div>
@@ -259,20 +259,20 @@ <h2 id="demos">Demos</h2>
</div>
</div>
</div>
-
+
<!-- API -->
<h2 id="api">API</h2>
-
+
<!-- Instantiation -->
<h3 id="instantiation">Instantiation</h3>
<p>
Instantiate like any other jQuery plugin:
</p>
<pre>$('INPUT.minicolors').minicolors(settings);</pre>
-
+
<!-- Settings -->
<h3 id="settings">Settings</h3>
-
+
<p>
Default settings are as follows:
</p>
@@ -314,113 +314,113 @@ <h3 id="settings">Settings</h3>
});
</pre>
<p class="alert alert-warning">
- <strong>Note:</strong> Changing default settings will <em>not</em> affect controls that
+ <strong>Note:</strong> Changing default settings will <em>not</em> affect controls that
are already initialized.
- </p>
-
-
-
+ </p>
+
+
+
<dl>
<dt>animationSpeed</dt>
<dd>
<p>
- The animation speed of the sliders when the user taps or clicks a new color. Set to
+ The animation speed of the sliders when the user taps or clicks a new color. Set to
<code>0</code> for no animation.
</p>
</dd>
-
+
<dt>animationEasing</dt>
<dd>
<p>
The easing to use when animating the sliders.
</p>
</dd>
-
+
<dt>changeDelay</dt>
<dd>
<p>
- The time, in milliseconds, to defer the <code>change</code> event from firing while
- the user makes a selection. This is useful for preventing the <code>change</code> event
+ The time, in milliseconds, to defer the <code>change</code> event from firing while
+ the user makes a selection. This is useful for preventing the <code>change</code> event
from firing frequently as the user drags the color picker around.
</p>
<p>
- The default value is <code>0</code> (no delay). If your <code>change</code> callback
- features something resource-intensive (such as an AJAX request), you’ll probably want
+ The default value is <code>0</code> (no delay). If your <code>change</code> callback
+ features something resource-intensive (such as an AJAX request), you’ll probably want
to set this to at least <code>200</code>.
</p>
</dd>
-
+
<dt>control</dt>
<dd>
<p>
- Determines the type of control. Valid options are <code>hue</code>, <code>brightness</code>,
+ Determines the type of control. Valid options are <code>hue</code>, <code>brightness</code>,
<code>saturation</code>, and <code>wheel</code>.
</p>
</dd>
-
+
<dt>defaultValue</dt>
<dd>
<p>
- To force a default color, set this to a valid hex string. When the user clears the
+ To force a default color, set this to a valid hex string. When the user clears the
control, it will revert to this color.
</p>
</dd>
-
+
<dt>hideSpeed &amp; showSpeed</dt>
<dd>
<p>
The speed at which to hide and show the color picker.
</p>
</dd>
-
+
<dt>inline</dt>
<dd>
<p>
Set to <code>true</code> to force the color picker to appear inline.
</p>
</dd>
-
+
<dt>letterCase</dt>
<dd>
<p>
- Determines the letter case of the hex code value. Valid options are <code>uppercase</code>
+ Determines the letter case of the hex code value. Valid options are <code>uppercase</code>
or <code>lowercase</code>.
</p>
</dd>
-
+
<dt>opacity</dt>
<dd>
<p>
- Set to <code>true</code> to enable the opacity slider. (Use the input element's
+ Set to <code>true</code> to enable the opacity slider. (Use the input element's
<code>data-opacity</code> attribute to set a preset value.)
</p>
</dd>
-
+
<dt>position</dt>
<dd>
<p>
- Sets the position of the dropdown. Valid options are <code>bottom left</code>,
+ Sets the position of the dropdown. Valid options are <code>bottom left</code>,
<code>bottom right</code>, <code>top left</code>, and <code>top right</code>.
</p>
<p class="alert alert-warning">
- The <code>swatchPosition</code> setting has been removed in version 2.1. The position
+ The <code>swatchPosition</code> setting has been removed in version 2.1. The position
of the swatch is now determined by <code>position</code>.
</p>
</dd>
-
+
<dt>theme</dt>
<dd>
<p>
- A string containing the name of the custom theme to be applied. In your CSS, prefix
+ A string containing the name of the custom theme to be applied. In your CSS, prefix
your selectors like this:
</p>
<pre>
.minicolors-theme-yourThemeName { ... }
</pre>
<p>
- If you are using the default theme, you will probably need to adjust the swatch
- styles depending on your existing stylesheet rules. Version 2.1 removes as much
- styling on the <code>input</code> element as possible, which means it’s up to
+ If you are using the default theme, you will probably need to adjust the swatch
+ styles depending on your existing stylesheet rules. Version 2.1 removes as much
+ styling on the <code>input</code> element as possible, which means it’s up to
you to adjust your CSS to make sure the swatch aligns properly.
</p>
<p>
@@ -431,7 +431,7 @@ <h3 id="settings">Settings</h3>
top: 5px;
left: 5px;
width: 18px;
- height: 18px;
+ height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
left: auto;
@@ -441,7 +441,7 @@ <h3 id="settings">Settings</h3>
</div>
</dd>
</dl>
-
+
<!-- Methods -->
<h3 id="methods">Methods</h3>
<p>Use this syntax for calling methods:</p>
@@ -450,44 +450,44 @@ <h3 id="methods">Methods</h3>
<dt>create</dt>
<dd>
<p>
- Initializes the control for all items matching your selector. This is the default
+ Initializes the control for all items matching your selector. This is the default
method, so <code>data</code> may be passed in as the only argument.
</p>
<p>
- To set a preset color value, populate the <code>value</code> attribute of the original
+ To set a preset color value, populate the <code>value</code> attribute of the original
input element.
</p>
</dd>
-
+
<dt>destroy</dt>
<dd>
<p>
Returns the <em>input</em> element to its original, uninitialized state.
</p>
</dd>
-
+
<dt>opacity</dt>
<dd>
<p>
- Gets or sets a control's opacity level. To use this method as a setter, pass data in
- as a value between 0 and 1. (You can also obtain this value by checking the input
+ Gets or sets a control's opacity level. To use this method as a setter, pass data in
+ as a value between 0 and 1. (You can also obtain this value by checking the input
element's <code>data-opacity</code> attribute.)
</p>
<p>
- To set a preset opacity value, populate the <code>data-opacity</code> attribute of the
+ To set a preset opacity value, populate the <code>data-opacity</code> attribute of the
original input element.
</p>
</dd>
-
+
<dt>rgbObject</dt>
<dd>
<p>
- Returns an object containing red, green, blue, and alpha properties that correspond to
+ Returns an object containing red, green, blue, and alpha properties that correspond to
the control's current value. Example:
</p>
<pre>{ r: 0, g: 82, b: 148, a: 0.75 }</pre>
</dd>
-
+
<dt>rgbString &amp; rgbaString</dt>
<dd>
<p>
@@ -498,25 +498,25 @@ <h3 id="methods">Methods</h3>
rgba(0, 82, 148, .75)
</pre>
</dd>
-
+
<dt>settings</dt>
<dd>
<p>
- Gets or sets a control's settings. If new settings are passed in, the control will
+ Gets or sets a control's settings. If new settings are passed in, the control will
destroy and re-initialize itself with any new settings overriding the old ones.
</p>
</dd>
-
+
<dt>value</dt>
<dd>
<p>
- Gets or sets a control's color value. To use this method as a setter, pass
- <code>data</code> in as a hex value. (You can also obtain this value by checking the
+ Gets or sets a control's color value. To use this method as a setter, pass
+ <code>data</code> in as a hex value. (You can also obtain this value by checking the
input element's <code>value</code> attribute.)
</p>
</dd>
</dl>
-
+
<!-- Events -->
<h3 id="events">Events</h3>
<dl>
@@ -531,16 +531,16 @@ <h3 id="events">Events</h3>
});
</pre>
<p class="alert alert-warning">
- <strong>Warning!</strong> This event will fire a lot when the user drags the
- color picker around. Use the <code>changeDelay</code> setting to reduce its
+ <strong>Warning!</strong> This event will fire a lot when the user drags the
+ color picker around. Use the <code>changeDelay</code> setting to reduce its
frequency.
</p>
</dd>
-
+
<dt>hide</dt>
<dd>
<p>
- Fires when the color picker is hidden. The <code>this</code> keyword will reference
+ Fires when the color picker is hidden. The <code>this</code> keyword will reference
the original input element.
</p>
<pre>
@@ -551,11 +551,11 @@ <h3 id="events">Events</h3>
});
</pre>
</dd>
-
+
<dt>show</dt>
<dd>
<p>
- Fires when the color picker is shown. The <code>this</code> keyword will reference
+ Fires when the color picker is shown. The <code>this</code> keyword will reference
the original input element.
</p>
<pre>
@@ -567,10 +567,10 @@ <h3 id="events">Events</h3>
</pre>
</dd>
</dl>
-
+
<h2 id="license">License</h2>
<p>
- Licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>,
+ Licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>,
same as <a href="https://jquery.org/license/">jQuery</a>.
</p>
<p>
View
2  jquery.minicolors.css
@@ -203,7 +203,7 @@
top: 5px;
left: 5px;
width: 18px;
- height: 18px;
+ height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
left: auto;
View
274 jquery.minicolors.js
@@ -7,7 +7,7 @@
*
*/
if(jQuery) (function($) {
-
+
// Defaults
$.minicolors = {
defaults: {
@@ -28,25 +28,25 @@ if(jQuery) (function($) {
theme: 'default'
}
};
-
+
// Public methods
$.extend($.fn, {
minicolors: function(method, data) {
-
+
switch(method) {
-
+
// Destroy the control
case 'destroy':
$(this).each( function() {
destroy($(this));
});
return $(this);
-
+
// Hide the color picker
case 'hide':
hide();
return $(this);
-
+
// Get/set opacity
case 'opacity':
// Getter
@@ -60,16 +60,16 @@ if(jQuery) (function($) {
});
}
return $(this);
-
+
// Get an RGB(A) object based on the current color/opacity
case 'rgbObject':
return rgbObject($(this), method === 'rgbaObject');
-
+
// Get an RGB(A) string based on the current color/opacity
case 'rgbString':
case 'rgbaString':
return rgbString($(this), method === 'rgbaString');
-
+
// Get/set settings on the fly
case 'settings':
if( data === undefined ) {
@@ -83,12 +83,12 @@ if(jQuery) (function($) {
});
}
return $(this);
-
+
// Show the color picker
case 'show':
show( $(this).eq(0) );
return $(this);
-
+
// Get/set the hex color value
case 'value':
if( data === undefined ) {
@@ -101,7 +101,7 @@ if(jQuery) (function($) {
});
}
return $(this);
-
+
// Initializes the control
default:
if( method !== 'create' ) data = method;
@@ -109,36 +109,36 @@ if(jQuery) (function($) {
init($(this), data);
});
return $(this);
-
+
}
-
+
}
});
-
+
// Initialize input elements
function init(input, settings) {
-
+
var minicolors = $('<div class="minicolors" />'),
defaults = $.minicolors.defaults;
-
+
// Do nothing if already initialized
if( input.data('minicolors-initialized') ) return;
-
+
// Handle settings
settings = $.extend(true, {}, defaults, settings);
-
+
// The wrapper
minicolors
.addClass('minicolors-theme-' + settings.theme)
.toggleClass('minicolors-with-opacity', settings.opacity);
-
+
// Custom positioning
if( settings.position !== undefined ) {
$.each(settings.position.split(' '), function() {
minicolors.addClass('minicolors-position-' + this);
});
}
-
+
// The input
input
.addClass('minicolors-input')
@@ -147,11 +147,11 @@ if(jQuery) (function($) {
.prop('size', 7)
.wrap(minicolors)
.after(
- '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
- '<div class="minicolors-slider">' +
+ '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
+ '<div class="minicolors-slider">' +
'<div class="minicolors-picker"></div>' +
- '</div>' +
- '<div class="minicolors-opacity-slider">' +
+ '</div>' +
+ '<div class="minicolors-opacity-slider">' +
'<div class="minicolors-picker"></div>' +
'</div>' +
'<div class="minicolors-grid">' +
@@ -160,7 +160,7 @@ if(jQuery) (function($) {
'</div>' +
'</div>'
);
-
+
// The swatch
if( !settings.inline ) {
input.after('<span class="minicolors-swatch"><span class="minicolors-swatch-color"></span></span>');
@@ -169,82 +169,82 @@ if(jQuery) (function($) {
input.focus();
});
}
-
+
// Prevent text selection in IE
input.parent().find('.minicolors-panel').on('selectstart', function() { return false; }).end();
-
+
// Inline controls
if( settings.inline ) input.parent().addClass('minicolors-inline');
-
+
updateFromInput(input, false);
-
+
input.data('minicolors-initialized', true);
-
+
}
-
+
// Returns the input back to its original state
function destroy(input) {
-
+
var minicolors = input.parent();
-
+
// Revert the input element
input
.removeData('minicolors-initialized')
.removeData('minicolors-settings')
.removeProp('size')
.removeClass('minicolors-input');
-
+
// Remove the wrap and destroy whatever remains
minicolors.before(input).remove();
-
+
}
-
+
// Shows the specified dropdown panel
function show(input) {
-
+
var minicolors = input.parent(),
panel = minicolors.find('.minicolors-panel'),
settings = input.data('minicolors-settings');
-
+
// Do nothing if uninitialized, disabled, inline, or already open
- if( !input.data('minicolors-initialized') ||
- input.prop('disabled') ||
- minicolors.hasClass('minicolors-inline') ||
+ if( !input.data('minicolors-initialized') ||
+ input.prop('disabled') ||
+ minicolors.hasClass('minicolors-inline') ||
minicolors.hasClass('minicolors-focus')
) return;
-
+
hide();
-
+
minicolors.addClass('minicolors-focus');
panel
.stop(true, true)
.fadeIn(settings.showSpeed, function() {
if( settings.show ) settings.show.call(input.get(0));
});
-
+
}
-
+
// Hides all dropdown panels
function hide() {
-
+
$('.minicolors-focus').each( function() {
-
+
var minicolors = $(this),
input = minicolors.find('.minicolors-input'),
panel = minicolors.find('.minicolors-panel'),
settings = input.data('minicolors-settings');
-
+
panel.fadeOut(settings.hideSpeed, function() {
if( settings.hide ) settings.hide.call(input.get(0));
minicolors.removeClass('minicolors-focus');
- });
-
+ });
+
});
}
-
+
// Moves the selected picker
function move(target, event, animate) {
-
+
var input = target.parents('.minicolors').find('.minicolors-input'),
settings = input.data('minicolors-settings'),
picker = target.find('[class$=-picker]'),
@@ -254,19 +254,19 @@ if(jQuery) (function($) {
y = Math.round(event.pageY - offsetY),
duration = animate ? settings.animationSpeed : 0,
wx, wy, r, phi;
-
+
// Touch support
if( event.originalEvent.changedTouches ) {
x = event.originalEvent.changedTouches[0].pageX - offsetX;
y = event.originalEvent.changedTouches[0].pageY - offsetY;
}
-
+
// Constrain picker to its container
if( x < 0 ) x = 0;
if( y < 0 ) y = 0;
if( x > target.width() ) x = target.width();
if( y > target.height() ) y = target.height();
-
+
// Constrain color wheel values to the wheel
if( target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid') ) {
wx = 75 - x;
@@ -282,7 +282,7 @@ if(jQuery) (function($) {
x = Math.round(x);
y = Math.round(y);
}
-
+
// Move the picker
if( target.is('.minicolors-grid') ) {
picker
@@ -302,57 +302,57 @@ if(jQuery) (function($) {
updateFromControl(input, target);
});
}
-
+
}
-
+
// Sets the input based on the color picker values
function updateFromControl(input, target) {
-
+
function getCoords(picker, container) {
-
+
var left, top;
if( !picker.length || !container ) return null;
left = picker.offset().left;
top = picker.offset().top;
-
+
return {
x: left - container.offset().left + (picker.outerWidth() / 2),
y: top - container.offset().top + (picker.outerHeight() / 2)
};
-
+
}
-
+
var hue, saturation, brightness, x, y, r, phi,
-
+
hex = input.val(),
opacity = input.attr('data-opacity'),
-
+
// Helpful references
minicolors = input.parent(),
settings = input.data('minicolors-settings'),
swatch = minicolors.find('.minicolors-swatch'),
-
+
// Panel objects
grid = minicolors.find('.minicolors-grid'),
slider = minicolors.find('.minicolors-slider'),
opacitySlider = minicolors.find('.minicolors-opacity-slider'),
-
+
// Picker objects
gridPicker = grid.find('[class$=-picker]'),
sliderPicker = slider.find('[class$=-picker]'),
opacityPicker = opacitySlider.find('[class$=-picker]'),
-
+
// Picker positions
gridPos = getCoords(gridPicker, grid),
sliderPos = getCoords(sliderPicker, slider),
opacityPos = getCoords(opacityPicker, opacitySlider);
-
+
// Handle colors
if( target.is('.minicolors-grid, .minicolors-slider') ) {
-
+
// Determine HSB values
switch(settings.control) {
-
+
case 'wheel':
// Calculate hue, saturation, and brightness
x = (grid.width() / 2) - gridPos.x;
@@ -373,11 +373,11 @@ if(jQuery) (function($) {
s: saturation,
b: brightness
});
-
+
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
break;
-
+
case 'saturation':
// Calculate hue, saturation, and brightness
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
@@ -388,12 +388,12 @@ if(jQuery) (function($) {
s: saturation,
b: brightness
});
-
+
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
break;
-
+
case 'brightness':
// Calculate hue, saturation, and brightness
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
@@ -404,12 +404,12 @@ if(jQuery) (function($) {
s: saturation,
b: brightness
});
-
+
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
break;
-
+
default:
// Calculate hue, saturation, and brightness
hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
@@ -420,18 +420,18 @@ if(jQuery) (function($) {
s: saturation,
b: brightness
});
-
+
// Update UI
grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
break;
-
+
}
-
+
// Adjust case
input.val( convertCase(hex, settings.letterCase) );
-
+
}
-
+
// Handle opacity
if( target.is('.minicolors-opacity-slider') ) {
if( settings.opacity ) {
@@ -441,51 +441,51 @@ if(jQuery) (function($) {
}
if( settings.opacity ) input.attr('data-opacity', opacity);
}
-
+
// Set swatch color
swatch.find('SPAN').css({
backgroundColor: hex,
opacity: opacity
});
-
+
// Handle change event
doChange(input, hex, opacity);
-
+
}
-
+
// Sets the color picker values from the input
function updateFromInput(input, preserveInputValue) {
-
+
var hex,
hsb,
opacity,
x, y, r, phi,
-
+
// Helpful references
minicolors = input.parent(),
settings = input.data('minicolors-settings'),
swatch = minicolors.find('.minicolors-swatch'),
-
+
// Panel objects
grid = minicolors.find('.minicolors-grid'),
slider = minicolors.find('.minicolors-slider'),
opacitySlider = minicolors.find('.minicolors-opacity-slider'),
-
+
// Picker objects
gridPicker = grid.find('[class$=-picker]'),
sliderPicker = slider.find('[class$=-picker]'),
opacityPicker = opacitySlider.find('[class$=-picker]');
-
+
// Determine hex/HSB values
hex = convertCase(parseHex(input.val(), true), settings.letterCase);
if( !hex ){
hex = convertCase(parseHex(settings.defaultValue, true), settings.letterCase);
}
hsb = hex2hsb(hex);
-
+
// Update input value
if( !preserveInputValue ) input.val(hex);
-
+
// Determine opacity value
if( settings.opacity ) {
// Get from data-opacity attribute and keep within 0-1 range
@@ -493,18 +493,18 @@ if(jQuery) (function($) {
if( isNaN(opacity) ) opacity = 1;
input.attr('data-opacity', opacity);
swatch.find('SPAN').css('opacity', opacity);
-
+
// Set opacity picker position
y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
opacityPicker.css('top', y + 'px');
}
-
+
// Update swatch
swatch.find('SPAN').css('backgroundColor', hex);
-
+
// Determine picker locations
switch(settings.control) {
-
+
case 'wheel':
// Set grid position
r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
@@ -515,16 +515,16 @@ if(jQuery) (function($) {
top: y + 'px',
left: x + 'px'
});
-
+
// Set slider position
y = 150 - (hsb.b / (100 / grid.height()));
if( hex === '' ) y = 0;
sliderPicker.css('top', y + 'px');
-
+
// Update panel color
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
break;
-
+
case 'saturation':
// Set grid position
x = keepWithin((5 * hsb.h) / 12, 0, 150);
@@ -532,17 +532,17 @@ if(jQuery) (function($) {
gridPicker.css({
top: y + 'px',
left: x + 'px'
- });
-
+ });
+
// Set slider position
y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
sliderPicker.css('top', y + 'px');
-
+
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
break;
-
+
case 'brightness':
// Set grid position
x = keepWithin((5 * hsb.h) / 12, 0, 150);
@@ -550,17 +550,17 @@ if(jQuery) (function($) {
gridPicker.css({
top: y + 'px',
left: x + 'px'
- });
-
+ });
+
// Set slider position
y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
sliderPicker.css('top', y + 'px');
-
+
// Update UI
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
break;
-
+
default:
// Set grid position
x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
@@ -569,39 +569,39 @@ if(jQuery) (function($) {
top: y + 'px',
left: x + 'px'
});
-
+
// Set slider position
y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
sliderPicker.css('top', y + 'px');
-
+
// Update panel color
grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
break;
-
+
}
-
+
// Fire change event, but only if minicolors is fully initialized
if( input.data('minicolors-initialized') ) {
doChange(input, hex, opacity);
}
-
+
}
-
+
// Runs the change and changeDelay callbacks
function doChange(input, hex, opacity) {
-
+
var settings = input.data('minicolors-settings'),
lastChange = input.data('minicolors-lastChange');
-
+
// Only run if it actually changed
if( !lastChange || lastChange.hex !== hex || lastChange.opacity !== opacity ) {
-
+
// Remember last-changed value
input.data('minicolors-lastChange', {
hex: hex,
opacity: opacity
});
-
+
// Fire change event
if( settings.change ) {
if( settings.changeDelay ) {
@@ -617,9 +617,9 @@ if(jQuery) (function($) {
}
input.trigger('change').trigger('input');
}
-
+
}
-
+
// Generates an RGB(A) object based on the input's value
function rgbObject(input) {
var hex = parseHex($(input).val(), true),
@@ -629,7 +629,7 @@ if(jQuery) (function($) {
if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
return rgb;
}
-
+
// Genearates an RGB(A) string based on the input's value
function rgbString(input, alpha) {
var hex = parseHex($(input).val(), true),
@@ -643,12 +643,12 @@ if(jQuery) (function($) {
return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
}
}
-
+
// Converts to the letter case specified in settings
function convertCase(string, letterCase) {
return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
}
-
+
// Parses a string and returns a valid hex string when possible
function parseHex(string, expand) {
string = string.replace(/[^A-F0-9]/ig, '');
@@ -658,14 +658,14 @@ if(jQuery) (function($) {
}
return '#' + string;
}
-
+
// Keeps value within min and max
function keepWithin(value, min, max) {
if( value < min ) value = min;
if( value > max ) value = max;
return value;
}
-
+
// Converts an HSB object to an RGB object
function hsb2rgb(hsb) {
var rgb = {};
@@ -693,7 +693,7 @@ if(jQuery) (function($) {
b: Math.round(rgb.b)
};
}
-
+
// Converts an RGB object to a hex string
function rgb2hex(rgb) {
var hex = [
@@ -706,19 +706,19 @@ if(jQuery) (function($) {
});
return '#' + hex.join('');
}
-
+
// Converts an HSB object to a hex string
function hsb2hex(hsb) {
return rgb2hex(hsb2rgb(hsb));
}
-
+
// Converts a hex string to an HSB object
function hex2hsb(hex) {
var hsb = rgb2hsb(hex2rgb(hex));
if( hsb.s === 0 ) hsb.h = 360;
return hsb;
}
-
+
// Converts an RGB object to an HSB object
function rgb2hsb(rgb) {
var hsb = { h: 0, s: 0, b: 0 };
@@ -746,7 +746,7 @@ if(jQuery) (function($) {
hsb.b *= 100/255;
return hsb;
}
-
+
// Converts a hex string to an RGB object
function hex2rgb(hex) {
hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
@@ -756,7 +756,7 @@ if(jQuery) (function($) {
b: (hex & 0x0000FF)
};
}
-
+
// Handle events
$(document)
// Hide on clicks outside of the control
@@ -798,16 +798,16 @@ if(jQuery) (function($) {
var input = $(this),
settings = input.data('minicolors-settings');
if( !input.data('minicolors-initialized') ) return;
-
+
// Parse Hex
input.val(parseHex(input.val(), true));
-
+
// Is it blank?
if( input.val() === '' ) input.val(parseHex(settings.defaultValue, true));
-
+
// Adjust case
input.val( convertCase(input.val(), settings.letterCase) );
-
+
})
// Handle keypresses
.on('keydown.minicolors', '.minicolors-input', function(event) {
@@ -838,5 +838,5 @@ if(jQuery) (function($) {
updateFromInput(input, true);
}, 1);
});
-
+
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.