New positionCallback

Added new callback to customary position the colorPicker on toggle.
pull/67/head 1.1.0
peterd 8 years ago
parent cd0e084ceb
commit 57c19961fd

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

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…
Cancel
Save