r1820 - in trunk: tests/visual/datepicker ui

r1820 - in trunk: tests/visual/datepicker ui

Author: pazu2k@gmail.com
Date: Tue Jan 27 21:11:10 2009
New Revision: 1820
Added:
trunk/tests/visual/datepicker/viewport.html
Modified:
trunk/ui/ui.datepicker.js
Log:
datepicker: fixes #3863: fixed vertical position when scroll position is
present and added a viewport visual testcase.
Added: trunk/tests/visual/datepicker/viewport.html
==============================================================================
--- (empty file)
+++ trunk/tests/visual/datepicker/viewport.html    Tue Jan 27 21:11:10 2009
@@ -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>

+ <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">
+

+ <label>Confirmed on</label>
+ <input type="text" name="Stage2MtgConfirmedOn"
id="Stage2MtgConfirmedOn" value="26 Jan 2009" class="datepicker" size="12"
title="Enter date">
+

+ <label>Contacts:</label>
+
+ <i></i>

+ <label>Postcode areas:</label>
+ <i></i>

+ <label>Document explanations given</label>
+ <input name="Stage2DocExplanGiven" type="radio" value="Y">
+ Yes
+ <input name="Stage2DocExplanGiven" type="radio" checked
value="N">
+
+ No

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

+ <label>Finance options given</label>
+
+ <input name="Stage2FinanceOptionsGiven" type="radio"
value="Y">
+ Yes
+ <input name="Stage2FinanceOptionsGiven" type="radio" checked
value="N">
+ No

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

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

+ <label>Agreement given</label>
+ <input name="Stage2AgreementGiven" type="radio" value="Y">
+ Yes
+ <input name="Stage2AgreementGiven" type="radio" checked
value="N">
+
+ No

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

+ <label>Medical letter given</label>
+
+ <input name="Stage2MedicalLetterGiven" type="radio" value="Y">
+ Yes
+ <input name="Stage2MedicalLetterGiven" type="radio" checked
value="N">
+ No

+ <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">
+

+ <label>Site visit contact</label>
+
+

+ <label>Confirmed on</label>
+ <input type="text" name="SiteVisitConfirmedOn"
id="SiteVisitConfirmedOn" value="26 Jan 2009" class="datepicker" size="12"
title="Enter date">
+

+ <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">
+
+

+ <label>Confirmed on</label>
+ <input type="text" name="DirectorInterviewConfirmedOn"
id="DirectorInterviewConfirmedOn" value="26 Jan 2009" class="datepicker"
size="12" title="Enter date">
+

+ <label>Attended</label>
+ <input name="DirectorInterviewAttended" type="radio"
value="Y">
+ Yes
+ <input name="DirectorInterviewAttended" type="radio" checked
value="N">
+
+ No

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

+ <label>Business plan Recd</label>
+
+ <input name="DirectorBusinessPlanRecd" type="radio" value="Y">
+ Yes
+ <input name="DirectorBusinessPlanRecd" type="radio" checked
value="N">
+ No

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

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

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

+ <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>
\ No newline at end of file
Modified: trunk/ui/ui.datepicker.js
==============================================================================
--- trunk/ui/ui.datepicker.js    (original)
+++ trunk/ui/ui.datepicker.js    Tue Jan 27 21:11:10 2009
@@ -617,14 +617,14 @@
        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;