Browse Source

stay in view-port support for scroll and resize

…and $trigger in colorPicker model
pull/25/head
peterd 7 years ago
parent
commit
233ea3d05b
  1. 2
      README.md
  2. 8
      index.html
  3. 14
      jqColorPicker.js
  4. 2
      jqColorPicker.js.map
  5. 2
      jqColorPicker.min.js

2
README.md

@ -49,6 +49,7 @@ $('.color').colorPicker({
css: '', // replaces existing css
cssAddon: '', // adds css to existing
margin: '', // positioning margin (can also be set in cssAddon)
scrollResize: true // toggle for reposition colorPicker on window.resize/scroll
preventFocus: false // prevents default on focus of input fields,
body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change)
});
@ -73,6 +74,7 @@ colors.js is a quite handy tool for color calculations/conversion (gray value, c
If you need more complex calculations or more color spaces, use the version from https://github.com/PitPik/colorPicker. It supports also cmy, cmyk, XYZ and Lab.
```javascript
myColorPicker: {
$trigger: ... // jQuery object of active trigger or null if none active
color: { // instance of Color inside colorPicker
colors: { all kinds of color values... see later},
options: { all the options you set or that are set as default... },

8
index.html

@ -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';
@ -506,7 +506,7 @@ window.myColorPicker = $('input.color').colorPicker({
e.stopPropagation && e.stopPropagation();
that.toggle();
}
})
});
},
cssAddon: // could also be in a css file instead

14
jqColorPicker.js

@ -66,12 +66,12 @@
function toggle(event) {
var $this = $(this),
position,
position = $this.offset(),
$window = $(window);
if (event) {
position = $this.offset();
_$trigger = findElement($this);
_colorPicker.$trigger = $this;
(_$UI || build()).css({
'left': !(_$UI[0]._right = position.left + _$UI[0]._width >
@ -93,6 +93,7 @@
} else {
$(_$UI).hide(_options.animationSpeed, function() {
_$trigger.blur();
_colorPicker.$trigger = null;
preRender(false);
});
}
@ -252,13 +253,20 @@
opacity: true,
renderCallback: noop,
buidCallback: noop,
body: document.body
body: document.body,
scrollResize: true
// css: '',
// cssAddon: '',
// margin: '',
// preventFocus: false
}, options);
!_colorPicker && options.scrollResize && $(window).
on('resize scroll', function() {
if (_colorPicker.$trigger) {
_colorPicker.toggle.call(_colorPicker.$trigger[0], true);
}
});
_instance = _instance ? _instance.add(this) : this;
_instance.colorPicker = _colorPicker ||
(_colorPicker = new ColorPicker(options));

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

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

Loading…
Cancel
Save