Skip to content
Permalink
Browse files

datepicker: fixes #3863: fixed vertical position when scroll position…

… is present and added a viewport visual testcase.
  • Loading branch information
Ca-Phun Ung
Ca-Phun Ung committed Jan 28, 2009
1 parent c9e6d28 commit 3aeeeeb75af2963e0733be9397314c99fdfba065
Showing with 280 additions and 3 deletions.
  1. +277 −0 tests/visual/datepicker/viewport.html
  2. +3 −3 ui/ui.datepicker.js
@@ -0,0 +1,277 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mon 26JanTest application details - by chrisv from #3863 (Viewport test)</title>
<link href="css/styling.css" rel="stylesheet" type="text/css">
<style type="text/css">
label {
float: left;
min-width: 12em;
}
tr.rule-above td {
border-top: solid 1px #CCCCCC;
margin-top: 1em;
}
</style>
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../../ui/ui.datepicker.js"></script>
<style type="text/css">
label.error {
color: #ff4c00;
font-style: italic;
}
input.error {
border: 1px dotted red;
}

</style>
<style type="text/css">
.ui-datepicker {
font-size: 80%;
}
</style>
<script type="text/javascript"> /* configure date picker */
$(function() {
$(".datepicker").datepicker({
dateFormat: 'd M yy',
firstDay: 1,
changeMonth: false, changeYear: false,
showOtherMonths: true,
mandatory: true
});
});
</script>
</head>
<body>
<div id="container">
<div id="center" class="column">
<h2>Mon 26JanTest</h2>
<h3>Application progress</h3>
<form name="frm" id="frm" method="post" action="">

<table>
<tr>
<td><label for="Firstname">First name:</label></td>
<td><input name="Firstname" id="Firstname" size="12" value="Mon"></td>
</tr>
<tr>
<td><label for="Lastname">Last name:</label></td>
<td><input name="Lastname" id="Lastname" size="12" value="26JanTest"></td>

</tr>
<tr>
<td><label for="Email">Email:</label></td>
<td><input name="Email" id="Email" size="18" value="x@y.com"></td>
</tr>
<tr>
<td><label for="RegionalMentorID">Responsible RM:</label></td>
<td><select name="RegionalMentorID" id="RegionalMentorID">

<option value=""></option>
</select>
</td>
</tr>
<tr>
<td><label for="Status">Status:</label></td>
<td><select name="Status" id="Status">
<option selected value="Active">Active</option>

<option value="Dropped out">Dropped out</option>
<option value="Completed">Completed</option>
</select>
</td>
</tr>
<tr class="rule-above">
<td>Applic’n rec’d</td>

<td><input type="text" name="ApplicationReceivedOn" id="ApplicationReceivedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date"></td>
</tr>
<tr class="rule-above">
<td>Stage 1 mtg</td>
<td><input type="text" name="Stage1MtgOnD" id="Stage1MtgOnD" value="27 Jan 2009" class="datepicker" size="12" title="Enter date">
<input type="text" name="Stage1MtgOnT" id="Stage1MtgOnT" value="11:00" size="4" title="Enter time">
@
<input name="Stage1MtgAt" id="Stage1MtgAt" value="someplace">
</td>

</tr>
<tr>
<td>&nbsp;</td>
<td><label>Confirmed on</label>
<input type="text" name="Stage1MtgConfirmedOn" id="Stage1MtgConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
</td>
</tr>
<tr>

<td>&nbsp;</td>
<td><label>Attended</label>
<input type="radio" name="Stage1MtgAttended" id="Stage1MtgAttendedY" value="Y">
Yes
<input type="radio" name="Stage1MtgAttended" id="Stage1MtgAttendedY" checked value="N">
No </td>
</tr>
<tr>

<td>&nbsp;</td>
<td><label>Hard-copy given</label>
<input name="Stage1HardCopyGiven" type="radio" value="Y">
Yes
<input name="Stage1HardCopyGiven" type="radio" checked value="N">
No </td>
</tr>
<tr>

<td>&nbsp;</td>
<td><br>
<label>Handover on</label>
<input type="text" name="Stage1HandoverOn" id="Stage1HandoverOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
</td>
</tr>
<tr class="rule-above">
<td>Stage 2 mtg</td>

<td><input type="text" name="Stage2MtgOnD" id="Stage2MtgOnD" value="28 Jan 2009" class="datepicker" size="12" title="Enter date">
<input type="text" name="Stage2MtgOnT" id="Stage2MtgOnT" value="11:00" size="4" title="Enter time">
@
<input name="Stage2MtgAt" id="Stage2MtgAt" value="someplace">
<br>
<label>Confirmed on</label>
<input type="text" name="Stage2MtgConfirmedOn" id="Stage2MtgConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
<br>
<label>Contacts:</label>

<i></i> <br>
<label>Postcode areas:</label>
<i></i> <br>
<label>Document explanations given</label>
<input name="Stage2DocExplanGiven" type="radio" value="Y">
Yes
<input name="Stage2DocExplanGiven" type="radio" checked value="N">

