Initial commit
commit
2cf7ba8f3d
@ -0,0 +1,28 @@
|
||||
module.exports = function(grunt) {
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
|
||||
sourceMap: true,
|
||||
// sourceMapIncludeSources: true,
|
||||
sourceMapName: 'jqColorPicker.js.map',
|
||||
report: 'gzip'
|
||||
},
|
||||
my_target: {
|
||||
files: [{
|
||||
'jqColorPicker.min.js': ['colors.js', 'jqColorPicker.js']
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Load the plugin that provides the "uglify" task.
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
|
||||
// Default task(s).
|
||||
grunt.registerTask('default', ['uglify']);
|
||||
|
||||
};
|
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Peter Dematté
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
@ -0,0 +1,183 @@
|
||||
|
||||
# tinyColorPicker and colors
|
||||
|
||||
Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
|
||||
This 4.4KB small HSB color picker is based on a subset of [https://github.com/PitPik/colorPicker/blob/master/colors.js](colors.js) from it's big brother [https://github.com/PitPik/colorPicker/](colorPicker), supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins
|
||||
|
||||
##Demo
|
||||
See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)
|
||||
|
||||
<img src="development/screen-shot-all.jpg" />
|
||||
|
||||
All the WCAG 2.0 calculations for readability are also based on opacity levels of all layers<br>
|
||||
Supported color spaces are: (* also displayed as colors in realtime)<br>
|
||||
rgb, hsv(b), hsl, HEX
|
||||
|
||||
##colors.js
|
||||
|
||||
```javascript
|
||||
Colors({ // all options have a default value...
|
||||
color: 'rgba(204, 82, 37, 0.8)', // initial color (#RGB, RGB, #RRGGBB, RRGGBB, rgb(r, g, b), ...)
|
||||
grey: {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
|
||||
luminance: {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
|
||||
valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required
|
||||
customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)
|
||||
convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...
|
||||
});
|
||||
```
|
||||
##jqColorPicker.js
|
||||
|
||||
colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
|
||||
|
||||
```javascript
|
||||
var myColorPicker = new ColorPicker({
|
||||
color: ..., // see Colors...
|
||||
customBG: '#FFF' // see Colors...
|
||||
animationSpeed: 150, // toggle animation speed
|
||||
GPU: true, // use transform: translate3d
|
||||
doRender: true, // manipulate color ans bgColor of input field
|
||||
opacity: true, // enable / disable alpha slider
|
||||
renderCallback: function($elm, toggled) {}, // this === instance
|
||||
buidCallback: function($elm, toggled) {}, // this === instance
|
||||
css: '', // replaces existing css
|
||||
cssAddon: '', // adds cdd to existing
|
||||
margin: '', // positioning margin
|
||||
preventFocus: false // prevent default on focus of input fields
|
||||
});
|
||||
```
|
||||
|
||||
##The color model, the methods and more
|
||||
|
||||
After initializing Color or ColorPicker you'll get a clean but rhich model of the instance:
|
||||
|
||||
```javascript
|
||||
myColors: {
|
||||
colors: { all kinds of color values... see later},
|
||||
options: { all the options you set or that are set as default... },
|
||||
__proto__: { // all methods Color uses
|
||||
setColor: function(newCol, type, alpha) {},
|
||||
setCustomBackground: function(col) {},
|
||||
saveAsBackground: function() {},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
myColorPicker: {
|
||||
color: { // instance of Color inside colorPicker
|
||||
colors: { all kinds of color values... see later},
|
||||
options: { all the options you set or that are set as default... },
|
||||
__proto__: { all methods Color uses ... see above}
|
||||
},
|
||||
__proto__: { // all methods ColorPicker uses
|
||||
render: function() {},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
The color model
|
||||
|
||||
```javascript
|
||||
HEX: // current color as HEX (upper case, 6 digits)
|
||||
rgb: // current RGB color as normalized values (0 - 1)
|
||||
r: // red
|
||||
g: // green
|
||||
b: // blue
|
||||
hsv: // current color values in normalized HSV (HSB) model
|
||||
h: // hue
|
||||
s: // saturation
|
||||
v: // value (brightness)
|
||||
hsl: // current color values in normalized HSL model
|
||||
h: // hue
|
||||
s: // saturation
|
||||
l: // lightness
|
||||
RND: // all above colors in their defined ranges
|
||||
rgb: // current RGB color, rounded between 0 and 255
|
||||
r: // red (0 - 255)
|
||||
g: // green (0 - 255)
|
||||
b: // blue (0 - 255)
|
||||
hsv: // see above
|
||||
h: // hue (0 - 360 degrees)
|
||||
s: // saturation (0 - 100 %)
|
||||
v: // value (brightness) (0 - 100 %)
|
||||
hsl: // see above
|
||||
h: // hue (0 - 360 degrees)
|
||||
s: // saturation (0 - 100 %)
|
||||
l: // lightness (0 - 100 %)
|
||||
background: // saved (background) color (saveAsBackground(){})
|
||||
rgb: // color in RGB model
|
||||
r: // red
|
||||
g: // green
|
||||
b: // blue
|
||||
RGB: // RGB color, rounded between 0 and 255
|
||||
r: // red (0 - 255)
|
||||
g: // green (0 - 255)
|
||||
b: // blue (0 - 255)
|
||||
alpha: // alpha or opacity value (0 - 1)
|
||||
equivalentGrey: // r = g = b = (0 - 255)
|
||||
rgbaMixBlack: // saved (background) color mixed with solid black color
|
||||
r: // red
|
||||
g: // green
|
||||
b: // blue
|
||||
a: // resulting alpha or opacity value (0 - 1)
|
||||
luminance: // luminance of resulting mix (0 - 1)
|
||||
rgbaMixCustom: // saved (background) color mixed with custom (solid) color
|
||||
r: // red
|
||||
g: // green
|
||||
b: // blue
|
||||
a: // resulting alpha or opacity value (0 - 1)
|
||||
luminance: // luminance of resulting mix (0 - 1)
|
||||
rgbaMixWhite: // saved (background) color mixed with solid white color
|
||||
r: // red
|
||||
g: // green
|
||||
b: // blue
|
||||
a: // resulting alpha or opacity value (0 - 1)
|
||||
luminance: // luminance of resulting mix (0 - 1)
|
||||
alpha: // alpha or opacity value (0 - 1) of current color
|
||||
equivalentGrey: // r = g = b = (0 - 1)
|
||||
HUELuminance: // luminance of hue (in full brightnes and saturation) (0 - 1)
|
||||
RGBLuminance: // luminance of the current color
|
||||
hueRGB: // rounded integer value of current color in rgb model with full saturation and brightness
|
||||
r: // red (0 - 255)
|
||||
g: // green (0 - 255)
|
||||
b: // blue (0 - 255)
|
||||
saveColor: // '' or 'web smart' or 'web save', if so.
|
||||
webSave: // closest web-save color
|
||||
r: // red (0 - 255)
|
||||
g: // green (0 - 255)
|
||||
b: // blue (0 - 255)
|
||||
webSmart: // closest web-smart color
|
||||
r: // red (0 - 255)
|
||||
g: // green (0 - 255)
|
||||
b: // blue (0 - 255)
|
||||
rgbaMixBG: // color mix result: current color above saved (background) color
|
||||
r: // red (0 - 1)
|
||||
g: // green (0 - 1)
|
||||
b: // blue (0 - 1)
|
||||
a: // resulting alpha or opacity value (0 - 1)
|
||||
luminance: // luminance of resulting mix (0 - 1)
|
||||
rgbaMixBGMixCustom: // color mix result: current color above saved (background) color above solid custom color
|
||||
r: // red (0 - 1)
|
||||
g: // green (0 - 1)
|
||||
b: // blue (0 - 1)
|
||||
a: // resulting alpha or opacity value (0 - 1)
|
||||
luminance: // luminance of resulting mix (0 - 1)
|
||||
luminanceDelta: // luminance difference between current color and resulting saved-custom mix (0 - 1)
|
||||
hueDelta: // hue difference between current color and resulting saved-custom mix (0 - 1)
|
||||
WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
|
||||
rgbaMixBlack: // color mix result: current color above solid black
|
||||
r: // red (0 - 1)
|
||||
g: // green (0 - 1)
|
||||
b: // blue (0 - 1)
|
||||
a: // resulting alpha or opacity value (0 - 1)
|
||||
luminance: // luminance of resulting mix (0 - 1)
|
||||
WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
|
||||
rgbaMixWhite: // color mix result: current color above solid white
|
||||
r: // red (0 - 1)
|
||||
g: // green (0 - 1)
|
||||
b: // blue (0 - 1)
|
||||
a: // resulting alpha or opacity value (0 - 1)
|
||||
luminance: // luminance of resulting mix (0 - 1)
|
||||
WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
|
||||
```
|
@ -0,0 +1,67 @@
|
||||
.cp-color-picker {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
padding: 6px 6px 0;
|
||||
background-color: #444;
|
||||
color: #bbb;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
cursor: default;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cp-color-picker > div {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cp-xy-slider {
|
||||
float: left;
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
margin-bottom: 6px;
|
||||
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
|
||||
}
|
||||
.cp-white {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
|
||||
}
|
||||
.cp-xy-cursor {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: -5px;
|
||||
border: 1px solid white;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cp-z-slider {
|
||||
float: right;
|
||||
margin-left: 6px;
|
||||
height: 128px;
|
||||
width: 20px;
|
||||
background: linear-gradient(to bottom, #ff0000 0%,#ff00ff 17%,#0000ff 33%,#00ffff 50%,#00ff00 67%,#ffff00 83%,#ff0000 100%);
|
||||
}
|
||||
.cp-z-cursor {
|
||||
position: absolute;
|
||||
margin-top: -4px;
|
||||
width: 100%;
|
||||
border: 4px solid white;
|
||||
border-color: transparent white;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cp-alpha {
|
||||
clear: left;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin: 6px 0;
|
||||
background: linear-gradient(to right, rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%);
|
||||
}
|
||||
.cp-alpha-cursor {
|
||||
position: absolute;
|
||||
margin-left: -4px;
|
||||
height: 100%;
|
||||
border: 4px solid white;
|
||||
border-color: white transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
@ -0,0 +1,45 @@
|
||||
.cp-xy-slider {
|
||||
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
|
||||
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
|
||||
}
|
||||
|
||||
.cp-white {
|
||||
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
|
||||
}
|
||||
.cp-z-slider {
|
||||
background: url(rainbow.png); /* Old browsers */
|
||||
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,255,1) 17%, rgba(0,0,255,1) 33%, rgba(0,255,255,1) 50%, rgba(0,255,0,1) 67%, rgba(255,255,0,1) 83%, rgba(255,0,0,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(17%,rgba(255,0,255,1)), color-stop(33%,rgba(0,0,255,1)), color-stop(50%,rgba(0,255,255,1)), color-stop(67%,rgba(0,255,0,1)), color-stop(83%,rgba(255,255,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* W3C */
|
||||
}
|
||||
.cp-alpha {
|
||||
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
|
||||
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
|
||||
background: -moz-linear-gradient(left, rgba(68,68,68,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(68,68,68,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(left, rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(left, rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(left, rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
|
||||
background: linear-gradient(to right, rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#00000000',GradientType=1 ); /* IE6-8 */
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link rel="stylesheet" type="text/css" href="../index.css">
|
||||
<link rel="stylesheet" type="text/css" href="colorPicker.css">
|
||||
<link rel="stylesheet" type="text/css" href="compatibility.css">
|
||||
<title>UI dev</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Tiny jQuery colorPicker UI</h1>
|
||||
<div class="cp-color-picker">
|
||||
<div class="cp-z-slider">
|
||||
<div class="cp-z-cursor"></div>
|
||||
</div>
|
||||
<div class="cp-xy-slider">
|
||||
<div class="cp-white"></div>
|
||||
<div class="cp-xy-cursor"></div>
|
||||
</div>
|
||||
<div class="cp-alpha">
|
||||
<div class="cp-alpha-cursor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
|
||||
<link rel="stylesheet" type="text/css" href="development/compatibility.css">
|
||||
<title>tiny jQuery colorPicker</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Tiny jQuery colorPicker</h1>
|
||||
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
|
||||
This <strong>4.4KB</strong> small HSB color picker is based on a subset of <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in <a href="#demo">Demo</a>).</p>
|
||||
<a name="demo" id="demo"></a>
|
||||
<h2>Demo</h2>
|
||||
On all inputs with calssName 'color': <pre>$('input.color').colorPicker();</pre>
|
||||
<p>Switch between plugins:
|
||||
<select id="pluginSelect">
|
||||
<option value="desktop">Desktop (no plugin)</option>
|
||||
<option value="mobile">Mobile</option>
|
||||
<option value="input">Input fields</option>
|
||||
<option value="noalpha">Default without alpha</option>
|
||||
</select>
|
||||
(see index.js for more details...)
|
||||
</p>
|
||||
<p>
|
||||
<input class="color" value="#B6BD79" />
|
||||
<input class="color" value="rgb(162, 63, 3)" />
|
||||
<input class="color" value="hsl(32, 95%, 23%)" />
|
||||
</p>
|
||||
<h2>Features</h2>
|
||||
<p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies and super fast rendering for best performance on desktop and mobile browsers.<br>
|
||||
This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...<br>
|
||||
As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <a href="https://github.com/PitPik/colorPicker">colorPicker on GitHub</a> for more details)</p>
|
||||
<p>The following snipped shows how easy it is to make plugins: use for mobile</p>
|
||||
<pre style="display: block; overflow: auto;">
|
||||
window.myColorPicker = $('input.color').colorPicker({
|
||||
buidCallback: function($elm) {
|
||||
$elm.prepend('<div class="cp-disp"></div>');
|
||||
},
|
||||
cssAddon:
|
||||
'.cp-disp{padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
|
||||
'.cp-xy-slider{width:200px; height:200px;}' +
|
||||
'.cp-xy-cursor{width:16px; height:16px; border-width:2px; margin:-8px}' +
|
||||
'.cp-z-slider{height:200px; width:40px;}' +
|
||||
'.cp-z-cursor{border-width:8px; margin-top:-8px;}' +
|
||||
'.cp-alpha{height:40px;}' +
|
||||
'.cp-alpha-cursor{border-width: 8px; margin-left:-8px;}',
|
||||
|
||||
renderCallback: function($elm, toggled) {
|
||||
var colors = this.color.colors,
|
||||
rgb = colors.RND.rgb;
|
||||
|
||||
$('.cp-disp').css({
|
||||
backgroundColor: '#' + colors.HEX,
|
||||
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
|
||||
}).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
|
||||
', ' + (Math.round(colors.alpha * 100) / 100) + ')');
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
<h2>API and usage</h2>
|
||||
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
|
||||
<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
|
||||
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="colors.js"></script> -->
|
||||
<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
|
||||
<script type="text/javascript" src="jqColorPicker.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function(window, undefined){
|
||||
'use strict';
|
||||
|
||||
var plugin = {},
|
||||
pluginSelect = document.getElementById('pluginSelect'),
|
||||
getQueryVariable = function(variable) {
|
||||
var query = window.location.search.substring(1),
|
||||
vars = query.split('&'),
|
||||
pair, i;
|
||||
|
||||
for (i = vars.length; i--; ) {
|
||||
pair = vars[i].split('=');
|
||||
if(pair[0] === variable){
|
||||
return pair[1].replace(/^\s*|\s*$/, '');
|
||||
}
|
||||
}
|
||||
return(false);
|
||||
},
|
||||
type = getQueryVariable('type'),
|
||||
selector = document.getElementById('pluginSelect');
|
||||
|
||||
// plugin for mobile use (bigger and value/color display on top)
|
||||
plugin.mobile = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
|
||||
// demo on how to make plugins... mobile support plugin
|
||||
buidCallback: function($elm) {
|
||||
$elm.prepend('<div class="cp-disp"></div>');
|
||||
},
|
||||
cssAddon: // could also be in a css file instead
|
||||
'.cp-disp{padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
|
||||
'.cp-xy-slider{width:200px; height:200px;}' +
|
||||
'.cp-xy-cursor{width:16px; height:16px; border-width:2px; margin:-8px}' +
|
||||
'.cp-z-slider{height:200px; width:40px;}' +
|
||||
'.cp-z-cursor{border-width:8px; margin-top:-8px;}' +
|
||||
'.cp-alpha{height:40px;}' +
|
||||
'.cp-alpha-cursor{border-width: 8px; margin-left:-8px;}',
|
||||
|
||||
renderCallback: function($elm, toggled) {
|
||||
var colors = this.color.colors,
|
||||
rgb = colors.RND.rgb;
|
||||
|
||||
$('.cp-disp').css({
|
||||
backgroundColor: '#' + colors.HEX,
|
||||
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
|
||||
}).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
|
||||
', ' + (Math.round(colors.alpha * 100) / 100) + ')');
|
||||
}
|
||||
};
|
||||
|
||||
// shows input fields for rgb and hsv; changeable
|
||||
plugin.input = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
|
||||
buidCallback: function($elm) {
|
||||
var colorInstance = this.color,
|
||||
colorPicker = this;
|
||||
|
||||
$elm.prepend('<div class="cp-panel">' +
|
||||
'R <input type="text" class="cp-r" /><br>' +
|
||||
'G <input type="text" class="cp-g" /><br>' +
|
||||
'B <input type="text" class="cp-b" /><hr>' +
|
||||
'H <input type="text" class="cp-h" /><br>' +
|
||||
'S <input type="text" class="cp-s" /><br>' +
|
||||
'B <input type="text" class="cp-v" />' +
|
||||
'</div>').on('change', 'input', function(e) {
|
||||
var value = this.value,
|
||||
className = this.className,
|
||||
type = className.split('-')[1],
|
||||
color = {};
|
||||
|
||||
color[type] = value;
|
||||
colorInstance.setColor(color, /(?:r|g|b)/.test(type) ? 'rgb' : 'hsv');
|
||||
colorPicker.render();
|
||||
this.blur();
|
||||
});
|
||||
},
|
||||
|
||||
cssAddon: // could also be in a css file instead
|
||||
'.cp-panel {float:right; padding:0 1px 0 8px; margin-top:-1px;}' +
|
||||
'.cp-panel, .cp-panel input {color:#bbb; font-family:monospace,' +
|
||||
'"Courier New",Courier,mono; font-size:12px; font-weight:bold;}' +
|
||||
'.cp-panel input {width:25px; height:12px; padding:2px 3px 1px;' +
|
||||
'text-align:right; line-height:12px; background:transparent;' +
|
||||
'border:1px solid; border-color:#222 #666 #666 #222;}' +
|
||||
'.cp-panel hr {margin:0 -2px 2px; height:1px; border:0;' +
|
||||
'background:#666; border-top:1px solid #222;}',
|
||||
|
||||
renderCallback: function($elm, toggled) {
|
||||
var $panel = $('.cp-panel'),
|
||||
colors = this.color.colors,
|
||||
rgb = colors.RND.rgb,
|
||||
hsv = colors.RND.hsv;
|
||||
|
||||
$('.cp-r', $panel).val(rgb.r);
|
||||
$('.cp-g', $panel).val(rgb.g);
|
||||
$('.cp-b', $panel).val(rgb.b);
|
||||
$('.cp-h', $panel).val(hsv.h);
|
||||
$('.cp-s', $panel).val(hsv.s);
|
||||
$('.cp-v', $panel).val(hsv.v);
|
||||
}
|
||||
};
|
||||
|
||||
// the default; no extra stuff
|
||||
plugin.desktop = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px'
|
||||
};
|
||||
|
||||
// the default without alpha chanel though
|
||||
plugin.noalpha = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
opacity: false
|
||||
};
|
||||
|
||||
|
||||
|
||||
pluginSelect.value = type;
|
||||
pluginSelect.onchange = function(e) {
|
||||
location = window.location;
|
||||
|
||||
window.location = location.origin + location.pathname +
|
||||
'?type=' + this.value + '#demo';
|
||||
}
|
||||
|
||||
window.myColorPicker = $('input.color').colorPicker(
|
||||
plugin[type] || plugin.desktop
|
||||
);
|
||||
})(window);
|
||||
</script>
|
||||
<a href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,244 @@
|
||||
;(function($, Colors, undefined){
|
||||
'use strict';
|
||||
|
||||
var $document = $(document),
|
||||
_colorPicker,
|
||||
_color,
|
||||
_options,
|
||||
_cache = {},
|
||||
_$UI,
|
||||
_pointermove = 'touchmove mousemove pointermove',
|
||||
_pointerup = 'touchend mouseup pointerup',
|
||||
_GPU = false,
|
||||
_animate = window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame || function(cb){cb()},
|
||||
_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
|
||||
'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
|
||||
'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
|
||||
'class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',
|
||||
// 'grunt-contrib-uglify' puts all this back to one single string...
|
||||
_css = '.cp-color-picker{position:absolute;overflow:hidden;padding:6p' +
|
||||
'x 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helve' +
|
||||
'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
|
||||
'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
|
||||
'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
|
||||
'bottom:6px;background:linear-gradient(to right,rgba(255,255,255,' +
|
||||
'1)0,rgba(255,255,255,0)100%)}.cp-white{height:100%;width:100%;ba' +
|
||||
'ckground:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)1' +
|
||||
'00%)}.cp-xy-cursor{position:absolute;top:0;width:10px;height:10p' +
|
||||
'x;margin:-5px;border:1px solid #fff;border-radius:100%;box-sizin' +
|
||||
'g:border-box}.cp-z-slider{float:right;margin-left:6px;height:128' +
|
||||
'px;width:20px;background:linear-gradient(to bottom,red 0,#f0f 17' +
|
||||
'%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-cursor{pos' +
|
||||
'ition:absolute;margin-top:-4px;width:100%;border:4px solid #fff;' +
|
||||
'border-color:transparent #fff;box-sizing:border-box}.cp-alpha{cl' +
|
||||
'ear:left;width:100%;height:16px;margin:6px 0;background:linear-g' +
|
||||
'radient(to right,rgba(68,68,68,1)0,rgba(0,0,0,0)100%)}.cp-alpha-' +
|
||||
'cursor{position:absolute;margin-left:-4px;height:100%;border:4px' +
|
||||
' solid #fff;border-color:#fff transparent;box-sizing:border-box}',
|
||||
|
||||
ColorPicker = function(options) {
|
||||
_color = this.color = new Colors(options);
|
||||
_options = _color.options;
|
||||
};
|
||||
|
||||
ColorPicker.prototype.render = render;
|
||||
|
||||
function extractValue(elm) {
|
||||
return elm.value || $(elm).css('background-color') || '#fff';
|
||||
}
|
||||
|
||||
function resolveEventType(event) {
|
||||
return event.originalEvent.touches ?
|
||||
event.originalEvent.touches[0] : event;
|
||||
}
|
||||
|
||||
function toggle(event) {
|
||||
var $this = $(this),
|
||||
position;
|
||||
|
||||
if (event) {
|
||||
position = $this.offset();
|
||||
_cache.$element = $this;
|
||||
_options.preventFocus && event.preventDefault();
|
||||
|
||||
(_$UI || build()).css({
|
||||
'left': position.left, // check for space...
|
||||
'top': position.top + $this.outerHeight(true)
|
||||
}).show(_options.animationSpeed, function() {
|
||||
_cache.alphaWidth = $('.cp-alpha', _$UI).width();
|
||||
_cache.sliderWidth = $('.cp-xy-slider', _$UI).width();
|
||||
_color.setColor(extractValue($this[0]));
|
||||
_animate(function(){render(true)});
|
||||
});
|
||||
} else {
|
||||
$(_$UI).hide(_options.animationSpeed, function() {
|
||||
_cache.$element.blur();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function build() {
|
||||
// CSS
|
||||
$('head').append('<style type="text/css">' +
|
||||
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
|
||||
// HTML
|
||||
return _$UI = $(_html).css({'margin': _options.margin}).
|
||||
find('.cp-alpha').toggle(!!_options.opacity).
|
||||
parent(). // back to $(_html)
|
||||
show(0, function() {
|
||||
_GPU = _options.GPU && $(this).css('transform') === '';
|
||||
_options.buidCallback.call(_colorPicker, $(this));
|
||||
}).hide().
|
||||
on('touchstart mousedown pointerdown',
|
||||
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown).
|
||||
appendTo(document.body);
|
||||
}
|
||||
|
||||
function pointerdown(e) {
|
||||
var action = this.className.replace('cp-', '').replace('-', '_');
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
_cache.elementOrigin = $(this).offset();
|
||||
(action = action === 'xy_slider' ? xy_slider :
|
||||
action === 'z_slider' ? z_slider : alpha)(e);
|
||||
|
||||
$document.on(_pointerup, pointerup).on(_pointermove, action);
|
||||
}
|
||||
|
||||
function pointerup(e) {
|
||||
$document.off(_pointermove).off(_pointerup);
|
||||
}
|
||||
|
||||
function xy_slider(event) {
|
||||
var e = resolveEventType(event),
|
||||
x = e.pageX - _cache.elementOrigin.left,
|
||||
y = e.pageY - _cache.elementOrigin.top;
|
||||
|
||||
_color.setColor({
|
||||
s: x / _cache.sliderWidth * 100,
|
||||
v: 100 - (y / _cache.sliderWidth * 100)
|
||||
}, 'hsv');
|
||||
_animate(render);
|
||||
}
|
||||
|
||||
function z_slider(event) {
|
||||
var z = resolveEventType(event).pageY - _cache.elementOrigin.top,
|
||||
hsv = _color.colors.hsv;
|
||||
|
||||
_color.setColor({h: 360 - (z / _cache.sliderWidth * 360)}, 'hsv');
|
||||
_animate(render);
|
||||
}
|
||||
|
||||
function alpha(event) {
|
||||
var x = resolveEventType(event).pageX - _cache.elementOrigin.left,
|
||||
alpha = x / _cache.alphaWidth;
|
||||
|
||||
_color.setColor({}, 'rgb', alpha > 1 ? 1 : alpha < 0 ? 0 : alpha);
|
||||
_animate(render);
|
||||
}
|
||||
|
||||
function render(toggled) {
|
||||
var colors = _color.colors,
|
||||
hueRGB = colors.hueRGB,
|
||||
RGB = colors.RND.rgb,
|
||||
HSL = colors.RND.hsl,
|
||||
dark = '#222',
|
||||
light = '#ddd',
|
||||
colorMode = _cache.$element.data('colorMode'),
|
||||
isAlpha = colors.alpha !== 1,
|
||||
alpha = Math.round(colors.alpha * 100) / 100,
|
||||
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
|
||||
RGBAText = 'rgba(' + RGBInnerText + ', ' + alpha + ')',
|
||||
text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
|
||||
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
|
||||
(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
|
||||
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
|
||||
HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
|
||||
HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
|
||||
alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
|
||||
h = (1 - colors.hsv.h) * _cache.sliderWidth,
|
||||
s = colors.hsv.s * _cache.sliderWidth,
|
||||
v = (1 - colors.hsv.v) * _cache.sliderWidth,
|
||||
a = alpha * _cache.alphaWidth,
|
||||
t3d = _GPU ? 'translate3d' : '';
|
||||
|
||||
$('.cp-xy-slider').css({
|
||||
backgroundColor: 'rgb(' +
|
||||
hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
|
||||
$('.cp-xy-cursor').css({
|
||||
transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
|
||||
left: !_GPU ? s : '',
|
||||
top: !_GPU ? v : '',
|
||||
borderColor : colors.RGBLuminance > 0.22 ? dark : light
|
||||
});
|
||||
$('.cp-z-cursor').css({
|
||||
transform: t3d + '(0, ' + h + 'px, 0)',
|
||||
top: !_GPU ? h : '',
|
||||
borderLeftColor : HUEContrast,
|
||||
borderRightColor : HUEContrast
|
||||
});
|
||||
$('.cp-alpha').css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
|
||||
$('.cp-alpha-cursor').css({
|
||||
transform: t3d + '(' + a + 'px, 0, 0)',
|
||||
left: !_GPU ? a : '',
|
||||
borderTopColor : alphaContrast,
|
||||
borderBottomColor : alphaContrast
|
||||
});
|
||||
_options.doRender && _cache.$element.css({
|
||||
backgroundColor : RGBAText,
|
||||
color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
|
||||
});
|
||||
_cache.$element.val(text);
|
||||
|
||||
_options.renderCallback.call(
|
||||
_colorPicker, _cache.$element, toggled === true);
|
||||
}
|
||||
|
||||
// export as plugin to jQuery
|
||||
$.fn.colorPicker = function(options) {
|
||||
var $that = this,
|
||||
noop = function(){};
|
||||
|
||||
options = $.extend({
|
||||
animationSpeed: 150,
|
||||
GPU: true,
|
||||
doRender: true,
|
||||
customBG: '#FFF',
|
||||
opacity: true,
|
||||
renderCallback: noop,
|
||||
buidCallback: noop
|
||||
// css: '',
|
||||
// cssAddon: '',
|
||||
// margin: '',
|
||||
// preventFocus: false
|
||||
}, options);
|
||||
|
||||
if (!_colorPicker) { // we only want one single instance...
|
||||
_colorPicker = new ColorPicker(options);
|
||||
|
||||
$document.on('touchstart mousedown pointerdown', function(e) {
|
||||
if ($.inArray(e.target, $that) === -1 &&
|
||||
!$(e.target).closest(_$UI).length) {
|
||||
toggle();
|
||||
}
|
||||
}).on('focus', this.selector, toggle);
|
||||
}
|
||||
|
||||
this.colorPicker = _colorPicker;
|
||||
|
||||
return this.each(function() {
|
||||
var value = extractValue(this),
|
||||
mode = value.split('(');
|
||||
// save initial color mode and set color and bgColor
|
||||
$(this).data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX');
|
||||
options.doRender && $(this).css({'background-color': value,
|
||||
'color': function() {
|
||||
return _color.setColor(value).
|
||||
rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
})(window.jQuery, Colors);
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,4 @@
|
||||
/*! tiny colorPicker - v1.0.0 2015-02-02 */
|
||||
!function(a,b){"use strict";function c(a,c,d,f,g){if("string"==typeof c){var c=t.txt2color(c);d=c.type,n[d]=c[d],g=g!==b?g:c.alpha}else if(c)for(var h in c)a[d][h]=k(c[h]/l[d][h][1],0,1);return g!==b&&(a.alpha=+g),e(d,f?a:b)}function d(a,b,c){var d=m.options.grey,e={};return e.RGB={r:a.r,g:a.g,b:a.b},e.rgb={r:b.r,g:b.g,b:b.b},e.alpha=c,e.equivalentGrey=Math.round(d.r*a.r+d.g*a.g+d.b*a.b),e.rgbaMixBlack=i(b,{r:0,g:0,b:0},c,1),e.rgbaMixWhite=i(b,{r:1,g:1,b:1},c,1),e.rgbaMixBlack.luminance=h(e.rgbaMixBlack,!0),e.rgbaMixWhite.luminance=h(e.rgbaMixWhite,!0),m.options.customBG&&(e.rgbaMixCustom=i(b,m.options.customBG,c,1),e.rgbaMixCustom.luminance=h(e.rgbaMixCustom,!0),m.options.customBG.luminance=h(m.options.customBG,!0)),e}function e(a,b){var c,e,k,o=b||n,p=t,q=m.options,r=l,s=o.RND,u="",v="",w={hsl:"hsv",rgb:a},x=s.rgb;if("alpha"!==a){for(var y in r)if(!r[y][y]){a!==y&&(v=w[y]||"rgb",o[y]=p[v+"2"+y](o[v])),s[y]||(s[y]={}),c=o[y];for(u in c)s[y][u]=Math.round(c[u]*r[y][u][1])}x=s.rgb,o.HEX=p.RGB2HEX(x),o.equivalentGrey=q.grey.r*o.rgb.r+q.grey.g*o.rgb.g+q.grey.b*o.rgb.b,o.webSave=e=f(x,51),o.webSmart=k=f(x,17),o.saveColor=x.r===e.r&&x.g===e.g&&x.b===e.b?"web save":x.r===k.r&&x.g===k.g&&x.b===k.b?"web smart":"",o.hueRGB=t.hue2RGB(o.hsv.h),b&&(o.background=d(x,o.rgb,o.alpha))}var z,A,B,C=o.rgb,D=o.alpha,E="luminance",F=o.background;return z=i(C,{r:0,g:0,b:0},D,1),z[E]=h(z,!0),o.rgbaMixBlack=z,A=i(C,{r:1,g:1,b:1},D,1),A[E]=h(A,!0),o.rgbaMixWhite=A,q.customBG&&(B=i(C,F.rgbaMixCustom,D,1),B[E]=h(B,!0),B.WCAG2Ratio=j(B[E],F.rgbaMixCustom[E]),o.rgbaMixBGMixCustom=B,B.luminanceDelta=Math.abs(B[E]-F.rgbaMixCustom[E]),B.hueDelta=g(F.rgbaMixCustom,B,!0)),o.RGBLuminance=h(x),o.HUELuminance=h(o.hueRGB),q.convertCallback&&q.convertCallback(o,a),o}function f(a,b){var c={},d=0,e=b/2;for(var f in a)d=a[f]%b,c[f]=a[f]+(d>e?b-d:-d);return c}function g(a,b,c){return(Math.max(a.r-b.r,b.r-a.r)+Math.max(a.g-b.g,b.g-a.g)+Math.max(a.b-b.b,b.b-a.b))*(c?255:1)/765}function h(a,b){for(var c=b?1:255,d=[a.r/c,a.g/c,a.b/c],e=m.options.luminance,f=d.length;f--;)d[f]=d[f]<=.03928?d[f]/12.92:Math.pow((d[f]+.055)/1.055,2.4);return e.r*d[0]+e.g*d[1]+e.b*d[2]}function i(a,c,d,e){var f={},g=d!==b?d:1,h=e!==b?e:1,i=g+h*(1-g);for(var j in a)f[j]=(a[j]*g+c[j]*h*(1-g))/i;return f.a=i,f}function j(a,b){var c=1;return c=a>=b?(a+.05)/(b+.05):(b+.05)/(a+.05),Math.round(100*c)/100}function k(a,b,c){return a>c?c:b>a?b:a}var l={rgb:{r:[0,255],g:[0,255],b:[0,255]},hsv:{h:[0,360],s:[0,100],v:[0,100]},hsl:{h:[0,360],s:[0,100],l:[0,100]},alpha:{alpha:[0,1]},HEX:{HEX:[0,16777215]}},m={},n={},o={r:.298954,g:.586434,b:.114612},p={r:.2126,g:.7152,b:.0722},q=a.Colors=function(a){this.colors={RND:{}},this.options={color:"rgba(204, 82, 37, 0.8)",grey:o,luminance:p,valueRanges:l},r(this,a||{})},r=function(a,d){var e,f=a.options;s(a);for(var g in d)d[g]!==b&&(f[g]=d[g]);e=f.customBG,f.customBG="string"==typeof e?t.txt2color(e).rgb:e,n=c(a.colors,f.color,b,!0)},s=function(a){m!==a&&(m=a,n=a.colors)};q.prototype.setColor=function(a,d,f){return s(this),a?c(this.colors,a,d,b,f):(f!==b&&(this.colors.alpha=f),e(d))},q.prototype.setCustomBackground=function(a){return s(this),this.options.customBG="string"==typeof a?t.txt2color(a).rgb:a,c(this.colors,b,"rgb")},q.prototype.saveAsBackground=function(){return s(this),c(this.colors,b,"rgb",!0)};var t={txt2color:function(a){var b={},c=a.replace(/(?:#|\)|%)/g,"").split("("),d=(c[1]||"").split(/,\s*/),e=c[1]?c[0].substr(0,3):"rgb",f="";if(b.type=e,b[e]={},c[1])for(var g=3;g--;)f=e[g]||e.charAt(g),b[e][f]=+d[g]/l[e][f][1];else b.rgb=t.HEX2rgb(c[0]);return b.alpha=d[3]?+d[3]:1,b},RGB2HEX:function(a){return((a.r<16?"0":"")+a.r.toString(16)+(a.g<16?"0":"")+a.g.toString(16)+(a.b<16?"0":"")+a.b.toString(16)).toUpperCase()},HEX2rgb:function(a){return a=a.split(""),{r:parseInt(a[0]+a[a[3]?1:0],16)/255,g:parseInt(a[a[3]?2:1]+(a[3]||a[1]),16)/255,b:parseInt((a[4]||a[2])+(a[5]||a[2]),16)/255}},hue2RGB:function(a){var b=6*a,c=~~b%6,d=6===b?0:b-c;return{r:Math.round(255*[1,1-d,0,0,d,1][c]),g:Math.round(255*[d,1,1,1-d,0,0][c]),b:Math.round(255*[0,0,d,1,1,1-d][c])}},rgb2hsv:function(a){var b,c,d,e=a.r,f=a.g,g=a.b,h=0;return g>f&&(f=g+(g=f,0),h=-1),c=g,f>e&&(e=f+(f=e,0),h=-2/6-h,c=Math.min(f,g)),b=e-c,d=e?b/e:0,{h:1e-15>d?n&&n.hsl&&n.hsl.h||0:b?Math.abs(h+(f-g)/(6*b)):0,s:e?b/e:n&&n.hsv&&n.hsv.s||0,v:e}},hsv2rgb:function(a){var b=6*a.h,c=a.s,d=a.v,e=~~b,f=b-e,g=d*(1-c),h=d*(1-f*c),i=d*(1-(1-f)*c),j=e%6;return{r:[d,h,g,g,i,d][j],g:[i,d,d,h,g,g][j],b:[g,g,i,d,d,h][j]}},hsv2hsl:function(a){var b=(2-a.s)*a.v,c=a.s*a.v;return c=a.s?1>b?b?c/b:0:c/(2-b):0,{h:a.h,s:a.v||c?c:n&&n.hsl&&n.hsl.s||0,l:b/2}},rgb2hsl:function(a,b){var c=t.rgb2hsv(a);return t.hsv2hsl(b?c:n.hsv=c)},hsl2rgb:function(a){var b=6*a.h,c=a.s,d=a.l,e=.5>d?d*(1+c):d+c-c*d,f=d+d-e,g=e?(e-f)/e:0,h=~~b,i=b-h,j=e*g*i,k=f+j,l=e-j,m=h%6;return{r:[e,l,f,f,k,e][m],g:[k,e,e,l,f,f][m],b:[f,f,k,e,e,l][m]}}}}(window);
|
||||
!function(a,b){"use strict";function c(b){return b.value||a(b).css("background-color")||"#fff"}function d(a){return a.originalEvent.touches?a.originalEvent.touches[0]:a}function e(b){var d,e=a(this);b?(d=e.offset(),r.$element=e,o.preventFocus&&b.preventDefault(),(p||f()).css({left:d.left,top:d.top+e.outerHeight(!0)}).show(o.animationSpeed,function(){r.alphaWidth=a(".cp-alpha",p).width(),r.sliderWidth=a(".cp-xy-slider",p).width(),n.setColor(c(e[0])),v(function(){l(!0)})})):a(p).hide(o.animationSpeed,function(){r.$element.blur()})}function f(){return a("head").append('<style type="text/css">'+(o.css||x)+(o.cssAddon||"")+"</style>"),p=a(w).css({margin:o.margin}).find(".cp-alpha").toggle(!!o.opacity).parent().show(0,function(){u=o.GPU&&""===a(this).css("transform"),o.buidCallback.call(m,a(this))}).hide().on("touchstart mousedown pointerdown",".cp-xy-slider,.cp-z-slider,.cp-alpha",g).appendTo(document.body)}function g(b){var c=this.className.replace("cp-","").replace("-","_");b.preventDefault(),r.elementOrigin=a(this).offset(),(c="xy_slider"===c?i:"z_slider"===c?j:k)(b),q.on(t,h).on(s,c)}function h(){q.off(s).off(t)}function i(a){var b=d(a),c=b.pageX-r.elementOrigin.left,e=b.pageY-r.elementOrigin.top;n.setColor({s:c/r.sliderWidth*100,v:100-e/r.sliderWidth*100},"hsv"),v(l)}function j(a){{var b=d(a).pageY-r.elementOrigin.top;n.colors.hsv}n.setColor({h:360-b/r.sliderWidth*360},"hsv"),v(l)}function k(a){var b=d(a).pageX-r.elementOrigin.left,c=b/r.alphaWidth;n.setColor({},"rgb",c>1?1:0>c?0:c),v(l)}function l(b){var c=n.colors,d=c.hueRGB,e=c.RND.rgb,f=c.RND.hsl,g="#222",h="#ddd",i=r.$element.data("colorMode"),j=1!==c.alpha,k=Math.round(100*c.alpha)/100,l=e.r+", "+e.g+", "+e.b,p="rgba("+l+", "+k+")",q="HEX"!==i||j?"rgb"===i||"HEX"===i&&j?j?p:"rgb("+l+")":"hsl"+(j?"a(":"(")+f.h+", "+f.s+"%, "+f.l+"%"+(j?", "+k:"")+")":"#"+c.HEX,s=c.HUELuminance>.22?g:h,t=c.rgbaMixBlack.luminance>.22?g:h,v=(1-c.hsv.h)*r.sliderWidth,w=c.hsv.s*r.sliderWidth,x=(1-c.hsv.v)*r.sliderWidth,y=k*r.alphaWidth,z=u?"translate3d":"";a(".cp-xy-slider").css({backgroundColor:"rgb("+d.r+","+d.g+","+d.b+")"}),a(".cp-xy-cursor").css({transform:z+"("+w+"px, "+x+"px, 0)",left:u?"":w,top:u?"":x,borderColor:c.RGBLuminance>.22?g:h}),a(".cp-z-cursor").css({transform:z+"(0, "+v+"px, 0)",top:u?"":v,borderLeftColor:s,borderRightColor:s}),a(".cp-alpha").css({backgroundColor:"rgb("+l+")"}),a(".cp-alpha-cursor").css({transform:z+"("+y+"px, 0, 0)",left:u?"":y,borderTopColor:t,borderBottomColor:t}),o.doRender&&r.$element.css({backgroundColor:p,color:c.rgbaMixBGMixCustom.luminance>.22?g:h}),r.$element.val(q),o.renderCallback.call(m,r.$element,b===!0)}var m,n,o,p,q=a(document),r={},s="touchmove mousemove pointermove",t="touchend mouseup pointerup",u=!1,v=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(a){a()},w='<div class="cp-color-picker"><div class="cp-z-slider"><div class="cp-z-cursor"></div></div><div class="cp-xy-slider"><div class="cp-white"></div><div class="cp-xy-cursor"></div></div><div class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',x=".cp-color-picker{position:absolute;overflow:hidden;padding:6px 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;cursor:default;border-radius:5px}.cp-color-picker>div{position:relative;overflow:hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-bottom:6px;background:linear-gradient(to right,rgba(255,255,255,1)0,rgba(255,255,255,0)100%)}.cp-white{height:100%;width:100%;background:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)100%)}.cp-xy-cursor{position:absolute;top:0;width:10px;height:10px;margin:-5px;border:1px solid #fff;border-radius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin-left:6px;height:128px;width:20px;background:linear-gradient(to bottom,red 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-cursor{position:absolute;margin-top:-4px;width:100%;border:4px solid #fff;border-color:transparent #fff;box-sizing:border-box}.cp-alpha{clear:left;width:100%;height:16px;margin:6px 0;background:linear-gradient(to right,rgba(68,68,68,1)0,rgba(0,0,0,0)100%)}.cp-alpha-cursor{position:absolute;margin-left:-4px;height:100%;border:4px solid #fff;border-color:#fff transparent;box-sizing:border-box}",y=function(a){n=this.color=new b(a),o=n.options};y.prototype.render=l,a.fn.colorPicker=function(b){var d=this,f=function(){};return b=a.extend({animationSpeed:150,GPU:!0,doRender:!0,customBG:"#FFF",opacity:!0,renderCallback:f,buidCallback:f},b),m||(m=new y(b),q.on("touchstart mousedown pointerdown",function(b){-1!==a.inArray(b.target,d)||a(b.target).closest(p).length||e()}).on("focus",this.selector,e)),this.colorPicker=m,this.each(function(){var d=c(this),e=d.split("(");a(this).data("colorMode",e[1]?e[0].substr(0,3):"HEX"),b.doRender&&a(this).css({"background-color":d,color:function(){return n.setColor(d).rgbaMixBGMixCustom.luminance>.22?"#222":"#ddd"}})})}}(window.jQuery,Colors);
|
||||
//# sourceMappingURL=jqColorPicker.js.map
|
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "tiny colorPicker",
|
||||
"version": "1.0.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/PitPik/tinyColorPicker.git"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-contrib-uglify": "^0.5.1"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue