mirror of
https://github.com/PitPik/tinyColorPicker
synced 2025-07-29 12:54:29 -06:00
Added 'stay inside view-port' functionality
This commit is contained in:
peterd
parent
73bb53b910
commit
af6098b6b9
@ -2,7 +2,7 @@
|
||||
# tinyColorPicker and colors
|
||||
|
||||
Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
|
||||
This 4.5KB small (1 .js file only; no images or css needed) HSB color picker is based on a subset of [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from it's big brother [colorPicker](https://github.com/PitPik/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.
|
||||
This 4.7KB small (1 .js file only; no images or css needed) HSB color picker is based on a subset of [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from it's big brother [colorPicker](https://github.com/PitPik/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)
|
||||
|
||||
@ -36,7 +36,7 @@ a:hover {
|
||||
}
|
||||
pre {
|
||||
display: inline;
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
background-color: rgba(255, 255, 255, .19);
|
||||
padding: .5em;
|
||||
}
|
||||
.color {
|
||||
|
||||
32
index.html
32
index.html
@ -18,7 +18,7 @@
|
||||
<div id="content-wrapper">
|
||||
<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>
|
||||
This <strong>4.7KB</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" class="a-inline"></a>
|
||||
<h2>Demo</h2>
|
||||
On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
|
||||
@ -30,7 +30,7 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
|
||||
<option value="memory">Color memory spaces</option>
|
||||
<option value="skinned">Skinned (white)</option>
|
||||
<option value="dev_skinned">Skinned dev-tools like</option>
|
||||
<option value="dev_skinned_hh">Skinned dev-tools small height</option>
|
||||
<option value="dev_skinned_hh">Skinned dev-tools 3:2</option>
|
||||
<option value="noalpha">Default without alpha</option>
|
||||
<option value="small">Default but smaller</option>
|
||||
<option value="IE8">Better IE8- support</option>
|
||||
@ -56,7 +56,7 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
|
||||
</script>
|
||||
</pre>
|
||||
<h2>Features</h2>
|
||||
<p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies, super fast rendering for best performance on desktop and mobile browsers and renders perfectly smooth on retina and high resolution displays.<br>
|
||||
<p>Tiny jQuery colorPicker only loads into memory if triggered to show and auto repositiones inside view-port if it doesn't fit. It uses battery saving technologies, super fast rendering for best performance on desktop and mobile browsers and renders perfectly smooth on retina and high resolution displays.<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>
|
||||
@ -94,9 +94,9 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
|
||||
<!-- <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" 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';
|
||||
@ -121,7 +121,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// plugin for mobile use (bigger and value/color display on top)
|
||||
plugin.mobile = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
margin: '4px -2px 0',
|
||||
doRender: 'div div',
|
||||
preventFocus: true,
|
||||
animationSpeed: 0,
|
||||
@ -157,7 +157,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// shows input fields for rgb and hsv; changeable
|
||||
plugin.input = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
margin: '4px -2px 0',
|
||||
doRender: 'div div',
|
||||
|
||||
buidCallback: function($elm) {
|
||||
@ -217,7 +217,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// shows memory fields
|
||||
plugin.memory = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
margin: '4px -2px 0',
|
||||
doRender: 'div div',
|
||||
opacity: false,
|
||||
|
||||
@ -260,7 +260,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// the default; no extra stuff
|
||||
plugin.desktop = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
margin: '4px -2px 0',
|
||||
doRender: 'div div',
|
||||
cssAddon:'.cp-xy-slider:active {cursor:none;}'
|
||||
};
|
||||
@ -268,7 +268,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// the default without alpha chanel though
|
||||
plugin.noalpha = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
margin: '4px -2px 0',
|
||||
doRender: 'div div',
|
||||
cssAddon:'.cp-xy-slider:active {cursor:none;}',
|
||||
opacity: false
|
||||
@ -277,7 +277,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// the default but smaller
|
||||
plugin.small = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
margin: '4px -2px 0',
|
||||
doRender: 'div div',
|
||||
cssAddon: // could also be in a css file instead
|
||||
'.cp-color-picker{padding:5px 5px 0;}' +
|
||||
@ -290,7 +290,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// better IE support
|
||||
plugin.IE8 = {
|
||||
customBG: '#222',
|
||||
margin: '4px -2px',
|
||||
margin: '4px -2px 0',
|
||||
doRender: 'div div',
|
||||
// this demo adds divs with gradiends,... you could simply load an image as well
|
||||
buidCallback: function($elm) {
|
||||
@ -325,7 +325,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// the default skinned and white
|
||||
plugin.skinned = {
|
||||
customBG: '#222',
|
||||
margin: '5px -2px',
|
||||
margin: '5px -2px 0',
|
||||
doRender: 'div div',
|
||||
cssAddon: // could also be in a css file instead
|
||||
'.cp-color-picker{border:1px solid #999; padding:10px;' +
|
||||
@ -353,7 +353,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
// skinned similar to dev tools color picker (but then way smaller and faster...)
|
||||
plugin.dev_skinned = {
|
||||
customBG: '#222',
|
||||
margin: '5px 0px',
|
||||
margin: '5px 0 0',
|
||||
doRender: 'div div',
|
||||
colorNames: {
|
||||
'191970': 'midnightblue',
|
||||
@ -578,7 +578,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
plugin[type] || plugin.desktop
|
||||
);
|
||||
$('.trigger').colorPicker();
|
||||
// $('pre').colorPicker({doRender: false});
|
||||
$('pre').colorPicker({doRender: false});
|
||||
})(window);
|
||||
</script>
|
||||
<a class="a-inline" 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>
|
||||
|
||||
@ -66,21 +66,30 @@
|
||||
|
||||
function toggle(event) {
|
||||
var $this = $(this),
|
||||
position;
|
||||
position,
|
||||
$window = $(window);
|
||||
|
||||
if (event) {
|
||||
position = $this.offset();
|
||||
_$trigger = findElement($this);
|
||||
|
||||
(_$UI || build()).css({
|
||||
'left': position.left, // check for space...
|
||||
'top': position.top + $this.outerHeight()
|
||||
}).show(_options.animationSpeed, function() {
|
||||
(_$UI || build()).show(_options.animationSpeed, function() {
|
||||
_$alpha._width = _$alpha.width();
|
||||
_$xy_slider._width = _$xy_slider.width();
|
||||
_$xy_slider._height = _$xy_slider.height();
|
||||
_color.setColor(extractValue(_$trigger[0]));
|
||||
|
||||
preRender(true);
|
||||
}).css({
|
||||
'left': !(_$UI[0]._right = position.left + _$UI[0]._width >
|
||||
$window.scrollLeft() + $window.width() ? 4 : '') ?
|
||||
position.left : '',
|
||||
'top': !(_$UI[0]._bottom = position.top + $this.outerHeight() +
|
||||
_$UI[0]._height > $window.scrollTop() + $window.height() ?
|
||||
-$window.scrollTop() + 4 : '') ?
|
||||
position.top + $this.outerHeight() : '',
|
||||
'right': _$UI[0]._right,
|
||||
'bottom': _$UI[0]._bottom
|
||||
});
|
||||
} else {
|
||||
$(_$UI).hide(_options.animationSpeed, function() {
|
||||
@ -95,18 +104,21 @@
|
||||
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
|
||||
|
||||
return _$UI = $(_html).css({'margin': _options.margin}).
|
||||
appendTo('body').
|
||||
show(0, function() {
|
||||
_GPU = _options.GPU && $(this).css('perspective') === '';
|
||||
_options.buidCallback.call(_colorPicker, $(this));
|
||||
_$xy_slider = $('.cp-xy-slider', this);
|
||||
_$xy_cursor = $('.cp-xy-cursor', this);
|
||||
_$z_cursor = $('.cp-z-cursor', this);
|
||||
_$alpha = $('.cp-alpha', this).toggle(!!_options.opacity);
|
||||
_$alpha_cursor = $('.cp-alpha-cursor', this);
|
||||
_options.buidCallback.call(_colorPicker, $(this));
|
||||
this._width = this.offsetWidth;
|
||||
this._height = this.offsetHeight;
|
||||
}).hide().
|
||||
on('touchstart mousedown pointerdown',
|
||||
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown).
|
||||
appendTo('body');
|
||||
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown)
|
||||
;
|
||||
}
|
||||
|
||||
function pointerdown(e) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
jqColorPicker.min.js
vendored
2
jqColorPicker.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user