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 += '