You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

506 lines
19 KiB

<!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.5KB</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 elements with className 'color': <pre>$('.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="memory">Color memory spaces</option>
<option value="skinned">Skinned (white)</option>
<option value="dev_skinned">Skinned dev-tools like</option>
<option value="noalpha">Default without alpha</option>
<option value="small">Default but smaller</option>
</select>
(see index.html for more details...)
</p>
<div class="input-toggles">
<input class="color" value="#B6BD79" />
<input class="color" value="rgb(162, 63, 3)" />
<input class="color" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
<div class="color trigger" value="#556B2F"><div><div></div></div></div>
<div class="color trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="color trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
</div>
<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('&lt;div class="cp-disp">&lt;/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="http://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 = $('#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');
// plugin for mobile use (bigger and value/color display on top)
plugin.mobile = {
customBG: '#222',
margin: '4px -2px',
doRender: 'div div',
// 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',
doRender: 'div div',
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" /><hr>' +
'<input type="text" class="cp-HEX" />' +
'</div>').on('change', 'input', function(e) {
var value = this.value,
className = this.className,
type = className.split('-')[1],
color = {};
color[type] = value;
colorInstance.setColor(type === 'HEX' ? value : color,
type === 'HEX' ? 'HEX' : /(?:r|g|b)/.test(type) ? 'rgb' : 'hsv');
colorPicker.render();
this.blur();
});
},
cssAddon: // could also be in a css file instead
'.cp-color-picker .cp-panel {line-height: 21px; float:right;' +
'padding:0 1px 0 8px; margin-top:-1px; overflow:visible}' +
'.cp-panel, .cp-panel input {color:#bbb; font-family:monospace,' +
'"Courier New",Courier,mono; font-size:12px; font-weight:bold;}' +
'.cp-panel input {width:28px; 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;}' +
'.cp-panel .cp-HEX {width:44px; position:absolute; margin:1px -3px 0 -2px;}' +
'.cp-alpha {width:154px;}',
renderCallback: function($elm, toggled) {
var colors = this.color.colors.RND,
modes = {
r: colors.rgb.r, g: colors.rgb.g, b: colors.rgb.b,
h: colors.hsv.h, s: colors.hsv.s, v: colors.hsv.v,
HEX: this.color.colors.HEX
};
$('input', '.cp-panel').each(function() {
this.value = modes[this.className.substr(3)];
});
}
};
// shows memory fields
plugin.memory = {
customBG: '#222',
margin: '4px -2px',
doRender: 'div div',
opacity: false,
buidCallback: function($elm) {
var colorInstance = this.color,
colorPicker = this,
random = function(n) {
return Math.round(Math.random() * (n || 255));
};
$elm.append('<div class="cp-memory">' +
'<div></div><div></div><div></div><div></div>' +
'<div></div><div></div><div></div><div class="cp-store">S</div>').
on('click', '.cp-memory div', function(e) {
var $this = $(this);
if (this.className) {
$this.parent().prepend($this.prev()).children().eq(0).
css('background-color', '#' + colorInstance.colors.HEX);
} else {
colorInstance.setColor($this.css('background-color'));
colorPicker.render();
}
}).find('.cp-memory div').each(function() {
!this.className && $(this).css({background:
'rgb(' + random() + ', ' + random() + ', ' + random() + ')'
});
});
},
cssAddon: // could also be in a css file instead
'.cp-memory {margin-bottom:6px; clear:both;}' +
'.cp-memory div {float:left; width:17px; height:17px; margin-right:2px;' +
'background:rgba(0,0,0,1); text-align:center; line-height:17px;}' +
'.cp-memory .cp-store {width:21px; margin:0; background:none; font-weight:bold;' +
'box-sizing:border-box; border: 1px solid; border-color: #666 #222 #222 #666;}'
};
// the default; no extra stuff
plugin.desktop = {
customBG: '#222',
margin: '4px -2px',
doRender: 'div div'
};
// the default without alpha chanel though
plugin.noalpha = {
customBG: '#222',
margin: '4px -2px',
doRender: 'div div',
opacity: false
};
// the default but smaller
plugin.small = {
customBG: '#222',
margin: '4px -2px',
doRender: 'div div',
cssAddon: // could also be in a css file instead
'.cp-color-picker{padding:5px 5px 0;}' +
'.cp-xy-slider{width:100px; height:100px; margin-bottom:3px;}' +
'.cp-z-slider{height:100px; margin-left:4px;}' +
'.cp-alpha{margin:4px 0;}'
};
// the default skinned and white
plugin.skinned = {
customBG: '#222',
margin: '5px -2px',
doRender: 'div div',
cssAddon: // could also be in a css file instead
'.cp-color-picker{border:1px solid #999; padding:10px;' +
'background:#eee; overflow:visible; border-radius:3px;}' +
'.cp-color-picker:after{content:""; display:block; ' +
'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
'border-color: transparent transparent #eee}' +
// simulate border...
'.cp-color-picker:before{content:""; display:block; ' +
'position:absolute; top:-16px; left:12px; border:8px solid #eee;' +
'border-color: transparent transparent #999}' +
'.cp-xy-slider{border:1px solid #999; margin-bottom:10px;}' +
'.cp-xy-cursor{width:12px; height:12px; margin:-6px}' +
'.cp-z-slider{margin-left:10px; border:1px solid #999;}' +
'.cp-z-cursor{border-width:5px; margin-top:-5px;}' +
'.cp-color-picker .cp-alpha{margin:10px 0 0; height:6px; border-radius:6px;' +
'overflow:visible; border:1px solid #999; box-sizing:border-box;' +
'background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);}' +
'.cp-alpha-cursor{background: #eee; border-radius: 100%;' +
'width:14px; height:14px; margin:-5px -7px; border:1px solid #666!important;' +
'box-shadow:inset -2px -4px 3px #ccc}'
};
// skinned similar to dev tools color picker (but then way smaller and faster...)
plugin.dev_skinned = {
customBG: '#222',
margin: '5px 0px',
doRender: 'div div',
colorNames: {
'191970': 'midnightblue',
'696969': 'dimgrey',
'708090': 'slategrey',
'778899': 'lightslategrey',
'800000': 'maroon',
'800080': 'purple',
'808000': 'olive',
'808080': 'grey',
'F0F8FF': 'aliceblue',
'FAEBD7': 'antiquewhite',
'00FFFF': 'cyan',
'7FFFD4': 'aquamarine',
'F0FFFF': 'azure',
'F5F5DC': 'beige',
'FFE4C4': 'bisque',
'000000': 'black',
'FFEBCD': 'blanchedalmond',
'0000FF': 'blue',
'8A2BE2': 'blueviolet',
'A52A2A': 'brown',
'DEB887': 'burlywood',
'5F9EA0': 'cadetblue',
'7FFF00': 'chartreuse',
'D2691E': 'chocolate',
'FF7F50': 'coral',
'6495ED': 'cornflowerblue',
'FFF8DC': 'cornsilk',
'DC143C': 'crimson',
'00008B': 'darkblue',
'008B8B': 'darkcyan',
'B8860B': 'darkgoldenrod',
'A9A9A9': 'darkgrey',
'006400': 'darkgreen',
'BDB76B': 'darkkhaki',
'8B008B': 'darkmagenta',
'556B2F': 'darkolivegreen',
'FF8C00': 'darkorange',
'9932CC': 'darkorchid',
'8B0000': 'darkred',
'E9967A': 'darksalmon',
'8FBC8F': 'darkseagreen',
'483D8B': 'darkslateblue',
'2F4F4F': 'darkslategrey',
'00CED1': 'darkturquoise',
'9400D3': 'darkviolet',
'FF1493': 'deeppink',
'00BFFF': 'deepskyblue',
'1E90FF': 'dodgerblue',
'B22222': 'firebrick',
'FFFAF0': 'floralwhite',
'228B22': 'forestgreen',
'FF00FF': 'magenta',
'DCDCDC': 'gainsboro',
'F8F8FF': 'ghostwhite',
'FFD700': 'gold',
'DAA520': 'goldenrod',
'008000': 'green',
'ADFF2F': 'greenyellow',
'F0FFF0': 'honeydew',
'FF69B4': 'hotpink',
'CD5C5C': 'indianred',
'4B0082': 'indigo',
'FFFFF0': 'ivory',
'F0E68C': 'khaki',
'E6E6FA': 'lavender',
'FFF0F5': 'lavenderblush',
'7CFC00': 'lawngreen',
'FFFACD': 'lemonchiffon',
'ADD8E6': 'lightblue',
'F08080': 'lightcoral',
'E0FFFF': 'lightcyan',
'FAFAD2': 'lightgoldenrodyellow',
'D3D3D3': 'lightgrey',
'90EE90': 'lightgreen',
'FFB6C1': 'lightpink',
'FFA07A': 'lightsalmon',
'20B2AA': 'lightseagreen',
'87CEFA': 'lightskyblue',
'B0C4DE': 'lightsteelblue',
'FFFFE0': 'lightyellow',
'00FF00': 'lime',
'32CD32': 'limegreen',
'FAF0E6': 'linen',
'66CDAA': 'mediumaquamarine',
'0000CD': 'mediumblue',
'BA55D3': 'mediumorchid',
'9370DB': 'mediumpurple',
'3CB371': 'mediumseagreen',
'7B68EE': 'mediumslateblue',
'00FA9A': 'mediumspringgreen',
'48D1CC': 'mediumturquoise',
'C71585': 'mediumvioletred',
'F5FFFA': 'mintcream',
'FFE4E1': 'mistyrose',
'FFE4B5': 'moccasin',
'FFDEAD': 'navajowhite',
'000080': 'navy',
'FDF5E6': 'oldlace',
'6B8E23': 'olivedrab',
'FFA500': 'orange',
'FF4500': 'orangered',
'DA70D6': 'orchid',
'EEE8AA': 'palegoldenrod',
'98FB98': 'palegreen',
'AFEEEE': 'paleturquoise',
'DB7093': 'palevioletred',
'FFEFD5': 'papayawhip',
'FFDAB9': 'peachpuff',
'CD853F': 'peru',
'FFC0CB': 'pink',
'DDA0DD': 'plum',
'B0E0E6': 'powderblue',
'FF0000': 'red',
'BC8F8F': 'rosybrown',
'4169E1': 'royalblue',
'8B4513': 'saddlebrown',
'FA8072': 'salmon',
'F4A460': 'sandybrown',
'2E8B57': 'seagreen',
'FFF5EE': 'seashell',
'A0522D': 'sienna',
'C0C0C0': 'silver',
'87CEEB': 'skyblue',
'6A5ACD': 'slateblue',
'FFFAFA': 'snow',
'00FF7F': 'springgreen',
'4682B4': 'steelblue',
'D2B48C': 'tan',
'008080': 'teal',
'D8BFD8': 'thistle',
'FF6347': 'tomato',
'40E0D0': 'turquoise',
'EE82EE': 'violet',
'F5DEB3': 'wheat',
'FFFFFF': 'white',
'F5F5F5': 'whitesmoke',
'FFFF00': 'yellow',
'9ACD32': 'yellowgreen'
},
buidCallback: function($elm) {
var that = this;
$elm.append('<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
$('.trigger').on('click', function(e) {
if (e.target === this && $(this).hasClass('active')) {
e.cancelBubble = true;
e.stopPropagation && e.stopPropagation();
that.toggle();
}
})
},
cssAddon: // could also be in a css file instead
'.cp-patch{float:left; margin:9px 0 0;' +
'height:24px; width: 24px; border:1px solid #aaa;}' +
'.cp-patch{background-image: url(\'data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7\');}' +
'.cp-patch div{height:24px; width: 24px;}' +
'.cp-disp{padding:4px 0 4px 4px; margin-top:10px; font-size:12px;' +
'height:16px; line-height:16px; color:#333;}' +
'.cp-color-picker{border:1px solid #999; padding:8px; box-shadow:5px 5px 16px rgba(0,0,0,0.4);' +
'background:#eee; overflow:visible; border-radius:3px;}' +
'.cp-color-picker:after{content:""; display:block; ' +
'position:absolute; top:-15px; left:8px; border:8px solid #eee;' +
'border-color: transparent transparent #eee}' +
// simulate border...
'.cp-color-picker:before{content:""; display:block; ' +
'position:absolute; top:-16px; left:8px; border:8px solid #eee;' +
'border-color: transparent transparent #999}' +
'.cp-xy-slider{border:1px solid #aaa; margin-bottom:10px; width:150px; height:150px;}' +
'.cp-xy-slider:active{cursor:none;}' +
'.cp-xy-cursor{width:12px; height:12px; margin:-6px}' +
'.cp-z-slider{margin-left:8px; border:1px solid #aaa; height:150px; width:24px;}' +
'.cp-z-cursor{border-width:5px; margin-top:-5px;}' +
'.cp-color-picker .cp-alpha{width:152px; margin:10px 0 0; height:6px; border-radius:6px;' +
'overflow:visible; border:1px solid #aaa; box-sizing:border-box;' +
'background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);}' +
'.cp-alpha-cursor{background: #eee; border-radius: 100%;' +
'width:14px; height:14px; margin:-5px -7px; border:1px solid #999!important;' +
'box-shadow:inset -2px -4px 3px #ccc}' +
'.cp-alpha:after{position:relative; content:"α"; color:#666; font-size:16px;' +
'font-family:monospace; position:absolute; right:-26px; top:-8px}',
renderCallback: function($elm, toggled) {
var colors = this.color.colors,
rgb = colors.RND.rgb;
$('.cp-patch div').css({'background-color': $elm[0].style.backgroundColor});
$('.cp-disp').text(this.color.options.colorNames[colors.HEX] || $elm.val());
if (toggled === true) {
// here you can recalculate position after showing the color picker
// in case it doesn't fit into view.
$('.color').removeClass('active');
$elm.closest('.color').addClass('active');
} else if (toggled === false) {
$elm.closest('.color').removeClass('active');
}
}
};
$pluginSelect.val(type || 'desktop').
on('change', function(e) {
window.location = './?type=' + this.value + '#demo'
});
window.myColorPicker = $('.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>