diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..bdb0cab --- /dev/null +++ b/.gitattributes @@ -0,0 +1,17 @@ +# Auto detect text files and perform LF normalization +* text=auto + +# Custom for Visual Studio +*.cs diff=csharp + +# Standard to msysgit +*.doc diff=astextplain +*.DOC diff=astextplain +*.docx diff=astextplain +*.DOCX diff=astextplain +*.dot diff=astextplain +*.DOT diff=astextplain +*.pdf diff=astextplain +*.PDF diff=astextplain +*.rtf diff=astextplain +*.RTF diff=astextplain diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cd2946a --- /dev/null +++ b/.gitignore @@ -0,0 +1,47 @@ +# Windows image file caches +Thumbs.db +ehthumbs.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# ========================= +# Operating System Files +# ========================= + +# OSX +# ========================= + +.DS_Store +.AppleDouble +.LSOverride + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..4fdce61 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,9 @@ +# Change Log +This is the changelog for [Colorpickle](https://www.fakiirimedia.com/colorpickle). +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](http://keepachangelog.com/) +and this project adheres to [Semantic Versioning](http://semver.org/). + +## [1.0.0] +- First release. \ No newline at end of file diff --git a/LICENCE.txt b/LICENCE.txt new file mode 100644 index 0000000..8b82305 --- /dev/null +++ b/LICENCE.txt @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016-2017 Hape Haavikko + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..365a994 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +##Colorpickle +[Colorpickle](https://www.fakiirimedia.com/colorpickle) is a color picker plugin for jQuery. Colorpickle offers plenty of options and custom looks via theming. + +## Documentation +Colorpickle documentation and examples can be found at [Colorpickle homepage](https://www.fakiirimedia.com/colorpickle). \ No newline at end of file diff --git a/images/icon-ui-color-picker.png b/images/icon-ui-color-picker.png new file mode 100644 index 0000000..bf42f6c Binary files /dev/null and b/images/icon-ui-color-picker.png differ diff --git a/images/slider-thumb.png b/images/slider-thumb.png new file mode 100644 index 0000000..9d80c5f Binary files /dev/null and b/images/slider-thumb.png differ diff --git a/jquery.colorpickle.css b/jquery.colorpickle.css new file mode 100644 index 0000000..0cab7f1 --- /dev/null +++ b/jquery.colorpickle.css @@ -0,0 +1,332 @@ +.colorpickle { + position: relative; + min-width: 220px; + width: auto; + box-sizing: border-box; + padding: 10px; + font-size: 80%; + color: #fff; + background-color: #333; + border: 1px solid #666; + border-right-color: #000; + border-bottom-color: #000; + z-index: 1; +} + +.colorpickleOnTop { + position: absolute; + z-index: 9999; +} + +.colorpickle .sliderWrapper { + position: relative; + height: 30px; +} + +.colorpickle .sliderWrapper label { + line-height: 28px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.colorpickle input[type="text"] { + color: #fff; + background-color: #222; + border: 1px solid #444; + padding: 1px 2px; +} + +.colorpickle .sliderValue { + width: 18px; + margin-top: 4px; + text-align: right; + font-size: inherit; + float: right; +} + +.colorpickle .sliderDiv { + position: absolute; + top: 0; + left: 26px; + right: 28px; + width: auto; +} + +.colorpickle .slider { + width: 100%; + margin-top: 4px; + cursor: ew-resize; +} + +.colorpickle .sliderBg { + position: absolute; + top: 7px; + left: 30px; + right: 30px; + width: auto; + height: 10px; + border: 1px solid #666; +} + +.colorpickle .colorPickerWrapper { + position: relative; + width: auto; + height: 200px; + margin-top: 20px; + border: 1px solid #666; + cursor: crosshair; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.colorpickle .colorPickerBg { + width: 100%; + height: 100%; +} + +.colorpickle .colorPicker { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.colorpickle .colorPicker .gradientTp2Black { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +} + +.colorpickle .colorPicker .gradientTp2White { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +} + +.colorpickle .colorPickerIndicator { + position: absolute; + top: 0; + left: 0; + padding: 0; + margin: 0; + width: 13px; + height: 13px; + border-radius: 50%; + border: 1px solid #000; +} + +.colorpickle .colorPickerIndicator:before, .colorpickle .colorPickerIndicator:after { + content: " "; + position: absolute; + z-index: 0; + border-radius: 50%; +} + +.colorpickle .colorPickerIndicator:before { + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; + border: 1px solid #000; +} + +.colorpickle .colorPickerIndicator:after { + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid #fff; +} + +.colorPickerIcon { + width: 22px; + height: 22px; + margin: 0 0 0 2px; + background-color: #f00; + background-image: url('images/icon-ui-color-picker.png'); + background-repeat: no-repeat; + border: none; + position: relative; + cursor: pointer; +} + +.colorpickle .swatchHex { + margin-top: 20px; +} + +.colorpickle .swatch { + width: 48px; + height: 48px; + border: 1px solid #666; + margin: 0 0 5px 0; +} + +.colorpickle .hexValue { + width: 44px; + font-size: inherit; +} + +.colorpickle .bWrapper { + margin-bottom: 20px; +} + +.colorpickle .hWrapper .sliderBg { + background: -moz-linear-gradient(left, #f00 0%, #ff0 16%, #0f0 33%, #0ff 50%, #00f 66%, #f0f 83%, #f00 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, #f00 0%,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,#f00 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, #f00 0%,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,#f00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +} + +.colorpickle div.clear { + clear: both; +} + +.colorpickle .buttonsWrapper { + position: absolute; + bottom: 10px; + right: 10px; +} + +.colorpickle button { + background-color: #666; + border: none; + color: #fff; + padding: 5px 10px; + margin-left: 5px; +} + +.colorpickle button:hover { + background-color: #999; +} + +.colorpickleModalOverlay { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + position: fixed; + top: 0px; + left: 0px; + z-index: 9998; + display: none; +} + +.colorpickle .dragHandle { + border-top: 1px solid #999; + border-bottom: 1px solid #666; + margin-bottom: 10px; + cursor: move; +} + +.colorpickle .dragHandle:before, .colorpickle .dragHandle:after { + content: ""; + display: block; + border-top: 1px solid #666; + border-bottom: 1px solid #999; + height: 3px; +} + +input[type=range] { + -webkit-appearance: none; + background-color: transparent; + margin: 10px 0; + width: 100%; +} + +input[type=range]:focus { + outline: none; +} + +/** + * Range slider styles for Webkit + */ +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 10px; + animate: 0.2s; + background-color: transparent; + border-radius: 5px; + border: 0px solid #000101; +} + +input[type=range]::-webkit-slider-thumb { + height: 28px; + width: 9px; + -webkit-appearance: none; + margin-top: -5px; + border: none; + border-radius: 0; + background-color: transparent; + background-image: url('images/slider-thumb.png'); +} + +input[type=range]:focus::-webkit-slider-runnable-track { + background-color: transparent; +} + +/** + * Range slider styles for Mozilla + */ +input[type=range]::-moz-range-track { + width: 100%; + height: 10px; + animate: 0.2s; + background-color: transparent; + border-radius: 5px; + border: 0px solid #000101; +} + +input[type=range]::-moz-range-thumb { + height: 30px; + width: 9px; + border: none; + border-radius: 0; + background-color: transparent; + background-image: url('images/slider-thumb.png'); + background-repeat: no-repeat; +} + +/** + * Range slider styles for IE + */ +input[type=range]::-ms-track { + width: 100%; + height: 10px; + animate: 0.2s; + background-color: transparent; + border-color: transparent; + border-width: 10px 0; + color: transparent; +} + +input[type=range]::-ms-fill-lower, +input[type=range]::-ms-fill-upper, +input[type=range]:focus::-ms-fill-lower, +input[type=range]:focus::-ms-fill-upper { + background-color: transparent; + border: 0px solid #000101; + border-radius: 5px; +} + +input[type=range]::-ms-thumb { + height: 28px; + width: 9px; + margin-top: -36px; + border: none; + border-radius: 0; + background-color: transparent; + background-image: url('images/slider-thumb.png'); +} diff --git a/jquery.colorpickle.js b/jquery.colorpickle.js new file mode 100644 index 0000000..877a349 --- /dev/null +++ b/jquery.colorpickle.js @@ -0,0 +1,931 @@ +/** + * jQuery Colorpickle plugin + * + * @copyright 2016 Hape Haavikko + * @author Hape Haavikko + * @version 1.0.0 + */ +;(function ( $, window, document, undefined ) { + + $.colorpickle = function(element, options) { + + // Default settings overwritten by options if given + var defaults = { + "clickToggle": false, + "closeOnOk": false, + "closeOnCancel": false, + "draggable": false, + "hex": null, + "hsl": null, + "hslSliders": true, + "modal": false, + "mode": "hex", + "onCancel": null, + "onChange": null, + "onInit": null, + "onOk": null, + "onTop": false, + "rgb": [255, 140, 60], + "rgbSliders": true, + "showCancel": false, + "showHex": true, + "showOk": false, + "showSLGradient": true, + "showSwatch": true, + "textCancel": "Cancel", + "textOk": "Ok", + "theme": null, + "visible": true, + "width": null + }; + + var r; + var g; + var b; + var hex; + var hsl; + var h; + var s; + var l; + var v; + + var instance = $("div.colorpickle").length + 1; + var instanceId = "colorpickle" + instance; + var picking = false; + + // References to RGB and HSL slider wrapper divs + var rWrapper = "#" + instanceId + " .rWrapper"; + var gWrapper = "#" + instanceId + " .gWrapper"; + var bWrapper = "#" + instanceId + " .bWrapper"; + var hWrapper = "#" + instanceId + " .hWrapper"; + var sWrapper = "#" + instanceId + " .sWrapper"; + var lWrapper = "#" + instanceId + " .lWrapper"; + + // References to RGB and HSL sliders (range type inputs) + var redSlider = "#" + instanceId + " .r"; + var greenSlider = "#" + instanceId + " .g"; + var blueSlider = "#" + instanceId + " .b"; + var hueSlider = "#" + instanceId + " .h"; + var saturationSlider = "#" + instanceId + " .s"; + var lightnessSlider = "#" + instanceId + " .l"; + + // References to slider backgrounds (gradients) + var redSliderBg = "#" + instanceId + " .rWrapper .sliderBg"; + var greenSliderBg = "#" + instanceId + " .gWrapper .sliderBg"; + var blueSliderBg = "#" + instanceId + " .bWrapper .sliderBg"; + var hueSliderBg = "#" + instanceId + " .hWrapper .sliderBg"; + var saturationSliderBg = "#" + instanceId + " .sWrapper .sliderBg"; + var lightnessSliderBg = "#" + instanceId + " .lWrapper .sliderBg"; + + // References to RGB and HSL value inputs + var rInput = "#" + instanceId + " .rInput"; + var gInput = "#" + instanceId + " .gInput"; + var bInput = "#" + instanceId + " .bInput"; + var hInput = "#" + instanceId + " .hInput"; + var sInput = "#" + instanceId + " .sInput"; + var lInput = "#" + instanceId + " .lInput"; + + var colorPickerWrapper = "#"+instanceId+" .colorPickerWrapper"; + var colorPickerBg = "#"+instanceId+" .colorPickerBg"; + var colorPicker = "#"+instanceId+" .colorPicker"; + var colorPickerIndicator = "#"+instanceId+" .colorPickerIndicator"; + var colorPickerIcon = "#" + instanceId + "Icon"; + var swatch = "#"+instanceId+" .swatch"; + + var plugin = this; + + /** + * This will hold the merged default and user-provided options + * Properties will be available through this object like: + * plugin.settings.propertyName from inside the plugin + */ + plugin.settings = {}; + + // Reference to the jQuery version of DOM element + var $element = $(element); + + // Reference to the actual DOM element + var el = element; + + // The constructor method that gets called when the object is created + plugin.init = function() { + + // Merged default and user-provided options (if given) + plugin.settings = $.extend({}, defaults, options); + + // Public properties accessed via element.data('colorpickle').propertyName + plugin.rgb = null; + plugin.hsl = null; + plugin.hex = null; + + if ($element.is("div")) + { + // Insert colorpicker in the div used to invoke the colorpicker + $(el).append('
'); + } + else + { + // If not a div (input for example) insert colorpicker after the element used to invoke the colorpicker + if (plugin.settings.modal == true) + { + // Put modal picker to the end of body + $("body").append('
'); + } + else + { + $('
').insertAfter($element); + } + + $('').insertAfter($element); + } + + if (plugin.settings.theme != null) + { + $("#" + instanceId).addClass("colorpickle-theme-" + plugin.settings.theme); + } + + if ($element.is("input")) + { + $(el).keypress(function () { return false; }); + } + + if (plugin.settings.onTop == true) + { + $("#"+instanceId).addClass("colorpickleOnTop"); + } + + if (plugin.settings.width != null) + { + $("#"+instanceId).css("width", plugin.settings.width); + } + + // Drag handle + if (plugin.settings.draggable == true) + { + $("#"+instanceId).append('
'); + + $("#"+instanceId+" .dragHandle").mousedown(function(e) { + + var parentOffset = $(this).parent().offset(); + var relX = e.pageX - parentOffset.left; + var relY = e.pageY - parentOffset.top; + + $("body").mousemove(function(e) { + $("#"+instanceId).offset({ + top: e.pageY - relY, + left: e.pageX - relX + }); + }); + + $("body").css("cursor", "move"); + }); + + $("body").mouseup(function() { + $("body").off("mousemove"); + $("body").css("cursor", "default"); + }); + } + + if (plugin.settings.hex != null) + { + hex = plugin.settings.hex; + var rgbTemp = hexToRgb(plugin.settings.hex); + plugin.settings.rgb[0] = rgbTemp.r; + plugin.settings.rgb[1] = rgbTemp.g; + plugin.settings.rgb[2] = rgbTemp.b; + } + + createSlider('r', 0, 255, plugin.settings.rgb[0]); + createSlider('g', 0, 255, plugin.settings.rgb[1]); + createSlider('b', 0, 255, plugin.settings.rgb[2]); + + createSlider('h', 0, 360, 50); + createSlider('s', 0, 100, 50); + createSlider('l', 0, 100, 50); + + if (plugin.settings.hsl != null) + { + $(hueSlider).val(plugin.settings.hsl[0]); + $(saturationSlider).val(plugin.settings.hsl[1]); + $(lightnessSlider).val(plugin.settings.hsl[2]); + setHSL(); + } + + $("#"+instanceId).append('
'); + $(colorPickerWrapper).append('
'); + $(colorPickerWrapper).append('
'); + $(colorPickerWrapper).append('
'); + + $("#"+instanceId).append('
'); + + $("#"+instanceId).append('
'); + $("#"+instanceId+" .swatchHex").append('
'); + $("#"+instanceId+" .swatchHex").append(''); + + $("#"+instanceId).append('
'); + + if (plugin.settings.showCancel) + { + $("#"+instanceId+" .buttonsWrapper").append(''); + } + + if (plugin.settings.showOk) + { + $("#"+instanceId+" .buttonsWrapper").append(''); + } + + $("#"+instanceId).append('
'); + + /** + * Update all color values from RGB values when dragging RGB sliders. + * Onchange and input events don't work yet on all browsers! + */ + /*$(redSlider+", "+greenSlider+", "+blueSlider).mousedown(function () { + $(this).mousemove(function () { + setRGB(); + }); + });*/ + $(redSlider+", "+greenSlider+", "+blueSlider).bind("touchstart mousedown", function () { + $(this).bind("touchmove mousemove", function () { + setRGB(); + }); + }); + + /** + * Update all color values from HSL values when dragging HSL sliders. + * Onchange and input events don't work yet on all browsers! + */ + /*$(hueSlider+", "+saturationSlider+", "+lightnessSlider).mousedown(function () { + $(this).mousemove(function () { + setHSL(); + }); + });*/ + $(hueSlider+", "+saturationSlider+", "+lightnessSlider).bind("touchstart mousedown", function () { + $(this).bind("touchmove mousemove", function () { + setHSL(); + }); + }); + + /** + * Unbind mousemove event hanlder from all sliders on mouseup. + */ + /*$(".slider").mouseup(function () { + $(this).unbind('mousemove'); + }).mouseout(function () { + $(this).unbind('mousemove'); + });*/ + $(redSlider+", "+greenSlider+", "+blueSlider).bind("touchend mouseup mouseout", function () { + $(this).unbind("touchmove mousemove"); + //setRGB(); + }); + + $(hueSlider+", "+saturationSlider+", "+lightnessSlider).bind("touchend mouseup mouseout", function () { + $(this).unbind("touchmove mousemove"); + //setHSL(); + }); + + /** + * Sets slider positions when rgb values are changed in the input fields + */ + $('.colorValue').keyup(function() { + + var sliderId = $(this).attr("data-sliderId"); + + // Make sure only numbers are accepted + if (isNaN(this.value)) { + this.value = $("#"+instanceId+" ."+sliderId).val(); + return false; + } + + $("#"+instanceId+" ."+sliderId).val(this.value); + + if (sliderId == 'r' || sliderId == 'g' || sliderId == 'b') + { + setRGB(); + } + else if (sliderId == 'h' || sliderId == 's' || sliderId == 'l') + { + setHSL(); + } + + return true; + }); + + /** + * Set sliders and rgb/hsl values when hex value is changed + */ + $("#"+instanceId+" .hexValue").keyup(function() { + if (this.value.charAt(0) != '#') + { + this.value = '#' + this.value; + } + + if (this.value.length == 7) + { + if (hexToRgb(this.value)) + { + hex = this.value; + var rgb = hexToRgb(this.value); + r = rgb.r; + g = rgb.g; + b = rgb.b; + setSliders(); + setRGB(); + } + else + { + this.value = hex; + } + } + }); + + $(colorPickerWrapper).mousedown(function(e) { + picking = true; + pickColor(e, this); + }); + + $(colorPickerWrapper).mousemove(function(e) { + if (picking == true) + { + pickColor(e, this); + } + }); + + $(colorPickerWrapper).bind('mouseup mouseleave', function(e) { + picking = false; + }); + + // Put color value in the input + $("#"+instanceId+" .okBtn").click(function() { + + if (plugin.settings.mode == "rgb") + { + $element.val("rgb("+r+", "+g+", "+b+")"); + } + else if (plugin.settings.mode == "hex") + { + $element.val("#"+hex); + } + else if (plugin.settings.mode == "hsl") + { + $element.val("hsl("+h+", "+s+"%, "+l+"%)"); + } + + // Execute custom onOk function if given + if (plugin.settings.onOk != null) + { + plugin.settings.onOk(); + } + + if (plugin.settings.closeOnOk == true) + { + showHide(); + } + + $(colorPickerIcon).css("background-color", "#" + hex); + }); + + // Cancel + $("#"+instanceId+" .cancelBtn").click(function() { + + // Execute custom onCancel function if given + if (plugin.settings.onCancel != null) + { + plugin.settings.onCancel(); + } + + if (plugin.settings.closeOnCancel == true) + { + showHide(); + } + }); + + $(window).scroll(function() { + if (plugin.settings.modal == true && plugin.settings.draggable == false) + { + center(); + } + }); + + /** + * To keep the color indicator in the right place when resizing. + */ + $(window).resize(function() { + setRGB(); + if (plugin.settings.modal == true && plugin.settings.draggable == false) + { + center(); + } + }); + + if (plugin.settings.clickToggle == true) + { + $element.click(function() { + showHide(); + }); + + $(colorPickerIcon).click(function() { + showHide(); + }); + } + + // Modal + if (plugin.settings.modal == true) + { + center(); + $("body").append('
'); + } + + // Hide stuff according to custom settings + if (plugin.settings.showSwatch == false) + { + $(swatch).hide(); + } + + if (! plugin.settings.showSLGradient) + { + $(colorPickerWrapper).hide(); + } + + if (plugin.settings.rgbSliders == false) + { + $(rWrapper).hide(); + $(gWrapper).hide(); + $(bWrapper).hide(); + } + + if (plugin.settings.hslSliders == false) + { + $(hWrapper).hide(); + $(sWrapper).hide(); + $(lWrapper).hide(); + } + + if (plugin.settings.showHex == false) + { + $("#"+instanceId+" .hexValue").hide(); + } + + // Make room for buttons + if (plugin.settings.showCancel || plugin.settings.showOk) + { + $("#"+instanceId).css("min-height", ($("#"+instanceId).height() + $("#"+instanceId+" .buttonsWrapper").height() - parseInt($("#"+instanceId).css("padding-bottom"))) + "px"); + } + + setRGB(); + + $(colorPickerIcon).css("background-color", "#" + hex); + + if (plugin.settings.visible == false) + { + $("#"+instanceId).hide(); + } + + // Call onInit if set + if ($.isFunction(plugin.settings.onInit)) + { + plugin.settings.onInit(); + } + } + + /** + * Public methods + * Call from inside: plugin.methodName(arg1, arg2, ... argn) + * Call from outside: $(selector).colorpickle("methodName", arg1, arg2, ... argn) + */ + + /** + * Set Colorpickle current RGB value from outside + */ + plugin.setRGB = function(r, g, b) { + $(redSlider).val(r); + $(greenSlider).val(g); + $(blueSlider).val(b); + setRGB(); + }; + + /** + * Set Colorpickle current HSL value from outside + */ + plugin.setHSL = function(h, s, l) { + $(hueSlider).val(h); + $(saturationSlider).val(s); + $(lightnessSlider).val(l); + setHSL(); + }; + + /** + * Set Colorpickle current RGB hex value from outside + */ + plugin.setHex = function(hex) { + var rgb = hexToRgb(hex); + $(redSlider).val(rgb.r); + $(greenSlider).val(rgb.g); + $(blueSlider).val(rgb.b); + setRGB(); + }; + + /** + * Private methods + * Call from inside only: methodName(arg1, arg2, ... argn) + */ + + /** + * Creates a range input to control a color component + * r = Red, g = Green, b = Blue + * h = Hue, s = Saturation, l = Lightness + * + * @param color string + * @param min int + * @param max int + * @param value int + * + * @return void + */ + var createSlider = function(color, min, max, value) + { + var wrapperName = color + "Wrapper"; + var unit = ''; + + if (color == 'h') + { + unit = ' °'; + } + else if (color == 's' ||color == 'l') + { + unit = ' %'; + } + + $("#" + instanceId).append('
'); + $("#" + instanceId + " ." + wrapperName).append(''); + $("#" + instanceId + " ." + wrapperName).append('
'); + $("#" + instanceId + " ." + wrapperName).append('
'); + $("#" + instanceId + " ." + wrapperName).append(''); + }; + + var setRGB = function() + { + r = parseInt($(redSlider).val()); + g = parseInt($(greenSlider).val()); + b = parseInt($(blueSlider).val()); + + hsl = rgbToHsl(r, g, b); + h = Math.round(hsl[0]*360); + s = Math.round(hsl[1]*100); + l = Math.round(hsl[2]*100); + + setHex(); + setSliders(); + setFields(); + setSliderBackgrounds(); + setIndicator(); + }; + + var setHSL = function() + { + h = parseInt($(hueSlider).val()); + s = parseInt($(saturationSlider).val()); + l = parseInt($(lightnessSlider).val()); + + var rgb = hslToRgb(h/360, s/100, l/100); + r = Math.round(rgb[0]); + g = Math.round(rgb[1]); + b = Math.round(rgb[2]); + + setHex(); + setSliders(); + setFields(); + setSliderBackgrounds(); + setIndicator(); + }; + + /** + * Sets hex value and updates swatch color. + * Also the public color properties are updated here. + * + * @return void + */ + var setHex = function() + { + hex = rgbToHex(r, g, b); + $(swatch).css("background-color", "#" + hex); + + var pickerRGB = hslToRgb(h/360, 1, 0.5); + var pickerR = Math.round(pickerRGB[0]); + var pickerG = Math.round(pickerRGB[1]); + var pickerB = Math.round(pickerRGB[2]); + + var pickerHex = rgbToHex(pickerR, pickerG, pickerB); + + $(colorPickerBg).css("background-color", "#" + pickerHex); + + // Execute custom onChange function if given and the color has changed + if (plugin.settings.onChange != null && plugin.rgb != null && plugin.hex != '#' + hex) + { + plugin.settings.onChange(); + } + + // Set public color properties + plugin.rgb = 'rgb(' + r + ',' + g + ',' + b + ')'; + plugin.hsl = 'hsl(' + h + ',' + s + ',' + l + ')'; + plugin.hex = '#' + hex; + }; + + /** + * Converts a RGB color value to hex. + * + * @param r int + * @param g int + * @param b int + * + * @return string + */ + var rgbToHex = function(r, g, b) + { + var hex = [ + r.toString(16), + g.toString(16), + b.toString(16) + ]; + $.each(hex, function(nr, val) { + if (val.length === 1) { + hex[ nr ] = "0" + val; + } + }); + + return hex.join(""); + }; + + /** + * Converts a hex color value to RGB. + */ + var hexToRgb = function(hex) + { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : false; + }; + + /** + * Converts an HSL color value to RGB. + * Conversion formula adapted from http://en.wikipedia.org/wiki/HSL_color_space. + * Assumes h, s, and l are contained in the set [0, 1] and + * returns r, g, and b in the set [0, 255]. + * + * @param Number h The hue + * @param Number s The saturation + * @param Number l The lightness + * @return Array The RGB representation + */ + var hslToRgb = function(h, s, l){ + var r, g, b; + + if(s == 0){ + r = g = b = l; // achromatic + }else{ + function hue2rgb(p, q, t){ + if(t < 0) t += 1; + if(t > 1) t -= 1; + if(t < 1/6) return p + (q - p) * 6 * t; + if(t < 1/2) return q; + if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + } + + var q = l < 0.5 ? l * (1 + s) : l + s - l * s; + var p = 2 * l - q; + r = hue2rgb(p, q, h + 1/3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1/3); + } + + return [r * 255, g * 255, b * 255]; + }; + + /** + * Converts an RGB color value to HSL. + * Conversion formula adapted from http://en.wikipedia.org/wiki/HSL_color_space. + * Assumes r, g, and b are contained in the set [0, 255] and + * returns h, s, and l in the set [0, 1]. + * + * @param Number r The red color value + * @param Number g The green color value + * @param Number b The blue color value + * + * @return Array The HSL representation + */ + var rgbToHsl = function(r, g, b) + { + r /= 255, g /= 255, b /= 255; + var max = Math.max(r, g, b), min = Math.min(r, g, b); + var h, s, l = (max + min) / 2; + + if(max == min){ + h = s = 0; // achromatic + }else{ + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch(max){ + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + h /= 6; + } + + return [h, s, l]; + }; + + var hsv2hsl = function(a,b,c){return[a,b*c/((a=(2-b)*c)<1?a:2-a),a/2]}; + var hsl2hsv = function(a,b,c){b*=c<.5?c:1-c;return[a,2*b/(c+b),c+b]}; + + var getPos = function(obj) + { + var curleft = curtop = 0; + if (obj.offsetParent) + { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } + while (obj = obj.offsetParent); + } + return [curleft,curtop]; + }; + + var setFields = function() + { + $(rInput).val(r); + $(gInput).val(g); + $(bInput).val(b); + $(hInput).val(h); + $(sInput).val(s); + $(lInput).val(l); + $("#"+instanceId+" .hexValue").val("#" + hex); + }; + + var setSliders = function() + { + $(redSlider).val(r); + $(greenSlider).val(g); + $(blueSlider).val(b); + $(hueSlider).val(h); + $(saturationSlider).val(s); + $(lightnessSlider).val(l); + }; + + /** + * Sets slider background gradients + */ + var setSliderBackgrounds = function() + { + var rStyle = 'background: -moz-linear-gradient(left, rgb(0,' + g + ',' + b + ') 0%, rgb(255,' + g + ',' + b + ') 100%);'; + rStyle += 'background: -webkit-linear-gradient(left, rgb(0,' + g + ',' + b + ') 0%, rgb(255,' + g + ',' + b + ') 100%);'; + rStyle += 'background: linear-gradient(to right, rgb(0,' + g + ',' + b + ') 0%, rgb(255,' + g + ',' + b + ') 100%);'; + + var gStyle = 'background: -moz-linear-gradient(left, rgb(' + r + ',0,' + b + ') 0%, rgb(' + r + ',255,' + b + ') 100%);'; + gStyle += 'background: -webkit-linear-gradient(left, rgb(' + r + ',0,' + b + ') 0%, rgb(' + r + ',255,' + b + ') 100%);'; + gStyle += 'background: linear-gradient(to right, rgb(' + r + ',0,' + b + ') 0%, rgb(' + r + ',255,' + b + ') 100%);' + + var bStyle = 'background: -moz-linear-gradient(left, rgb(' + r + ',' + g + ',0) 0%, rgb(' + r + ',' + g + ',255) 100%);'; + bStyle += 'background: -webkit-linear-gradient(left, rgb(' + r + ',' + g + ',0) 0%, rgb(' + r + ',' + g + ',255) 100%);'; + bStyle += 'background: linear-gradient(to right, rgb(' + r + ',' + g + ',0) 0%, rgb(' + r + ',' + g + ',255) 100%);'; + + var lStyle = 'background: -moz-linear-gradient(left, #000 0%, hsl(' + h + ',' + s + '%,50%) 50%, #fff 100%);'; + lStyle += 'background: -webkit-linear-gradient(left, #000 0%, hsl(' + h + ',' + s + '%,50%) 50%, #fff 100%);'; + lStyle += 'background: linear-gradient(to right, #000 0%, hsl(' + h + ',' + s + '%,50%) 50%, #fff 100%);'; + + var sStyle = 'background: -moz-linear-gradient(left, hsl(' + h + ',0%,' + l+ '%) 0%, hsl(' + h + ',100%,' + l+ '%) 100%);'; + sStyle += 'background: -webkit-linear-gradient(left, hsl(' + h + ',0%,' + l+ '%) 0%, hsl(' + h + ',100%,' + l+ '%) 100%);'; + sStyle += 'background: linear-gradient(to right, hsl(' + h + ',0%,' + l+ '%) 0%, hsl(' + h + ',100%,' + l+ '%) 100%);'; + + $(redSliderBg).attr('style', rStyle); + $(greenSliderBg).attr('style', gStyle); + $(blueSliderBg).attr('style', bStyle); + $(lightnessSliderBg).attr('style', lStyle); + $(saturationSliderBg).attr('style', sStyle); + + /*$(redSliderBg).css('background', 'linear-gradient(to right, rgb(0,' + g + ',' + b + ') 0%, rgb(255,' + g + ',' + b + ') 100%)'); + $(greenSliderBg).css('background', 'linear-gradient(to right, rgb(' + r + ',0,' + b + ') 0%, rgb(' + r + ',255,' + b + ') 100%)'); + $(blueSliderBg).css('background', 'linear-gradient(to right, rgb(' + r + ',' + g + ',0) 0%, rgb(' + r + ',' + g + ',255) 100%)'); + $(lightnessSliderBg).css('background', 'linear-gradient(to right, #000 0%, hsl(' + h + ',' + s + '%,50%) 50%, #fff 100%)'); + $(saturationSliderBg).css('background', 'linear-gradient(to right, hsl(' + h + ',0%,' + l+ '%) 0%, hsl(' + h + ',100%,' + l+ '%) 100%)');*/ + }; + + /** + * Pick HSV color from mouse position on the picker + */ + var pickColor =function(e, el) + { + var pos = getPos(el); + var x = e.pageX - pos[0]; + var y = e.pageY - pos[1]; + + $(colorPickerIndicator).css("left", Math.ceil(x-$(colorPickerIndicator).outerWidth()/2)); + $(colorPickerIndicator).css("top", Math.ceil(y-$(colorPickerIndicator).outerHeight()/2)); + + s = x / ($(colorPickerWrapper).width() / 100); + v = 100 - (y / ($(colorPickerWrapper).height() / 100)); + + var hsl = hsv2hsl(h,(s/100),(v/100)); + s = Math.round(hsl[1]*100); + l = Math.round(hsl[2]*100); + + $(saturationSlider).val(s); + $(lightnessSlider).val(l); + + setHSL(); + }; + + var setIndicator = function() + { + var hsv = hsl2hsv(h,(s/100),(l/100)); + s = Math.round(hsv[1]*100); + v = Math.round(hsv[2]*100); + + var hMultiplier = ($(colorPickerWrapper).width() / 100); + var vMultiplier = ($(colorPickerWrapper).height() / 100); + + var x = Math.ceil((s*hMultiplier) - ($(colorPickerIndicator).outerWidth()/2)); + var y = Math.ceil(($(colorPickerWrapper).height()-v*vMultiplier) - ($(colorPickerIndicator).outerHeight()/2)); + + $(colorPickerIndicator).css("left", x); + $(colorPickerIndicator).css("top", y); + }; + + var showHide = function() + { + // Center modal Colorpickle before opening + if (plugin.settings.modal == true) + { + if (! $("#"+instanceId).is(":visible")) + { + center(); + } + + $("#" + instanceId+"overlay").fadeToggle(); + } + + $("#"+instanceId).fadeToggle(); + }; + + /** + * Centers the Colorpickle in the browser window. + * + * @return void + */ + var center = function() + { + var x = ($(window).width() / 2) - ($("#"+instanceId).width() / 2); + var y = ($(window).height() / 2) - ($("#"+instanceId).height() / 2) + $(window).scrollTop(); + + $("#"+instanceId).css("position", "absolute"); + $("#"+instanceId).css("top", y+"px"); + $("#"+instanceId).css("left", x+"px"); + }; + + // Call init! + plugin.init(); + }; + + // Add the plugin to the jQuery.fn object + $.fn.colorpickle = function(options) { + + var args = arguments; + + // Iterate through the DOM elements we are attaching the plugin to + return this.each(function() { + + var instance = $(this).data('colorpickle'); + + // If the plugin has not already been attached to the element + if (instance == undefined) + { + // Create a new instance of the plugin + // Pass the DOM element and the user-provided options as arguments + var plugin = new $.colorpickle(this, options); + + /* + * Store a reference to the plugin object in the jQuery version of the element. + * You can later access the plugin and its methods and properties like + * element.data('colorpickle').publicMethod(arg1, arg2, ... argn) or + * element.data('colorpickle').settings.propertyName + */ + $(this).data('colorpickle', plugin); + } + else + { + // Plugin already attached, check if the parameter is a method... + if ($.isFunction(instance[options])) + { + // Call the method + instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) ); + //return instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) ); + } + } + }); + } +}(jQuery, window, document)); diff --git a/jquery.colorpickle.min.css b/jquery.colorpickle.min.css new file mode 100644 index 0000000..bf55bc0 --- /dev/null +++ b/jquery.colorpickle.min.css @@ -0,0 +1 @@ +.colorpickle{position:relative;min-width:220px;width:auto;box-sizing:border-box;padding:10px;font-size:80%;color:#fff;background-color:#333;border:1px solid #666;border-right-color:#000;border-bottom-color:#000;z-index:1}.colorpickleOnTop{position:absolute;z-index:9999}.colorpickle .sliderWrapper{position:relative;height:30px}.colorpickle .sliderWrapper label{line-height:28px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpickle input[type=text]{color:#fff;background-color:#222;border:1px solid #444;padding:1px 2px}.colorpickle .sliderValue{width:18px;margin-top:4px;text-align:right;font-size:inherit;float:right}.colorpickle .sliderDiv{position:absolute;top:0;left:26px;right:28px;width:auto}.colorpickle .slider{width:100%;margin-top:4px;cursor:ew-resize}.colorpickle .sliderBg{position:absolute;top:7px;left:30px;right:30px;width:auto;height:10px;border:1px solid #666}.colorpickle .colorPickerWrapper{position:relative;width:auto;height:200px;margin-top:20px;border:1px solid #666;cursor:crosshair;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpickle .colorPickerBg{width:100%;height:100%}.colorpickle .colorPicker{position:absolute;top:0;left:0;width:100%;height:100%}.colorpickle .colorPicker .gradientTp2Black{position:absolute;top:0;left:0;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%)}.colorpickle .colorPicker .gradientTp2White{position:absolute;top:0;left:0;width:100%;height:100%;background:-moz-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:linear-gradient(to right,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%)}.colorpickle .colorPickerIndicator{position:absolute;top:0;left:0;padding:0;margin:0;width:13px;height:13px;border-radius:50%;border:1px solid #000}.colorpickle .colorPickerIndicator:after,.colorpickle .colorPickerIndicator:before{content:" ";position:absolute;z-index:0;border-radius:50%}.colorpickle .colorPickerIndicator:before{top:1px;left:1px;right:1px;bottom:1px;border:1px solid #000}.colorpickle .colorPickerIndicator:after{top:0;left:0;right:0;bottom:0;border:1px solid #fff}.colorPickerIcon{width:22px;height:22px;margin:0 0 0 2px;background-color:red;background-image:url(images/icon-ui-color-picker.png);background-repeat:no-repeat;border:none;position:relative;cursor:pointer}.colorpickle .swatchHex{margin-top:20px}.colorpickle .swatch{width:48px;height:48px;border:1px solid #666;margin:0 0 5px}.colorpickle .hexValue{width:44px;font-size:inherit}.colorpickle .bWrapper{margin-bottom:20px}.colorpickle .hWrapper .sliderBg{background:-moz-linear-gradient(left,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,red 100%);background:-webkit-linear-gradient(left,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,red 100%);background:linear-gradient(to right,red 0,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,red 100%)}.colorpickle div.clear{clear:both}.colorpickle .buttonsWrapper{position:absolute;bottom:10px;right:10px}.colorpickle button{background-color:#666;border:none;color:#fff;padding:5px 10px;margin-left:5px}.colorpickle button:hover{background-color:#999}.colorpickleModalOverlay{width:100%;height:100%;background-color:rgba(0,0,0,.7);position:fixed;top:0;left:0;z-index:9998;display:none}.colorpickle .dragHandle{border-top:1px solid #999;border-bottom:1px solid #666;margin-bottom:10px;cursor:move}.colorpickle .dragHandle:after,.colorpickle .dragHandle:before{content:"";display:block;border-top:1px solid #666;border-bottom:1px solid #999;height:3px}input[type=range]{-webkit-appearance:none;background-color:transparent;margin:10px 0;width:100%}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;animate:.2s;background-color:transparent;border-radius:5px;border:0 solid #000101}input[type=range]::-webkit-slider-thumb{height:28px;width:9px;-webkit-appearance:none;margin-top:-5px;border:none;border-radius:0;background-color:transparent;background-image:url(images/slider-thumb.png)}input[type=range]:focus::-webkit-slider-runnable-track{background-color:transparent}input[type=range]::-moz-range-track{width:100%;height:10px;animate:.2s;background-color:transparent;border-radius:5px;border:0 solid #000101}input[type=range]::-moz-range-thumb{height:30px;width:9px;border:none;border-radius:0;background-color:transparent;background-image:url(images/slider-thumb.png);background-repeat:no-repeat}input[type=range]::-ms-track{width:100%;height:10px;animate:.2s;background-color:transparent;border-color:transparent;border-width:10px 0;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper,input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background-color:transparent;border:0 solid #000101;border-radius:5px}input[type=range]::-ms-thumb{height:28px;width:9px;margin-top:-36px;border:none;border-radius:0;background-color:transparent;background-image:url(images/slider-thumb.png)} \ No newline at end of file diff --git a/jquery.colorpickle.min.js b/jquery.colorpickle.min.js new file mode 100644 index 0000000..574fbd3 --- /dev/null +++ b/jquery.colorpickle.min.js @@ -0,0 +1,8 @@ +/** + * jQuery Colorpickle plugin + * + * @copyright 2016 Hape Haavikko + * @author Hape Haavikko + * @version 1.0.0 + */ +!function(a,b,c,d){a.colorpickle=function(c,d){var f,g,h,i,j,k,l,m,n,e={clickToggle:!1,closeOnOk:!1,closeOnCancel:!1,draggable:!1,hex:null,hsl:null,hslSliders:!0,modal:!1,mode:"hex",onCancel:null,onChange:null,onInit:null,onOk:null,onTop:!1,rgb:[255,140,60],rgbSliders:!0,showCancel:!1,showHex:!0,showOk:!1,showSLGradient:!0,showSwatch:!0,textCancel:"Cancel",textOk:"Ok",theme:null,visible:!0,width:null},o=a("div.colorpickle").length+1,p="colorpickle"+o,q=!1,r="#"+p+" .rWrapper",s="#"+p+" .gWrapper",t="#"+p+" .bWrapper",u="#"+p+" .hWrapper",v="#"+p+" .sWrapper",w="#"+p+" .lWrapper",x="#"+p+" .r",y="#"+p+" .g",z="#"+p+" .b",A="#"+p+" .h",B="#"+p+" .s",C="#"+p+" .l",D="#"+p+" .rWrapper .sliderBg",E="#"+p+" .gWrapper .sliderBg",F="#"+p+" .bWrapper .sliderBg",H="#"+p+" .sWrapper .sliderBg",I="#"+p+" .lWrapper .sliderBg",J="#"+p+" .rInput",K="#"+p+" .gInput",L="#"+p+" .bInput",M="#"+p+" .hInput",N="#"+p+" .sInput",O="#"+p+" .lInput",P="#"+p+" .colorPickerWrapper",Q="#"+p+" .colorPickerBg",S="#"+p+" .colorPickerIndicator",T="#"+p+"Icon",U="#"+p+" .swatch",V=this;V.settings={};var W=a(c),X=c;V.init=function(){if(V.settings=a.extend({},e,d),V.rgb=null,V.hsl=null,V.hex=null,W.is("div")?a(X).append('
'):(1==V.settings.modal?a("body").append('
'):a('
').insertAfter(W),a('').insertAfter(W)),null!=V.settings.theme&&a("#"+p).addClass("colorpickle-theme-"+V.settings.theme),W.is("input")&&a(X).keypress(function(){return!1}),1==V.settings.onTop&&a("#"+p).addClass("colorpickleOnTop"),null!=V.settings.width&&a("#"+p).css("width",V.settings.width),1==V.settings.draggable&&(a("#"+p).append('
'),a("#"+p+" .dragHandle").mousedown(function(b){var c=a(this).parent().offset(),d=b.pageX-c.left,e=b.pageY-c.top;a("body").mousemove(function(b){a("#"+p).offset({top:b.pageY-e,left:b.pageX-d})}),a("body").css("cursor","move")}),a("body").mouseup(function(){a("body").off("mousemove"),a("body").css("cursor","default")})),null!=V.settings.hex){i=V.settings.hex;var c=ba(V.settings.hex);V.settings.rgb[0]=c.r,V.settings.rgb[1]=c.g,V.settings.rgb[2]=c.b}Y("r",0,255,V.settings.rgb[0]),Y("g",0,255,V.settings.rgb[1]),Y("b",0,255,V.settings.rgb[2]),Y("h",0,360,50),Y("s",0,100,50),Y("l",0,100,50),null!=V.settings.hsl&&(a(A).val(V.settings.hsl[0]),a(B).val(V.settings.hsl[1]),a(C).val(V.settings.hsl[2]),$()),a("#"+p).append('
'),a(P).append('
'),a(P).append('
'),a(P).append('
'),a("#"+p).append('
'),a("#"+p).append('
'),a("#"+p+" .swatchHex").append('
'),a("#"+p+" .swatchHex").append(''),a("#"+p).append('
'),V.settings.showCancel&&a("#"+p+" .buttonsWrapper").append('"),V.settings.showOk&&a("#"+p+" .buttonsWrapper").append('"),a("#"+p).append('
'),a(x+", "+y+", "+z).bind("touchstart mousedown",function(){a(this).bind("touchmove mousemove",function(){Z()})}),a(A+", "+B+", "+C).bind("touchstart mousedown",function(){a(this).bind("touchmove mousemove",function(){$()})}),a(x+", "+y+", "+z).bind("touchend mouseup mouseout",function(){a(this).unbind("touchmove mousemove")}),a(A+", "+B+", "+C).bind("touchend mouseup mouseout",function(){a(this).unbind("touchmove mousemove")}),a(".colorValue").keyup(function(){var b=a(this).attr("data-sliderId");return isNaN(this.value)?(this.value=a("#"+p+" ."+b).val(),!1):(a("#"+p+" ."+b).val(this.value),"r"==b||"g"==b||"b"==b?Z():"h"!=b&&"s"!=b&&"l"!=b||$(),!0)}),a("#"+p+" .hexValue").keyup(function(){if("#"!=this.value.charAt(0)&&(this.value="#"+this.value),7==this.value.length)if(ba(this.value)){i=this.value;var a=ba(this.value);f=a.r,g=a.g,h=a.b,ia(),Z()}else this.value=i}),a(P).mousedown(function(a){q=!0,ka(a,this)}),a(P).mousemove(function(a){1==q&&ka(a,this)}),a(P).bind("mouseup mouseleave",function(a){q=!1}),a("#"+p+" .okBtn").click(function(){"rgb"==V.settings.mode?W.val("rgb("+f+", "+g+", "+h+")"):"hex"==V.settings.mode?W.val("#"+i):"hsl"==V.settings.mode&&W.val("hsl("+k+", "+l+"%, "+m+"%)"),null!=V.settings.onOk&&V.settings.onOk(),1==V.settings.closeOnOk&&ma(),a(T).css("background-color","#"+i)}),a("#"+p+" .cancelBtn").click(function(){null!=V.settings.onCancel&&V.settings.onCancel(),1==V.settings.closeOnCancel&&ma()}),a(b).scroll(function(){1==V.settings.modal&&0==V.settings.draggable&&na()}),a(b).resize(function(){Z(),1==V.settings.modal&&0==V.settings.draggable&&na()}),1==V.settings.clickToggle&&(W.click(function(){ma()}),a(T).click(function(){ma()})),1==V.settings.modal&&(na(),a("body").append('
')),0==V.settings.showSwatch&&a(U).hide(),V.settings.showSLGradient||a(P).hide(),0==V.settings.rgbSliders&&(a(r).hide(),a(s).hide(),a(t).hide()),0==V.settings.hslSliders&&(a(u).hide(),a(v).hide(),a(w).hide()),0==V.settings.showHex&&a("#"+p+" .hexValue").hide(),(V.settings.showCancel||V.settings.showOk)&&a("#"+p).css("min-height",a("#"+p).height()+a("#"+p+" .buttonsWrapper").height()-parseInt(a("#"+p).css("padding-bottom"))+"px"),Z(),a(T).css("background-color","#"+i),0==V.settings.visible&&a("#"+p).hide(),a.isFunction(V.settings.onInit)&&V.settings.onInit()},V.setRGB=function(b,c,d){a(x).val(b),a(y).val(c),a(z).val(d),Z()},V.setHSL=function(b,c,d){a(A).val(b),a(B).val(c),a(C).val(d),$()},V.setHex=function(b){var c=ba(b);a(x).val(c.r),a(y).val(c.g),a(z).val(c.b),Z()};var Y=function(b,c,d,e){var f=b+"Wrapper",g="";"h"==b?g=" °":"s"!=b&&"l"!=b||(g=" %"),a("#"+p).append('
'),a("#"+p+" ."+f).append(""),a("#"+p+" ."+f).append('
'),a("#"+p+" ."+f).append('
'),a("#"+p+" ."+f).append('')},Z=function(){f=parseInt(a(x).val()),g=parseInt(a(y).val()),h=parseInt(a(z).val()),j=da(f,g,h),k=Math.round(360*j[0]),l=Math.round(100*j[1]),m=Math.round(100*j[2]),_(),ia(),ha(),ja(),la()},$=function(){k=parseInt(a(A).val()),l=parseInt(a(B).val()),m=parseInt(a(C).val());var b=ca(k/360,l/100,m/100);f=Math.round(b[0]),g=Math.round(b[1]),h=Math.round(b[2]),_(),ia(),ha(),ja(),la()},_=function(){i=aa(f,g,h),a(U).css("background-color","#"+i);var b=ca(k/360,1,.5),c=Math.round(b[0]),d=Math.round(b[1]),e=Math.round(b[2]),j=aa(c,d,e);a(Q).css("background-color","#"+j),null!=V.settings.onChange&&null!=V.rgb&&V.hex!="#"+i&&V.settings.onChange(),V.rgb="rgb("+f+","+g+","+h+")",V.hsl="hsl("+k+","+l+","+m+")",V.hex="#"+i},aa=function(b,c,d){var e=[b.toString(16),c.toString(16),d.toString(16)];return a.each(e,function(a,b){1===b.length&&(e[a]="0"+b)}),e.join("")},ba=function(a){var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);return!!b&&{r:parseInt(b[1],16),g:parseInt(b[2],16),b:parseInt(b[3],16)}},ca=function(a,b,c){function g(a,b,c){return c<0&&(c+=1),c>1&&(c-=1),c<1/6?a+6*(b-a)*c:c<.5?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var d,e,f;if(0==b)d=e=f=c;else{var h=c<.5?c*(1+b):c+b-c*b,i=2*c-h;d=g(i,h,a+1/3),e=g(i,h,a),f=g(i,h,a-1/3)}return[255*d,255*e,255*f]},da=function(a,b,c){a/=255,b/=255,c/=255;var f,g,d=Math.max(a,b,c),e=Math.min(a,b,c),h=(d+e)/2;if(d==e)f=g=0;else{var i=d-e;switch(g=h>.5?i/(2-d-e):i/(d+e),d){case a:f=(b-c)/i+(b=1.9" + } +} \ No newline at end of file diff --git a/themes/colorpickle-theme-light.css b/themes/colorpickle-theme-light.css new file mode 100644 index 0000000..ba9ab3b --- /dev/null +++ b/themes/colorpickle-theme-light.css @@ -0,0 +1,30 @@ +.colorpickle-theme-light { + color: #333; + background-color: #eee; + border: 1px solid #ccc; + border-radius: 4px; +} + +.colorpickle-theme-light .colorPickerWrapper { + border-radius: 4px; + overflow: hidden; +} + +.colorpickle-theme-light .sliderBg { + border-radius: 4px; +} + +.colorpickle-theme-light input[type="text"] { + color: #000; + background-color: #fff; + border: 1px solid #ccc; +} + +.colorpickle-theme-light button { + background-color: #2e9ce5; + border-radius: 4px; +} + +.colorpickle-theme-light button:hover { + background-color: #1483cc; +} diff --git a/themes/engineer/colorpickle-theme-engineer.css b/themes/engineer/colorpickle-theme-engineer.css new file mode 100644 index 0000000..cddf23d --- /dev/null +++ b/themes/engineer/colorpickle-theme-engineer.css @@ -0,0 +1,58 @@ +.colorpickle-theme-engineer { + background-color: #535353; + color: #e1e1e1; + border: 1px solid #333; + border-radius: 3px; +} + +.colorpickle-theme-engineer input[type="text"] { + color: #e1e1e1; + background-color: transparent; + border: none; +} + +.colorpickle-theme-engineer button { + background-color: #5f5f5f; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); + color: #e1e1e1; + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset; + border: 1px solid rgba(0, 0, 0, 0.5); + border-radius: 3px; +} + +.colorpickle-theme-engineer button:hover { + background-color: #787878; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%); +} + +.colorpickle-theme-engineer .sliderBg { + border: 1px solid #333; +} + +.colorpickle-theme-engineer .colorPickerWrapper { + border: 1px solid #333; +} + +.colorpickle-theme-engineer .swatch { + border: 1px solid #333; +} + +.colorpickle-theme-engineer input[type=range]::-webkit-slider-thumb { + height: 32px; + width: 11px; + margin-top: -7px; + background-image: url('images/slider-thumb-engineer.png'); +} + +.colorpickle-theme-engineer input[type=range]::-moz-range-thumb { + height: 33px; + width: 11px; + background-image: url('images/slider-thumb-engineer.png'); +} + +.colorpickle-theme-engineer input[type=range]::-ms-thumb { + height: 32px; + width: 11px; + margin-top: -39px; + background-image: url('images/slider-thumb-engineer.png'); +} diff --git a/themes/engineer/images/slider-thumb-engineer.png b/themes/engineer/images/slider-thumb-engineer.png new file mode 100644 index 0000000..65284f2 Binary files /dev/null and b/themes/engineer/images/slider-thumb-engineer.png differ