No <br>
<label>Franchisee contacts given</label>
<input name="Stage2ContactFranchiseesGiven" type="radio" value="Y">
Yes
<input name="Stage2ContactFranchiseesGiven" type="radio" checked value="N">
No <br>
<label>Finance options given</label>

<input name="Stage2FinanceOptionsGiven" type="radio" value="Y">
Yes
<input name="Stage2FinanceOptionsGiven" type="radio" checked value="N">
No <br>
<label>Financials given</label>
<input name="Stage2FinancialsGiven" type="radio" value="Y">
Yes
<input name="Stage2FinancialsGiven" type="radio" checked value="N">
No <br>

<label>Business plan given</label>
<input name="Stage2BusinessPlanGiven" type="radio" value="Y">
Yes
<input name="Stage2BusinessPlanGiven" type="radio" checked value="N">
No <br>
<label>Agreement given</label>
<input name="Stage2AgreementGiven" type="radio" value="Y">
Yes
<input name="Stage2AgreementGiven" type="radio" checked value="N">

No <br>
<label>Disclosure letter given</label>
<input name="Stage2DisclosureLetterGiven" type="radio" value="Y">
Yes
<input name="Stage2DisclosureLetterGiven" type="radio" checked value="N">
No <br>
<label>Medical letter given</label>

<input name="Stage2MedicalLetterGiven" type="radio" value="Y">
Yes
<input name="Stage2MedicalLetterGiven" type="radio" checked value="N">
No <br>
<label>Attended</label>
<input name="Stage2MtgAttended" type="radio" value="Y">
Yes
<input name="Stage2MtgAttended" type="radio" checked value="N">
No </td>

</tr>
<tr class="rule-above">
<td>Site visit</td>
<td><input type="text" name="SiteVisitOnD" id="SiteVisitOnD" value="29 Jan 2009" class="datepicker" size="12" title="Enter date">
<input type="text" name="SiteVisitOnT" id="SiteVisitOnT" value="13:00" size="4" title="Enter time">
@
<input name="SiteVisitAt" id="SiteVisitAt" value="somewhere else">
<br>
<label>Site visit contact</label>

<br>
<label>Confirmed on</label>
<input type="text" name="SiteVisitConfirmedOn" id="SiteVisitConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
<br>
<label>Attended</label>
<input name="SiteVisitAttended" type="radio" value="Y">
Yes
<input name="SiteVisitAttended" type="radio" checked value="N">

No </td>
</tr>
<tr class="rule-above">
<td>Director interview</td>
<td><input type="text" name="DirectorInterviewOnD" id="DirectorInterviewOnD" value="30 Jan 2009" class="datepicker" size="12" title="Enter date">
<input type="text" name="DirectorInterviewOnT" id="DirectorInterviewOnT" value="13:00" size="4" title="Enter time">
@
<input name="DirectorInterviewAt" id="DirectorInterviewAt" value="boss pad">

<br>
<label>Confirmed on</label>
<input type="text" name="DirectorInterviewConfirmedOn" id="DirectorInterviewConfirmedOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
<br>
<label>Attended</label>
<input name="DirectorInterviewAttended" type="radio" value="Y">
Yes
<input name="DirectorInterviewAttended" type="radio" checked value="N">

No <br>
<label>Financials Recd</label>
<input name="DirectorFinancialsRecd" type="radio" value="Y">
Yes
<input name="DirectorFinancialsRecd" type="radio" checked value="N">
No <br>
<label>Business plan Recd</label>

<input name="DirectorBusinessPlanRecd" type="radio" value="Y">
Yes
<input name="DirectorBusinessPlanRecd" type="radio" checked value="N">
No <br>
<label>Agreement Recd</label>
<input name="DirectorAgreementRecd" type="radio" value="Y">
Yes
<input name="DirectorAgreementRecd" type="radio" checked value="N">
No <br>

<label>Disclosure letter Recd</label>
<input name="DirectorDisclosureLetterRecd" type="radio" value="Y">
Yes
<input name="DirectorDisclosureLetterRecd" type="radio" checked value="N">
No <br>
<label>Medical letter Recd</label>
<input name="DirectorMedicalLetterRecd" type="radio" value="Y">
Yes
<input name="DirectorMedicalLetterRecd" type="radio" checked value="N">

No <br>
<label>Accept/decline sent on</label>
<input type="text" name="AcceptDeclineLetterSentOn" id="AcceptDeclineLetterSentOn" value="26 Jan 2009" class="datepicker" size="12" title="Enter date">
</td>
</tr>
</table>
</form>
</div>

</div>
<!-- 11ms -->
</body>
</html>
@@ -617,14 +617,14 @@ $.extend(Datepicker.prototype, {
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 || document.body.clientWidth;
var viewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var viewWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + $(document).scrollLeft();
var viewHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) + $(document).scrollTop();

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 + inputHeight)) ? $(document).scrollTop() : 0;

// now check if datepicker is showing outside window viewpoint - move to a better place if so.
// now check if datepicker is showing outside window viewport - 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;

0 comments on commit 3aeeeeb

Please sign in to comment.
You can’t perform that action at this time.