From d42c3259dc50891d69fa3ef75ab11eee2d05f78f Mon Sep 17 00:00:00 2001 From: MircMM Date: Sun, 18 Jan 2015 09:28:35 +0100 Subject: [PATCH 1/4] ignore eclipse .project folder --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 9077589..4cd27c1 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,5 @@ nbproject *.iws node_modules bower_components +.project + From 40a205daea86d3f9c35d057b879c319c2de91110 Mon Sep 17 00:00:00 2001 From: MircMM Date: Sun, 18 Jan 2015 09:40:53 +0100 Subject: [PATCH 2/4] added/changed options: rendervalues: Display currently selected value in each slider. slidersplusminus: Display -1 and +1 buttons left and right of each slider. previewformat: 'hsl-rgb' Display HSL and RGB value in preview field. --- index.html | 113 +++++++++- src/bootstrap.colorpickersliders.css | 36 ++++ src/bootstrap.colorpickersliders.js | 304 +++++++++++++++++++++++++-- 3 files changed, 430 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 972c6fb..77d72d0 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,8 @@ + + + + + @@ -353,7 +358,7 @@

Full featured flat rendering

}); </script> - invalidcolorsopacity hiddens the colors from the CIE sliders whose can not be converted to RGB without lowering their chroma values. It is good for creating color schemas. + invalidcolorsopacity hides the colors from the CIE sliders whose can not be converted to RGB without lowering their chroma values. It is good for creating color schemas. + + + + +

Settings

@@ -381,7 +469,8 @@

Settings

+ + 'lg': Large popover. @@ -419,7 +508,12 @@

Settings

- + + @@ -484,6 +578,19 @@

Settings

