From 605826ad44acd267332f1e7a10dddd17964f3f5c Mon Sep 17 00:00:00 2001 From: Javi Aguilar Date: Thu, 29 Dec 2016 00:50:53 +0100 Subject: [PATCH] v2.4.0 Lots of bug fixes and improvements (see detailed commit) - Bootstrap is no longer a bower dependency - Fixed some demos and updated docs with new options - Fixed color selectos display problem - Added some useful rules for visibility classes - Is now possible to initialize the plugin using another parent than main window - Fixed cancellation of input change event and colorpicker child element events - New options for setting the fallback color and format (before it was always black and hex) - Fixed click/tap on mobile devices - Other UI fixes and improvements (like saturation disappearing) This fixes #161, fixes #186, fixes #184, fixes #183, fixes #182, closes #180, fixes #178, closes #172, fixes #87, fixes #127, closes #157, fixes #162, fixes #168, closes #153 and fixes #140 . --- .jshintrc | 2 +- bower.json | 3 +- dist/css/bootstrap-colorpicker.css | 28 +- dist/css/bootstrap-colorpicker.css.map | 2 +- dist/css/bootstrap-colorpicker.min.css | 4 +- dist/css/bootstrap-colorpicker.min.css.map | 2 +- dist/js/bootstrap-colorpicker.js | 732 +++++++++++------- dist/js/bootstrap-colorpicker.min.js | 4 +- docs/includes/api.hbs | 17 + .../examples/03_component_options.hbs | 2 +- docs/includes/examples/04_events.hbs | 2 +- docs/includes/examples/08_palette.hbs | 8 +- docs/layout.hbs | 2 +- index.html | 59 +- package.json | 2 +- serve.js | 2 + src/js/colorpicker-color.js | 547 +++++++------ src/js/colorpicker-component.js | 160 ++-- src/js/colorpicker-defaults.js | 6 +- src/js/colorpicker-plugin-wrapper.js | 19 +- src/less/colorpicker.less | 38 +- src/sass/_colorpicker.scss | 74 +- 22 files changed, 1070 insertions(+), 645 deletions(-) diff --git a/.jshintrc b/.jshintrc index dfbc06b6..3ec463e6 100644 --- a/.jshintrc +++ b/.jshintrc @@ -11,7 +11,7 @@ "newcap": true, "noarg": true, "node": true, - "strict": true, + "strict": false, "trailing": true, "undef": true, "predef" : ["define"] diff --git a/bower.json b/bower.json index fa7d9245..9083897f 100644 --- a/bower.json +++ b/bower.json @@ -5,8 +5,7 @@ "dist/js/bootstrap-colorpicker.js" ], "dependencies": { - "jquery": ">=1.10", - "bootstrap": ">=2" + "jquery": ">=1.10" }, "ignore": [ "\\.*", diff --git a/dist/css/bootstrap-colorpicker.css b/dist/css/bootstrap-colorpicker.css index c446ef8e..8ce9666b 100644 --- a/dist/css/bootstrap-colorpicker.css +++ b/dist/css/bootstrap-colorpicker.css @@ -1,5 +1,5 @@ /*! - * Bootstrap Colorpicker v2.3.6 + * Bootstrap Colorpicker v2.4.0 * https://itsjavi.com/bootstrap-colorpicker/ * * Originally written by (c) 2012 Stefan Petre @@ -194,15 +194,6 @@ .colorpicker.colorpicker-horizontal .colorpicker-alpha { background-image: url("../img/bootstrap-colorpicker/alpha-horizontal.png"); } -.colorpicker.colorpicker-hidden { - display: none; -} -.colorpicker.colorpicker-visible { - display: block; -} -.colorpicker-inline.colorpicker-visible { - display: inline-block; -} .colorpicker-right:before { left: auto; right: 6px; @@ -219,4 +210,21 @@ border-right: 0; border-left: 0; } +.colorpicker.colorpicker-visible, +.colorpicker-alpha.colorpicker-visible, +.colorpicker-saturation.colorpicker-visible, +.colorpicker-hue.colorpicker-visible, +.colorpicker-selectors.colorpicker-visible { + display: block; +} +.colorpicker.colorpicker-hidden, +.colorpicker-alpha.colorpicker-hidden, +.colorpicker-saturation.colorpicker-hidden, +.colorpicker-hue.colorpicker-hidden, +.colorpicker-selectors.colorpicker-hidden { + display: none; +} +.colorpicker-inline.colorpicker-visible { + display: inline-block; +} /*# sourceMappingURL=bootstrap-colorpicker.css.map */ \ No newline at end of file diff --git a/dist/css/bootstrap-colorpicker.css.map b/dist/css/bootstrap-colorpicker.css.map index af0fc85c..611738de 100644 --- a/dist/css/bootstrap-colorpicker.css.map +++ b/dist/css/bootstrap-colorpicker.css.map @@ -1 +1 @@ -{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":";;;;;;;;;AAqBA;EACE,YAAA;EACA,aAAA;EAXA,sBAAsB,8CAAtB;EAaA,iBAAA;EACA,WAAA;;AALF,uBAME;EACE,cAAA;EACA,WAAA;EACA,UAAA;EACA,sBAAA;EAfF,0BAAA;EACA,uBAAA;EACA,kBAAA;EAeE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,qBAAA;;AAfJ,uBAME,EAUE;EACE,cAAA;EACA,WAAA;EACA,UAAA;EACA,sBAAA;EAzBJ,0BAAA;EACA,uBAAA;EACA,kBAAA;;AA6BF;AACA;EACE,WAAA;EACA,aAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;;AAGF,gBAAiB;AACjB,kBAAmB;EACjB,cAAA;EACA,WAAA;EACA,gBAAA;EACA,0BAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;;AAGF;EA1DE,sBAAsB,uCAAtB;;AA8DF;EA9DE,sBAAsB,yCAAtB;EAgEA,aAAA;;AAGF;AACA;AACA;EACE,wBAAA;;AAGF;EACE,YAAA;EACA,gBAAA;EACA,eAAA;EAxEA,0BAAA;EACA,uBAAA;EACA,kBAAA;EAwEA,aAAA;;AAGF,YAAY;AACZ,YAAY;EACV,cAAA;EACA,SAAS,EAAT;EACA,cAAA;;AAGF,YAAY;EACV,WAAA;;AAGF,YAAY;EACV,SAAS,EAAT;EACA,qBAAA;EACA,kCAAA;EACA,mCAAA;EACA,6BAAA;EACA,uCAAA;EACA,kBAAA;EACA,SAAA;EACA,SAAA;;AAGF,YAAY;EACV,SAAS,EAAT;EACA,qBAAA;EACA,kCAAA;EACA,mCAAA;EACA,gCAAA;EACA,kBAAA;EACA,SAAA;EACA,SAAA;;AAGF,YAAa;EACX,kBAAA;;AAGF,YAAY;EACV,gBAAA;;AAGF,YAAY,uBAAwB;EAClC,cAAA;;AAGF;EACE,YAAA;EACA,eAAA;EACA,WAAA;EAlIA,sBAAsB,yCAAtB;EAoIA,2BAAA;;AAGF,kBAAmB;EACjB,YAAA;;AAGF;EACE,aAAA;EACA,YAAA;EACA,eAAA;EACA,WAAA;;AAGF,sBAAuB;EACrB,eAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;;AAGF,sBAAuB,EAAE;EACvB,gBAAA;;AAGF,oBAAqB,mBAAmB;AACxC,oBAAqB,QAAQ;EAC3B,qBAAA;EACA,eAAA;EACA,YAAA;EACA,wBAAA;EACA,WAAA;;AAGF,YAAY;EACV,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,aAAA;;AAGF,YAAY;EACV,YAAA;EACA,gBAAA;EACA,YAAA;;AAGF,YAAY,uBAAwB;EAClC,kBAAA;;AAGF,YAAY,uBAAwB;EAClC,YAAA;;AAGF,YAAY,uBAAwB;AACpC,YAAY,uBAAwB;EAClC,YAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;;AAGF,YAAY,uBAAwB,iBAAiB;AACrD,YAAY,uBAAwB,mBAAmB;EACrD,cAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,YAAA;EACA,eAAA;;AAGF,YAAY,uBAAwB;EAlNlC,sBAAsB,kDAAtB;;AAsNF,YAAY,uBAAwB;EAtNlC,sBAAsB,oDAAtB;;AA0NF,YAAY;EACV,aAAA;;AAGF,YAAY;EACV,cAAA;;AAGF,mBAAmB;EACjB,qBAAA;;AAGF,kBAAkB;EAChB,UAAA;EACA,UAAA;;AAGF,kBAAkB;EAChB,UAAA;EACA,UAAA;;AAGF,qBAAqB;EACnB,eAAA;EACA,cAAA;;AAGF,qBAAqB;EACnB,eAAA;EACA,cAAA","sourcesContent":["/*!\n * Bootstrap Colorpicker v2.3.6\n * https://itsjavi.com/bootstrap-colorpicker/\n *\n * Originally written by (c) 2012 Stefan Petre\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0.txt\n *\n */\n@imgPath: \"../img/bootstrap-colorpicker/\";\n\n.bgImg(@imgFilename) {\n background-image: url(\"@{imgPath}@{imgFilename}\");\n}\n\n.borderRadius(@size) {\n -webkit-border-radius: @size;\n -moz-border-radius: @size;\n border-radius: @size;\n}\n\n.colorpicker-saturation {\n width: 100px;\n height: 100px;\n .bgImg('saturation.png');\n cursor: crosshair;\n float: left;\n i {\n display: block;\n height: 5px;\n width: 5px;\n border: 1px solid #000;\n .borderRadius(5px);\n position: absolute;\n top: 0;\n left: 0;\n margin: -4px 0 0 -4px;\n b {\n display: block;\n height: 5px;\n width: 5px;\n border: 1px solid #fff;\n .borderRadius(5px);\n }\n }\n}\n\n.colorpicker-hue,\n.colorpicker-alpha {\n width: 15px;\n height: 100px;\n float: left;\n cursor: row-resize;\n margin-left: 4px;\n margin-bottom: 4px;\n}\n\n.colorpicker-hue i,\n.colorpicker-alpha i {\n display: block;\n height: 1px;\n background: #000;\n border-top: 1px solid #fff;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n margin-top: -1px;\n}\n\n.colorpicker-hue {\n .bgImg('hue.png');\n}\n\n.colorpicker-alpha {\n .bgImg('alpha.png');\n display: none;\n}\n\n.colorpicker-saturation,\n.colorpicker-hue,\n.colorpicker-alpha {\n background-size: contain;\n}\n\n.colorpicker {\n padding: 4px;\n min-width: 130px;\n margin-top: 1px;\n .borderRadius(4px);\n z-index: 2500;\n}\n\n.colorpicker:before,\n.colorpicker:after {\n display: table;\n content: \"\";\n line-height: 0;\n}\n\n.colorpicker:after {\n clear: both;\n}\n\n.colorpicker:before {\n content: '';\n display: inline-block;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-bottom: 7px solid #ccc;\n border-bottom-color: rgba(0, 0, 0, 0.2);\n position: absolute;\n top: -7px;\n left: 6px;\n}\n\n.colorpicker:after {\n content: '';\n display: inline-block;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid #ffffff;\n position: absolute;\n top: -6px;\n left: 7px;\n}\n\n.colorpicker div {\n position: relative;\n}\n\n.colorpicker.colorpicker-with-alpha {\n min-width: 140px;\n}\n\n.colorpicker.colorpicker-with-alpha .colorpicker-alpha {\n display: block;\n}\n\n.colorpicker-color {\n height: 10px;\n margin-top: 5px;\n clear: both;\n .bgImg('alpha.png');\n background-position: 0 100%;\n}\n\n.colorpicker-color div {\n height: 10px;\n}\n\n.colorpicker-selectors {\n display: none;\n height: 10px;\n margin-top: 5px;\n clear: both;\n}\n\n.colorpicker-selectors i {\n cursor: pointer;\n float: left;\n height: 10px;\n width: 10px;\n}\n\n.colorpicker-selectors i + i {\n margin-left: 3px;\n}\n\n.colorpicker-element .input-group-addon i,\n.colorpicker-element .add-on i {\n display: inline-block;\n cursor: pointer;\n height: 16px;\n vertical-align: text-top;\n width: 16px;\n}\n\n.colorpicker.colorpicker-inline {\n position: relative;\n display: inline-block;\n float: none;\n z-index: auto;\n}\n\n.colorpicker.colorpicker-horizontal {\n width: 110px;\n min-width: 110px;\n height: auto;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-saturation {\n margin-bottom: 4px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-color {\n width: 100px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n width: 100px;\n height: 15px;\n float: left;\n cursor: col-resize;\n margin-left: 0px;\n margin-bottom: 4px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue i,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha i {\n display: block;\n height: 15px;\n background: #ffffff;\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n border: none;\n margin-top: 0px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue {\n .bgImg('hue-horizontal.png');\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n .bgImg('alpha-horizontal.png');\n}\n\n.colorpicker.colorpicker-hidden {\n display: none;\n}\n\n.colorpicker.colorpicker-visible {\n display: block;\n}\n\n.colorpicker-inline.colorpicker-visible {\n display: inline-block;\n}\n\n.colorpicker-right:before {\n left: auto;\n right: 6px;\n}\n\n.colorpicker-right:after {\n left: auto;\n right: 7px;\n}\n\n.colorpicker-no-arrow:before {\n border-right: 0;\n border-left: 0;\n}\n\n.colorpicker-no-arrow:after {\n border-right: 0;\n border-left: 0;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":";;;;;;;;;AAqBA;EACE,YAAA;EACA,aAAA;EAXA,sBAAsB,8CAAtB;EAaA,iBAAA;EACA,WAAA;;AALF,uBAME;EACE,cAAA;EACA,WAAA;EACA,UAAA;EACA,sBAAA;EAfF,0BAAA;EACA,uBAAA;EACA,kBAAA;EAeE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,qBAAA;;AAfJ,uBAME,EAUE;EACE,cAAA;EACA,WAAA;EACA,UAAA;EACA,sBAAA;EAzBJ,0BAAA;EACA,uBAAA;EACA,kBAAA;;AA6BF;AACA;EACE,WAAA;EACA,aAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;;AAGF,gBAAiB;AACjB,kBAAmB;EACjB,cAAA;EACA,WAAA;EACA,gBAAA;EACA,0BAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,gBAAA;;AAGF;EA1DE,sBAAsB,uCAAtB;;AA8DF;EA9DE,sBAAsB,yCAAtB;EAgEA,aAAA;;AAGF;AACA;AACA;EACE,wBAAA;;AAGF;EACE,YAAA;EACA,gBAAA;EACA,eAAA;EAxEA,0BAAA;EACA,uBAAA;EACA,kBAAA;EAwEA,aAAA;;AAGF,YAAY;AACZ,YAAY;EACV,cAAA;EACA,SAAS,EAAT;EACA,cAAA;;AAGF,YAAY;EACV,WAAA;;AAGF,YAAY;EACV,SAAS,EAAT;EACA,qBAAA;EACA,kCAAA;EACA,mCAAA;EACA,6BAAA;EACA,uCAAA;EACA,kBAAA;EACA,SAAA;EACA,SAAA;;AAGF,YAAY;EACV,SAAS,EAAT;EACA,qBAAA;EACA,kCAAA;EACA,mCAAA;EACA,gCAAA;EACA,kBAAA;EACA,SAAA;EACA,SAAA;;AAGF,YAAa;EACX,kBAAA;;AAGF,YAAY;EACV,gBAAA;;AAGF,YAAY,uBAAwB;EAClC,cAAA;;AAGF;EACE,YAAA;EACA,eAAA;EACA,WAAA;EAlIA,sBAAsB,yCAAtB;EAoIA,2BAAA;;AAGF,kBAAmB;EACjB,YAAA;;AAGF;EACE,aAAA;EACA,YAAA;EACA,eAAA;EACA,WAAA;;AAGF,sBAAuB;EACrB,eAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;;AAGF,sBAAuB,EAAE;EACvB,gBAAA;;AAGF,oBAAqB,mBAAmB;AACxC,oBAAqB,QAAQ;EAC3B,qBAAA;EACA,eAAA;EACA,YAAA;EACA,wBAAA;EACA,WAAA;;AAGF,YAAY;EACV,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,aAAA;;AAGF,YAAY;EACV,YAAA;EACA,gBAAA;EACA,YAAA;;AAGF,YAAY,uBAAwB;EAClC,kBAAA;;AAGF,YAAY,uBAAwB;EAClC,YAAA;;AAGF,YAAY,uBAAwB;AACpC,YAAY,uBAAwB;EAClC,YAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;;AAGF,YAAY,uBAAwB,iBAAiB;AACrD,YAAY,uBAAwB,mBAAmB;EACrD,cAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,YAAA;EACA,eAAA;;AAGF,YAAY,uBAAwB;EAlNlC,sBAAsB,kDAAtB;;AAsNF,YAAY,uBAAwB;EAtNlC,sBAAsB,oDAAtB;;AA0NF,kBAAkB;EAChB,UAAA;EACA,UAAA;;AAGF,kBAAkB;EAChB,UAAA;EACA,UAAA;;AAGF,qBAAqB;EACnB,eAAA;EACA,cAAA;;AAGF,qBAAqB;EACnB,eAAA;EACA,cAAA;;AAQA,YAAC;AAAD,kBAAC;AAAD,uBAAC;AAAD,gBAAC;AAAD,sBAAC;EACC,cAAA;;AASF,YAAC;AAAD,kBAAC;AAAD,uBAAC;AAAD,gBAAC;AAAD,sBAAC;EACC,aAAA;;AAIJ,mBAAmB;EACjB,qBAAA","sourcesContent":["/*!\n * Bootstrap Colorpicker v2.4.0\n * https://itsjavi.com/bootstrap-colorpicker/\n *\n * Originally written by (c) 2012 Stefan Petre\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0.txt\n *\n */\n@imgPath: \"../img/bootstrap-colorpicker/\";\n\n.bgImg(@imgFilename) {\n background-image: url(\"@{imgPath}@{imgFilename}\");\n}\n\n.borderRadius(@size) {\n -webkit-border-radius: @size;\n -moz-border-radius: @size;\n border-radius: @size;\n}\n\n.colorpicker-saturation {\n width: 100px;\n height: 100px;\n .bgImg('saturation.png');\n cursor: crosshair;\n float: left;\n i {\n display: block;\n height: 5px;\n width: 5px;\n border: 1px solid #000;\n .borderRadius(5px);\n position: absolute;\n top: 0;\n left: 0;\n margin: -4px 0 0 -4px;\n b {\n display: block;\n height: 5px;\n width: 5px;\n border: 1px solid #fff;\n .borderRadius(5px);\n }\n }\n}\n\n.colorpicker-hue,\n.colorpicker-alpha {\n width: 15px;\n height: 100px;\n float: left;\n cursor: row-resize;\n margin-left: 4px;\n margin-bottom: 4px;\n}\n\n.colorpicker-hue i,\n.colorpicker-alpha i {\n display: block;\n height: 1px;\n background: #000;\n border-top: 1px solid #fff;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n margin-top: -1px;\n}\n\n.colorpicker-hue {\n .bgImg('hue.png');\n}\n\n.colorpicker-alpha {\n .bgImg('alpha.png');\n display: none;\n}\n\n.colorpicker-saturation,\n.colorpicker-hue,\n.colorpicker-alpha {\n background-size: contain;\n}\n\n.colorpicker {\n padding: 4px;\n min-width: 130px;\n margin-top: 1px;\n .borderRadius(4px);\n z-index: 2500;\n}\n\n.colorpicker:before,\n.colorpicker:after {\n display: table;\n content: \"\";\n line-height: 0;\n}\n\n.colorpicker:after {\n clear: both;\n}\n\n.colorpicker:before {\n content: '';\n display: inline-block;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-bottom: 7px solid #ccc;\n border-bottom-color: rgba(0, 0, 0, 0.2);\n position: absolute;\n top: -7px;\n left: 6px;\n}\n\n.colorpicker:after {\n content: '';\n display: inline-block;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid #ffffff;\n position: absolute;\n top: -6px;\n left: 7px;\n}\n\n.colorpicker div {\n position: relative;\n}\n\n.colorpicker.colorpicker-with-alpha {\n min-width: 140px;\n}\n\n.colorpicker.colorpicker-with-alpha .colorpicker-alpha {\n display: block;\n}\n\n.colorpicker-color {\n height: 10px;\n margin-top: 5px;\n clear: both;\n .bgImg('alpha.png');\n background-position: 0 100%;\n}\n\n.colorpicker-color div {\n height: 10px;\n}\n\n.colorpicker-selectors {\n display: none;\n height: 10px;\n margin-top: 5px;\n clear: both;\n}\n\n.colorpicker-selectors i {\n cursor: pointer;\n float: left;\n height: 10px;\n width: 10px;\n}\n\n.colorpicker-selectors i + i {\n margin-left: 3px;\n}\n\n.colorpicker-element .input-group-addon i,\n.colorpicker-element .add-on i {\n display: inline-block;\n cursor: pointer;\n height: 16px;\n vertical-align: text-top;\n width: 16px;\n}\n\n.colorpicker.colorpicker-inline {\n position: relative;\n display: inline-block;\n float: none;\n z-index: auto;\n}\n\n.colorpicker.colorpicker-horizontal {\n width: 110px;\n min-width: 110px;\n height: auto;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-saturation {\n margin-bottom: 4px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-color {\n width: 100px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n width: 100px;\n height: 15px;\n float: left;\n cursor: col-resize;\n margin-left: 0px;\n margin-bottom: 4px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue i,\n.colorpicker.colorpicker-horizontal .colorpicker-alpha i {\n display: block;\n height: 15px;\n background: #ffffff;\n position: absolute;\n top: 0;\n left: 0;\n width: 1px;\n border: none;\n margin-top: 0px;\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-hue {\n .bgImg('hue-horizontal.png');\n}\n\n.colorpicker.colorpicker-horizontal .colorpicker-alpha {\n .bgImg('alpha-horizontal.png');\n}\n\n.colorpicker-right:before {\n left: auto;\n right: 6px;\n}\n\n.colorpicker-right:after {\n left: auto;\n right: 7px;\n}\n\n.colorpicker-no-arrow:before {\n border-right: 0;\n border-left: 0;\n}\n\n.colorpicker-no-arrow:after {\n border-right: 0;\n border-left: 0;\n}\n\n.colorpicker,\n.colorpicker-alpha,\n.colorpicker-saturation,\n.colorpicker-hue,\n.colorpicker-selectors {\n &.colorpicker-visible {\n display: block;\n }\n}\n\n.colorpicker,\n.colorpicker-alpha,\n.colorpicker-saturation,\n.colorpicker-hue,\n.colorpicker-selectors {\n &.colorpicker-hidden {\n display: none;\n }\n}\n\n.colorpicker-inline.colorpicker-visible {\n display: inline-block;\n}\n"]} \ No newline at end of file diff --git a/dist/css/bootstrap-colorpicker.min.css b/dist/css/bootstrap-colorpicker.min.css index d1597b97..9520f06c 100644 --- a/dist/css/bootstrap-colorpicker.min.css +++ b/dist/css/bootstrap-colorpicker.min.css @@ -1,10 +1,10 @@ /*! - * Bootstrap Colorpicker v2.3.6 + * Bootstrap Colorpicker v2.4.0 * https://itsjavi.com/bootstrap-colorpicker/ * * Originally written by (c) 2012 Stefan Petre * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0.txt * - */.colorpicker-saturation{width:100px;height:100px;background-image:url(../img/bootstrap-colorpicker/saturation.png);cursor:crosshair;float:left}.colorpicker-saturation i{display:block;height:5px;width:5px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;top:0;left:0;margin:-4px 0 0 -4px}.colorpicker-saturation i b{display:block;height:5px;width:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-alpha,.colorpicker-hue{width:15px;height:100px;float:left;cursor:row-resize;margin-left:4px;margin-bottom:4px}.colorpicker-alpha i,.colorpicker-hue i{display:block;height:1px;background:#000;border-top:1px solid #fff;position:absolute;top:0;left:0;width:100%;margin-top:-1px}.colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue.png)}.colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha.png);display:none}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{background-size:contain}.colorpicker{padding:4px;min-width:130px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;z-index:2500}.colorpicker:after,.colorpicker:before{display:table;content:"";line-height:0}.colorpicker:after{clear:both}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url(../img/bootstrap-colorpicker/alpha.png);background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-selectors{display:none;height:10px;margin-top:5px;clear:both}.colorpicker-selectors i{cursor:pointer;float:left;height:10px;width:10px}.colorpicker-selectors i+i{margin-left:3px}.colorpicker-element .add-on i,.colorpicker-element .input-group-addon i{display:inline-block;cursor:pointer;height:16px;vertical-align:text-top;width:16px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none;z-index:auto}.colorpicker.colorpicker-horizontal{width:110px;min-width:110px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{width:100px;height:15px;float:left;cursor:col-resize;margin-left:0;margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-alpha i,.colorpicker.colorpicker-horizontal .colorpicker-hue i{display:block;height:15px;background:#fff;position:absolute;top:0;left:0;width:1px;border:none;margin-top:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue-horizontal.png)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha-horizontal.png)}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}.colorpicker-right:before{left:auto;right:6px}.colorpicker-right:after{left:auto;right:7px}.colorpicker-no-arrow:before{border-right:0;border-left:0}.colorpicker-no-arrow:after{border-right:0;border-left:0} + */.colorpicker-saturation{width:100px;height:100px;background-image:url(../img/bootstrap-colorpicker/saturation.png);cursor:crosshair;float:left}.colorpicker-saturation i{display:block;height:5px;width:5px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;top:0;left:0;margin:-4px 0 0 -4px}.colorpicker-saturation i b{display:block;height:5px;width:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-alpha,.colorpicker-hue{width:15px;height:100px;float:left;cursor:row-resize;margin-left:4px;margin-bottom:4px}.colorpicker-alpha i,.colorpicker-hue i{display:block;height:1px;background:#000;border-top:1px solid #fff;position:absolute;top:0;left:0;width:100%;margin-top:-1px}.colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue.png)}.colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha.png);display:none}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{background-size:contain}.colorpicker{padding:4px;min-width:130px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;z-index:2500}.colorpicker:after,.colorpicker:before{display:table;content:"";line-height:0}.colorpicker:after{clear:both}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url(../img/bootstrap-colorpicker/alpha.png);background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-selectors{display:none;height:10px;margin-top:5px;clear:both}.colorpicker-selectors i{cursor:pointer;float:left;height:10px;width:10px}.colorpicker-selectors i+i{margin-left:3px}.colorpicker-element .add-on i,.colorpicker-element .input-group-addon i{display:inline-block;cursor:pointer;height:16px;vertical-align:text-top;width:16px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none;z-index:auto}.colorpicker.colorpicker-horizontal{width:110px;min-width:110px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{width:100px;height:15px;float:left;cursor:col-resize;margin-left:0;margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-alpha i,.colorpicker.colorpicker-horizontal .colorpicker-hue i{display:block;height:15px;background:#fff;position:absolute;top:0;left:0;width:1px;border:none;margin-top:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url(../img/bootstrap-colorpicker/hue-horizontal.png)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url(../img/bootstrap-colorpicker/alpha-horizontal.png)}.colorpicker-right:before{left:auto;right:6px}.colorpicker-right:after{left:auto;right:7px}.colorpicker-no-arrow:before{border-right:0;border-left:0}.colorpicker-no-arrow:after{border-right:0;border-left:0}.colorpicker-alpha.colorpicker-visible,.colorpicker-hue.colorpicker-visible,.colorpicker-saturation.colorpicker-visible,.colorpicker-selectors.colorpicker-visible,.colorpicker.colorpicker-visible{display:block}.colorpicker-alpha.colorpicker-hidden,.colorpicker-hue.colorpicker-hidden,.colorpicker-saturation.colorpicker-hidden,.colorpicker-selectors.colorpicker-hidden,.colorpicker.colorpicker-hidden{display:none}.colorpicker-inline.colorpicker-visible{display:inline-block} /*# sourceMappingURL=bootstrap-colorpicker.min.css.map */ \ No newline at end of file diff --git a/dist/css/bootstrap-colorpicker.min.css.map b/dist/css/bootstrap-colorpicker.min.css.map index f13e5078..b77b498a 100644 --- a/dist/css/bootstrap-colorpicker.min.css.map +++ b/dist/css/bootstrap-colorpicker.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["dist/css/bootstrap-colorpicker.css","src/less/colorpicker.less"],"names":[],"mappings":";;;;;;;;AACA,wBACE,MAAO,MACP,OAAQ,MACR,iBAAkB,iDAClB,OAAQ,UACR,MAAO,KAET,0BCaE,QAAS,MACT,OAAA,IACA,MAAA,IAXA,OAAA,IAAA,MAAA,KAaA,sBAAA,IACA,mBAAA,IDXA,cAAe,ICMf,SAAU,SAOR,IAAA,EACA,KAAA,EACA,OAAA,KAAA,EAAA,EAAA,KAdF,4BACA,QAAA,MACA,OAAA,IAeE,MAAA,IACA,OAAA,IAAA,MAAA,KACA,sBAAA,IACA,mBAAA,IDRF,cAAe,ICWX,mBADA,iBAEA,MAAA,KACA,OAAA,MAzBJ,MAAA,KACA,OAAA,WACA,YAAA,IDmBA,cAAe,ICYf,qBADF,mBAEE,QAAA,MACA,OAAA,IACA,WAAA,KACA,WAAA,IAAA,MAAA,KACA,SAAA,SDRA,IAAK,ECWL,KAAM,EACN,MAAO,KACP,WAAA,KAEA,iBACA,iBAAA,0CAEA,mBACA,iBAAA,4CACA,QAAA,KAtDA,mBA0DF,iBDZA,wBAGE,gBAAiB,QCjDjB,aAgEA,QAAA,IDXA,UAAW,MCcX,WAAY,IACZ,sBAAuB,IACvB,mBAAoB,IACpB,cAAA,IDZA,QAAS,KCiBT,mBADA,oBAEA,QAAA,MAxEA,QAAA,GACA,YAAA,EAyEA,mBDXA,MAAO,KCeG,oBACV,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YDZA,aAAc,IAAI,MAAM,YCed,cAAA,IAAA,MAAA,KACV,oBAAA,eDbA,SAAU,SCgBV,IAAK,KACL,KAAA,IAEA,mBACA,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,SAAA,SDdA,IAAK,KCiBL,KAAM,IAEN,iBACA,SAAA,SAEA,oCACA,UAAA,MAEA,uDDfA,QAAS,MCmBT,mBDhBA,OAAQ,KCmBR,WAAU,IACV,MAAA,KDjBA,iBAAkB,4CCoBR,oBAAA,EAAA,KDjBZ,uBCqBE,OAAQ,KAER,uBACA,QAAA,KAlIA,OAAA,KAoIA,WAAA,IDnBA,MAAO,KCuBP,yBDpBA,OAAQ,QCuBR,MAAO,KACP,OAAA,KACA,MAAA,KAEA,2BDrBA,YAAa,IC0Bb,+BADA,0CAEA,QAAA,aACA,OAAA,QDtBA,OAAQ,KCyBR,eAAuB,SACvB,MAAA,KAGmB,gCACnB,SAAU,SACV,QAAA,aACA,MAAA,KACA,QAAA,KAEA,oCDxBA,MAAO,MC2BP,UAAU,MACV,OAAA,KAEA,4DACA,cAAA,IAGU,uDACV,MAAA,MAEA,uDAAA,qDAGA,MAAU,MACV,OAAA,KD3BA,MAAO,KC8BP,OAAU,WACV,YAAA,ED5BA,cAAe,ICiCf,yDADkC,uDAElC,QAAA,MACA,OAAA,KACA,WAAA,KACA,SAAA,SACA,IAAA,ED7BA,KAAM,ECgCN,MAAO,IACP,OAAU,KACV,WAAA,EAEA,qDACA,iBAAA,qDAEA,uDACA,iBAAA,uDAEA,gCD9BA,QAAS,KCjLa,iCDoLtB,QAAS,MCpLa,wCDuLtB,QAAS,aCoCT,0BDjCA,KAAM,KCoCN,MAAO,IDjCT,yBCqCE,KAAM,KACN,MAAA,IAGgB,6BAChB,aAAA,EACA,YAAA,EAGgB,4BAChB,aAAA,EACA,YAAA"} \ No newline at end of file +{"version":3,"sources":["src/less/colorpicker.less"],"names":[],"mappings":";;;;;;;;AAqBA,wBACE,MAAA,MACA,OAAA,MAXA,iBAAsB,iDAatB,OAAA,UACA,MAAA,KACA,0BACE,QAAA,MACA,OAAA,IACA,MAAA,IACA,OAAA,IAAA,MAAA,KAfF,sBAAA,IACA,mBAAA,IACA,cAAA,IAeE,SAAA,SACA,IAAA,EACA,KAAA,EACA,OAAA,KAAA,EAAA,EAAA,KACA,4BACE,QAAA,MACA,OAAA,IACA,MAAA,IACA,OAAA,IAAA,MAAA,KAzBJ,sBAAA,IACA,mBAAA,IACA,cAAA,IA8BF,mBADA,iBAEE,MAAA,KACA,OAAA,MACA,MAAA,KACA,OAAA,WACA,YAAA,IACA,cAAA,IAIiB,qBADF,mBAEf,QAAA,MACA,OAAA,IACA,WAAA,KACA,WAAA,IAAA,MAAA,KACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,KACA,WAAA,KAGF,iBA1DE,iBAAsB,0CA8DxB,mBA9DE,iBAAsB,4CAgEtB,QAAA,KAKF,mBADA,iBADA,wBAGE,gBAAA,QAGF,aACE,QAAA,IACA,UAAA,MACA,WAAA,IAxEA,sBAAA,IACA,mBAAA,IACA,cAAA,IAwEA,QAAA,KAIU,mBADA,oBAEV,QAAA,MACA,QAAA,GACA,YAAA,EAGU,mBACV,MAAA,KAGU,oBACV,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,oBAAA,eACA,SAAA,SACA,IAAA,KACA,KAAA,IAGU,mBACV,QAAA,GACA,QAAA,aACA,YAAA,IAAA,MAAA,YACA,aAAA,IAAA,MAAA,YACA,cAAA,IAAA,MAAA,KACA,SAAA,SACA,IAAA,KACA,KAAA,IAGW,iBACX,SAAA,SAGU,oCACV,UAAA,MAGkC,uDAClC,QAAA,MAGF,mBACE,OAAA,KACA,WAAA,IACA,MAAA,KAlIA,iBAAsB,4CAoItB,oBAAA,EAAA,KAGiB,uBACjB,OAAA,KAGF,uBACE,QAAA,KACA,OAAA,KACA,WAAA,IACA,MAAA,KAGqB,yBACrB,OAAA,QACA,MAAA,KACA,OAAA,KACA,MAAA,KAGuB,2BACvB,YAAA,IAI2B,+BADW,0CAEtC,QAAA,aACA,OAAA,QACA,OAAA,KACA,eAAA,SACA,MAAA,KAGU,gCACV,SAAA,SACA,QAAA,aACA,MAAA,KACA,QAAA,KAGU,oCACV,MAAA,MACA,UAAA,MACA,OAAA,KAGkC,4DAClC,cAAA,IAGkC,uDAClC,MAAA,MAIkC,uDADA,qDAElC,MAAA,MACA,OAAA,KACA,MAAA,KACA,OAAA,WACA,YAAA,EACA,cAAA,IAIqD,yDADF,uDAEnD,QAAA,MACA,OAAA,KACA,WAAA,KACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,IACA,OAAA,KACA,WAAA,EAGkC,qDAlNlC,iBAAsB,qDAsNY,uDAtNlC,iBAAsB,uDA0NN,0BAChB,KAAA,KACA,MAAA,IAGgB,yBAChB,KAAA,KACA,MAAA,IAGmB,6BACnB,aAAA,EACA,YAAA,EAGmB,4BACnB,aAAA,EACA,YAAA,EAQC,uCAAA,qCAAA,4CAAA,2CAAA,iCACC,QAAA,MASD,sCAAA,oCAAA,2CAAA,0CAAA,gCACC,QAAA,KAIe,wCACjB,QAAA"} \ No newline at end of file diff --git a/dist/js/bootstrap-colorpicker.js b/dist/js/bootstrap-colorpicker.js index f31007ed..cad9fef6 100644 --- a/dist/js/bootstrap-colorpicker.js +++ b/dist/js/bootstrap-colorpicker.js @@ -1,5 +1,5 @@ /*! - * Bootstrap Colorpicker v2.3.6 + * Bootstrap Colorpicker v2.4.0 * https://itsjavi.com/bootstrap-colorpicker/ * * Originally written by (c) 2012 Stefan Petre @@ -9,196 +9,234 @@ */ (function(factory) { - "use strict"; + var global = (typeof window === 'undefined') ? this : window; + if (typeof exports === 'object') { - module.exports = factory(window.jQuery); + module.exports = factory(global.jQuery, global); } else if (typeof define === 'function' && define.amd) { - define(['jquery'], factory); - } else if (window.jQuery && !window.jQuery.fn.colorpicker) { - factory(window.jQuery); + define(['jquery'], function(jq) { + return factory(jq, global); + }); + } else if (global.jQuery && !global.jQuery.fn.colorpicker) { + factory(global.jQuery, global); } -}(function($) { +}(function(jQuery, window) { 'use strict'; + var $ = jQuery; + /** * Color manipulation helper class * - * @param {Object|String} val - * @param {Object} predefinedColors + * @param {Object|String} [val] + * @param {Object} [predefinedColors] + * @param {String|null} [fallbackColor] + * @param {String|null} [fallbackFormat] * @constructor */ - var Color = function(val, predefinedColors) { - this.value = { - h: 0, - s: 0, - b: 0, - a: 1 - }; + var Color = function(val, predefinedColors, fallbackColor, fallbackFormat) { + this.fallbackValue = fallbackColor ? + ( + fallbackColor && (typeof fallbackColor.h !== 'undefined') ? + fallbackColor : + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + } + ) : + null; + + this.fallbackFormat = fallbackFormat ? fallbackFormat : 'rgba'; + + this.value = this.fallbackValue; + this.origFormat = null; // original string format - if (predefinedColors) { - // We don't want to share aliases across instances so we extend new object - this.colors = $.extend({}, this.colors_lib, predefinedColors); - // Let's keep user defined aliases in separate object - this.user_colors = predefinedColors; - } + + this.predefinedColors = predefinedColors ? predefinedColors : {}; + + // We don't want to share aliases across instances so we extend new object + this.colors = $.extend({}, Color.webColors, this.predefinedColors); + if (val) { - if (val.toLowerCase !== undefined) { - // cast to string - val = val + ''; - this.setColor(val); - } else if (val.h !== undefined) { + if (typeof val.h !== 'undefined') { this.value = val; + } else { + this.setColor(String(val)); } } + + if (!this.value) { + // Initial value is always black if no arguments are passed or val is empty + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + }; + } + }; + + Color.webColors = { // 140 predefined colors from the HTML Colors spec + "aliceblue": "#f0f8ff", + "antiquewhite": "#faebd7", + "aqua": "#00ffff", + "aquamarine": "#7fffd4", + "azure": "#f0ffff", + "beige": "#f5f5dc", + "bisque": "#ffe4c4", + "black": "#000000", + "blanchedalmond": "#ffebcd", + "blue": "#0000ff", + "blueviolet": "#8a2be2", + "brown": "#a52a2a", + "burlywood": "#deb887", + "cadetblue": "#5f9ea0", + "chartreuse": "#7fff00", + "chocolate": "#d2691e", + "coral": "#ff7f50", + "cornflowerblue": "#6495ed", + "cornsilk": "#fff8dc", + "crimson": "#dc143c", + "cyan": "#00ffff", + "darkblue": "#00008b", + "darkcyan": "#008b8b", + "darkgoldenrod": "#b8860b", + "darkgray": "#a9a9a9", + "darkgreen": "#006400", + "darkkhaki": "#bdb76b", + "darkmagenta": "#8b008b", + "darkolivegreen": "#556b2f", + "darkorange": "#ff8c00", + "darkorchid": "#9932cc", + "darkred": "#8b0000", + "darksalmon": "#e9967a", + "darkseagreen": "#8fbc8f", + "darkslateblue": "#483d8b", + "darkslategray": "#2f4f4f", + "darkturquoise": "#00ced1", + "darkviolet": "#9400d3", + "deeppink": "#ff1493", + "deepskyblue": "#00bfff", + "dimgray": "#696969", + "dodgerblue": "#1e90ff", + "firebrick": "#b22222", + "floralwhite": "#fffaf0", + "forestgreen": "#228b22", + "fuchsia": "#ff00ff", + "gainsboro": "#dcdcdc", + "ghostwhite": "#f8f8ff", + "gold": "#ffd700", + "goldenrod": "#daa520", + "gray": "#808080", + "green": "#008000", + "greenyellow": "#adff2f", + "honeydew": "#f0fff0", + "hotpink": "#ff69b4", + "indianred": "#cd5c5c", + "indigo": "#4b0082", + "ivory": "#fffff0", + "khaki": "#f0e68c", + "lavender": "#e6e6fa", + "lavenderblush": "#fff0f5", + "lawngreen": "#7cfc00", + "lemonchiffon": "#fffacd", + "lightblue": "#add8e6", + "lightcoral": "#f08080", + "lightcyan": "#e0ffff", + "lightgoldenrodyellow": "#fafad2", + "lightgrey": "#d3d3d3", + "lightgreen": "#90ee90", + "lightpink": "#ffb6c1", + "lightsalmon": "#ffa07a", + "lightseagreen": "#20b2aa", + "lightskyblue": "#87cefa", + "lightslategray": "#778899", + "lightsteelblue": "#b0c4de", + "lightyellow": "#ffffe0", + "lime": "#00ff00", + "limegreen": "#32cd32", + "linen": "#faf0e6", + "magenta": "#ff00ff", + "maroon": "#800000", + "mediumaquamarine": "#66cdaa", + "mediumblue": "#0000cd", + "mediumorchid": "#ba55d3", + "mediumpurple": "#9370d8", + "mediumseagreen": "#3cb371", + "mediumslateblue": "#7b68ee", + "mediumspringgreen": "#00fa9a", + "mediumturquoise": "#48d1cc", + "mediumvioletred": "#c71585", + "midnightblue": "#191970", + "mintcream": "#f5fffa", + "mistyrose": "#ffe4e1", + "moccasin": "#ffe4b5", + "navajowhite": "#ffdead", + "navy": "#000080", + "oldlace": "#fdf5e6", + "olive": "#808000", + "olivedrab": "#6b8e23", + "orange": "#ffa500", + "orangered": "#ff4500", + "orchid": "#da70d6", + "palegoldenrod": "#eee8aa", + "palegreen": "#98fb98", + "paleturquoise": "#afeeee", + "palevioletred": "#d87093", + "papayawhip": "#ffefd5", + "peachpuff": "#ffdab9", + "peru": "#cd853f", + "pink": "#ffc0cb", + "plum": "#dda0dd", + "powderblue": "#b0e0e6", + "purple": "#800080", + "red": "#ff0000", + "rosybrown": "#bc8f8f", + "royalblue": "#4169e1", + "saddlebrown": "#8b4513", + "salmon": "#fa8072", + "sandybrown": "#f4a460", + "seagreen": "#2e8b57", + "seashell": "#fff5ee", + "sienna": "#a0522d", + "silver": "#c0c0c0", + "skyblue": "#87ceeb", + "slateblue": "#6a5acd", + "slategray": "#708090", + "snow": "#fffafa", + "springgreen": "#00ff7f", + "steelblue": "#4682b4", + "tan": "#d2b48c", + "teal": "#008080", + "thistle": "#d8bfd8", + "tomato": "#ff6347", + "turquoise": "#40e0d0", + "violet": "#ee82ee", + "wheat": "#f5deb3", + "white": "#ffffff", + "whitesmoke": "#f5f5f5", + "yellow": "#ffff00", + "yellowgreen": "#9acd32", + "transparent": "transparent" }; Color.prototype = { constructor: Color, - user_colors: {}, - colors: {}, - // 140 predefined colors from the HTML Colors spec - colors_lib: { - "aliceblue": "#f0f8ff", - "antiquewhite": "#faebd7", - "aqua": "#00ffff", - "aquamarine": "#7fffd4", - "azure": "#f0ffff", - "beige": "#f5f5dc", - "bisque": "#ffe4c4", - "black": "#000000", - "blanchedalmond": "#ffebcd", - "blue": "#0000ff", - "blueviolet": "#8a2be2", - "brown": "#a52a2a", - "burlywood": "#deb887", - "cadetblue": "#5f9ea0", - "chartreuse": "#7fff00", - "chocolate": "#d2691e", - "coral": "#ff7f50", - "cornflowerblue": "#6495ed", - "cornsilk": "#fff8dc", - "crimson": "#dc143c", - "cyan": "#00ffff", - "darkblue": "#00008b", - "darkcyan": "#008b8b", - "darkgoldenrod": "#b8860b", - "darkgray": "#a9a9a9", - "darkgreen": "#006400", - "darkkhaki": "#bdb76b", - "darkmagenta": "#8b008b", - "darkolivegreen": "#556b2f", - "darkorange": "#ff8c00", - "darkorchid": "#9932cc", - "darkred": "#8b0000", - "darksalmon": "#e9967a", - "darkseagreen": "#8fbc8f", - "darkslateblue": "#483d8b", - "darkslategray": "#2f4f4f", - "darkturquoise": "#00ced1", - "darkviolet": "#9400d3", - "deeppink": "#ff1493", - "deepskyblue": "#00bfff", - "dimgray": "#696969", - "dodgerblue": "#1e90ff", - "firebrick": "#b22222", - "floralwhite": "#fffaf0", - "forestgreen": "#228b22", - "fuchsia": "#ff00ff", - "gainsboro": "#dcdcdc", - "ghostwhite": "#f8f8ff", - "gold": "#ffd700", - "goldenrod": "#daa520", - "gray": "#808080", - "green": "#008000", - "greenyellow": "#adff2f", - "honeydew": "#f0fff0", - "hotpink": "#ff69b4", - "indianred": "#cd5c5c", - "indigo": "#4b0082", - "ivory": "#fffff0", - "khaki": "#f0e68c", - "lavender": "#e6e6fa", - "lavenderblush": "#fff0f5", - "lawngreen": "#7cfc00", - "lemonchiffon": "#fffacd", - "lightblue": "#add8e6", - "lightcoral": "#f08080", - "lightcyan": "#e0ffff", - "lightgoldenrodyellow": "#fafad2", - "lightgrey": "#d3d3d3", - "lightgreen": "#90ee90", - "lightpink": "#ffb6c1", - "lightsalmon": "#ffa07a", - "lightseagreen": "#20b2aa", - "lightskyblue": "#87cefa", - "lightslategray": "#778899", - "lightsteelblue": "#b0c4de", - "lightyellow": "#ffffe0", - "lime": "#00ff00", - "limegreen": "#32cd32", - "linen": "#faf0e6", - "magenta": "#ff00ff", - "maroon": "#800000", - "mediumaquamarine": "#66cdaa", - "mediumblue": "#0000cd", - "mediumorchid": "#ba55d3", - "mediumpurple": "#9370d8", - "mediumseagreen": "#3cb371", - "mediumslateblue": "#7b68ee", - "mediumspringgreen": "#00fa9a", - "mediumturquoise": "#48d1cc", - "mediumvioletred": "#c71585", - "midnightblue": "#191970", - "mintcream": "#f5fffa", - "mistyrose": "#ffe4e1", - "moccasin": "#ffe4b5", - "navajowhite": "#ffdead", - "navy": "#000080", - "oldlace": "#fdf5e6", - "olive": "#808000", - "olivedrab": "#6b8e23", - "orange": "#ffa500", - "orangered": "#ff4500", - "orchid": "#da70d6", - "palegoldenrod": "#eee8aa", - "palegreen": "#98fb98", - "paleturquoise": "#afeeee", - "palevioletred": "#d87093", - "papayawhip": "#ffefd5", - "peachpuff": "#ffdab9", - "peru": "#cd853f", - "pink": "#ffc0cb", - "plum": "#dda0dd", - "powderblue": "#b0e0e6", - "purple": "#800080", - "red": "#ff0000", - "rosybrown": "#bc8f8f", - "royalblue": "#4169e1", - "saddlebrown": "#8b4513", - "salmon": "#fa8072", - "sandybrown": "#f4a460", - "seagreen": "#2e8b57", - "seashell": "#fff5ee", - "sienna": "#a0522d", - "silver": "#c0c0c0", - "skyblue": "#87ceeb", - "slateblue": "#6a5acd", - "slategray": "#708090", - "snow": "#fffafa", - "springgreen": "#00ff7f", - "steelblue": "#4682b4", - "tan": "#d2b48c", - "teal": "#008080", - "thistle": "#d8bfd8", - "tomato": "#ff6347", - "turquoise": "#40e0d0", - "violet": "#ee82ee", - "wheat": "#f5deb3", - "white": "#ffffff", - "whitesmoke": "#f5f5f5", - "yellow": "#ffff00", - "yellowgreen": "#9acd32", - "transparent": "transparent" + colors: {}, // merged web and predefined colors + predefinedColors: {}, + /** + * @return {Object} + */ + getValue: function() { + return this.value; + }, + /** + * @param {Object} val + */ + setValue: function(val) { + this.value = val; }, _sanitizeNumber: function(val) { if (typeof val === 'number') { @@ -210,7 +248,7 @@ if (val === '') { return 0; } - if (val.toLowerCase !== undefined) { + if (typeof val.toLowerCase !== 'undefined') { if (val.match(/^\./)) { val = "0" + val; } @@ -219,7 +257,7 @@ return 1; }, isTransparent: function(strVal) { - if (!strVal) { + if (!strVal || !(typeof strVal === 'string' || strVal instanceof String)) { return false; } strVal = strVal.toLowerCase().trim(); @@ -228,7 +266,12 @@ rgbaIsTransparent: function(rgba) { return ((rgba.r === 0) && (rgba.g === 0) && (rgba.b === 0) && (rgba.a === 0)); }, - //parse a string to HSB + // parse a string to HSB + /** + * @protected + * @param {String} strVal + * @returns {boolean} Returns true if it could be parsed, false otherwise + */ setColor: function(strVal) { strVal = strVal.toLowerCase().trim(); if (strVal) { @@ -239,41 +282,26 @@ b: 0, a: 0 }; + return true; } else { - this.value = this.stringToHSB(strVal) || { - h: 0, - s: 0, - b: 0, - a: 1 - }; // if parser fails, defaults to black - } - } - }, - stringToHSB: function(strVal) { - strVal = strVal.toLowerCase(); - var alias; - if (typeof this.colors[strVal] !== 'undefined') { - strVal = this.colors[strVal]; - alias = 'alias'; - } - var that = this, - result = false; - $.each(this.stringParsers, function(i, parser) { - var match = parser.re.exec(strVal), - values = match && parser.parse.apply(that, [match]), - format = alias || parser.format || 'rgba'; - if (values) { - if (format.match(/hsla?/)) { - result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values)); - } else { - result = that.RGBtoHSB.apply(that, values); + var parsedColor = this.parse(strVal); + if (parsedColor) { + this.value = this.value = { + h: parsedColor.h, + s: parsedColor.s, + b: parsedColor.b, + a: parsedColor.a + }; + if (!this.origFormat) { + this.origFormat = parsedColor.format; + } + } else if (this.fallbackValue) { + // if parser fails, defaults to fallbackValue if defined, otherwise the value won't be changed + this.value = this.fallbackValue; } - that.origFormat = format; - return false; } - return true; - }); - return result; + } + return false; }, setHue: function(h) { this.value.h = 1 - h; @@ -288,11 +316,13 @@ this.value.a = Math.round((parseInt((1 - a) * 100, 10) / 100) * 100) / 100; }, toRGB: function(h, s, b, a) { - if (!h) { + if (arguments.length === 0) { h = this.value.h; s = this.value.s; b = this.value.b; + a = this.value.a; } + h *= 360; var R, G, B, X, C; h = (h % 360) / 60; @@ -304,25 +334,37 @@ R += [C, X, 0, 0, X, C][h]; G += [X, C, C, X, 0, 0][h]; B += [0, 0, X, C, C, X][h]; + return { r: Math.round(R * 255), g: Math.round(G * 255), b: Math.round(B * 255), - a: a || this.value.a + a: a }; }, toHex: function(h, s, b, a) { + if (arguments.length === 0) { + h = this.value.h; + s = this.value.s; + b = this.value.b; + a = this.value.a; + } + var rgb = this.toRGB(h, s, b, a); + if (this.rgbaIsTransparent(rgb)) { return 'transparent'; } - return '#' + ((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1); + + return "#" + ((1 << 24) + (parseInt(rgb.r) << 16) + (parseInt(rgb.g) << 8) + parseInt(rgb.b)).toString(16).slice(1); }, toHSL: function(h, s, b, a) { - h = h || this.value.h; - s = s || this.value.s; - b = b || this.value.b; - a = a || this.value.a; + if (arguments.length === 0) { + h = this.value.h; + s = this.value.s; + b = this.value.b; + a = this.value.a; + } var H = h, L = (2 - s) * b, @@ -344,16 +386,14 @@ }; }, toAlias: function(r, g, b, a) { - var rgb = this.toHex(r, g, b, a); - //first check if there is user defined alias - for (var ualias in this.user_colors) { - if (this.user_colors[ualias] === rgb) { - return ualias; - } - } - //if not then iterate through pre-defined colors - for (var alias in this.colors_lib) { - if (this.colors_lib[alias] === rgb) { + var c, rgb = (arguments.length === 0) ? this.toHex() : this.toHex(r, g, b, a); + + // support predef. colors in non-hex format too, as defined in the alias itself + var original = this.origFormat === 'alias' ? rgb : this.toString(this.origFormat, false); + + for (var alias in this.colors) { + c = this.colors[alias].toLowerCase().trim(); + if ((c === rgb) || (c === original)) { return alias; } } @@ -419,9 +459,69 @@ var b = Math.round(this.HueToRGB(p, q, tb) * 255); return [r, g, b, this._sanitizeNumber(a)]; }, - toString: function(format) { - format = format || 'rgba'; + /** + * @param {String} strVal + * @returns {Object} Object containing h,s,b,a,format properties or FALSE if failed to parse + */ + parse: function(strVal) { + if (arguments.length === 0) { + return false; + } + + var that = this, + result = false, + isAlias = (typeof this.colors[strVal] !== 'undefined'), + values, format; + + if (isAlias) { + strVal = this.colors[strVal].toLowerCase().trim(); + } + + $.each(this.stringParsers, function(i, parser) { + var match = parser.re.exec(strVal); + values = match && parser.parse.apply(that, [match]); + if (values) { + result = {}; + format = (isAlias ? 'alias' : (parser.format ? parser.format : that.getValidFallbackFormat())); + if (format.match(/hsla?/)) { + result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values)); + } else { + result = that.RGBtoHSB.apply(that, values); + } + if (result instanceof Object) { + result.format = format; + } + return false; // stop iterating + } + return true; + }); + return result; + }, + getValidFallbackFormat: function() { + var formats = [ + 'rgba', 'rgb', 'hex', 'hsla', 'hsl' + ]; + if (this.origFormat && (formats.indexOf(this.origFormat) !== -1)) { + return this.origFormat; + } + if (this.fallbackFormat && (formats.indexOf(this.fallbackFormat) !== -1)) { + return this.fallbackFormat; + } + + return 'rgba'; // By default, return a format that will not lose the alpha info + }, + /** + * + * @param {string} [format] (default: rgba) + * @param {boolean} [translateAlias] Return real color for pre-defined (non-standard) aliases (default: false) + * @returns {String} + */ + toString: function(format, translateAlias) { + format = format || this.origFormat || this.fallbackFormat; + translateAlias = translateAlias || false; + var c = false; + switch (format) { case 'rgb': { @@ -456,7 +556,19 @@ } break; case 'alias': - return this.toAlias() || this.toHex(); + { + c = this.toAlias(); + + if (c === false) { + return this.toString(this.getValidFallbackFormat()); + } + + if (translateAlias && !(c in Color.webColors) && (c in this.predefinedColors)) { + return this.predefinedColors[c]; + } + + return c; + } default: { return c; @@ -575,6 +687,8 @@ input: 'input', // children input selector container: false, // container selector component: '.add-on, .input-group-addon', // children component selector + fallbackColor: false, // fallback color value. null = keeps current color. + fallbackFormat: 'hex', // fallback color format sliders: { saturation: { maxLeft: 100, @@ -623,8 +737,8 @@ '
' + '', align: 'right', - customClass: null, - colorSelectors: null + customClass: null, // custom class added to the colorpicker element + colorSelectors: null // custom color aliases }; /** @@ -652,7 +766,8 @@ this.input = false; } // Set HSB color - this.color = new Color(this.options.color !== false ? this.options.color : this.getValue(), this.options.colorSelectors); + this.color = this.createColor(this.options.color !== false ? this.options.color : this.getValue()); + this.format = this.options.format !== false ? this.options.format : this.color.origFormat; if (this.options.color !== false) { @@ -661,42 +776,67 @@ } // Setup picker - this.picker = $(this.options.template); + var $picker = this.picker = $(this.options.template); if (this.options.customClass) { - this.picker.addClass(this.options.customClass); + $picker.addClass(this.options.customClass); } if (this.options.inline) { - this.picker.addClass('colorpicker-inline colorpicker-visible'); + $picker.addClass('colorpicker-inline colorpicker-visible'); } else { - this.picker.addClass('colorpicker-hidden'); + $picker.addClass('colorpicker-hidden'); } if (this.options.horizontal) { - this.picker.addClass('colorpicker-horizontal'); + $picker.addClass('colorpicker-horizontal'); } - if (this.format === 'rgba' || this.format === 'hsla' || this.options.format === false) { - this.picker.addClass('colorpicker-with-alpha'); + if ( + (['rgba', 'hsla', 'alias'].indexOf(this.format) !== -1) || + this.options.format === false || + this.getValue() === 'transparent' + ) { + $picker.addClass('colorpicker-with-alpha'); } if (this.options.align === 'right') { - this.picker.addClass('colorpicker-right'); + $picker.addClass('colorpicker-right'); } if (this.options.inline === true) { - this.picker.addClass('colorpicker-no-arrow'); + $picker.addClass('colorpicker-no-arrow'); } if (this.options.colorSelectors) { - var colorpicker = this; - $.each(this.options.colorSelectors, function(name, color) { - var $btn = $('').css('background-color', color).data('class', name); - $btn.click(function() { - colorpicker.setValue($(this).css('background-color')); + var colorpicker = this, + selectorsContainer = colorpicker.picker.find('.colorpicker-selectors'); + + if (selectorsContainer.length > 0) { + $.each(this.options.colorSelectors, function(name, color) { + var $btn = $('') + .addClass('colorpicker-selectors-color') + .css('background-color', color) + .data('class', name).data('alias', name); + + $btn.on('click.colorpicker touchend.colorpicker', function() { + colorpicker.setValue( + colorpicker.format === 'alias' ? $(this).data('alias') : $(this).css('background-color') + ); + }); + selectorsContainer.append($btn); }); - colorpicker.picker.find('.colorpicker-selectors').append($btn); - }); - this.picker.find('.colorpicker-selectors').show(); + selectorsContainer.show().addClass('colorpicker-visible'); + } } - this.picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this)); - this.picker.appendTo(this.container ? this.container : $('body')); - // Bind events + // Prevent closing the colorpicker when clicking on itself + $picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(function(e) { + if (e.target === e.currentTarget) { + e.preventDefault(); + } + }, this)); + + // Bind click/tap events on the sliders + $picker.find('.colorpicker-saturation, .colorpicker-hue, .colorpicker-alpha') + .on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this)); + + $picker.appendTo(this.container ? this.container : $('body')); + + // Bind other events if (this.input !== false) { this.input.on({ 'keyup.colorpicker': $.proxy(this.keyup, this) @@ -765,7 +905,7 @@ if (this.options.inline !== false || this.options.container) { return false; } - var type = this.container && this.container[0] !== document.body ? 'position' : 'offset'; + var type = this.container && this.container[0] !== window.document.body ? 'position' : 'offset'; var element = this.component || this.element; var offset = element[type](); if (this.options.align === 'right') { @@ -778,7 +918,8 @@ }, show: function(e) { if (this.isDisabled()) { - return false; + // Don't show the widget if it's disabled (the input) + return; } this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden'); this.reposition(); @@ -799,10 +940,19 @@ color: this.color }); }, - hide: function() { + hide: function(e) { + if ((typeof e !== 'undefined') && e.target) { + // Prevent hide if triggered by an event and an element inside the colorpicker has been clicked/touched + if ( + $(e.currentTarget).parents('.colorpicker').length > 0 || + $(e.target).parents('.colorpicker').length > 0 + ) { + return false; + } + } this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible'); $(window).off('resize.colorpicker', this.reposition); - $(document).off({ + $(window.document).off({ 'mousedown.colorpicker': this.hide }); this.update(); @@ -812,27 +962,20 @@ }); }, updateData: function(val) { - val = val || this.color.toString(this.format); + val = val || this.color.toString(this.format, false); this.element.data('color', val); return val; }, updateInput: function(val) { - val = val || this.color.toString(this.format); + val = val || this.color.toString(this.format, false); if (this.input !== false) { - if (this.options.colorSelectors) { - var color = new Color(val, this.options.colorSelectors); - var alias = color.toAlias(); - if (typeof this.options.colorSelectors[alias] !== 'undefined') { - val = alias; - } - } this.input.prop('value', val); } return val; }, updatePicker: function(val) { - if (val !== undefined) { - this.color = new Color(val, this.options.colorSelectors); + if (typeof val !== 'undefined') { + this.color = this.createColor(val); } var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz; var icns = this.picker.find('i'); @@ -852,30 +995,41 @@ 'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop, 'left': this.color.value.s * sl.saturation.maxLeft }); - this.picker.find('.colorpicker-saturation').css('backgroundColor', this.color.toHex(this.color.value.h, 1, 1, 1)); - this.picker.find('.colorpicker-alpha').css('backgroundColor', this.color.toHex()); - this.picker.find('.colorpicker-color, .colorpicker-color div').css('backgroundColor', this.color.toString(this.format)); + + this.picker.find('.colorpicker-saturation') + .css('backgroundColor', this.color.toHex(this.color.value.h, 1, 1, 1)); + + this.picker.find('.colorpicker-alpha') + .css('backgroundColor', this.color.toHex()); + + this.picker.find('.colorpicker-color, .colorpicker-color div') + .css('backgroundColor', this.color.toString(this.format, true)); + return val; }, updateComponent: function(val) { - if (val !== undefined) { - val = new Color(val, this.options.colorSelectors); + var color; + + if (typeof val !== 'undefined') { + color = this.createColor(val); } else { - val = this.color; + color = this.color; } + if (this.component !== false) { var icn = this.component.find('i').eq(0); if (icn.length > 0) { icn.css({ - 'backgroundColor': val.toHex() // We always wan it to be valid value + 'backgroundColor': color.toString(this.format, true) }); } else { this.component.css({ - 'backgroundColor': val.toHex() // We always wan it to be valid value + 'backgroundColor': color.toString(this.format, true) }); } } - return val.toString(this.format); + + return color.toString(this.format, false); }, update: function(force) { var val; @@ -890,7 +1044,7 @@ }, setValue: function(val) { // set color manually - this.color = new Color(val, this.options.colorSelectors); + this.color = this.createColor(val); this.update(true); this.element.trigger({ type: 'changeColor', @@ -898,8 +1052,22 @@ value: val }); }, + /** + * Creates a new color using the instance options + * @protected + * @param {String} val + * @returns {Color} + */ + createColor: function(val) { + return new Color( + val ? val : null, + this.options.colorSelectors, + this.options.fallbackColor ? this.options.fallbackColor : this.color, + this.options.fallbackFormat + ); + }, getValue: function(defaultValue) { - defaultValue = (defaultValue === undefined) ? '#000000' : defaultValue; + defaultValue = (typeof defaultValue === 'undefined') ? this.options.fallbackColor : defaultValue; var val; if (this.hasInput()) { val = this.input.val(); @@ -983,7 +1151,7 @@ top: e.pageY }; //trigger mousemove to move the guide to the current position - $(document).on({ + $(window.document).on({ 'mousemove.colorpicker': $.proxy(this.mousemove, this), 'touchmove.colorpicker': $.proxy(this.mousemove, this), 'mouseup.colorpicker': $.proxy(this.mouseup, this), @@ -1024,7 +1192,11 @@ // Change format dynamically // Only occurs if user choose the dynamic format by // setting option format to false - if (this.currentSlider.callTop === 'setAlpha' && this.options.format === false) { + if ( + this.options.format === false && + (this.currentSlider.callTop === 'setAlpha' || + this.currentSlider.callLeft === 'setAlpha') + ) { // Converting from hex / rgb to rgba if (this.color.value.a !== 1) { @@ -1049,7 +1221,7 @@ mouseup: function(e) { e.stopPropagation(); e.preventDefault(); - $(document).off({ + $(window.document).off({ 'mousemove.colorpicker': this.mousemove, 'touchmove.colorpicker': this.mousemove, 'mouseup.colorpicker': this.mouseup, @@ -1072,7 +1244,7 @@ } this.update(true); } else { - this.color = new Color(this.input.val(), this.options.colorSelectors); + this.color = this.createColor(this.input.val()); // Change format dynamically // Only occurs if user choose the dynamic format by // setting option format to false diff --git a/dist/js/bootstrap-colorpicker.min.js b/dist/js/bootstrap-colorpicker.min.js index 9eabe320..f0237c5e 100644 --- a/dist/js/bootstrap-colorpicker.min.js +++ b/dist/js/bootstrap-colorpicker.min.js @@ -1,5 +1,5 @@ /*! - * Bootstrap Colorpicker v2.3.6 + * Bootstrap Colorpicker v2.4.0 * https://itsjavi.com/bootstrap-colorpicker/ */ -!function(a){"use strict";"object"==typeof exports?module.exports=a(window.jQuery):"function"==typeof define&&define.amd?define(["jquery"],a):window.jQuery&&!window.jQuery.fn.colorpicker&&a(window.jQuery)}(function(a){"use strict";var b=function(b,c){this.value={h:0,s:0,b:0,a:1},this.origFormat=null,c&&(this.colors=a.extend({},this.colors_lib,c),this.user_colors=c),b&&(void 0!==b.toLowerCase?(b+="",this.setColor(b)):void 0!==b.h&&(this.value=b))};b.prototype={constructor:b,user_colors:{},colors:{},colors_lib:{aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32",transparent:"transparent"},_sanitizeNumber:function(a){return"number"==typeof a?a:isNaN(a)||null===a||""===a||void 0===a?1:""===a?0:void 0!==a.toLowerCase?(a.match(/^\./)&&(a="0"+a),Math.ceil(100*parseFloat(a))/100):1},isTransparent:function(a){return!!a&&(a=a.toLowerCase().trim(),"transparent"===a||a.match(/#?00000000/)||a.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/))},rgbaIsTransparent:function(a){return 0===a.r&&0===a.g&&0===a.b&&0===a.a},setColor:function(a){a=a.toLowerCase().trim(),a&&(this.isTransparent(a)?this.value={h:0,s:0,b:0,a:0}:this.value=this.stringToHSB(a)||{h:0,s:0,b:0,a:1})},stringToHSB:function(b){b=b.toLowerCase();var c;"undefined"!=typeof this.colors[b]&&(b=this.colors[b],c="alias");var d=this,e=!1;return a.each(this.stringParsers,function(a,f){var g=f.re.exec(b),h=g&&f.parse.apply(d,[g]),i=c||f.format||"rgba";return!h||(e=i.match(/hsla?/)?d.RGBtoHSB.apply(d,d.HSLtoRGB.apply(d,h)):d.RGBtoHSB.apply(d,h),d.origFormat=i,!1)}),e},setHue:function(a){this.value.h=1-a},setSaturation:function(a){this.value.s=a},setBrightness:function(a){this.value.b=1-a},setAlpha:function(a){this.value.a=Math.round(parseInt(100*(1-a),10)/100*100)/100},toRGB:function(a,b,c,d){a||(a=this.value.h,b=this.value.s,c=this.value.b),a*=360;var e,f,g,h,i;return a=a%360/60,i=c*b,h=i*(1-Math.abs(a%2-1)),e=f=g=c-i,a=~~a,e+=[i,h,0,0,h,i][a],f+=[h,i,i,h,0,0][a],g+=[0,0,h,i,i,h][a],{r:Math.round(255*e),g:Math.round(255*f),b:Math.round(255*g),a:d||this.value.a}},toHex:function(a,b,c,d){var e=this.toRGB(a,b,c,d);return this.rgbaIsTransparent(e)?"transparent":"#"+(1<<24|parseInt(e.r)<<16|parseInt(e.g)<<8|parseInt(e.b)).toString(16).substr(1)},toHSL:function(a,b,c,d){a=a||this.value.h,b=b||this.value.s,c=c||this.value.b,d=d||this.value.a;var e=a,f=(2-b)*c,g=b*c;return g/=f>0&&f<=1?f:2-f,f/=2,g>1&&(g=1),{h:isNaN(e)?0:e,s:isNaN(g)?0:g,l:isNaN(f)?0:f,a:isNaN(d)?0:d}},toAlias:function(a,b,c,d){var e=this.toHex(a,b,c,d);for(var f in this.user_colors)if(this.user_colors[f]===e)return f;for(var g in this.colors_lib)if(this.colors_lib[g]===e)return g;return!1},RGBtoHSB:function(a,b,c,d){a/=255,b/=255,c/=255;var e,f,g,h;return g=Math.max(a,b,c),h=g-Math.min(a,b,c),e=0===h?null:g===a?(b-c)/h:g===b?(c-a)/h+2:(a-b)/h+4,e=(e+360)%6*60/360,f=0===h?0:h/g,{h:this._sanitizeNumber(e),s:f,b:g,a:this._sanitizeNumber(d)}},HueToRGB:function(a,b,c){return c<0?c+=1:c>1&&(c-=1),6*c<1?a+(b-a)*c*6:2*c<1?b:3*c<2?a+(b-a)*(2/3-c)*6:a},HSLtoRGB:function(a,b,c,d){b<0&&(b=0);var e;e=c<=.5?c*(1+b):c+b-c*b;var f=2*c-e,g=a+1/3,h=a,i=a-1/3,j=Math.round(255*this.HueToRGB(f,e,g)),k=Math.round(255*this.HueToRGB(f,e,h)),l=Math.round(255*this.HueToRGB(f,e,i));return[j,k,l,this._sanitizeNumber(d)]},toString:function(a){a=a||"rgba";var b=!1;switch(a){case"rgb":return b=this.toRGB(),this.rgbaIsTransparent(b)?"transparent":"rgb("+b.r+","+b.g+","+b.b+")";case"rgba":return b=this.toRGB(),"rgba("+b.r+","+b.g+","+b.b+","+b.a+")";case"hsl":return b=this.toHSL(),"hsl("+Math.round(360*b.h)+","+Math.round(100*b.s)+"%,"+Math.round(100*b.l)+"%)";case"hsla":return b=this.toHSL(),"hsla("+Math.round(360*b.h)+","+Math.round(100*b.s)+"%,"+Math.round(100*b.l)+"%,"+b.a+")";case"hex":return this.toHex();case"alias":return this.toAlias()||this.toHex();default:return b}},stringParsers:[{re:/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/,format:"rgb",parse:function(a){return[a[1],a[2],a[3],1]}},{re:/rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,format:"rgb",parse:function(a){return[2.55*a[1],2.55*a[2],2.55*a[3],1]}},{re:/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,format:"rgba",parse:function(a){return[a[1],a[2],a[3],a[4]]}},{re:/rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,format:"rgba",parse:function(a){return[2.55*a[1],2.55*a[2],2.55*a[3],a[4]]}},{re:/hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,format:"hsl",parse:function(a){return[a[1]/360,a[2]/100,a[3]/100,a[4]]}},{re:/hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,format:"hsla",parse:function(a){return[a[1]/360,a[2]/100,a[3]/100,a[4]]}},{re:/#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,format:"hex",parse:function(a){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16),1]}},{re:/#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,format:"hex",parse:function(a){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16),1]}}],colorNameToHex:function(a){return"undefined"!=typeof this.colors[a.toLowerCase()]&&this.colors[a.toLowerCase()]}};var c={horizontal:!1,inline:!1,color:!1,format:!1,input:"input",container:!1,component:".add-on, .input-group-addon",sliders:{saturation:{maxLeft:100,maxTop:100,callLeft:"setSaturation",callTop:"setBrightness"},hue:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setHue"},alpha:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setAlpha"}},slidersHorz:{saturation:{maxLeft:100,maxTop:100,callLeft:"setSaturation",callTop:"setBrightness"},hue:{maxLeft:100,maxTop:0,callLeft:"setHue",callTop:!1},alpha:{maxLeft:100,maxTop:0,callLeft:"setAlpha",callTop:!1}},template:'
',align:"right",customClass:null,colorSelectors:null},d=function(d,e){if(this.element=a(d).addClass("colorpicker-element"),this.options=a.extend(!0,{},c,this.element.data(),e),this.component=this.options.component,this.component=this.component!==!1&&this.element.find(this.component),this.component&&0===this.component.length&&(this.component=!1),this.container=this.options.container===!0?this.element:this.options.container,this.container=this.container!==!1&&a(this.container),this.input=this.element.is("input")?this.element:!!this.options.input&&this.element.find(this.options.input),this.input&&0===this.input.length&&(this.input=!1),this.color=new b(this.options.color!==!1?this.options.color:this.getValue(),this.options.colorSelectors),this.format=this.options.format!==!1?this.options.format:this.color.origFormat,this.options.color!==!1&&(this.updateInput(this.color),this.updateData(this.color)),this.picker=a(this.options.template),this.options.customClass&&this.picker.addClass(this.options.customClass),this.options.inline?this.picker.addClass("colorpicker-inline colorpicker-visible"):this.picker.addClass("colorpicker-hidden"),this.options.horizontal&&this.picker.addClass("colorpicker-horizontal"),"rgba"!==this.format&&"hsla"!==this.format&&this.options.format!==!1||this.picker.addClass("colorpicker-with-alpha"),"right"===this.options.align&&this.picker.addClass("colorpicker-right"),this.options.inline===!0&&this.picker.addClass("colorpicker-no-arrow"),this.options.colorSelectors){var f=this;a.each(this.options.colorSelectors,function(b,c){var d=a("").css("background-color",c).data("class",b);d.click(function(){f.setValue(a(this).css("background-color"))}),f.picker.find(".colorpicker-selectors").append(d)}),this.picker.find(".colorpicker-selectors").show()}this.picker.on("mousedown.colorpicker touchstart.colorpicker",a.proxy(this.mousedown,this)),this.picker.appendTo(this.container?this.container:a("body")),this.input!==!1&&(this.input.on({"keyup.colorpicker":a.proxy(this.keyup,this)}),this.input.on({"change.colorpicker":a.proxy(this.change,this)}),this.component===!1&&this.element.on({"focus.colorpicker":a.proxy(this.show,this)}),this.options.inline===!1&&this.element.on({"focusout.colorpicker":a.proxy(this.hide,this)})),this.component!==!1&&this.component.on({"click.colorpicker":a.proxy(this.show,this)}),this.input===!1&&this.component===!1&&this.element.on({"click.colorpicker":a.proxy(this.show,this)}),this.input!==!1&&this.component!==!1&&"color"===this.input.attr("type")&&this.input.on({"click.colorpicker":a.proxy(this.show,this),"focus.colorpicker":a.proxy(this.show,this)}),this.update(),a(a.proxy(function(){this.element.trigger("create")},this))};d.Color=b,d.prototype={constructor:d,destroy:function(){this.picker.remove(),this.element.removeData("colorpicker","color").off(".colorpicker"),this.input!==!1&&this.input.off(".colorpicker"),this.component!==!1&&this.component.off(".colorpicker"),this.element.removeClass("colorpicker-element"),this.element.trigger({type:"destroy"})},reposition:function(){if(this.options.inline!==!1||this.options.container)return!1;var a=this.container&&this.container[0]!==document.body?"position":"offset",b=this.component||this.element,c=b[a]();"right"===this.options.align&&(c.left-=this.picker.outerWidth()-b.outerWidth()),this.picker.css({top:c.top+b.outerHeight(),left:c.left})},show:function(b){return!this.isDisabled()&&(this.picker.addClass("colorpicker-visible").removeClass("colorpicker-hidden"),this.reposition(),a(window).on("resize.colorpicker",a.proxy(this.reposition,this)),!b||this.hasInput()&&"color"!==this.input.attr("type")||b.stopPropagation&&b.preventDefault&&(b.stopPropagation(),b.preventDefault()),!this.component&&this.input||this.options.inline!==!1||a(window.document).on({"mousedown.colorpicker":a.proxy(this.hide,this)}),void this.element.trigger({type:"showPicker",color:this.color}))},hide:function(){this.picker.addClass("colorpicker-hidden").removeClass("colorpicker-visible"),a(window).off("resize.colorpicker",this.reposition),a(document).off({"mousedown.colorpicker":this.hide}),this.update(),this.element.trigger({type:"hidePicker",color:this.color})},updateData:function(a){return a=a||this.color.toString(this.format),this.element.data("color",a),a},updateInput:function(a){if(a=a||this.color.toString(this.format),this.input!==!1){if(this.options.colorSelectors){var c=new b(a,this.options.colorSelectors),d=c.toAlias();"undefined"!=typeof this.options.colorSelectors[d]&&(a=d)}this.input.prop("value",a)}return a},updatePicker:function(a){void 0!==a&&(this.color=new b(a,this.options.colorSelectors));var c=this.options.horizontal===!1?this.options.sliders:this.options.slidersHorz,d=this.picker.find("i");if(0!==d.length)return this.options.horizontal===!1?(c=this.options.sliders,d.eq(1).css("top",c.hue.maxTop*(1-this.color.value.h)).end().eq(2).css("top",c.alpha.maxTop*(1-this.color.value.a))):(c=this.options.slidersHorz,d.eq(1).css("left",c.hue.maxLeft*(1-this.color.value.h)).end().eq(2).css("left",c.alpha.maxLeft*(1-this.color.value.a))),d.eq(0).css({top:c.saturation.maxTop-this.color.value.b*c.saturation.maxTop,left:this.color.value.s*c.saturation.maxLeft}),this.picker.find(".colorpicker-saturation").css("backgroundColor",this.color.toHex(this.color.value.h,1,1,1)),this.picker.find(".colorpicker-alpha").css("backgroundColor",this.color.toHex()),this.picker.find(".colorpicker-color, .colorpicker-color div").css("backgroundColor",this.color.toString(this.format)),a},updateComponent:function(a){if(a=void 0!==a?new b(a,this.options.colorSelectors):this.color,this.component!==!1){var c=this.component.find("i").eq(0);c.length>0?c.css({backgroundColor:a.toHex()}):this.component.css({backgroundColor:a.toHex()})}return a.toString(this.format)},update:function(a){var b;return this.getValue(!1)===!1&&a!==!0||(b=this.updateComponent(),this.updateInput(b),this.updateData(b),this.updatePicker()),b},setValue:function(a){this.color=new b(a,this.options.colorSelectors),this.update(!0),this.element.trigger({type:"changeColor",color:this.color,value:a})},getValue:function(a){a=void 0===a?"#000000":a;var b;return b=this.hasInput()?this.input.val():this.element.data("color"),void 0!==b&&""!==b&&null!==b||(b=a),b},hasInput:function(){return this.input!==!1},isDisabled:function(){return!!this.hasInput()&&this.input.prop("disabled")===!0},disable:function(){return!!this.hasInput()&&(this.input.prop("disabled",!0),this.element.trigger({type:"disable",color:this.color,value:this.getValue()}),!0)},enable:function(){return!!this.hasInput()&&(this.input.prop("disabled",!1),this.element.trigger({type:"enable",color:this.color,value:this.getValue()}),!0)},currentSlider:null,mousePointer:{left:0,top:0},mousedown:function(b){!b.pageX&&!b.pageY&&b.originalEvent&&b.originalEvent.touches&&(b.pageX=b.originalEvent.touches[0].pageX,b.pageY=b.originalEvent.touches[0].pageY),b.stopPropagation(),b.preventDefault();var c=a(b.target),d=c.closest("div"),e=this.options.horizontal?this.options.slidersHorz:this.options.sliders;if(!d.is(".colorpicker")){if(d.is(".colorpicker-saturation"))this.currentSlider=a.extend({},e.saturation);else if(d.is(".colorpicker-hue"))this.currentSlider=a.extend({},e.hue);else{if(!d.is(".colorpicker-alpha"))return!1;this.currentSlider=a.extend({},e.alpha)}var f=d.offset();this.currentSlider.guide=d.find("i")[0].style,this.currentSlider.left=b.pageX-f.left,this.currentSlider.top=b.pageY-f.top,this.mousePointer={left:b.pageX,top:b.pageY},a(document).on({"mousemove.colorpicker":a.proxy(this.mousemove,this),"touchmove.colorpicker":a.proxy(this.mousemove,this),"mouseup.colorpicker":a.proxy(this.mouseup,this),"touchend.colorpicker":a.proxy(this.mouseup,this)}).trigger("mousemove")}return!1},mousemove:function(a){!a.pageX&&!a.pageY&&a.originalEvent&&a.originalEvent.touches&&(a.pageX=a.originalEvent.touches[0].pageX,a.pageY=a.originalEvent.touches[0].pageY),a.stopPropagation(),a.preventDefault();var b=Math.max(0,Math.min(this.currentSlider.maxLeft,this.currentSlider.left+((a.pageX||this.mousePointer.left)-this.mousePointer.left))),c=Math.max(0,Math.min(this.currentSlider.maxTop,this.currentSlider.top+((a.pageY||this.mousePointer.top)-this.mousePointer.top)));return this.currentSlider.guide.left=b+"px",this.currentSlider.guide.top=c+"px",this.currentSlider.callLeft&&this.color[this.currentSlider.callLeft].call(this.color,b/this.currentSlider.maxLeft),this.currentSlider.callTop&&this.color[this.currentSlider.callTop].call(this.color,c/this.currentSlider.maxTop),"setAlpha"===this.currentSlider.callTop&&this.options.format===!1&&(1!==this.color.value.a?(this.format="rgba",this.color.origFormat="rgba"):(this.format="hex",this.color.origFormat="hex")),this.update(!0),this.element.trigger({type:"changeColor",color:this.color}),!1},mouseup:function(b){return b.stopPropagation(),b.preventDefault(),a(document).off({"mousemove.colorpicker":this.mousemove,"touchmove.colorpicker":this.mousemove,"mouseup.colorpicker":this.mouseup,"touchend.colorpicker":this.mouseup}),!1},change:function(a){this.keyup(a)},keyup:function(a){38===a.keyCode?(this.color.value.a<1&&(this.color.value.a=Math.round(100*(this.color.value.a+.01))/100),this.update(!0)):40===a.keyCode?(this.color.value.a>0&&(this.color.value.a=Math.round(100*(this.color.value.a-.01))/100),this.update(!0)):(this.color=new b(this.input.val(),this.options.colorSelectors),this.color.origFormat&&this.options.format===!1&&(this.format=this.color.origFormat),this.getValue(!1)!==!1&&(this.updateData(),this.updateComponent(),this.updatePicker())),this.element.trigger({type:"changeColor",color:this.color,value:this.input.val()})}},a.colorpicker=d,a.fn.colorpicker=function(b){var c=Array.prototype.slice.call(arguments,1),e=1===this.length,f=null,g=this.each(function(){var e=a(this),g=e.data("colorpicker"),h="object"==typeof b?b:{};g||(g=new d(this,h),e.data("colorpicker",g)),"string"==typeof b?a.isFunction(g[b])?f=g[b].apply(g,c):(c.length&&(g[b]=c[0]),f=g[b]):f=e});return e?f:g},a.fn.colorpicker.constructor=d}); \ No newline at end of file +!function(a){var b="undefined"==typeof window?this:window;"object"==typeof exports?module.exports=a(b.jQuery,b):"function"==typeof define&&define.amd?define(["jquery"],function(c){return a(c,b)}):b.jQuery&&!b.jQuery.fn.colorpicker&&a(b.jQuery,b)}(function(a,b){"use strict";var c=a,d=function(a,b,e,f){this.fallbackValue=e?e&&"undefined"!=typeof e.h?e:this.value={h:0,s:0,b:0,a:1}:null,this.fallbackFormat=f?f:"rgba",this.value=this.fallbackValue,this.origFormat=null,this.predefinedColors=b?b:{},this.colors=c.extend({},d.webColors,this.predefinedColors),a&&("undefined"!=typeof a.h?this.value=a:this.setColor(String(a))),this.value||(this.value={h:0,s:0,b:0,a:1})};d.webColors={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32",transparent:"transparent"},d.prototype={constructor:d,colors:{},predefinedColors:{},getValue:function(){return this.value},setValue:function(a){this.value=a},_sanitizeNumber:function(a){return"number"==typeof a?a:isNaN(a)||null===a||""===a||void 0===a?1:""===a?0:"undefined"!=typeof a.toLowerCase?(a.match(/^\./)&&(a="0"+a),Math.ceil(100*parseFloat(a))/100):1},isTransparent:function(a){return!(!a||!("string"==typeof a||a instanceof String))&&(a=a.toLowerCase().trim(),"transparent"===a||a.match(/#?00000000/)||a.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/))},rgbaIsTransparent:function(a){return 0===a.r&&0===a.g&&0===a.b&&0===a.a},setColor:function(a){if(a=a.toLowerCase().trim()){if(this.isTransparent(a))return this.value={h:0,s:0,b:0,a:0},!0;var b=this.parse(a);b?(this.value=this.value={h:b.h,s:b.s,b:b.b,a:b.a},this.origFormat||(this.origFormat=b.format)):this.fallbackValue&&(this.value=this.fallbackValue)}return!1},setHue:function(a){this.value.h=1-a},setSaturation:function(a){this.value.s=a},setBrightness:function(a){this.value.b=1-a},setAlpha:function(a){this.value.a=Math.round(parseInt(100*(1-a),10)/100*100)/100},toRGB:function(a,b,c,d){0===arguments.length&&(a=this.value.h,b=this.value.s,c=this.value.b,d=this.value.a),a*=360;var e,f,g,h,i;return a=a%360/60,i=c*b,h=i*(1-Math.abs(a%2-1)),e=f=g=c-i,a=~~a,e+=[i,h,0,0,h,i][a],f+=[h,i,i,h,0,0][a],g+=[0,0,h,i,i,h][a],{r:Math.round(255*e),g:Math.round(255*f),b:Math.round(255*g),a:d}},toHex:function(a,b,c,d){0===arguments.length&&(a=this.value.h,b=this.value.s,c=this.value.b,d=this.value.a);var e=this.toRGB(a,b,c,d);return this.rgbaIsTransparent(e)?"transparent":"#"+((1<<24)+(parseInt(e.r)<<16)+(parseInt(e.g)<<8)+parseInt(e.b)).toString(16).slice(1)},toHSL:function(a,b,c,d){0===arguments.length&&(a=this.value.h,b=this.value.s,c=this.value.b,d=this.value.a);var e=a,f=(2-b)*c,g=b*c;return g/=f>0&&f<=1?f:2-f,f/=2,g>1&&(g=1),{h:isNaN(e)?0:e,s:isNaN(g)?0:g,l:isNaN(f)?0:f,a:isNaN(d)?0:d}},toAlias:function(a,b,c,d){var e,f=0===arguments.length?this.toHex():this.toHex(a,b,c,d),g="alias"===this.origFormat?f:this.toString(this.origFormat,!1);for(var h in this.colors)if(e=this.colors[h].toLowerCase().trim(),e===f||e===g)return h;return!1},RGBtoHSB:function(a,b,c,d){a/=255,b/=255,c/=255;var e,f,g,h;return g=Math.max(a,b,c),h=g-Math.min(a,b,c),e=0===h?null:g===a?(b-c)/h:g===b?(c-a)/h+2:(a-b)/h+4,e=(e+360)%6*60/360,f=0===h?0:h/g,{h:this._sanitizeNumber(e),s:f,b:g,a:this._sanitizeNumber(d)}},HueToRGB:function(a,b,c){return c<0?c+=1:c>1&&(c-=1),6*c<1?a+(b-a)*c*6:2*c<1?b:3*c<2?a+(b-a)*(2/3-c)*6:a},HSLtoRGB:function(a,b,c,d){b<0&&(b=0);var e;e=c<=.5?c*(1+b):c+b-c*b;var f=2*c-e,g=a+1/3,h=a,i=a-1/3,j=Math.round(255*this.HueToRGB(f,e,g)),k=Math.round(255*this.HueToRGB(f,e,h)),l=Math.round(255*this.HueToRGB(f,e,i));return[j,k,l,this._sanitizeNumber(d)]},parse:function(a){if(0===arguments.length)return!1;var b,d,e=this,f=!1,g="undefined"!=typeof this.colors[a];return g&&(a=this.colors[a].toLowerCase().trim()),c.each(this.stringParsers,function(c,h){var i=h.re.exec(a);return b=i&&h.parse.apply(e,[i]),!b||(f={},d=g?"alias":h.format?h.format:e.getValidFallbackFormat(),f=d.match(/hsla?/)?e.RGBtoHSB.apply(e,e.HSLtoRGB.apply(e,b)):e.RGBtoHSB.apply(e,b),f instanceof Object&&(f.format=d),!1)}),f},getValidFallbackFormat:function(){var a=["rgba","rgb","hex","hsla","hsl"];return this.origFormat&&a.indexOf(this.origFormat)!==-1?this.origFormat:this.fallbackFormat&&a.indexOf(this.fallbackFormat)!==-1?this.fallbackFormat:"rgba"},toString:function(a,b){a=a||this.origFormat||this.fallbackFormat,b=b||!1;var c=!1;switch(a){case"rgb":return c=this.toRGB(),this.rgbaIsTransparent(c)?"transparent":"rgb("+c.r+","+c.g+","+c.b+")";case"rgba":return c=this.toRGB(),"rgba("+c.r+","+c.g+","+c.b+","+c.a+")";case"hsl":return c=this.toHSL(),"hsl("+Math.round(360*c.h)+","+Math.round(100*c.s)+"%,"+Math.round(100*c.l)+"%)";case"hsla":return c=this.toHSL(),"hsla("+Math.round(360*c.h)+","+Math.round(100*c.s)+"%,"+Math.round(100*c.l)+"%,"+c.a+")";case"hex":return this.toHex();case"alias":return c=this.toAlias(),c===!1?this.toString(this.getValidFallbackFormat()):b&&!(c in d.webColors)&&c in this.predefinedColors?this.predefinedColors[c]:c;default:return c}},stringParsers:[{re:/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/,format:"rgb",parse:function(a){return[a[1],a[2],a[3],1]}},{re:/rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,format:"rgb",parse:function(a){return[2.55*a[1],2.55*a[2],2.55*a[3],1]}},{re:/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,format:"rgba",parse:function(a){return[a[1],a[2],a[3],a[4]]}},{re:/rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,format:"rgba",parse:function(a){return[2.55*a[1],2.55*a[2],2.55*a[3],a[4]]}},{re:/hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,format:"hsl",parse:function(a){return[a[1]/360,a[2]/100,a[3]/100,a[4]]}},{re:/hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,format:"hsla",parse:function(a){return[a[1]/360,a[2]/100,a[3]/100,a[4]]}},{re:/#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,format:"hex",parse:function(a){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16),1]}},{re:/#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,format:"hex",parse:function(a){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16),1]}}],colorNameToHex:function(a){return"undefined"!=typeof this.colors[a.toLowerCase()]&&this.colors[a.toLowerCase()]}};var e={horizontal:!1,inline:!1,color:!1,format:!1,input:"input",container:!1,component:".add-on, .input-group-addon",fallbackColor:!1,fallbackFormat:"hex",sliders:{saturation:{maxLeft:100,maxTop:100,callLeft:"setSaturation",callTop:"setBrightness"},hue:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setHue"},alpha:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setAlpha"}},slidersHorz:{saturation:{maxLeft:100,maxTop:100,callLeft:"setSaturation",callTop:"setBrightness"},hue:{maxLeft:100,maxTop:0,callLeft:"setHue",callTop:!1},alpha:{maxLeft:100,maxTop:0,callLeft:"setAlpha",callTop:!1}},template:'
',align:"right",customClass:null,colorSelectors:null},f=function(a,b){this.element=c(a).addClass("colorpicker-element"),this.options=c.extend(!0,{},e,this.element.data(),b),this.component=this.options.component,this.component=this.component!==!1&&this.element.find(this.component),this.component&&0===this.component.length&&(this.component=!1),this.container=this.options.container===!0?this.element:this.options.container,this.container=this.container!==!1&&c(this.container),this.input=this.element.is("input")?this.element:!!this.options.input&&this.element.find(this.options.input),this.input&&0===this.input.length&&(this.input=!1),this.color=this.createColor(this.options.color!==!1?this.options.color:this.getValue()),this.format=this.options.format!==!1?this.options.format:this.color.origFormat,this.options.color!==!1&&(this.updateInput(this.color),this.updateData(this.color));var d=this.picker=c(this.options.template);if(this.options.customClass&&d.addClass(this.options.customClass),this.options.inline?d.addClass("colorpicker-inline colorpicker-visible"):d.addClass("colorpicker-hidden"),this.options.horizontal&&d.addClass("colorpicker-horizontal"),["rgba","hsla","alias"].indexOf(this.format)===-1&&this.options.format!==!1&&"transparent"!==this.getValue()||d.addClass("colorpicker-with-alpha"),"right"===this.options.align&&d.addClass("colorpicker-right"),this.options.inline===!0&&d.addClass("colorpicker-no-arrow"),this.options.colorSelectors){var f=this,g=f.picker.find(".colorpicker-selectors");g.length>0&&(c.each(this.options.colorSelectors,function(a,b){var d=c("").addClass("colorpicker-selectors-color").css("background-color",b).data("class",a).data("alias",a);d.on("click.colorpicker touchend.colorpicker",function(){f.setValue("alias"===f.format?c(this).data("alias"):c(this).css("background-color"))}),g.append(d)}),g.show().addClass("colorpicker-visible"))}d.on("mousedown.colorpicker touchstart.colorpicker",c.proxy(function(a){a.target===a.currentTarget&&a.preventDefault()},this)),d.find(".colorpicker-saturation, .colorpicker-hue, .colorpicker-alpha").on("mousedown.colorpicker touchstart.colorpicker",c.proxy(this.mousedown,this)),d.appendTo(this.container?this.container:c("body")),this.input!==!1&&(this.input.on({"keyup.colorpicker":c.proxy(this.keyup,this)}),this.input.on({"change.colorpicker":c.proxy(this.change,this)}),this.component===!1&&this.element.on({"focus.colorpicker":c.proxy(this.show,this)}),this.options.inline===!1&&this.element.on({"focusout.colorpicker":c.proxy(this.hide,this)})),this.component!==!1&&this.component.on({"click.colorpicker":c.proxy(this.show,this)}),this.input===!1&&this.component===!1&&this.element.on({"click.colorpicker":c.proxy(this.show,this)}),this.input!==!1&&this.component!==!1&&"color"===this.input.attr("type")&&this.input.on({"click.colorpicker":c.proxy(this.show,this),"focus.colorpicker":c.proxy(this.show,this)}),this.update(),c(c.proxy(function(){this.element.trigger("create")},this))};f.Color=d,f.prototype={constructor:f,destroy:function(){this.picker.remove(),this.element.removeData("colorpicker","color").off(".colorpicker"),this.input!==!1&&this.input.off(".colorpicker"),this.component!==!1&&this.component.off(".colorpicker"),this.element.removeClass("colorpicker-element"),this.element.trigger({type:"destroy"})},reposition:function(){if(this.options.inline!==!1||this.options.container)return!1;var a=this.container&&this.container[0]!==b.document.body?"position":"offset",c=this.component||this.element,d=c[a]();"right"===this.options.align&&(d.left-=this.picker.outerWidth()-c.outerWidth()),this.picker.css({top:d.top+c.outerHeight(),left:d.left})},show:function(a){this.isDisabled()||(this.picker.addClass("colorpicker-visible").removeClass("colorpicker-hidden"),this.reposition(),c(b).on("resize.colorpicker",c.proxy(this.reposition,this)),!a||this.hasInput()&&"color"!==this.input.attr("type")||a.stopPropagation&&a.preventDefault&&(a.stopPropagation(),a.preventDefault()),!this.component&&this.input||this.options.inline!==!1||c(b.document).on({"mousedown.colorpicker":c.proxy(this.hide,this)}),this.element.trigger({type:"showPicker",color:this.color}))},hide:function(a){return("undefined"==typeof a||!a.target||!(c(a.currentTarget).parents(".colorpicker").length>0||c(a.target).parents(".colorpicker").length>0))&&(this.picker.addClass("colorpicker-hidden").removeClass("colorpicker-visible"),c(b).off("resize.colorpicker",this.reposition),c(b.document).off({"mousedown.colorpicker":this.hide}),this.update(),void this.element.trigger({type:"hidePicker",color:this.color}))},updateData:function(a){return a=a||this.color.toString(this.format,!1),this.element.data("color",a),a},updateInput:function(a){return a=a||this.color.toString(this.format,!1),this.input!==!1&&this.input.prop("value",a),a},updatePicker:function(a){"undefined"!=typeof a&&(this.color=this.createColor(a));var b=this.options.horizontal===!1?this.options.sliders:this.options.slidersHorz,c=this.picker.find("i");if(0!==c.length)return this.options.horizontal===!1?(b=this.options.sliders,c.eq(1).css("top",b.hue.maxTop*(1-this.color.value.h)).end().eq(2).css("top",b.alpha.maxTop*(1-this.color.value.a))):(b=this.options.slidersHorz,c.eq(1).css("left",b.hue.maxLeft*(1-this.color.value.h)).end().eq(2).css("left",b.alpha.maxLeft*(1-this.color.value.a))),c.eq(0).css({top:b.saturation.maxTop-this.color.value.b*b.saturation.maxTop,left:this.color.value.s*b.saturation.maxLeft}),this.picker.find(".colorpicker-saturation").css("backgroundColor",this.color.toHex(this.color.value.h,1,1,1)),this.picker.find(".colorpicker-alpha").css("backgroundColor",this.color.toHex()),this.picker.find(".colorpicker-color, .colorpicker-color div").css("backgroundColor",this.color.toString(this.format,!0)),a},updateComponent:function(a){var b;if(b="undefined"!=typeof a?this.createColor(a):this.color,this.component!==!1){var c=this.component.find("i").eq(0);c.length>0?c.css({backgroundColor:b.toString(this.format,!0)}):this.component.css({backgroundColor:b.toString(this.format,!0)})}return b.toString(this.format,!1)},update:function(a){var b;return this.getValue(!1)===!1&&a!==!0||(b=this.updateComponent(),this.updateInput(b),this.updateData(b),this.updatePicker()),b},setValue:function(a){this.color=this.createColor(a),this.update(!0),this.element.trigger({type:"changeColor",color:this.color,value:a})},createColor:function(a){return new d(a?a:null,this.options.colorSelectors,this.options.fallbackColor?this.options.fallbackColor:this.color,this.options.fallbackFormat)},getValue:function(a){a="undefined"==typeof a?this.options.fallbackColor:a;var b;return b=this.hasInput()?this.input.val():this.element.data("color"),void 0!==b&&""!==b&&null!==b||(b=a),b},hasInput:function(){return this.input!==!1},isDisabled:function(){return!!this.hasInput()&&this.input.prop("disabled")===!0},disable:function(){return!!this.hasInput()&&(this.input.prop("disabled",!0),this.element.trigger({type:"disable",color:this.color,value:this.getValue()}),!0)},enable:function(){return!!this.hasInput()&&(this.input.prop("disabled",!1),this.element.trigger({type:"enable",color:this.color,value:this.getValue()}),!0)},currentSlider:null,mousePointer:{left:0,top:0},mousedown:function(a){!a.pageX&&!a.pageY&&a.originalEvent&&a.originalEvent.touches&&(a.pageX=a.originalEvent.touches[0].pageX,a.pageY=a.originalEvent.touches[0].pageY),a.stopPropagation(),a.preventDefault();var d=c(a.target),e=d.closest("div"),f=this.options.horizontal?this.options.slidersHorz:this.options.sliders;if(!e.is(".colorpicker")){if(e.is(".colorpicker-saturation"))this.currentSlider=c.extend({},f.saturation);else if(e.is(".colorpicker-hue"))this.currentSlider=c.extend({},f.hue);else{if(!e.is(".colorpicker-alpha"))return!1;this.currentSlider=c.extend({},f.alpha)}var g=e.offset();this.currentSlider.guide=e.find("i")[0].style,this.currentSlider.left=a.pageX-g.left,this.currentSlider.top=a.pageY-g.top,this.mousePointer={left:a.pageX,top:a.pageY},c(b.document).on({"mousemove.colorpicker":c.proxy(this.mousemove,this),"touchmove.colorpicker":c.proxy(this.mousemove,this),"mouseup.colorpicker":c.proxy(this.mouseup,this),"touchend.colorpicker":c.proxy(this.mouseup,this)}).trigger("mousemove")}return!1},mousemove:function(a){!a.pageX&&!a.pageY&&a.originalEvent&&a.originalEvent.touches&&(a.pageX=a.originalEvent.touches[0].pageX,a.pageY=a.originalEvent.touches[0].pageY),a.stopPropagation(),a.preventDefault();var b=Math.max(0,Math.min(this.currentSlider.maxLeft,this.currentSlider.left+((a.pageX||this.mousePointer.left)-this.mousePointer.left))),c=Math.max(0,Math.min(this.currentSlider.maxTop,this.currentSlider.top+((a.pageY||this.mousePointer.top)-this.mousePointer.top)));return this.currentSlider.guide.left=b+"px",this.currentSlider.guide.top=c+"px",this.currentSlider.callLeft&&this.color[this.currentSlider.callLeft].call(this.color,b/this.currentSlider.maxLeft),this.currentSlider.callTop&&this.color[this.currentSlider.callTop].call(this.color,c/this.currentSlider.maxTop),this.options.format!==!1||"setAlpha"!==this.currentSlider.callTop&&"setAlpha"!==this.currentSlider.callLeft||(1!==this.color.value.a?(this.format="rgba",this.color.origFormat="rgba"):(this.format="hex",this.color.origFormat="hex")),this.update(!0),this.element.trigger({type:"changeColor",color:this.color}),!1},mouseup:function(a){return a.stopPropagation(),a.preventDefault(),c(b.document).off({"mousemove.colorpicker":this.mousemove,"touchmove.colorpicker":this.mousemove,"mouseup.colorpicker":this.mouseup,"touchend.colorpicker":this.mouseup}),!1},change:function(a){this.keyup(a)},keyup:function(a){38===a.keyCode?(this.color.value.a<1&&(this.color.value.a=Math.round(100*(this.color.value.a+.01))/100),this.update(!0)):40===a.keyCode?(this.color.value.a>0&&(this.color.value.a=Math.round(100*(this.color.value.a-.01))/100),this.update(!0)):(this.color=this.createColor(this.input.val()),this.color.origFormat&&this.options.format===!1&&(this.format=this.color.origFormat),this.getValue(!1)!==!1&&(this.updateData(),this.updateComponent(),this.updatePicker())),this.element.trigger({type:"changeColor",color:this.color,value:this.input.val()})}},c.colorpicker=f,c.fn.colorpicker=function(a){var b=Array.prototype.slice.call(arguments,1),d=1===this.length,e=null,g=this.each(function(){var d=c(this),g=d.data("colorpicker"),h="object"==typeof a?a:{};g||(g=new f(this,h),d.data("colorpicker",g)),"string"==typeof a?c.isFunction(g[a])?e=g[a].apply(g,b):(b.length&&(g[a]=b[0]),e=g[a]):e=d});return d?e:g},c.fn.colorpicker.constructor=f}); \ No newline at end of file diff --git a/docs/includes/api.hbs b/docs/includes/api.hbs index 3a4694f3..c60b2388 100644 --- a/docs/includes/api.hbs +++ b/docs/includes/api.hbs @@ -109,6 +109,23 @@ code. + + fallbackColor + string + null + + Fallback color string that will be applied when the color failed to be parsed. + If null, it will keep the current color if any. + + + + fallbackFormat + string + hex + + Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors) + + diff --git a/docs/includes/examples/03_component_options.hbs b/docs/includes/examples/03_component_options.hbs index 66122d97..a405207e 100644 --- a/docs/includes/examples/03_component_options.hbs +++ b/docs/includes/examples/03_component_options.hbs @@ -6,7 +6,7 @@ $(function () { $('#cp3').colorpicker({ color: '#AA3399', - format: 'rgba' + format: 'rgb' }); }); diff --git a/docs/includes/examples/04_events.hbs b/docs/includes/examples/04_events.hbs index 9674bda7..86e3c0ed 100644 --- a/docs/includes/examples/04_events.hbs +++ b/docs/includes/examples/04_events.hbs @@ -2,7 +2,7 @@ diff --git a/docs/includes/examples/08_palette.hbs b/docs/includes/examples/08_palette.hbs index 94e1302d..dac0f986 100644 --- a/docs/includes/examples/08_palette.hbs +++ b/docs/includes/examples/08_palette.hbs @@ -1,8 +1,14 @@ - +
+ + +
+ diff --git a/index.html b/index.html index 0b4be000..a688e993 100644 --- a/index.html +++ b/index.html @@ -11,14 +11,14 @@ - +
-

Bootstrap Colorpicker 2.3.6 +

Bootstrap Colorpicker 2.4.0 for Twitter Bootstrap

@@ -188,6 +188,23 @@

Options

code. + + fallbackColor + string + null + + Fallback color string that will be applied when the color failed to be parsed. + If null, it will keep the current color if any. + + + + fallbackFormat + string + hex + + Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors) + + @@ -395,7 +412,7 @@

Examples

$(function () { $('#cp3').colorpicker({ color: '#AA3399', - format: 'rgba' + format: 'rgb' }); }); @@ -409,7 +426,7 @@

Examples

$(function() { $('#cp3').colorpicker({ color: '#AA3399', - format: 'rgba' + format: 'rgb' }); }); </script>
@@ -423,7 +440,7 @@

Examples

@@ -433,7 +450,8 @@

Examples

<script> $(function() { $('#cp4').colorpicker().on('changeColor', function(e) { - $('body')[0].style.backgroundColor = e.color.toHex(); + $('body')[0].style.backgroundColor = e.color.toString( + 'rgba'); }); }); </script>
@@ -533,11 +551,17 @@

Examples

- +
+ + +
-
<input type="text" data-format="hex" class="form-control" id="cp8" value="primary" -/> +
<div id="cp8" data-format="alias" class="input-group colorpicker-component"> + <input type="text" value="primary" class="form-control" /> + <span class="input-group-addon"><i></i></span> +</div> <script> $(function() { $('#cp8').colorpicker({ colorSelectors: { + 'black': '#000000', + 'white': '#ffffff', + 'red': '#FF0000', 'default': '#777777', 'primary': '#337ab7', 'success': '#5cb85c', @@ -745,12 +774,12 @@

Examples

</div> </div> </div> -</div> -<script> - $(function() { - $('#cp11').colorpicker(); - }); -</script>
+ </div> + <script> + $(function() { + $('#cp11').colorpicker(); + }); + </script>
diff --git a/package.json b/package.json index 93fac5f0..b7d82ab0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootstrap-colorpicker", - "version": "2.3.6", + "version": "2.4.0", "description": "Fancy and customizable colorpicker plugin for Twitter Bootstrap", "main": "./dist/js/bootstrap-colorpicker.js", "homepage": "https://itsjavi.com/bootstrap-colorpicker/", diff --git a/serve.js b/serve.js index f7e946fc..f4768c6b 100644 --- a/serve.js +++ b/serve.js @@ -27,3 +27,5 @@ http.createServer(function (req, res) { } }); }).listen(5000); + +console.log("Your bootstrap-colorpicker development URL is http://localhost:5000"); diff --git a/src/js/colorpicker-color.js b/src/js/colorpicker-color.js index 04b772c1..786175df 100644 --- a/src/js/colorpicker-color.js +++ b/src/js/colorpicker-color.js @@ -1,182 +1,215 @@ /** * Color manipulation helper class * - * @param {Object|String} val - * @param {Object} predefinedColors + * @param {Object|String} [val] + * @param {Object} [predefinedColors] + * @param {String|null} [fallbackColor] + * @param {String|null} [fallbackFormat] * @constructor */ -var Color = function(val, predefinedColors) { - this.value = { - h: 0, - s: 0, - b: 0, - a: 1 - }; +var Color = function(val, predefinedColors, fallbackColor, fallbackFormat) { + this.fallbackValue = fallbackColor ? + ( + fallbackColor && (typeof fallbackColor.h !== 'undefined') ? + fallbackColor : + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + } + ) : + null; + + this.fallbackFormat = fallbackFormat ? fallbackFormat : 'rgba'; + + this.value = this.fallbackValue; + this.origFormat = null; // original string format - if (predefinedColors) { - // We don't want to share aliases across instances so we extend new object - this.colors = $.extend({}, this.colors_lib, predefinedColors); - // Let's keep user defined aliases in separate object - this.user_colors = predefinedColors; - } + + this.predefinedColors = predefinedColors ? predefinedColors : {}; + + // We don't want to share aliases across instances so we extend new object + this.colors = $.extend({}, Color.webColors, this.predefinedColors); + if (val) { - if (val.toLowerCase !== undefined) { - // cast to string - val = val + ''; - this.setColor(val); - } else if (val.h !== undefined) { + if (typeof val.h !== 'undefined') { this.value = val; + } else { + this.setColor(String(val)); } } + + if (!this.value) { + // Initial value is always black if no arguments are passed or val is empty + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + }; + } +}; + +Color.webColors = { // 140 predefined colors from the HTML Colors spec + "aliceblue": "#f0f8ff", + "antiquewhite": "#faebd7", + "aqua": "#00ffff", + "aquamarine": "#7fffd4", + "azure": "#f0ffff", + "beige": "#f5f5dc", + "bisque": "#ffe4c4", + "black": "#000000", + "blanchedalmond": "#ffebcd", + "blue": "#0000ff", + "blueviolet": "#8a2be2", + "brown": "#a52a2a", + "burlywood": "#deb887", + "cadetblue": "#5f9ea0", + "chartreuse": "#7fff00", + "chocolate": "#d2691e", + "coral": "#ff7f50", + "cornflowerblue": "#6495ed", + "cornsilk": "#fff8dc", + "crimson": "#dc143c", + "cyan": "#00ffff", + "darkblue": "#00008b", + "darkcyan": "#008b8b", + "darkgoldenrod": "#b8860b", + "darkgray": "#a9a9a9", + "darkgreen": "#006400", + "darkkhaki": "#bdb76b", + "darkmagenta": "#8b008b", + "darkolivegreen": "#556b2f", + "darkorange": "#ff8c00", + "darkorchid": "#9932cc", + "darkred": "#8b0000", + "darksalmon": "#e9967a", + "darkseagreen": "#8fbc8f", + "darkslateblue": "#483d8b", + "darkslategray": "#2f4f4f", + "darkturquoise": "#00ced1", + "darkviolet": "#9400d3", + "deeppink": "#ff1493", + "deepskyblue": "#00bfff", + "dimgray": "#696969", + "dodgerblue": "#1e90ff", + "firebrick": "#b22222", + "floralwhite": "#fffaf0", + "forestgreen": "#228b22", + "fuchsia": "#ff00ff", + "gainsboro": "#dcdcdc", + "ghostwhite": "#f8f8ff", + "gold": "#ffd700", + "goldenrod": "#daa520", + "gray": "#808080", + "green": "#008000", + "greenyellow": "#adff2f", + "honeydew": "#f0fff0", + "hotpink": "#ff69b4", + "indianred": "#cd5c5c", + "indigo": "#4b0082", + "ivory": "#fffff0", + "khaki": "#f0e68c", + "lavender": "#e6e6fa", + "lavenderblush": "#fff0f5", + "lawngreen": "#7cfc00", + "lemonchiffon": "#fffacd", + "lightblue": "#add8e6", + "lightcoral": "#f08080", + "lightcyan": "#e0ffff", + "lightgoldenrodyellow": "#fafad2", + "lightgrey": "#d3d3d3", + "lightgreen": "#90ee90", + "lightpink": "#ffb6c1", + "lightsalmon": "#ffa07a", + "lightseagreen": "#20b2aa", + "lightskyblue": "#87cefa", + "lightslategray": "#778899", + "lightsteelblue": "#b0c4de", + "lightyellow": "#ffffe0", + "lime": "#00ff00", + "limegreen": "#32cd32", + "linen": "#faf0e6", + "magenta": "#ff00ff", + "maroon": "#800000", + "mediumaquamarine": "#66cdaa", + "mediumblue": "#0000cd", + "mediumorchid": "#ba55d3", + "mediumpurple": "#9370d8", + "mediumseagreen": "#3cb371", + "mediumslateblue": "#7b68ee", + "mediumspringgreen": "#00fa9a", + "mediumturquoise": "#48d1cc", + "mediumvioletred": "#c71585", + "midnightblue": "#191970", + "mintcream": "#f5fffa", + "mistyrose": "#ffe4e1", + "moccasin": "#ffe4b5", + "navajowhite": "#ffdead", + "navy": "#000080", + "oldlace": "#fdf5e6", + "olive": "#808000", + "olivedrab": "#6b8e23", + "orange": "#ffa500", + "orangered": "#ff4500", + "orchid": "#da70d6", + "palegoldenrod": "#eee8aa", + "palegreen": "#98fb98", + "paleturquoise": "#afeeee", + "palevioletred": "#d87093", + "papayawhip": "#ffefd5", + "peachpuff": "#ffdab9", + "peru": "#cd853f", + "pink": "#ffc0cb", + "plum": "#dda0dd", + "powderblue": "#b0e0e6", + "purple": "#800080", + "red": "#ff0000", + "rosybrown": "#bc8f8f", + "royalblue": "#4169e1", + "saddlebrown": "#8b4513", + "salmon": "#fa8072", + "sandybrown": "#f4a460", + "seagreen": "#2e8b57", + "seashell": "#fff5ee", + "sienna": "#a0522d", + "silver": "#c0c0c0", + "skyblue": "#87ceeb", + "slateblue": "#6a5acd", + "slategray": "#708090", + "snow": "#fffafa", + "springgreen": "#00ff7f", + "steelblue": "#4682b4", + "tan": "#d2b48c", + "teal": "#008080", + "thistle": "#d8bfd8", + "tomato": "#ff6347", + "turquoise": "#40e0d0", + "violet": "#ee82ee", + "wheat": "#f5deb3", + "white": "#ffffff", + "whitesmoke": "#f5f5f5", + "yellow": "#ffff00", + "yellowgreen": "#9acd32", + "transparent": "transparent" }; Color.prototype = { constructor: Color, - user_colors: {}, - colors: {}, - // 140 predefined colors from the HTML Colors spec - colors_lib: { - "aliceblue": "#f0f8ff", - "antiquewhite": "#faebd7", - "aqua": "#00ffff", - "aquamarine": "#7fffd4", - "azure": "#f0ffff", - "beige": "#f5f5dc", - "bisque": "#ffe4c4", - "black": "#000000", - "blanchedalmond": "#ffebcd", - "blue": "#0000ff", - "blueviolet": "#8a2be2", - "brown": "#a52a2a", - "burlywood": "#deb887", - "cadetblue": "#5f9ea0", - "chartreuse": "#7fff00", - "chocolate": "#d2691e", - "coral": "#ff7f50", - "cornflowerblue": "#6495ed", - "cornsilk": "#fff8dc", - "crimson": "#dc143c", - "cyan": "#00ffff", - "darkblue": "#00008b", - "darkcyan": "#008b8b", - "darkgoldenrod": "#b8860b", - "darkgray": "#a9a9a9", - "darkgreen": "#006400", - "darkkhaki": "#bdb76b", - "darkmagenta": "#8b008b", - "darkolivegreen": "#556b2f", - "darkorange": "#ff8c00", - "darkorchid": "#9932cc", - "darkred": "#8b0000", - "darksalmon": "#e9967a", - "darkseagreen": "#8fbc8f", - "darkslateblue": "#483d8b", - "darkslategray": "#2f4f4f", - "darkturquoise": "#00ced1", - "darkviolet": "#9400d3", - "deeppink": "#ff1493", - "deepskyblue": "#00bfff", - "dimgray": "#696969", - "dodgerblue": "#1e90ff", - "firebrick": "#b22222", - "floralwhite": "#fffaf0", - "forestgreen": "#228b22", - "fuchsia": "#ff00ff", - "gainsboro": "#dcdcdc", - "ghostwhite": "#f8f8ff", - "gold": "#ffd700", - "goldenrod": "#daa520", - "gray": "#808080", - "green": "#008000", - "greenyellow": "#adff2f", - "honeydew": "#f0fff0", - "hotpink": "#ff69b4", - "indianred": "#cd5c5c", - "indigo": "#4b0082", - "ivory": "#fffff0", - "khaki": "#f0e68c", - "lavender": "#e6e6fa", - "lavenderblush": "#fff0f5", - "lawngreen": "#7cfc00", - "lemonchiffon": "#fffacd", - "lightblue": "#add8e6", - "lightcoral": "#f08080", - "lightcyan": "#e0ffff", - "lightgoldenrodyellow": "#fafad2", - "lightgrey": "#d3d3d3", - "lightgreen": "#90ee90", - "lightpink": "#ffb6c1", - "lightsalmon": "#ffa07a", - "lightseagreen": "#20b2aa", - "lightskyblue": "#87cefa", - "lightslategray": "#778899", - "lightsteelblue": "#b0c4de", - "lightyellow": "#ffffe0", - "lime": "#00ff00", - "limegreen": "#32cd32", - "linen": "#faf0e6", - "magenta": "#ff00ff", - "maroon": "#800000", - "mediumaquamarine": "#66cdaa", - "mediumblue": "#0000cd", - "mediumorchid": "#ba55d3", - "mediumpurple": "#9370d8", - "mediumseagreen": "#3cb371", - "mediumslateblue": "#7b68ee", - "mediumspringgreen": "#00fa9a", - "mediumturquoise": "#48d1cc", - "mediumvioletred": "#c71585", - "midnightblue": "#191970", - "mintcream": "#f5fffa", - "mistyrose": "#ffe4e1", - "moccasin": "#ffe4b5", - "navajowhite": "#ffdead", - "navy": "#000080", - "oldlace": "#fdf5e6", - "olive": "#808000", - "olivedrab": "#6b8e23", - "orange": "#ffa500", - "orangered": "#ff4500", - "orchid": "#da70d6", - "palegoldenrod": "#eee8aa", - "palegreen": "#98fb98", - "paleturquoise": "#afeeee", - "palevioletred": "#d87093", - "papayawhip": "#ffefd5", - "peachpuff": "#ffdab9", - "peru": "#cd853f", - "pink": "#ffc0cb", - "plum": "#dda0dd", - "powderblue": "#b0e0e6", - "purple": "#800080", - "red": "#ff0000", - "rosybrown": "#bc8f8f", - "royalblue": "#4169e1", - "saddlebrown": "#8b4513", - "salmon": "#fa8072", - "sandybrown": "#f4a460", - "seagreen": "#2e8b57", - "seashell": "#fff5ee", - "sienna": "#a0522d", - "silver": "#c0c0c0", - "skyblue": "#87ceeb", - "slateblue": "#6a5acd", - "slategray": "#708090", - "snow": "#fffafa", - "springgreen": "#00ff7f", - "steelblue": "#4682b4", - "tan": "#d2b48c", - "teal": "#008080", - "thistle": "#d8bfd8", - "tomato": "#ff6347", - "turquoise": "#40e0d0", - "violet": "#ee82ee", - "wheat": "#f5deb3", - "white": "#ffffff", - "whitesmoke": "#f5f5f5", - "yellow": "#ffff00", - "yellowgreen": "#9acd32", - "transparent": "transparent" + colors: {}, // merged web and predefined colors + predefinedColors: {}, + /** + * @return {Object} + */ + getValue: function() { + return this.value; + }, + /** + * @param {Object} val + */ + setValue: function(val) { + this.value = val; }, _sanitizeNumber: function(val) { if (typeof val === 'number') { @@ -188,7 +221,7 @@ Color.prototype = { if (val === '') { return 0; } - if (val.toLowerCase !== undefined) { + if (typeof val.toLowerCase !== 'undefined') { if (val.match(/^\./)) { val = "0" + val; } @@ -197,7 +230,7 @@ Color.prototype = { return 1; }, isTransparent: function(strVal) { - if (!strVal) { + if (!strVal || !(typeof strVal === 'string' || strVal instanceof String)) { return false; } strVal = strVal.toLowerCase().trim(); @@ -206,7 +239,12 @@ Color.prototype = { rgbaIsTransparent: function(rgba) { return ((rgba.r === 0) && (rgba.g === 0) && (rgba.b === 0) && (rgba.a === 0)); }, - //parse a string to HSB + // parse a string to HSB + /** + * @protected + * @param {String} strVal + * @returns {boolean} Returns true if it could be parsed, false otherwise + */ setColor: function(strVal) { strVal = strVal.toLowerCase().trim(); if (strVal) { @@ -217,41 +255,26 @@ Color.prototype = { b: 0, a: 0 }; + return true; } else { - this.value = this.stringToHSB(strVal) || { - h: 0, - s: 0, - b: 0, - a: 1 - }; // if parser fails, defaults to black - } - } - }, - stringToHSB: function(strVal) { - strVal = strVal.toLowerCase(); - var alias; - if (typeof this.colors[strVal] !== 'undefined') { - strVal = this.colors[strVal]; - alias = 'alias'; - } - var that = this, - result = false; - $.each(this.stringParsers, function(i, parser) { - var match = parser.re.exec(strVal), - values = match && parser.parse.apply(that, [match]), - format = alias || parser.format || 'rgba'; - if (values) { - if (format.match(/hsla?/)) { - result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values)); - } else { - result = that.RGBtoHSB.apply(that, values); + var parsedColor = this.parse(strVal); + if (parsedColor) { + this.value = this.value = { + h: parsedColor.h, + s: parsedColor.s, + b: parsedColor.b, + a: parsedColor.a + }; + if (!this.origFormat) { + this.origFormat = parsedColor.format; + } + } else if (this.fallbackValue) { + // if parser fails, defaults to fallbackValue if defined, otherwise the value won't be changed + this.value = this.fallbackValue; } - that.origFormat = format; - return false; } - return true; - }); - return result; + } + return false; }, setHue: function(h) { this.value.h = 1 - h; @@ -266,11 +289,13 @@ Color.prototype = { this.value.a = Math.round((parseInt((1 - a) * 100, 10) / 100) * 100) / 100; }, toRGB: function(h, s, b, a) { - if (!h) { + if (arguments.length === 0) { h = this.value.h; s = this.value.s; b = this.value.b; + a = this.value.a; } + h *= 360; var R, G, B, X, C; h = (h % 360) / 60; @@ -282,25 +307,37 @@ Color.prototype = { R += [C, X, 0, 0, X, C][h]; G += [X, C, C, X, 0, 0][h]; B += [0, 0, X, C, C, X][h]; + return { r: Math.round(R * 255), g: Math.round(G * 255), b: Math.round(B * 255), - a: a || this.value.a + a: a }; }, toHex: function(h, s, b, a) { + if (arguments.length === 0) { + h = this.value.h; + s = this.value.s; + b = this.value.b; + a = this.value.a; + } + var rgb = this.toRGB(h, s, b, a); + if (this.rgbaIsTransparent(rgb)) { return 'transparent'; } - return '#' + ((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1); + + return "#" + ((1 << 24) + (parseInt(rgb.r) << 16) + (parseInt(rgb.g) << 8) + parseInt(rgb.b)).toString(16).slice(1); }, toHSL: function(h, s, b, a) { - h = h || this.value.h; - s = s || this.value.s; - b = b || this.value.b; - a = a || this.value.a; + if (arguments.length === 0) { + h = this.value.h; + s = this.value.s; + b = this.value.b; + a = this.value.a; + } var H = h, L = (2 - s) * b, @@ -322,16 +359,14 @@ Color.prototype = { }; }, toAlias: function(r, g, b, a) { - var rgb = this.toHex(r, g, b, a); - //first check if there is user defined alias - for (var ualias in this.user_colors) { - if (this.user_colors[ualias] === rgb) { - return ualias; - } - } - //if not then iterate through pre-defined colors - for (var alias in this.colors_lib) { - if (this.colors_lib[alias] === rgb) { + var c, rgb = (arguments.length === 0) ? this.toHex() : this.toHex(r, g, b, a); + + // support predef. colors in non-hex format too, as defined in the alias itself + var original = this.origFormat === 'alias' ? rgb : this.toString(this.origFormat, false); + + for (var alias in this.colors) { + c = this.colors[alias].toLowerCase().trim(); + if ((c === rgb) || (c === original)) { return alias; } } @@ -397,9 +432,69 @@ Color.prototype = { var b = Math.round(this.HueToRGB(p, q, tb) * 255); return [r, g, b, this._sanitizeNumber(a)]; }, - toString: function(format) { - format = format || 'rgba'; + /** + * @param {String} strVal + * @returns {Object} Object containing h,s,b,a,format properties or FALSE if failed to parse + */ + parse: function(strVal) { + if (arguments.length === 0) { + return false; + } + + var that = this, + result = false, + isAlias = (typeof this.colors[strVal] !== 'undefined'), + values, format; + + if (isAlias) { + strVal = this.colors[strVal].toLowerCase().trim(); + } + + $.each(this.stringParsers, function(i, parser) { + var match = parser.re.exec(strVal); + values = match && parser.parse.apply(that, [match]); + if (values) { + result = {}; + format = (isAlias ? 'alias' : (parser.format ? parser.format : that.getValidFallbackFormat())); + if (format.match(/hsla?/)) { + result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values)); + } else { + result = that.RGBtoHSB.apply(that, values); + } + if (result instanceof Object) { + result.format = format; + } + return false; // stop iterating + } + return true; + }); + return result; + }, + getValidFallbackFormat: function() { + var formats = [ + 'rgba', 'rgb', 'hex', 'hsla', 'hsl' + ]; + if (this.origFormat && (formats.indexOf(this.origFormat) !== -1)) { + return this.origFormat; + } + if (this.fallbackFormat && (formats.indexOf(this.fallbackFormat) !== -1)) { + return this.fallbackFormat; + } + + return 'rgba'; // By default, return a format that will not lose the alpha info + }, + /** + * + * @param {string} [format] (default: rgba) + * @param {boolean} [translateAlias] Return real color for pre-defined (non-standard) aliases (default: false) + * @returns {String} + */ + toString: function(format, translateAlias) { + format = format || this.origFormat || this.fallbackFormat; + translateAlias = translateAlias || false; + var c = false; + switch (format) { case 'rgb': { @@ -434,7 +529,19 @@ Color.prototype = { } break; case 'alias': - return this.toAlias() || this.toHex(); + { + c = this.toAlias(); + + if (c === false) { + return this.toString(this.getValidFallbackFormat()); + } + + if (translateAlias && !(c in Color.webColors) && (c in this.predefinedColors)) { + return this.predefinedColors[c]; + } + + return c; + } default: { return c; diff --git a/src/js/colorpicker-component.js b/src/js/colorpicker-component.js index 01b88869..ea232e94 100644 --- a/src/js/colorpicker-component.js +++ b/src/js/colorpicker-component.js @@ -23,7 +23,8 @@ var Colorpicker = function(element, options) { this.input = false; } // Set HSB color - this.color = new Color(this.options.color !== false ? this.options.color : this.getValue(), this.options.colorSelectors); + this.color = this.createColor(this.options.color !== false ? this.options.color : this.getValue()); + this.format = this.options.format !== false ? this.options.format : this.color.origFormat; if (this.options.color !== false) { @@ -32,42 +33,67 @@ var Colorpicker = function(element, options) { } // Setup picker - this.picker = $(this.options.template); + var $picker = this.picker = $(this.options.template); if (this.options.customClass) { - this.picker.addClass(this.options.customClass); + $picker.addClass(this.options.customClass); } if (this.options.inline) { - this.picker.addClass('colorpicker-inline colorpicker-visible'); + $picker.addClass('colorpicker-inline colorpicker-visible'); } else { - this.picker.addClass('colorpicker-hidden'); + $picker.addClass('colorpicker-hidden'); } if (this.options.horizontal) { - this.picker.addClass('colorpicker-horizontal'); + $picker.addClass('colorpicker-horizontal'); } - if (this.format === 'rgba' || this.format === 'hsla' || this.options.format === false) { - this.picker.addClass('colorpicker-with-alpha'); + if ( + (['rgba', 'hsla', 'alias'].indexOf(this.format) !== -1) || + this.options.format === false || + this.getValue() === 'transparent' + ) { + $picker.addClass('colorpicker-with-alpha'); } if (this.options.align === 'right') { - this.picker.addClass('colorpicker-right'); + $picker.addClass('colorpicker-right'); } if (this.options.inline === true) { - this.picker.addClass('colorpicker-no-arrow'); + $picker.addClass('colorpicker-no-arrow'); } if (this.options.colorSelectors) { - var colorpicker = this; - $.each(this.options.colorSelectors, function(name, color) { - var $btn = $('').css('background-color', color).data('class', name); - $btn.click(function() { - colorpicker.setValue($(this).css('background-color')); + var colorpicker = this, + selectorsContainer = colorpicker.picker.find('.colorpicker-selectors'); + + if (selectorsContainer.length > 0) { + $.each(this.options.colorSelectors, function(name, color) { + var $btn = $('') + .addClass('colorpicker-selectors-color') + .css('background-color', color) + .data('class', name).data('alias', name); + + $btn.on('click.colorpicker touchend.colorpicker', function() { + colorpicker.setValue( + colorpicker.format === 'alias' ? $(this).data('alias') : $(this).css('background-color') + ); + }); + selectorsContainer.append($btn); }); - colorpicker.picker.find('.colorpicker-selectors').append($btn); - }); - this.picker.find('.colorpicker-selectors').show(); + selectorsContainer.show().addClass('colorpicker-visible'); + } } - this.picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this)); - this.picker.appendTo(this.container ? this.container : $('body')); - // Bind events + // Prevent closing the colorpicker when clicking on itself + $picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(function(e) { + if (e.target === e.currentTarget) { + e.preventDefault(); + } + }, this)); + + // Bind click/tap events on the sliders + $picker.find('.colorpicker-saturation, .colorpicker-hue, .colorpicker-alpha') + .on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this)); + + $picker.appendTo(this.container ? this.container : $('body')); + + // Bind other events if (this.input !== false) { this.input.on({ 'keyup.colorpicker': $.proxy(this.keyup, this) @@ -136,7 +162,7 @@ Colorpicker.prototype = { if (this.options.inline !== false || this.options.container) { return false; } - var type = this.container && this.container[0] !== document.body ? 'position' : 'offset'; + var type = this.container && this.container[0] !== window.document.body ? 'position' : 'offset'; var element = this.component || this.element; var offset = element[type](); if (this.options.align === 'right') { @@ -149,7 +175,8 @@ Colorpicker.prototype = { }, show: function(e) { if (this.isDisabled()) { - return false; + // Don't show the widget if it's disabled (the input) + return; } this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden'); this.reposition(); @@ -170,10 +197,19 @@ Colorpicker.prototype = { color: this.color }); }, - hide: function() { + hide: function(e) { + if ((typeof e !== 'undefined') && e.target) { + // Prevent hide if triggered by an event and an element inside the colorpicker has been clicked/touched + if ( + $(e.currentTarget).parents('.colorpicker').length > 0 || + $(e.target).parents('.colorpicker').length > 0 + ) { + return false; + } + } this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible'); $(window).off('resize.colorpicker', this.reposition); - $(document).off({ + $(window.document).off({ 'mousedown.colorpicker': this.hide }); this.update(); @@ -183,27 +219,20 @@ Colorpicker.prototype = { }); }, updateData: function(val) { - val = val || this.color.toString(this.format); + val = val || this.color.toString(this.format, false); this.element.data('color', val); return val; }, updateInput: function(val) { - val = val || this.color.toString(this.format); + val = val || this.color.toString(this.format, false); if (this.input !== false) { - if (this.options.colorSelectors) { - var color = new Color(val, this.options.colorSelectors); - var alias = color.toAlias(); - if (typeof this.options.colorSelectors[alias] !== 'undefined') { - val = alias; - } - } this.input.prop('value', val); } return val; }, updatePicker: function(val) { - if (val !== undefined) { - this.color = new Color(val, this.options.colorSelectors); + if (typeof val !== 'undefined') { + this.color = this.createColor(val); } var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz; var icns = this.picker.find('i'); @@ -223,30 +252,41 @@ Colorpicker.prototype = { 'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop, 'left': this.color.value.s * sl.saturation.maxLeft }); - this.picker.find('.colorpicker-saturation').css('backgroundColor', this.color.toHex(this.color.value.h, 1, 1, 1)); - this.picker.find('.colorpicker-alpha').css('backgroundColor', this.color.toHex()); - this.picker.find('.colorpicker-color, .colorpicker-color div').css('backgroundColor', this.color.toString(this.format)); + + this.picker.find('.colorpicker-saturation') + .css('backgroundColor', this.color.toHex(this.color.value.h, 1, 1, 1)); + + this.picker.find('.colorpicker-alpha') + .css('backgroundColor', this.color.toHex()); + + this.picker.find('.colorpicker-color, .colorpicker-color div') + .css('backgroundColor', this.color.toString(this.format, true)); + return val; }, updateComponent: function(val) { - if (val !== undefined) { - val = new Color(val, this.options.colorSelectors); + var color; + + if (typeof val !== 'undefined') { + color = this.createColor(val); } else { - val = this.color; + color = this.color; } + if (this.component !== false) { var icn = this.component.find('i').eq(0); if (icn.length > 0) { icn.css({ - 'backgroundColor': val.toHex() // We always wan it to be valid value + 'backgroundColor': color.toString(this.format, true) }); } else { this.component.css({ - 'backgroundColor': val.toHex() // We always wan it to be valid value + 'backgroundColor': color.toString(this.format, true) }); } } - return val.toString(this.format); + + return color.toString(this.format, false); }, update: function(force) { var val; @@ -261,7 +301,7 @@ Colorpicker.prototype = { }, setValue: function(val) { // set color manually - this.color = new Color(val, this.options.colorSelectors); + this.color = this.createColor(val); this.update(true); this.element.trigger({ type: 'changeColor', @@ -269,8 +309,22 @@ Colorpicker.prototype = { value: val }); }, + /** + * Creates a new color using the instance options + * @protected + * @param {String} val + * @returns {Color} + */ + createColor: function(val) { + return new Color( + val ? val : null, + this.options.colorSelectors, + this.options.fallbackColor ? this.options.fallbackColor : this.color, + this.options.fallbackFormat + ); + }, getValue: function(defaultValue) { - defaultValue = (defaultValue === undefined) ? '#000000' : defaultValue; + defaultValue = (typeof defaultValue === 'undefined') ? this.options.fallbackColor : defaultValue; var val; if (this.hasInput()) { val = this.input.val(); @@ -354,7 +408,7 @@ Colorpicker.prototype = { top: e.pageY }; //trigger mousemove to move the guide to the current position - $(document).on({ + $(window.document).on({ 'mousemove.colorpicker': $.proxy(this.mousemove, this), 'touchmove.colorpicker': $.proxy(this.mousemove, this), 'mouseup.colorpicker': $.proxy(this.mouseup, this), @@ -395,7 +449,11 @@ Colorpicker.prototype = { // Change format dynamically // Only occurs if user choose the dynamic format by // setting option format to false - if (this.currentSlider.callTop === 'setAlpha' && this.options.format === false) { + if ( + this.options.format === false && + (this.currentSlider.callTop === 'setAlpha' || + this.currentSlider.callLeft === 'setAlpha') + ) { // Converting from hex / rgb to rgba if (this.color.value.a !== 1) { @@ -420,7 +478,7 @@ Colorpicker.prototype = { mouseup: function(e) { e.stopPropagation(); e.preventDefault(); - $(document).off({ + $(window.document).off({ 'mousemove.colorpicker': this.mousemove, 'touchmove.colorpicker': this.mousemove, 'mouseup.colorpicker': this.mouseup, @@ -443,7 +501,7 @@ Colorpicker.prototype = { } this.update(true); } else { - this.color = new Color(this.input.val(), this.options.colorSelectors); + this.color = this.createColor(this.input.val()); // Change format dynamically // Only occurs if user choose the dynamic format by // setting option format to false diff --git a/src/js/colorpicker-defaults.js b/src/js/colorpicker-defaults.js index be36a819..84523820 100644 --- a/src/js/colorpicker-defaults.js +++ b/src/js/colorpicker-defaults.js @@ -9,6 +9,8 @@ var defaults = { input: 'input', // children input selector container: false, // container selector component: '.add-on, .input-group-addon', // children component selector + fallbackColor: false, // fallback color value. null = keeps current color. + fallbackFormat: 'hex', // fallback color format sliders: { saturation: { maxLeft: 100, @@ -57,6 +59,6 @@ var defaults = { '
' + '', align: 'right', - customClass: null, - colorSelectors: null + customClass: null, // custom class added to the colorpicker element + colorSelectors: null // custom color aliases }; diff --git a/src/js/colorpicker-plugin-wrapper.js b/src/js/colorpicker-plugin-wrapper.js index 7fc850f4..dda03ed9 100644 --- a/src/js/colorpicker-plugin-wrapper.js +++ b/src/js/colorpicker-plugin-wrapper.js @@ -1,5 +1,5 @@ /*! - * Bootstrap Colorpicker v2.3.6 + * Bootstrap Colorpicker v2.4.0 * https://itsjavi.com/bootstrap-colorpicker/ * * Originally written by (c) 2012 Stefan Petre @@ -9,17 +9,22 @@ */ (function(factory) { - "use strict"; + var global = (typeof window === 'undefined') ? this : window; + if (typeof exports === 'object') { - module.exports = factory(window.jQuery); + module.exports = factory(global.jQuery, global); } else if (typeof define === 'function' && define.amd) { - define(['jquery'], factory); - } else if (window.jQuery && !window.jQuery.fn.colorpicker) { - factory(window.jQuery); + define(['jquery'], function(jq) { + return factory(jq, global); + }); + } else if (global.jQuery && !global.jQuery.fn.colorpicker) { + factory(global.jQuery, global); } -}(function($) { +}(function(jQuery, window) { 'use strict'; + var $ = jQuery; + //@colorpicker-color //@colorpicker-defaults //@colorpicker-component diff --git a/src/less/colorpicker.less b/src/less/colorpicker.less index ea705e50..eab45d9f 100644 --- a/src/less/colorpicker.less +++ b/src/less/colorpicker.less @@ -1,5 +1,5 @@ /*! - * Bootstrap Colorpicker v2.3.6 + * Bootstrap Colorpicker v2.4.0 * https://itsjavi.com/bootstrap-colorpicker/ * * Originally written by (c) 2012 Stefan Petre @@ -228,18 +228,6 @@ .bgImg('alpha-horizontal.png'); } -.colorpicker.colorpicker-hidden { - display: none; -} - -.colorpicker.colorpicker-visible { - display: block; -} - -.colorpicker-inline.colorpicker-visible { - display: inline-block; -} - .colorpicker-right:before { left: auto; right: 6px; @@ -259,3 +247,27 @@ border-right: 0; border-left: 0; } + +.colorpicker, +.colorpicker-alpha, +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-selectors { + &.colorpicker-visible { + display: block; + } +} + +.colorpicker, +.colorpicker-alpha, +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-selectors { + &.colorpicker-hidden { + display: none; + } +} + +.colorpicker-inline.colorpicker-visible { + display: inline-block; +} diff --git a/src/sass/_colorpicker.scss b/src/sass/_colorpicker.scss index 2903b51d..a49e5fa6 100644 --- a/src/sass/_colorpicker.scss +++ b/src/sass/_colorpicker.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap Colorpicker v2.3.6 + * Bootstrap Colorpicker v2.4.0 * https://itsjavi.com/bootstrap-colorpicker/ * * Originally written by (c) 2012 Stefan Petre @@ -7,44 +7,40 @@ * http://www.apache.org/licenses/LICENSE-2.0.txt * */ - -$colorpicker-image-path: "../img/bootstrap-colorpicker/" !default; +$imgPath: "../img/bootstrap-colorpicker/"; -@mixin bg-img($filename) { - background-image: url(#{$colorpicker-image-path}#{$filename}); +@mixin bgImg($imgFilename) { + background-image: url("#{$imgPath}#{$imgFilename}"); } -@mixin border-radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - -ms-border-radius: $radius; - border-radius: $radius; +@mixin borderRadius($size) { + -webkit-border-radius: $size; + -moz-border-radius: $size; + border-radius: $size; } .colorpicker-saturation { width: 100px; height: 100px; - @include bg-img("saturation.png"); + @include bgImg('saturation.png'); cursor: crosshair; float: left; - i { display: block; height: 5px; width: 5px; border: 1px solid #000; - @include border-radius(5px); + @include borderRadius(5px); position: absolute; top: 0; left: 0; margin: -4px 0 0 -4px; - b { display: block; height: 5px; width: 5px; border: 1px solid #fff; - @include border-radius(5px); + @include borderRadius(5px); } } } @@ -73,11 +69,11 @@ $colorpicker-image-path: "../img/bootstrap-colorpicker/" !default; } .colorpicker-hue { - @include bg-img("hue.png"); + @include bgImg('hue.png'); } .colorpicker-alpha { - @include bg-img("alpha.png"); + @include bgImg('alpha.png'); display: none; } @@ -91,7 +87,7 @@ $colorpicker-image-path: "../img/bootstrap-colorpicker/" !default; padding: 4px; min-width: 130px; margin-top: 1px; - @include border-radius(4px); + @include borderRadius(4px); z-index: 2500; } @@ -145,7 +141,7 @@ $colorpicker-image-path: "../img/bootstrap-colorpicker/" !default; height: 10px; margin-top: 5px; clear: both; - @include bg-img("alpha.png"); + @include bgImg('alpha.png'); background-position: 0 100%; } @@ -225,23 +221,11 @@ $colorpicker-image-path: "../img/bootstrap-colorpicker/" !default; } .colorpicker.colorpicker-horizontal .colorpicker-hue { - @include bg-img("hue-horizontal.png"); + @include bgImg('hue-horizontal.png'); } .colorpicker.colorpicker-horizontal .colorpicker-alpha { - @include bg-img("alpha-horizontal.png"); -} - -.colorpicker.colorpicker-hidden { - display: none; -} - -.colorpicker.colorpicker-visible { - display: block; -} - -.colorpicker-inline.colorpicker-visible { - display: inline-block; + @include bgImg('alpha-horizontal.png'); } .colorpicker-right:before { @@ -263,3 +247,27 @@ $colorpicker-image-path: "../img/bootstrap-colorpicker/" !default; border-right: 0; border-left: 0; } + +.colorpicker, +.colorpicker-alpha, +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-selectors { + &.colorpicker-visible { + display: block; + } +} + +.colorpicker, +.colorpicker-alpha, +.colorpicker-saturation, +.colorpicker-hue, +.colorpicker-selectors { + &.colorpicker-hidden { + display: none; + } +} + +.colorpicker-inline.colorpicker-visible { + display: inline-block; +}