[Pkg-javascript-commits] [jquery-minicolors] 04/16: Switched from tabs to spaces
David Prévot
taffit at moszumanska.debian.org
Thu Dec 11 15:38:21 UTC 2014
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository jquery-minicolors.
commit 03b58f6d1cc9bc95828101b05238813bbd54fe60
Author: Cory LaViska <cory at abeautifulsite.net>
Date: Tue Nov 25 12:26:44 2014 -0500
Switched from tabs to spaces
---
jquery.minicolors.css | 280 ++++----
jquery.minicolors.js | 1664 ++++++++++++++++++++++++------------------------
without-bootstrap.html | 276 ++++----
3 files changed, 1110 insertions(+), 1110 deletions(-)
diff --git a/jquery.minicolors.css b/jquery.minicolors.css
index b10406f..91363b8 100644
--- a/jquery.minicolors.css
+++ b/jquery.minicolors.css
@@ -1,269 +1,269 @@
.minicolors {
- position: relative;
+ position: relative;
}
.minicolors-sprite {
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2YAAACWCAYAAAC1r5t6AAEuWklEQVR42uz9a8xt25YVhrU+1ner7qseLiEjhERwfkDFeWAEl6dCQcAUCBDCwUSJwg+jRPIzgGVZMcZ2DCKyIycxiSOi2JbMr8hBgFNVGKNAHgKCTBnbUYCYEsHYIoiKKuYW9zzu2XvP0fNjjUfrbfQx5/r23ufWPnX2PvrOWmvOueYc87HmHG201luzv/GzvstvVmG4/3N39H8GAwzAnASHw8zgDpjRdAcOFPz0v/J1mvrm/374h3+48Oevfe1rOh/PnF/xdv+5TvgLf+EvLAv9vJ/38/ATsdzP/bk/l9tZ6c/l/XEyr8/3B9ZT3X07r/1hM/04+U62XW1X2ka/X9Rn63l0e33fHmnLbtvhONOxqiffw9m+9HW4+9h+X87dR5vbv4M+11prHW/ [...]
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2YAAACWCAYAAAC1r5t6AAEuWklEQVR42uz9a8xt25YVhrU+1ner7qseLiEjhERwfkDFeWAEl6dCQcAUCBDCwUSJwg+jRPIzgGVZMcZ2DCKyIycxiSOi2JbMr8hBgFNVGKNAHgKCTBnbUYCYEsHYIoiKKuYW9zzu2XvP0fNjjUfrbfQx5/r23ufWPnX2PvrOWmvOueYc87HmHG201luzv/GzvstvVmG4/3N39H8GAwzAnASHw8zgDpjRdAcOFPz0v/J1mvrm/374h3+48Oevfe1rOh/PnF/xdv+5TvgLf+EvLAv9vJ/38/ATsdzP/bk/l9tZ6c/l/XEyr8/3B9ZT3X07r/1hM/04+U62XW1X2ka/X9Rn63l0e33fHmnLbtvhONOxqiffw9m+9HW4+9h+X87dR5vbv4M+11pr [...]
}
.minicolors-no-data-uris .minicolors-sprite {
- background-image: url(jquery.minicolors.png);
+ background-image: url(jquery.minicolors.png);
}
.minicolors-swatch {
- position: absolute;
- vertical-align: middle;
- background-position: -80px 0;
- border: solid 1px #ccc;
- cursor: text;
- padding: 0;
- margin: 0;
- display: inline-block;
+ position: absolute;
+ vertical-align: middle;
+ background-position: -80px 0;
+ border: solid 1px #ccc;
+ cursor: text;
+ padding: 0;
+ margin: 0;
+ display: inline-block;
}
.minicolors-swatch-color {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
.minicolors input[type=hidden] + .minicolors-swatch {
- width: 28px;
- position: static;
- cursor: pointer;
+ width: 28px;
+ position: static;
+ cursor: pointer;
}
/* Panel */
.minicolors-panel {
- position: absolute;
- width: 173px;
- height: 152px;
- background: white;
- border: solid 1px #CCC;
- box-shadow: 0 0 20px rgba(0, 0, 0, .2);
- z-index: 99999;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
- display: none;
+ position: absolute;
+ width: 173px;
+ height: 152px;
+ background: white;
+ border: solid 1px #CCC;
+ box-shadow: 0 0 20px rgba(0, 0, 0, .2);
+ z-index: 99999;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+ display: none;
}
.minicolors-panel.minicolors-visible {
- display: block;
+ display: block;
}
/* Panel positioning */
.minicolors-position-top .minicolors-panel {
- top: -154px;
+ top: -154px;
}
.minicolors-position-right .minicolors-panel {
- right: 0;
+ right: 0;
}
.minicolors-position-bottom .minicolors-panel {
- top: auto;
+ top: auto;
}
.minicolors-position-left .minicolors-panel {
- left: 0;
+ left: 0;
}
.minicolors-with-opacity .minicolors-panel {
- width: 194px;
+ width: 194px;
}
.minicolors .minicolors-grid {
- position: absolute;
- top: 1px;
- left: 1px;
- width: 150px;
- height: 150px;
- background-position: -120px 0;
- cursor: crosshair;
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ width: 150px;
+ height: 150px;
+ background-position: -120px 0;
+ cursor: crosshair;
}
.minicolors .minicolors-grid-inner {
- position: absolute;
- top: 0;
- left: 0;
- width: 150px;
- height: 150px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 150px;
+ height: 150px;
}
.minicolors-slider-saturation .minicolors-grid {
- background-position: -420px 0;
+ background-position: -420px 0;
}
.minicolors-slider-saturation .minicolors-grid-inner {
- background-position: -270px 0;
- background-image: inherit;
+ background-position: -270px 0;
+ background-image: inherit;
}
.minicolors-slider-brightness .minicolors-grid {
- background-position: -570px 0;
+ background-position: -570px 0;
}
.minicolors-slider-brightness .minicolors-grid-inner {
- background-color: black;
+ background-color: black;
}
.minicolors-slider-wheel .minicolors-grid {
- background-position: -720px 0;
+ background-position: -720px 0;
}
.minicolors-slider,
.minicolors-opacity-slider {
- position: absolute;
- top: 1px;
- left: 152px;
- width: 20px;
- height: 150px;
- background-color: white;
- background-position: 0 0;
- cursor: row-resize;
+ position: absolute;
+ top: 1px;
+ left: 152px;
+ width: 20px;
+ height: 150px;
+ background-color: white;
+ background-position: 0 0;
+ cursor: row-resize;
}
.minicolors-slider-saturation .minicolors-slider {
- background-position: -60px 0;
+ background-position: -60px 0;
}
.minicolors-slider-brightness .minicolors-slider {
- background-position: -20px 0;
+ background-position: -20px 0;
}
.minicolors-slider-wheel .minicolors-slider {
- background-position: -20px 0;
+ background-position: -20px 0;
}
.minicolors-opacity-slider {
- left: 173px;
- background-position: -40px 0;
- display: none;
+ left: 173px;
+ background-position: -40px 0;
+ display: none;
}
.minicolors-with-opacity .minicolors-opacity-slider {
- display: block;
+ display: block;
}
/* Pickers */
.minicolors-grid .minicolors-picker {
- position: absolute;
- top: 70px;
- left: 70px;
- width: 12px;
- height: 12px;
- border: solid 1px black;
- border-radius: 10px;
- margin-top: -6px;
- margin-left: -6px;
- background: none;
+ position: absolute;
+ top: 70px;
+ left: 70px;
+ width: 12px;
+ height: 12px;
+ border: solid 1px black;
+ border-radius: 10px;
+ margin-top: -6px;
+ margin-left: -6px;
+ background: none;
}
.minicolors-grid .minicolors-picker > div {
- position: absolute;
- top: 0;
- left: 0;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- border: solid 2px white;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ border: solid 2px white;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
}
.minicolors-picker {
- position: absolute;
- top: 0;
- left: 0;
- width: 18px;
- height: 2px;
- background: white;
- border: solid 1px black;
- margin-top: -2px;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 18px;
+ height: 2px;
+ background: white;
+ border: solid 1px black;
+ margin-top: -2px;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
}
/* Inline controls */
.minicolors-inline {
- display: inline-block;
+ display: inline-block;
}
.minicolors-inline .minicolors-input {
- display: none !important;
+ display: none !important;
}
.minicolors-inline .minicolors-panel {
- position: relative;
- top: auto;
- left: auto;
- box-shadow: none;
- z-index: auto;
- display: inline-block;
+ position: relative;
+ top: auto;
+ left: auto;
+ box-shadow: none;
+ z-index: auto;
+ display: inline-block;
}
/* Default theme */
.minicolors-theme-default .minicolors-swatch {
- top: 5px;
- left: 5px;
- width: 18px;
- height: 18px;
+ top: 5px;
+ left: 5px;
+ width: 18px;
+ height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
- left: auto;
- right: 5px;
+ left: auto;
+ right: 5px;
}
.minicolors-theme-default.minicolors {
- width: auto;
- display: inline-block;
+ width: auto;
+ display: inline-block;
}
.minicolors-theme-default .minicolors-input {
- height: 20px;
- width: auto;
- display: inline-block;
- padding-left: 26px;
+ height: 20px;
+ width: auto;
+ display: inline-block;
+ padding-left: 26px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-input {
- padding-right: 26px;
- padding-left: inherit;
+ padding-right: 26px;
+ padding-left: inherit;
}
/* Bootstrap theme */
.minicolors-theme-bootstrap .minicolors-swatch {
- top: 3px;
- left: 3px;
- width: 28px;
- height: 28px;
- border-radius: 3px;
+ top: 3px;
+ left: 3px;
+ width: 28px;
+ height: 28px;
+ border-radius: 3px;
}
.minicolors-theme-bootstrap .minicolors-swatch-color {
- border-radius: inherit;
+ border-radius: inherit;
}
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
- left: auto;
- right: 3px;
+ left: auto;
+ right: 3px;
}
.minicolors-theme-bootstrap .minicolors-input {
float: none;
- padding-left: 44px;
+ padding-left: 44px;
}
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
- padding-right: 44px;
- padding-left: 12px;
+ padding-right: 44px;
+ padding-left: 12px;
}
.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
- top: 4px;
- left: 4px;
- width: 37px;
- height: 37px;
- border-radius: 5px;
+ top: 4px;
+ left: 4px;
+ width: 37px;
+ height: 37px;
+ border-radius: 5px;
}
.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
- width: 24px;
- height: 24px;
+ width: 24px;
+ height: 24px;
}
diff --git a/jquery.minicolors.js b/jquery.minicolors.js
index 8fcd2b1..8b26ecf 100644
--- a/jquery.minicolors.js
+++ b/jquery.minicolors.js
@@ -10,837 +10,837 @@
*/
if(jQuery) (function($) {
- // Defaults
- $.minicolors = {
- defaults: {
- animationSpeed: 50,
- animationEasing: 'swing',
- change: null,
- changeDelay: 0,
- control: 'hue',
- dataUris: true,
- defaultValue: '',
- hide: null,
- hideSpeed: 100,
- inline: false,
- letterCase: 'lowercase',
- opacity: false,
- position: 'bottom left',
- show: null,
- showSpeed: 100,
- 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
- if( data === undefined ) {
- // Getter
- return $(this).attr('data-opacity');
- } else {
- // Setter
- $(this).each( function() {
- updateFromInput($(this).attr('data-opacity', data));
- });
- }
- 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 ) {
- return $(this).data('minicolors-settings');
- } else {
- // Setter
- $(this).each( function() {
- var settings = $(this).data('minicolors-settings') || {};
- destroy($(this));
- $(this).minicolors($.extend(true, settings, data));
- });
- }
- 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 ) {
- // Getter
- return $(this).val();
- } else {
- // Setter
- $(this).each( function() {
- updateFromInput($(this).val(data));
- });
- }
- return $(this);
-
- // Initializes the control
- default:
- if( method !== 'create' ) data = method;
- $(this).each( 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)
- .toggleClass('minicolors-no-data-uris', settings.dataUris !== true);
-
- // Custom positioning
- if( settings.position !== undefined ) {
- $.each(settings.position.split(' '), function() {
- minicolors.addClass('minicolors-position-' + this);
- });
- }
-
- // The input
- input
- .addClass('minicolors-input')
- .data('minicolors-initialized', false)
- .data('minicolors-settings', settings)
- .prop('size', 7)
- .wrap(minicolors)
- .after(
- '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
- '<div class="minicolors-slider minicolors-sprite">' +
- '<div class="minicolors-picker"></div>' +
- '</div>' +
- '<div class="minicolors-opacity-slider minicolors-sprite">' +
- '<div class="minicolors-picker"></div>' +
- '</div>' +
- '<div class="minicolors-grid minicolors-sprite">' +
- '<div class="minicolors-grid-inner"></div>' +
- '<div class="minicolors-picker"><div></div></div>' +
- '</div>' +
- '</div>'
- );
-
- // The swatch
- if( !settings.inline ) {
- input.after('<span class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></span>');
- input.next('.minicolors-swatch').on('click', function(event) {
- event.preventDefault();
- 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') ||
- 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]'),
- offsetX = target.offset().left,
- offsetY = target.offset().top,
- x = Math.round(event.pageX - offsetX),
- 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;
- wy = 75 - y;
- r = Math.sqrt(wx * wx + wy * wy);
- phi = Math.atan2(wy, wx);
- if( phi < 0 ) phi += Math.PI * 2;
- if( r > 75 ) {
- r = 75;
- x = 75 - (75 * Math.cos(phi));
- y = 75 - (75 * Math.sin(phi));
- }
- x = Math.round(x);
- y = Math.round(y);
- }
-
- // Move the picker
- if( target.is('.minicolors-grid') ) {
- picker
- .stop(true)
- .animate({
- top: y + 'px',
- left: x + 'px'
- }, duration, settings.animationEasing, function() {
- updateFromControl(input, target);
- });
- } else {
- picker
- .stop(true)
- .animate({
- top: y + 'px'
- }, duration, settings.animationEasing, 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;
- y = (grid.height() / 2) - gridPos.y;
- r = Math.sqrt(x * x + y * y);
- phi = Math.atan2(y, x);
- if( phi < 0 ) phi += Math.PI * 2;
- if( r > 75 ) {
- r = 75;
- gridPos.x = 69 - (75 * Math.cos(phi));
- gridPos.y = 69 - (75 * Math.sin(phi));
- }
- saturation = keepWithin(r / 0.75, 0, 100);
- hue = keepWithin(phi * 180 / Math.PI, 0, 360);
- brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
- hex = hsb2hex({
- h: hue,
- 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);
- saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
- brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
- hex = hsb2hex({
- h: hue,
- 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);
- saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
- brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
- hex = hsb2hex({
- h: hue,
- 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);
- saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
- brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
- hex = hsb2hex({
- h: hue,
- 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 ) {
- opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
- } else {
- opacity = 1;
- }
- 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
- opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
- 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);
- phi = hsb.h * Math.PI / 180;
- x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
- y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
- gridPicker.css({
- 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);
- y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
- 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);
- y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
- 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());
- y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
- gridPicker.css({
- 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 ) {
- // Call after a delay
- clearTimeout(input.data('minicolors-changeTimeout'));
- input.data('minicolors-changeTimeout', setTimeout( function() {
- settings.change.call(input.get(0), hex, opacity);
- }, settings.changeDelay));
- } else {
- // Call immediately
- settings.change.call(input.get(0), hex, opacity);
- }
- }
- 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),
- rgb = hex2rgb(hex),
- opacity = $(input).attr('data-opacity');
- if( !rgb ) return null;
- 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),
- rgb = hex2rgb(hex),
- opacity = $(input).attr('data-opacity');
- if( !rgb ) return null;
- if( opacity === undefined ) opacity = 1;
- if( alpha ) {
- return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
- } else {
- 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, '');
- if( string.length !== 3 && string.length !== 6 ) return '';
- if( string.length === 3 && expand ) {
- string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
- }
- 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 = {};
- 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)
- };
- }
-
- // Converts an RGB object to a hex string
- function rgb2hex(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('');
- }
-
- // 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 };
- 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;
- }
-
- // Converts a hex string to an RGB object
- function hex2rgb(hex) {
- hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
- return {
- r: hex >> 16,
- g: (hex & 0x00FF00) >> 8,
- b: (hex & 0x0000FF)
- };
- }
-
- // Handle events
- $(document)
- // Hide on clicks outside of the control
- .on('mousedown.minicolors touchstart.minicolors', function(event) {
- if( !$(event.target).parents().add(event.target).hasClass('minicolors') ) {
- hide();
- }
- })
- // Start moving
- .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
- var target = $(this);
- event.preventDefault();
- $(document).data('minicolors-target', target);
- move(target, event, true);
- })
- // Move pickers
- .on('mousemove.minicolors touchmove.minicolors', function(event) {
- var target = $(document).data('minicolors-target');
- if( target ) move(target, event);
- })
- // Stop moving
- .on('mouseup.minicolors touchend.minicolors', function() {
- $(this).removeData('minicolors-target');
- })
- // Show panel when swatch is clicked
- .on('mousedown.minicolors touchstart.minicolors', '.minicolors-swatch', function(event) {
- var input = $(this).parent().find('.minicolors-input');
- event.preventDefault();
- show(input);
- })
- // Show on focus
- .on('focus.minicolors', '.minicolors-input', function() {
- var input = $(this);
- if( !input.data('minicolors-initialized') ) return;
- show(input);
- })
- // Fix hex on blur
- .on('blur.minicolors', '.minicolors-input', 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) {
- var input = $(this);
- if( !input.data('minicolors-initialized') ) return;
- switch(event.keyCode) {
- case 9: // tab
- hide();
- break;
- case 13: // enter
- case 27: // esc
- hide();
- input.blur();
- break;
- }
- })
- // Update on keyup
- .on('keyup.minicolors', '.minicolors-input', function() {
- var input = $(this);
- if( !input.data('minicolors-initialized') ) return;
- updateFromInput(input, true);
- })
- // Update on paste
- .on('paste.minicolors', '.minicolors-input', function() {
- var input = $(this);
- if( !input.data('minicolors-initialized') ) return;
- setTimeout( function() {
- updateFromInput(input, true);
- }, 1);
- });
+ // Defaults
+ $.minicolors = {
+ defaults: {
+ animationSpeed: 50,
+ animationEasing: 'swing',
+ change: null,
+ changeDelay: 0,
+ control: 'hue',
+ dataUris: true,
+ defaultValue: '',
+ hide: null,
+ hideSpeed: 100,
+ inline: false,
+ letterCase: 'lowercase',
+ opacity: false,
+ position: 'bottom left',
+ show: null,
+ showSpeed: 100,
+ 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
+ if( data === undefined ) {
+ // Getter
+ return $(this).attr('data-opacity');
+ } else {
+ // Setter
+ $(this).each( function() {
+ updateFromInput($(this).attr('data-opacity', data));
+ });
+ }
+ 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 ) {
+ return $(this).data('minicolors-settings');
+ } else {
+ // Setter
+ $(this).each( function() {
+ var settings = $(this).data('minicolors-settings') || {};
+ destroy($(this));
+ $(this).minicolors($.extend(true, settings, data));
+ });
+ }
+ 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 ) {
+ // Getter
+ return $(this).val();
+ } else {
+ // Setter
+ $(this).each( function() {
+ updateFromInput($(this).val(data));
+ });
+ }
+ return $(this);
+
+ // Initializes the control
+ default:
+ if( method !== 'create' ) data = method;
+ $(this).each( 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)
+ .toggleClass('minicolors-no-data-uris', settings.dataUris !== true);
+
+ // Custom positioning
+ if( settings.position !== undefined ) {
+ $.each(settings.position.split(' '), function() {
+ minicolors.addClass('minicolors-position-' + this);
+ });
+ }
+
+ // The input
+ input
+ .addClass('minicolors-input')
+ .data('minicolors-initialized', false)
+ .data('minicolors-settings', settings)
+ .prop('size', 7)
+ .wrap(minicolors)
+ .after(
+ '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
+ '<div class="minicolors-slider minicolors-sprite">' +
+ '<div class="minicolors-picker"></div>' +
+ '</div>' +
+ '<div class="minicolors-opacity-slider minicolors-sprite">' +
+ '<div class="minicolors-picker"></div>' +
+ '</div>' +
+ '<div class="minicolors-grid minicolors-sprite">' +
+ '<div class="minicolors-grid-inner"></div>' +
+ '<div class="minicolors-picker"><div></div></div>' +
+ '</div>' +
+ '</div>'
+ );
+
+ // The swatch
+ if( !settings.inline ) {
+ input.after('<span class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></span>');
+ input.next('.minicolors-swatch').on('click', function(event) {
+ event.preventDefault();
+ 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') ||
+ 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]'),
+ offsetX = target.offset().left,
+ offsetY = target.offset().top,
+ x = Math.round(event.pageX - offsetX),
+ 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;
+ wy = 75 - y;
+ r = Math.sqrt(wx * wx + wy * wy);
+ phi = Math.atan2(wy, wx);
+ if( phi < 0 ) phi += Math.PI * 2;
+ if( r > 75 ) {
+ r = 75;
+ x = 75 - (75 * Math.cos(phi));
+ y = 75 - (75 * Math.sin(phi));
+ }
+ x = Math.round(x);
+ y = Math.round(y);
+ }
+
+ // Move the picker
+ if( target.is('.minicolors-grid') ) {
+ picker
+ .stop(true)
+ .animate({
+ top: y + 'px',
+ left: x + 'px'
+ }, duration, settings.animationEasing, function() {
+ updateFromControl(input, target);
+ });
+ } else {
+ picker
+ .stop(true)
+ .animate({
+ top: y + 'px'
+ }, duration, settings.animationEasing, 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;
+ y = (grid.height() / 2) - gridPos.y;
+ r = Math.sqrt(x * x + y * y);
+ phi = Math.atan2(y, x);
+ if( phi < 0 ) phi += Math.PI * 2;
+ if( r > 75 ) {
+ r = 75;
+ gridPos.x = 69 - (75 * Math.cos(phi));
+ gridPos.y = 69 - (75 * Math.sin(phi));
+ }
+ saturation = keepWithin(r / 0.75, 0, 100);
+ hue = keepWithin(phi * 180 / Math.PI, 0, 360);
+ brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ 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);
+ saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
+ brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ 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);
+ saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
+ brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ 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);
+ saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
+ brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ 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 ) {
+ opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
+ } else {
+ opacity = 1;
+ }
+ 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
+ opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
+ 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);
+ phi = hsb.h * Math.PI / 180;
+ x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
+ y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
+ gridPicker.css({
+ 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);
+ y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
+ 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);
+ y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
+ 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());
+ y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
+ gridPicker.css({
+ 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 ) {
+ // Call after a delay
+ clearTimeout(input.data('minicolors-changeTimeout'));
+ input.data('minicolors-changeTimeout', setTimeout( function() {
+ settings.change.call(input.get(0), hex, opacity);
+ }, settings.changeDelay));
+ } else {
+ // Call immediately
+ settings.change.call(input.get(0), hex, opacity);
+ }
+ }
+ 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),
+ rgb = hex2rgb(hex),
+ opacity = $(input).attr('data-opacity');
+ if( !rgb ) return null;
+ 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),
+ rgb = hex2rgb(hex),
+ opacity = $(input).attr('data-opacity');
+ if( !rgb ) return null;
+ if( opacity === undefined ) opacity = 1;
+ if( alpha ) {
+ return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
+ } else {
+ 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, '');
+ if( string.length !== 3 && string.length !== 6 ) return '';
+ if( string.length === 3 && expand ) {
+ string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
+ }
+ 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 = {};
+ 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)
+ };
+ }
+
+ // Converts an RGB object to a hex string
+ function rgb2hex(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('');
+ }
+
+ // 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 };
+ 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;
+ }
+
+ // Converts a hex string to an RGB object
+ function hex2rgb(hex) {
+ hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+ return {
+ r: hex >> 16,
+ g: (hex & 0x00FF00) >> 8,
+ b: (hex & 0x0000FF)
+ };
+ }
+
+ // Handle events
+ $(document)
+ // Hide on clicks outside of the control
+ .on('mousedown.minicolors touchstart.minicolors', function(event) {
+ if( !$(event.target).parents().add(event.target).hasClass('minicolors') ) {
+ hide();
+ }
+ })
+ // Start moving
+ .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
+ var target = $(this);
+ event.preventDefault();
+ $(document).data('minicolors-target', target);
+ move(target, event, true);
+ })
+ // Move pickers
+ .on('mousemove.minicolors touchmove.minicolors', function(event) {
+ var target = $(document).data('minicolors-target');
+ if( target ) move(target, event);
+ })
+ // Stop moving
+ .on('mouseup.minicolors touchend.minicolors', function() {
+ $(this).removeData('minicolors-target');
+ })
+ // Show panel when swatch is clicked
+ .on('mousedown.minicolors touchstart.minicolors', '.minicolors-swatch', function(event) {
+ var input = $(this).parent().find('.minicolors-input');
+ event.preventDefault();
+ show(input);
+ })
+ // Show on focus
+ .on('focus.minicolors', '.minicolors-input', function() {
+ var input = $(this);
+ if( !input.data('minicolors-initialized') ) return;
+ show(input);
+ })
+ // Fix hex on blur
+ .on('blur.minicolors', '.minicolors-input', 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) {
+ var input = $(this);
+ if( !input.data('minicolors-initialized') ) return;
+ switch(event.keyCode) {
+ case 9: // tab
+ hide();
+ break;
+ case 13: // enter
+ case 27: // esc
+ hide();
+ input.blur();
+ break;
+ }
+ })
+ // Update on keyup
+ .on('keyup.minicolors', '.minicolors-input', function() {
+ var input = $(this);
+ if( !input.data('minicolors-initialized') ) return;
+ updateFromInput(input, true);
+ })
+ // Update on paste
+ .on('paste.minicolors', '.minicolors-input', function() {
+ var input = $(this);
+ if( !input.data('minicolors-initialized') ) return;
+ setTimeout( function() {
+ updateFromInput(input, true);
+ }, 1);
+ });
})(jQuery);
\ No newline at end of file
diff --git a/without-bootstrap.html b/without-bootstrap.html
index 1080da9..3cef51d 100644
--- a/without-bootstrap.html
+++ b/without-bootstrap.html
@@ -1,154 +1,154 @@
<!doctype html>
<html>
<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>
-
- <!-- MiniColors -->
- <script src="jquery.minicolors.js"></script>
- <link rel="stylesheet" href="jquery.minicolors.css">
-
- <style>
- body {
- font: 16px sans-serif;
- line-height: 1.8;
- padding: 0 40px;
- margin-bottom: 200px;
- }
- a {
- color: #08c;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- .form-group {
- margin: 20px 0;
- }
- label {
- color: #888;
- }
- </style>
-
- <script>
- $(document).ready( function() {
-
+ <title>jQuery MiniColors</title>
+ <meta charset="utf-8">
+
+ <!-- jQuery -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
+ <!-- MiniColors -->
+ <script src="jquery.minicolors.js"></script>
+ <link rel="stylesheet" href="jquery.minicolors.css">
+
+ <style>
+ body {
+ font: 16px sans-serif;
+ line-height: 1.8;
+ padding: 0 40px;
+ margin-bottom: 200px;
+ }
+ a {
+ color: #08c;
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ .form-group {
+ margin: 20px 0;
+ }
+ label {
+ color: #888;
+ }
+ </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. Again,
+ // 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. Again,
// they're only used for the purposes of this demo.
//
- $(this).minicolors({
- control: $(this).attr('data-control') || 'hue',
- defaultValue: $(this).attr('data-defaultValue') || '',
- inline: $(this).attr('data-inline') === 'true',
- letterCase: $(this).attr('data-letterCase') || 'lowercase',
- opacity: $(this).attr('data-opacity'),
- position: $(this).attr('data-position') || 'bottom left',
- change: function(hex, opacity) {
- var log;
- try {
- log = hex ? hex : 'transparent';
- if( opacity ) log += ', ' + opacity;
- console.log(log);
- } catch(e) {}
- },
- theme: 'default'
- });
-
+ $(this).minicolors({
+ control: $(this).attr('data-control') || 'hue',
+ defaultValue: $(this).attr('data-defaultValue') || '',
+ inline: $(this).attr('data-inline') === 'true',
+ letterCase: $(this).attr('data-letterCase') || 'lowercase',
+ opacity: $(this).attr('data-opacity'),
+ position: $(this).attr('data-position') || 'bottom left',
+ change: function(hex, opacity) {
+ var log;
+ try {
+ log = hex ? hex : 'transparent';
+ if( opacity ) log += ', ' + opacity;
+ console.log(log);
+ } catch(e) {}
+ },
+ theme: 'default'
+ });
+
});
-
- });
- </script>
+
+ });
+ </script>
</head>
<body>
-
- <h1>MiniColors Demo (without Bootstrap)</h1>
- <p>
- <a href="index.html">« Back to the Bootstrap demo</a>
- </p>
-
- <!-- Control Types -->
- <h3>Control Types</h3>
- <div class="form-group">
- <label for="hue-demo">Hue (default)</label>
- <input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161">
- </div>
- <div class="form-group">
- <label for="saturation-demo">Saturation</label>
- <input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc">
- </div>
- <div class="form-group">
- <label for="brightness-demo">Brightness</label>
- <input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff">
- </div>
- <div class="form-group">
- <label for="wheel-demo">Wheel</label>
- <input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee">
- </div>
-
- <!-- Input modes -->
- <h3>Input Modes</h3>
- <div class="form-group">
- <label for="text-field">Text field</label>
- <br>
- <input type="text" id="text-field" class="demo" value="#70c24a">
- </div>
- <div class="form-group">
- <label for="hidden-input">Hidden Input</label>
- <br>
- <input type="hidden" id="hidden-input" class="demo" value="#db913d">
- </div>
- <div class="form-group">
- <label for="inline">Inline</label>
- <br>
- <input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db">
- </div>
-
- <!-- Positions -->
- <h3>Positions</h3>
- <div class="form-group">
- <label for="position-bottom-left">bottom left (default)</label>
- <input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc">
- </div>
- <div class="form-group">
- <label for="position-top-left">top left</label>
- <input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc">
- </div>
- <div class="form-group">
- <label for="position-bottom-right">bottom right</label>
- <input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc">
- </div>
- <div class="form-group">
- <label for="position-top-right">top right</label>
- <input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc">
- </div>
-
- <!-- and more -->
- <h3>…and more!</h3>
- <div class="form-group">
- <label for="opacity">Opacity</label>
- <br>
- <input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8">
- </div>
- <div class="form-group">
- <label for="default-value">Default Value</label>
- <br>
- <input type="text" id="default-value" class="demo" data-defaultValue="#ff6600">
- </div>
- <div class="form-group">
- <label for="letter-case">Letter Case</label>
- <br>
- <input type="text" id="letter-case" class="demo" data-letterCase="uppercase">
- </div>
-
+
+ <h1>MiniColors Demo (without Bootstrap)</h1>
+ <p>
+ <a href="index.html">« Back to the Bootstrap demo</a>
+ </p>
+
+ <!-- Control Types -->
+ <h3>Control Types</h3>
+ <div class="form-group">
+ <label for="hue-demo">Hue (default)</label>
+ <input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161">
+ </div>
+ <div class="form-group">
+ <label for="saturation-demo">Saturation</label>
+ <input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="brightness-demo">Brightness</label>
+ <input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff">
+ </div>
+ <div class="form-group">
+ <label for="wheel-demo">Wheel</label>
+ <input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee">
+ </div>
+
+ <!-- Input modes -->
+ <h3>Input Modes</h3>
+ <div class="form-group">
+ <label for="text-field">Text field</label>
+ <br>
+ <input type="text" id="text-field" class="demo" value="#70c24a">
+ </div>
+ <div class="form-group">
+ <label for="hidden-input">Hidden Input</label>
+ <br>
+ <input type="hidden" id="hidden-input" class="demo" value="#db913d">
+ </div>
+ <div class="form-group">
+ <label for="inline">Inline</label>
+ <br>
+ <input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db">
+ </div>
+
+ <!-- Positions -->
+ <h3>Positions</h3>
+ <div class="form-group">
+ <label for="position-bottom-left">bottom left (default)</label>
+ <input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-top-left">top left</label>
+ <input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-bottom-right">bottom right</label>
+ <input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-top-right">top right</label>
+ <input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc">
+ </div>
+
+ <!-- and more -->
+ <h3>…and more!</h3>
+ <div class="form-group">
+ <label for="opacity">Opacity</label>
+ <br>
+ <input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8">
+ </div>
+ <div class="form-group">
+ <label for="default-value">Default Value</label>
+ <br>
+ <input type="text" id="default-value" class="demo" data-defaultValue="#ff6600">
+ </div>
+ <div class="form-group">
+ <label for="letter-case">Letter Case</label>
+ <br>
+ <input type="text" id="letter-case" class="demo" data-letterCase="uppercase">
+ </div>
+
</body>
</html>
\ No newline at end of file
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/jquery-minicolors.git
More information about the Pkg-javascript-commits
mailing list