+ + + + + + + + + +
size 'sm': Small sized popover.
'default': Default popover size.
- 'large': Large popover.
placement
previewformatThis is the color format on the preview slider (if visible). Can be rgb, hsl or hex. Note that hex format can not represent the opacity value.This is the color format on the preview slider (if visible). Can be rgb, + + hsl, hex or hsl-rgb. + Note that hex format can not represent the opacity value. + Warning: hsl-rgb can be too wide for preview field.
swatches titleswatchesreset string: Title of the reset swatches button.
rendervaluestrue: Display currently selected value in each slider.
+ false: Just show default normal sliders.
slidersplusminustrue: Display -1 and +1 buttons left and right of each slider. + Clicking on them decreases or increases slider value by 1.
+ false: Just show default normal sliders.
diff --git a/src/bootstrap.colorpickersliders.css b/src/bootstrap.colorpickersliders.css index b90e9ae..9e5aca2 100644 --- a/src/bootstrap.colorpickersliders.css +++ b/src/bootstrap.colorpickersliders.css @@ -1,3 +1,8 @@ +/* -mm-start------------------------ */ +/* all my additions and changes are between mm-start and mm-end comments */ +/* -mm-end-------------------------- */ + + .cp-container { width: auto; position: relative; @@ -19,6 +24,37 @@ position: relative; } +/* -mm-start------------------------ */ +.cp-container .cp-sliderbutton { + color: #fff; + background-color: #333; + background-image: none; + text-align: center; + vertical-align: middle; + font-size: 15px; + font-weight: bolder; + width: 20px; + height: 26px; + border: 2px solid #999; + border-radius: 8px; + margin: 0 4px; + margin-bottom: 5pt; + cursor: pointer; +} + +.cp-container .cp-sliderbutton-minus { + float: left; + position: relative; + left: -22px; +} + +.cp-container .cp-sliderbutton-plus { + float: right; + position: relative; + left: 22px; +} +/* -mm-end-------------------------- */ + .cp-container .cp-hsvpanel { width: auto; height: auto; diff --git a/src/bootstrap.colorpickersliders.js b/src/bootstrap.colorpickersliders.js index f52af5d..9936c8d 100644 --- a/src/bootstrap.colorpickersliders.js +++ b/src/bootstrap.colorpickersliders.js @@ -1,3 +1,7 @@ +/* -mm-start------------------------ */ +/* all my additions and changes are between mm-start and mm-end comments */ +/* -mm-end-------------------------- */ + (function($) { 'use strict'; @@ -32,7 +36,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(); @@ -42,7 +46,7 @@ } settings = $.extend({ - color: 'hsl(342, 52%, 70%)', + color: 'hsl(342, 50%, 70%)', size: 'default', // sm | default | lg placement: 'auto', trigger: 'focus', // focus | manual @@ -62,6 +66,10 @@ erroneousciecolormarkers: true, invalidcolorsopacity: 1, // everything below 1 causes slightly slower responses finercierangeedges: true, // can be disabled for faster responses + /* -mm-start------------------------ */ + rendervalues: false, + slidersplusminus: false, + /* -mm-end-------------------------- */ titleswatchesadd: 'Add color to swatches', titleswatchesremove: 'Remove color from swatches', titleswatchesreset: 'Reset to default swatches', @@ -75,6 +83,9 @@ settings.order = $.extend({ opacity: false, hsl: false, + /* -mm-start------------------------ */ + lightness: false, + /* -mm-end-------------------------- */ rgb: false, cie: false, preview: false @@ -103,7 +114,7 @@ rgbblue: 'RGB-Blue', cielightness: 'CIE-Lightness', ciechroma: 'CIE-Chroma', - ciehue: 'CIE-hue', + ciehue: 'CIE-Hue', opacity: 'Opacity', preview: 'Preview' }, options.labels); @@ -275,6 +286,17 @@ }); triggerelement.popover('show'); + + /* -mm-start------------------------ */ + 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 ) + 'px'); + popover.css('padding-right', ( parseInt(popover.css('padding-right'), 10) + button_width ) + 'px'); + + } + /* -mm-end-------------------------- */ } function hidePopover() { @@ -288,29 +310,156 @@ var sliders = [], color_picker_html = ''; + /* -mm-start------------------------ */ 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] = + '
'; } } + /* -mm-end-------------------------- */ if (settings.grouping) { if (!!settings.hsvpanel + !!(settings.sliders && sliders.length > 0) + !!settings.swatches > 1) { @@ -401,8 +550,11 @@ 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), + /* -mm-start------------------------ */ + slider_button: $('.cp-sliderbutton', container) + /* -mm-end-------------------------- */ + }, all_pills: $('.cp-pills', container), pills: { hsvpanel: $('.cp-pill-hsvpanel', container), @@ -555,6 +707,69 @@ ev.stopImmediatePropagation(); }); + /* -mm-start------------------------ */ + 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 mm_add; + if ($(ev.target).hasClass('cp-sliderbutton-plus')) { + mm_add = 1; + } + else if ($(ev.target).hasClass('cp-sliderbutton-minus')) { + mm_add = -1; + } + else { + mm_add = 0; + } + + if ($(ev.target).hasClass('cp-opacity')) { + _updateColorsProperty('hsla', 'a', min_max((color.hsla.a + mm_add/100), 0, 1) ); + } + if ($(ev.target).hasClass('cp-hslhue')) { + _updateColorsProperty('hsla', 'h', min_max((color.hsla.h + mm_add), 0, 360) ); + } + if ($(ev.target).hasClass('cp-hslsaturation')) { + _updateColorsProperty('hsla', 's', min_max((color.hsla.s + mm_add/100), 0, 1) ); + } + if ($(ev.target).hasClass('cp-hsllightness')) { + _updateColorsProperty('hsla', 'l', min_max((color.hsla.l + mm_add/100), 0, 1) ); + } + if ($(ev.target).hasClass('cp-rgbred')) { + _updateColorsProperty('rgba', 'r', min_max((color.rgba.r + mm_add), 0, 255) ); + } + if ($(ev.target).hasClass('cp-rgbgreen')) { + _updateColorsProperty('rgba', 'g', min_max((color.rgba.g + mm_add), 0, 255) ); + } + if ($(ev.target).hasClass('cp-rgbblue')) { + _updateColorsProperty('rgba', 'b', min_max((color.rgba.b + mm_add), 0, 255) ); + } + if ($(ev.target).hasClass('cp-cielightness')) { + _updateColorsProperty('cielch', 'l', min_max((color.cielch.l + mm_add), 0, MAXLIGHT) ); + } + if ($(ev.target).hasClass('cp-ciechroma')) { + _updateColorsProperty('cielch', 'c', min_max((color.cielch.c + mm_add), 0, MAXVALIDCHROMA) ); + } + if ($(ev.target).hasClass('cp-ciehue')) { + _updateColorsProperty('cielch', 'h', min_max((color.cielch.h + mm_add), 0, 360) ); + } + + _updateAllElements(); + }); + /* -mm-end-------------------------- */ + elements.sliders.hue.parent().on('touchstart mousedown', function(ev) { ev.preventDefault(); @@ -1274,6 +1489,12 @@ _renderLightness(); } + /* -mm-start------------------------ */ + if (settings.order.lightness !== false) { + _renderLightness(); + } + /* -mm-end-------------------------- */ + if (settings.order.rgb !== false) { _renderRed(); _renderGreen(); @@ -1374,43 +1595,71 @@ function _renderHue() { setGradient(elements.sliders.hue, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 'h', 0, 360, 7)); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.hue.html(settings.labels.hslhue + ': ' + (color.hsla.h).toFixed(0)); + } + /* -mm-end-------------------------- */ 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)); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.saturation.html(settings.labels.hslsaturation + ': ' + (color.hsla.s * 100).toFixed(0) + '%'); + } + /* -mm-end-------------------------- */ 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)); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.lightness.html(settings.labels.hsllightness + ': ' + (color.hsla.l * 100).toFixed(0) + '%'); + } + /* -mm-end-------------------------- */ 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)); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.opacity.html(settings.labels.opacity + ': ' + (color.hsla.a * 100).toFixed(0) + '%'); + } + /* -mm-end-------------------------- */ 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)); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.red.html(settings.labels.rgbred + ': ' + (color.rgba.r).toFixed(0)); + } + /* -mm-end-------------------------- */ 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)); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.green.html(settings.labels.rgbgreen + ': ' + (color.rgba.g).toFixed(0)); + } + /* -mm-end-------------------------- */ 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)); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.blue.html(settings.labels.rgbblue + ': ' + (color.rgba.b).toFixed(0)); + } + /* -mm-end-------------------------- */ elements.sliders.blue_marker.css('left', color.rgba.b / 255 * 100 + '%'); } @@ -1453,7 +1702,11 @@ gradientstops = _extendCieGradientStops(gradientstops, 'l'); setGradient(elements.sliders.cielightness, gradientstops); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.cielightness.html(settings.labels.cielightness + ': ' + (color.cielch.l).toFixed(0)); + } + /* -mm-end-------------------------- */ elements.sliders.cielightness_marker.css('left', color.cielch.l / MAXLIGHT * 100 + '%'); } @@ -1463,7 +1716,11 @@ gradientstops = _extendCieGradientStops(gradientstops, 'c'); setGradient(elements.sliders.ciechroma, gradientstops); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.ciechroma.html(settings.labels.ciechroma + ': ' + (color.cielch.c).toFixed(0)); + } + /* -mm-end-------------------------- */ elements.sliders.ciechroma_marker.css('left', color.cielch.c / MAXVALIDCHROMA * 100 + '%'); } @@ -1473,7 +1730,11 @@ gradientstops = _extendCieGradientStops(gradientstops, 'h'); setGradient(elements.sliders.ciehue, gradientstops); - + /* -mm-start------------------------ */ + if (settings.rendervalues) { + elements.sliders.ciehue.html(settings.labels.ciehue + ': ' + (color.cielch.h).toFixed(0)); + } + /* -mm-end-------------------------- */ elements.sliders.ciehue_marker.css('left', color.cielch.h / 360 * 100 + '%'); } @@ -1491,6 +1752,9 @@ colorstring = color.tiny.toHexString(); } break; + case 'hsl-rgb': + colorstring = color.tiny.toHslString() + ' ' + color.tiny.toRgbString(); + break; case 'hsl': colorstring = color.tiny.toHslString(); break; From 207dffbc98855840f71050aea1350807c58b4a12 Mon Sep 17 00:00:00 2001 From: MircMM Date: Sun, 18 Jan 2015 10:18:46 +0100 Subject: [PATCH 3/4] cleaned up the code --- index.html | 13 +-- src/bootstrap.colorpickersliders.css | 7 -- src/bootstrap.colorpickersliders.js | 156 ++++++++++----------------- 3 files changed, 60 insertions(+), 116 deletions(-) diff --git a/index.html b/index.html index 77d72d0..8c9f7ea 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,3 @@ - - - - - @@ -369,7 +364,6 @@

Full featured flat rendering

-

More sliders options

@@ -450,7 +444,6 @@

More sliders options

-

Settings

@@ -469,7 +462,7 @@

Settings

@@ -509,11 +502,9 @@

Settings

- @@ -578,7 +569,6 @@

Settings

- -
size 'sm': Small sized popover.
'default': Default popover size.
- + 'lg': Large popover.
previewformat This is the color format on the preview slider (if visible). Can be rgb, - hsl, hex or hsl-rgb. Note that hex format can not represent the opacity value. Warning: hsl-rgb can be too wide for preview field.
swatches titleswatchesreset string: Title of the reset swatches button.
rendervalues true: Display currently selected value in each slider.
@@ -590,7 +580,6 @@

Settings

Clicking on them decreases or increases slider value by 1.
false: Just show default normal sliders.
diff --git a/src/bootstrap.colorpickersliders.css b/src/bootstrap.colorpickersliders.css index 9e5aca2..1f33fd7 100644 --- a/src/bootstrap.colorpickersliders.css +++ b/src/bootstrap.colorpickersliders.css @@ -1,8 +1,3 @@ -/* -mm-start------------------------ */ -/* all my additions and changes are between mm-start and mm-end comments */ -/* -mm-end-------------------------- */ - - .cp-container { width: auto; position: relative; @@ -24,7 +19,6 @@ position: relative; } -/* -mm-start------------------------ */ .cp-container .cp-sliderbutton { color: #fff; background-color: #333; @@ -53,7 +47,6 @@ position: relative; left: 22px; } -/* -mm-end-------------------------- */ .cp-container .cp-hsvpanel { width: auto; diff --git a/src/bootstrap.colorpickersliders.js b/src/bootstrap.colorpickersliders.js index 9936c8d..971611b 100644 --- a/src/bootstrap.colorpickersliders.js +++ b/src/bootstrap.colorpickersliders.js @@ -1,8 +1,3 @@ -/* -mm-start------------------------ */ -/* all my additions and changes are between mm-start and mm-end comments */ -/* -mm-end-------------------------- */ - - (function($) { 'use strict'; @@ -66,10 +61,8 @@ erroneousciecolormarkers: true, invalidcolorsopacity: 1, // everything below 1 causes slightly slower responses finercierangeedges: true, // can be disabled for faster responses - /* -mm-start------------------------ */ rendervalues: false, slidersplusminus: false, - /* -mm-end-------------------------- */ titleswatchesadd: 'Add color to swatches', titleswatchesremove: 'Remove color from swatches', titleswatchesreset: 'Reset to default swatches', @@ -83,9 +76,7 @@ settings.order = $.extend({ opacity: false, hsl: false, - /* -mm-start------------------------ */ lightness: false, - /* -mm-end-------------------------- */ rgb: false, cie: false, preview: false @@ -287,16 +278,13 @@ triggerelement.popover('show'); - /* -mm-start------------------------ */ 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 ) + 'px'); - popover.css('padding-right', ( parseInt(popover.css('padding-right'), 10) + button_width ) + 'px'); - + popover.css('padding-left', (parseInt(popover.css('padding-left'), 10) + button_width ) + 'px'); + popover.css('padding-right', (parseInt(popover.css('padding-right'), 10) + button_width ) + 'px'); } - /* -mm-end-------------------------- */ } function hidePopover() { @@ -310,7 +298,6 @@ var sliders = [], color_picker_html = ''; - /* -mm-start------------------------ */ if (settings.sliders) { if (settings.order.opacity !== false) { @@ -321,11 +308,11 @@ '
-
' + '
+
'; } - sliders[settings.order.opacity] += - '
' + - '' + settings.labels.opacity + '' + - '
' + - '
'; + sliders[settings.order.opacity] += + '
' + + '' + settings.labels.opacity + '' + + '
' + + '
'; } if (settings.order.hsl !== false) { @@ -336,47 +323,49 @@ '
-
' + '
+
'; } - sliders[settings.order.hsl] += - '
' + - '' + settings.labels.hslhue + '' + - '
' + - '
'; + sliders[settings.order.hsl] += + '
' + + '' + settings.labels.hslhue + '' + + '
' + + '
'; if (settings.slidersplusminus) { sliders[settings.order.hsl] += '
-
' + '
+
'; } - sliders[settings.order.hsl] += - '
' + - '' + settings.labels.hslsaturation + '' + - '
' + - '
'; + sliders[settings.order.hsl] += + '
' + + '' + settings.labels.hslsaturation + '' + + '
' + + '
'; if (settings.slidersplusminus) { sliders[settings.order.hsl] += '
-
' + '
+
'; } - sliders[settings.order.hsl] += - '
' + - '' + settings.labels.hsllightness + '' + - '
' + - '
'; + sliders[settings.order.hsl] += + '
' + + '' + settings.labels.hsllightness + '' + + '
' + + '
'; } + /* mircmm: my special case, I needed only L from HSL */ if (settings.order.lightness !== false) { sliders[settings.order.lightness] = ''; + if (settings.slidersplusminus) { sliders[settings.order.lightness] += '
-
' + '
+
'; } - sliders[settings.order.lightness] += - '
' + - '' + settings.labels.hsllightness + '' + - '
' + - '
'; + sliders[settings.order.lightness] += + '
' + + '' + settings.labels.hsllightness + '' + + '
' + + '
'; } if (settings.order.rgb !== false) { @@ -387,33 +376,33 @@ '
-
' + '
+
'; } - sliders[settings.order.rgb] += - '
' + - '' + settings.labels.rgbred + '' + - '
' + - '
'; + sliders[settings.order.rgb] += + '
' + + '' + settings.labels.rgbred + '' + + '
' + + '
'; if (settings.slidersplusminus) { sliders[settings.order.rgb] += '
-
' + '
+
'; } - sliders[settings.order.rgb] += - '
' + - '' + settings.labels.rgbgreen + '' + - '
' + - '
'; + sliders[settings.order.rgb] += + '
' + + '' + settings.labels.rgbgreen + '' + + '
' + + '
'; if (settings.slidersplusminus) { sliders[settings.order.rgb] += '
-
' + '
+
'; } - sliders[settings.order.rgb] += - '
' + - '' + settings.labels.rgbblue + '' + - '
' + - '
'; + sliders[settings.order.rgb] += + '
' + + '' + settings.labels.rgbblue + '' + + '
' + + '
'; } if (settings.order.cie !== false) { @@ -424,33 +413,33 @@ '
-
' + '
+
'; } - sliders[settings.order.cie] += - '
' + - '' + settings.labels.cielightness + '' + - '
' + - '
'; + sliders[settings.order.cie] += + '
' + + '' + settings.labels.cielightness + '' + + '
' + + '
'; if (settings.slidersplusminus) { sliders[settings.order.cie] += '
-
' + '
+
'; } - sliders[settings.order.cie] += - '
' + - '' + settings.labels.ciechroma + '' + - '
' + - '
'; + sliders[settings.order.cie] += + '
' + + '' + settings.labels.ciechroma + '' + + '
' + + '
'; if (settings.slidersplusminus) { sliders[settings.order.cie] += '
-
' + '
+
'; } - sliders[settings.order.cie] += - '
' + - '' + settings.labels.ciehue + '' + - '
' + - '
'; + sliders[settings.order.cie] += + '
' + + '' + settings.labels.ciehue + '' + + '
' + + '
'; } if (settings.order.preview !== false) { @@ -459,7 +448,6 @@ } } - /* -mm-end-------------------------- */ if (settings.grouping) { if (!!settings.hsvpanel + !!(settings.sliders && sliders.length > 0) + !!settings.swatches > 1) { @@ -551,9 +539,7 @@ ciehue: $('.cp-ciehue span', container), ciehue_marker: $('.cp-ciehue .cp-marker', container), preview: $('.cp-preview input', container), - /* -mm-start------------------------ */ slider_button: $('.cp-sliderbutton', container) - /* -mm-end-------------------------- */ }, all_pills: $('.cp-pills', container), pills: { @@ -707,7 +693,6 @@ ev.stopImmediatePropagation(); }); - /* -mm-start------------------------ */ elements.sliders.slider_button.on('click', function(ev) { ev.preventDefault(); if (ev.which > 1) { @@ -768,7 +753,6 @@ _updateAllElements(); }); - /* -mm-end-------------------------- */ elements.sliders.hue.parent().on('touchstart mousedown', function(ev) { ev.preventDefault(); @@ -1489,11 +1473,9 @@ _renderLightness(); } - /* -mm-start------------------------ */ if (settings.order.lightness !== false) { _renderLightness(); } - /* -mm-end-------------------------- */ if (settings.order.rgb !== false) { _renderRed(); @@ -1595,71 +1577,57 @@ function _renderHue() { setGradient(elements.sliders.hue, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 'h', 0, 360, 7)); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.hue.html(settings.labels.hslhue + ': ' + (color.hsla.h).toFixed(0)); } - /* -mm-end-------------------------- */ 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)); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.saturation.html(settings.labels.hslsaturation + ': ' + (color.hsla.s * 100).toFixed(0) + '%'); } - /* -mm-end-------------------------- */ 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)); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.lightness.html(settings.labels.hsllightness + ': ' + (color.hsla.l * 100).toFixed(0) + '%'); } - /* -mm-end-------------------------- */ 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)); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.opacity.html(settings.labels.opacity + ': ' + (color.hsla.a * 100).toFixed(0) + '%'); } - /* -mm-end-------------------------- */ 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)); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.red.html(settings.labels.rgbred + ': ' + (color.rgba.r).toFixed(0)); } - /* -mm-end-------------------------- */ 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)); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.green.html(settings.labels.rgbgreen + ': ' + (color.rgba.g).toFixed(0)); } - /* -mm-end-------------------------- */ 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)); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.blue.html(settings.labels.rgbblue + ': ' + (color.rgba.b).toFixed(0)); } - /* -mm-end-------------------------- */ elements.sliders.blue_marker.css('left', color.rgba.b / 255 * 100 + '%'); } @@ -1702,11 +1670,9 @@ gradientstops = _extendCieGradientStops(gradientstops, 'l'); setGradient(elements.sliders.cielightness, gradientstops); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.cielightness.html(settings.labels.cielightness + ': ' + (color.cielch.l).toFixed(0)); } - /* -mm-end-------------------------- */ elements.sliders.cielightness_marker.css('left', color.cielch.l / MAXLIGHT * 100 + '%'); } @@ -1716,11 +1682,9 @@ gradientstops = _extendCieGradientStops(gradientstops, 'c'); setGradient(elements.sliders.ciechroma, gradientstops); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.ciechroma.html(settings.labels.ciechroma + ': ' + (color.cielch.c).toFixed(0)); } - /* -mm-end-------------------------- */ elements.sliders.ciechroma_marker.css('left', color.cielch.c / MAXVALIDCHROMA * 100 + '%'); } @@ -1730,11 +1694,9 @@ gradientstops = _extendCieGradientStops(gradientstops, 'h'); setGradient(elements.sliders.ciehue, gradientstops); - /* -mm-start------------------------ */ if (settings.rendervalues) { elements.sliders.ciehue.html(settings.labels.ciehue + ': ' + (color.cielch.h).toFixed(0)); } - /* -mm-end-------------------------- */ elements.sliders.ciehue_marker.css('left', color.cielch.h / 360 * 100 + '%'); } From e95ead8109ac70afd4dbfd2cabf8d960965e7521 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Istv=C3=A1n=20Ujj-M=C3=A9sz=C3=A1ros?= Date: Thu, 12 Apr 2018 03:46:29 +0200 Subject: [PATCH 4/4] Some cleanup and minor tweaks. --- Gruntfile.js | 10 +- dist/bootstrap.colorpickersliders.css | 46 +- dist/bootstrap.colorpickersliders.js | 279 ++- dist/bootstrap.colorpickersliders.min.css | 17 +- dist/bootstrap.colorpickersliders.min.js | 3 +- dist/bootstrap.colorpickersliders.nocielch.js | 1710 ----------------- ...otstrap.colorpickersliders.nocielch.min.js | 15 - index.html | 46 +- package-lock.json | 1238 ++++++++++++ package.json | 12 +- src/bootstrap.colorpickersliders.css | 47 +- src/bootstrap.colorpickersliders.js | 77 +- src/bootstrap.colorpickersliders.nocielch.js | 1696 ---------------- 13 files changed, 1608 insertions(+), 3588 deletions(-) delete mode 100644 dist/bootstrap.colorpickersliders.nocielch.js delete mode 100644 dist/bootstrap.colorpickersliders.nocielch.min.js create mode 100644 package-lock.json delete mode 100644 src/bootstrap.colorpickersliders.nocielch.js 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.labels.opacity+'
    '),fb.order.hsl!==!1&&(a[fb.order.hsl]='
    '+fb.labels.hslhue+'
    '+fb.labels.hslsaturation+'
    '+fb.labels.hsllightness+'
    '),fb.order.rgb!==!1&&(a[fb.order.rgb]='
    '+fb.labels.rgbred+'
    '+fb.labels.rgbgreen+'
    '+fb.labels.rgbblue+'
    '),fb.order.cie!==!1&&(a[fb.order.cie]='
    '+fb.labels.cielightness+'
    '+fb.labels.ciechroma+'
    '+fb.labels.ciehue+'
    '),fb.order.preview!==!1&&(a[fb.order.preview]='
    ')),fb.grouping&&(b+=!!fb.hsvpanel+!!(fb.sliders&&a.length>0)+!!fb.swatches>1?'
      ':'"),fb.hsvpanel&&(b+='
      '),fb.sliders){b+='
      ';for(var c=0;c"}return fb.swatches&&(b+='
        '),b}function n(){ib={actualswatch:!1,swatchescontainer:a(".cp-swatches",gb),swatches:a(".cp-swatches ul",gb),swatches_add:a(".cp-swatches button.add",gb),swatches_remove:a(".cp-swatches button.remove",gb),swatches_reset:a(".cp-swatches button.reset",gb),all_sliders:a(".cp-sliders, .cp-preview input",gb),hsvpanel:{sv:a(".cp-hsvpanel-sv",gb),sv_marker:a(".cp-hsvpanel-sv .cp-marker-point",gb),h:a(".cp-hsvpanel-h",gb),h_marker:a(".cp-hsvpanel-h .cp-hsvmarker-vertical",gb),a:a(".cp-hsvpanel-a span",gb),a_marker:a(".cp-hsvpanel-a .cp-hsvmarker-vertical",gb)},sliders:{hue:a(".cp-hslhue span",gb),hue_marker:a(".cp-hslhue .cp-marker",gb),saturation:a(".cp-hslsaturation span",gb),saturation_marker:a(".cp-hslsaturation .cp-marker",gb),lightness:a(".cp-hsllightness span",gb),lightness_marker:a(".cp-hsllightness .cp-marker",gb),opacity:a(".cp-opacity span",gb),opacity_marker:a(".cp-opacity .cp-marker",gb),red:a(".cp-rgbred span",gb),red_marker:a(".cp-rgbred .cp-marker",gb),green:a(".cp-rgbgreen span",gb),green_marker:a(".cp-rgbgreen .cp-marker",gb),blue:a(".cp-rgbblue span",gb),blue_marker:a(".cp-rgbblue .cp-marker",gb),cielightness:a(".cp-cielightness span",gb),cielightness_marker:a(".cp-cielightness .cp-marker",gb),ciechroma:a(".cp-ciechroma span",gb),ciechroma_marker:a(".cp-ciechroma .cp-marker",gb),ciehue:a(".cp-ciehue span",gb),ciehue_marker:a(".cp-ciehue .cp-marker",gb),preview:a(".cp-preview input",gb)},all_pills:a(".cp-pills",gb),pills:{hsvpanel:a(".cp-pill-hsvpanel",gb),sliders:a(".cp-pill-sliders",gb),swatches:a(".cp-pill-swatches",gb)}},fb.customswatches||(ib.swatches_add.hide(),ib.swatches_remove.hide(),ib.swatches_reset.hide())}function o(){fb.flat&&(mb?gb=a('
        ').insertAfter(lb):(gb=a('
        '),lb.append(gb)),gb.append(m()),e(),x())}function p(){fb.connectedinput instanceof jQuery?fb.connectedinput.add(lb):fb.connectedinput=fb.connectedinput===!1?lb:a(fb.connectedinput).add(lb)}function q(){lb.on("colorpickersliders.updateColor",function(a,b){h(b)}),lb.on("colorpickersliders.show",function(){i()}),lb.on("colorpickersliders.hide",function(){j()}),fb.flat||"focus"!==fb.trigger||("undefined"==typeof lb.attr("tabindex")&&lb.attr("tabindex",-1),fb.preventtouchkeyboardonshow&&(a(lb).prop("readonly",!0).addClass("cp-preventtouchkeyboardonshow"),a(lb).on("click",function(b){qb&&(a(lb).prop("readonly",!1),b.stopPropagation())})),mb||a(lb).on("click",function(a){i(),a.stopPropagation()}),a(lb).on("focus",function(a){i(),a.stopPropagation()}),a(lb).on("blur",function(b){j(),fb.preventtouchkeyboardonshow&&a(lb).prop("readonly",!0),b.stopPropagation()})),nb&&nb.on("keyup change",function(){var b=a(this);h(b.val(),!0)})}function r(){gb.on("contextmenu",function(a){return a.preventDefault(),!1}),a(document).on("colorpickersliders.changeswatches",function(){E()}),ib.swatches.on("touchstart mousedown click","li span",function(b){var c=a(this).css("background-color");h(c),b.preventDefault()}),ib.swatches_add.on("touchstart mousedown click",function(a){H(),a.preventDefault(),a.stopPropagation()}),ib.swatches_remove.on("touchstart mousedown click",function(a){I(),a.preventDefault(),a.stopPropagation()}),ib.swatches_reset.on("touchstart touchend mousedown click",function(a){("click"===a.type||"touchend"===a.type)&&J(),a.preventDefault(),a.stopImmediatePropagation()}),ib.sliders.hue.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="hue";var b=L(sb,a);K("hsla","h",3.6*b),O()}}),ib.sliders.saturation.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="saturation";var b=L(sb,a);K("hsla","s",b/100),O()}}),ib.sliders.lightness.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="lightness";var b=L(sb,a);K("hsla","l",b/100),O()}}),ib.sliders.opacity.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="opacity";var b=L(sb,a);K("hsla","a",b/100),O()}}),ib.sliders.red.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="red";var b=L(sb,a);K("rgba","r",2.55*b),O()}}),ib.sliders.green.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="green";var b=L(sb,a);K("rgba","g",2.55*b),O()}}),ib.sliders.blue.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="blue";var b=L(sb,a);K("rgba","b",2.55*b),O()}}),ib.hsvpanel.sv.on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="hsvsv";var b=M("sv",a);K("hsv","s",b.horizontal/100),K("hsv","v",(100-b.vertical)/100),O()}}),ib.hsvpanel.h.on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="hsvh";var b=M("h",a);K("hsv","h",3.6*b.vertical),O()}}),ib.hsvpanel.a.on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="hsva";var b=M("a",a);K("hsv","a",(100-b.vertical)/100),O()}}),ib.sliders.cielightness.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="cielightness";var b=L(sb,a);K("cielch","l",rb/100*b),O()}}),ib.sliders.ciechroma.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="ciechroma";var b=L(sb,a);K("cielch","c",zb/100*b),O()}}),ib.sliders.ciehue.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){sb="ciehue";var b=L(sb,a);K("cielch","h",3.6*b),O()}}),ib.sliders.preview.on("click",function(){this.select()}),a(document).on("touchmove mousemove",function(a){sb&&((new Date).getTime()-xb>vb&&!wb?C(sb,a):B(sb,a))}),a(document).on("touchend mouseup",function(a){a.which>1||sb&&(sb=!1,a.preventDefault())}),ib.pills.hsvpanel.on("click",function(a){a.preventDefault(),y()}),ib.pills.sliders.on("click",function(a){a.preventDefault(),z()}),ib.pills.swatches.on("click",function(a){a.preventDefault(),A()}),fb.flat||hb.on("touchstart mousedown",".popover",function(a){return a.preventDefault(),a.stopPropagation(),!1})}function s(a,b){try{localStorage.setItem("cp-userdata-"+a,JSON.stringify(b))}catch(c){}}function t(a){try{var b=JSON.parse(localStorage.getItem("cp-userdata-"+a));return b}catch(c){return null}}function u(){return""!==ob?ob:(0===ib.pills.hsvpanel.length&&(ob+="_hsvpanel_"),0===ib.pills.sliders.length&&(ob+="_sliders_"),0===ib.pills.swatches.length&&(ob+="_swatches_"),ob)}function v(){return t("config_activepill"+u())}function w(a){return s("config_activepill"+u(),a)}function x(){switch(v()){case"hsvpanel":y();break;case"sliders":z();break;case"swatches":A();break;default:if(ib.pills.hsvpanel.length){y();break}if(ib.pills.sliders.length){z();break}if(ib.pills.swatches.length){A();break}}}function y(){return 0===ib.pills.hsvpanel.length?!1:(a("a",ib.all_pills).removeClass("active"),ib.pills.hsvpanel.addClass("active"),gb.removeClass("sliders-active swatches-active").addClass("hsvpanel-active"),w("hsvpanel"),O(!0),i(!0),!0)}function z(){return 0===ib.pills.sliders.length?!1:(a("a",ib.all_pills).removeClass("active"),ib.pills.sliders.addClass("active"),gb.removeClass("hsvpanel-active swatches-active").addClass("sliders-active"),w("sliders"),O(!0),i(!0),!0)}function A(){return 0===ib.pills.swatches.length?!1:(a("a",ib.all_pills).removeClass("active"),ib.pills.swatches.addClass("active"),gb.removeClass("hsvpanel-active sliders-active").addClass("swatches-active"),w("swatches"),O(!0),i(!0),!0)}function B(a,b){clearTimeout(ub),ub=setTimeout(function(){C(a,b)},vb)}function C(a,b){var c;if(wb)return void B(a,b);switch(wb=!0,xb=(new Date).getTime(),c="hsvsv"===a?M("sv",b):"hsvh"===a?M("h",b):"hsva"===a?M("a",b):L(a,b),a){case"hsvsv":K("hsv","s",c.horizontal/100),K("hsv","v",(100-c.vertical)/100);break;case"hsvh":K("hsv","h",3.6*c.vertical);break;case"hsva":K("hsv","a",(100-c.vertical)/100);break;case"hue":K("hsla","h",3.6*c);break;case"saturation":K("hsla","s",c/100);break;case"lightness":K("hsla","l",c/100);break;case"opacity":K("hsla","a",c/100);break;case"red":K("rgba","r",2.55*c);break;case"green":K("rgba","g",2.55*c);break;case"blue":K("rgba","b",2.55*c);break;case"cielightness":K("cielch","l",rb/100*c);break;case"ciechroma":K("cielch","c",zb/100*c);break;case"ciehue":K("cielch","h",3.6*c)}O(),b.preventDefault(),wb=!1}function D(){jb=[];for(var a=0;a").css("background-color",e.toRgbString()),g=a('
        ');g.append(f),ib.swatches.append(a("
      • ").append(g))}}}F()}}function F(){var b=!1;a("span",ib.swatches).filter(function(){var c=a(this).css("background-color");if(c=tinycolor(c),c.alpha=Math.round(100*c.alpha)/100,c.toRgbString()===yb.tiny.toRgbString()){b=!0;var d=a(this).parent();d.is(ib.actualswatch)||(ib.actualswatch&&ib.actualswatch.removeClass("actual"),ib.actualswatch=d,d.addClass("actual"))}}),b||ib.actualswatch&&(ib.actualswatch.removeClass("actual"),ib.actualswatch=!1),ib.actualswatch?(ib.swatches_add.prop("disabled",!0),ib.swatches_remove.prop("disabled",!1)):(ib.swatches_add.prop("disabled",!1),ib.swatches_remove.prop("disabled",!0))}function G(){localStorage.setItem("swatches-"+fb.customswatches,JSON.stringify(jb))}function H(){jb.unshift(yb.tiny.toRgbString()),G(),a(document).trigger("colorpickersliders.changeswatches")}function I(){var b=jb.indexOf(yb.tiny.toRgbString());-1!==b&&(jb.splice(b,1),G(),a(document).trigger("colorpickersliders.changeswatches"))}function J(){confirm("Do you really want to reset the swatches? All customizations will be lost!")&&(D(),G(),a(document).trigger("colorpickersliders.changeswatches"))}function K(b,c,d){switch(b){case"hsv":yb.hsv[c]=d,yb.tiny=tinycolor({h:yb.hsv.h,s:yb.hsv.s,v:yb.hsv.v,a:yb.hsv.a}),yb.rgba=yb.tiny.toRgb(),yb.hsla=yb.tiny.toHsl(),yb.cielch=a.fn.ColorPickerSliders.rgb2lch(yb.rgba);break;case"hsla":yb.hsla[c]=d,yb.tiny=tinycolor({h:yb.hsla.h,s:yb.hsla.s,l:yb.hsla.l,a:yb.hsla.a}),yb.rgba=yb.tiny.toRgb(),yb.hsv=yb.tiny.toHsv(),yb.cielch=a.fn.ColorPickerSliders.rgb2lch(yb.rgba),gb.removeClass("cp-unconvertible-cie-color");break;case"rgba":yb.rgba[c]=d,yb.tiny=tinycolor({r:yb.rgba.r,g:yb.rgba.g,b:yb.rgba.b,a:yb.hsla.a}),yb.hsla=yb.tiny.toHsl(),yb.hsv=yb.tiny.toHsv(),yb.cielch=a.fn.ColorPickerSliders.rgb2lch(yb.rgba),gb.removeClass("cp-unconvertible-cie-color");break;case"cielch":yb.cielch[c]=d,yb.rgba=a.fn.ColorPickerSliders.lch2rgb(yb.cielch),yb.tiny=tinycolor(yb.rgba),yb.hsla=yb.tiny.toHsl(),yb.hsv=yb.tiny.toHsv(),fb.erroneousciecolormarkers&&(yb.rgba.isok?gb.removeClass("cp-unconvertible-cie-color"):gb.addClass("cp-unconvertible-cie-color"))}}function L(b,c){var d=a.fn.ColorPickerSliders.calculateEventPositionPercentage(c,ib.sliders[b]);return ib.sliders[b+"_marker"].data("position",d),d}function M(b,c){var d=a.fn.ColorPickerSliders.calculateEventPositionPercentage(c,ib.hsvpanel.sv,!0);return ib.hsvpanel[b+"_marker"].data("position",d),d}function N(a){Ab=setTimeout(function(){O(a)},fb.updateinterval)}function O(a){return clearTimeout(Ab),Date.now=Date.now||function(){return+new Date},Date.now()-tb0&&d.push(g[h-1]);break}return a.merge(d,b)}function ab(){var b=a.fn.ColorPickerSliders.getScaledGradientStops(yb.cielch,"l",0,100,10,fb.invalidcolorsopacity);b=_(b,"l"),eb(ib.sliders.cielightness,b),ib.sliders.cielightness_marker.css("left",yb.cielch.l/rb*100+"%")}function bb(){var b=a.fn.ColorPickerSliders.getScaledGradientStops(yb.cielch,"c",0,zb,5,fb.invalidcolorsopacity);b=_(b,"c"),eb(ib.sliders.ciechroma,b),ib.sliders.ciechroma_marker.css("left",yb.cielch.c/zb*100+"%")}function cb(){var b=a.fn.ColorPickerSliders.getScaledGradientStops(yb.cielch,"h",0,360,28,fb.invalidcolorsopacity);b=_(b,"h"),eb(ib.sliders.ciehue,b),ib.sliders.ciehue_marker.css("left",yb.cielch.h/360*100+"%")}function db(){ib.sliders.preview.css("background",a.fn.ColorPickerSliders.csscolor(yb.rgba));var b;switch(fb.previewformat){case"hex":b=yb.hsla.a<1?yb.tiny.toRgbString():yb.tiny.toHexString();break;case"hsl":b=yb.tiny.toHslString();break;case"rgb":default:b=yb.tiny.toRgbString()}ib.sliders.preview.val(b)}function eb(b,c,d){switch("undefined"==typeof d&&(d=!1),c.sort(function(a,b){return a.position-b.position}),pb){case"noprefix":a.fn.ColorPickerSliders.renderNoprefix(b,c,d);break;case"webkit":a.fn.ColorPickerSliders.renderWebkit(b,c,d);break;case"ms":a.fn.ColorPickerSliders.renderMs(b,c,d);break;case"svg":a.fn.ColorPickerSliders.renderSVG(b,c,d);break;case"oldwebkit":a.fn.ColorPickerSliders.renderOldwebkit(b,c,d)}}var fb,gb,hb,ib,jb,kb=!1,lb=a(this),mb=lb.is("input"),nb=!1,ob="",pb=!1,qb=!1,rb=101,sb=!1,tb=0,ub=null,vb=70,wb=!1,xb=0,yb={tiny:null,hsla:null,rgba:null,hsv:null,cielch:null},zb=144;d();var Ab})},a.fn.ColorPickerSliders.getEventCoordinates=function(a){return"undefined"!=typeof a.pageX?{pageX:a.originalEvent.pageX,pageY:a.originalEvent.pageY}:"undefined"!=typeof a.originalEvent.touches?{pageX:a.originalEvent.touches[0].pageX,pageY:a.originalEvent.touches[0].pageY}:void 0},a.fn.ColorPickerSliders.calculateEventPositionPercentage=function(b,c,d){"undefined"==typeof d&&(d=!1);var e=a.fn.ColorPickerSliders.getEventCoordinates(b),f=c.width(),g=e.pageX-c.offset().left,h=g/f*100;if(0>h&&(h=0),h>100&&(h=100),d){var i=c.height(),j=e.pageY-c.offset().top,k=j/i*100;return 0>k&&(k=0),k>100&&(k=100),{horizontal:h,vertical:k}}return h},a.fn.ColorPickerSliders.getScaledGradientStops=function(b,c,d,e,f,g,h,i){"undefined"==typeof g&&(g=1),"undefined"==typeof h&&(h=0),"undefined"==typeof i&&(i=100);for(var j=[],k=e-d,l=!0,m=0;f>m;++m){var n,o=m/(f-1),p=a.fn.ColorPickerSliders.modifyColor(b,c,o*k+d);if(1>g){var q=a.fn.ColorPickerSliders.lch2rgb(p,g);l=q.isok,n=a.fn.ColorPickerSliders.csscolor(q,g)}else n=a.fn.ColorPickerSliders.csscolor(p,g);j[m]={color:n,position:o*(i-h)+h,isok:l,rawcolor:p}}return j},a.fn.ColorPickerSliders.getGradientStopsCSSString=function(a){for(var b="",c="",d="",e=0;e'}return{noprefix:b,oldwebkit:c,svg:d}},a.fn.ColorPickerSliders.renderNoprefix=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).noprefix;e=d?"linear-gradient(to bottom":"linear-gradient(to right",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderWebkit=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).noprefix;e=d?"-webkit-linear-gradient(top":"-webkit-linear-gradient(left",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderOldwebkit=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).oldwebkit;e=d?"-webkit-gradient(linear, 0% 0%, 0 100%":"-webkit-gradient(linear, 0% 0%, 100% 0%",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderMs=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).noprefix;e=d?"-ms-linear-gradient(to bottom":"-ms-linear-gradient(to right",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderSVG=function(b,c,d){"undefined"==typeof d&&(d=!1);var e="",f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).svg;e=d?'':'',e+=f,e+='',e="url(data:image/svg+xml;base64,"+a.fn.ColorPickerSliders.base64encode(e)+")",b.css("background-image",e)},a.fn.ColorPickerSliders.base64encode=function(a){var b,c,d,e,f,g,h,i,j="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",k=0,l=0,m="",n=[];if(!a)return a;do b=a.charCodeAt(k++),c=a.charCodeAt(k++),d=a.charCodeAt(k++),i=b<<16|c<<8|d,e=i>>18&63,f=i>>12&63,g=i>>6&63,h=63&i,n[l++]=j.charAt(e)+j.charAt(f)+j.charAt(g)+j.charAt(h);while(kb||a.g>b||a.b>b||a.r.9&&100>h);return b.hasOwnProperty("a")&&(d.a=b.a),d.r=Math.max(0,d.r),d.g=Math.max(0,d.g),d.b=Math.max(0,d.b),d.r=Math.min(255,d.r),d.g=Math.min(255,d.g),d.b=Math.min(255,d.b),1>c&&(d.a=d.hasOwnProperty("a")?d.a*c:c),d.isok=!1,d},a.fn.ColorPickerSliders.modifyColor=function(b,c,d){var e=a.extend({},b);if(!b.hasOwnProperty(c))throw"Missing color property: "+c;return e[c]=d,e},a.fn.ColorPickerSliders.csscolor=function(b,c){"undefined"==typeof c&&(c=1);var d=!1,e=a.extend({},b);return e.hasOwnProperty("c")&&(e=a.fn.ColorPickerSliders.lch2rgb(e,c)),e.hasOwnProperty("h")&&(d="hsla("+e.h+","+100*e.s+"%,"+100*e.l+"%,"+e.a+")"),e.hasOwnProperty("r")&&(d=e.a<1?"rgba("+Math.round(e.r)+","+Math.round(e.g)+","+Math.round(e.b)+","+e.a+")":"rgb("+Math.round(e.r)+","+Math.round(e.g)+","+Math.round(e.b)+")"),d},a.fn.ColorPickerSliders.rgb2XYZ=function(a){var b={},c=a.r/255,d=a.g/255,e=a.b/255;return c>.04045?c=Math.pow((c+.055)/1.055,2.4):c/=12.92,d>.04045?d=Math.pow((d+.055)/1.055,2.4):d/=12.92,e>.04045?e=Math.pow((e+.055)/1.055,2.4):e/=12.92,c=100*c,d=100*d,e=100*e,b.x=.4124*c+.3576*d+.1805*e,b.y=.2126*c+.7152*d+.0722*e,b.z=.0193*c+.1192*d+.9505*e,b},a.fn.ColorPickerSliders.XYZ2CIELab=function(a){var b={},c=a.x/95.047,d=a.y/100,e=a.z/108.883;return c=c>.008856?Math.pow(c,.333333333):7.787*c+.137931034,d=d>.008856?Math.pow(d,.333333333):7.787*d+.137931034,e=e>.008856?Math.pow(e,.333333333):7.787*e+.137931034,b.l=116*d-16,b.a=500*(c-d),b.b=200*(d-e),b},a.fn.ColorPickerSliders.CIELab2CIELCH=function(a){var b={};return b.l=a.l,b.c=Math.sqrt(Math.pow(a.a,2)+Math.pow(a.b,2)),b.h=Math.atan2(a.b,a.a),b.h=b.h>0?b.h/Math.PI*180:360-Math.abs(b.h)/Math.PI*180,b},a.fn.ColorPickerSliders.CIELCH2CIELab=function(a){var b={};return b.l=a.l,b.a=Math.cos(.01745329251*a.h)*a.c,b.b=Math.sin(.01745329251*a.h)*a.c,b},a.fn.ColorPickerSliders.CIELab2XYZ=function(a){var b={};return b.y=(a.l+16)/116,b.x=a.a/500+b.y,b.z=b.y-a.b/200,b.y=Math.pow(b.y,3)>.008856?Math.pow(b.y,3):(b.y-.137931034)/7.787,b.x=Math.pow(b.x,3)>.008856?Math.pow(b.x,3):(b.x-.137931034)/7.787,b.z=Math.pow(b.z,3)>.008856?Math.pow(b.z,3):(b.z-.137931034)/7.787,b.x=95.047*b.x,b.y=100*b.y,b.z=108.883*b.z,b},a.fn.ColorPickerSliders.XYZ2rgb=function(a){var b={};return a.x=a.x/100,a.y=a.y/100,a.z=a.z/100,b.r=3.2406*a.x+-1.5372*a.y+a.z*-.4986,b.g=a.x*-.9689+1.8758*a.y+.0415*a.z,b.b=.0557*a.x+a.y*-.204+1.057*a.z,b.r=b.r>.0031308?1.055*Math.pow(b.r,.41666667)-.055:12.92*b.r,b.g=b.g>.0031308?1.055*Math.pow(b.g,.41666667)-.055:12.92*b.g,b.b=b.b>.0031308?1.055*Math.pow(b.b,.41666667)-.055:12.92*b.b,b.r=Math.round(255*b.r),b.g=Math.round(255*b.g),b.b=Math.round(255*b.b),b},a.fn.ColorPickerSliders.detectWhichGradientIsSupported=function(){var a=document.createElement("detectGradientSupport").style;try{if(a.backgroundImage="linear-gradient(to top left, #9f9, white)",-1!==a.backgroundImage.indexOf("gradient"))return"noprefix";if(a.backgroundImage="-webkit-linear-gradient(left top, #9f9, white)",-1!==a.backgroundImage.indexOf("gradient"))return"webkit";if(a.backgroundImage="-ms-linear-gradient(left top, #9f9, white)",-1!==a.backgroundImage.indexOf("gradient"))return"ms";if(a.backgroundImage="-webkit-gradient(linear, left top, right bottom, from(#9f9), to(white))",-1!==a.backgroundImage.indexOf("gradient"))return"oldwebkit"}catch(b){try{if(a.filter='progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=0)',-1!==a.filter.indexOf("DXImageTransform"))return"filter"}catch(b){}}return!1},a.fn.ColorPickerSliders.svgSupported=function(){return!!document.createElementNS&&!!document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect}}(jQuery); \ No newline at end of file + +!function(q){"use strict";q.fn.ColorPickerSliders=function(W){return this.each(function(){var l,t,i,a,n,s,e=!1,c=q(this),o=c.is("input"),r=!1,d="",p=!1,h=!1,u=101,v=!1,g=0,b=null,f=70,m=!1,k=0,w={tiny:null,hsla:null,rgba:null,hsv:null,cielch:null},S=144;function y(){a={actualswatch:!1,swatchescontainer:q(".cp-swatches",t),swatches:q(".cp-swatches ul",t),swatches_add:q(".cp-swatches button.add",t),swatches_remove:q(".cp-swatches button.remove",t),swatches_reset:q(".cp-swatches button.reset",t),all_sliders:q(".cp-sliders, .cp-preview input",t),hsvpanel:{sv:q(".cp-hsvpanel-sv",t),sv_marker:q(".cp-hsvpanel-sv .cp-marker-point",t),h:q(".cp-hsvpanel-h",t),h_marker:q(".cp-hsvpanel-h .cp-hsvmarker-vertical",t),a:q(".cp-hsvpanel-a span",t),a_marker:q(".cp-hsvpanel-a .cp-hsvmarker-vertical",t)},sliders:{hue:q(".cp-hslhue span",t),hue_marker:q(".cp-hslhue .cp-marker",t),saturation:q(".cp-hslsaturation span",t),saturation_marker:q(".cp-hslsaturation .cp-marker",t),lightness:q(".cp-hsllightness span",t),lightness_marker:q(".cp-hsllightness .cp-marker",t),opacity:q(".cp-opacity span",t),opacity_marker:q(".cp-opacity .cp-marker",t),red:q(".cp-rgbred span",t),red_marker:q(".cp-rgbred .cp-marker",t),green:q(".cp-rgbgreen span",t),green_marker:q(".cp-rgbgreen .cp-marker",t),blue:q(".cp-rgbblue span",t),blue_marker:q(".cp-rgbblue .cp-marker",t),cielightness:q(".cp-cielightness span",t),cielightness_marker:q(".cp-cielightness .cp-marker",t),ciechroma:q(".cp-ciechroma span",t),ciechroma_marker:q(".cp-ciechroma .cp-marker",t),ciehue:q(".cp-ciehue span",t),ciehue_marker:q(".cp-ciehue .cp-marker",t),preview:q(".cp-preview input",t),slider_button:q(".cp-sliderbutton",t)},all_pills:q(".cp-pills",t),pills:{hsvpanel:q(".cp-pill-hsvpanel",t),sliders:q(".cp-pill-sliders",t),swatches:q(".cp-pill-swatches",t)}},l.customswatches||(a.swatches_add.hide(),a.swatches_remove.hide(),a.swatches_reset.hide()),X(),V(),M()}function C(e,r){var s=tinycolor(e);return!!s.isValid()&&(w.tiny=s,w.hsla=s.toHsl(),w.rgba=s.toRgb(),w.hsv=s.toHsv(),w.cielch=q.fn.ColorPickerSliders.rgb2lch(w.rgba),l.flat||h?(t.removeClass("cp-unconvertible-cie-color"),V(r)):(r||j(),B()),!0)}function P(e){if(!l.flat){if(h)return c.popover("hide"),c.popover("show"),void M();!function(e){if(i instanceof jQuery)return;void 0===e&&(e=!1);switch(i=q('
        ').appendTo("body"),(t=q('
        ').appendTo(i)).html(_()),l.size){case"sm":t.addClass("cp-container-sm");break;case"lg":t.addClass("cp-container-lg")}y(),e||F();if(c.popover({html:!0,animation:!1,trigger:"manual",title:l.title,placement:l.placement,container:i,content:function(){return t}}),c.popover("show"),l.slidersplusminus){var r,s;r=parseInt(q(".cp-container .cp-sliderbutton").css("width"),10),(s=q(".cp-popover-container .popover-content")).css("padding-left",parseInt(s.css("padding-left"),10)+r-6+"px"),s.css("padding-right",parseInt(s.css("padding-right"),10)+r-6+"px")}}(e),h=!0}}function x(){h=!1,i.remove(),i=null,c.popover("destroy")}function _(){var e=[],r="";if(l.sliders&&(!1!==l.order.opacity&&(e[l.order.opacity]="",l.slidersplusminus&&(e[l.order.opacity]+='
        -
        +
        '),e[l.order.opacity]+='
        '+l.labels.opacity+'
        '),!1!==l.order.hsl&&(e[l.order.hsl]="",l.slidersplusminus&&(e[l.order.hsl]+='
        -
        +
        '),e[l.order.hsl]+='
        '+l.labels.hslhue+'
        ',l.slidersplusminus&&(e[l.order.hsl]+='
        -
        +
        '),e[l.order.hsl]+='
        '+l.labels.hslsaturation+'
        ',l.slidersplusminus&&(e[l.order.hsl]+='
        -
        +
        '),e[l.order.hsl]+='
        '+l.labels.hsllightness+'
        '),!1!==l.order.lightness&&(e[l.order.lightness]="",l.slidersplusminus&&(e[l.order.lightness]+='
        -
        +
        '),e[l.order.lightness]+='
        '+l.labels.hsllightness+'
        '),!1!==l.order.rgb&&(e[l.order.rgb]="",l.slidersplusminus&&(e[l.order.rgb]+='
        -
        +
        '),e[l.order.rgb]+='
        '+l.labels.rgbred+'
        ',l.slidersplusminus&&(e[l.order.rgb]+='
        -
        +
        '),e[l.order.rgb]+='
        '+l.labels.rgbgreen+'
        ',l.slidersplusminus&&(e[l.order.rgb]+='
        -
        +
        '),e[l.order.rgb]+='
        '+l.labels.rgbblue+'
        '),!1!==l.order.cie&&(e[l.order.cie]="",l.slidersplusminus&&(e[l.order.cie]+='
        -
        +
        '),e[l.order.cie]+='
        '+l.labels.cielightness+'
        ',l.slidersplusminus&&(e[l.order.cie]+='
        -
        +
        '),e[l.order.cie]+='
        '+l.labels.ciechroma+'
        ',l.slidersplusminus&&(e[l.order.cie]+='
        -
        +
        '),e[l.order.cie]+='
        '+l.labels.ciehue+'
        '),!1!==l.order.preview&&(e[l.order.preview]='
        ')),l.grouping&&(1':r+='"),l.hsvpanel&&(r+='
        '),l.sliders){r+='
        ';for(var s=0;s"}return l.swatches&&(r+='
          '),r}function M(){t.on("contextmenu",function(e){return e.preventDefault(),!1}),q(document).on("colorpickersliders.changeswatches",function(){X()}),a.swatches.on("touchstart mousedown click","li span",function(e){C(q(this).css("background-color")),e.preventDefault()}),a.swatches_add.on("touchstart mousedown click",function(e){n.unshift(w.tiny.toRgbString()),A(),q(document).trigger("colorpickersliders.changeswatches"),e.preventDefault(),e.stopPropagation()}),a.swatches_remove.on("touchstart mousedown click",function(e){var r;-1!==(r=n.indexOf(w.tiny.toRgbString()))&&(n.splice(r,1),A(),q(document).trigger("colorpickersliders.changeswatches")),e.preventDefault(),e.stopPropagation()}),a.swatches_reset.on("touchstart touchend mousedown click",function(e){"click"!==e.type&&"touchend"!==e.type||confirm("Do you really want to reset the swatches? All customizations will be lost!")&&(L(),A(),q(document).trigger("colorpickersliders.changeswatches")),e.preventDefault(),e.stopImmediatePropagation()}),a.sliders.slider_button.on("click",function(e){var r;(e.preventDefault(),1f&&!m?z(v,e):O(v,e))}),q(document).on("touchend mouseup",function(e){1").css("background-color",s.toRgbString()),i=q('
          ');i.append(t),a.swatches.append(q("
        • ").append(i))}}}Y()}}function Y(){var s=!1;q("span",a.swatches).filter(function(){var e=q(this).css("background-color");if((e=tinycolor(e)).alpha=Math.round(100*e.alpha)/100,e.toRgbString()===w.tiny.toRgbString()){s=!0;var r=q(this).parent();r.is(a.actualswatch)||(a.actualswatch&&a.actualswatch.removeClass("actual"),(a.actualswatch=r).addClass("actual"))}}),s||a.actualswatch&&(a.actualswatch.removeClass("actual"),a.actualswatch=!1),a.actualswatch?(a.swatches_add.prop("disabled",!0),a.swatches_remove.prop("disabled",!1)):(a.swatches_add.prop("disabled",!1),a.swatches_remove.prop("disabled",!0))}function A(){localStorage.setItem("swatches-"+l.customswatches,JSON.stringify(n))}function T(e,r,s){switch(e){case"hsv":w.hsv[r]=s,w.tiny=tinycolor({h:w.hsv.h,s:w.hsv.s,v:w.hsv.v,a:w.hsv.a}),w.rgba=w.tiny.toRgb(),w.hsla=w.tiny.toHsl(),w.cielch=q.fn.ColorPickerSliders.rgb2lch(w.rgba);break;case"hsla":w.hsla[r]=s,w.tiny=tinycolor({h:w.hsla.h,s:w.hsla.s,l:w.hsla.l,a:w.hsla.a}),w.rgba=w.tiny.toRgb(),w.hsv=w.tiny.toHsv(),w.cielch=q.fn.ColorPickerSliders.rgb2lch(w.rgba),t.removeClass("cp-unconvertible-cie-color");break;case"rgba":w.rgba[r]=s,w.tiny=tinycolor({r:w.rgba.r,g:w.rgba.g,b:w.rgba.b,a:w.hsla.a}),w.hsla=w.tiny.toHsl(),w.hsv=w.tiny.toHsv(),w.cielch=q.fn.ColorPickerSliders.rgb2lch(w.rgba),t.removeClass("cp-unconvertible-cie-color");break;case"cielch":w.cielch[r]=s,w.rgba=q.fn.ColorPickerSliders.lch2rgb(w.cielch),w.tiny=tinycolor(w.rgba),w.hsla=w.tiny.toHsl(),w.hsv=w.tiny.toHsv(),l.erroneousciecolormarkers&&(w.rgba.isok?t.removeClass("cp-unconvertible-cie-color"):t.addClass("cp-unconvertible-cie-color"))}}function Z(e,r){var s=q.fn.ColorPickerSliders.calculateEventPositionPercentage(r,a.sliders[e]);return a.sliders[e+"_marker"].data("position",s),s}function N(e,r){var s=q.fn.ColorPickerSliders.calculateEventPositionPercentage(r,a.hsvpanel.sv,!0);return a.hsvpanel[e+"_marker"].data("position",s),s}function V(e){if(clearTimeout(s),Date.now=Date.now||function(){return+new Date},Date.now()-g
          ').insertAfter(c):(t=q('
          '),c.append(t)),t.append(_()),y(),F());!function(){c.on("colorpickersliders.updateColor",function(e,r){C(r)}),c.on("colorpickersliders.show",function(){P()}),c.on("colorpickersliders.hide",function(){x()}),l.flat||"focus"!==l.trigger||(void 0===c.attr("tabindex")&&c.attr("tabindex",-1),l.preventtouchkeyboardonshow&&(q(c).prop("readonly",!0).addClass("cp-preventtouchkeyboardonshow"),q(c).on("click",function(e){h&&(q(c).prop("readonly",!1),e.stopPropagation())})),o||q(c).on("click",function(e){P(),e.stopPropagation()}),q(c).on("focus",function(e){P(),e.stopPropagation()}),q(c).on("blur",function(e){x(),l.preventtouchkeyboardonshow&&q(c).prop("readonly",!0),e.stopPropagation()}));r&&r.on("keyup change",function(){var e=q(this);C(e.val(),!0)})}()}()})},q.fn.ColorPickerSliders.getEventCoordinates=function(e){return void 0!==e.pageX?{pageX:e.originalEvent.pageX,pageY:e.originalEvent.pageY}:void 0!==e.originalEvent.touches?{pageX:e.originalEvent.touches[0].pageX,pageY:e.originalEvent.touches[0].pageY}:void 0},q.fn.ColorPickerSliders.calculateEventPositionPercentage=function(e,r,s){void 0===s&&(s=!1);var t=q.fn.ColorPickerSliders.getEventCoordinates(e),i=r.width(),a=(t.pageX-r.offset().left)/i*100;if(a<0&&(a=0),100'}return{noprefix:r,oldwebkit:s,svg:t}},q.fn.ColorPickerSliders.renderNoprefix=function(e,r,s){var t;void 0===s&&(s=!1),t=s?"linear-gradient(to bottom":"linear-gradient(to right",t+=q.fn.ColorPickerSliders.getGradientStopsCSSString(r).noprefix+")",e.css("background-image",t)},q.fn.ColorPickerSliders.renderWebkit=function(e,r,s){var t;void 0===s&&(s=!1),t=s?"-webkit-linear-gradient(top":"-webkit-linear-gradient(left",t+=q.fn.ColorPickerSliders.getGradientStopsCSSString(r).noprefix+")",e.css("background-image",t)},q.fn.ColorPickerSliders.renderOldwebkit=function(e,r,s){var t;void 0===s&&(s=!1),t=s?"-webkit-gradient(linear, 0% 0%, 0 100%":"-webkit-gradient(linear, 0% 0%, 100% 0%",t+=q.fn.ColorPickerSliders.getGradientStopsCSSString(r).oldwebkit+")",e.css("background-image",t)},q.fn.ColorPickerSliders.renderMs=function(e,r,s){var t;void 0===s&&(s=!1),t=s?"-ms-linear-gradient(to bottom":"-ms-linear-gradient(to right",t+=q.fn.ColorPickerSliders.getGradientStopsCSSString(r).noprefix+")",e.css("background-image",t)},q.fn.ColorPickerSliders.renderSVG=function(e,r,s){void 0===s&&(s=!1);var t="";t=s?'':'',t+=q.fn.ColorPickerSliders.getGradientStopsCSSString(r).svg,t+='',t="url(data:image/svg+xml;base64,"+q.fn.ColorPickerSliders.base64encode(t)+")",e.css("background-image",t)},q.fn.ColorPickerSliders.base64encode=function(e){var r,s,t,i,a,n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",l=0,c=0,o="",d=[];if(!e)return e;for(;r=(a=e.charCodeAt(l++)<<16|e.charCodeAt(l++)<<8|e.charCodeAt(l++))>>18&63,s=a>>12&63,t=a>>6&63,i=63&a,d[c++]=n.charAt(r)+n.charAt(s)+n.charAt(t)+n.charAt(i),l
          ').appendTo('body'); - - container = $('
          ').appendTo(popover_container); - container.html(_getControllerHtml()); - - switch (settings.size) { - case 'sm': - container.addClass('cp-container-sm'); - break; - case 'lg': - container.addClass('cp-container-lg'); - break; - } - - _buildComponent(); - - if (!disableLastlyUsedGroupUpdate) { - activateLastlyUsedGroup(); - } - - triggerelement.popover({ - html: true, - animation: false, - trigger: 'manual', - title: settings.title, - placement: settings.placement, - container: popover_container, - content: function() { - return container; - } - }); - - triggerelement.popover('show'); - } - - function hidePopover() { - popover_container.remove(); - popover_container = null; - - triggerelement.popover('destroy'); - } - - function _getControllerHtml() { - var sliders = [], - color_picker_html = ''; - - if (settings.sliders) { - - if (settings.order.opacity !== false) { - 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 + '
          '; - } - - if (settings.order.rgb !== false) { - sliders[settings.order.rgb] = '
          ' + settings.labels.rgbred + '
          ' + settings.labels.rgbgreen + '
          ' + settings.labels.rgbblue + '
          '; - } - - if (settings.order.preview !== false) { - sliders[settings.order.preview] = '
          '; - } - } - - if (settings.grouping) { - if (!!settings.hsvpanel + !!(settings.sliders && sliders.length > 0) + !!settings.swatches > 1) { - color_picker_html += '
            '; - } - else { - color_picker_html += ''; - } - - if (settings.hsvpanel) { - color_picker_html += '
            ' + - '
            ' + - '
            ' + - '
            ' + - '
            '; - } - - if (settings.sliders) { - color_picker_html += '
            '; - - for (var i = 0; i < sliders.length; i++) { - if (typeof sliders[i] === 'undefined') { - continue; - } - - color_picker_html += sliders[i]; - } - - color_picker_html += '
            '; - - } - - if (settings.swatches) { - color_picker_html += '
              '; - } - - return color_picker_html; - } - - function _initElements() { - elements = { - actualswatch: false, - swatchescontainer: $('.cp-swatches', container), - swatches: $('.cp-swatches ul', container), - swatches_add: $('.cp-swatches button.add', container), - swatches_remove: $('.cp-swatches button.remove', container), - swatches_reset: $('.cp-swatches button.reset', container), - all_sliders: $('.cp-sliders, .cp-preview input', container), - hsvpanel: { - sv: $('.cp-hsvpanel-sv', container), - sv_marker: $('.cp-hsvpanel-sv .cp-marker-point', container), - h: $('.cp-hsvpanel-h', container), - h_marker: $('.cp-hsvpanel-h .cp-hsvmarker-vertical', container), - a: $('.cp-hsvpanel-a span', container), - a_marker: $('.cp-hsvpanel-a .cp-hsvmarker-vertical', container) - }, - sliders: { - hue: $('.cp-hslhue span', container), - hue_marker: $('.cp-hslhue .cp-marker', container), - saturation: $('.cp-hslsaturation span', container), - saturation_marker: $('.cp-hslsaturation .cp-marker', container), - lightness: $('.cp-hsllightness span', container), - lightness_marker: $('.cp-hsllightness .cp-marker', container), - opacity: $('.cp-opacity span', container), - opacity_marker: $('.cp-opacity .cp-marker', container), - red: $('.cp-rgbred span', container), - red_marker: $('.cp-rgbred .cp-marker', container), - green: $('.cp-rgbgreen span', container), - green_marker: $('.cp-rgbgreen .cp-marker', container), - blue: $('.cp-rgbblue span', container), - blue_marker: $('.cp-rgbblue .cp-marker', container), - preview: $('.cp-preview input', container) - }, - all_pills: $('.cp-pills', container), - pills: { - hsvpanel: $('.cp-pill-hsvpanel', container), - sliders: $('.cp-pill-sliders', container), - swatches: $('.cp-pill-swatches', container) - } - }; - - if (!settings.customswatches) { - elements.swatches_add.hide(); - elements.swatches_remove.hide(); - elements.swatches_reset.hide(); - } - } - - function showFlat() { - if (settings.flat) { - if (triggerelementisinput) { - container = $('
              ').insertAfter(triggerelement); - } - else { - container = $('
              '); - triggerelement.append(container); - } - - container.append(_getControllerHtml()); - - _buildComponent(); - - activateLastlyUsedGroup(); - } - } - - function _initConnectedElements() { - if (settings.connectedinput instanceof jQuery) { - settings.connectedinput.add(triggerelement); - } - else if (settings.connectedinput === false) { - settings.connectedinput = triggerelement; - } - else { - settings.connectedinput = $(settings.connectedinput).add(triggerelement); - } - } - - function _bindEvents() { - triggerelement.on('colorpickersliders.updateColor', function(e, newcolor) { - updateColor(newcolor); - }); - - triggerelement.on('colorpickersliders.show', function() { - show(); - }); - - triggerelement.on('colorpickersliders.hide', function() { - hide(); - }); - - if (!settings.flat && settings.trigger === 'focus') { - // we need tabindex defined to be focusable - if (typeof triggerelement.attr('tabindex') === 'undefined') { - triggerelement.attr('tabindex', -1); - } - - if (settings.preventtouchkeyboardonshow) { - $(triggerelement).prop('readonly', true).addClass('cp-preventtouchkeyboardonshow'); - - $(triggerelement).on('click', function(ev) { - if (visible) { - $(triggerelement).prop('readonly', false); - ev.stopPropagation(); - } - }); - } - - // buttons doesn't get focus in webkit browsers - // https://bugs.webkit.org/show_bug.cgi?id=22261 - // and only input and button are focusable on iPad - // so it is safer to register click on any other than inputs - if (!triggerelementisinput) { - $(triggerelement).on('click', function(ev) { - show(); - - ev.stopPropagation(); - }); - } - - $(triggerelement).on('focus', function(ev) { - show(); - - ev.stopPropagation(); - }); - - $(triggerelement).on('blur', function(ev) { - hide(); - - if (settings.preventtouchkeyboardonshow) { - $(triggerelement).prop('readonly', true); - } - - ev.stopPropagation(); - }); - } - - if (connectedinput) { - connectedinput.on('keyup change', function() { - var $input = $(this); - - updateColor($input.val(), true); - }); - } - - } - - function _bindControllerEvents() { - container.on('contextmenu', function(ev) { - ev.preventDefault(); - return false; - }); - - $(document).on('colorpickersliders.changeswatches', function() { - _renderSwatches(); - }); - - elements.swatches.on('touchstart mousedown click', 'li span', function(ev) { - var color = $(this).css('background-color'); - updateColor(color); - ev.preventDefault(); - }); - - elements.swatches_add.on('touchstart mousedown click', function(ev) { - _addCurrentColorToSwatches(); - ev.preventDefault(); - ev.stopPropagation(); - }); - - elements.swatches_remove.on('touchstart mousedown click', function(ev) { - _removeActualColorFromSwatches(); - ev.preventDefault(); - ev.stopPropagation(); - }); - - elements.swatches_reset.on('touchstart touchend mousedown click', function(ev) { - // prevent multiple fire on android... - if (ev.type === 'click' || ev.type === 'touchend') { - _resetSwatches(); - } - ev.preventDefault(); - ev.stopImmediatePropagation(); - }); - - elements.sliders.hue.parent().on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'hue'; - - var percent = _updateMarkerPosition(dragTarget, ev); - - _updateColorsProperty('hsla', 'h', 3.6 * percent); - - _updateAllElements(); - }); - - elements.sliders.saturation.parent().on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'saturation'; - - var percent = _updateMarkerPosition(dragTarget, ev); - - _updateColorsProperty('hsla', 's', percent / 100); - - _updateAllElements(); - }); - - elements.sliders.lightness.parent().on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'lightness'; - - var percent = _updateMarkerPosition(dragTarget, ev); - - _updateColorsProperty('hsla', 'l', percent / 100); - - _updateAllElements(); - }); - - elements.sliders.opacity.parent().on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'opacity'; - - var percent = _updateMarkerPosition(dragTarget, ev); - - _updateColorsProperty('hsla', 'a', percent / 100); - - _updateAllElements(); - }); - - elements.sliders.red.parent().on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'red'; - - var percent = _updateMarkerPosition(dragTarget, ev); - - _updateColorsProperty('rgba', 'r', 2.55 * percent); - - _updateAllElements(); - }); - - elements.sliders.green.parent().on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'green'; - - var percent = _updateMarkerPosition(dragTarget, ev); - - _updateColorsProperty('rgba', 'g', 2.55 * percent); - - _updateAllElements(); - }); - - elements.sliders.blue.parent().on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'blue'; - - var percent = _updateMarkerPosition(dragTarget, ev); - - _updateColorsProperty('rgba', 'b', 2.55 * percent); - - _updateAllElements(); - }); - - elements.hsvpanel.sv.on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'hsvsv'; - - var percent = _updateHsvpanelMarkerPosition('sv', ev); - - _updateColorsProperty('hsv', 's', percent.horizontal / 100); - _updateColorsProperty('hsv', 'v', (100 - percent.vertical) / 100); - - _updateAllElements(); - }); - - elements.hsvpanel.h.on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'hsvh'; - - var percent = _updateHsvpanelMarkerPosition('h', ev); - - _updateColorsProperty('hsv', 'h', 3.6 * percent.vertical); - - _updateAllElements(); - }); - - elements.hsvpanel.a.on('touchstart mousedown', function(ev) { - ev.preventDefault(); - - if (ev.which > 1) { - return; - } - - dragTarget = 'hsva'; - - var percent = _updateHsvpanelMarkerPosition('a', ev); - - _updateColorsProperty('hsv', 'a', (100 - percent.vertical) / 100); - - _updateAllElements(); - }); - - elements.sliders.preview.on('click', function() { - this.select(); - }); - - $(document).on('touchmove mousemove', function(ev) { - if (!dragTarget) { - return; - } - - if (new Date().getTime() - _lastMoveHandlerRun > _throttleDelay && !_inMoveHandler) { - moveHandler(dragTarget, ev); - } - else { - setMoveHandlerTimer(dragTarget, ev); - } - }); - - $(document).on('touchend mouseup', function(ev) { - if (ev.which > 1) { - return; - } - - if (dragTarget) { - dragTarget = false; - ev.preventDefault(); - } - }); - - elements.pills.hsvpanel.on('click', function(ev) { - ev.preventDefault(); - - activateGroupHsvpanel(); - }); - - elements.pills.sliders.on('click', function(ev) { - ev.preventDefault(); - - activateGroupSliders(); - }); - - elements.pills.swatches.on('click', function(ev) { - ev.preventDefault(); - - activateGroupSwatches(); - }); - - if (!settings.flat) { - popover_container.on('touchstart mousedown', '.popover', function(ev) { - ev.preventDefault(); - ev.stopPropagation(); - - return false; - }); - } - } - - function setConfig(name, value) { - try { - localStorage.setItem('cp-userdata-' + name, JSON.stringify(value)); - } - catch (err) { - } - } - - function getConfig(name) { - try { - var r = JSON.parse(localStorage.getItem('cp-userdata-' + name)); - - return r; - } - catch (err) { - return null; - } - } - - function getUsedGroupName() { - if (groupingname !== '') { - return groupingname; - } - - if (elements.pills.hsvpanel.length === 0) { - groupingname += '_hsvpanel_'; - } - if (elements.pills.sliders.length === 0) { - groupingname += '_sliders_'; - } - if (elements.pills.swatches.length === 0) { - groupingname += '_swatches_'; - } - - return groupingname; - } - - function getLastlyUsedGroup() { - return getConfig('config_activepill' + getUsedGroupName()); - } - - function setLastlyUsedGroup(value) { - return setConfig('config_activepill' + getUsedGroupName(), value); - } - - function activateLastlyUsedGroup() { - switch (getLastlyUsedGroup()) { - case 'hsvpanel': - activateGroupHsvpanel(); - break; - case 'sliders': - activateGroupSliders(); - break; - case 'swatches': - activateGroupSwatches(); - break; - default: - if (elements.pills.hsvpanel.length) { - activateGroupHsvpanel(); - break; - } - else if (elements.pills.sliders.length) { - activateGroupSliders(); - break; - } - else if (elements.pills.swatches.length) { - activateGroupSwatches(); - break; - } - } - } - - function activateGroupHsvpanel() { - if (elements.pills.hsvpanel.length === 0) { - return false; - } - - $('a', elements.all_pills).removeClass('active'); - elements.pills.hsvpanel.addClass('active'); - - container.removeClass('sliders-active swatches-active').addClass('hsvpanel-active'); - - setLastlyUsedGroup('hsvpanel'); - - _updateAllElements(true); - - show(true); - - return true; - } - - function activateGroupSliders() { - if (elements.pills.sliders.length === 0) { - return false; - } - - $('a', elements.all_pills).removeClass('active'); - elements.pills.sliders.addClass('active'); - - container.removeClass('hsvpanel-active swatches-active').addClass('sliders-active'); - - setLastlyUsedGroup('sliders'); - - _updateAllElements(true); - - show(true); - - return true; - } - - function activateGroupSwatches() { - if (elements.pills.swatches.length === 0) { - return false; - } - - $('a', elements.all_pills).removeClass('active'); - elements.pills.swatches.addClass('active'); - - container.removeClass('hsvpanel-active sliders-active').addClass('swatches-active'); - - setLastlyUsedGroup('swatches'); - - _updateAllElements(true); - - show(true); - - return true; - } - - function setMoveHandlerTimer(dragTarget, ev) { - clearTimeout(_moveThrottleTimer); - _moveThrottleTimer = setTimeout(function() { - moveHandler(dragTarget, ev); - }, _throttleDelay); - } - - function moveHandler(dragTarget, ev) { - var percent; - - if (_inMoveHandler) { - setMoveHandlerTimer(dragTarget, ev); - return; - } - - _inMoveHandler = true; - _lastMoveHandlerRun = new Date().getTime(); - - if (dragTarget === 'hsvsv') { - percent = _updateHsvpanelMarkerPosition('sv', ev); - } - else if (dragTarget === 'hsvh') { - percent = _updateHsvpanelMarkerPosition('h', ev); - } - else if (dragTarget === 'hsva') { - percent = _updateHsvpanelMarkerPosition('a', ev); - } - else { - percent = _updateMarkerPosition(dragTarget, ev); - } - - switch (dragTarget) { - case 'hsvsv': - _updateColorsProperty('hsv', 's', percent.horizontal / 100); - _updateColorsProperty('hsv', 'v', (100 - percent.vertical) / 100); - break; - case 'hsvh': - _updateColorsProperty('hsv', 'h', 3.6 * percent.vertical); - break; - case 'hsva': - _updateColorsProperty('hsv', 'a', (100 - percent.vertical) / 100); - break; - case 'hue': - _updateColorsProperty('hsla', 'h', 3.6 * percent); - break; - case 'saturation': - _updateColorsProperty('hsla', 's', percent / 100); - break; - case 'lightness': - _updateColorsProperty('hsla', 'l', percent / 100); - break; - case 'opacity': - _updateColorsProperty('hsla', 'a', percent / 100); - break; - case 'red': - _updateColorsProperty('rgba', 'r', 2.55 * percent); - break; - case 'green': - _updateColorsProperty('rgba', 'g', 2.55 * percent); - break; - case 'blue': - _updateColorsProperty('rgba', 'b', 2.55 * percent); - break; - } - - _updateAllElements(); - - ev.preventDefault(); - _inMoveHandler = false; - } - - function _parseCustomSwatches() { - swatches = []; - - for (var i = 0; i < settings.swatches.length; i++) { - var color = tinycolor(settings.swatches[i]); - - if (color.isValid()) { - swatches.push(color.toRgbString()); - } - } - } - - function _renderSwatches() { - if (!settings.swatches) { - return; - } - - if (settings.customswatches) { - var customswatches = false; - - try { - customswatches = JSON.parse(localStorage.getItem('swatches-' + settings.customswatches)); - } - catch (err) { - } - - if (customswatches) { - swatches = customswatches; - } - else { - _parseCustomSwatches(); - } - } - else { - _parseCustomSwatches(); - } - - if (swatches instanceof Array) { - elements.swatches.html(''); - for (var i = 0; i < swatches.length; i++) { - var color = tinycolor(swatches[i]); - - if (color.isValid()) { - var span = $('').css('background-color', color.toRgbString()); - var button = $('
              '); - - button.append(span); - - elements.swatches.append($('
            • ').append(button)); - } - } - } - - _findActualColorsSwatch(); - } - - function _findActualColorsSwatch() { - var found = false; - - $('span', elements.swatches).filter(function() { - var swatchcolor = $(this).css('background-color'); - - swatchcolor = tinycolor(swatchcolor); - swatchcolor.alpha = Math.round(swatchcolor.alpha * 100) / 100; - - if (swatchcolor.toRgbString() === color.tiny.toRgbString()) { - found = true; - - var currentswatch = $(this).parent(); - - if (!currentswatch.is(elements.actualswatch)) { - if (elements.actualswatch) { - elements.actualswatch.removeClass('actual'); - } - elements.actualswatch = currentswatch; - currentswatch.addClass('actual'); - } - } - }); - - if (!found) { - if (elements.actualswatch) { - elements.actualswatch.removeClass('actual'); - elements.actualswatch = false; - } - } - - if (elements.actualswatch) { - elements.swatches_add.prop('disabled', true); - elements.swatches_remove.prop('disabled', false); - } - else { - elements.swatches_add.prop('disabled', false); - elements.swatches_remove.prop('disabled', true); - } - } - - function _storeSwatches() { - localStorage.setItem('swatches-' + settings.customswatches, JSON.stringify(swatches)); - } - - function _addCurrentColorToSwatches() { - swatches.unshift(color.tiny.toRgbString()); - _storeSwatches(); - - $(document).trigger('colorpickersliders.changeswatches'); - } - - function _removeActualColorFromSwatches() { - var index = swatches.indexOf(color.tiny.toRgbString()); - - if (index !== -1) { - swatches.splice(index, 1); - - _storeSwatches(); - $(document).trigger('colorpickersliders.changeswatches'); - } - } - - function _resetSwatches() { - if (confirm('Do you really want to reset the swatches? All customizations will be lost!')) { - _parseCustomSwatches(); - - _storeSwatches(); - - $(document).trigger('colorpickersliders.changeswatches'); - } - } - - function _updateColorsProperty(format, property, value) { - switch (format) { - case 'hsv': - - color.hsv[property] = value; - color.tiny = tinycolor({h: color.hsv.h, s: color.hsv.s, v: color.hsv.v, a: color.hsv.a}); - color.rgba = color.tiny.toRgb(); - color.hsla = color.tiny.toHsl(); - - break; - - case 'hsla': - - color.hsla[property] = value; - color.tiny = tinycolor({h: color.hsla.h, s: color.hsla.s, l: color.hsla.l, a: color.hsla.a}); - color.rgba = color.tiny.toRgb(); - color.hsv = color.tiny.toHsv(); - - break; - - case 'rgba': - - color.rgba[property] = value; - color.tiny = tinycolor({r: color.rgba.r, g: color.rgba.g, b: color.rgba.b, a: color.hsla.a}); - color.hsla = color.tiny.toHsl(); - color.hsv = color.tiny.toHsv(); - - break; - } - } - - function _updateMarkerPosition(slidername, ev) { - var percent = $.fn.ColorPickerSliders.calculateEventPositionPercentage(ev, elements.sliders[slidername]); - - elements.sliders[slidername + '_marker'].data('position', percent); - - return percent; - } - - function _updateHsvpanelMarkerPosition(marker, ev) { - var percents = $.fn.ColorPickerSliders.calculateEventPositionPercentage(ev, elements.hsvpanel.sv, true); - - elements.hsvpanel[marker + '_marker'].data('position', percents); - - return percents; - } - - var updateAllElementsTimeout; - - function _updateAllElementsTimer(disableinputupdate) { - updateAllElementsTimeout = setTimeout(function() { - _updateAllElements(disableinputupdate); - }, settings.updateinterval); - } - - function _updateAllElements(disableinputupdate) { - clearTimeout(updateAllElementsTimeout); - - Date.now = Date.now || function() { - return +new Date(); - }; - - if (Date.now() - lastUpdateTime < settings.updateinterval) { - _updateAllElementsTimer(disableinputupdate); - return; - } - - if (typeof disableinputupdate === 'undefined') { - disableinputupdate = false; - } - - lastUpdateTime = Date.now(); - - if (settings.hsvpanel !== false && (!settings.grouping || getLastlyUsedGroup() === 'hsvpanel')) { - _renderHsvsv(); - _renderHsvh(); - _renderHsva(); - } - - if (settings.sliders && (!settings.grouping || getLastlyUsedGroup() === 'sliders')) { - if (settings.order.opacity !== false) { - _renderOpacity(); - } - - if (settings.order.hsl !== false) { - _renderHue(); - _renderSaturation(); - _renderLightness(); - } - - if (settings.order.rgb !== false) { - _renderRed(); - _renderGreen(); - _renderBlue(); - } - - if (settings.order.preview !== false) { - _renderPreview(); - } - } - - if (!disableinputupdate) { - _updateConnectedInput(); - } - - if ((100 - color.hsla.l * 100) * color.hsla.a < settings.previewcontrasttreshold) { - elements.all_sliders.css('color', '#000'); - if (triggerelementisinput && settings.previewontriggerelement) { - triggerelement.css('background', color.tiny.toRgbString()).css('color', '#000'); - } - } - else { - elements.all_sliders.css('color', '#fff'); - if (triggerelementisinput && settings.previewontriggerelement) { - triggerelement.css('background', color.tiny.toRgbString()).css('color', '#fff'); - } - } - - if (settings.swatches && (!settings.grouping || getLastlyUsedGroup() === 'swatches')) { - _findActualColorsSwatch(); - } - - settings.onchange(container, color); - - triggerelement.data('color', color); - } - - function _updateTriggerelementColor() { - if (triggerelementisinput && settings.previewontriggerelement) { - if ((100 - color.hsla.l * 100) * color.hsla.a < settings.previewcontrasttreshold) { - triggerelement.css('background', color.tiny.toRgbString()).css('color', '#000'); - } - else { - triggerelement.css('background', color.tiny.toRgbString()).css('color', '#fff'); - } - } - } - - function _updateConnectedInput() { - if (connectedinput) { - connectedinput.each(function(index, element) { - var $element = $(element), - format = $element.data('color-format') || settings.previewformat; - - switch (format) { - case 'hex': - if (color.hsla.a < 1) { - $element.val(color.tiny.toRgbString()); - } - else { - $element.val(color.tiny.toHexString()); - } - break; - case 'hsl': - $element.val(color.tiny.toHslString()); - break; - case 'rgb': - /* falls through */ - default: - $element.val(color.tiny.toRgbString()); - break; - } - }); - } - } - - function _renderHsvsv() { - elements.hsvpanel.sv.css('background', tinycolor('hsv(' + color.hsv.h + ',100%,100%)').toRgbString()); - - elements.hsvpanel.sv_marker.css('left', color.hsv.s * 100 + '%').css('top', 100 - color.hsv.v * 100 + '%'); - } - - function _renderHsvh() { - elements.hsvpanel.h_marker.css('top', color.hsv.h / 360 * 100 + '%'); - } - - function _renderHsva() { - setGradient(elements.hsvpanel.a, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 'a', 1, 0, 2), true); - - elements.hsvpanel.a_marker.css('top', 100 - color.hsv.a * 100 + '%'); - } - - function _renderHue() { - setGradient(elements.sliders.hue, $.fn.ColorPickerSliders.getScaledGradientStops(color.hsla, 'h', 0, 360, 7)); - - 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)); - - 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)); - - 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)); - - 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)); - - 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)); - - 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)); - - elements.sliders.blue_marker.css('left', color.rgba.b / 255 * 100 + '%'); - } - - function _renderPreview() { - elements.sliders.preview.css('background', $.fn.ColorPickerSliders.csscolor(color.rgba)); - - var colorstring; - - switch (settings.previewformat) { - case 'hex': - if (color.hsla.a < 1) { - colorstring = color.tiny.toRgbString(); - } - else { - colorstring = color.tiny.toHexString(); - } - break; - case 'hsl': - colorstring = color.tiny.toHslString(); - break; - case 'rgb': - /* falls through */ - default: - colorstring = color.tiny.toRgbString(); - break; - } - - elements.sliders.preview.val(colorstring); - } - - function setGradient(element, gradientstops, vertical) { - if (typeof vertical === 'undefined') { - vertical = false; - } - - gradientstops.sort(function(a, b) { - return a.position - b.position; - }); - - switch (rendermode) { - case 'noprefix': - $.fn.ColorPickerSliders.renderNoprefix(element, gradientstops, vertical); - break; - case 'webkit': - $.fn.ColorPickerSliders.renderWebkit(element, gradientstops, vertical); - break; - case 'ms': - $.fn.ColorPickerSliders.renderMs(element, gradientstops, vertical); - break; - case 'svg': // can not repeat, radial can be only a covering ellipse (maybe there is a workaround, need more investigation) - $.fn.ColorPickerSliders.renderSVG(element, gradientstops, vertical); - break; - case 'oldwebkit': // can not repeat, no percent size with radial gradient (and no ellipse) - $.fn.ColorPickerSliders.renderOldwebkit(element, gradientstops, vertical); - break; - } - } - - }); - - }; - - $.fn.ColorPickerSliders.getEventCoordinates = function(ev) { - if (typeof ev.pageX !== 'undefined') { - return { - pageX: ev.originalEvent.pageX, - pageY: ev.originalEvent.pageY - }; - } - else if (typeof ev.originalEvent.touches !== 'undefined') { - return { - pageX: ev.originalEvent.touches[0].pageX, - pageY: ev.originalEvent.touches[0].pageY - }; - } - }; - - $.fn.ColorPickerSliders.calculateEventPositionPercentage = function(ev, containerElement, both) { - if (typeof (both) === 'undefined') { - both = false; - } - - var c = $.fn.ColorPickerSliders.getEventCoordinates(ev); - - var xsize = containerElement.width(), - offsetX = c.pageX - containerElement.offset().left; - - var horizontal = offsetX / xsize * 100; - - if (horizontal < 0) { - horizontal = 0; - } - - if (horizontal > 100) { - horizontal = 100; - } - - if (both) { - var ysize = containerElement.height(), - offsetY = c.pageY - containerElement.offset().top; - - var vertical = offsetY / ysize * 100; - - if (vertical < 0) { - vertical = 0; - } - - if (vertical > 100) { - vertical = 100; - } - - return { - horizontal: horizontal, - vertical: vertical - }; - } - - return horizontal; - }; - - $.fn.ColorPickerSliders.getScaledGradientStops = function(color, scalableproperty, minvalue, maxvalue, steps, invalidcolorsopacity, minposition, maxposition) { - if (typeof invalidcolorsopacity === 'undefined') { - invalidcolorsopacity = 1; - } - - if (typeof minposition === 'undefined') { - minposition = 0; - } - - if (typeof maxposition === 'undefined') { - maxposition = 100; - } - - var gradientStops = [], - diff = maxvalue - minvalue, - isok = true; - - for (var i = 0; i < steps; ++i) { - var currentstage = i / (steps - 1), - modifiedcolor = $.fn.ColorPickerSliders.modifyColor(color, scalableproperty, currentstage * diff + minvalue), - csscolor; - - if (invalidcolorsopacity < 1) { - var stagergb = $.fn.ColorPickerSliders.lch2rgb(modifiedcolor, invalidcolorsopacity); - - isok = stagergb.isok; - csscolor = $.fn.ColorPickerSliders.csscolor(stagergb, invalidcolorsopacity); - } - else { - csscolor = $.fn.ColorPickerSliders.csscolor(modifiedcolor, invalidcolorsopacity); - } - - gradientStops[i] = { - color: csscolor, - position: currentstage * (maxposition - minposition) + minposition, - isok: isok, - rawcolor: modifiedcolor - }; - } - - return gradientStops; - }; - - $.fn.ColorPickerSliders.getGradientStopsCSSString = function(gradientstops) { - var gradientstring = '', - oldwebkit = '', - svgstoppoints = ''; - - for (var i = 0; i < gradientstops.length; i++) { - var el = gradientstops[i]; - - gradientstring += ',' + el.color + ' ' + el.position + '%'; - oldwebkit += ',color-stop(' + el.position + '%,' + el.color + ')'; - - var svgcolor = tinycolor(el.color); - - svgstoppoints += ''; - } - - return { - noprefix: gradientstring, - oldwebkit: oldwebkit, - svg: svgstoppoints - }; - }; - - $.fn.ColorPickerSliders.renderNoprefix = function(element, gradientstops, vertical) { - if (typeof vertical === 'undefined') { - vertical = false; - } - - var css, - stoppoints = $.fn.ColorPickerSliders.getGradientStopsCSSString(gradientstops).noprefix; - - if (!vertical) { - css = 'linear-gradient(to right'; - } - else { - css = 'linear-gradient(to bottom'; - } - - css += stoppoints + ')'; - - element.css('background-image', css); - }; - - $.fn.ColorPickerSliders.renderWebkit = function(element, gradientstops, vertical) { - if (typeof vertical === 'undefined') { - vertical = false; - } - - var css, - stoppoints = $.fn.ColorPickerSliders.getGradientStopsCSSString(gradientstops).noprefix; - - if (!vertical) { - css = '-webkit-linear-gradient(left'; - } - else { - css = '-webkit-linear-gradient(top'; - } - - css += stoppoints + ')'; - - element.css('background-image', css); - }; - - $.fn.ColorPickerSliders.renderOldwebkit = function(element, gradientstops, vertical) { - if (typeof vertical === 'undefined') { - vertical = false; - } - - var css, - stoppoints = $.fn.ColorPickerSliders.getGradientStopsCSSString(gradientstops).oldwebkit; - - if (!vertical) { - css = '-webkit-gradient(linear, 0% 0%, 100% 0%'; - } - else { - css = '-webkit-gradient(linear, 0% 0%, 0 100%'; - } - css += stoppoints + ')'; - - element.css('background-image', css); - }; - - $.fn.ColorPickerSliders.renderMs = function(element, gradientstops, vertical) { - if (typeof vertical === 'undefined') { - vertical = false; - } - - var css, - stoppoints = $.fn.ColorPickerSliders.getGradientStopsCSSString(gradientstops).noprefix; - - if (!vertical) { - css = '-ms-linear-gradient(to right'; - } - else { - css = '-ms-linear-gradient(to bottom'; - } - - css += stoppoints + ')'; - - element.css('background-image', css); - }; - - $.fn.ColorPickerSliders.renderSVG = function(element, gradientstops, vertical) { - if (typeof vertical === 'undefined') { - vertical = false; - } - - var svg = '', - svgstoppoints = $.fn.ColorPickerSliders.getGradientStopsCSSString(gradientstops).svg; - - if (!vertical) { - svg = ''; - } - else { - svg = ''; - } - - svg += svgstoppoints; - svg += ''; - svg = 'url(data:image/svg+xml;base64,' + $.fn.ColorPickerSliders.base64encode(svg) + ')'; - - element.css('background-image', svg); - }; - - /* 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, - ac = 0, - enc = '', - tmp_arr = []; - - if (!data) { - return data; - } - - do { - o1 = data.charCodeAt(i++); - o2 = data.charCodeAt(i++); - o3 = data.charCodeAt(i++); - - bits = o1 << 16 | o2 << 8 | o3; - - h1 = bits >> 18 & 0x3f; - h2 = bits >> 12 & 0x3f; - h3 = bits >> 6 & 0x3f; - h4 = bits & 0x3f; - - tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4); - } while (i < data.length); - - enc = tmp_arr.join(''); - - var r = data.length % 3; - - return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3); - }; - - $.fn.ColorPickerSliders.modifyColor = function(color, property, value) { - var modifiedcolor = $.extend({}, color); - - if (!color.hasOwnProperty(property)) { - throw('Missing color property: ' + property); - } - - modifiedcolor[property] = value; - - return modifiedcolor; - }; - - $.fn.ColorPickerSliders.csscolor = function(color) { - var $return = false, - tmpcolor = $.extend({}, color); - - if (tmpcolor.hasOwnProperty('h')) { - // HSL - $return = 'hsla(' + tmpcolor.h + ',' + tmpcolor.s * 100 + '%,' + tmpcolor.l * 100 + '%,' + tmpcolor.a + ')'; - } - - if (tmpcolor.hasOwnProperty('r')) { - // RGB - if (tmpcolor.a < 1) { - $return = 'rgba(' + Math.round(tmpcolor.r) + ',' + Math.round(tmpcolor.g) + ',' + Math.round(tmpcolor.b) + ',' + tmpcolor.a + ')'; - } - else { - $return = 'rgb(' + Math.round(tmpcolor.r) + ',' + Math.round(tmpcolor.g) + ',' + Math.round(tmpcolor.b) + ')'; - } - } - - return $return; - }; - - $.fn.ColorPickerSliders.detectWhichGradientIsSupported = function() { - var testelement = document.createElement('detectGradientSupport').style; - - try { - testelement.backgroundImage = 'linear-gradient(to top left, #9f9, white)'; - if (testelement.backgroundImage.indexOf('gradient') !== -1) { - return 'noprefix'; - } - - testelement.backgroundImage = '-webkit-linear-gradient(left top, #9f9, white)'; - if (testelement.backgroundImage.indexOf('gradient') !== -1) { - return 'webkit'; - } - - testelement.backgroundImage = '-ms-linear-gradient(left top, #9f9, white)'; - if (testelement.backgroundImage.indexOf('gradient') !== -1) { - return 'ms'; - } - - testelement.backgroundImage = '-webkit-gradient(linear, left top, right bottom, from(#9f9), to(white))'; - if (testelement.backgroundImage.indexOf('gradient') !== -1) { - return 'oldwebkit'; - } - } - catch (err) { - try { - testelement.filter = 'progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=0)'; - if (testelement.filter.indexOf('DXImageTransform') !== -1) { - return 'filter'; - } - } - catch (err) { - } - } - - return false; - }; - - $.fn.ColorPickerSliders.svgSupported = function() { - return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect; - }; - -})(jQuery); diff --git a/dist/bootstrap.colorpickersliders.nocielch.min.js b/dist/bootstrap.colorpickersliders.nocielch.min.js deleted file mode 100644 index 38be369..0000000 --- a/dist/bootstrap.colorpickersliders.nocielch.min.js +++ /dev/null @@ -1,15 +0,0 @@ -/* - * 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 */ -!function(a){"use strict";a.fn.ColorPickerSliders=function(b){return this.each(function(){function c(){"undefined"==typeof b&&(b={}),bb=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:30,previewformat:"rgb",titleswatchesadd:"Add color to swatches",titleswatchesremove:"Remove color from swatches",titleswatchesreset:"Reset to default swatches",order:{},labels:{},onchange:function(){}},b),bb.order=b.hasOwnProperty("order")?a.extend({opacity:!1,hsl:!1,rgb:!1,preview:!1},b.order):{opacity:0,hsl:1,rgb:2,preview:3},b.hasOwnProperty("labels")||(b.labels={}),bb.labels=a.extend({hslhue:"HSL-Hue",hslsaturation:"HSL-Saturation",hsllightness:"HSL-Lightness",rgbred:"RGB-Red",rgbgreen:"RGB-Green",rgbblue:"RGB-Blue",opacity:"Opacity",preview:"Preview"},b.labels)}function d(){gb||(gb=!0,lb=a.fn.ColorPickerSliders.detectWhichGradientIsSupported(),"filter"===lb&&(lb=!1),!lb&&a.fn.ColorPickerSliders.svgSupported()&&(lb="svg"),c(),bb.order.hasOwnProperty("preview")&&bb.order.preview!==!1||lb||(bb.order.preview=10),p(),f(),g(),P(),Q(),bb.flat&&o(),q())}function e(){n(),E(),O(),r()}function f(){ib?(tb.tiny=tinycolor(hb.val()),tb.tiny.isValid()||(tb.tiny=tinycolor(bb.color))):tb.tiny=tinycolor(bb.color),tb.hsla=tb.tiny.toHsl(),tb.rgba=tb.tiny.toRgb(),tb.hsv=tb.tiny.toHsv()}function g(){bb.connectedinput&&(jb=bb.connectedinput instanceof jQuery?bb.connectedinput:a(bb.connectedinput))}function h(a,b){var c=tinycolor(a);return c.isValid()?(tb.tiny=c,tb.hsla=c.toHsl(),tb.rgba=c.toRgb(),tb.hsv=c.toHsv(),bb.flat||mb?O(b):(b||Q(),P()),!0):!1}function i(a){if(!bb.flat){if(mb)return hb.popover("hide"),hb.popover("show"),void r();k(a),mb=!0}}function j(){mb=!1,l()}function k(b){if(!(db instanceof jQuery)){switch("undefined"==typeof b&&(b=!1),db=a('
              ').appendTo("body"),cb=a('
              ').appendTo(db),cb.html(m()),bb.size){case"sm":cb.addClass("cp-container-sm");break;case"lg":cb.addClass("cp-container-lg")}e(),b||x(),hb.popover({html:!0,animation:!1,trigger:"manual",title:bb.title,placement:bb.placement,container:db,content:function(){return cb}}),hb.popover("show")}}function l(){db.remove(),db=null,hb.popover("destroy")}function m(){var a=[],b="";if(bb.sliders&&(bb.order.opacity!==!1&&(a[bb.order.opacity]='
              '+bb.labels.opacity+'
              '),bb.order.hsl!==!1&&(a[bb.order.hsl]='
              '+bb.labels.hslhue+'
              '+bb.labels.hslsaturation+'
              '+bb.labels.hsllightness+'
              '),bb.order.rgb!==!1&&(a[bb.order.rgb]='
              '+bb.labels.rgbred+'
              '+bb.labels.rgbgreen+'
              '+bb.labels.rgbblue+'
              '),bb.order.preview!==!1&&(a[bb.order.preview]='
              ')),bb.grouping&&(b+=!!bb.hsvpanel+!!(bb.sliders&&a.length>0)+!!bb.swatches>1?'
                ':'"),bb.hsvpanel&&(b+='
                '),bb.sliders){b+='
                ';for(var c=0;c"}return bb.swatches&&(b+='
                  '),b}function n(){eb={actualswatch:!1,swatchescontainer:a(".cp-swatches",cb),swatches:a(".cp-swatches ul",cb),swatches_add:a(".cp-swatches button.add",cb),swatches_remove:a(".cp-swatches button.remove",cb),swatches_reset:a(".cp-swatches button.reset",cb),all_sliders:a(".cp-sliders, .cp-preview input",cb),hsvpanel:{sv:a(".cp-hsvpanel-sv",cb),sv_marker:a(".cp-hsvpanel-sv .cp-marker-point",cb),h:a(".cp-hsvpanel-h",cb),h_marker:a(".cp-hsvpanel-h .cp-hsvmarker-vertical",cb),a:a(".cp-hsvpanel-a span",cb),a_marker:a(".cp-hsvpanel-a .cp-hsvmarker-vertical",cb)},sliders:{hue:a(".cp-hslhue span",cb),hue_marker:a(".cp-hslhue .cp-marker",cb),saturation:a(".cp-hslsaturation span",cb),saturation_marker:a(".cp-hslsaturation .cp-marker",cb),lightness:a(".cp-hsllightness span",cb),lightness_marker:a(".cp-hsllightness .cp-marker",cb),opacity:a(".cp-opacity span",cb),opacity_marker:a(".cp-opacity .cp-marker",cb),red:a(".cp-rgbred span",cb),red_marker:a(".cp-rgbred .cp-marker",cb),green:a(".cp-rgbgreen span",cb),green_marker:a(".cp-rgbgreen .cp-marker",cb),blue:a(".cp-rgbblue span",cb),blue_marker:a(".cp-rgbblue .cp-marker",cb),preview:a(".cp-preview input",cb)},all_pills:a(".cp-pills",cb),pills:{hsvpanel:a(".cp-pill-hsvpanel",cb),sliders:a(".cp-pill-sliders",cb),swatches:a(".cp-pill-swatches",cb)}},bb.customswatches||(eb.swatches_add.hide(),eb.swatches_remove.hide(),eb.swatches_reset.hide())}function o(){bb.flat&&(ib?cb=a('
                  ').insertAfter(hb):(cb=a('
                  '),hb.append(cb)),cb.append(m()),e(),x())}function p(){bb.connectedinput instanceof jQuery?bb.connectedinput.add(hb):bb.connectedinput=bb.connectedinput===!1?hb:a(bb.connectedinput).add(hb)}function q(){hb.on("colorpickersliders.updateColor",function(a,b){h(b)}),hb.on("colorpickersliders.show",function(){i()}),hb.on("colorpickersliders.hide",function(){j()}),bb.flat||"focus"!==bb.trigger||("undefined"==typeof hb.attr("tabindex")&&hb.attr("tabindex",-1),bb.preventtouchkeyboardonshow&&(a(hb).prop("readonly",!0).addClass("cp-preventtouchkeyboardonshow"),a(hb).on("click",function(b){mb&&(a(hb).prop("readonly",!1),b.stopPropagation())})),ib||a(hb).on("click",function(a){i(),a.stopPropagation()}),a(hb).on("focus",function(a){i(),a.stopPropagation()}),a(hb).on("blur",function(b){j(),bb.preventtouchkeyboardonshow&&a(hb).prop("readonly",!0),b.stopPropagation()})),jb&&jb.on("keyup change",function(){var b=a(this);h(b.val(),!0)})}function r(){cb.on("contextmenu",function(a){return a.preventDefault(),!1}),a(document).on("colorpickersliders.changeswatches",function(){E()}),eb.swatches.on("touchstart mousedown click","li span",function(b){var c=a(this).css("background-color");h(c),b.preventDefault()}),eb.swatches_add.on("touchstart mousedown click",function(a){H(),a.preventDefault(),a.stopPropagation()}),eb.swatches_remove.on("touchstart mousedown click",function(a){I(),a.preventDefault(),a.stopPropagation()}),eb.swatches_reset.on("touchstart touchend mousedown click",function(a){("click"===a.type||"touchend"===a.type)&&J(),a.preventDefault(),a.stopImmediatePropagation()}),eb.sliders.hue.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="hue";var b=L(nb,a);K("hsla","h",3.6*b),O()}}),eb.sliders.saturation.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="saturation";var b=L(nb,a);K("hsla","s",b/100),O()}}),eb.sliders.lightness.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="lightness";var b=L(nb,a);K("hsla","l",b/100),O()}}),eb.sliders.opacity.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="opacity";var b=L(nb,a);K("hsla","a",b/100),O()}}),eb.sliders.red.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="red";var b=L(nb,a);K("rgba","r",2.55*b),O()}}),eb.sliders.green.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="green";var b=L(nb,a);K("rgba","g",2.55*b),O()}}),eb.sliders.blue.parent().on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="blue";var b=L(nb,a);K("rgba","b",2.55*b),O()}}),eb.hsvpanel.sv.on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="hsvsv";var b=M("sv",a);K("hsv","s",b.horizontal/100),K("hsv","v",(100-b.vertical)/100),O()}}),eb.hsvpanel.h.on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="hsvh";var b=M("h",a);K("hsv","h",3.6*b.vertical),O()}}),eb.hsvpanel.a.on("touchstart mousedown",function(a){if(a.preventDefault(),!(a.which>1)){nb="hsva";var b=M("a",a);K("hsv","a",(100-b.vertical)/100),O()}}),eb.sliders.preview.on("click",function(){this.select()}),a(document).on("touchmove mousemove",function(a){nb&&((new Date).getTime()-sb>qb&&!rb?C(nb,a):B(nb,a))}),a(document).on("touchend mouseup",function(a){a.which>1||nb&&(nb=!1,a.preventDefault())}),eb.pills.hsvpanel.on("click",function(a){a.preventDefault(),y()}),eb.pills.sliders.on("click",function(a){a.preventDefault(),z()}),eb.pills.swatches.on("click",function(a){a.preventDefault(),A()}),bb.flat||db.on("touchstart mousedown",".popover",function(a){return a.preventDefault(),a.stopPropagation(),!1})}function s(a,b){try{localStorage.setItem("cp-userdata-"+a,JSON.stringify(b))}catch(c){}}function t(a){try{var b=JSON.parse(localStorage.getItem("cp-userdata-"+a));return b}catch(c){return null}}function u(){return""!==kb?kb:(0===eb.pills.hsvpanel.length&&(kb+="_hsvpanel_"),0===eb.pills.sliders.length&&(kb+="_sliders_"),0===eb.pills.swatches.length&&(kb+="_swatches_"),kb)}function v(){return t("config_activepill"+u())}function w(a){return s("config_activepill"+u(),a)}function x(){switch(v()){case"hsvpanel":y();break;case"sliders":z();break;case"swatches":A();break;default:if(eb.pills.hsvpanel.length){y();break}if(eb.pills.sliders.length){z();break}if(eb.pills.swatches.length){A();break}}}function y(){return 0===eb.pills.hsvpanel.length?!1:(a("a",eb.all_pills).removeClass("active"),eb.pills.hsvpanel.addClass("active"),cb.removeClass("sliders-active swatches-active").addClass("hsvpanel-active"),w("hsvpanel"),O(!0),i(!0),!0)}function z(){return 0===eb.pills.sliders.length?!1:(a("a",eb.all_pills).removeClass("active"),eb.pills.sliders.addClass("active"),cb.removeClass("hsvpanel-active swatches-active").addClass("sliders-active"),w("sliders"),O(!0),i(!0),!0)}function A(){return 0===eb.pills.swatches.length?!1:(a("a",eb.all_pills).removeClass("active"),eb.pills.swatches.addClass("active"),cb.removeClass("hsvpanel-active sliders-active").addClass("swatches-active"),w("swatches"),O(!0),i(!0),!0)}function B(a,b){clearTimeout(pb),pb=setTimeout(function(){C(a,b)},qb)}function C(a,b){var c;if(rb)return void B(a,b);switch(rb=!0,sb=(new Date).getTime(),c="hsvsv"===a?M("sv",b):"hsvh"===a?M("h",b):"hsva"===a?M("a",b):L(a,b),a){case"hsvsv":K("hsv","s",c.horizontal/100),K("hsv","v",(100-c.vertical)/100);break;case"hsvh":K("hsv","h",3.6*c.vertical);break;case"hsva":K("hsv","a",(100-c.vertical)/100);break;case"hue":K("hsla","h",3.6*c);break;case"saturation":K("hsla","s",c/100);break;case"lightness":K("hsla","l",c/100);break;case"opacity":K("hsla","a",c/100);break;case"red":K("rgba","r",2.55*c);break;case"green":K("rgba","g",2.55*c);break;case"blue":K("rgba","b",2.55*c)}O(),b.preventDefault(),rb=!1}function D(){fb=[];for(var a=0;a").css("background-color",e.toRgbString()),g=a('
                  ');g.append(f),eb.swatches.append(a("
                • ").append(g))}}}F()}}function F(){var b=!1;a("span",eb.swatches).filter(function(){var c=a(this).css("background-color");if(c=tinycolor(c),c.alpha=Math.round(100*c.alpha)/100,c.toRgbString()===tb.tiny.toRgbString()){b=!0;var d=a(this).parent();d.is(eb.actualswatch)||(eb.actualswatch&&eb.actualswatch.removeClass("actual"),eb.actualswatch=d,d.addClass("actual"))}}),b||eb.actualswatch&&(eb.actualswatch.removeClass("actual"),eb.actualswatch=!1),eb.actualswatch?(eb.swatches_add.prop("disabled",!0),eb.swatches_remove.prop("disabled",!1)):(eb.swatches_add.prop("disabled",!1),eb.swatches_remove.prop("disabled",!0))}function G(){localStorage.setItem("swatches-"+bb.customswatches,JSON.stringify(fb))}function H(){fb.unshift(tb.tiny.toRgbString()),G(),a(document).trigger("colorpickersliders.changeswatches")}function I(){var b=fb.indexOf(tb.tiny.toRgbString());-1!==b&&(fb.splice(b,1),G(),a(document).trigger("colorpickersliders.changeswatches"))}function J(){confirm("Do you really want to reset the swatches? All customizations will be lost!")&&(D(),G(),a(document).trigger("colorpickersliders.changeswatches"))}function K(a,b,c){switch(a){case"hsv":tb.hsv[b]=c,tb.tiny=tinycolor({h:tb.hsv.h,s:tb.hsv.s,v:tb.hsv.v,a:tb.hsv.a}),tb.rgba=tb.tiny.toRgb(),tb.hsla=tb.tiny.toHsl();break;case"hsla":tb.hsla[b]=c,tb.tiny=tinycolor({h:tb.hsla.h,s:tb.hsla.s,l:tb.hsla.l,a:tb.hsla.a}),tb.rgba=tb.tiny.toRgb(),tb.hsv=tb.tiny.toHsv();break;case"rgba":tb.rgba[b]=c,tb.tiny=tinycolor({r:tb.rgba.r,g:tb.rgba.g,b:tb.rgba.b,a:tb.hsla.a}),tb.hsla=tb.tiny.toHsl(),tb.hsv=tb.tiny.toHsv()}}function L(b,c){var d=a.fn.ColorPickerSliders.calculateEventPositionPercentage(c,eb.sliders[b]);return eb.sliders[b+"_marker"].data("position",d),d}function M(b,c){var d=a.fn.ColorPickerSliders.calculateEventPositionPercentage(c,eb.hsvpanel.sv,!0);return eb.hsvpanel[b+"_marker"].data("position",d),d}function N(a){ub=setTimeout(function(){O(a)},bb.updateinterval)}function O(a){return clearTimeout(ub),Date.now=Date.now||function(){return+new Date},Date.now()-obh&&(h=0),h>100&&(h=100),d){var i=c.height(),j=e.pageY-c.offset().top,k=j/i*100;return 0>k&&(k=0),k>100&&(k=100),{horizontal:h,vertical:k}}return h},a.fn.ColorPickerSliders.getScaledGradientStops=function(b,c,d,e,f,g,h,i){"undefined"==typeof g&&(g=1),"undefined"==typeof h&&(h=0),"undefined"==typeof i&&(i=100);for(var j=[],k=e-d,l=!0,m=0;f>m;++m){var n,o=m/(f-1),p=a.fn.ColorPickerSliders.modifyColor(b,c,o*k+d);if(1>g){var q=a.fn.ColorPickerSliders.lch2rgb(p,g);l=q.isok,n=a.fn.ColorPickerSliders.csscolor(q,g)}else n=a.fn.ColorPickerSliders.csscolor(p,g);j[m]={color:n,position:o*(i-h)+h,isok:l,rawcolor:p}}return j},a.fn.ColorPickerSliders.getGradientStopsCSSString=function(a){for(var b="",c="",d="",e=0;e'}return{noprefix:b,oldwebkit:c,svg:d}},a.fn.ColorPickerSliders.renderNoprefix=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).noprefix;e=d?"linear-gradient(to bottom":"linear-gradient(to right",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderWebkit=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).noprefix;e=d?"-webkit-linear-gradient(top":"-webkit-linear-gradient(left",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderOldwebkit=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).oldwebkit;e=d?"-webkit-gradient(linear, 0% 0%, 0 100%":"-webkit-gradient(linear, 0% 0%, 100% 0%",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderMs=function(b,c,d){"undefined"==typeof d&&(d=!1);var e,f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).noprefix;e=d?"-ms-linear-gradient(to bottom":"-ms-linear-gradient(to right",e+=f+")",b.css("background-image",e)},a.fn.ColorPickerSliders.renderSVG=function(b,c,d){"undefined"==typeof d&&(d=!1);var e="",f=a.fn.ColorPickerSliders.getGradientStopsCSSString(c).svg;e=d?'':'',e+=f,e+='',e="url(data:image/svg+xml;base64,"+a.fn.ColorPickerSliders.base64encode(e)+")",b.css("background-image",e)},a.fn.ColorPickerSliders.base64encode=function(a){var b,c,d,e,f,g,h,i,j="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",k=0,l=0,m="",n=[];if(!a)return a;do b=a.charCodeAt(k++),c=a.charCodeAt(k++),d=a.charCodeAt(k++),i=b<<16|c<<8|d,e=i>>18&63,f=i>>12&63,g=i>>6&63,h=63&i,n[l++]=j.charAt(e)+j.charAt(f)+j.charAt(g)+j.charAt(h);while(k - - @@ -140,7 +138,7 @@

                  Different sizes and color sliders (in bootstrap popovers)

                  -
                  +
                  @@ -364,51 +362,31 @@

                  Full featured flat rendering

                  -

                  More sliders options

                  - -
                  -

                  - I was working on a project where I needed a color picker. I found bootstrap-colorpickersliders and it was great. - But after using it for some time, I wished I could know exact values for each color parameter and to be able to fine tune them. -

                  - -
                  +

                  Slier values and precise control

                  - Click below, to see the result of my programming. + All the slider values will be visible when rendervalues is set to true.
                  + The values can be precisely controlled via buttons if slidersplusminus is set to true.

                  - +
                  -

                  - rendervalues: true - Display currently selected value in each slider. -

                  -

                  - slidersplusminus: true - Display -1 and +1 buttons left and right of each slider. -

                  -

                  - previewformat: 'hsl-rgb' - Display HSL and RGB value in preview field. - WARNING: It might be too wide, use at your own risk! - 

                   <script>
-  $("#mm-sliders-popup").ColorPickerSliders({
+  $("#sliders-plusminus").ColorPickerSliders({
     placement: 'bottom',
     size: 'lg',
     previewformat: 'hsl-rgb',
     swatches: false,
     sliders: true,
-    title: 'sliders demo by mircmm',
+    title: 'Values and plus/minus buttons',
     order: {
       preview: 1,
       hsl: 2,
@@ -423,13 +401,13 @@ 
                  More sliders options