From 51ee3964c0f799fa9786ddd85b54707c43cd3509 Mon Sep 17 00:00:00 2001 From: Christian Vogeley Date: Tue, 25 Mar 2014 19:36:44 +0100 Subject: Well, if you want to add a color picker it is indeed a good idea to include the color picker. --- library/bootstrap-colorpicker/.gitignore | 12 + library/bootstrap-colorpicker/.jshintrc | 18 + library/bootstrap-colorpicker/.travis.yml | 7 + library/bootstrap-colorpicker/Gruntfile.js | 129 +++ library/bootstrap-colorpicker/LICENSE | 13 + library/bootstrap-colorpicker/README.md | 19 + library/bootstrap-colorpicker/bower.json | 8 + .../dist/css/bootstrap-colorpicker.css | 214 +++++ .../dist/css/bootstrap-colorpicker.min.css | 9 + .../img/bootstrap-colorpicker/alpha-horizontal.png | Bin 0 -> 3635 bytes .../dist/img/bootstrap-colorpicker/alpha.png | Bin 0 -> 3271 bytes .../img/bootstrap-colorpicker/hue-horizontal.png | Bin 0 -> 2837 bytes .../dist/img/bootstrap-colorpicker/hue.png | Bin 0 -> 2972 bytes .../dist/img/bootstrap-colorpicker/saturation.png | Bin 0 -> 8817 bytes .../dist/js/bootstrap-colorpicker.js | 951 +++++++++++++++++++++ .../dist/js/bootstrap-colorpicker.min.js | 1 + library/bootstrap-colorpicker/index.html | 296 +++++++ library/bootstrap-colorpicker/package.json | 33 + library/bootstrap-colorpicker/src/css/docs.css | 37 + library/bootstrap-colorpicker/src/docs.html | 153 ++++ library/bootstrap-colorpicker/src/examples.html | 60 ++ library/bootstrap-colorpicker/src/footer.html | 9 + library/bootstrap-colorpicker/src/header.html | 69 ++ .../src/js/colorpicker-color.js | 508 +++++++++++ .../bootstrap-colorpicker/src/js/colorpicker.js | 464 ++++++++++ library/bootstrap-colorpicker/src/js/docs.js | 45 + .../src/less/colorpicker.less | 193 +++++ 27 files changed, 3248 insertions(+) create mode 100644 library/bootstrap-colorpicker/.gitignore create mode 100644 library/bootstrap-colorpicker/.jshintrc create mode 100644 library/bootstrap-colorpicker/.travis.yml create mode 100644 library/bootstrap-colorpicker/Gruntfile.js create mode 100644 library/bootstrap-colorpicker/LICENSE create mode 100644 library/bootstrap-colorpicker/README.md create mode 100644 library/bootstrap-colorpicker/bower.json create mode 100644 library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css create mode 100644 library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css create mode 100644 library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha-horizontal.png create mode 100644 library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha.png create mode 100644 library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue-horizontal.png create mode 100644 library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue.png create mode 100644 library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/saturation.png create mode 100644 library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js create mode 100644 library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js create mode 100644 library/bootstrap-colorpicker/index.html create mode 100644 library/bootstrap-colorpicker/package.json create mode 100644 library/bootstrap-colorpicker/src/css/docs.css create mode 100644 library/bootstrap-colorpicker/src/docs.html create mode 100644 library/bootstrap-colorpicker/src/examples.html create mode 100644 library/bootstrap-colorpicker/src/footer.html create mode 100644 library/bootstrap-colorpicker/src/header.html create mode 100644 library/bootstrap-colorpicker/src/js/colorpicker-color.js create mode 100644 library/bootstrap-colorpicker/src/js/colorpicker.js create mode 100644 library/bootstrap-colorpicker/src/js/docs.js create mode 100644 library/bootstrap-colorpicker/src/less/colorpicker.less (limited to 'library') diff --git a/library/bootstrap-colorpicker/.gitignore b/library/bootstrap-colorpicker/.gitignore new file mode 100644 index 000000000..a2e8fff5b --- /dev/null +++ b/library/bootstrap-colorpicker/.gitignore @@ -0,0 +1,12 @@ +*~ +.DS_Store +.DS_Store* +ehthumbs.db +Thumbs.db +*.log +/ignore/ +/ignored/ +/node_modules/ +/nbproject/ +static_server.js +*.php \ No newline at end of file diff --git a/library/bootstrap-colorpicker/.jshintrc b/library/bootstrap-colorpicker/.jshintrc new file mode 100644 index 000000000..2169b9c0e --- /dev/null +++ b/library/bootstrap-colorpicker/.jshintrc @@ -0,0 +1,18 @@ +{ + "bitwise": true, + "browser": true, + "curly": true, + "eqeqeq": true, + "eqnull": true, + "esnext": true, + "immed": true, + "jquery": true, + "latedef": true, + "newcap": true, + "noarg": true, + "node": true, + "strict": false, + "trailing": true, + "undef": true, + "predef" : ["Modernizr"] +} diff --git a/library/bootstrap-colorpicker/.travis.yml b/library/bootstrap-colorpicker/.travis.yml new file mode 100644 index 000000000..a06142ac8 --- /dev/null +++ b/library/bootstrap-colorpicker/.travis.yml @@ -0,0 +1,7 @@ +language: node_js +node_js: + - "0.10" +before_script: + - npm install -g grunt-cli + +script: grunt --verbose --force \ No newline at end of file diff --git a/library/bootstrap-colorpicker/Gruntfile.js b/library/bootstrap-colorpicker/Gruntfile.js new file mode 100644 index 000000000..597a1c8e4 --- /dev/null +++ b/library/bootstrap-colorpicker/Gruntfile.js @@ -0,0 +1,129 @@ +'use strict'; +module.exports = function(grunt) { + + grunt.initConfig({ + recess: { + dist: { + options: { + compile: true, + compress: false + }, + files: { + 'dist/css/bootstrap-colorpicker.css': [ + 'src/less/colorpicker.less' + ] + } + }, + distMin: { + options: { + compile: true, + compress: true + }, + files: { + 'dist/css/bootstrap-colorpicker.min.css': [ + 'src/less/colorpicker.less' + ] + } + } + }, + jshint: { + options: { + jshintrc: '.jshintrc' + }, + files: [ + 'Gruntfile.js', + 'src/js/commits.js', + 'src/js/docs.js', + 'dist/js/*.js' + ] + }, + jsbeautifier: { + htmlFiles: ['index.html'], + srcFiles: ['src/js/*.js'], + distFiles: ['dist/js/bootstrap-colorpicker.js'] + }, + combine: { + dist: { + input: 'src/js/colorpicker.js', + output: 'dist/js/bootstrap-colorpicker.js', + tokens: [{ + token: "'{{color}}';", + file: 'src/js/colorpicker-color.js', + }] + } + }, + uglify: { + dist: { + files: { + 'dist/js/bootstrap-colorpicker.min.js': [ + 'dist/js/bootstrap-colorpicker.js' + ] + } + } + }, + bake: { + options: { + condense: true, + indent: 4 + }, + dist: { + files: { + 'index.html': ['src/docs.html'] + } + } + }, + watch: { + less: { + files: [ + 'src/less/*.less' + ], + tasks: ['recess'] + }, + js: { + files: [ + 'src/js/*.js' + ], + tasks: ['jsbeautifier:srcFiles', 'combine', 'jsbeautifier:distFiles', 'uglify', 'jshint'] + }, + html: { + files: [ + 'src/*.html' + ], + tasks: ['bake', 'jsbeautifier:htmlFiles'] + } + }, + clean: { + dist: [ + 'index.html', + 'dist/css', + 'dist/js/*.js' + ] + } + }); + + // Load tasks + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-bake'); + grunt.loadNpmTasks('grunt-recess'); + grunt.loadNpmTasks('grunt-jsbeautifier'); + grunt.loadNpmTasks('grunt-combine'); + + // Register tasks + grunt.registerTask('default', [ + 'clean', + 'recess', + 'jsbeautifier:srcFiles', + 'combine', + 'jsbeautifier:distFiles', + 'uglify', + 'bake', + 'jsbeautifier:htmlFiles' + ]); + grunt.registerTask('dev', [ + 'watch' + ]); + +}; \ No newline at end of file diff --git a/library/bootstrap-colorpicker/LICENSE b/library/bootstrap-colorpicker/LICENSE new file mode 100644 index 000000000..a37331e73 --- /dev/null +++ b/library/bootstrap-colorpicker/LICENSE @@ -0,0 +1,13 @@ +Copyright 2012 Stefan Petre + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. \ No newline at end of file diff --git a/library/bootstrap-colorpicker/README.md b/library/bootstrap-colorpicker/README.md new file mode 100644 index 000000000..57a85d55c --- /dev/null +++ b/library/bootstrap-colorpicker/README.md @@ -0,0 +1,19 @@ +# Bootstrap Colorpicker 2.0 + +[![Build Status](https://travis-ci.org/mjolnic/bootstrap-colorpicker.png)](https://travis-ci.org/mjolnic/bootstrap-colorpicker) + +Originally written by [Stefan Petre](http://www.eyecon.ro/) + +Read the documentation [here](http://mjolnic.github.io/bootstrap-colorpicker/) + +## Contributing + +* All the sources are compiled using Grunt, please do not modify dist files directly +* If you modify some source code, please recompile the project dist files +* Check that the index.html demos aren't broken (modify if necessary) +* Test your code at least in Chrome, Firefox and IE >= 9 + +Thanks =) + +[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/mjolnic/bootstrap-colorpicker/trend.png)](https://bitdeli.com/free "Bitdeli Badge") + diff --git a/library/bootstrap-colorpicker/bower.json b/library/bootstrap-colorpicker/bower.json new file mode 100644 index 000000000..62cda4fc0 --- /dev/null +++ b/library/bootstrap-colorpicker/bower.json @@ -0,0 +1,8 @@ +{ + "name": "mjolnic-bootstrap-colorpicker", + "version": "2.0.0", + "dependencies": { + "jquery": "~1.10.2", + "bootstrap": "~3.0" + } +} diff --git a/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css b/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css new file mode 100644 index 000000000..28d2bca77 --- /dev/null +++ b/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css @@ -0,0 +1,214 @@ +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/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 { + float: left; + width: 100px; + height: 100px; + cursor: crosshair; + background-image: url("../img/bootstrap-colorpicker/saturation.png"); +} + +.colorpicker-saturation i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 5px; + height: 5px; + margin: -4px 0 0 -4px; + border: 1px solid #000; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-saturation i b { + display: block; + width: 5px; + height: 5px; + border: 1px solid #fff; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.colorpicker-hue, +.colorpicker-alpha { + float: left; + width: 15px; + height: 100px; + margin-bottom: 4px; + margin-left: 4px; + cursor: row-resize; +} + +.colorpicker-hue i, +.colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 1px; + margin-top: -1px; + background: #000; + border-top: 1px solid #fff; +} + +.colorpicker-hue { + background-image: url("../img/bootstrap-colorpicker/hue.png"); +} + +.colorpicker-alpha { + display: none; + background-image: url("../img/bootstrap-colorpicker/alpha.png"); +} + +.colorpicker { + top: 0; + left: 0; + z-index: 2500; + min-width: 130px; + padding: 4px; + margin-top: 1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + *zoom: 1; +} + +.colorpicker:before, +.colorpicker:after { + display: table; + line-height: 0; + content: ""; +} + +.colorpicker:after { + clear: both; +} + +.colorpicker:before { + position: absolute; + top: -7px; + left: 6px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.colorpicker:after { + position: absolute; + top: -6px; + left: 7px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; +} + +.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-element .input-group-addon i { + display: block; + width: 16px; + height: 16px; + cursor: pointer; +} + +.colorpicker.colorpicker-inline { + position: relative; + display: inline-block; + float: none; +} + +.colorpicker.colorpicker-horizontal { + width: 110px; + height: auto; + min-width: 110px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-saturation { + margin-bottom: 4px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-color { + width: 100px; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue, +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + float: left; + width: 100px; + height: 15px; + margin-bottom: 4px; + margin-left: 0; + cursor: col-resize; +} + +.colorpicker.colorpicker-horizontal .colorpicker-hue i, +.colorpicker.colorpicker-horizontal .colorpicker-alpha i { + position: absolute; + top: 0; + left: 0; + display: block; + width: 1px; + height: 15px; + margin-top: 0; + background: #ffffff; + border: none; +} + +.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; +} \ No newline at end of file diff --git a/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css b/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css new file mode 100644 index 000000000..d48417fac --- /dev/null +++ b/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css @@ -0,0 +1,9 @@ +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/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{float:left;width:100px;height:100px;cursor:crosshair;background-image:url("../img/bootstrap-colorpicker/saturation.png")}.colorpicker-saturation i{position:absolute;top:0;left:0;display:block;width:5px;height:5px;margin:-4px 0 0 -4px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-saturation i b{display:block;width:5px;height:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-hue,.colorpicker-alpha{float:left;width:15px;height:100px;margin-bottom:4px;margin-left:4px;cursor:row-resize}.colorpicker-hue i,.colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:100%;height:1px;margin-top:-1px;background:#000;border-top:1px solid #fff}.colorpicker-hue{background-image:url("../img/bootstrap-colorpicker/hue.png")}.colorpicker-alpha{display:none;background-image:url("../img/bootstrap-colorpicker/alpha.png")}.colorpicker{top:0;left:0;z-index:2500;min-width:130px;padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*zoom:1}.colorpicker:before,.colorpicker:after{display:table;line-height:0;content:""}.colorpicker:after{clear:both}.colorpicker:before{position:absolute;top:-7px;left:6px;display:inline-block;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,0.2);content:''}.colorpicker:after{position:absolute;top:-6px;left:7px;display:inline-block;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent;content:''}.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-element .input-group-addon i{display:block;width:16px;height:16px;cursor:pointer}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none}.colorpicker.colorpicker-horizontal{width:110px;height:auto;min-width:110px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-hue,.colorpicker.colorpicker-horizontal .colorpicker-alpha{float:left;width:100px;height:15px;margin-bottom:4px;margin-left:0;cursor:col-resize}.colorpicker.colorpicker-horizontal .colorpicker-hue i,.colorpicker.colorpicker-horizontal .colorpicker-alpha i{position:absolute;top:0;left:0;display:block;width:1px;height:15px;margin-top:0;background:#fff;border: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} \ No newline at end of file diff --git a/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha-horizontal.png b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha-horizontal.png new file mode 100644 index 000000000..d0a65c08b Binary files /dev/null and b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha-horizontal.png differ diff --git a/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha.png b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha.png new file mode 100644 index 000000000..38043f1c8 Binary files /dev/null and b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/alpha.png differ diff --git a/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue-horizontal.png b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue-horizontal.png new file mode 100644 index 000000000..a0d9add8e Binary files /dev/null and b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue-horizontal.png differ diff --git a/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue.png b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue.png new file mode 100644 index 000000000..d89560e99 Binary files /dev/null and b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/hue.png differ diff --git a/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/saturation.png b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/saturation.png new file mode 100644 index 000000000..594ae50ed Binary files /dev/null and b/library/bootstrap-colorpicker/dist/img/bootstrap-colorpicker/saturation.png differ diff --git a/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js b/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js new file mode 100644 index 000000000..15f9b9ecb --- /dev/null +++ b/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js @@ -0,0 +1,951 @@ +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/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 + * + * @todo Update DOCS + */ +(function($) { + 'use strict'; + + // Color object + var Color = function(val) { + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + }; + this.origFormat = null; // original string format + if (val) { + if (val.toLowerCase !== undefined) { + this.setColor(val); + } else if (val.h !== undefined) { + this.value = val; + } + } + }; + + Color.prototype = { + constructor: Color, + _sanitizeNumber: function(val) { + if (typeof val === 'number') { + return val; + } + if (isNaN(val) || (val === null) || (val === '') || (val === undefined)) { + return 1; + } + if (val.toLowerCase !== undefined) { + return parseFloat(val); + } + return 1; + }, + //parse a string to HSB + setColor: function(strVal) { + strVal = strVal.toLowerCase(); + this.value = this.stringToHSB(strVal) ||  { + h: 0, + s: 0, + b: 0, + a: 1 + }; + }, + stringToHSB: function(strVal) { + strVal = strVal.toLowerCase(); + 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 = 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); + } + that.origFormat = format; + return false; + } + return true; + }); + return result; + }, + setHue: function(h) { + this.value.h = 1 - h; + }, + setSaturation: function(s) { + this.value.s = s; + }, + setBrightness: function(b) { + this.value.b = 1 - b; + }, + setAlpha: function(a) { + this.value.a = parseInt((1 - a) * 100, 10) / 100; + }, + toRGB: function(h, s, v, a) { + h = h || this.value.h; + s = s || this.value.s; + v = v || this.value.b; + a = a || this.value.a; + + var r, g, b, i, f, p, q, t; + if (h && s === undefined && v === undefined) { + s = h.s, v = h.v, h = h.h; + } + i = Math.floor(h * 6); + f = h * 6 - i; + p = v * (1 - s); + q = v * (1 - f * s); + t = v * (1 - (1 - f) * s); + switch (i % 6) { + case 0: + r = v, g = t, b = p; + break; + case 1: + r = q, g = v, b = p; + break; + case 2: + r = p, g = v, b = t; + break; + case 3: + r = p, g = q, b = v; + break; + case 4: + r = t, g = p, b = v; + break; + case 5: + r = v, g = p, b = q; + break; + } + return { + r: Math.floor(r * 255), + g: Math.floor(g * 255), + b: Math.floor(b * 255), + a: a + }; + }, + toHex: function(h, s, b, a) { + var rgb = this.toRGB(h, s, b, a); + return '#' + ((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(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; + + var H = h, + L = (2 - s) * b, + S = s * b; + if (L > 0 && L <= 1) { + S /= L; + } else { + S /= 2 - L; + } + L /= 2; + if (S > 1) { + S = 1; + } + return { + h: isNaN(H) ? 0 : H, + s: isNaN(S) ? 0 : S, + l: isNaN(L) ? 0 : L, + a: isNaN(a) ? 0 : a, + }; + }, + RGBtoHSB: function(r, g, b, a) { + r /= 255; + g /= 255; + b /= 255; + + var H, S, V, C; + V = Math.max(r, g, b); + C = V - Math.min(r, g, b); + H = (C === 0 ? null : + V === r ? (g - b) / C : + V === g ? (b - r) / C + 2 : + (r - g) / C + 4 + ); + H = ((H + 360) % 6) * 60 / 360; + S = C === 0 ? 0 : C / V; + return { + h: this._sanitizeNumber(H), + s: S, + b: V, + a: this._sanitizeNumber(a) + }; + }, + HueToRGB: function(p, q, h) { + if (h < 0) { + h += 1; + } else if (h > 1) { + h -= 1; + } + if ((h * 6) < 1) { + return p + (q - p) * h * 6; + } else if ((h * 2) < 1) { + return q; + } else if ((h * 3) < 2) { + return p + (q - p) * ((2 / 3) - h) * 6; + } else { + return p; + } + }, + HSLtoRGB: function(h, s, l, a) { + if (s < 0) { + s = 0; + } + var q; + if (l <= 0.5) { + q = l * (1 + s); + } else { + q = l + s - (l * s); + } + + var p = 2 * l - q; + + var tr = h + (1 / 3); + var tg = h; + var tb = h - (1 / 3); + + var r = Math.round(this.HueToRGB(p, q, tr) * 255); + var g = Math.round(this.HueToRGB(p, q, tg) * 255); + var b = Math.round(this.HueToRGB(p, q, tb) * 255); + return [r, g, b, this._sanitizeNumber(a)]; + }, + toString: function(format) { + format = format ||  'rgba'; + switch (format) { + case 'rgb': + { + var rgb = this.toRGB(); + return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'; + } + break; + case 'rgba': + { + var rgb = this.toRGB(); + return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')'; + } + break; + case 'hsl': + { + var hsl = this.toHSL(); + return 'hsl(' + Math.round(hsl.h * 360) + ',' + Math.round(hsl.s * 100) + '%,' + Math.round(hsl.l * 100) + '%)'; + } + break; + case 'hsla': + { + var hsl = this.toHSL(); + return 'hsla(' + Math.round(hsl.h * 360) + ',' + Math.round(hsl.s * 100) + '%,' + Math.round(hsl.l * 100) + '%,' + hsl.a + ')'; + } + break; + case 'hex': + { + return this.toHex(); + } + break; + default: + { + return false; + } + break; + } + }, + // a set of RE's that can match strings and generate color tuples. + // from John Resig color plugin + // https://github.com/jquery/jquery-color/ + stringParsers: [{ + re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1], 16), + parseInt(execResult[2], 16), + parseInt(execResult[3], 16), + 1 + ]; + } + }, { + re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1] + execResult[1], 16), + parseInt(execResult[2] + execResult[2], 16), + parseInt(execResult[3] + execResult[3], 16), + 1 + ]; + } + }, { + re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + 1 + ]; + } + }, { + re: /rgb\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[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(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + execResult[4] + ]; + } + }, { + re: /rgba\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/, + format: 'rgba', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[3], + execResult[4] + ]; + } + }, { + re: /hsl\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*?\)/, + format: 'hsl', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + re: /hsla\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/, + format: 'hsla', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + //predefined color name + re: /^([a-z]{3,})$/, + format: 'alias', + parse: function(execResult) { + var hexval = this.colorNameToHex(execResult[0]) ||  '#000000'; + var match = this.stringParsers[0].re.exec(hexval), + values = match && this.stringParsers[0].parse.apply(this, [match]); + return values; + } + }], + colorNameToHex: function(name) { + // 140 predefined colors from the HTML Colors spec + var colors = { + "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" + }; + + if (typeof colors[name.toLowerCase()] !== 'undefined') { + return colors[name.toLowerCase()]; + } + return false; + } + }; + + + var defaults = { + horizontal: false, // horizontal mode layout ? + inline: false, //forces to show the colorpicker as an inline element + color: false, //forces a color + format: false, //forces a format + input: 'input', // children input selector + container: false, // container selector + component: '.add-on, .input-group-addon', // children component selector + sliders: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setHue' + }, + alpha: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setAlpha' + } + }, + slidersHorz: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setHue', + callTop: false + }, + alpha: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setAlpha', + callTop: false + } + }, + template: '
' + + '
' + + '
' + + '
' + + '
' + + '
' + }; + + var Colorpicker = function(element, options) { + this.element = $(element).addClass('colorpicker-element'); + this.options = $.extend({}, defaults, this.element.data(), options); + this.component = this.options.component; + this.component = (this.component !== false) ? this.element.find(this.component) : false; + if (this.component && (this.component.length === 0)) { + this.component = false; + } + this.container = (this.options.container === true) ? this.element : this.options.container; + this.container = (this.container !== false) ? $(this.container) : false; + + // Is the element an input? Should we search inside for any input? + this.input = this.element.is('input') ? this.element : (this.options.input ? + this.element.find(this.options.input) : false); + if (this.input && (this.input.length === 0)) { + this.input = false; + } + // Set HSB color + this.color = new Color(this.options.color !== false ? this.options.color : this.getValue()); + this.format = this.options.format !== false ? this.options.format : this.color.origFormat; + + // Setup picker + this.picker = $(this.options.template); + if (this.options.inline) { + this.picker.addClass('colorpicker-inline colorpicker-visible'); + } else { + this.picker.addClass('colorpicker-hidden'); + } + if (this.options.horizontal) { + this.picker.addClass('colorpicker-horizontal'); + } + if (this.format === 'rgba' || this.format === 'hsla') { + this.picker.addClass('colorpicker-with-alpha'); + } + this.picker.on('mousedown.colorpicker', $.proxy(this.mousedown, this)); + this.picker.appendTo(this.container ? this.container : $('body')); + + // Bind events + if (this.input !== false) { + this.input.on({ + 'keyup.colorpicker': $.proxy(this.keyup, this) + }); + if (this.component === false) { + this.element.on({ + 'focus.colorpicker': $.proxy(this.show, this) + }); + } + if (this.options.inline === false) { + this.element.on({ + 'focusout.colorpicker': $.proxy(this.hide, this) + }); + } + } + + if (this.component !== false) { + this.component.on({ + 'click.colorpicker': $.proxy(this.show, this) + }); + } + + if ((this.input === false) && (this.component === false)) { + this.element.on({ + 'click.colorpicker': $.proxy(this.show, this) + }); + } + this.update(); + + $($.proxy(function() { + this.element.trigger('create'); + }, this)); + }; + + Colorpicker.version = '2.0.0-beta'; + + Colorpicker.Color = Color; + + Colorpicker.prototype = { + constructor: Colorpicker, + destroy: function() { + this.picker.remove(); + this.element.removeData('colorpicker').off('.colorpicker'); + if (this.input !== false) { + this.input.off('.colorpicker'); + } + if (this.component !== false) { + this.component.off('.colorpicker'); + } + this.element.removeClass('colorpicker-element'); + this.element.trigger({ + type: 'destroy' + }); + }, + reposition: function() { + if (this.options.inline !== false) { + return false; + } + var offset = this.component ? this.component.offset() : this.element.offset(); + this.picker.css({ + top: offset.top + (this.component ? this.component.outerHeight() : this.element.outerHeight()), + left: offset.left + }); + }, + show: function(e) { + if (this.isDisabled()) { + return false; + } + this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden'); + this.reposition(); + $(window).on('resize.colorpicker', $.proxy(this.reposition, this)); + if (!this.hasInput() && e) { + if (e.stopPropagation && e.preventDefault) { + e.stopPropagation(); + e.preventDefault(); + } + } + if (this.options.inline === false) { + $(window.document).on({ + 'mousedown.colorpicker': $.proxy(this.hide, this) + }); + } + this.element.trigger({ + type: 'showPicker', + color: this.color + }); + }, + hide: function() { + this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible'); + $(window).off('resize.colorpicker', this.reposition); + $(document).off({ + 'mousedown.colorpicker': this.hide + }); + this.update(); + this.element.trigger({ + type: 'hidePicker', + color: this.color + }); + }, + updateData: function(val) { + val = val ||  this.color.toString(this.format); + this.element.data('color', val); + return val; + }, + updateInput: function(val) { + val = val ||  this.color.toString(this.format); + if (this.input !== false) { + this.input.prop('value', val); + } + return val; + }, + updatePicker: function(val) { + if (val !== undefined) { + this.color = new Color(val); + } + var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz; + var icns = this.picker.find('i'); + if (icns.length === 0) { + return; + } + if (this.options.horizontal === false) { + sl = this.options.sliders; + icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end() + .eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a)); + } else { + sl = this.options.slidersHorz; + icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end() + .eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a)); + } + icns.eq(0).css({ + '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)); + return val; + }, + updateComponent: function(val) { + val = val ||  this.color.toString(this.format); + if (this.component !== false) { + var icn = this.component.find('i').eq(0); + if (icn.length > 0) { + icn.css({ + 'backgroundColor': val + }); + } else { + this.component.css({ + 'backgroundColor': val + }); + } + } + return val; + }, + update: function(force) { + var val = this.updateComponent(); + if ((this.getValue(false) !== false) || (force === true)) { + // Update input/data only if the current value is not blank + this.updateInput(val); + this.updateData(val); + } + this.updatePicker(); + return val; + + }, + setValue: function(val) { // set color manually + this.color = new Color(val); + this.update(); + this.element.trigger({ + type: 'changeColor', + color: this.color, + value: val + }); + }, + getValue: function(defaultValue) { + defaultValue = (defaultValue === undefined) ? '#000000' : defaultValue; + var val; + if (this.hasInput()) { + val = this.input.val(); + } else { + val = this.element.data('color'); + } + if ((val === undefined) || (val === '') || (val === null)) { + // if not defined or empty, return default + val = defaultValue; + } + return val; + }, + hasInput: function() { + return (this.input !== false); + }, + isDisabled: function() { + if (this.hasInput()) { + return (this.input.prop('disabled') === true); + } + return false; + }, + disable: function() { + if (this.hasInput()) { + this.input.prop('disabled', true); + return true; + } + return false; + }, + enable: function() { + if (this.hasInput()) { + this.input.prop('disabled', false); + return true; + } + return false; + }, + currentSlider: null, + mousePointer: { + left: 0, + top: 0 + }, + mousedown: function(e) { + e.stopPropagation(); + e.preventDefault(); + + var target = $(e.target); + + //detect the slider and set the limits and callbacks + var zone = target.closest('div'); + var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders; + if (!zone.is('.colorpicker')) { + if (zone.is('.colorpicker-saturation')) { + this.currentSlider = $.extend({}, sl.saturation); + } else if (zone.is('.colorpicker-hue')) { + this.currentSlider = $.extend({}, sl.hue); + } else if (zone.is('.colorpicker-alpha')) { + this.currentSlider = $.extend({}, sl.alpha); + } else { + return false; + } + var offset = zone.offset(); + //reference to guide's style + this.currentSlider.guide = zone.find('i')[0].style; + this.currentSlider.left = e.pageX - offset.left; + this.currentSlider.top = e.pageY - offset.top; + this.mousePointer = { + left: e.pageX, + top: e.pageY + }; + //trigger mousemove to move the guide to the current position + $(document).on({ + 'mousemove.colorpicker': $.proxy(this.mousemove, this), + 'mouseup.colorpicker': $.proxy(this.mouseup, this) + }).trigger('mousemove'); + } + return false; + }, + mousemove: function(e) { + e.stopPropagation(); + e.preventDefault(); + var left = Math.max( + 0, + Math.min( + this.currentSlider.maxLeft, + this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left) + ) + ); + var top = Math.max( + 0, + Math.min( + this.currentSlider.maxTop, + this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top) + ) + ); + this.currentSlider.guide.left = left + 'px'; + this.currentSlider.guide.top = top + 'px'; + if (this.currentSlider.callLeft) { + this.color[this.currentSlider.callLeft].call(this.color, left / 100); + } + if (this.currentSlider.callTop) { + this.color[this.currentSlider.callTop].call(this.color, top / 100); + } + this.update(true); + + this.element.trigger({ + type: 'changeColor', + color: this.color + }); + return false; + }, + mouseup: function(e) { + e.stopPropagation(); + e.preventDefault(); + $(document).off({ + 'mousemove.colorpicker': this.mousemove, + 'mouseup.colorpicker': this.mouseup + }); + return false; + }, + keyup: function(e) { + if ((e.keyCode === 38)) { + if (this.color.value.a < 1) { + this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100; + } + this.update(true); + } else if ((e.keyCode === 40)) { + if (this.color.value.a > 0) { + this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100; + } + this.update(true); + } else { + var val = this.input.val(); + this.color = new Color(val); + if (this.getValue(false) !== false) { + this.updateData(); + this.updateComponent(); + this.updatePicker(); + } + } + this.element.trigger({ + type: 'changeColor', + color: this.color, + value: val + }); + } + }; + + $.colorpicker = Colorpicker; + + $.fn.colorpicker = function(option) { + var pickerArgs = arguments; + + return this.each(function() { + var $this = $(this), + inst = $this.data('colorpicker'), + options = ((typeof option === 'object') ? option : {}); + if ((!inst) && (typeof option !== 'string')) { + $this.data('colorpicker', new Colorpicker(this, options)); + } else { + if (typeof option === 'string') { + inst[option].apply(inst, Array.prototype.slice.call(pickerArgs, 1)); + } + } + }); + }; + + $.fn.colorpicker.constructor = Colorpicker; + +})(window.jQuery); diff --git a/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js b/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js new file mode 100644 index 000000000..16802aee8 --- /dev/null +++ b/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js @@ -0,0 +1 @@ +!function(a){"use strict";var b=function(a){this.value={h:0,s:0,b:0,a:1},this.origFormat=null,a&&(void 0!==a.toLowerCase?this.setColor(a):void 0!==a.h&&(this.value=a))};b.prototype={constructor:b,_sanitizeNumber:function(a){return"number"==typeof a?a:isNaN(a)||null===a||""===a||void 0===a?1:void 0!==a.toLowerCase?parseFloat(a):1},setColor:function(a){a=a.toLowerCase(),this.value=this.stringToHSB(a)||{h:0,s:0,b:0,a:1}},stringToHSB:function(b){b=b.toLowerCase();var c=this,d=!1;return a.each(this.stringParsers,function(a,e){var f=e.re.exec(b),g=f&&e.parse.apply(c,[f]),h=e.format||"rgba";return g?(d=h.match(/hsla?/)?c.RGBtoHSB.apply(c,c.HSLtoRGB.apply(c,g)):c.RGBtoHSB.apply(c,g),c.origFormat=h,!1):!0}),d},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=parseInt(100*(1-a),10)/100},toRGB: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,f,g,h,i,j,k,l;switch(a&&void 0===b&&void 0===c&&(b=a.s,c=a.v,a=a.h),h=Math.floor(6*a),i=6*a-h,j=c*(1-b),k=c*(1-i*b),l=c*(1-(1-i)*b),h%6){case 0:e=c,f=l,g=j;break;case 1:e=k,f=c,g=j;break;case 2:e=j,f=c,g=l;break;case 3:e=j,f=k,g=c;break;case 4:e=l,f=j,g=c;break;case 5:e=c,f=j,g=k}return{r:Math.floor(255*e),g:Math.floor(255*f),b:Math.floor(255*g),a:d}},toHex:function(a,b,c,d){var e=this.toRGB(a,b,c,d);return"#"+(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&&1>=f?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}},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 0>c?c+=1:c>1&&(c-=1),1>6*c?a+(b-a)*c*6:1>2*c?b:2>3*c?a+(b-a)*(2/3-c)*6:a},HSLtoRGB:function(a,b,c,d){0>b&&(b=0);var e;e=.5>=c?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){switch(a=a||"rgba"){case"rgb":var b=this.toRGB();return"rgb("+b.r+","+b.g+","+b.b+")";case"rgba":var b=this.toRGB();return"rgba("+b.r+","+b.g+","+b.b+","+b.a+")";case"hsl":var c=this.toHSL();return"hsl("+Math.round(360*c.h)+","+Math.round(100*c.s)+"%,"+Math.round(100*c.l)+"%)";case"hsla":var c=this.toHSL();return"hsla("+Math.round(360*c.h)+","+Math.round(100*c.s)+"%,"+Math.round(100*c.l)+"%,"+c.a+")";case"hex":return this.toHex();default:return!1}},stringParsers:[{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]}},{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-z]{3,})$/,format:"alias",parse:function(a){var b=this.colorNameToHex(a[0])||"#000000",c=this.stringParsers[0].re.exec(b),d=c&&this.stringParsers[0].parse.apply(this,[c]);return d}}],colorNameToHex:function(a){var b={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"};return"undefined"!=typeof b[a.toLowerCase()]?b[a.toLowerCase()]:!1}};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:'
'},d=function(d,e){this.element=a(d).addClass("colorpicker-element"),this.options=a.extend({},c,this.element.data(),e),this.component=this.options.component,this.component=this.component!==!1?this.element.find(this.component):!1,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):!1,this.input=this.element.is("input")?this.element:this.options.input?this.element.find(this.options.input):!1,this.input&&0===this.input.length&&(this.input=!1),this.color=new b(this.options.color!==!1?this.options.color:this.getValue()),this.format=this.options.format!==!1?this.options.format:this.color.origFormat,this.picker=a(this.options.template),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.picker.addClass("colorpicker-with-alpha"),this.picker.on("mousedown.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.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.update(),a(a.proxy(function(){this.element.trigger("create")},this))};d.version="2.0.0-beta",d.Color=b,d.prototype={constructor:d,destroy:function(){this.picker.remove(),this.element.removeData("colorpicker").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)return!1;var a=this.component?this.component.offset():this.element.offset();this.picker.css({top:a.top+(this.component?this.component.outerHeight():this.element.outerHeight()),left:a.left})},show:function(b){return this.isDisabled()?!1:(this.picker.addClass("colorpicker-visible").removeClass("colorpicker-hidden"),this.reposition(),a(window).on("resize.colorpicker",a.proxy(this.reposition,this)),!this.hasInput()&&b&&b.stopPropagation&&b.preventDefault&&(b.stopPropagation(),b.preventDefault()),this.options.inline===!1&&a(window.document).on({"mousedown.colorpicker":a.proxy(this.hide,this)}),this.element.trigger({type:"showPicker",color:this.color}),void 0)},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){return a=a||this.color.toString(this.format),this.input!==!1&&this.input.prop("value",a),a},updatePicker:function(a){void 0!==a&&(this.color=new b(a));var c=this.options.horizontal===!1?this.options.sliders:this.options.slidersHorz,d=this.picker.find("i");return 0!==d.length?(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):void 0},updateComponent:function(a){if(a=a||this.color.toString(this.format),this.component!==!1){var b=this.component.find("i").eq(0);b.length>0?b.css({backgroundColor:a}):this.component.css({backgroundColor:a})}return a},update:function(a){var b=this.updateComponent();return(this.getValue(!1)!==!1||a===!0)&&(this.updateInput(b),this.updateData(b)),this.updatePicker(),b},setValue:function(a){this.color=new b(a),this.update(),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:!1},disable:function(){return this.hasInput()?(this.input.prop("disabled",!0),!0):!1},enable:function(){return this.hasInput()?(this.input.prop("disabled",!1),!0):!1},currentSlider:null,mousePointer:{left:0,top:0},mousedown:function(b){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),"mouseup.colorpicker":a.proxy(this.mouseup,this)}).trigger("mousemove")}return!1},mousemove:function(a){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/100),this.currentSlider.callTop&&this.color[this.currentSlider.callTop].call(this.color,c/100),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,"mouseup.colorpicker":this.mouseup}),!1},keyup:function(a){if(38===a.keyCode)this.color.value.a<1&&(this.color.value.a=Math.round(100*(this.color.value.a+.01))/100),this.update(!0);else if(40===a.keyCode)this.color.value.a>0&&(this.color.value.a=Math.round(100*(this.color.value.a-.01))/100),this.update(!0);else{var c=this.input.val();this.color=new b(c),this.getValue(!1)!==!1&&(this.updateData(),this.updateComponent(),this.updatePicker())}this.element.trigger({type:"changeColor",color:this.color,value:c})}},a.colorpicker=d,a.fn.colorpicker=function(b){var c=arguments;return this.each(function(){var e=a(this),f=e.data("colorpicker"),g="object"==typeof b?b:{};f||"string"==typeof b?"string"==typeof b&&f[b].apply(f,Array.prototype.slice.call(c,1)):e.data("colorpicker",new d(this,g))})},a.fn.colorpicker.constructor=d}(window.jQuery); \ No newline at end of file diff --git a/library/bootstrap-colorpicker/index.html b/library/bootstrap-colorpicker/index.html new file mode 100644 index 000000000..6686b92e4 --- /dev/null +++ b/library/bootstrap-colorpicker/index.html @@ -0,0 +1,296 @@ + + + + + + + + Colorpicker for Twitter Bootstrap + + + + + + + + +
+
+
+

Bootstrap Colorpicker 2.0 for Twitter Bootstrap

+
+
+
+

+ Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon + and maintained in Github by @mjolnic and the community +
+
It basically adds a color picker to a field or any other element. +

+
    +
  • can be used as a component
    • +
  • alpha picker
    • +
  • multiple formats: hex, rgb, rgba, hsl, hsla
    • +
+
+ +
+
+
+
+ +
+

Examples

+
+

1) Attached to a field with hex format specified via options:

+
+ + 
+<input type="text" class="demo1" value="#5367ce" />
+<script>
+    $(function(){
+        $('.demo1').colorpicker();
+    });
+</script>
+
+
+
+

As a component:

+
+
+ + +
+ 
+<div class="input-group demo2">
+    <input type="text" value="" class="form-control" />
+    <span class="input-group-addon"><i></i></span>
+</div>
+<script>
+    $(function(){
+        $('.demo2').colorpicker();
+    });
+</script>
+
+
+

Using events to work with the color:

+
+ Change background color +
+

Horizonal mode:

+
+ +
+

Inline mode:

+
+
+
+
+

Enabled / disabled

+
+
+ + +
+
+ Enable + Disable +
+ Destroy plugin instances + Create instances again +
+
+

Documentation

+

Call the colopicker via javascript:

+ 
$('.sample-selector').colorpicker({ /*options...*/ });
+

Options

+

+ You can set colorpicker options either as a plugin parameter or data-* attributes +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
formatstringfalseIf not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected.
colorstringfalseIf not false, sets the color to this value.
containerstring or jQuery ElementfalseIf not false, the picker will be contained inside this element, otherwise it will be appended to the document body.
componentstring or jQuery Element'.add-on, .input-group-addon'Children selector for the component or element that trigger the colorpicker and which background color will change (needs an inner <i> element).
inputstring or jQuery Element'input'Children selector for the input that will store the picker selected value.
horizontalbooleanfalseIf true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
templatestring[...] + Customizes the default colorpicker HTML template.
+ +

+ (behind this line, docs need to be updated) +

+ +

Methods

+

.colorpicker(options)

+

Initializes an colorpicker.

+

.colorpicker('show')

+

Show the color picker

+

.colorpicker('update')

+

Refreshes the widget colors (this is done automatically)

+

.colorpicker('hide')

+

Hide the color picker

+

.colorpicker('disable')

+

Disable the color picker.

+

.colorpicker('enable')

+

Enable the color picker.

+

.colorpicker('place')

+

Updates the color picker's position relative to the element

+

.colorpicker('destroy')

+

Destroys the colorpicker widget and unbind all .colorpicker events from the element and component

+

.colorpicker('setValue', value)

+

Set a new value for the color picker (also for the input or component value). Triggers 'changeColor' event.

+

Color object methods

+

Each triggered events have a color object used internally by the picker. This object has several useful methods.

+

.setColor(value)

+

Set a new color. The value is parsed and tries to do a quess on the format.

+

.setHue(value)

+

Set the HUE with a value between 0 and 1.

+

.setSaturation(value)

+

Set the saturation with a value between 0 and 1.

+

.setLightness(value)

+

Set the lightness with a value between 0 and 1.

+

.setAlpha(value)

+

Set the transparency with a value between 0 and 1.

+

.toRGB()

+

Returns a hash with red, green, blue and alpha.

+

.toHex()

+

Returns a string with HEX format for the current color.

+

.toHSL()

+

Returns a hash with HSLA values.

+

Events

+

The colorpicker plugin exposes some events (with optional .colorpicker namespace)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventDescription
createThis event fires immediately when the color picker is created.
showPickerThis event fires immediately when the color picker is displayed.
hidePickerThis event is fired immediately when the color picker is hidden.
disableThis event is fired immediately when the color picker is disabled, except if it was initialized as disabled.
enableThis event is fired immediately when the color picker is enabled, except upon initialization.
changeColorThis event is fired when the color is changed.
destroyThis event fires immediately when the color picker is destroyed.
+ 
+$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
+  bodyStyle.backgroundColor = ev.color.toHex();
+});
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/library/bootstrap-colorpicker/package.json b/library/bootstrap-colorpicker/package.json new file mode 100644 index 000000000..ebec4007b --- /dev/null +++ b/library/bootstrap-colorpicker/package.json @@ -0,0 +1,33 @@ +{ + "name": "mjolnic-bootstrap-colorpicker", + "version": "2.0.0", + "description": "Colorpicker plugin for Twitter Bootstrap", + "homepage": "http://mjolnic.github.io/bootstrap-colorpicker/", + "repository": { + "type": "git", + "url": "git@github.com:mjolnic/bootstrap-colorpicker.git" + }, + "bugs": { + "url" : "https://github.com/mjolnic/bootstrap-colorpicker/issues" + }, + "keywords": [ + "bootstrap", + "colorpicker" + ], + "author": "Javier Aguilar @mjolnic", + "licenses": [{ + "type": "Apache-2.0", + "url": "http://opensource.org/licenses/Apache-2.0" + }], + "devDependencies": { + "grunt": "~0.4.2", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-jshint": "~0.7.2", + "grunt-recess": "~0.5.0", + "grunt-combine": "~0.8.1", + "grunt-contrib-uglify": "~0.2.7", + "grunt-bake": "~0.3.3", + "grunt-jsbeautifier": "~0.2.3", + "grunt-contrib-watch": "~0.5.3" + } +} \ No newline at end of file diff --git a/library/bootstrap-colorpicker/src/css/docs.css b/library/bootstrap-colorpicker/src/css/docs.css new file mode 100644 index 000000000..5babbf0ee --- /dev/null +++ b/library/bootstrap-colorpicker/src/css/docs.css @@ -0,0 +1,37 @@ +.container { + background: #fff; +} + +h4 ~ p{ + padding-left:20px; +} + +.inl-bl{ + display:inline-block; +} + +.well .markup-heading{ + +} +.well .markup{ + background: #fff; + color: #777; + position: relative; + padding: 45px 15px 15px; + margin: 15px 0 0 0; + background-color: #fff; + border-radius: 0 0 4px 4px; + box-shadow: none; +} + +.well .markup::after{ + content: "Example"; + position: absolute; + top: 15px; + left: 15px; + font-size: 12px; + font-weight: bold; + color: #bbb; + text-transform: uppercase; + letter-spacing: 1px; +} \ No newline at end of file diff --git a/library/bootstrap-colorpicker/src/docs.html b/library/bootstrap-colorpicker/src/docs.html new file mode 100644 index 000000000..8cb150f23 --- /dev/null +++ b/library/bootstrap-colorpicker/src/docs.html @@ -0,0 +1,153 @@ + + +
+

Documentation

+

Call the colopicker via javascript:

+ 
$('.sample-selector').colorpicker({ /*options...*/ });
+

Options

+

+ You can set colorpicker options either as a plugin parameter or data-* attributes +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
formatstringfalseIf not false, forces the color format to be hex, rgb or rgba, otherwise the format is automatically detected.
colorstringfalseIf not false, sets the color to this value.
containerstring or jQuery ElementfalseIf not false, the picker will be contained inside this element, otherwise it will be appended to the document body.
componentstring or jQuery Element'.add-on, .input-group-addon'Children selector for the component or element that trigger the colorpicker and which background color will change (needs an inner <i> element).
inputstring or jQuery Element'input'Children selector for the input that will store the picker selected value.
horizontalbooleanfalseIf true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
templatestring[...]Customizes the default colorpicker HTML template.
+ +

+ (behind this line, docs need to be updated) +

+ +

Methods

+

.colorpicker(options)

+

Initializes an colorpicker.

+

.colorpicker('show')

+

Show the color picker

+

.colorpicker('update')

+

Refreshes the widget colors (this is done automatically)

+

.colorpicker('hide')

+

Hide the color picker

+

.colorpicker('disable')

+

Disable the color picker.

+

.colorpicker('enable')

+

Enable the color picker.

+

.colorpicker('place')

+

Updates the color picker's position relative to the element

+

.colorpicker('destroy')

+

Destroys the colorpicker widget and unbind all .colorpicker events from the element and component

+

.colorpicker('setValue', value)

+

Set a new value for the color picker (also for the input or component value). Triggers 'changeColor' event.

+

Color object methods

+

Each triggered events have a color object used internally by the picker. This object has several useful methods.

+

.setColor(value)

+

Set a new color. The value is parsed and tries to do a quess on the format.

+

.setHue(value)

+

Set the HUE with a value between 0 and 1.

+

.setSaturation(value)

+

Set the saturation with a value between 0 and 1.

+

.setLightness(value)

+

Set the lightness with a value between 0 and 1.

+

.setAlpha(value)

+

Set the transparency with a value between 0 and 1.

+

.toRGB()

+

Returns a hash with red, green, blue and alpha.

+

.toHex()

+

Returns a string with HEX format for the current color.

+

.toHSL()

+

Returns a hash with HSLA values.

+

Events

+

The colorpicker plugin exposes some events (with optional .colorpicker namespace)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventDescription
createThis event fires immediately when the color picker is created.
showPickerThis event fires immediately when the color picker is displayed.
hidePickerThis event is fired immediately when the color picker is hidden.
disableThis event is fired immediately when the color picker is disabled, except if it was initialized as disabled.
enableThis event is fired immediately when the color picker is enabled, except upon initialization.
changeColorThis event is fired when the color is changed.
destroyThis event fires immediately when the color picker is destroyed.
+ 
+$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
+  bodyStyle.backgroundColor = ev.color.toHex();
+});
+
+
+ \ No newline at end of file diff --git a/library/bootstrap-colorpicker/src/examples.html b/library/bootstrap-colorpicker/src/examples.html new file mode 100644 index 000000000..cde7cca16 --- /dev/null +++ b/library/bootstrap-colorpicker/src/examples.html @@ -0,0 +1,60 @@ +
+

