Browse Source

fit in view-port update

pull/25/head
peterd 7 years ago
parent
commit
167c422c5e
  1. 1
      README.md
  2. 9
      index.html
  3. 25
      jqColorPicker.js
  4. 2
      jqColorPicker.js.map
  5. 4
      jqColorPicker.min.js

1
README.md

@ -50,6 +50,7 @@ $('.color').colorPicker({
cssAddon: '', // adds css to existing
margin: '', // positioning margin (can also be set in cssAddon)
scrollResize: true // toggle for reposition colorPicker on window.resize/scroll
gap: 4 // gap to right and bottom edge of view port if repositioned to fit
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)
});

9
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';
@ -187,6 +187,7 @@ window.myColorPicker = $('input.color').colorPicker({
},
cssAddon: // could also be in a css file instead
'.cp-color-picker{width:226px;}' +
'.cp-color-picker .cp-panel {line-height: 21px; float:right;' +
'padding:0 1px 0 8px; margin-top:-1px; overflow:visible}' +
'.cp-xy-slider:active {cursor:none;}' +
@ -198,7 +199,7 @@ window.myColorPicker = $('input.color').colorPicker({
'.cp-panel hr {margin:0 -2px 2px; height:1px; border:0;' +
'background:#666; border-top:1px solid #222;}' +
'.cp-panel .cp-HEX {width:44px; position:absolute; margin:1px -3px 0 -2px;}' +
'.cp-alpha {width:154px;}',
'.cp-alpha {width:155px;}',
renderCallback: function($elm, toggled) {
var colors = this.color.colors.RND,

25
jqColorPicker.js

@ -67,22 +67,27 @@
function toggle(event) {
var $this = $(this),
position = $this.offset(),
$window = $(window);
$window = $(window),
gap = _options.gap;
if (event) {
_$trigger = findElement($this);
_colorPicker.$trigger = $this;
(_$UI || build()).css({
'left': !(_$UI[0]._right = position.left + _$UI[0]._width >
$window.scrollLeft() + $window.width() ? 4 : '') ?
position.left : '',
'right': _$UI[0]._right,
'width': _$UI[0]._width,
'left': (_$UI[0]._left = position.left) -
((_$UI[0]._left = _$UI[0]._left + _$UI[0]._width -
($window.scrollLeft() + $window.width())) + gap > 0 ?
_$UI[0]._left + gap : 0),
'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
((_$UI[0]._top = _$UI[0]._top + _$UI[0]._height -
($window.scrollTop() + $window.height())) > 0 ?
_$UI[0]._top + 8 : 0)
($window.scrollTop() + $window.height())) + gap > 0 ?
_$UI[0]._top + gap : 0)
}).show(_options.animationSpeed, function() {
if (event === true) {
return;
}
_$alpha._width = _$alpha.width();
_$xy_slider._width = _$xy_slider.width();
_$xy_slider._height = _$xy_slider.height();
@ -103,7 +108,8 @@
$('head').append('<style type="text/css">' +
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
return _$UI = $(_html).css({'margin': _options.margin}).
return _$UI = $(_html).css({'margin': _options.margin,
'box-sizing': 'border-box'}).
appendTo('body').
show(0, function() {
_GPU = _options.GPU && $(this).css('perspective') === '';
@ -254,7 +260,8 @@
renderCallback: noop,
buidCallback: noop,
body: document.body,
scrollResize: true
scrollResize: true,
gap: 4
// css: '',
// cssAddon: '',
// margin: '',

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

Loading…
Cancel
Save