diff --git a/Gruntfile.js b/Gruntfile.js
index 81c23c9..aa8e8d1 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -31,10 +31,6 @@ module.exports = function (grunt) {
src: ["src/bootstrap.colorpickersliders.js"],
dest: "dist/bootstrap.colorpickersliders.js"
},
- js2: {
- src: ["src/bootstrap.colorpickersliders.nocielch.js"],
- dest: "dist/bootstrap.colorpickersliders.nocielch.js"
- },
css: {
src: ["src/bootstrap.colorpickersliders.css"],
dest: "dist/bootstrap.colorpickersliders.css"
@@ -46,7 +42,7 @@ module.exports = function (grunt) {
// Lint definitions
jshint: {
- files: ["src/bootstrap.colorpickersliders.js", "src/bootstrap.colorpickersliders.nocielch.js"],
+ files: ["src/bootstrap.colorpickersliders.js"],
options: {
jshintrc: ".jshintrc"
}
@@ -58,10 +54,6 @@ module.exports = function (grunt) {
src: ["dist/bootstrap.colorpickersliders.js"],
dest: "dist/bootstrap.colorpickersliders.min.js"
},
- js2: {
- src: ["dist/bootstrap.colorpickersliders.nocielch.js"],
- dest: "dist/bootstrap.colorpickersliders.nocielch.min.js"
- },
options: {
banner: "<%= meta.banner %>"
}
diff --git a/dist/bootstrap.colorpickersliders.css b/dist/bootstrap.colorpickersliders.css
index fded98c..047208b 100644
--- a/dist/bootstrap.colorpickersliders.css
+++ b/dist/bootstrap.colorpickersliders.css
@@ -20,7 +20,7 @@
.cp-container .cp-transparency,
.cp-container .cp-swatches .cp-swatch {
- background:url(data:image/gif;base64,R0lGODlhBgAGAIABAMPDw////yH5BAEKAAEALAAAAAAGAAYAAAIKhIMGGMrs0pGgAAA7) repeat;
+ background: url(data:image/gif;base64,R0lGODlhBgAGAIABAMPDw////yH5BAEKAAEALAAAAAAGAAYAAAIKhIMGGMrs0pGgAAA7) repeat;
}
.cp-container .cp-slider,
@@ -33,6 +33,30 @@
position: relative;
}
+.cp-container .cp-sliderbutton {
+ color: #585858;
+ text-align: center;
+ font-size: 15px;
+ font-weight: bolder;
+ width: 18px;
+ margin: 0;
+ cursor: pointer;
+ top: 1px;
+ line-height: 24px;
+}
+
+.cp-container .cp-sliderbutton-minus {
+ float: left;
+ position: relative;
+ left: -20px;
+}
+
+.cp-container .cp-sliderbutton-plus {
+ float: right;
+ position: relative;
+ left: 20px;
+}
+
.cp-container .cp-hsvpanel {
width: auto;
height: auto;
@@ -69,9 +93,9 @@
.cp-container .cp-hsvpanel .cp-hsvpanel-h {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE2Njk5OTk5OTk5OTk5OTk4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzMyOTk5OTk5OTk5OTk5OTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDBmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjY3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODMzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,color-stop(0, #ff0000),color-stop(0.167, #ffff00),color-stop(0.333, #00ff00),color-stop(0.5, #00ffff),color-stop(0.667, #0000ff),color-stop(0.833, #ff00ff),color-stop(1, #ff0000));
- background-image: -webkit-linear-gradient(top,#ff0000 0%,#ffff00 16.7%,#00ff00 33.3%,#00ffff 50%,#0000ff 66.7%,#ff00ff 83.3%,#ff0000 100%);
- background-image: linear-gradient(to bottom,#ff0000 0%,#ffff00 16.7%,#00ff00 33.3%,#00ffff 50%,#0000ff 66.7%,#ff00ff 83.3%,#ff0000 100%);
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #ff0000), color-stop(0.167, #ffff00), color-stop(0.333, #00ff00), color-stop(0.5, #00ffff), color-stop(0.667, #0000ff), color-stop(0.833, #ff00ff), color-stop(1, #ff0000));
+ background-image: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%);
+ background-image: linear-gradient(to bottom, #ff0000 0%, #ffff00 16.7%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.7%, #ff00ff 83.3%, #ff0000 100%);
}
.cp-container .cp-hsvpanel .cp-hsvpanel-a span,
@@ -83,13 +107,13 @@
.cp-container .cp-hsvpanel .cp-hsvpanel-sv span {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==),
- url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
- background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,color-stop(0, rgb(0, 0, 0)),color-stop(1, rgba(0, 0, 0, 0))),
- -webkit-gradient(linear, 0% 0%, 100% 0%,color-stop(0, rgb(255, 255, 255)),color-stop(1, rgba(255, 255, 255, 0)));
- background-image: -webkit-linear-gradient(bottom,rgb(0, 0, 0) 0%,rgba(0, 0, 0, 0) 100%),
- -webkit-linear-gradient(left,rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0) 100%);
- background-image: linear-gradient(to top,rgb(0, 0, 0) 0%,rgba(0, 0, 0, 0) 100%),
- linear-gradient(to right,rgb(255, 255, 255) 0%,rgba(255, 255, 255, 0) 100%);
+ url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
+ background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0, rgb(0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0))),
+ -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgba(255, 255, 255, 0)));
+ background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%),
+ -webkit-linear-gradient(left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+ background-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%),
+ linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
}
.cp-container .cp-slider {
diff --git a/dist/bootstrap.colorpickersliders.js b/dist/bootstrap.colorpickersliders.js
index 6d3603b..aaea56a 100644
--- a/dist/bootstrap.colorpickersliders.js
+++ b/dist/bootstrap.colorpickersliders.js
@@ -12,7 +12,6 @@
*
* Using color math algorithms from EasyRGB Web site:/
* http://www.easyrgb.com/index.php?X=MATH */
-
(function($) {
'use strict';
@@ -46,7 +45,7 @@
hsv: null,
cielch: null
},
- MAXVALIDCHROMA = 144; // maximum valid chroma value found convertible to rgb (blue)
+ MAXVALIDCHROMA = 144; // maximum valid chroma value found convertible to rgb (blue)
init();
@@ -56,7 +55,7 @@
}
settings = $.extend({
- color: 'hsl(342, 52%, 70%)',
+ color: 'hsl(342, 50%, 70%)',
size: 'default', // sm | default | lg
placement: 'auto',
trigger: 'focus', // focus | manual
@@ -72,10 +71,12 @@
updateinterval: 30, // update interval of the sliders while in drag (ms)
previewontriggerelement: true,
previewcontrasttreshold: 15,
- previewformat: 'rgb', // rgb | hsl | hex
+ previewformat: 'rgb', // rgb | hsl | hex | hsl-rgb
erroneousciecolormarkers: true,
invalidcolorsopacity: 1, // everything below 1 causes slightly slower responses
finercierangeedges: true, // can be disabled for faster responses
+ rendervalues: false,
+ slidersplusminus: false,
titleswatchesadd: 'Add color to swatches',
titleswatchesremove: 'Remove color from swatches',
titleswatchesreset: 'Reset to default swatches',
@@ -89,6 +90,7 @@
settings.order = $.extend({
opacity: false,
hsl: false,
+ lightness: false,
rgb: false,
cie: false,
preview: false
@@ -117,7 +119,7 @@
rgbblue: 'RGB-Blue',
cielightness: 'CIE-Lightness',
ciechroma: 'CIE-Chroma',
- ciehue: 'CIE-hue',
+ ciehue: 'CIE-Hue',
opacity: 'Opacity',
preview: 'Preview'
}, options.labels);
@@ -289,6 +291,14 @@
});
triggerelement.popover('show');
+
+ if (settings.slidersplusminus) {
+ var button_width, popover;
+ button_width = parseInt( $('.cp-container .cp-sliderbutton').css('width'), 10);
+ popover = $('.cp-popover-container .popover-content');
+ popover.css('padding-left', (parseInt(popover.css('padding-left'), 10) + button_width - 6) + 'px');
+ popover.css('padding-right', (parseInt(popover.css('padding-right'), 10) + button_width - 6) + 'px');
+ }
}
function hidePopover() {
@@ -305,29 +315,155 @@
if (settings.sliders) {
if (settings.order.opacity !== false) {
- sliders[settings.order.opacity] = '
' + settings.labels.opacity + '
';
+ sliders[settings.order.opacity] = '';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.opacity] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.opacity] +=
+ '' +
+ '
' + settings.labels.opacity + ' ' +
+ '
' +
+ '
';
}
if (settings.order.hsl !== false) {
- sliders[settings.order.hsl] = '' + settings.labels.hslhue + '
' + settings.labels.hslsaturation + '
' + settings.labels.hsllightness + '
';
+ sliders[settings.order.hsl] = '';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.hsl] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.hsl] +=
+ '' +
+ '
' + settings.labels.hslhue + ' ' +
+ '
' +
+ '
';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.hsl] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.hsl] +=
+ '' +
+ '
' + settings.labels.hslsaturation + ' ' +
+ '
' +
+ '
';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.hsl] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.hsl] +=
+ '' +
+ '
' + settings.labels.hsllightness + ' ' +
+ '
' +
+ '
';
+ }
+
+ if (settings.order.lightness !== false) {
+ sliders[settings.order.lightness] = '';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.lightness] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.lightness] +=
+ '' +
+ '
' + settings.labels.hsllightness + ' ' +
+ '
' +
+ '
';
}
if (settings.order.rgb !== false) {
- sliders[settings.order.rgb] = '' + settings.labels.rgbred + '
' + settings.labels.rgbgreen + '
' + settings.labels.rgbblue + '
';
+ sliders[settings.order.rgb] = '';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.rgb] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.rgb] +=
+ '' +
+ '
' + settings.labels.rgbred + ' ' +
+ '
' +
+ '
';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.rgb] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.rgb] +=
+ '' +
+ '
' + settings.labels.rgbgreen + ' ' +
+ '
' +
+ '
';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.rgb] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.rgb] +=
+ '' +
+ '
' + settings.labels.rgbblue + ' ' +
+ '
' +
+ '
';
}
if (settings.order.cie !== false) {
- sliders[settings.order.cie] = '' + settings.labels.cielightness + '
' + settings.labels.ciechroma + '
' + settings.labels.ciehue + '
';
+ sliders[settings.order.cie] = '';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.cie] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.cie] +=
+ '' +
+ '
' + settings.labels.cielightness + ' ' +
+ '
' +
+ '
';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.cie] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.cie] +=
+ '' +
+ '
' + settings.labels.ciechroma + ' ' +
+ '
' +
+ '
';
+
+ if (settings.slidersplusminus) {
+ sliders[settings.order.cie] +=
+ '-
' +
+ '+
';
+ }
+ sliders[settings.order.cie] +=
+ '' +
+ '
' + settings.labels.ciehue + ' ' +
+ '
' +
+ '
';
}
if (settings.order.preview !== false) {
- sliders[settings.order.preview] = '
';
+ sliders[settings.order.preview] =
+ '
';
}
}
if (settings.grouping) {
- if (!!settings.hsvpanel + !!(settings.sliders && sliders.length > 0) + !!settings.swatches > 1) {
+ if (settings.hsvpanel + (settings.sliders && sliders.length > 0) + !!settings.swatches > 1) {
color_picker_html += '';
}
else {
@@ -415,8 +551,9 @@
ciechroma_marker: $('.cp-ciechroma .cp-marker', container),
ciehue: $('.cp-ciehue span', container),
ciehue_marker: $('.cp-ciehue .cp-marker', container),
- preview: $('.cp-preview input', container)
- },
+ preview: $('.cp-preview input', container),
+ slider_button: $('.cp-sliderbutton', container)
+ },
all_pills: $('.cp-pills', container),
pills: {
hsvpanel: $('.cp-pill-hsvpanel', container),
@@ -569,6 +706,67 @@
ev.stopImmediatePropagation();
});
+ elements.sliders.slider_button.on('click', function(ev) {
+ ev.preventDefault();
+ if (ev.which > 1) {
+ return;
+ }
+
+ function min_max (value, min, max) {
+ if (value < min) {
+ value = min;
+ }
+ if (value > max) {
+ value = max;
+ }
+ return value;
+ }
+
+ var increment;
+ if ($(ev.target).hasClass('cp-sliderbutton-plus')) {
+ increment = 1;
+ }
+ else if ($(ev.target).hasClass('cp-sliderbutton-minus')) {
+ increment = -1;
+ }
+ else {
+ increment = 0;
+ }
+
+ if ($(ev.target).hasClass('cp-opacity')) {
+ _updateColorsProperty('hsla', 'a', min_max((color.hsla.a + increment/100), 0, 1) );
+ }
+ if ($(ev.target).hasClass('cp-hslhue')) {
+ _updateColorsProperty('hsla', 'h', min_max((color.hsla.h + increment), 0, 360) );
+ }
+ if ($(ev.target).hasClass('cp-hslsaturation')) {
+ _updateColorsProperty('hsla', 's', min_max((color.hsla.s + increment/100), 0, 1) );
+ }
+ if ($(ev.target).hasClass('cp-hsllightness')) {
+ _updateColorsProperty('hsla', 'l', min_max((color.hsla.l + increment/100), 0, 1) );
+ }
+ if ($(ev.target).hasClass('cp-rgbred')) {
+ _updateColorsProperty('rgba', 'r', min_max((color.rgba.r + increment), 0, 255) );
+ }
+ if ($(ev.target).hasClass('cp-rgbgreen')) {
+ _updateColorsProperty('rgba', 'g', min_max((color.rgba.g + increment), 0, 255) );
+ }
+ if ($(ev.target).hasClass('cp-rgbblue')) {
+ _updateColorsProperty('rgba', 'b', min_max((color.rgba.b + increment), 0, 255) );
+ }
+ if ($(ev.target).hasClass('cp-cielightness')) {
+ _updateColorsProperty('cielch', 'l', min_max((color.cielch.l + increment), 0, MAXLIGHT) );
+ }
+ if ($(ev.target).hasClass('cp-ciechroma')) {
+ _updateColorsProperty('cielch', 'c', min_max((color.cielch.c + increment), 0, MAXVALIDCHROMA) );
+ }
+ if ($(ev.target).hasClass('cp-ciehue')) {
+ _updateColorsProperty('cielch', 'h', min_max((color.cielch.h + increment), 0, 360) );
+ }
+
+ _updateAllElements();
+ });
+
elements.sliders.hue.parent().on('touchstart mousedown', function(ev) {
ev.preventDefault();
@@ -843,8 +1041,10 @@
}
function getConfig(name) {
+ var r;
+
try {
- var r = JSON.parse(localStorage.getItem('cp-userdata-' + name));
+ r = JSON.parse(localStorage.getItem('cp-userdata-' + name));
return r;
}
@@ -1288,6 +1488,10 @@
_renderLightness();
}
+ if (settings.order.lightness !== false) {
+ _renderLightness();
+ }
+
if (settings.order.rgb !== false) {
_renderRed();
_renderGreen();
@@ -1388,43 +1592,57 @@
function _renderHue() {
setGradient(elements.sliders.hue, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 'h', 0, 360, 7));
-
+ if (settings.rendervalues) {
+ elements.sliders.hue.html(settings.labels.hslhue + ': ' + (color.hsla.h).toFixed(0));
+ }
elements.sliders.hue_marker.css('left', color.hsla.h / 360 * 100 + '%');
}
function _renderSaturation() {
setGradient(elements.sliders.saturation, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 's', 0, 1, 2));
-
+ if (settings.rendervalues) {
+ elements.sliders.saturation.html(settings.labels.hslsaturation + ': ' + (color.hsla.s * 100).toFixed(0) + '%');
+ }
elements.sliders.saturation_marker.css('left', color.hsla.s * 100 + '%');
}
function _renderLightness() {
setGradient(elements.sliders.lightness, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 'l', 0, 1, 3));
-
+ if (settings.rendervalues) {
+ elements.sliders.lightness.html(settings.labels.hsllightness + ': ' + (color.hsla.l * 100).toFixed(0) + '%');
+ }
elements.sliders.lightness_marker.css('left', color.hsla.l * 100 + '%');
}
function _renderOpacity() {
setGradient(elements.sliders.opacity, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 'a', 0, 1, 2));
-
+ if (settings.rendervalues) {
+ elements.sliders.opacity.html(settings.labels.opacity + ': ' + (color.hsla.a * 100).toFixed(0) + '%');
+ }
elements.sliders.opacity_marker.css('left', color.hsla.a * 100 + '%');
}
function _renderRed() {
setGradient(elements.sliders.red, $.fn.ColorPickerSliders.getScaledGradientStops(color.rgba, 'r', 0, 255, 2));
-
+ if (settings.rendervalues) {
+ elements.sliders.red.html(settings.labels.rgbred + ': ' + (color.rgba.r).toFixed(0));
+ }
elements.sliders.red_marker.css('left', color.rgba.r / 255 * 100 + '%');
}
function _renderGreen() {
setGradient(elements.sliders.green, $.fn.ColorPickerSliders.getScaledGradientStops(color.rgba, 'g', 0, 255, 2));
-
+ if (settings.rendervalues) {
+ elements.sliders.green.html(settings.labels.rgbgreen + ': ' + (color.rgba.g).toFixed(0));
+ }
elements.sliders.green_marker.css('left', color.rgba.g / 255 * 100 + '%');
}
function _renderBlue() {
setGradient(elements.sliders.blue, $.fn.ColorPickerSliders.getScaledGradientStops(color.rgba, 'b', 0, 255, 2));
-
+ if (settings.rendervalues) {
+ elements.sliders.blue.html(settings.labels.rgbblue + ': ' + (color.rgba.b).toFixed(0));
+ }
elements.sliders.blue_marker.css('left', color.rgba.b / 255 * 100 + '%');
}
@@ -1467,7 +1685,9 @@
gradientstops = _extendCieGradientStops(gradientstops, 'l');
setGradient(elements.sliders.cielightness, gradientstops);
-
+ if (settings.rendervalues) {
+ elements.sliders.cielightness.html(settings.labels.cielightness + ': ' + (color.cielch.l).toFixed(0));
+ }
elements.sliders.cielightness_marker.css('left', color.cielch.l / MAXLIGHT * 100 + '%');
}
@@ -1477,7 +1697,9 @@
gradientstops = _extendCieGradientStops(gradientstops, 'c');
setGradient(elements.sliders.ciechroma, gradientstops);
-
+ if (settings.rendervalues) {
+ elements.sliders.ciechroma.html(settings.labels.ciechroma + ': ' + (color.cielch.c).toFixed(0));
+ }
elements.sliders.ciechroma_marker.css('left', color.cielch.c / MAXVALIDCHROMA * 100 + '%');
}
@@ -1487,7 +1709,9 @@
gradientstops = _extendCieGradientStops(gradientstops, 'h');
setGradient(elements.sliders.ciehue, gradientstops);
-
+ if (settings.rendervalues) {
+ elements.sliders.ciehue.html(settings.labels.ciehue + ': ' + (color.cielch.h).toFixed(0));
+ }
elements.sliders.ciehue_marker.css('left', color.cielch.h / 360 * 100 + '%');
}
@@ -1505,6 +1729,9 @@
colorstring = color.tiny.toHexString();
}
break;
+ case 'hsl-rgb':
+ colorstring = color.tiny.toHslString() + ' ' + color.tiny.toRgbString();
+ break;
case 'hsl':
colorstring = color.tiny.toHslString();
break;
@@ -1777,8 +2004,8 @@
/* source: http://phpjs.org/functions/base64_encode/ */
$.fn.ColorPickerSliders.base64encode = function(data) {
- var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
- var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
+ var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
+ o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
enc = '',
tmp_arr = [];
diff --git a/dist/bootstrap.colorpickersliders.min.css b/dist/bootstrap.colorpickersliders.min.css
index 72ad824..bd1d475 100644
--- a/dist/bootstrap.colorpickersliders.min.css
+++ b/dist/bootstrap.colorpickersliders.min.css
@@ -1,16 +1 @@
-/*
- * Bootstrap Color Picker Sliders - v3.0.1
- *
- * Bootstrap 3 optimized responsive color selector with HSV, HSL, RGB and CIE-Lch (which supports human perceived lightness) selectors and color swatches.
- * http://www.virtuosoft.eu/code/bootstrap-colorpickersliders/
- *
- * Made by István Ujj-Mészáros
- * Under Apache License v2.0 License
- *
- * Requirements: *
- * TinyColor: https://github.com/bgrins/TinyColor/
- *
- * Using color math algorithms from EasyRGB Web site:/
- * http://www.easyrgb.com/index.php?X=MATH */
-
-.cp-container{width:auto;position:relative;box-sizing:border-box}.cp-container .cp-swatches .cp-swatch,.cp-container .cp-transparency{background:url(data:image/gif;base64,R0lGODlhBgAGAIABAMPDw////yH5BAEKAAEALAAAAAAGAAYAAAIKhIMGGMrs0pGgAAA7) repeat}.cp-container .cp-preview,.cp-container .cp-slider{width:auto;height:26px;border:1px solid #dadada;margin:0 4px;margin-bottom:5pt;position:relative}.cp-container .cp-hsvpanel{width:auto;height:auto;border:none;margin-right:-6px}.cp-container .cp-hsvpanel .cp-hsvpanel-a,.cp-container .cp-hsvpanel .cp-hsvpanel-h,.cp-container .cp-hsvpanel .cp-hsvpanel-sv{border:1px solid #dadada;display:inline-block;position:relative;margin:0 8px 0 4px}.cp-container .cp-hsvpanel .cp-hsvpanel-sv{width:122px;height:122px;cursor:default}.cp-container .cp-hsvpanel .cp-hsvpanel-a,.cp-container .cp-hsvpanel .cp-hsvpanel-h{width:30px;height:122px;cursor:ns-resize}.cp-container.cp-container-sm .cp-hsvpanel .cp-hsvpanel-a,.cp-container.cp-container-sm .cp-hsvpanel .cp-hsvpanel-h{width:27px}.cp-container .cp-hsvpanel .cp-hsvpanel-h{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE2Njk5OTk5OTk5OTk5OTk4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzMyOTk5OTk5OTk5OTk5OTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDBmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjY3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODMzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,red),color-stop(0.167,#ff0),color-stop(0.333,#0f0),color-stop(0.5,#0ff),color-stop(0.667,#00f),color-stop(0.833,#f0f),color-stop(1,red));background-image:-webkit-linear-gradient(top,red 0,#ff0 16.7%,#0f0 33.3%,#0ff 50%,#00f 66.7%,#f0f 83.3%,red 100%);background-image:linear-gradient(to bottom,red 0,#ff0 16.7%,#0f0 33.3%,#0ff 50%,#00f 66.7%,#f0f 83.3%,red 100%)}.cp-container .cp-hsvpanel .cp-hsvpanel-a span,.cp-container .cp-hsvpanel .cp-hsvpanel-sv span{display:block;width:100%;height:100%}.cp-container .cp-hsvpanel .cp-hsvpanel-sv span{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);background-image:-webkit-gradient(linear,0 100%,0 0,color-stop(0,#000),color-stop(1,rgba(0,0,0,0))),-webkit-gradient(linear,0 0,100% 0,color-stop(0,#fff),color-stop(1,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(bottom,#000 0,rgba(0,0,0,0)100%),-webkit-linear-gradient(left,#fff 0,rgba(255,255,255,0)100%);background-image:linear-gradient(to top,#000 0,rgba(0,0,0,0)100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0)100%)}.cp-container .cp-slider{cursor:ew-resize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cp-container .cp-preview{height:39px}.cp-container .cp-preview input,.cp-container .cp-slider span{display:block;width:100%;height:100%;text-align:center;font-family:sans-serif;line-height:26px;font-size:14px}.cp-container .cp-preview input{line-height:39px;padding:0;outline:0;box-shadow:none;border:none;border-radius:0;background:0 0}.cp-container .cp-marker{position:absolute;display:block;width:11px;height:10px;margin-left:-5px;top:-2px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAMAAABVLlSxAAAAtFBMVEUAAAB1dXVsbGxwcHBqampoaGj+/v7r6+vw8PBmZmb6+vp/f39kZGTh4eGxsbHT09NlZWXX19dgYGBfX1/W1tb7+/vx8fHZ2dna2tqBgYFnZ2fg4ODe3t7j4+Pi4uL39/eampro6Ojl5eXy8vLt7e3p6emgoKCmpqatra1ra2v19fXm5ubz8/Pv7+9hYWFjY2N5eXlvb29zc3Ps7Ozd3d2ysrKCgoKDg4P9/f2zs7P4+Pj///83Bdu/AAAAAXRSTlMAQObYZgAAAGlJREFUeNo9ylcbgWAAhuG3ZZQoEkkhDe099P3//9Xg6j56Dh6cjkm623IsnTNIDsqlEsN1HBVI5evdDMtN0FOQKt14lWrArzLcnpZjvx9nshcA342jviO1hlHuTdlgVnzIt8VfNubiNwzmhAsoIAkssgAAAABJRU5ErkJggg==)}.cp-container .cp-hsvmarker-vertical{position:absolute;display:block;width:10px;height:11px;margin-top:-5px;right:-2px;top:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAbFBMVEUAAACysrLz8/NjY2Pw8PBmZmbe3t7////4+PiBgYHs7Oxra2t0dHSDg4Ozs7P9/f3p6enj4+Pa2trh4eFhYWFfX1/X19d5eXlvb2/7+/vm5ub19fXt7e2tra2mpqagoKCamprl5eXT09NwcHAw/sWYAAAAAXRSTlMAQObYZgAAAFtJREFUCNclzNsWQCAURdFDF1RIpZI7//+P6thP82GPBTjGiJtR8uL+Qcbztsa7LHVQPXFDAMLe1pu2nEA3NGNbi2QZQF9MRWKQXTXLSoUshQ6dic73CL+DUu8HF6YEcUMoNOYAAAAASUVORK5CYII=)}.cp-container .cp-marker-point{position:absolute;display:block;width:10px;height:10px;margin-left:-5px;margin-top:-5px;left:0;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAALVBMVEX///8AAADX19d7e3t4eHhDQ0NnZ2dzc3NLS0tbW1tTU1POzs7AwMC0tLSoqKgWXydUAAAAAnRSTlN1ACTbQIsAAAA/SURBVAjXYxAUDBcUZBCUeOQIJNcyqAgySB4QZDJkyGYUFFBmMAKS2xiEFQR5JjIIOjHcAqoR0WsEkoKlgoIAHu8JgCiLy9kAAAAASUVORK5CYII=)}.cp-container.cp-unconvertible-cie-color .cp-slider.cp-ciechroma .cp-marker,.cp-container.cp-unconvertible-cie-color .cp-slider.cp-ciehue .cp-marker,.cp-container.cp-unconvertible-cie-color .cp-slider.cp-cielightness .cp-marker{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAMAAABVLlSxAAAAvVBMVEUAAADLy8u8vLzZ2dlgYGDe3t5sbGxoaGjr6+vb29tqamrCwsJmZmZkZGTW1tbExMTw8PDj4+Pa2tpfX1/z8/PU1NTp6enX19fg4OBwcHDc3NzJycn4+Pj7+/v6+vrd3d3h4eH+/v6lpaWmpqaampqgoKBlZWWzs7Orq6tra2uxsbGBgYF1dXVnZ2d/f3/T09PMzMxhYWFjY2P19fXv7+9vb2/l5eVzc3P////n5+eysrKDg4OCgoJ5eXnoAACu7h75AAAAAXRSTlMAQObYZgAAAG1JREFUeNo1ytsaQkAAReGdkpRKRUTofEANBoOY93+sfMp/tS4WNqM4mSvSdJztEJPFkETyJNUYEmMtzvhApfsQN89cCXxJ3WOD1yXfRlx3Cv8NPK+pZedFFaCVnQ+8rGp02Kl8fPDX3Nvs/YYvAnQLhiGwga0AAAAASUVORK5CYII=)}.cp-container .cp-swatches ul{width:auto;margin:-7px -7px 0 0;padding:0;list-style-type:none}.cp-container .cp-swatches li{float:left;margin:7px 7px 0 0}.cp-swatches button{float:left;margin:7px 7px 0 0;width:26px;height:26px;display:inline-block;font-size:12px;padding:0}.cp-container .cp-swatch{width:26px;height:26px;display:inline-block;cursor:pointer;border-color:#ccc;position:relative;overflow:hidden;outline:0;padding:0}.cp-container .cp-swatch span{display:block;width:100%;height:100%}.cp-container .cp-swatches .cp-swatch.actual{border-color:#777;-webkit-box-shadow:0 0 5px #fa8000;-moz-box-shadow:0 0 5px #fa8000;box-shadow:0 0 5px #fa8000}.cp-popover-container .popover{max-width:1000px}.popover-content .cp-container{width:263px}.popover-content .cp-container.cp-container-sm{width:208px}.popover-content .cp-container.cp-container-sm .cp-swatch,.popover-content .cp-container.cp-container-sm .cp-swatches button{width:23px;height:23px}.popover-content .cp-container.cp-container-lg{width:369px}.popover-content .cp-container.cp-container-lg .cp-swatch,.popover-content .cp-container.cp-container-lg .cp-swatches button{width:27px;height:27px}.cp-container .cp-pills{display:inline-block;list-style-type:none;margin-bottom:5px;padding:0;font-size:12px}.cp-container .cp-pills li{display:inline-block;margin:3px;padding:3px 0}.cp-container .cp-pills li a{padding:5px;color:#000;text-decoration:none}.cp-container .cp-pills li a.active,.cp-container .cp-pills li a:hover{background-color:#02afff;color:#fff}.cp-container.hsvpanel-active .cp-sliders,.cp-container.hsvpanel-active .cp-swatches,.cp-container.sliders-active .cp-hsvpanel,.cp-container.sliders-active .cp-swatches,.cp-container.swatches-active .cp-hsvpanel,.cp-container.swatches-active .cp-sliders{display:none}.cp-popover-container .cp-hsvpanel,.cp-popover-container .cp-sliders{margin-top:7px}.form-control[readonly].cp-preventtouchkeyboardonshow{cursor:text}.popover-content .cp-container.hsvpanel-active{width:220px}
\ No newline at end of file
+.cp-container{width:auto;position:relative;box-sizing:border-box}.cp-container .cp-swatches .cp-swatch,.cp-container .cp-transparency{background:url(data:image/gif;base64,R0lGODlhBgAGAIABAMPDw////yH5BAEKAAEALAAAAAAGAAYAAAIKhIMGGMrs0pGgAAA7) repeat}.cp-container .cp-preview,.cp-container .cp-slider{width:auto;height:26px;border:1px solid #dadada;margin:0 4px;margin-bottom:5pt;position:relative}.cp-container .cp-sliderbutton{color:#585858;text-align:center;font-size:15px;font-weight:bolder;width:18px;margin:0;cursor:pointer;top:1px;line-height:24px}.cp-container .cp-sliderbutton-minus{float:left;position:relative;left:-20px}.cp-container .cp-sliderbutton-plus{float:right;position:relative;left:20px}.cp-container .cp-hsvpanel{width:auto;height:auto;border:none;margin-right:-6px}.cp-container .cp-hsvpanel .cp-hsvpanel-a,.cp-container .cp-hsvpanel .cp-hsvpanel-h,.cp-container .cp-hsvpanel .cp-hsvpanel-sv{border:1px solid #dadada;display:inline-block;position:relative;margin:0 8px 0 4px}.cp-container .cp-hsvpanel .cp-hsvpanel-sv{width:122px;height:122px;cursor:default}.cp-container .cp-hsvpanel .cp-hsvpanel-a,.cp-container .cp-hsvpanel .cp-hsvpanel-h{width:30px;height:122px;cursor:ns-resize}.cp-container.cp-container-sm .cp-hsvpanel .cp-hsvpanel-a,.cp-container.cp-container-sm .cp-hsvpanel .cp-hsvpanel-h{width:27px}.cp-container .cp-hsvpanel .cp-hsvpanel-h{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmYwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwLjE2Njk5OTk5OTk5OTk5OTk4Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuMzMyOTk5OTk5OTk5OTk5OTYiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDBmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMC41Ii8+PHN0b3Agc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuNjY3Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAuODMzIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,red),color-stop(.167,#ff0),color-stop(.333,#0f0),color-stop(.5,#0ff),color-stop(.667,#00f),color-stop(.833,#f0f),color-stop(1,red));background-image:-webkit-linear-gradient(top,red 0,#ff0 16.7%,#0f0 33.3%,#0ff 50%,#00f 66.7%,#f0f 83.3%,red 100%);background-image:linear-gradient(to bottom,red 0,#ff0 16.7%,#0f0 33.3%,#0ff 50%,#00f 66.7%,#f0f 83.3%,red 100%)}.cp-container .cp-hsvpanel .cp-hsvpanel-a span,.cp-container .cp-hsvpanel .cp-hsvpanel-sv span{display:block;width:100%;height:100%}.cp-container .cp-hsvpanel .cp-hsvpanel-sv span{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);background-image:-webkit-gradient(linear,0 100%,0 0,color-stop(0,#000),color-stop(1,rgba(0,0,0,0))),-webkit-gradient(linear,0 0,100% 0,color-stop(0,#fff),color-stop(1,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(bottom,#000 0,rgba(0,0,0,0) 100%),-webkit-linear-gradient(left,#fff 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to top,#000 0,rgba(0,0,0,0) 100%),linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%)}.cp-container .cp-slider{cursor:ew-resize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cp-container .cp-preview{height:39px}.cp-container .cp-preview input,.cp-container .cp-slider span{display:block;width:100%;height:100%;text-align:center;font-family:sans-serif;line-height:26px;font-size:14px}.cp-container .cp-preview input{line-height:39px;padding:0;outline:0;box-shadow:none;border:none;border-radius:0;background:0 0}.cp-container .cp-marker{position:absolute;display:block;width:11px;height:10px;margin-left:-5px;top:-2px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAMAAABVLlSxAAAAtFBMVEUAAAB1dXVsbGxwcHBqampoaGj+/v7r6+vw8PBmZmb6+vp/f39kZGTh4eGxsbHT09NlZWXX19dgYGBfX1/W1tb7+/vx8fHZ2dna2tqBgYFnZ2fg4ODe3t7j4+Pi4uL39/eampro6Ojl5eXy8vLt7e3p6emgoKCmpqatra1ra2v19fXm5ubz8/Pv7+9hYWFjY2N5eXlvb29zc3Ps7Ozd3d2ysrKCgoKDg4P9/f2zs7P4+Pj///83Bdu/AAAAAXRSTlMAQObYZgAAAGlJREFUeNo9ylcbgWAAhuG3ZZQoEkkhDe099P3//9Xg6j56Dh6cjkm623IsnTNIDsqlEsN1HBVI5evdDMtN0FOQKt14lWrArzLcnpZjvx9nshcA342jviO1hlHuTdlgVnzIt8VfNubiNwzmhAsoIAkssgAAAABJRU5ErkJggg==)}.cp-container .cp-hsvmarker-vertical{position:absolute;display:block;width:10px;height:11px;margin-top:-5px;right:-2px;top:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAbFBMVEUAAACysrLz8/NjY2Pw8PBmZmbe3t7////4+PiBgYHs7Oxra2t0dHSDg4Ozs7P9/f3p6enj4+Pa2trh4eFhYWFfX1/X19d5eXlvb2/7+/vm5ub19fXt7e2tra2mpqagoKCamprl5eXT09NwcHAw/sWYAAAAAXRSTlMAQObYZgAAAFtJREFUCNclzNsWQCAURdFDF1RIpZI7//+P6thP82GPBTjGiJtR8uL+Qcbztsa7LHVQPXFDAMLe1pu2nEA3NGNbi2QZQF9MRWKQXTXLSoUshQ6dic73CL+DUu8HF6YEcUMoNOYAAAAASUVORK5CYII=)}.cp-container .cp-marker-point{position:absolute;display:block;width:10px;height:10px;margin-left:-5px;margin-top:-5px;left:0;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKBAMAAAB/HNKOAAAALVBMVEX///8AAADX19d7e3t4eHhDQ0NnZ2dzc3NLS0tbW1tTU1POzs7AwMC0tLSoqKgWXydUAAAAAnRSTlN1ACTbQIsAAAA/SURBVAjXYxAUDBcUZBCUeOQIJNcyqAgySB4QZDJkyGYUFFBmMAKS2xiEFQR5JjIIOjHcAqoR0WsEkoKlgoIAHu8JgCiLy9kAAAAASUVORK5CYII=)}.cp-container.cp-unconvertible-cie-color .cp-slider.cp-ciechroma .cp-marker,.cp-container.cp-unconvertible-cie-color .cp-slider.cp-ciehue .cp-marker,.cp-container.cp-unconvertible-cie-color .cp-slider.cp-cielightness .cp-marker{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAMAAABVLlSxAAAAvVBMVEUAAADLy8u8vLzZ2dlgYGDe3t5sbGxoaGjr6+vb29tqamrCwsJmZmZkZGTW1tbExMTw8PDj4+Pa2tpfX1/z8/PU1NTp6enX19fg4OBwcHDc3NzJycn4+Pj7+/v6+vrd3d3h4eH+/v6lpaWmpqaampqgoKBlZWWzs7Orq6tra2uxsbGBgYF1dXVnZ2d/f3/T09PMzMxhYWFjY2P19fXv7+9vb2/l5eVzc3P////n5+eysrKDg4OCgoJ5eXnoAACu7h75AAAAAXRSTlMAQObYZgAAAG1JREFUeNo1ytsaQkAAReGdkpRKRUTofEANBoOY93+sfMp/tS4WNqM4mSvSdJztEJPFkETyJNUYEmMtzvhApfsQN89cCXxJ3WOD1yXfRlx3Cv8NPK+pZedFFaCVnQ+8rGp02Kl8fPDX3Nvs/YYvAnQLhiGwga0AAAAASUVORK5CYII=)}.cp-container .cp-swatches ul{width:auto;margin:-7px -7px 0 0;padding:0;list-style-type:none}.cp-container .cp-swatches li{float:left;margin:7px 7px 0 0}.cp-swatches button{float:left;margin:7px 7px 0 0;width:26px;height:26px;display:inline-block;font-size:12px;padding:0}.cp-container .cp-swatch{width:26px;height:26px;display:inline-block;cursor:pointer;border-color:#ccc;position:relative;overflow:hidden;outline:0;padding:0}.cp-container .cp-swatch span{display:block;width:100%;height:100%}.cp-container .cp-swatches .cp-swatch.actual{border-color:#777;-webkit-box-shadow:0 0 5px #fa8000;-moz-box-shadow:0 0 5px #fa8000;box-shadow:0 0 5px #fa8000}.cp-popover-container .popover{max-width:1000px}.popover-content .cp-container{width:263px}.popover-content .cp-container.cp-container-sm{width:208px}.popover-content .cp-container.cp-container-sm .cp-swatch,.popover-content .cp-container.cp-container-sm .cp-swatches button{width:23px;height:23px}.popover-content .cp-container.cp-container-lg{width:369px}.popover-content .cp-container.cp-container-lg .cp-swatch,.popover-content .cp-container.cp-container-lg .cp-swatches button{width:27px;height:27px}.cp-container .cp-pills{display:none}.cp-container .cp-pills{display:inline-block}.cp-container .cp-pills{list-style-type:none;margin-bottom:5px;padding:0;font-size:12px}.cp-container .cp-pills li{display:inline-block;margin:3px;padding:3px 0}.cp-container .cp-pills li a{padding:5px;color:#000;text-decoration:none}.cp-container .cp-pills li a.active,.cp-container .cp-pills li a:hover{background-color:#02afff;color:#fff}.cp-container.hsvpanel-active .cp-sliders,.cp-container.hsvpanel-active .cp-swatches{display:none}.cp-container.sliders-active .cp-hsvpanel,.cp-container.sliders-active .cp-swatches{display:none}.cp-container.swatches-active .cp-hsvpanel,.cp-container.swatches-active .cp-sliders{display:none}.cp-popover-container .cp-hsvpanel,.cp-popover-container .cp-sliders{margin-top:7px}.form-control[readonly].cp-preventtouchkeyboardonshow{cursor:text}.popover-content .cp-container.hsvpanel-active{width:220px}
\ No newline at end of file
diff --git a/dist/bootstrap.colorpickersliders.min.js b/dist/bootstrap.colorpickersliders.min.js
index c435ff3..48cb9e9 100644
--- a/dist/bootstrap.colorpickersliders.min.js
+++ b/dist/bootstrap.colorpickersliders.min.js
@@ -12,4 +12,5 @@
*
* Using color math algorithms from EasyRGB Web site:/
* http://www.easyrgb.com/index.php?X=MATH */
-!function(a){"use strict";a.fn.ColorPickerSliders=function(b){return this.each(function(){function c(){"undefined"==typeof b&&(b={}),fb=a.extend({color:"hsl(342, 52%, 70%)",size:"default",placement:"auto",trigger:"focus",preventtouchkeyboardonshow:!0,title:"",hsvpanel:!1,sliders:!0,grouping:!0,swatches:["FFFFFF","C0C0C0","808080","000000","FF0000","800000","FFFF00","808000","00FF00","008000","00FFFF","008080","0000FF","000080","FF00FF","800080"],customswatches:"colorpickkersliders",connectedinput:!1,flat:!1,updateinterval:30,previewontriggerelement:!0,previewcontrasttreshold:15,previewformat:"rgb",erroneousciecolormarkers:!0,invalidcolorsopacity:1,finercierangeedges:!0,titleswatchesadd:"Add color to swatches",titleswatchesremove:"Remove color from swatches",titleswatchesreset:"Reset to default swatches",order:{},labels:{},onchange:function(){}},b),fb.order=b.hasOwnProperty("order")?a.extend({opacity:!1,hsl:!1,rgb:!1,cie:!1,preview:!1},b.order):{opacity:0,hsl:1,rgb:2,cie:3,preview:4},b.hasOwnProperty("labels")||(b.labels={}),fb.labels=a.extend({hslhue:"HSL-Hue",hslsaturation:"HSL-Saturation",hsllightness:"HSL-Lightness",rgbred:"RGB-Red",rgbgreen:"RGB-Green",rgbblue:"RGB-Blue",cielightness:"CIE-Lightness",ciechroma:"CIE-Chroma",ciehue:"CIE-hue",opacity:"Opacity",preview:"Preview"},b.labels)}function d(){kb||(kb=!0,pb=a.fn.ColorPickerSliders.detectWhichGradientIsSupported(),"filter"===pb&&(pb=!1),!pb&&a.fn.ColorPickerSliders.svgSupported()&&(pb="svg"),c(),fb.order.hasOwnProperty("preview")&&fb.order.preview!==!1||pb||(fb.order.preview=10),p(),f(),g(),P(),Q(),fb.flat&&o(),q())}function e(){n(),E(),O(),r()}function f(){mb?(yb.tiny=tinycolor(lb.val()),yb.tiny.isValid()||(yb.tiny=tinycolor(fb.color))):yb.tiny=tinycolor(fb.color),yb.hsla=yb.tiny.toHsl(),yb.rgba=yb.tiny.toRgb(),yb.hsv=yb.tiny.toHsv(),yb.cielch=a.fn.ColorPickerSliders.rgb2lch(yb.rgba)}function g(){fb.connectedinput&&(nb=fb.connectedinput instanceof jQuery?fb.connectedinput:a(fb.connectedinput))}function h(b,c){var d=tinycolor(b);return d.isValid()?(yb.tiny=d,yb.hsla=d.toHsl(),yb.rgba=d.toRgb(),yb.hsv=d.toHsv(),yb.cielch=a.fn.ColorPickerSliders.rgb2lch(yb.rgba),fb.flat||qb?(gb.removeClass("cp-unconvertible-cie-color"),O(c)):(c||Q(),P()),!0):!1}function i(a){if(!fb.flat){if(qb)return lb.popover("hide"),lb.popover("show"),void r();k(a),qb=!0}}function j(){qb=!1,l()}function k(b){if(!(hb instanceof jQuery)){switch("undefined"==typeof b&&(b=!1),hb=a('
').appendTo("body"),gb=a('
').appendTo(hb),gb.html(m()),fb.size){case"sm":gb.addClass("cp-container-sm");break;case"lg":gb.addClass("cp-container-lg")}e(),b||x(),lb.popover({html:!0,animation:!1,trigger:"manual",title:fb.title,placement:fb.placement,container:hb,content:function(){return gb}}),lb.popover("show")}}function l(){hb.remove(),hb=null,lb.popover("destroy")}function m(){var a=[],b="";if(fb.sliders&&(fb.order.opacity!==!1&&(a[fb.order.opacity]=''),fb.order.hsl!==!1&&(a[fb.order.hsl]=''+fb.labels.hslsaturation+'
'+fb.labels.hsllightness+'
'),fb.order.rgb!==!1&&(a[fb.order.rgb]=''),fb.order.cie!==!1&&(a[fb.order.cie]=''+fb.labels.cielightness+'
'),fb.order.preview!==!1&&(a[fb.order.preview]='
')),fb.grouping&&(b+=!!fb.hsvpanel+!!(fb.sliders&&a.length>0)+!!fb.swatches>1?'