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

506 lines
19 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>