Examples

+
+

1) Attached to a field with hex format specified via options:

+
+ + 
+<input type="text" class="demo1" value="#5367ce" />
+<script>
+    $(function(){
+        $('.demo1').colorpicker();
+    });
+</script>
+
+
+
+

As a component:

+
+
+ + +
+ 
+<div class="input-group demo2">
+    <input type="text" value="" class="form-control" />
+    <span class="input-group-addon"><i></i></span>
+</div>
+<script>
+    $(function(){
+        $('.demo2').colorpicker();
+    });
+</script>
+
+
+

Using events to work with the color:

+
+ Change background color +
+

Horizonal mode:

+
+ +
+

Inline mode:

+
+
+
+
+

Enabled / disabled

+
+
+ + +
+
+ Enable + Disable +
+ Destroy plugin instances + Create instances again +
\ No newline at end of file diff --git a/library/bootstrap-colorpicker/src/footer.html b/library/bootstrap-colorpicker/src/footer.html new file mode 100644 index 000000000..1cea02d09 --- /dev/null +++ b/library/bootstrap-colorpicker/src/footer.html @@ -0,0 +1,9 @@ +
+ +
+ + + + + + \ No newline at end of file diff --git a/library/bootstrap-colorpicker/src/header.html b/library/bootstrap-colorpicker/src/header.html new file mode 100644 index 000000000..7e8122050 --- /dev/null +++ b/library/bootstrap-colorpicker/src/header.html @@ -0,0 +1,69 @@ + + + + + + + Colorpicker for Twitter Bootstrap + + + + + + + +
+
+
+

