mirror of
https://github.com/PitPik/tinyColorPicker
synced 2025-08-14 04:32:45 -06:00
New positionCallback
Added new callback to customary position the colorPicker on toggle.
This commit is contained in:
parent
cd0e084ceb
commit
57c19961fd
21
README.md
21
README.md
@ -49,6 +49,7 @@ $('.color').colorPicker({
|
||||
renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move
|
||||
// toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,...
|
||||
buildCallback: function($elm) {}, // this === instance; $elm: the UI
|
||||
positionCallback: function($elm) {return {top: y, left: x}}, // this === instance; $elm: the trigger element;
|
||||
css: '', // replaces existing css
|
||||
cssAddon: '', // adds css to existing
|
||||
margin: '', // positioning margin (can also be set in cssAddon)
|
||||
@ -63,6 +64,26 @@ $('.color').colorPicker({
|
||||
```
|
||||
#### Some tips
|
||||
|
||||
The positionCallback can be used to optionally position the colorPicker different from its default; in case you want it to also show above or to the left of the input field etc.
|
||||
The callback will also be called on scroll.
|
||||
You need to return an object that holds ```left``` and ```top``` to position the colorPicker. See ./demo/index.js for an example:
|
||||
|
||||
```javascript
|
||||
positionCallback: function($elm) {
|
||||
var _$UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
|
||||
position = $elm.offset(), // $elm is the current trigger that opened the UI
|
||||
gap = this.color.options.gap, // this.color.options stores all options
|
||||
top = 0,
|
||||
left = 0;
|
||||
|
||||
// do here your calculations with top and left and...
|
||||
return { // the object will be used as in $('.something').css({...});
|
||||
left: left,
|
||||
top: top
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The renderCallback can be used as openCallback and closeCallback:
|
||||
|
||||
```javascript
|
||||
|
@ -63,6 +63,23 @@ $(function(){
|
||||
// append css after just generated / use cssAddon instead if you want
|
||||
$('#colorPickerMod').appendTo('head');
|
||||
},
|
||||
positionCallback: function($elm) { // optional function to position colorPicker on toggle
|
||||
var _$UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
|
||||
position = $elm.offset(), // $elm is the current trigger / element that opened the colorPicker
|
||||
$window = $(window),
|
||||
gap = this.color.options.gap; // this.color.options stores all options
|
||||
|
||||
return { // this demo is a copy of the internal usage (to show how it works);
|
||||
'left': (_$UI._left = position.left) -
|
||||
((_$UI._left += _$UI._width -
|
||||
($window.scrollLeft() + $window.width())) + gap > 0 ?
|
||||
_$UI._left + gap : 0),
|
||||
'top': (_$UI._top = position.top + $elm.outerHeight()) -
|
||||
((_$UI._top += _$UI._height -
|
||||
($window.scrollTop() + $window.height())) + gap > 0 ?
|
||||
_$UI._top + gap : 0)
|
||||
}
|
||||
},
|
||||
renderCallback: function($elm, toggled) {
|
||||
var colors = this.color.colors; // the whole color object
|
||||
var rgb = colors.RND.rgb; // the RGB color in 0-255
|
||||
|
@ -64,7 +64,7 @@
|
||||
|
||||
function extractValue(elm) {
|
||||
return elm.value || elm.getAttribute('value') ||
|
||||
$(elm).css('background-color') || '#fff';
|
||||
$(elm).css('background-color') || '#FFF';
|
||||
}
|
||||
|
||||
function resolveEventType(event) {
|
||||
@ -90,8 +90,9 @@
|
||||
|
||||
_colorPicker.$trigger = $this;
|
||||
|
||||
(_$UI || build()).css({
|
||||
'left': (_$UI._left = position.left) -
|
||||
(_$UI || build()).css(
|
||||
_options.positionCallback.call(_colorPicker, $this) ||
|
||||
{'left': (_$UI._left = position.left) -
|
||||
((_$UI._left += _$UI._width -
|
||||
($window.scrollLeft() + $window.width())) + gap > 0 ?
|
||||
_$UI._left + gap : 0),
|
||||
@ -275,6 +276,7 @@
|
||||
opacity: true,
|
||||
renderCallback: noop,
|
||||
buildCallback: noop,
|
||||
positionCallback: noop,
|
||||
body: document.body,
|
||||
scrollResize: true,
|
||||
gap: 4,
|
||||
|
File diff suppressed because one or more lines are too long
4
jqColorPicker.min.js
vendored
4
jqColorPicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tinyColorPicker",
|
||||
"version": "1.0.8",
|
||||
"version": "1.1.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/PitPik/tinyColorPicker.git"
|
||||
|
Loading…
x
Reference in New Issue
Block a user