r1509 - in trunk: tests/visual ui
Author: pazu2k@gmail.com
Date: Sun Jan 4 07:13:01 2009
New Revision: 1509
Modified:
trunk/tests/visual/datepicker.html
trunk/ui/ui.datepicker.js
Log:
datepicker: Fixes regression in #3232 [datepicker position problem in IE
6/7]: added back functionality to detect whether the datepicker displays
outside a viewpoint. Additionally if the viewpoint is too small to fit the
datepicker it will show in its usual position regardless. I have also added
a visual test case for this.
Modified: trunk/tests/visual/datepicker.html
==============================================================================
--- trunk/tests/visual/datepicker.html (original)
+++ trunk/tests/visual/datepicker.html Sun Jan 4 07:13:01 2009
@@ -56,7 +56,9 @@
// disabled input datepicker
$('#d3').datepicker();
-
+
+ // bottom-right datepicker
+ $('#d4').datepicker({numberOfMonths: 3});
});
</script>
</head>
@@ -95,6 +97,12 @@
Datepicker disabled input
<div>
<input type="text" id="d3" disabled="disabled" />
+ </div>
+ </li>
+ <li class="plugin" style="position: absolute; right: 0; bottom: 0;
height: 40px">
+ Datepicker - positioned bottom-right
+ <div>
+ <input type="text" id="d4">
</div>
</li>
</ul>
Modified: trunk/ui/ui.datepicker.js
==============================================================================
--- trunk/ui/ui.datepicker.js (original)
+++ trunk/ui/ui.datepicker.js Sun Jan 4 07:13:01 2009
@@ -608,10 +608,22 @@
},
/* Check positioning to remain on screen. */
- _checkOffset: function(inst, offset, isFixed) {
- offset.left -= (this._get(inst, 'isRTL') ? (inst.dpDiv.outerWidth() -
inst.input.outerWidth()) : 0);
+ _checkOffset: function(inst, offset, isFixed) {
+ var dpWidth = inst.dpDiv.outerWidth();
+ var dpHeight = inst.dpDiv.outerHeight();
+ var inputWidth = inst.input ? inst.input.outerWidth() : 0;
+ var inputHeight = inst.input ? inst.input.outerHeight() : 0;
+ var viewWidth = window.innerWidth ||
document.documentElement.clientWidth;
+ var viewHeight = window.innerHeight ||
document.documentElement.clientHeight;
+
+ offset.left -= (this._get(inst, 'isRTL') ? (dpWidth - inputWidth) : 0);
offset.left -= (isFixed && offset.left == inst.input.offset().left) ?
$(document).scrollLeft() : 0;
- offset.top -= (isFixed && offset.top == (inst.input.offset().top +
inst.input.outerHeight())) ? $(document).scrollTop() : 0;
+ offset.top -= (isFixed && offset.top == (inst.input.offset().top +
inputHeight)) ? $(document).scrollTop() : 0;
+
+ // now check if datepicker is showing outside window viewpoint - move to
a better place if so.
+ offset.left -= (offset.left + dpWidth > viewWidth && viewWidth >
dpWidth) ? Math.abs(offset.left + dpWidth - viewWidth) : 0;
+ offset.top -= (offset.top + dpHeight > viewHeight && viewHeight >
dpHeight) ? Math.abs(offset.top + dpHeight + inputHeight*2 - viewHeight) :
0;
+
return offset;
},