Bootstrap Colorpicker 2.0 for Twitter Bootstrap

+
+
+
+

+ Colorpicker plugin for the Twitter Bootstrap toolkit. Originally written by @eyecon + and maintained in Github by @mjolnic and the community +

It basically adds a color picker to a field or any other element. +

+
    +
  • can be used as a component
    • +
  • alpha picker
    • +
  • multiple formats: hex, rgb, rgba, hsl, hsla
    • +
+
+ +
+
+
+
+ \ No newline at end of file diff --git a/library/bootstrap-colorpicker/src/js/colorpicker-color.js b/library/bootstrap-colorpicker/src/js/colorpicker-color.js new file mode 100644 index 000000000..2e0474067 --- /dev/null +++ b/library/bootstrap-colorpicker/src/js/colorpicker-color.js @@ -0,0 +1,508 @@ +// Color object +var Color = function(val) { + this.value = { + h: 0, + s: 0, + b: 0, + a: 1 + }; + this.origFormat = null; // original string format + if (val) { + if (val.toLowerCase !== undefined) { + this.setColor(val); + } else if (val.h !== undefined) { + this.value = val; + } + } +}; + +Color.prototype = { + constructor: Color, + // 140 predefined colors from the HTML Colors spec + colors : { + "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" + }, + _sanitizeNumber: function(val) { + if (typeof val === 'number') { + return val; + } + if (isNaN(val) || (val === null) || (val === '') || (val === undefined)) { + return 1; + } + if (val.toLowerCase !== undefined) { + return parseFloat(val); + } + return 1; + }, + //parse a string to HSB + setColor: function(strVal) { + strVal = strVal.toLowerCase(); + this.value = this.stringToHSB(strVal) ||  { + h: 0, + s: 0, + b: 0, + a: 1 + }; + }, + stringToHSB: function(strVal) { + strVal = strVal.toLowerCase(); + 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 = 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); + } + that.origFormat = format; + return false; + } + return true; + }); + return result; + }, + setHue: function(h) { + this.value.h = 1 - h; + }, + setSaturation: function(s) { + this.value.s = s; + }, + setBrightness: function(b) { + this.value.b = 1 - b; + }, + setAlpha: function(a) { + this.value.a = parseInt((1 - a) * 100, 10) / 100; + }, + toRGB: function(h, s, v, a) { + h = h || this.value.h; + s = s || this.value.s; + v = v || this.value.b; + a = a || this.value.a; + + var r, g, b, i, f, p, q, t; + if (h && s === undefined && v === undefined) { + s = h.s, v = h.v, h = h.h; + } + i = Math.floor(h * 6); + f = h * 6 - i; + p = v * (1 - s); + q = v * (1 - f * s); + t = v * (1 - (1 - f) * s); + switch (i % 6) { + case 0: + r = v, g = t, b = p; + break; + case 1: + r = q, g = v, b = p; + break; + case 2: + r = p, g = v, b = t; + break; + case 3: + r = p, g = q, b = v; + break; + case 4: + r = t, g = p, b = v; + break; + case 5: + r = v, g = p, b = q; + break; + } + return { + r: Math.floor(r * 255), + g: Math.floor(g * 255), + b: Math.floor(b * 255), + a: a + }; + }, + toHex: function(h, s, b, a) { + var rgb = this.toRGB(h, s, b, a); + return '#' + ((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(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; + + var H = h, + L = (2 - s) * b, + S = s * b; + if (L > 0 && L <= 1) { + S /= L; + } else { + S /= 2 - L; + } + L /= 2; + if (S > 1) { + S = 1; + } + return { + h: isNaN(H) ? 0 : H, + s: isNaN(S) ? 0 : S, + l: isNaN(L) ? 0 : L, + a: isNaN(a) ? 0 : a, + }; + }, + toAlias: function(r, g, b, a) { + var rgb = this.toHex(r, g, b, a); + for(var alias in this.colors){ + if(this.colors[alias] == rgb){ + return alias; + } + } + return false; + }, + RGBtoHSB: function(r, g, b, a) { + r /= 255; + g /= 255; + b /= 255; + + var H, S, V, C; + V = Math.max(r, g, b); + C = V - Math.min(r, g, b); + H = (C === 0 ? null : + V === r ? (g - b) / C : + V === g ? (b - r) / C + 2 : + (r - g) / C + 4 + ); + H = ((H + 360) % 6) * 60 / 360; + S = C === 0 ? 0 : C / V; + return { + h: this._sanitizeNumber(H), + s: S, + b: V, + a: this._sanitizeNumber(a) + }; + }, + HueToRGB: function(p, q, h) { + if (h < 0) { + h += 1; + } else if (h > 1) { + h -= 1; + } + if ((h * 6) < 1) { + return p + (q - p) * h * 6; + } else if ((h * 2) < 1) { + return q; + } else if ((h * 3) < 2) { + return p + (q - p) * ((2 / 3) - h) * 6; + } else { + return p; + } + }, + HSLtoRGB: function(h, s, l, a) { + if (s < 0) { + s = 0; + } + var q; + if (l <= 0.5) { + q = l * (1 + s); + } else { + q = l + s - (l * s); + } + + var p = 2 * l - q; + + var tr = h + (1 / 3); + var tg = h; + var tb = h - (1 / 3); + + var r = Math.round(this.HueToRGB(p, q, tr) * 255); + var g = Math.round(this.HueToRGB(p, q, tg) * 255); + var b = Math.round(this.HueToRGB(p, q, tb) * 255); + return [r, g, b, this._sanitizeNumber(a)]; + }, + toString: function(format) { + format = format ||  'rgba'; + switch (format) { + case 'rgb': + { + var rgb = this.toRGB(); + return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')'; + } + break; + case 'rgba': + { + var rgb = this.toRGB(); + return 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')'; + } + break; + case 'hsl': + { + var hsl = this.toHSL(); + return 'hsl(' + Math.round(hsl.h * 360) + ',' + Math.round(hsl.s * 100) + '%,' + Math.round(hsl.l * 100) + '%)'; + } + break; + case 'hsla': + { + var hsl = this.toHSL(); + return 'hsla(' + Math.round(hsl.h * 360) + ',' + Math.round(hsl.s * 100) + '%,' + Math.round(hsl.l * 100) + '%,' + hsl.a + ')'; + } + break; + case 'hex': + { + return this.toHex(); + } + break; + case 'alias': + return this.toAlias() || this.toHex(); + default: + { + return false; + } + break; + } + }, + // a set of RE's that can match strings and generate color tuples. + // from John Resig color plugin + // https://github.com/jquery/jquery-color/ + stringParsers: [{ + re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1], 16), + parseInt(execResult[2], 16), + parseInt(execResult[3], 16), + 1 + ]; + } + }, { + re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/, + format: 'hex', + parse: function(execResult) { + return [ + parseInt(execResult[1] + execResult[1], 16), + parseInt(execResult[2] + execResult[2], 16), + parseInt(execResult[3] + execResult[3], 16), + 1 + ]; + } + }, { + re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + 1 + ]; + } + }, { + re: /rgb\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*?\)/, + format: 'rgb', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[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(execResult) { + return [ + execResult[1], + execResult[2], + execResult[3], + execResult[4] + ]; + } + }, { + re: /rgba\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/, + format: 'rgba', + parse: function(execResult) { + return [ + 2.55 * execResult[1], + 2.55 * execResult[2], + 2.55 * execResult[3], + execResult[4] + ]; + } + }, { + re: /hsl\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*?\)/, + format: 'hsl', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + re: /hsla\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/, + format: 'hsla', + parse: function(execResult) { + return [ + execResult[1] / 360, + execResult[2] / 100, + execResult[3] / 100, + execResult[4] + ]; + } + }, { + //predefined color name + re: /^([a-z]{3,})$/, + format: 'alias', + parse: function(execResult) { + var hexval = this.colorNameToHex(execResult[0]) ||  '#000000'; + var match = this.stringParsers[0].re.exec(hexval), + values = match && this.stringParsers[0].parse.apply(this, [match]); + return values; + } + }], + colorNameToHex: function(name) { + if (typeof this.colors[name.toLowerCase()] !== 'undefined') { + return this.colors[name.toLowerCase()]; + } + return false; + } +}; diff --git a/library/bootstrap-colorpicker/src/js/colorpicker.js b/library/bootstrap-colorpicker/src/js/colorpicker.js new file mode 100644 index 000000000..e68b965d1 --- /dev/null +++ b/library/bootstrap-colorpicker/src/js/colorpicker.js @@ -0,0 +1,464 @@ +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/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 + * + * @todo Update DOCS + */ + +(function( factory ) { + "use strict"; + if(typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } + else if(window.jQuery && !window.jQuery.fn.colorpicker) { + factory(window.jQuery); + } +} +(function($) { + 'use strict'; + + '{{color}}'; + + var defaults = { + horizontal: false, // horizontal mode layout ? + inline: false, //forces to show the colorpicker as an inline element + color: false, //forces a color + format: false, //forces a format + input: 'input', // children input selector + container: false, // container selector + component: '.add-on, .input-group-addon', // children component selector + sliders: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setHue' + }, + alpha: { + maxLeft: 0, + maxTop: 100, + callLeft: false, + callTop: 'setAlpha' + } + }, + slidersHorz: { + saturation: { + maxLeft: 100, + maxTop: 100, + callLeft: 'setSaturation', + callTop: 'setBrightness' + }, + hue: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setHue', + callTop: false + }, + alpha: { + maxLeft: 100, + maxTop: 0, + callLeft: 'setAlpha', + callTop: false + } + }, + template: '
' + + '
' + + '
' + + '
' + + '
' + + '
' + }; + + var Colorpicker = function(element, options) { + this.element = $(element).addClass('colorpicker-element'); + this.options = $.extend({}, defaults, this.element.data(), options); + this.component = this.options.component; + this.component = (this.component !== false) ? this.element.find(this.component) : false; + if (this.component && (this.component.length === 0)) { + this.component = false; + } + this.container = (this.options.container === true) ? this.element : this.options.container; + this.container = (this.container !== false) ? $(this.container) : false; + + // Is the element an input? Should we search inside for any input? + this.input = this.element.is('input') ? this.element : (this.options.input ? + this.element.find(this.options.input) : false); + if (this.input && (this.input.length === 0)) { + this.input = false; + } + // Set HSB color + this.color = new Color(this.options.color !== false ? this.options.color : this.getValue()); + this.format = this.options.format !== false ? this.options.format : this.color.origFormat; + + // Setup picker + this.picker = $(this.options.template); + if (this.options.inline) { + this.picker.addClass('colorpicker-inline colorpicker-visible'); + } else { + this.picker.addClass('colorpicker-hidden'); + } + if (this.options.horizontal) { + this.picker.addClass('colorpicker-horizontal'); + } + if (this.format === 'rgba' || this.format === 'hsla') { + this.picker.addClass('colorpicker-with-alpha'); + } + this.picker.on('mousedown.colorpicker', $.proxy(this.mousedown, this)); + this.picker.appendTo(this.container ? this.container : $('body')); + + // Bind events + if (this.input !== false) { + this.input.on({ + 'keyup.colorpicker': $.proxy(this.keyup, this) + }); + if (this.component === false) { + this.element.on({ + 'focus.colorpicker': $.proxy(this.show, this) + }); + } + if (this.options.inline === false) { + this.element.on({ + 'focusout.colorpicker': $.proxy(this.hide, this) + }); + } + } + + if (this.component !== false) { + this.component.on({ + 'click.colorpicker': $.proxy(this.show, this) + }); + } + + if ((this.input === false) && (this.component === false)) { + this.element.on({ + 'click.colorpicker': $.proxy(this.show, this) + }); + } + this.update(); + + $($.proxy(function() { + this.element.trigger('create'); + }, this)); + }; + + Colorpicker.version = '2.0.0-beta'; + + Colorpicker.Color = Color; + + Colorpicker.prototype = { + constructor: Colorpicker, + destroy: function() { + this.picker.remove(); + this.element.removeData('colorpicker').off('.colorpicker'); + if (this.input !== false) { + this.input.off('.colorpicker'); + } + if (this.component !== false) { + this.component.off('.colorpicker'); + } + this.element.removeClass('colorpicker-element'); + this.element.trigger({ + type: 'destroy' + }); + }, + reposition: function() { + if (this.options.inline !== false) { + return false; + } + var type = this.container[0] !== document.body ? 'position' : 'offset'; + var offset = this.component ? this.component[type]() : this.element[type](); + this.picker.css({ + top: offset.top + (this.component ? this.component.outerHeight() : this.element.outerHeight()), + left: offset.left + }); + }, + show: function(e) { + if (this.isDisabled()) { + return false; + } + this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden'); + this.reposition(); + $(window).on('resize.colorpicker', $.proxy(this.reposition, this)); + if (!this.hasInput() && e) { + if (e.stopPropagation && e.preventDefault) { + e.stopPropagation(); + e.preventDefault(); + } + } + if (this.options.inline === false) { + $(window.document).on({ + 'mousedown.colorpicker': $.proxy(this.hide, this) + }); + } + this.element.trigger({ + type: 'showPicker', + color: this.color + }); + }, + hide: function() { + this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible'); + $(window).off('resize.colorpicker', this.reposition); + $(document).off({ + 'mousedown.colorpicker': this.hide + }); + this.update(); + this.element.trigger({ + type: 'hidePicker', + color: this.color + }); + }, + updateData: function(val) { + val = val ||  this.color.toString(this.format); + this.element.data('color', val); + return val; + }, + updateInput: function(val) { + val = val ||  this.color.toString(this.format); + if (this.input !== false) { + this.input.prop('value', val); + } + return val; + }, + updatePicker: function(val) { + if (val !== undefined) { + this.color = new Color(val); + } + var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz; + var icns = this.picker.find('i'); + if (icns.length === 0) { + return; + } + if (this.options.horizontal === false) { + sl = this.options.sliders; + icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end() + .eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a)); + } else { + sl = this.options.slidersHorz; + icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end() + .eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a)); + } + icns.eq(0).css({ + '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)); + return val; + }, + updateComponent: function(val) { + val = val ||  this.color.toString(this.format); + if (this.component !== false) { + var icn = this.component.find('i').eq(0); + if (icn.length > 0) { + icn.css({ + 'backgroundColor': val + }); + } else { + this.component.css({ + 'backgroundColor': val + }); + } + } + return val; + }, + update: function(force) { + var val = this.updateComponent(); + if ((this.getValue(false) !== false) || (force === true)) { + // Update input/data only if the current value is not blank + this.updateInput(val); + this.updateData(val); + } + this.updatePicker(); + return val; + + }, + setValue: function(val) { // set color manually + this.color = new Color(val); + this.update(); + this.element.trigger({ + type: 'changeColor', + color: this.color, + value: val + }); + }, + getValue: function(defaultValue) { + defaultValue = (defaultValue === undefined) ? '#000000' : defaultValue; + var val; + if (this.hasInput()) { + val = this.input.val(); + } else { + val = this.element.data('color'); + } + if ((val === undefined) || (val === '') || (val === null)) { + // if not defined or empty, return default + val = defaultValue; + } + return val; + }, + hasInput: function() { + return (this.input !== false); + }, + isDisabled: function() { + if (this.hasInput()) { + return (this.input.prop('disabled') === true); + } + return false; + }, + disable: function() { + if (this.hasInput()) { + this.input.prop('disabled', true); + return true; + } + return false; + }, + enable: function() { + if (this.hasInput()) { + this.input.prop('disabled', false); + return true; + } + return false; + }, + currentSlider: null, + mousePointer: { + left: 0, + top: 0 + }, + mousedown: function(e) { + e.stopPropagation(); + e.preventDefault(); + + var target = $(e.target); + + //detect the slider and set the limits and callbacks + var zone = target.closest('div'); + var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders; + if (!zone.is('.colorpicker')) { + if (zone.is('.colorpicker-saturation')) { + this.currentSlider = $.extend({}, sl.saturation); + } else if (zone.is('.colorpicker-hue')) { + this.currentSlider = $.extend({}, sl.hue); + } else if (zone.is('.colorpicker-alpha')) { + this.currentSlider = $.extend({}, sl.alpha); + } else { + return false; + } + var offset = zone.offset(); + //reference to guide's style + this.currentSlider.guide = zone.find('i')[0].style; + this.currentSlider.left = e.pageX - offset.left; + this.currentSlider.top = e.pageY - offset.top; + this.mousePointer = { + left: e.pageX, + top: e.pageY + }; + //trigger mousemove to move the guide to the current position + $(document).on({ + 'mousemove.colorpicker': $.proxy(this.mousemove, this), + 'mouseup.colorpicker': $.proxy(this.mouseup, this) + }).trigger('mousemove'); + } + return false; + }, + mousemove: function(e) { + e.stopPropagation(); + e.preventDefault(); + var left = Math.max( + 0, + Math.min( + this.currentSlider.maxLeft, + this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left) + ) + ); + var top = Math.max( + 0, + Math.min( + this.currentSlider.maxTop, + this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top) + ) + ); + this.currentSlider.guide.left = left + 'px'; + this.currentSlider.guide.top = top + 'px'; + if (this.currentSlider.callLeft) { + this.color[this.currentSlider.callLeft].call(this.color, left / 100); + } + if (this.currentSlider.callTop) { + this.color[this.currentSlider.callTop].call(this.color, top / 100); + } + this.update(true); + + this.element.trigger({ + type: 'changeColor', + color: this.color + }); + return false; + }, + mouseup: function(e) { + e.stopPropagation(); + e.preventDefault(); + $(document).off({ + 'mousemove.colorpicker': this.mousemove, + 'mouseup.colorpicker': this.mouseup + }); + return false; + }, + keyup: function(e) { + if ((e.keyCode === 38)) { + if (this.color.value.a < 1) { + this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100; + } + this.update(true); + } else if ((e.keyCode === 40)) { + if (this.color.value.a > 0) { + this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100; + } + this.update(true); + } else { + var val = this.input.val(); + this.color = new Color(val); + if (this.getValue(false) !== false) { + this.updateData(); + this.updateComponent(); + this.updatePicker(); + } + } + this.element.trigger({ + type: 'changeColor', + color: this.color, + value: val + }); + } + }; + + $.colorpicker = Colorpicker; + + $.fn.colorpicker = function(option) { + var pickerArgs = arguments; + + return this.each(function() { + var $this = $(this), + inst = $this.data('colorpicker'), + options = ((typeof option === 'object') ? option : {}); + if ((!inst) && (typeof option !== 'string')) { + $this.data('colorpicker', new Colorpicker(this, options)); + } else { + if (typeof option === 'string') { + inst[option].apply(inst, Array.prototype.slice.call(pickerArgs, 1)); + } + } + }); + }; + + $.fn.colorpicker.constructor = Colorpicker; + +})); diff --git a/library/bootstrap-colorpicker/src/js/docs.js b/library/bootstrap-colorpicker/src/js/docs.js new file mode 100644 index 000000000..29cbbd2bc --- /dev/null +++ b/library/bootstrap-colorpicker/src/js/docs.js @@ -0,0 +1,45 @@ +$(function() { + // Code for docs demos + function createColorpickers() { + // Api demo + var bodyStyle = $('body')[0].style; + $('#demo_apidemo').colorpicker({ + color: bodyStyle.backgroundColor + }).on('changeColor', function(ev) { + bodyStyle.backgroundColor = ev.color.toHex(); + }); + + // Horizontal mode + $('#demo_forceformat').colorpicker({ + format: 'rgba', // force this format + horizontal: true + }); + + $('.demo-auto').colorpicker(); + + // Disabled / enabled triggers + $(".disable-button").click(function(e) { + e.preventDefault(); + $("#demo_endis").colorpicker('disable'); + }); + + $(".enable-button").click(function(e) { + e.preventDefault(); + $("#demo_endis").colorpicker('enable'); + }); + } + + createColorpickers(); + + // Create / destroy instances + $('.demo-destroy').click(function(e) { + e.preventDefault(); + $('.demo').colorpicker('destroy'); + $(".disable-button, .enable-button").off('click'); + }); + + $('.demo-create').click(function(e) { + e.preventDefault(); + createColorpickers(); + }); +}); diff --git a/library/bootstrap-colorpicker/src/less/colorpicker.less b/library/bootstrap-colorpicker/src/less/colorpicker.less new file mode 100644 index 000000000..311b58fd9 --- /dev/null +++ b/library/bootstrap-colorpicker/src/less/colorpicker.less @@ -0,0 +1,193 @@ +/*! + * Bootstrap Colorpicker + * http://mjolnic.github.io/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 + * + */ +.bgImg(@img){ + background-image: url("../img/bootstrap-colorpicker/@{img}"); +} +.borderRadius(@size){ + -webkit-border-radius: @size; + -moz-border-radius: @size; + border-radius: @size; +} + +.colorpicker-saturation { + width: 100px; + height: 100px; + .bgImg('saturation.png'); + cursor: crosshair; + float: left; + i { + display: block; + height: 5px; + width: 5px; + border: 1px solid #000; + .borderRadius(5px); + position: absolute; + top: 0; + left: 0; + margin: -4px 0 0 -4px; + b { + display: block; + height: 5px; + width: 5px; + border: 1px solid #fff; + .borderRadius(5px); + } + } +} + +.colorpicker-hue, +.colorpicker-alpha { + width: 15px; + height: 100px; + float: left; + cursor: row-resize; + margin-left: 4px; + margin-bottom: 4px; +} +.colorpicker-hue i, +.colorpicker-alpha 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 { + .bgImg('hue.png'); +} +.colorpicker-alpha { + .bgImg('alpha.png'); + display: none; +} +.colorpicker { + *zoom: 1; + top: 0; + left: 0; + padding: 4px; + min-width: 130px; + margin-top: 1px; + .borderRadius(4px); + z-index:2500; +} +.colorpicker:before, +.colorpicker:after { + 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, 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 #ffffff; + 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; + .bgImg('alpha.png'); + background-position: 0 100%; +} +.colorpicker-color div { + height: 10px; +} +.colorpicker-element .input-group-addon i, +.colorpicker-element .add-on i { + display: inline-block; + cursor: pointer; + height: 16px; + vertical-align: text-top; + width: 16px; +} +.colorpicker.colorpicker-inline { + position: relative; + display: inline-block; + float: none; +} +.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-hue, +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + width: 100px; + height: 15px; + float: left; + cursor: col-resize; + margin-left: 0px; + margin-bottom: 4px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue i, +.colorpicker.colorpicker-horizontal .colorpicker-alpha i { + display: block; + height: 15px; + background: #ffffff; + position: absolute; + top: 0; + left: 0; + width: 1px; + border: none; + margin-top: 0px; +} +.colorpicker.colorpicker-horizontal .colorpicker-hue { + .bgImg('hue-horizontal.png'); +} +.colorpicker.colorpicker-horizontal .colorpicker-alpha { + .bgImg('alpha-horizontal.png'); +} + +.colorpicker.colorpicker-hidden{ + display:none; +} + +.colorpicker.colorpicker-visible{ + display:block; +} +.colorpicker-inline.colorpicker-visible{ + display:inline-block; +} -- cgit v1.2.3