I've been meaning to do this for ages, and finally scraped a few hours
together to get it done.
As Evergreen 1.4 is introducing the use of Dojo
(http://dojotoolkit.org) for a number of administrative interfaces,
and even more so for 2.0 (acquisitions and serials interfaces), I
thought it might make sense to start using Dojo to replace other
widgets. In my dream world, the fewer widget sources that we use, the
simpler infrastructure maintenance and extension shall be.
Okay, enough gobbledygook. Attached is a patch (less than 200 lines)
that introduces the use of the Dojo dijit.DateTextBox widget to
replace the use of the jscalendar date-picker widget in the OPAC. It's
not yet perfect, but it's headed there. I don't have extensive
experience with the OPAC code, so I'm hoping Bill and/or Jason can
take a look and see if there are any obvious horrible things lurking
in this patch.
Summary: Tested successfully with Firefox 3.0.1 (Linux) and IE6 (under
IES4Linux).
Functional differences:
* Dates are now displayed according to the chosen locale, based on
CLDR standards. For example, the textual representation of ISO8601
format "2008-07-27" in the en-US locale is "7/27/2008"; in the fr-CA
locale the textual representation is "27/07/2008". Dates are still
transferred to the server in ISO8601 format. Accordingly, the
formatting hints have been removed from the hold date fields.
* <body> tag now gets class="tundra" attribute to support Dojo
widget formatting
* css_common.xml gets the Dojo tundra CSS imports
* js_common.xml gets the Dojo JavaScript required to support
dijit.DateTextBox; if we do start using more Dojo widgets, in the
longer term we might want to break this out into a separate file or
files if we don't want to load the whole Dojo stack for each page.
Regressions introduced:
* An attempt to pick a hold activation date in the past no longer
outlines the box in red; it just silently refuses to do anything.
Haven't investigated the reason for this change in behaviour too
deeply yet.
Potential improvements:
* Use a min: constraint of today to prevent picking dates before
today - this could short-circuit most of the current date comparison
code.
* Use the Dojo date methods to perform comparisons instead of the
Date extension (DP_DateExtensions) class currently in use.
* Use the Dojo date formatting methods to output dates in other
parts of the OPAC, such as the "Due date" and "Activate date" columns
in My Account
* Use the DateTextBox throughout the staff client as well and delete
jscalendar entirely
Dojo also includes support for number and currency formatting
according to the user's preferred locale; assuming the date approach
is considered acceptable, these would be the next areas to tackle
(IMHO).
--
Dan Scott
Laurentian University
=== modified file 'Open-ILS/web/opac/locale/en-US/opac.dtd'
--- Open-ILS/web/opac/locale/en-US/opac.dtd 2008-07-19 00:36:24 +0000
+++ Open-ILS/web/opac/locale/en-US/opac.dtd 2008-07-25 02:18:38 +0000
@@ -222,7 +222,6 @@
<!ENTITY opac.holds.freeze "Suspend this hold">
<!ENTITY opac.holds.freeze.help "A suspended hold will retain its place in the queue, but will not be fulfilled until it has been activated.">
<!ENTITY opac.holds.freeze.thaw_date "Automatically activate hold on:">
-<!ENTITY opac.holds.freeze.thaw_date.format "YYYY-MM-DD">
<!-- =================================================================
MyOPAC Preferences Page
=== modified file 'Open-ILS/web/opac/skin/default/js/holds.js'
--- Open-ILS/web/opac/skin/default/js/holds.js 2008-04-01 16:24:16 +0000
+++ Open-ILS/web/opac/skin/default/js/holds.js 2008-07-25 02:17:23 +0000
@@ -142,13 +142,13 @@
frozenbox.checked = true;
unHideMe($('hold_frozen_thaw_row'));
if(hold.thaw_date()) {
- $('holds_frozen_thaw_input').value = hold.thaw_date();
+ dijit.byId('holds_frozen_thaw_input').setValue(hold.thaw_date());
} else {
- $('holds_frozen_thaw_input').value = '';
+ dijit.byId('holds_frozen_thaw_input').setValue('');
}
} else {
frozenbox.checked = false;
- $('holds_frozen_thaw_input').value = '';
+ dijit.byId('holds_frozen_thaw_input').setValue('');
hideMe($('hold_frozen_thaw_row'));
}
}
@@ -715,7 +715,7 @@
if($('holds_frozen_chkbox').checked) {
hold.frozen('t');
unHideMe($('hold_frozen_thaw_row'));
- thawDate = $('holds_frozen_thaw_input').value;
+ thawDate = dojo.date.stamp.toISOString(dijit.byId('holds_frozen_thaw_input').getValue());
if(thawDate) {
thawDate = holdsVerifyThawDate(thawDate);
if(thawDate)
@@ -849,7 +849,7 @@
function holdsVerifyThawDateUI(element) {
- value = $(element).value;
+ value = dojo.date.stamp.toISOString(dijit.byId(element).getValue());
if(!value) {
removeCSSClass($(element), 'invalid_field');
=== modified file 'Open-ILS/web/opac/skin/default/js/myopac.js'
--- Open-ILS/web/opac/skin/default/js/myopac.js 2008-04-01 16:24:16 +0000
+++ Open-ILS/web/opac/skin/default/js/myopac.js 2008-07-25 02:08:40 +0000
@@ -1431,17 +1431,10 @@
hideMe($('myopac_holds_main_table'));
unHideMe($('myopac_holds_thaw_date_form'));
$('myopac_holds_thaw_date_input').focus();
- Calendar.setup({
- inputField : "myopac_holds_thaw_date_input",
- ifFormat : "%Y-%m-%d",
- button : "myopac_holds_thaw_date_img",
- align : "Tl",
- singleClick : true
- });
}
function myopacApplyThawDate() {
- var dateString = $('myopac_holds_thaw_date_input').value;
+ var dateString = dojo.date.stamp.toISOString(dijit.byId('myopac_holds_thaw_date_input').getValue());
if(dateString) {
dateString = holdsVerifyThawDate(dateString);
if(!dateString) return;
=== modified file 'Open-ILS/web/opac/skin/default/xml/body.xml'
--- Open-ILS/web/opac/skin/default/xml/body.xml 2007-11-07 12:56:05 +0000
+++ Open-ILS/web/opac/skin/default/xml/body.xml 2008-07-24 16:56:50 +0000
@@ -1,7 +1,7 @@
<!--
<body onload='init();' style='height: 100%; border: 2px solid black;'>
-->
-<body onload='init();'>
+<body class="tundra" onload='init();'>
<table width='100%'>
<tbody>
<tr>
=== modified file 'Open-ILS/web/opac/skin/default/xml/common/css_common.xml'
--- Open-ILS/web/opac/skin/default/xml/common/css_common.xml 2007-11-08 04:01:27 +0000
+++ Open-ILS/web/opac/skin/default/xml/common/css_common.xml 2008-07-24 17:04:14 +0000
@@ -1,4 +1,3 @@
-
<!-- CSS shared across pages goes here -->
<link type='text/css' rel='stylesheet' href="<!--#echo var='OILS_SKIN_BASE'-->/default/css/layout.css"/>
@@ -17,3 +16,9 @@
rel='search' title="Evergreen"
href="http://<!--#echo var='SERVER_NAME'-->/opac/extras/opensearch/1.1/-/osd.xml" />
+<!-- enable Dojo date picker -->
+<style type="text/css">
+ @import '/js/dojo/dojo/resources/dojo.css';
+ @import '/js/dojo/dijit/themes/tundra/tundra.css';
+ @import '/js/dojo/dijit/themes/tundra/tundra_rtl.css';
+</style>
=== modified file 'Open-ILS/web/opac/skin/default/xml/common/holds.xml'
--- Open-ILS/web/opac/skin/default/xml/common/holds.xml 2008-04-01 14:25:05 +0000
+++ Open-ILS/web/opac/skin/default/xml/common/holds.xml 2008-07-25 02:15:49 +0000
@@ -1,10 +1,4 @@
-<link rel="stylesheet" type="text/css"
- href='<!--#echo var="OILS_JS_BASE"-->/jscalendar/calendar-brown.css' title="win2k-cold-1" />
-<script language='javascript' type='text/javascript' src='<!--#echo var="OILS_JS_BASE"-->/jscalendar/calendar.js'></script>
-<script language='javascript' type='text/javascript' src='<!--#echo var="OILS_JS_BASE"-->/jscalendar/lang/calendar-en.js'></script>
-<script language='javascript' type='text/javascript' src='<!--#echo var="OILS_JS_BASE"-->/jscalendar/calendar-setup.js'></script>
<script language='javascript' type='text/javascript' src='<!--#echo var="OILS_OPAC_JS_HOST"-->/common/js/DP_DateExtensions.js'></script>
-
<div>
<div id='xulholds_box' class='hide_me canvas' style='margin-top: 6px;'>
<center>
@@ -147,26 +141,7 @@
&opac.holds.freeze.thaw_date;
</td>
<td class='holds_cell'>
- <input size='10' maxlength='10' id='holds_frozen_thaw_input' />
- <button style='padding: 0px;' id='holds_frozen_thaw_date_button'>
- <img src='<!--#echo var="OILS_JS_BASE"-->/jscalendar/img.gif'
- style="cursor: pointer; border: 1px solid red; padding: 0px; margin: -3px;"
- title="Date selector"
- onmouseover="this.style.background='red';"
- onmouseout="this.style.background=''" />
- </button>
- (&opac.holds.freeze.thaw_date.format;)
-
- <script language='javascript' type="text/javascript">
- Calendar.setup({
- inputField : "holds_frozen_thaw_input",
- ifFormat : "%Y-%m-%d",
- button : "holds_frozen_thaw_date_button",
- align : "Tl",
- singleClick : true
- });
- </script>
-
+ <input dojoType="dijit.form.DateTextBox" size='10' maxlength='10' id='holds_frozen_thaw_input' />
</td>
</tr>
@@ -248,5 +223,3 @@
<span id='holds_invalid_recipient' class='hide_me'>&common.hold.patron.invalid;</span>
</div>
-
-
=== modified file 'Open-ILS/web/opac/skin/default/xml/common/js_common.xml'
--- Open-ILS/web/opac/skin/default/xml/common/js_common.xml 2008-04-04 20:32:28 +0000
+++ Open-ILS/web/opac/skin/default/xml/common/js_common.xml 2008-07-25 02:15:05 +0000
@@ -32,3 +32,21 @@
<!--#endif -->
</script>
+
+ <!-- enable Dojo date picker -->
+ <script language='javascript' type="text/javascript">
+ var djConfig = {parseOnLoad: true, isDebug: true},
+ locale,
+ lang,
+ bidi;
+
+ djConfig.locale = '<!--#echo var="locale"-->';
+ </script>
+
+ <script type="text/javascript" src='/js/dojo/dojo/dojo.js'></script>
+
+ <script language="javascript" type="text/javascript">
+ dojo.require("dijit._Calendar");
+ dojo.require("dijit.form.DateTextBox");
+ dojo.require("dojo.parser");
+ </script>
=== modified file 'Open-ILS/web/opac/skin/default/xml/myopac/myopac_holds.xml'
--- Open-ILS/web/opac/skin/default/xml/myopac/myopac_holds.xml 2008-03-12 19:16:50 +0000
+++ Open-ILS/web/opac/skin/default/xml/myopac/myopac_holds.xml 2008-07-25 02:12:56 +0000
@@ -29,9 +29,7 @@
<div id='myopac_holds_thaw_date_form' class='hide_me'>
<div id='myopac_holds_freeze_select_thaw'>&myopac.holds.freeze.select_thaw;</div>
<p>
- <input type='text' id='myopac_holds_thaw_date_input'/>
- <img src="<!--#echo var='OILS_OPAC_JS_HOST'-->/common/js/jscalendar/img.gif" id='myopac_holds_thaw_date_img' class='cal_img'/>
- (&opac.holds.freeze.thaw_date.format;)
+ <input dojoType="dijit.form.DateTextBox" size='10' maxlength='10' type='text' id='myopac_holds_thaw_date_input' />
</p>
<p>
<button onclick='myopacApplyThawDate();'>&common.submit;</button>
