Lp 1723651: Add Fallback for HTML5 Date Element in OPAC

Add some JavaScript code to check if the user's browser supports a
HTML5 element, and if not, we provide some fallback code to add an
input format tip and to provide a default value in some cases.

* A new JavaSCript function, supportsType(), is added to
  opac/parts/js.tt2.

* Fallback code is added to opac/parts/place_hold.tt2 to offer the
  format hint if the HTML5 date input element is not supported.

* Fallback code is added to opac/myopac/holds/edit.tt2 if the HTML5
  date input element is not supported.  This code adds a format hint
  and sets a default value for the expire_time and thaw_date elements.

Signed-off-by: Jason Stephenson <jason@sigio.com>

diff --git a/Open-ILS/src/templates/opac/myopac/holds/edit.tt2 b/Open-ILS/src/templates/opac/myopac/holds/edit.tt2
index 61fb6e5..c0b6193 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/holds/edit.tt2
+++ b/Open-ILS/src/templates/opac/myopac/holds/edit.tt2
@@ -68,6 +68,13 @@
                                 value="[% expire_time | html %]"
                                 min="[% get_tomorrow_date | html; %]" />
                         </td>
+                            <script type="text/javascript">
+                            var etElement = document.getElementsByName("expire_time")[0];
+                            if (!supportsType(etElement)) {
+                                etElement.value = "[% ahr.expire_time ? date.format(ctx.parse_datetime(ahr.expire_time), DATE_FORMAT) : '' %]";
+                                document.write('<td class="fmt-note"><em>[% l('Enter date in MM/DD/YYYY format') %]</em></td>');
+                            }
+                            </script>
                     </tr>
                     <tr>
                         <th>
@@ -93,6 +100,13 @@
                                 value="[% thaw_date | html %]"
                                 min="[% get_tomorrow_date | html; %]" />
                         </td>
+                            <script type="text/javascript">
+                            var tdElement = document.getElementsByName("thaw_date")[0];
+                            if (!supportsType(tdElement)) {
+                                tdElement.value = "[% ahr.thaw_date ? date.format(ctx.parse_datetime(ahr.thaw_date), DATE_FORMAT) : '' %]";
+                                document.write('<td class="fmt-note"><em>[% l('Enter date in MM/DD/YYYY format') %]</em></td>');
+                            }
+                            </script>
                     </tr>
                     [% END %]
 

diff --git a/Open-ILS/src/templates/opac/parts/js.tt2 b/Open-ILS/src/templates/opac/parts/js.tt2
index 01fb9f9..f77842e 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/js.tt2
+++ b/Open-ILS/src/templates/opac/parts/js.tt2
@@ -20,6 +20,39 @@
 }
 </script>
 
+<!-- Check for HTML5 input support.
+     Stolen from https://quirksmode.org/blog/archives/2015/03/better_modern_i.html. -->
+<script type="text/javascript">
+function supportsType(input) {
+    var desiredType = input.getAttribute('type');
+    var supported = false;
+    if (input.type === desiredType) {
+        supported = true;
+    }
+    input.value = 'Hello world';
+    var helloWorldAccepted = (input.value === 'Hello world');
+    switch (desiredType) {
+        case "email":
+        case "url":
+            if (!input.validationMessage) {
+                supported = false;
+            }
+            break;
+        case "color":
+        case "date":
+        case "datetime":
+        case "month":
+        case "time":
+        case "week":
+            if (helloWorldAccepted) {
+                supported = false;
+            }
+            break;
+    }
+    return supported;
+}
+</script>
+
 [%- IF ctx.use_stripe %]
 <script type="text/javascript">unHideMe($("pay_fines_now"));[%# the DOM is loaded now, right? %]</script>
 [% END -%]

diff --git a/Open-ILS/src/templates/opac/parts/place_hold.tt2 b/Open-ILS/src/templates/opac/parts/place_hold.tt2
index b903fe6..ce6667f 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/place_hold.tt2
+++ b/Open-ILS/src/templates/opac/parts/place_hold.tt2
@@ -253,6 +253,12 @@ function toggleActivationDate() {
                        min="[% get_tomorrow_date | html; %]" />
                 [% IF ctx.proto == 'oils' %]
                 <em>[% l('Enter date in MM/DD/YYYY format') %]</em>
+                [% ELSE %]
+                <script type="text/javascript">
+                if (!supportsType(document.getElementById("thaw_date"))) {
+                    document.write("<em>[% l('Enter date in MM/DD/YYYY format') %]</em>");
+                }
+                </script>
                 [% END %]
             </blockquote>
         </p>