Browse Source

New positionCallback

Added new callback to customary position the colorPicker on toggle.
pull/67/head 1.1.0
peterd 6 years ago
parent
commit
57c19961fd
  1. 21
      README.md
  2. 17
      demo/index.js
  3. 8
      jqColorPicker.js
  4. 2
      jqColorPicker.js.map
  5. 4
      jqColorPicker.min.js
  6. 2
      package.json

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

17
demo/index.js

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

8
jqColorPicker.js

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

2
jqColorPicker.js.map
File diff suppressed because it is too large
View File

4
jqColorPicker.min.js
File diff suppressed because it is too large
View File

2
package.json

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